vexip-ui/lib/components/video/video-timer.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../input/index.cjs");const E=require("@vexip-ui/config"),c=require("@vexip-ui/utils"),b=require("./helper.cjs"),N=require("../input/input.cjs"),q=e.defineComponent({name:"VideoTimer",__name:"video-timer",props:{time:{type:Number,default:0},duration:{type:Number,default:0},disabled:{type:Boolean,default:!1}},emits:["change"],setup(m,{emit:k}){const a=m,y=k,i=E.useNameHelper("video"),l=e.ref(a.time),u=e.ref(!1),d=e.ref(84),o=e.ref(""),f=e.ref(),s=e.ref(),v=e.computed(()=>b.formatSeconds(l.value));e.watch(()=>a.time,t=>{l.value=t}),e.watch(()=>a.disabled,t=>{t&&(u.value=!1)}),e.onMounted(()=>{e.watch(()=>a.duration,()=>{e.nextTick(()=>{d.value=s.value?c.getRangeWidth(s.value)*2+20:84})},{immediate:!0})});function g(){!a.disabled&&!u.value&&(u.value=!0,o.value=v.value,e.nextTick(()=>{var t;(t=f.value)==null||t.focus()}))}function p(t){if(u.value=!1,t){const n=o.value.trim().split(":");n.every(r=>c.isValidNumber(r))&&(l.value=n.map(c.toNumber).reverse().slice(0,3).reduce((r,h,B)=>r+60**B*h,0),l.value=Math.min(l.value,a.duration),y("change",l.value))}}return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(i).be("control"),e.unref(i).be("timer"),a.disabled&&e.unref(i).bem("control","disabled")]),style:e.normalizeStyle({width:`${d.value}px`}),onClick:g},[u.value?(e.openBlock(),e.createBlock(e.unref(N),{key:0,ref_key:"input",ref:f,value:o.value,"onUpdate:value":n[0]||(n[0]=r=>o.value=r),class:e.normalizeClass(e.unref(i).be("timer-input")),size:"small",transparent:"",onBlur:n[1]||(n[1]=r=>p(!1)),onEnter:n[2]||(n[2]=r=>p(!0))},null,8,["value","class"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("span",null,e.toDisplayString(v.value),1),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i).be("timer-separator"))},"/",2),e.createElementVNode("span",{ref_key:"durationEl",ref:s},e.toDisplayString(e.unref(b.formatSeconds)(m.duration)),513)],64))],6))}});module.exports=q;
//# sourceMappingURL=video-timer.vue2.cjs.map