vue3-time-duration 0.2.7 → 0.2.8

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

@@ -97,7 +97,7 @@ const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]
   },
   emits: ["duration"],
   setup(p, { emit: m }) {
-    const r = p, g = m, c = o(0), u = o([]), l = o(), s = o(), f = o(), v = o(), k = L(() => r.initStart), C = L(() => r.initEnd);
+    const r = p, g = m, c = o(0), u = o(r.initTimeList), l = o(), s = o(), f = o(), v = o(), k = L(() => r.initStart), C = L(() => r.initEnd);
     N(k, (t) => {
       var n;
       l.value = S(t), f.value = (n = u.value.find((a) => a.id === l.value)) == null ? void 0 : n.time;

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},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"},$={class:"ui-widget-time__w"},D={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([]),d=e.ref(!1),n=e.ref(0),s=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 s.value===void 0?(t=r.timeList.find(l=>l.id===k.value))==null?void 0:t.time:s.value},set(t){s.value=t}});e.watch(k,t=>{var l;n.value=t,v.value=(l=r.timeList.find(c=>c.id===t))==null?void 0:l.time});const C=t=>{var l;n.value=t,v.value=(l=h.value.find(c=>c.id===n.value))==null?void 0:l.time,d.value=!1,w("selectedId",n.value)},S=()=>{d.value=!0,setTimeout(()=>{var l;const t=L.value;t!==null&&(I.value=h.value.findIndex(c=>Number(c.id)===n.value),(l=t[I.value])==null||l.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,l;m.value||(v.value=(t=h.value.find(c=>c.id===n.value))==null?void 0:t.time,w("selectedId",(l=h.value.find(c=>c.id===n.value))==null?void 0:l.id),d.value=!1)},200),m.value=!1},o=()=>{n.value=0,u.value=[],v.value="",p.value.focus(),m.value=!0,d.value=!0},a=()=>{u.value=r.timeList.filter(t=>t.time.startsWith(s.value))};return(t,l)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",$,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:p,"onUpdate:modelValue":l[0]||(l[0]=c=>v.value=c),type:"text",class:"ui-widget-time__w-input",onClick:S,onFocusout:i,onInput:a},null,544),[[e.vModelText,v.value]]),e.createVNode(V,{class:"ui-widget-time__w-icon",onClick:o})]),d.value?(e.openBlock(),e.createElementBlock("div",D,[(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=>C(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),d=e.ref([]),n=e.ref(),s=e.ref(),p=e.ref(),m=e.ref(),L=e.computed(()=>r.initStart),I=e.computed(()=>r.initEnd);e.watch(L,i=>{var o;n.value=k(i),p.value=(o=d.value.find(a=>a.id===n.value))==null?void 0:o.time}),e.watch(I,i=>{var o;s.value=k(i),m.value=(o=d.value.find(a=>a.id===s.value))==null?void 0:o.time}),e.onMounted(()=>{r.initTimeList.length===0&&v(),u.value=d.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=d.value.find(a=>a.time===i))==null?void 0:o.id},v=()=>{let i=-1,o="",a=0,t="";for(let l=0;l<288;l++)a>=60&&(a=0),l%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=a.toString().length===1?"0"+a.toString():a.toString(),d.value.push({id:l,time:o+":"+t}),a+=5},C=i=>{var o,a;n.value=i,s.value=i>=s.value?i+1:s.value,s.value>u.value&&(s.value=0),p.value=(o=d.value.find(t=>t.id===n.value))==null?void 0:o.time,m.value=(a=d.value.find(t=>t.id===s.value))==null?void 0:a.time},S=i=>{var o,a;s.value=i,n.value=i<=n.value?i-1:n.value,n.value<0&&(n.value=u.value),p.value=(o=d.value.find(t=>t.id===n.value))==null?void 0:o.time,m.value=(a=d.value.find(t=>t.id===s.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),513),[[e.vShow,!1]]),e.createElementVNode("div",M,[e.createVNode(x,{class:"vue3-time-duration__t-left","time-list":d.value,"time-list-id":n.value,onSelectedId:C},null,8,["time-list","time-list-id"]),e.createVNode(x,{class:"vue3-time-duration__t-right","time-list":d.value,"time-list-id":s.value,onSelectedId:S},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"},$={class:"ui-widget-time__w"},D={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([]),d=e.ref(!1),n=e.ref(0),s=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 s.value===void 0?(t=r.timeList.find(l=>l.id===k.value))==null?void 0:t.time:s.value},set(t){s.value=t}});e.watch(k,t=>{var l;n.value=t,v.value=(l=r.timeList.find(c=>c.id===t))==null?void 0:l.time});const C=t=>{var l;n.value=t,v.value=(l=h.value.find(c=>c.id===n.value))==null?void 0:l.time,d.value=!1,w("selectedId",n.value)},S=()=>{d.value=!0,setTimeout(()=>{var l;const t=L.value;t!==null&&(I.value=h.value.findIndex(c=>Number(c.id)===n.value),(l=t[I.value])==null||l.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,l;m.value||(v.value=(t=h.value.find(c=>c.id===n.value))==null?void 0:t.time,w("selectedId",(l=h.value.find(c=>c.id===n.value))==null?void 0:l.id),d.value=!1)},200),m.value=!1},o=()=>{n.value=0,u.value=[],v.value="",p.value.focus(),m.value=!0,d.value=!0},a=()=>{u.value=r.timeList.filter(t=>t.time.startsWith(s.value))};return(t,l)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",$,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:p,"onUpdate:modelValue":l[0]||(l[0]=c=>v.value=c),type:"text",class:"ui-widget-time__w-input",onClick:S,onFocusout:i,onInput:a},null,544),[[e.vModelText,v.value]]),e.createVNode(V,{class:"ui-widget-time__w-icon",onClick:o})]),d.value?(e.openBlock(),e.createElementBlock("div",D,[(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=>C(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),d=e.ref(r.initTimeList),n=e.ref(),s=e.ref(),p=e.ref(),m=e.ref(),L=e.computed(()=>r.initStart),I=e.computed(()=>r.initEnd);e.watch(L,i=>{var o;n.value=k(i),p.value=(o=d.value.find(a=>a.id===n.value))==null?void 0:o.time}),e.watch(I,i=>{var o;s.value=k(i),m.value=(o=d.value.find(a=>a.id===s.value))==null?void 0:o.time}),e.onMounted(()=>{r.initTimeList.length===0&&v(),u.value=d.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=d.value.find(a=>a.time===i))==null?void 0:o.id},v=()=>{let i=-1,o="",a=0,t="";for(let l=0;l<288;l++)a>=60&&(a=0),l%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=a.toString().length===1?"0"+a.toString():a.toString(),d.value.push({id:l,time:o+":"+t}),a+=5},C=i=>{var o,a;n.value=i,s.value=i>=s.value?i+1:s.value,s.value>u.value&&(s.value=0),p.value=(o=d.value.find(t=>t.id===n.value))==null?void 0:o.time,m.value=(a=d.value.find(t=>t.id===s.value))==null?void 0:a.time},S=i=>{var o,a;s.value=i,n.value=i<=n.value?i-1:n.value,n.value<0&&(n.value=u.value),p.value=(o=d.value.find(t=>t.id===n.value))==null?void 0:o.time,m.value=(a=d.value.find(t=>t.id===s.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),513),[[e.vShow,!1]]),e.createElementVNode("div",M,[e.createVNode(x,{class:"vue3-time-duration__t-left","time-list":d.value,"time-list-id":n.value,onSelectedId:C},null,8,["time-list","time-list-id"]),e.createVNode(x,{class:"vue3-time-duration__t-right","time-list":d.value,"time-list-id":s.value,onSelectedId:S},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.2.7",
+  "version": "0.2.8",
   "private": false,
   "author": "Egor Lentarev",
   "license": "MIT",