@extclp/vexip-ui/es/components/date-picker/time-control.vue2.mjs.map

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

{"version":3,"file":"time-control.vue2.mjs","sources":["../../../components/date-picker/time-control.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref } from 'vue'\r\n\r\nimport { useNameHelper } from '@vexip-ui/config'\r\nimport { doubleDigits } from '@vexip-ui/utils'\r\nimport { handleKeyEnter } from './helper'\r\n\r\nimport type { PropType } from 'vue'\r\nimport type { LocaleConfig } from '@vexip-ui/config'\r\nimport type { TimeType } from './symbol'\r\n\r\ndefineOptions({ name: 'TimeControl' })\r\n\r\nconst props = defineProps({\r\n  unitType: {\r\n    type: String as PropType<TimeType | ''>,\r\n    default: '',\r\n  },\r\n  enabled: {\r\n    type: Object as PropType<Record<TimeType, boolean>>,\r\n    default: () => ({}),\r\n  },\r\n  activated: {\r\n    type: Object as PropType<Record<TimeType, boolean>>,\r\n    default: () => ({}),\r\n  },\r\n  timeValue: {\r\n    type: Object as PropType<Record<TimeType, number>>,\r\n    default: () => ({}),\r\n  },\r\n  separator: {\r\n    type: String,\r\n    default: ':',\r\n  },\r\n  visible: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  focused: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  filler: {\r\n    type: String,\r\n    default: '-',\r\n    validator: (value: string) => value.length === 1,\r\n  },\r\n  steps: {\r\n    type: Array as PropType<number[]>,\r\n    default: () => [1, 1, 1],\r\n  },\r\n  ctrlSteps: {\r\n    type: Array as PropType<number[]>,\r\n    default: () => [5, 5, 5],\r\n  },\r\n  labels: {\r\n    type: Object as PropType<Partial<Record<TimeType, string>>>,\r\n    default: () => ({}),\r\n  },\r\n  hasError: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  placeholder: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  readonly: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  labeledBy: {\r\n    type: String,\r\n    default: undefined,\r\n  },\r\n  locale: {\r\n    type: Object as PropType<LocaleConfig['timePicker']>,\r\n    default: () => ({}),\r\n  },\r\n})\r\n\r\nconst emit = defineEmits([\r\n  'input',\r\n  'plus',\r\n  'minus',\r\n  'enter',\r\n  'cancel',\r\n  'unit-focus',\r\n  'unit-blur',\r\n  'prev-unit',\r\n  'next-unit',\r\n  'blur',\r\n])\r\n\r\nconst nh = useNameHelper('time-picker')\r\n\r\nconst wrapper = ref<HTMLElement>()\r\n\r\nconst label = computed(() => props.locale.ariaLabel ?? {})\r\nconst isActivated = computed(() => {\r\n  return (Object.keys(props.enabled) as TimeType[]).every(type => {\r\n    return !props.enabled[type] || props.activated[type]\r\n  })\r\n})\r\nconst formattedHour = computed(() => {\r\n  return formatValue('hour')\r\n})\r\nconst formattedMinute = computed(() => {\r\n  return formatValue('minute')\r\n})\r\nconst formattedSecond = computed(() => {\r\n  return formatValue('second')\r\n})\r\n\r\ndefineExpose({\r\n  isActivated,\r\n  wrapper,\r\n  focus: () => {\r\n    wrapper.value?.focus()\r\n  },\r\n  blur: () => {\r\n    wrapper.value?.blur()\r\n  },\r\n})\r\n\r\nfunction formatValue(type: TimeType) {\r\n  return props.activated[type]\r\n    ? doubleDigits(props.timeValue[type])\r\n    : `${props.filler}${props.filler}`\r\n}\r\n\r\nfunction getUnitFocusClass(type: TimeType) {\r\n  return props.visible && props.unitType === type ? nh.bem('unit', 'focused') : null\r\n}\r\n\r\nfunction handleInputFocus(type: TimeType) {\r\n  if (props.readonly) return\r\n\r\n  emit('unit-focus', type)\r\n}\r\n\r\nfunction handleInput(event: KeyboardEvent) {\r\n  if (!props.visible) return\r\n\r\n  const type = handleKeyEnter(event)\r\n\r\n  if (props.readonly) {\r\n    switch (type) {\r\n      case 'ok': {\r\n        emit('enter')\r\n        break\r\n      }\r\n      case 'esc': {\r\n        emit('cancel')\r\n        break\r\n      }\r\n    }\r\n\r\n    return\r\n  }\r\n\r\n  switch (type) {\r\n    case 'next': {\r\n      emit('next-unit')\r\n      break\r\n    }\r\n    case 'prev': {\r\n      emit('prev-unit')\r\n      break\r\n    }\r\n    case 'up': {\r\n      emit('minus', event.ctrlKey)\r\n      break\r\n    }\r\n    case 'down': {\r\n      emit('plus', event.ctrlKey)\r\n      break\r\n    }\r\n    case 'ok': {\r\n      handleEnter()\r\n      break\r\n    }\r\n    case 'esc': {\r\n      handleCancel()\r\n      break\r\n    }\r\n    default: {\r\n      if (typeof type === 'number') {\r\n        emit('input', type)\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nfunction handleEnter() {\r\n  emit('enter')\r\n}\r\n\r\nfunction handleCancel() {\r\n  emit('cancel')\r\n}\r\n\r\nfunction handleBlur() {\r\n  emit('blur')\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    ref=\"wrapper\"\r\n    :class=\"[nh.be('input'), hasError && nh.bem('input', 'error')]\"\r\n    role=\"none\"\r\n    tabindex=\"-1\"\r\n    @keydown=\"handleInput\"\r\n    @blur=\"handleBlur\"\r\n  >\r\n    <div v-if=\"!focused && !isActivated\" :class=\"nh.be('placeholder')\">\r\n      {{ placeholder }}\r\n    </div>\r\n    <template v-else>\r\n      <div\r\n        v-if=\"enabled.hour\"\r\n        :class=\"[nh.be('unit'), getUnitFocusClass('hour')]\"\r\n        role=\"spinbutton\"\r\n        :aria-label=\"label.hour\"\r\n        :aria-valuenow=\"props.timeValue.hour\"\r\n        :aria-valuetext=\"formattedHour\"\r\n        :aria-valuemin=\"0\"\r\n        :aria-valuemax=\"23\"\r\n        :aria-labelledby=\"labeledBy\"\r\n        @click=\"handleInputFocus('hour')\"\r\n      >\r\n        {{ formattedHour }}\r\n      </div>\r\n      <div\r\n        v-if=\"labels.hour\"\r\n        :class=\"nh.be('label')\"\r\n        aria-hidden\r\n        @click=\"handleInputFocus('hour')\"\r\n      >\r\n        {{ labels.hour }}\r\n      </div>\r\n      <template v-if=\"enabled.minute\">\r\n        <div v-if=\"enabled.hour\" :class=\"nh.be('separator')\" aria-hidden>\r\n          {{ separator }}\r\n        </div>\r\n        <div\r\n          :class=\"[nh.be('unit'), getUnitFocusClass('minute')]\"\r\n          role=\"spinbutton\"\r\n          :aria-label=\"label.minute\"\r\n          :aria-valuenow=\"props.timeValue.minute\"\r\n          :aria-valuetext=\"formattedMinute\"\r\n          :aria-valuemin=\"0\"\r\n          :aria-valuemax=\"59\"\r\n          :aria-labelledby=\"labeledBy\"\r\n          @click=\"handleInputFocus('minute')\"\r\n        >\r\n          {{ formattedMinute }}\r\n        </div>\r\n        <div\r\n          v-if=\"labels.minute\"\r\n          :class=\"nh.be('label')\"\r\n          aria-hidden\r\n          @click=\"handleInputFocus('minute')\"\r\n        >\r\n          {{ labels.minute }}\r\n        </div>\r\n      </template>\r\n      <template v-if=\"enabled.second\">\r\n        <div v-if=\"enabled.minute || enabled.hour\" :class=\"nh.be('separator')\" aria-hidden>\r\n          {{ separator }}\r\n        </div>\r\n        <div\r\n          :class=\"[nh.be('unit'), getUnitFocusClass('second')]\"\r\n          role=\"spinbutton\"\r\n          :aria-label=\"label.second\"\r\n          :aria-valuenow=\"props.timeValue.second\"\r\n          :aria-valuetext=\"formattedSecond\"\r\n          :aria-valuemin=\"0\"\r\n          :aria-valuemax=\"59\"\r\n          :aria-labelledby=\"labeledBy\"\r\n          @click=\"handleInputFocus('second')\"\r\n        >\r\n          {{ formattedSecond }}\r\n        </div>\r\n        <div\r\n          v-if=\"labels.second\"\r\n          :class=\"nh.be('label')\"\r\n          aria-hidden\r\n          @click=\"handleInputFocus('second')\"\r\n        >\r\n          {{ labels.second }}\r\n        </div>\r\n      </template>\r\n    </template>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","wrapper","ref","label","computed","isActivated","type","formattedHour","formatValue","formattedMinute","formattedSecond","__expose","_a","doubleDigits","getUnitFocusClass","handleInputFocus","handleInput","event","handleKeyEnter","handleEnter","handleCancel","handleBlur","_createElementBlock","_normalizeClass","_unref","_Fragment","_hoisted_1","_toDisplayString","_createElementVNode","_hoisted_2","_hoisted_3"],"mappings":"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"}