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