vue3-time-duration 0.3.0 → 0.3.2

package/dist/vue3-time-duration.es.js

@@ -1,19 +1,19 @@
-import { createElementBlock as I, openBlock as L, createStaticVNode as M, defineComponent as R, ref as r, computed as S, watch as N, createElementVNode as k, createCommentVNode as b, withDirectives as D, createVNode as V, vModelText as P, Fragment as U, renderList as W, normalizeClass as A, toDisplayString as y, onMounted as H, vShow as O } from "vue";
-const F = (p, m) => {
-  const o = p.__vccOpts || p;
-  for (const [h, c] of m)
-    o[h] = c;
-  return o;
+import { createElementBlock as w, openBlock as I, createStaticVNode as F, defineComponent as B, ref as r, computed as L, watch as M, createElementVNode as x, createCommentVNode as b, withDirectives as R, createVNode as N, vModelText as P, Fragment as U, renderList as W, normalizeClass as A, toDisplayString as y, onMounted as H, vShow as O } from "vue";
+const D = (p, m) => {
+  const d = p.__vccOpts || p;
+  for (const [g, v] of m)
+    d[g] = v;
+  return d;
 }, z = {}, X = { class: "icon-x-mark" };
 function Z(p, m) {
-  return L(), I("div", X, m[0] || (m[0] = [
-    M('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>', 1)
+  return I(), w("div", X, m[0] || (m[0] = [
+    F('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>', 1)
   ]));
 }
-const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]), q = { class: "ui-widget-time" }, G = { class: "ui-widget-time__w" }, J = {
+const j = /* @__PURE__ */ D(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]), q = { class: "ui-widget-time" }, G = { class: "ui-widget-time__w" }, J = {
   key: 0,
   class: "ui-widget-time__dropdown"
-}, K = ["onClick"], Q = /* @__PURE__ */ R({
+}, K = ["onClick"], Q = /* @__PURE__ */ B({
   __name: "UiWidgetTime",
   props: {
     timeListId: { type: Number, default: 0 },
@@ -21,74 +21,74 @@ const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]
   },
   emits: ["selectedId"],
   setup(p, { emit: m }) {
-    const o = p, h = m, c = r([]), s = r(!1), l = r(0), u = r(void 0), f = r(), v = r(!1), C = r(), w = r(0), g = S(() => c.value.length > 0 ? c.value : o.timeList), x = S(() => o.timeListId), _ = S({
+    const d = p, g = m, v = r([]), a = r(!1), l = r(0), u = r(void 0), f = r(), c = r(!1), k = r(), S = r(0), h = L(() => v.value.length > 0 ? v.value : d.timeList), C = L(() => d.timeListId), _ = L({
       get() {
         var e;
-        return u.value === void 0 ? (e = o.timeList.find((i) => i.id === x.value)) == null ? void 0 : e.time : u.value;
+        return u.value === void 0 ? (e = d.timeList.find((i) => i.id === C.value)) == null ? void 0 : e.time : u.value;
       },
       set(e) {
         u.value = e;
       }
     });
-    N(x, (e) => {
+    M(C, (e) => {
       var i;
-      l.value = e, _.value = (i = o.timeList.find((d) => d.id === e)) == null ? void 0 : i.time;
+      l.value = e, _.value = (i = d.timeList.find((o) => o.id === e)) == null ? void 0 : i.time;
     });
     const T = (e) => {
       var i;
-      l.value = e, _.value = (i = g.value.find((d) => d.id === l.value)) == null ? void 0 : i.time, s.value = !1, h("selectedId", l.value);
+      l.value = e, _.value = (i = h.value.find((o) => o.id === l.value)) == null ? void 0 : i.time, a.value = !1, g("selectedId", l.value);
     }, E = () => {
-      s.value = !0, setTimeout(() => {
+      a.value = !0, setTimeout(() => {
         var i;
-        const e = C.value;
-        e !== null && (w.value = g.value.findIndex((d) => Number(d.id) === l.value), (i = e[w.value]) == null || i.scrollIntoView());
+        const e = k.value;
+        e !== null && (S.value = h.value.findIndex((o) => Number(o.id) === l.value), (i = e[S.value]) == null || i.scrollIntoView());
       }, 250);
     }, t = () => {
       setTimeout(() => {
         var e, i;
-        v.value || (_.value = (e = g.value.find((d) => d.id === l.value)) == null ? void 0 : e.time, h("selectedId", (i = g.value.find((d) => d.id === l.value)) == null ? void 0 : i.id), s.value = !1);
-      }, 200), v.value = !1;
+        c.value || (_.value = (e = h.value.find((o) => o.id === l.value)) == null ? void 0 : e.time, g("selectedId", (i = h.value.find((o) => o.id === l.value)) == null ? void 0 : i.id), a.value = !1);
+      }, 200), c.value = !1;
     }, n = () => {
-      l.value = 0, c.value = [], _.value = "", f.value.focus(), v.value = !0, s.value = !0;
-    }, a = () => {
-      c.value = o.timeList.filter((e) => e.time.startsWith(u.value));
+      l.value = 0, v.value = [], _.value = "", f.value.focus(), c.value = !0, a.value = !0;
+    }, s = () => {
+      v.value = d.timeList.filter((e) => e.time.startsWith(u.value));
     };
-    return (e, i) => (L(), I("div", q, [
-      k("div", G, [
-        D(k("input", {
+    return (e, i) => (I(), w("div", q, [
+      x("div", G, [
+        R(x("input", {
           ref_key: "inputRef",
           ref: f,
-          "onUpdate:modelValue": i[0] || (i[0] = (d) => _.value = d),
+          "onUpdate:modelValue": i[0] || (i[0] = (o) => _.value = o),
           type: "text",
           class: "ui-widget-time__w-input",
           onClick: E,
           onFocusout: t,
-          onInput: a
+          onInput: s
         }, null, 544), [
           [P, _.value]
         ]),
-        V(j, {
+        N(j, {
           class: "ui-widget-time__w-icon",
           onClick: n
         })
       ]),
-      s.value ? (L(), I("div", J, [
-        (L(!0), I(U, null, W(g.value, (d, $) => (L(), I("div", { key: $ }, [
-          k("div", {
+      a.value ? (I(), w("div", J, [
+        (I(!0), w(U, null, W(h.value, (o, V) => (I(), w("div", { key: V }, [
+          x("div", {
             ref_for: !0,
             ref_key: "refItemList",
-            ref: C,
+            ref: k,
             class: A({
               "ui-widget-time__dropdown-item": !0,
-              "ui-widget-time__dropdown-item_selected": w.value === $
+              "ui-widget-time__dropdown-item_selected": S.value === V
             }),
-            onClick: (te) => T(d.id)
-          }, y(d.time), 11, K)
+            onClick: (te) => T(o.id)
+          }, y(o.time), 11, K)
         ]))), 128))
       ])) : b("", !0)
     ]));
   }
-}), B = /* @__PURE__ */ F(Q, [["__scopeId", "data-v-157c9b55"]]), Y = { class: "vue3-time-duration" }, ee = { class: "vue3-time-duration__t" }, le = /* @__PURE__ */ R({
+}), $ = /* @__PURE__ */ D(Q, [["__scopeId", "data-v-157c9b55"]]), Y = { class: "vue3-time-duration" }, ee = { class: "vue3-time-duration__t" }, le = /* @__PURE__ */ B({
   __name: "App",
   props: {
     initStart: { default: () => "00:00" },
@@ -97,46 +97,46 @@ const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]
   },
   emits: ["duration"],
   setup(p, { emit: m }) {
-    const o = p, h = m, c = r(0), s = r(o.initTimeList), l = r(), u = r(), f = r(), v = r(), C = S(() => (console.log("props.initStart", o.initStart), o.initStart)), w = S(() => (console.log("props.initEnd", o.initEnd), o.initEnd));
-    N(C, (t) => {
-      var n;
-      l.value = x(t), f.value = (n = s.value.find((a) => a.id === l.value)) == null ? void 0 : n.time;
-    }), N(w, (t) => {
-      var n;
-      u.value = x(t), v.value = (n = s.value.find((a) => a.id === u.value)) == null ? void 0 : n.time;
-    }), H(() => {
-      o.initTimeList.length === 0 && _(), c.value = s.value.length - 1;
+    const d = p, g = m, v = r(0), a = r(d.initTimeList), l = r(), u = r(), f = r(), c = r(), k = L(() => {
+      var t;
+      return l.value = C(d.initStart), f.value = (t = a.value.find((n) => n.id === l.value)) == null ? void 0 : t.time, d.initStart;
+    }), S = L(() => {
+      var t;
+      return u.value = C(d.initEnd), c.value = (t = a.value.find((n) => n.id === u.value)) == null ? void 0 : t.time, d.initEnd;
+    });
+    H(() => {
+      d.initTimeList.length === 0 && _(), v.value = a.value.length - 1;
     });
-    const g = S(
-      () => (h("duration", { start: f.value, end: v.value }), { start: f.value, end: v.value })
-    ), x = (t) => {
+    const h = L(
+      () => (g("duration", { start: f.value, end: c.value }), { start: f.value, end: c.value })
+    ), C = (t) => {
       var n;
-      return (n = s.value.find((a) => a.time === t)) == null ? void 0 : n.id;
+      return (n = a.value.find((s) => s.time === t)) == null ? void 0 : n.id;
     }, _ = () => {
-      let t = -1, n = "", a = 0, e = "";
+      let t = -1, n = "", s = 0, e = "";
       for (let i = 0; i < 288; i++)
-        a >= 60 && (a = 0), i % 12 === 0 && (t += 1), n = t.toString().length === 1 ? "0" + t.toString() : t.toString(), e = a.toString().length === 1 ? "0" + a.toString() : a.toString(), s.value.push({ id: i, time: n + ":" + e }), a += 5;
+        s >= 60 && (s = 0), i % 12 === 0 && (t += 1), n = t.toString().length === 1 ? "0" + t.toString() : t.toString(), e = s.toString().length === 1 ? "0" + s.toString() : s.toString(), a.value.push({ id: i, time: n + ":" + e }), s += 5;
     }, T = (t) => {
-      var n, a;
-      l.value = t, u.value = t >= u.value ? t + 1 : u.value, u.value > c.value && (u.value = 0), f.value = (n = s.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, v.value = (a = s.value.find((e) => e.id === u.value)) == null ? void 0 : a.time;
+      var n, s;
+      l.value = t, u.value = t >= u.value ? t + 1 : u.value, u.value > v.value && (u.value = 0), f.value = (n = a.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, c.value = (s = a.value.find((e) => e.id === u.value)) == null ? void 0 : s.time;
     }, E = (t) => {
-      var n, a;
-      u.value = t, l.value = t <= l.value ? t - 1 : l.value, l.value < 0 && (l.value = c.value), f.value = (n = s.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, v.value = (a = s.value.find((e) => e.id === u.value)) == null ? void 0 : a.time;
+      var n, s;
+      u.value = t, l.value = t <= l.value ? t - 1 : l.value, l.value < 0 && (l.value = v.value), f.value = (n = a.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, c.value = (s = a.value.find((e) => e.id === u.value)) == null ? void 0 : s.time;
     };
-    return (t, n) => (L(), I("div", Y, [
-      D(k("div", null, y(g.value) + " " + y(C.value) + " " + y(w.value), 513), [
+    return (t, n) => (I(), w("div", Y, [
+      R(x("div", null, y(h.value) + " " + y(k.value) + " " + y(S.value), 513), [
         [O, !1]
       ]),
-      k("div", ee, [
-        V(B, {
+      x("div", ee, [
+        N($, {
           class: "vue3-time-duration__t-left",
-          "time-list": s.value,
+          "time-list": a.value,
           "time-list-id": l.value,
           onSelectedId: T
         }, null, 8, ["time-list", "time-list-id"]),
-        V(B, {
+        N($, {
           class: "vue3-time-duration__t-right",
-          "time-list": s.value,
+          "time-list": a.value,
           "time-list-id": u.value,
           onSelectedId: E
         }, null, 8, ["time-list", "time-list-id"])

package/dist/vue3-time-duration.umd.js

@@ -1 +1 @@
-(function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-time-duration"]=g(e.Vue))})(this,function(e){"use strict";const g=(_,f)=>{const r=_.__vccOpts||_;for(const[w,u]of f)r[w]=u;return r},E={},B={class:"icon-x-mark"};function T(_,f){return e.openBlock(),e.createElementBlock("div",B,f[0]||(f[0]=[e.createStaticVNode('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>',1)]))}const V=g(E,[["render",T],["__scopeId","data-v-7f1f4e49"]]),N={class:"ui-widget-time"},D={class:"ui-widget-time__w"},$={key:0,class:"ui-widget-time__dropdown"},R=["onClick"],x=g(e.defineComponent({__name:"UiWidgetTime",props:{timeListId:{type:Number,default:0},timeList:{type:Array,default:[]}},emits:["selectedId"],setup(_,{emit:f}){const r=_,w=f,u=e.ref([]),s=e.ref(!1),l=e.ref(0),d=e.ref(void 0),p=e.ref(),m=e.ref(!1),k=e.ref(),I=e.ref(0),h=e.computed(()=>u.value.length>0?u.value:r.timeList),L=e.computed(()=>r.timeListId),v=e.computed({get(){var t;return d.value===void 0?(t=r.timeList.find(n=>n.id===L.value))==null?void 0:t.time:d.value},set(t){d.value=t}});e.watch(L,t=>{var n;l.value=t,v.value=(n=r.timeList.find(c=>c.id===t))==null?void 0:n.time});const S=t=>{var n;l.value=t,v.value=(n=h.value.find(c=>c.id===l.value))==null?void 0:n.time,s.value=!1,w("selectedId",l.value)},C=()=>{s.value=!0,setTimeout(()=>{var n;const t=k.value;t!==null&&(I.value=h.value.findIndex(c=>Number(c.id)===l.value),(n=t[I.value])==null||n.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,n;m.value||(v.value=(t=h.value.find(c=>c.id===l.value))==null?void 0:t.time,w("selectedId",(n=h.value.find(c=>c.id===l.value))==null?void 0:n.id),s.value=!1)},200),m.value=!1},o=()=>{l.value=0,u.value=[],v.value="",p.value.focus(),m.value=!0,s.value=!0},a=()=>{u.value=r.timeList.filter(t=>t.time.startsWith(d.value))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",D,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:p,"onUpdate:modelValue":n[0]||(n[0]=c=>v.value=c),type:"text",class:"ui-widget-time__w-input",onClick:C,onFocusout:i,onInput:a},null,544),[[e.vModelText,v.value]]),e.createVNode(V,{class:"ui-widget-time__w-icon",onClick:o})]),s.value?(e.openBlock(),e.createElementBlock("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(c,y)=>(e.openBlock(),e.createElementBlock("div",{key:y},[e.createElementVNode("div",{ref_for:!0,ref_key:"refItemList",ref:k,class:e.normalizeClass({"ui-widget-time__dropdown-item":!0,"ui-widget-time__dropdown-item_selected":I.value===y}),onClick:U=>S(c.id)},e.toDisplayString(c.time),11,R)]))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-157c9b55"]]),F={class:"vue3-time-duration"},M={class:"vue3-time-duration__t"};return e.defineComponent({__name:"App",props:{initStart:{default:()=>"00:00"},initEnd:{default:()=>"00:05"},initTimeList:{default:()=>[]}},emits:["duration"],setup(_,{emit:f}){const r=_,w=f,u=e.ref(0),s=e.ref(r.initTimeList),l=e.ref(),d=e.ref(),p=e.ref(),m=e.ref(),k=e.computed(()=>(console.log("props.initStart",r.initStart),r.initStart)),I=e.computed(()=>(console.log("props.initEnd",r.initEnd),r.initEnd));e.watch(k,i=>{var o;l.value=L(i),p.value=(o=s.value.find(a=>a.id===l.value))==null?void 0:o.time}),e.watch(I,i=>{var o;d.value=L(i),m.value=(o=s.value.find(a=>a.id===d.value))==null?void 0:o.time}),e.onMounted(()=>{r.initTimeList.length===0&&v(),u.value=s.value.length-1});const h=e.computed(()=>(w("duration",{start:p.value,end:m.value}),{start:p.value,end:m.value})),L=i=>{var o;return(o=s.value.find(a=>a.time===i))==null?void 0:o.id},v=()=>{let i=-1,o="",a=0,t="";for(let n=0;n<288;n++)a>=60&&(a=0),n%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=a.toString().length===1?"0"+a.toString():a.toString(),s.value.push({id:n,time:o+":"+t}),a+=5},S=i=>{var o,a;l.value=i,d.value=i>=d.value?i+1:d.value,d.value>u.value&&(d.value=0),p.value=(o=s.value.find(t=>t.id===l.value))==null?void 0:o.time,m.value=(a=s.value.find(t=>t.id===d.value))==null?void 0:a.time},C=i=>{var o,a;d.value=i,l.value=i<=l.value?i-1:l.value,l.value<0&&(l.value=u.value),p.value=(o=s.value.find(t=>t.id===l.value))==null?void 0:o.time,m.value=(a=s.value.find(t=>t.id===d.value))==null?void 0:a.time};return(i,o)=>(e.openBlock(),e.createElementBlock("div",F,[e.withDirectives(e.createElementVNode("div",null,e.toDisplayString(h.value)+" "+e.toDisplayString(k.value)+" "+e.toDisplayString(I.value),513),[[e.vShow,!1]]),e.createElementVNode("div",M,[e.createVNode(x,{class:"vue3-time-duration__t-left","time-list":s.value,"time-list-id":l.value,onSelectedId:S},null,8,["time-list","time-list-id"]),e.createVNode(x,{class:"vue3-time-duration__t-right","time-list":s.value,"time-list-id":d.value,onSelectedId:C},null,8,["time-list","time-list-id"])])]))}})});
+(function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-time-duration"]=g(e.Vue))})(this,function(e){"use strict";const g=(_,f)=>{const r=_.__vccOpts||_;for(const[w,u]of f)r[w]=u;return r},B={},E={class:"icon-x-mark"};function T(_,f){return e.openBlock(),e.createElementBlock("div",E,f[0]||(f[0]=[e.createStaticVNode('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>',1)]))}const V=g(B,[["render",T],["__scopeId","data-v-7f1f4e49"]]),N={class:"ui-widget-time"},D={class:"ui-widget-time__w"},$={key:0,class:"ui-widget-time__dropdown"},R=["onClick"],x=g(e.defineComponent({__name:"UiWidgetTime",props:{timeListId:{type:Number,default:0},timeList:{type:Array,default:[]}},emits:["selectedId"],setup(_,{emit:f}){const r=_,w=f,u=e.ref([]),a=e.ref(!1),l=e.ref(0),d=e.ref(void 0),p=e.ref(),m=e.ref(!1),L=e.ref(),I=e.ref(0),h=e.computed(()=>u.value.length>0?u.value:r.timeList),k=e.computed(()=>r.timeListId),v=e.computed({get(){var t;return d.value===void 0?(t=r.timeList.find(n=>n.id===k.value))==null?void 0:t.time:d.value},set(t){d.value=t}});e.watch(k,t=>{var n;l.value=t,v.value=(n=r.timeList.find(c=>c.id===t))==null?void 0:n.time});const S=t=>{var n;l.value=t,v.value=(n=h.value.find(c=>c.id===l.value))==null?void 0:n.time,a.value=!1,w("selectedId",l.value)},C=()=>{a.value=!0,setTimeout(()=>{var n;const t=L.value;t!==null&&(I.value=h.value.findIndex(c=>Number(c.id)===l.value),(n=t[I.value])==null||n.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,n;m.value||(v.value=(t=h.value.find(c=>c.id===l.value))==null?void 0:t.time,w("selectedId",(n=h.value.find(c=>c.id===l.value))==null?void 0:n.id),a.value=!1)},200),m.value=!1},o=()=>{l.value=0,u.value=[],v.value="",p.value.focus(),m.value=!0,a.value=!0},s=()=>{u.value=r.timeList.filter(t=>t.time.startsWith(d.value))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",D,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:p,"onUpdate:modelValue":n[0]||(n[0]=c=>v.value=c),type:"text",class:"ui-widget-time__w-input",onClick:C,onFocusout:i,onInput:s},null,544),[[e.vModelText,v.value]]),e.createVNode(V,{class:"ui-widget-time__w-icon",onClick:o})]),a.value?(e.openBlock(),e.createElementBlock("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(c,y)=>(e.openBlock(),e.createElementBlock("div",{key:y},[e.createElementVNode("div",{ref_for:!0,ref_key:"refItemList",ref:L,class:e.normalizeClass({"ui-widget-time__dropdown-item":!0,"ui-widget-time__dropdown-item_selected":I.value===y}),onClick:U=>S(c.id)},e.toDisplayString(c.time),11,R)]))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-157c9b55"]]),F={class:"vue3-time-duration"},M={class:"vue3-time-duration__t"};return e.defineComponent({__name:"App",props:{initStart:{default:()=>"00:00"},initEnd:{default:()=>"00:05"},initTimeList:{default:()=>[]}},emits:["duration"],setup(_,{emit:f}){const r=_,w=f,u=e.ref(0),a=e.ref(r.initTimeList),l=e.ref(),d=e.ref(),p=e.ref(),m=e.ref(),L=e.computed(()=>{var i;return l.value=k(r.initStart),p.value=(i=a.value.find(o=>o.id===l.value))==null?void 0:i.time,r.initStart}),I=e.computed(()=>{var i;return d.value=k(r.initEnd),m.value=(i=a.value.find(o=>o.id===d.value))==null?void 0:i.time,r.initEnd});e.onMounted(()=>{r.initTimeList.length===0&&v(),u.value=a.value.length-1});const h=e.computed(()=>(w("duration",{start:p.value,end:m.value}),{start:p.value,end:m.value})),k=i=>{var o;return(o=a.value.find(s=>s.time===i))==null?void 0:o.id},v=()=>{let i=-1,o="",s=0,t="";for(let n=0;n<288;n++)s>=60&&(s=0),n%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=s.toString().length===1?"0"+s.toString():s.toString(),a.value.push({id:n,time:o+":"+t}),s+=5},S=i=>{var o,s;l.value=i,d.value=i>=d.value?i+1:d.value,d.value>u.value&&(d.value=0),p.value=(o=a.value.find(t=>t.id===l.value))==null?void 0:o.time,m.value=(s=a.value.find(t=>t.id===d.value))==null?void 0:s.time},C=i=>{var o,s;d.value=i,l.value=i<=l.value?i-1:l.value,l.value<0&&(l.value=u.value),p.value=(o=a.value.find(t=>t.id===l.value))==null?void 0:o.time,m.value=(s=a.value.find(t=>t.id===d.value))==null?void 0:s.time};return(i,o)=>(e.openBlock(),e.createElementBlock("div",F,[e.withDirectives(e.createElementVNode("div",null,e.toDisplayString(h.value)+" "+e.toDisplayString(L.value)+" "+e.toDisplayString(I.value),513),[[e.vShow,!1]]),e.createElementVNode("div",M,[e.createVNode(x,{class:"vue3-time-duration__t-left","time-list":a.value,"time-list-id":l.value,onSelectedId:S},null,8,["time-list","time-list-id"]),e.createVNode(x,{class:"vue3-time-duration__t-right","time-list":a.value,"time-list-id":d.value,onSelectedId:C},null,8,["time-list","time-list-id"])])]))}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-time-duration",
   "description": "UI Widget to set a time duration. This is a component for vue 3",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "author": "Egor Lentarev",
   "license": "MIT",