@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\">\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAoERC,IAAOC,GAaPC,IAAKC,EAAc,aAAa,GAEhCC,IAAUC,EAAiB,GAE3BC,IAAQC,EAAS,MAAMT,EAAM,OAAO,aAAa,EAAE,GACnDU,IAAcD,EAAS,MACnB,OAAO,KAAKT,EAAM,OAAO,EAAiB,MAAM,CAAQW,MACvD,CAACX,EAAM,QAAQW,CAAI,KAAKX,EAAM,UAAUW,CAAI,CACpD,CACF,GACKC,IAAgBH,EAAS,MACtBI,EAAY,MAAM,CAC1B,GACKC,IAAkBL,EAAS,MACxBI,EAAY,QAAQ,CAC5B,GACKE,IAAkBN,EAAS,MACxBI,EAAY,QAAQ,CAC5B;AAEY,IAAAG,EAAA;AAAA,MACX,aAAAN;AAAA,MACA,SAAAJ;AAAA,MACA,OAAO,MAAM;;AACX,SAAAW,IAAAX,EAAQ,UAAR,QAAAW,EAAe;AAAA,MACjB;AAAA,MACA,MAAM,MAAM;;AACV,SAAAA,IAAAX,EAAQ,UAAR,QAAAW,EAAe;AAAA,MAAK;AAAA,IACtB,CACD;AAED,aAASJ,EAAYF,GAAgB;AACnC,aAAOX,EAAM,UAAUW,CAAI,IACvBO,EAAalB,EAAM,UAAUW,CAAI,CAAC,IAClC,GAAGX,EAAM,MAAM,GAAGA,EAAM,MAAM;AAAA,IAAA;AAGpC,aAASmB,EAAkBR,GAAgB;AAClC,aAAAX,EAAM,WAAWA,EAAM,aAAaW,IAAOP,EAAG,IAAI,QAAQ,SAAS,IAAI;AAAA,IAAA;AAGhF,aAASgB,EAAiBT,GAAgB;AACxC,MAAIX,EAAM,YAEVE,EAAK,cAAcS,CAAI;AAAA,IAAA;AAGzB,aAASU,EAAYC,GAAsB;AACrC,UAAA,CAACtB,EAAM,QAAS;AAEd,YAAAW,IAAOY,EAAeD,CAAK;AAEjC,UAAItB,EAAM,UAAU;AAClB,gBAAQW,GAAM;AAAA,UACZ,KAAK,MAAM;AACT,YAAAT,EAAK,OAAO;AACZ;AAAA,UAAA;AAAA,UAEF,KAAK,OAAO;AACV,YAAAA,EAAK,QAAQ;AACb;AAAA,UAAA;AAAA,QACF;AAGF;AAAA,MAAA;AAGF,cAAQS,GAAM;AAAA,QACZ,KAAK,QAAQ;AACX,UAAAT,EAAK,WAAW;AAChB;AAAA,QAAA;AAAA,QAEF,KAAK,QAAQ;AACX,UAAAA,EAAK,WAAW;AAChB;AAAA,QAAA;AAAA,QAEF,KAAK,MAAM;AACJ,UAAAA,EAAA,SAASoB,EAAM,OAAO;AAC3B;AAAA,QAAA;AAAA,QAEF,KAAK,QAAQ;AACN,UAAApB,EAAA,QAAQoB,EAAM,OAAO;AAC1B;AAAA,QAAA;AAAA,QAEF,KAAK,MAAM;AACG,UAAAE,EAAA;AACZ;AAAA,QAAA;AAAA,QAEF,KAAK,OAAO;AACG,UAAAC,EAAA;AACb;AAAA,QAAA;AAAA,QAEF;AACM,UAAA,OAAOd,KAAS,YAClBT,EAAK,SAASS,CAAI;AAAA,MAEtB;AAAA,IACF;AAGF,aAASa,IAAc;AACrB,MAAAtB,EAAK,OAAO;AAAA,IAAA;AAGd,aAASuB,IAAe;AACtB,MAAAvB,EAAK,QAAQ;AAAA,IAAA;AAGf,aAASwB,IAAa;AACpB,MAAAxB,EAAK,MAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}