@extclp/vexip-ui/es/components/video/video-timer.vue2.mjs.map

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

{"version":3,"file":"video-timer.vue2.mjs","sources":["../../../components/video/video-timer.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Input } from '@/components/input'\r\n\r\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\r\n\r\nimport { useNameHelper } from '@vexip-ui/config'\r\nimport { getRangeWidth, isValidNumber, toNumber } from '@vexip-ui/utils'\r\nimport { formatSeconds } from './helper'\r\n\r\ndefineOptions({ name: 'VideoTimer' })\r\n\r\nconst props = defineProps({\r\n  time: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  duration: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n})\r\n\r\nconst emit = defineEmits(['change'])\r\n\r\nconst nh = useNameHelper('video')\r\n\r\nconst currentTime = ref(props.time)\r\nconst editing = ref(false)\r\nconst width = ref(84)\r\nconst inputTime = ref('')\r\n\r\nconst input = ref<HTMLInputElement>()\r\nconst durationEl = ref<HTMLElement>()\r\n\r\nconst formattedTime = computed(() => formatSeconds(currentTime.value))\r\n\r\nwatch(\r\n  () => props.time,\r\n  value => {\r\n    currentTime.value = value\r\n  },\r\n)\r\nwatch(\r\n  () => props.disabled,\r\n  value => {\r\n    if (value) {\r\n      editing.value = false\r\n    }\r\n  },\r\n)\r\n\r\nonMounted(() => {\r\n  watch(\r\n    () => props.duration,\r\n    () => {\r\n      nextTick(() => {\r\n        width.value = durationEl.value ? getRangeWidth(durationEl.value) * 2 + 20 : 84\r\n      })\r\n    },\r\n    { immediate: true },\r\n  )\r\n})\r\n\r\nfunction handleClick() {\r\n  if (!props.disabled && !editing.value) {\r\n    editing.value = true\r\n    inputTime.value = formattedTime.value\r\n    nextTick(() => {\r\n      input.value?.focus()\r\n    })\r\n  }\r\n}\r\n\r\nfunction finishInput(confirm: boolean) {\r\n  editing.value = false\r\n\r\n  if (confirm) {\r\n    const units = inputTime.value.trim().split(':')\r\n\r\n    if (units.every(unit => isValidNumber(unit))) {\r\n      currentTime.value = units\r\n        .map(toNumber)\r\n        .reverse()\r\n        .slice(0, 3)\r\n        .reduce((seconds, unit, i) => seconds + 60 ** i * unit, 0)\r\n      currentTime.value = Math.min(currentTime.value, props.duration)\r\n      emit('change', currentTime.value)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :class=\"[nh.be('control'), nh.be('timer'), props.disabled && nh.bem('control', 'disabled')]\"\r\n    :style=\"{ width: `${width}px` }\"\r\n    @click=\"handleClick\"\r\n  >\r\n    <Input\r\n      v-if=\"editing\"\r\n      ref=\"input\"\r\n      v-model:value=\"inputTime\"\r\n      :class=\"nh.be('timer-input')\"\r\n      size=\"small\"\r\n      transparent\r\n      @blur=\"finishInput(false)\"\r\n      @enter=\"finishInput(true)\"\r\n    ></Input>\r\n    <template v-else>\r\n      <span>\r\n        {{ formattedTime }}\r\n      </span>\r\n      <span :class=\"nh.be('timer-separator')\">/</span>\r\n      <span ref=\"durationEl\">\r\n        {{ formatSeconds(duration) }}\r\n      </span>\r\n    </template>\r\n  </div>\r\n</template>\r\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","_createElementBlock","_normalizeClass","_unref","_createBlock","Input","$event","_Fragment","_createElementVNode","_toDisplayString"],"mappings":"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"}