@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.49 kB
Source Map (JSON)
{"version":3,"file":"video-timer.vue2.mjs","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","_a","finishInput","confirm","units","unit","isValidNumber","toNumber","seconds","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,GAeRC,IAAOC,GAEPC,IAAKC,EAAc,OAAO,GAE1BC,IAAcC,EAAIP,EAAM,IAAI,GAC5BQ,IAAUD,EAAI,EAAK,GACnBE,IAAQF,EAAI,EAAE,GACdG,IAAYH,EAAI,EAAE,GAElBI,IAAQJ,EAAsB,GAC9BK,IAAaL,EAAiB,GAE9BM,IAAgBC,EAAS,MAAMC,EAAcT,EAAY,KAAK,CAAC;AAErE,IAAAU;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASiB,MAAA;AACP,QAAAX,EAAY,QAAQW;AAAA,MAAA;AAAA,IAExB,GACAD;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASiB,MAAA;AACP,QAAIA,MACFT,EAAQ,QAAQ;AAAA,MAClB;AAAA,IAEJ,GAEAU,EAAU,MAAM;AACd,MAAAF;AAAA,QACE,MAAMhB,EAAM;AAAA,QACZ,MAAM;AACJ,UAAAmB,EAAS,MAAM;AACP,YAAAV,EAAA,QAAQG,EAAW,QAAQQ,EAAcR,EAAW,KAAK,IAAI,IAAI,KAAK;AAAA,UAAA,CAC7E;AAAA,QACH;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB;AAAA,IAAA,CACD;AAED,aAASS,IAAc;AACrB,MAAI,CAACrB,EAAM,YAAY,CAACQ,EAAQ,UAC9BA,EAAQ,QAAQ,IAChBE,EAAU,QAAQG,EAAc,OAChCM,EAAS,MAAM;;AACb,SAAAG,IAAAX,EAAM,UAAN,QAAAW,EAAa;AAAA,MAAM,CACpB;AAAA,IACH;AAGF,aAASC,EAAYC,GAAkB;AAGrC,UAFAhB,EAAQ,QAAQ,IAEZgB,GAAS;AACX,cAAMC,IAAQf,EAAU,MAAM,KAAK,EAAE,MAAM,GAAG;AAE9C,QAAIe,EAAM,MAAM,CAAAC,MAAQC,EAAcD,CAAI,CAAC,MAC7BpB,EAAA,QAAQmB,EACjB,IAAIG,CAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,OAAO,CAACC,GAASH,GAAMI,MAAMD,IAAU,MAAMC,IAAIJ,GAAM,CAAC,GAC3DpB,EAAY,QAAQ,KAAK,IAAIA,EAAY,OAAON,EAAM,QAAQ,GACzDE,EAAA,UAAUI,EAAY,KAAK;AAAA,MAClC;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}