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

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

{"version":3,"file":"video-timer.vue2.cjs","sources":["../../../components/video/video-timer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Input } from '@/components/input'\n\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { getRangeWidth, isValidNumber, toNumber } from '@vexip-ui/utils'\nimport { formatSeconds } from './helper'\n\ndefineOptions({ name: 'VideoTimer' })\n\nconst props = defineProps({\n  time: {\n    type: Number,\n    default: 0,\n  },\n  duration: {\n    type: Number,\n    default: 0,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst emit = defineEmits(['change'])\n\nconst nh = useNameHelper('video')\n\nconst currentTime = ref(props.time)\nconst editing = ref(false)\nconst width = ref(84)\nconst inputTime = ref('')\n\nconst input = ref<HTMLInputElement>()\nconst durationEl = ref<HTMLElement>()\n\nconst formattedTime = computed(() => formatSeconds(currentTime.value))\n\nwatch(\n  () => props.time,\n  value => {\n    currentTime.value = value\n  },\n)\nwatch(\n  () => props.disabled,\n  value => {\n    if (value) {\n      editing.value = false\n    }\n  },\n)\n\nonMounted(() => {\n  watch(\n    () => props.duration,\n    () => {\n      nextTick(() => {\n        width.value = durationEl.value ? getRangeWidth(durationEl.value) * 2 + 20 : 84\n      })\n    },\n    { immediate: true },\n  )\n})\n\nfunction handleClick() {\n  if (!props.disabled && !editing.value) {\n    editing.value = true\n    inputTime.value = formattedTime.value\n    nextTick(() => {\n      input.value?.focus()\n    })\n  }\n}\n\nfunction finishInput(confirm: boolean) {\n  editing.value = false\n\n  if (confirm) {\n    const units = inputTime.value.trim().split(':')\n\n    if (units.every(unit => isValidNumber(unit))) {\n      currentTime.value = units\n        .map(toNumber)\n        .reverse()\n        .slice(0, 3)\n        .reduce((seconds, unit, i) => seconds + 60 ** i * unit, 0)\n      currentTime.value = Math.min(currentTime.value, props.duration)\n      emit('change', currentTime.value)\n    }\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"[nh.be('control'), nh.be('timer'), props.disabled && nh.bem('control', 'disabled')]\"\n    :style=\"{ width: `${width}px` }\"\n    @click=\"handleClick\"\n  >\n    <Input\n      v-if=\"editing\"\n      ref=\"input\"\n      v-model:value=\"inputTime\"\n      :class=\"nh.be('timer-input')\"\n      size=\"small\"\n      transparent\n      @blur=\"finishInput(false)\"\n      @enter=\"finishInput(true)\"\n    ></Input>\n    <template v-else>\n      <span>\n        {{ formattedTime }}\n      </span>\n      <span :class=\"nh.be('timer-separator')\">/</span>\n      <span ref=\"durationEl\">\n        {{ formatSeconds(duration) }}\n      </span>\n    </template>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","currentTime","ref","editing","width","inputTime","input","durationEl","formattedTime","computed","formatSeconds","watch","value","onMounted","nextTick","getRangeWidth","handleClick","finishInput","confirm","units","unit","isValidNumber","toNumber","seconds","i","_createElementBlock","_normalizeClass","_unref","_createBlock","Input","$event","_Fragment","_createElementVNode","_toDisplayString"],"mappings":"qYAWA,MAAMA,EAAQC,EAeRC,EAAOC,EAEPC,EAAKC,gBAAc,OAAO,EAE1BC,EAAcC,EAAAA,IAAIP,EAAM,IAAI,EAC5BQ,EAAUD,MAAI,EAAK,EACnBE,EAAQF,MAAI,EAAE,EACdG,EAAYH,MAAI,EAAE,EAElBI,EAAQJ,EAAAA,IAAsB,EAC9BK,EAAaL,EAAAA,IAAiB,EAE9BM,EAAgBC,EAAAA,SAAS,IAAMC,EAAc,cAAAT,EAAY,KAAK,CAAC,EAErEU,EAAA,MACE,IAAMhB,EAAM,KACHiB,GAAA,CACPX,EAAY,MAAQW,CAAA,CAExB,EACAD,EAAA,MACE,IAAMhB,EAAM,SACHiB,GAAA,CACHA,IACFT,EAAQ,MAAQ,GAClB,CAEJ,EAEAU,EAAAA,UAAU,IAAM,CACdF,EAAA,MACE,IAAMhB,EAAM,SACZ,IAAM,CACJmB,EAAAA,SAAS,IAAM,CACPV,EAAA,MAAQG,EAAW,MAAQQ,EAAAA,cAAcR,EAAW,KAAK,EAAI,EAAI,GAAK,EAAA,CAC7E,CACH,EACA,CAAE,UAAW,EAAK,CACpB,CAAA,CACD,EAED,SAASS,GAAc,CACjB,CAACrB,EAAM,UAAY,CAACQ,EAAQ,QAC9BA,EAAQ,MAAQ,GAChBE,EAAU,MAAQG,EAAc,MAChCM,EAAAA,SAAS,IAAM,QACbR,EAAAA,EAAM,QAANA,MAAAA,EAAa,OAAM,CACpB,EACH,CAGF,SAASW,EAAYC,EAAkB,CAGrC,GAFAf,EAAQ,MAAQ,GAEZe,EAAS,CACX,MAAMC,EAAQd,EAAU,MAAM,KAAK,EAAE,MAAM,GAAG,EAE1Cc,EAAM,MAAMC,GAAQC,EAAc,cAAAD,CAAI,CAAC,IAC7BnB,EAAA,MAAQkB,EACjB,IAAIG,EAAQ,QAAA,EACZ,QAAQ,EACR,MAAM,EAAG,CAAC,EACV,OAAO,CAACC,EAASH,EAAMI,IAAMD,EAAU,IAAMC,EAAIJ,EAAM,CAAC,EAC3DnB,EAAY,MAAQ,KAAK,IAAIA,EAAY,MAAON,EAAM,QAAQ,EACzDE,EAAA,SAAUI,EAAY,KAAK,EAClC,CACF,6BAKAwB,EAAA,mBAwBM,MAAA,CAvBH,MAAQC,EAAAA,eAAA,CAAAC,EAAAA,MAAA5B,CAAA,EAAG,cAAe4B,EAAA,MAAE5B,CAAA,EAAC,GAAE,OAAA,EAAWJ,EAAM,UAAYgC,EAAA,MAAA5B,CAAA,EAAG,IAAG,UAAA,UAAA,CAAA,CAAA,EAClE,iCAAmBK,EAAK,KAAA,KAAA,EACxB,QAAOY,CAAA,GAGAb,EAAO,qBADfyB,EAAAA,YASSD,EAAAA,MAAAE,CAAA,EAAA,eAPH,QAAJ,IAAIvB,EACI,MAAOD,EAAS,sCAATA,EAAS,MAAAyB,GACvB,MAAKJ,EAAE,eAAAC,EAAA,MAAE5B,CAAA,EAAC,GAAE,aAAA,CAAA,EACb,KAAK,QACL,YAAA,GACC,sBAAMkB,EAAW,EAAA,GACjB,uBAAOA,EAAW,EAAA,8CAErBQ,EAQW,mBAAAM,EAAA,SAAA,CAAA,IAAA,GAAA,CAPTC,qBAEO,8BADFxB,EAAa,KAAA,EAAA,CAAA,EAElBwB,EAAAA,mBAAgD,OAAA,CAAzC,MAAKN,EAAE,eAAAC,EAAA,MAAE5B,CAAA,EAAC,GAAE,iBAAA,CAAA,CAAA,EAAqB,IAAC,CAAA,EACzCiC,EAAAA,mBAEO,OAAA,SAFG,aAAJ,IAAIzB,CAAA,EACL0B,EAAAA,gBAAAN,EAAAA,MAAAjB,EAAA,aAAA,EAAcd,EAAQ,QAAA,CAAA,EAAA,GAAA"}