{"version":3,"file":"panel-time-pick.vue.mjs","sources":["../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" class=\"el-time-panel\">\n\n      <div class=\"el-time-panel__content\" :class=\"{ 'has-seconds': showSeconds }\">\n        <time-spinner\n          ref=\"spinner\"\n          :role=\"datetimeRole || 'start'\"\n          :arrow-control=\"arrowControl\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          :spinner-date=\"parsedValue\"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          @change=\"handleChange\"\n          @set-option=\"onSetOption\"\n          @select-range=\"setSelectionRange\"\n        />\n      </div>\n      <div class=\"el-time-panel__footer\">\n        <button type=\"button\" class=\"el-time-panel__btn cancel\" @click=\"handleCancel\">取消</button>\n        <button type=\"button\" class=\"el-time-panel__btn confirm\" @click=\"handleConfirm()\">\n          确定\n        </button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-ultra/shared'\nimport TimeSpinner from './basic-time-spinner.vue'\nimport { getAvailableArrs, useOldValue } from './useTimePicker'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: {\n    TimeSpinner\n  },\n\n  props: {\n    visible: Boolean,\n    actualVisible: {\n      type: Boolean,\n      default: undefined\n    },\n    datetimeRole: {\n      type: String\n    },\n    parsedValue: {\n      type: [Object, String] as PropType<string | Dayjs>\n    },\n    format: {\n      type: String,\n      default: ''\n    }\n  },\n\n  emits: ['pick', 'select-range', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const lang = 'zh-cn'\n    // data\n    const selectionRange = ref([0, 2])\n    const oldValue = useOldValue(props)\n    // computed\n    const transitionName = computed(() => {\n      return props.actualVisible === undefined ? 'el-zoom-in-top' : ''\n    })\n    const showSeconds = computed(() => {\n      return props.format.includes('ss')\n    })\n    const amPmMode = computed(() => {\n      if (props.format.includes('A')) return 'A'\n      if (props.format.includes('a')) return 'a'\n      return ''\n    })\n    // method\n    const isValidValue = (_date: Dayjs) => {\n      const parsedDate = dayjs(_date).locale(lang)\n      const result = getRangeAvailableTime(parsedDate)\n      return parsedDate.isSame(result)\n    }\n    const handleCancel = () => {\n      ctx.emit('pick', oldValue.value, false)\n    }\n    const handleConfirm = (visible = false, first = false) => {\n      if (first) return\n      ctx.emit('pick', props.parsedValue, visible)\n    }\n    const handleChange = (_date: Dayjs) => {\n      // visible avoids edge cases, when use scrolls during panel closing animation\n      if (!props.visible) {\n        return\n      }\n      const result = getRangeAvailableTime(_date).millisecond(0)\n      ctx.emit('pick', result, true)\n    }\n\n    const setSelectionRange = (start, end) => {\n      ctx.emit('select-range', start, end)\n      selectionRange.value = [start, end]\n    }\n\n    const changeSelectionRange = (step: number) => {\n      const list = [0, 3].concat(showSeconds.value ? [6] : [])\n      const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])\n      const index = list.indexOf(selectionRange.value[0])\n      const next = (index + step + list.length) % list.length\n      timePickerOptions['start_emitSelectRange'](mapping[next])\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {\n        const step = code === EVENT_CODE.left ? -1 : 1\n        changeSelectionRange(step)\n        event.preventDefault()\n        return\n      }\n\n      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {\n        const step = code === EVENT_CODE.up ? -1 : 1\n        timePickerOptions['start_scrollDown'](step)\n        event.preventDefault()\n        return\n      }\n    }\n\n    const getRangeAvailableTime = (date: Dayjs) => {\n      const availableMap = {\n        hour: getAvailableHours,\n        minute: getAvailableMinutes,\n        second: getAvailableSeconds\n      }\n      let result = date\n      ;['hour', 'minute', 'second'].forEach(_ => {\n        if (availableMap[_]) {\n          let availableArr\n          const method = availableMap[_]\n          if (_ === 'minute') {\n            availableArr = method(result.hour(), props.datetimeRole)\n          } else if (_ === 'second') {\n            availableArr = method(result.hour(), result.minute(), props.datetimeRole)\n          } else {\n            availableArr = method(props.datetimeRole)\n          }\n          if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {\n            result = result[_](availableArr[0])\n          }\n        }\n      })\n      return result\n    }\n\n    const parseUserInput = (value: Dayjs) => {\n      if (!value) return null\n      return dayjs(value, props.format).locale(lang)\n    }\n\n    const formatToString = (value: Dayjs) => {\n      if (!value) return null\n      return value.format(props.format)\n    }\n\n    const getDefaultValue = () => {\n      return dayjs(defaultValue).locale(lang)\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n    ctx.emit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\n    ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])\n    const timePickerOptions = {} as any\n    const onSetOption = e => {\n      timePickerOptions[e[0]] = e[1]\n    }\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } =\n      pickerBase.props\n    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = getAvailableArrs(\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds\n    )\n\n    return {\n      transitionName,\n      arrowControl,\n      onSetOption,\n      handleConfirm,\n      handleChange,\n      setSelectionRange,\n      amPmMode,\n      showSeconds,\n      handleCancel,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds\n    }\n  }\n})\n</script>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;MAEyC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA;;;;AAD7C,EAAA,MAAA,uBAAA,GAAAA,iBAAa,cAAM,CAAA,CAAA;AACN,EAAA,OAAAC,SAAA,IAAAC,WAAiB,CAAAC,UAAA,EAAO,EAAA,IAAA,EAAA,IAAA,CAAA,gBAAA,EAAA;AAAA,IAAnC,OAAA,EAAAC,QAAA,MAAA;AAAA,MAEE,IAAA,CAAA,iBAAA,IAeM,CAAA,OAAA,IAfIH,WAAA,EAAAI,kBAAA,CAAC,OAAwB,UAAA,EAAA;AAAA,QAAAC,kBAAA;AAAA;;YACjC,KAAA,EAaEC,eAAA,CAAA,wBAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,WAAA,EAAA,CAAA,CAAA;AAAA,WAAA;AAAA;wBAXO,uBAAY,EAAA;AAAA,cAClB,GAAA,EAAA,SAAA;AAAA,cACA,IAAA,EAAc,KAAA,YAAA,IAAA,OAAA;AAAA,cACd,iBAAY,IAAA,CAAA,YAAA;AAAA,cACZ,gBAAc,IAAA,CAAA,WAAA;AAAA,cACd,cAAgB,IAAA,CAAA,QAAA;AAAA,cAChB,gBAAkB,IAAA,CAAA,WAAA;AAAA,cAClB,kBAAgB,IAAE,CAAA,aAAA;AAAA,cAClB,oBAAQ,IAAA,CAAA,eAAA;AAAA,cACR,oBAAY,IAAA,CAAA,eAAA;AAAA,cACZ,UAAc,IAAA,CAAA,YAAA;AAAA,cAAA,aAAA,IAAA,CAAA,WAAA;AAAA;aAGnB,EAAA,IAAA,EAAA,CAKM,EAAA,CALN,QAKM,eAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,kBAAA,kBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,CAAA,CAAA;AAAA,WAAA;AAAA,UAJJ,CAAA;AAAA;AAAA,SAAA;AAAA,QAAqBD,kBAAA,CAAA,OAAA,UAAA,EAAA;AAAA,UAAOA,mBAAA,QAAA,EAAA;AAAA,YAA6B,IAAA,EAAA,QAAA;AAAA,YAAuB,KAAA,EAAA,2BAAA;AAAA,YAChF,OAES,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,aAFD,cAAI,CAAA;AAAA,UAAgBA,mBAAA,QAAA,EAAA;AAAA,YAA8B,IAAA,EAAA,QAAA;AAAA,YAE1D,KAAA,EAAA,4BAAA;AAAA,YAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA;;;;;;;;;;;;"}