Issue #80: Done.

src/components/durationjs.vue

@@ -1,8 +1,8 @@
 <template>
-<div class=" relative">
-  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
+<div class="relative">
+  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" id="timeButton">
     <div v-if="totalSeconds === 0" class="text-center">
-      <p>0s</p>
+      <p>0</p>
     </div>
     <div v-else class="flex justify-center items-center gap-1">
       <p>{{ days }}d</p>
@@ -11,7 +11,8 @@
       <p>{{ seconds }}s</p>
     </div>
   </div>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
+  <!-- v-closable="onClose" -->
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="onClose">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -127,6 +128,9 @@ export default {
     },
   },
   methods: {
+    onClose () {
+    this.openTimeSelect = false;
+    },
     /**
      * get focus element
      * @param {event} event
@@ -327,6 +331,27 @@ export default {
   mounted() {
     this.inputTypes = this.display.split('');
   },
+  directives: {
+    'closable': {
+      mounted(el, {value}) {
+        let handleOutsideClick = function(e) {
+          let target = e.target;
+          while (target && target.id !== 'timeButton') {
+            target = target.parentElement;
+          };
+          const isClickOutside = target?.id !== 'timeButton' && !el.contains(e.target)
+          if (isClickOutside) value();
+          e.stopPropagation();
+        }
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+          document.removeEventListener('click', handleOutsideClick);
+        };
+      },
+
+    }
+  },
+
 };
 </script>
 <style scoped>