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

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

{"version":3,"file":"time-wheel.vue2.mjs","sources":["../../../components/date-picker/time-wheel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Wheel } from '@/components/wheel'\n\nimport { ref, watch } from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { USE_TOUCH, doubleDigits, range } from '@vexip-ui/utils'\n\nimport type { WheelExposed } from '@/components/wheel'\nimport type { PropType } from 'vue'\nimport type { DisabledTime, TimeType, TimeWheelSlots } from './symbol'\n\ndefineOptions({ name: 'TimeWheel' })\n\nconst props = defineProps({\n  noArrow: {\n    type: Boolean,\n    default: false\n  },\n  hour: {\n    type: Number,\n    default: 0,\n    validator: (value: number) => value >= 0 && value <= 23\n  },\n  minute: {\n    type: Number,\n    default: 0,\n    validator: (value: number) => value >= 0 && value <= 59\n  },\n  second: {\n    type: Number,\n    default: 0,\n    validator: (value: number) => value >= 0 && value <= 59\n  },\n  candidate: {\n    default: 2 as 0 | 1 | 2 | 3,\n    validator: (value: number) => [0, 1, 2, 3].includes(value)\n  },\n  steps: {\n    type: Array as PropType<number[]>,\n    default: () => [1, 1, 1],\n    validator: (value: [number, number, number]) => {\n      if (value[0] && 24 % value[0] !== 0) {\n        return false\n      }\n\n      for (let i = 1; i < 3; ++i) {\n        if (value[i] && 60 % value[i] !== 0) {\n          return false\n        }\n      }\n\n      return true\n    }\n  },\n  pointer: {\n    type: Boolean,\n    default: USE_TOUCH\n  },\n  disabledTime: {\n    type: Object as PropType<DisabledTime>,\n    default: () => ({})\n  },\n  noTransition: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits(['change', 'toggle-col', 'update:hour', 'update:minute', 'update:second'])\n\ndefineSlots<TimeWheelSlots>()\n\nconst nh = useNameHelper('time-picker')\n\nconst currentHour = ref(props.hour)\nconst currentMinute = ref(props.minute)\nconst currentSecond = ref(props.second)\nconst hourRange = ref<number[]>([])\nconst minuteRange = ref<number[]>([])\nconst secondRange = ref<number[]>([])\n\nconst hourWheel = ref<WheelExposed>()\nconst minuteWheel = ref<WheelExposed>()\nconst secondWheel = ref<WheelExposed>()\n\nwatch(() => props.steps, updateTimeRange, { immediate: true })\nwatch(\n  () => props.hour,\n  value => {\n    currentHour.value = value\n  }\n)\nwatch(\n  () => props.minute,\n  value => {\n    currentMinute.value = value\n  }\n)\nwatch(\n  () => props.second,\n  value => {\n    currentSecond.value = value\n  }\n)\nwatch(currentHour, value => {\n  emit('update:hour', value)\n  emit('change', 'hour', value)\n})\nwatch(currentMinute, value => {\n  emit('update:minute', value)\n  emit('change', 'minute', value)\n})\nwatch(currentSecond, value => {\n  emit('update:second', value)\n  emit('change', 'second', value)\n})\n\ndefineExpose({ refreshWheel })\n\nfunction isHourDisabled(hour: number) {\n  return typeof props.disabledTime.hour === 'function' && props.disabledTime.hour(hour)\n}\n\nfunction isMinuteDisabled(minute: number) {\n  return (\n    typeof props.disabledTime.minute === 'function' &&\n    props.disabledTime.minute(currentHour.value, minute)\n  )\n}\n\nfunction isSecondDisabled(second: number) {\n  return (\n    typeof props.disabledTime.second === 'function' &&\n    props.disabledTime.second(currentHour.value, currentMinute.value, second)\n  )\n}\n\nfunction updateTimeRange() {\n  const [hourStep = 1, minuteStep = 1, secondStep = 1] = props.steps\n\n  hourRange.value = range(24 / hourStep, 0, hourStep)\n  minuteRange.value = range(60 / minuteStep, 0, minuteStep)\n  secondRange.value = range(60 / secondStep, 0, secondStep)\n}\n\nfunction handleToggleColumn(type: TimeType) {\n  emit('toggle-col', type)\n}\n\nfunction refreshWheel() {\n  ;[hourWheel.value, minuteWheel.value, secondWheel.value].forEach(wheel => {\n    wheel?.refreshScroll()\n  })\n}\n</script>\n\n<template>\n  <div :class=\"nh.be('wheel')\">\n    <Wheel\n      ref=\"hourWheel\"\n      v-model:value=\"currentHour\"\n      inherit\n      :class=\"nh.be('hour-wheel')\"\n      :pointer=\"pointer\"\n      :arrow=\"!noArrow\"\n      :candidate=\"candidate\"\n      :options=\"hourRange\"\n      tabindex=\"-1\"\n      :no-transition=\"noTransition\"\n      @mouseenter=\"handleToggleColumn('hour')\"\n      @touchstart=\"handleToggleColumn('hour')\"\n      @keydown.stop\n      @item-click=\"currentHour = $event\"\n    >\n      <template #default=\"{ option, index }\">\n        <span\n          :class=\"[\n            nh.be('option'),\n            nh.be('hour'),\n            isHourDisabled(option.value as number) && nh.bem('option', 'disabled')\n          ]\"\n        >\n          <slot name=\"hour\" :option=\"option\" :index=\"index\">\n            {{ doubleDigits(option.value as number) }}\n          </slot>\n        </span>\n      </template>\n    </Wheel>\n    <Wheel\n      ref=\"minuteWheel\"\n      v-model:value=\"currentMinute\"\n      inherit\n      :class=\"nh.be('minute-wheel')\"\n      :pointer=\"pointer\"\n      :arrow=\"!noArrow\"\n      :candidate=\"candidate\"\n      :options=\"minuteRange\"\n      tabindex=\"-1\"\n      :no-transition=\"noTransition\"\n      @mouseenter=\"handleToggleColumn('minute')\"\n      @touchstart=\"handleToggleColumn('minute')\"\n      @keydown.stop\n      @item-click=\"currentMinute = $event\"\n    >\n      <template #default=\"{ option, index }\">\n        <span\n          :class=\"[\n            nh.be('option'),\n            nh.be('minute'),\n            isMinuteDisabled(option.value as number) && nh.bem('option', 'disabled')\n          ]\"\n        >\n          <slot name=\"minute\" :option=\"option\" :index=\"index\">\n            {{ doubleDigits(option.value as number) }}\n          </slot>\n        </span>\n      </template>\n    </Wheel>\n    <Wheel\n      ref=\"secondWheel\"\n      v-model:value=\"currentSecond\"\n      inherit\n      :class=\"nh.be('second-wheel')\"\n      :pointer=\"pointer\"\n      :arrow=\"!noArrow\"\n      :candidate=\"candidate\"\n      :options=\"secondRange\"\n      tabindex=\"-1\"\n      :no-transition=\"noTransition\"\n      @mouseenter=\"handleToggleColumn('second')\"\n      @touchstart=\"handleToggleColumn('second')\"\n      @keydown.stop\n      @item-click=\"currentSecond = $event\"\n    >\n      <template #default=\"{ option, index }\">\n        <span\n          :class=\"[\n            nh.be('option'),\n            nh.be('second'),\n            isSecondDisabled(option.value as number) && nh.bem('option', 'disabled')\n          ]\"\n        >\n          <slot name=\"second\" :option=\"option\" :index=\"index\">\n            {{ doubleDigits(option.value as number) }}\n          </slot>\n        </span>\n      </template>\n    </Wheel>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","currentHour","ref","currentMinute","currentSecond","hourRange","minuteRange","secondRange","hourWheel","minuteWheel","secondWheel","watch","updateTimeRange","value","__expose","refreshWheel","isHourDisabled","hour","isMinuteDisabled","minute","isSecondDisabled","second","hourStep","minuteStep","secondStep","range","handleToggleColumn","type","wheel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,UAAMA,IAAQC,GAuDRC,IAAOC,GAIPC,IAAKC,EAAc,aAAa,GAEhCC,IAAcC,EAAIP,EAAM,IAAI,GAC5BQ,IAAgBD,EAAIP,EAAM,MAAM,GAChCS,IAAgBF,EAAIP,EAAM,MAAM,GAChCU,IAAYH,EAAc,EAAE,GAC5BI,IAAcJ,EAAc,EAAE,GAC9BK,IAAcL,EAAc,EAAE,GAE9BM,IAAYN,EAAkB,GAC9BO,IAAcP,EAAkB,GAChCQ,IAAcR,EAAkB;AAEtC,IAAAS,EAAM,MAAMhB,EAAM,OAAOiB,GAAiB,EAAE,WAAW,IAAM,GAC7DD;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASkB,MAAA;AACP,QAAAZ,EAAY,QAAQY;AAAA,MAAA;AAAA,IAExB,GACAF;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASkB,MAAA;AACP,QAAAV,EAAc,QAAQU;AAAA,MAAA;AAAA,IAE1B,GACAF;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASkB,MAAA;AACP,QAAAT,EAAc,QAAQS;AAAA,MAAA;AAAA,IAE1B,GACAF,EAAMV,GAAa,CAASY,MAAA;AAC1B,MAAAhB,EAAK,eAAegB,CAAK,GACpBhB,EAAA,UAAU,QAAQgB,CAAK;AAAA,IAAA,CAC7B,GACDF,EAAMR,GAAe,CAASU,MAAA;AAC5B,MAAAhB,EAAK,iBAAiBgB,CAAK,GACtBhB,EAAA,UAAU,UAAUgB,CAAK;AAAA,IAAA,CAC/B,GACDF,EAAMP,GAAe,CAASS,MAAA;AAC5B,MAAAhB,EAAK,iBAAiBgB,CAAK,GACtBhB,EAAA,UAAU,UAAUgB,CAAK;AAAA,IAAA,CAC/B,GAEYC,EAAA,EAAE,cAAAC,GAAc;AAE7B,aAASC,EAAeC,GAAc;AAC7B,aAAA,OAAOtB,EAAM,aAAa,QAAS,cAAcA,EAAM,aAAa,KAAKsB,CAAI;AAAA,IAAA;AAGtF,aAASC,EAAiBC,GAAgB;AAEtC,aAAA,OAAOxB,EAAM,aAAa,UAAW,cACrCA,EAAM,aAAa,OAAOM,EAAY,OAAOkB,CAAM;AAAA,IAAA;AAIvD,aAASC,EAAiBC,GAAgB;AACxC,aACE,OAAO1B,EAAM,aAAa,UAAW,cACrCA,EAAM,aAAa,OAAOM,EAAY,OAAOE,EAAc,OAAOkB,CAAM;AAAA,IAAA;AAI5E,aAAST,IAAkB;AACnB,YAAA,CAACU,IAAW,GAAGC,IAAa,GAAGC,IAAa,CAAC,IAAI7B,EAAM;AAE7D,MAAAU,EAAU,QAAQoB,EAAM,KAAKH,GAAU,GAAGA,CAAQ,GAClDhB,EAAY,QAAQmB,EAAM,KAAKF,GAAY,GAAGA,CAAU,GACxDhB,EAAY,QAAQkB,EAAM,KAAKD,GAAY,GAAGA,CAAU;AAAA,IAAA;AAG1D,aAASE,EAAmBC,GAAgB;AAC1C,MAAA9B,EAAK,cAAc8B,CAAI;AAAA,IAAA;AAGzB,aAASZ,IAAe;AACpB,OAAAP,EAAU,OAAOC,EAAY,OAAOC,EAAY,KAAK,EAAE,QAAQ,CAASkB,MAAA;AACxE,QAAAA,KAAA,QAAAA,EAAO;AAAA,MAAc,CACtB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}