{"version":3,"file":"picker.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\r\n  <sg-tooltip\r\n    ref=\"refPopper\"\r\n    v-model:visible=\"pickerVisible\"\r\n    theme=\"light\"\r\n    pure\r\n    trigger=\"click\"\r\n    v-bind=\"$attrs\"\r\n    transfer\r\n    transition=\"sg-zoom-in-top\"\r\n    :drop-class-name=\"`sg-picker__popper`\"\r\n    :popper-options=\"popperOptions\"\r\n    :placement=\"(placement as any)\"\r\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\r\n    :gpu-acceleration=\"false\"\r\n    :stop-popper-mouse-event=\"false\"\r\n    :hide-after=\"0\"\r\n    persistent\r\n    @before-show=\"onBeforeShow\"\r\n    @hide=\"onHide\"\r\n  >\r\n    <template #default>\r\n      <sg-input\r\n        v-if=\"!isRangeInput\"\r\n\r\n        ref=\"inputRef\"\r\n        :model-value=\"(displayValue as any)\"\r\n        v-bind=\"attrs\"\r\n        :size=\"pickerSize\"\r\n        :disabled=\"pickerDisabled\"\r\n        :placeholder=\"`${type === 'time' || type === 'timerange' ? '请选择时间' : '请选择日期'}`\"\r\n        class=\"sg-date-editor\"\r\n        :class=\"['sg-date-editor--' + type, $attrs.class || undefined]\"\r\n        :style=\"$attrs.style || undefined\"\r\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\r\n        :validate-event=\"false\"\r\n        @on-input=\"onUserInput\"\r\n        @on-focus=\"handleFocusInput\"\r\n        @on-blur=\"handleBlurInput\"\r\n        @keydown=\"handleKeydown\"\r\n        @on-change=\"handleChange\"\r\n        @mouseenter=\"onMouseEnter\"\r\n        @mouseleave=\"onMouseLeave\"\r\n        @click.stop\r\n      >\r\n        <template #prefix>\r\n          <sg-icon\r\n            v-if=\"triggerIcon\"\r\n            class=\"sg-input__icon prefix-icon\"\r\n            @mousedown.prevent=\"onMouseDownInput\"\r\n            @touchstart=\"onTouchStartInput\"\r\n          >\r\n            <component :is=\"triggerIcon\"></component>\r\n          </sg-icon>\r\n        </template>\r\n        <template #suffix>\r\n          <sg-icon\r\n            v-if=\"showClose && clearIcon\"\r\n            class=\"sg-input__icon clear-icon\"\r\n            @click.stop=\"onClearIconClick\"\r\n          >\r\n            <component :is=\"clearIcon\" />\r\n          </sg-icon>\r\n        </template>\r\n      </sg-input>\r\n      <div\r\n        v-else\r\n        ref=\"inputRef\"\r\n        class=\"sg-date-editor sg-range-editor sg-input__inner\"\r\n        :class=\"[\r\n          'sg-date-editor--' + type,\r\n          pickerSize ? `sg-range-editor--${pickerSize}` : '',\r\n          pickerDisabled ? 'is-disabled' : '',\r\n          pickerVisible ? 'is-active' : '',\r\n          $attrs.class || undefined,\r\n        ]\"\r\n        :style=\"($attrs.style as any )\"\r\n        @click=\"handleFocusInput\"\r\n        @mouseenter=\"onMouseEnter\"\r\n        @mouseleave=\"onMouseLeave\"\r\n        @keydown=\"handleKeydown\"\r\n      >\r\n        <sg-icon\r\n          v-if=\"triggerIcon\"\r\n          class=\"sg-input__icon sg-range__icon prefix-icon\"\r\n          @mousedown.prevent=\"onMouseDownInput\"\r\n          @touchstart=\"onTouchStartInput\"\r\n        >\r\n          <component :is=\"triggerIcon\"></component>\r\n        </sg-icon>\r\n        <input\r\n          autocomplete=\"off\"\r\n          :placeholder=\"`${type === 'time' || type === 'timerange' ? '请选择时间' : '请选择日期'}`\"\r\n          :value=\"displayValue && displayValue[0]\"\r\n          :disabled=\"pickerDisabled\"\r\n          :readonly=\"!editable || readonly\"\r\n          class=\"sg-range-input\"\r\n          @input=\"handleStartInput\"\r\n          @change=\"handleStartChange\"\r\n          @focus=\"handleFocusInput\"\r\n          @blur=\"handleBlurInput\"\r\n        />\r\n        <slot name=\"range-separator\">\r\n          <span class=\"sg-range-separator\">{{ rangeSeparator }}</span>\r\n        </slot>\r\n        <input\r\n          v-bind=\"attrs\"\r\n          autocomplete=\"off\"\r\n          :placeholder=\"`${type === 'time' || type === 'timerange' ? '请选择时间' : '请选择日期'}`\"\r\n          :value=\"displayValue && displayValue[1]\"\r\n          :disabled=\"pickerDisabled\"\r\n          :readonly=\"!editable || readonly\"\r\n          class=\"sg-range-input\"\r\n          @focus=\"handleFocusInput\"\r\n          @blur=\"handleBlurInput\"\r\n          @input=\"handleEndInput\"\r\n          @change=\"handleEndChange\"\r\n        />\r\n        <sg-icon\r\n          v-if=\"clearIcon\"\r\n          class=\"sg-input__icon sg-range__close-icon\"\r\n          :class=\"{\r\n            'sg-range__close-icon--hidden': !showClose,\r\n          }\"\r\n          @click=\"onClearIconClick\"\r\n        >\r\n          <component :is=\"clearIcon\" />\r\n        </sg-icon>\r\n      </div>\r\n    </template>\r\n    <template #content>\r\n      <slot\r\n        :confirm=\"confirm\"\r\n        :visible=\"pickerVisible\"\r\n        :actual-visible=\"pickerActualVisible\"\r\n        :parsed-value=\"parsedValue\"\r\n        :format=\"format\"\r\n        :unlink-panels=\"unlinkPanels\"\r\n        :type=\"type\"\r\n        :default-value=\"defaultValue\"\r\n        @pick=\"onPick\"\r\n        @select-range=\"setSelectionRange\"\r\n        @set-picker-option=\"onSetPickerOption\"\r\n        @on-calendar-change=\"onCalendarChange\"\r\n        @on-panel-change=\"onPanelChange\"\r\n        @mousedown.stop\r\n      ></slot>\r\n    </template>\r\n  </sg-tooltip>\r\n</template>\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  ref,\r\n  computed,\r\n  nextTick,\r\n  inject,\r\n  watch,\r\n  provide,\r\n  unref,\r\n} from 'vue'\r\nimport dayjs from 'dayjs'\r\nimport isEqual from 'lodash/isEqual'\r\nimport { onClickOutside } from '@vueuse/core'\r\nimport { useLocale, useSize, useFormItem } from '@sgui-plus/hooks'\r\nimport SgInput from '@sgui-plus/components/input'\r\nimport SgIcon from '@sgui-plus/components/icon'\r\nimport SgTooltip from '@sgui-plus/components/tooltip'\r\nimport { EVENT_CODE } from '@sgui-plus/utils/aria'\r\nimport { isEmpty } from '@sgui-plus/utils/util'\r\nimport { debugWarn } from '@sgui-plus/utils/error'\r\nimport { Time, Date as IconDate } from '@sgui-plus/icons-vue'\r\nimport { timePickerDefaultProps } from './props'\r\nimport { TimePickerContextKey, PopperOptionsContextKey } from './constant'\r\n\r\nimport type { Dayjs } from 'dayjs'\r\nimport type { ComponentPublicInstance } from 'vue'\r\nimport type { Options } from '@popperjs/core'\r\n\r\ninterface PickerOptions {\r\n  isValidValue: (date: Dayjs) => boolean\r\n  handleKeydown: (event: KeyboardEvent) => void\r\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\r\n  formatToString: (value: Dayjs) => string | string[]\r\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\r\n  getDefaultValue: () => Dayjs\r\n  panelReady: boolean\r\n  handleClear: () => void\r\n  handleFocusPicker?: () => void\r\n}\r\n\r\n// Date object and string\r\nconst dateEquals = function (a: Date | any, b: Date | any) {\r\n  const aIsDate = a instanceof Date\r\n  const bIsDate = b instanceof Date\r\n  if (aIsDate && bIsDate) {\r\n    return a.getTime() === b.getTime()\r\n  }\r\n  if (!aIsDate && !bIsDate) {\r\n    return a === b\r\n  }\r\n  return false\r\n}\r\n\r\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\r\n  const aIsArray = a instanceof Array\r\n  const bIsArray = b instanceof Array\r\n  if (aIsArray && bIsArray) {\r\n    if (a.length !== b.length) {\r\n      return false\r\n    }\r\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\r\n  }\r\n  if (!aIsArray && !bIsArray) {\r\n    return dateEquals(a, b)\r\n  }\r\n  return false\r\n}\r\n\r\nconst parser = function (\r\n  date: Date | string,\r\n  format: string,\r\n  lang: string\r\n): Dayjs | undefined {\r\n  const day =\r\n    isEmpty(format) || format === 'x'\r\n      ? dayjs(date).locale(lang)\r\n      : dayjs(date, format).locale(lang)\r\n  return day.isValid() ? day : undefined\r\n}\r\n\r\nconst formatter = function (date: number | Date, format: string, lang: string) {\r\n  if (isEmpty(format)) return date\r\n  if (format === 'x') return +date\r\n  return dayjs(date).locale(lang).format(format)\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'Picker',\r\n  components: {\r\n    SgInput,\r\n    SgTooltip,\r\n    SgIcon,\r\n  },\r\n  props: timePickerDefaultProps,\r\n  emits: [\r\n    'update:modelValue',\r\n    'on-change',\r\n    'on-open-change',\r\n    'on-focus',\r\n    'on-blur',\r\n    'on-calendar-change',\r\n    'on-panel-change',\r\n    'on-visible-change',\r\n    'on-clear'\r\n  ],\r\n  setup(props, ctx) {\r\n    const { lang } = useLocale()\r\n    const { form, formItem } = useFormItem()\r\n    const attrs = ctx.attrs\r\n    const popperOptions = inject(PopperOptionsContextKey, {} as Options)\r\n    const refPopper = ref<InstanceType<typeof SgTooltip>>()\r\n    const inputRef = ref<HTMLElement | ComponentPublicInstance>()\r\n    const pickerVisible = ref(false)\r\n    const pickerActualVisible = ref(false)\r\n    const valueOnOpen = ref<null | string | number | Date | (string | number | Date)[]>(null)\r\n\r\n    let hasJustTabExitedInput = false\r\n    let ignoreFocusEvent = false\r\n\r\n    watch(pickerVisible, (val) => {\r\n      if (!val) {\r\n        userInput.value = null\r\n        nextTick(() => {\r\n          emitChange(props.modelValue)\r\n        })\r\n        ctx.emit('on-open-change', val)\r\n        // blurInput()\r\n      } else {\r\n        ctx.emit('on-open-change', val)\r\n        nextTick(() => {\r\n          if (val) {\r\n            valueOnOpen.value = props.modelValue\r\n          }\r\n        })\r\n      }\r\n    })\r\n    const emitChange = (val, isClear?: boolean) => {\r\n      // determine user real change only\r\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\r\n        ctx.emit('on-change', val)\r\n        props.validateEvent && formItem?.validate('change').catch((err) => debugWarn(err))\r\n      }\r\n    }\r\n    const emitInput = (val) => {\r\n      if (!valueEquals(props.modelValue, val)) {\r\n        let formatValue\r\n        if (Array.isArray(val)) {\r\n          if(props.type === 'datenoonrange') {\r\n            formatValue = [\r\n              {\r\n                date: formatter(val[0].date, props.valueFormat as string, lang.value),\r\n                noon: val[0].noon.value\r\n              },\r\n              {\r\n                date: formatter(val[1].date, props.valueFormat as string, lang.value),\r\n                noon: val[1].noon.value\r\n              }\r\n            ]\r\n          } else {\r\n              formatValue = val.map((_) =>\r\n              formatter(_, props.valueFormat as string, lang.value)\r\n            )\r\n          }\r\n        } else if (val) {\r\n          formatValue = formatter(val, props.valueFormat as string, lang.value)\r\n        }\r\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\r\n      }\r\n    }\r\n\r\n    const refInput = computed<HTMLInputElement[]>(() => {\r\n      if (inputRef.value) {\r\n        const _r = isRangeInput.value\r\n          ? inputRef.value\r\n          : (inputRef.value as any as ComponentPublicInstance).$el\r\n        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\r\n      }\r\n      return []\r\n    })\r\n\r\n    const setSelectionRange = (start, end, pos) => {\r\n      const _inputs = refInput.value\r\n      if (!_inputs.length) return\r\n      if (!pos || pos === 'min') {\r\n        _inputs[0].setSelectionRange(start, end)\r\n        _inputs[0].focus()\r\n      } else if (pos === 'max') {\r\n        _inputs[1].setSelectionRange(start, end)\r\n        _inputs[1].focus()\r\n      }\r\n    }\r\n\r\n    const focusOnInputBox = () => {\r\n      focus(true, true)\r\n      nextTick(() => {\r\n        ignoreFocusEvent = false\r\n      })\r\n    }\r\n\r\n    const onPick = (date: any = '', visible = false) => {\r\n      if (!visible) {\r\n        ignoreFocusEvent = true\r\n      }\r\n      pickerVisible.value = visible\r\n      let result\r\n      if (Array.isArray(date)) {\r\n        if(props.type === 'datenoonrange') {\r\n          result = [\r\n            {\r\n              date: date[0].date.toDate(),\r\n              noon: date[0].noon\r\n            },\r\n            {\r\n              date: date[1].date.toDate(),\r\n              noon: date[1].noon\r\n            }\r\n          ]\r\n        } else{\r\n          result = date.map((_) => _.toDate())\r\n        }\r\n      }else {\r\n        // clear btn emit null\r\n        result = date ? date.toDate() : date\r\n      }\r\n      userInput.value = null\r\n      emitInput(result)\r\n    }\r\n\r\n    const onBeforeShow = () => {\r\n      pickerActualVisible.value = true\r\n    }\r\n\r\n    const onHide = () => {\r\n      pickerActualVisible.value = false\r\n      pickerVisible.value = false\r\n      ignoreFocusEvent = false\r\n    }\r\n\r\n    const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {\r\n      ignoreFocusEvent = isIgnoreFocusEvent\r\n      const [leftInput, rightInput] = unref(refInput)\r\n      let input = leftInput\r\n      if (!focusStartInput && isRangeInput.value) {\r\n        input = rightInput\r\n      }\r\n      if (input) {\r\n        input.focus()\r\n      }\r\n    }\r\n\r\n    const handleFocusInput = (e) => {\r\n      if (props.readonly || pickerDisabled.value || pickerVisible.value || ignoreFocusEvent) return\r\n      pickerVisible.value = true\r\n      if (props.clearable) {\r\n        showClose.value = true\r\n      }\r\n      ctx.emit('on-focus', e)\r\n    }\r\n\r\n    // const handleBlur = () => {\r\n    //   refPopper.value?.onClose()\r\n    //   blurInput()\r\n    // }\r\n\r\n    let currentHandleBlurDeferCallback:\r\n      | (() => Promise<void> | undefined)\r\n      | undefined = undefined\r\n\r\n    const handleBlurInput = (e?: FocusEvent) => {\r\n      const handleBlurDefer = async () => {\r\n        setTimeout(() => {\r\n          if (currentHandleBlurDeferCallback === handleBlurDefer) {\r\n            if (\r\n              !(\r\n                refPopper.value?.isFocusInsideContent() && !hasJustTabExitedInput\r\n              ) &&\r\n              refInput.value.filter((input) => {\r\n                return input.contains(document.activeElement)\r\n              }).length === 0\r\n            ) {\r\n              handleChange()\r\n              // pickerVisible.value = false\r\n              ctx.emit('on-blur', e)\r\n              props.validateEvent && formItem?.validate('blur').catch((err) => debugWarn(err))\r\n            }\r\n            hasJustTabExitedInput = false\r\n          }\r\n        }, 0)\r\n      }\r\n      currentHandleBlurDeferCallback = handleBlurDefer\r\n      handleBlurDefer()\r\n    }\r\n\r\n    const pickerDisabled = computed(() => {\r\n      return props.disabled || form?.disabled\r\n    })\r\n\r\n    const parsedValue = computed(() => {\r\n      let result\r\n      if (valueIsEmpty.value) {\r\n        if (pickerOptions.value.getDefaultValue) {\r\n          result = pickerOptions.value.getDefaultValue()\r\n        }\r\n      } else {\r\n        if (Array.isArray(props.modelValue)) {\r\n          if(props.type === 'datenoonrange' ) {\r\n            result = [\r\n              {\r\n                date: parser(props.modelValue[0].date as any  , props.valueFormat as string, lang.value),\r\n                noon: props.modelValue[0].noon\r\n              },\r\n              {\r\n                date: parser(props.modelValue[1].date as any , props.valueFormat as string, lang.value),\r\n                noon: props.modelValue[1].noon\r\n              }\r\n            ]\r\n          } else {\r\n            result = props.modelValue.map((_) =>\r\n              parser(_ as any , props.valueFormat as string, lang.value)\r\n            )\r\n          }\r\n        } else {\r\n          result = parser(props.modelValue as Date | string, props.valueFormat as string, lang.value)\r\n        }\r\n      }\r\n\r\n      if (pickerOptions.value.getRangeAvailableTime) {\r\n        const availableResult =\r\n          pickerOptions.value.getRangeAvailableTime(result)\r\n        if (!isEqual(availableResult, result)) {\r\n          result = availableResult\r\n          emitInput(\r\n            Array.isArray(result)\r\n              ? result.map((_) => _.toDate())\r\n              : result.toDate()\r\n          )\r\n        }\r\n      }\r\n      if (Array.isArray(result) && result.some((_) => !_)) {\r\n        result = []\r\n      }\r\n      return result\r\n    })\r\n\r\n    const displayValue = computed(() => {\r\n      if (!pickerOptions.value.panelReady) return\r\n      let formattedValue\r\n      if(props.type === 'datenoonrange' && parsedValue.value) {\r\n        formattedValue = [`${formatDayjsToString(parsedValue.value[0].date)} ${parsedValue.value[0].noon === 'am' ? '上午' : '下午'}`, `${formatDayjsToString(parsedValue.value[1].date)} ${parsedValue.value[1].noon === 'am' ? '上午' : '下午'}`]\r\n      }else {\r\n        formattedValue = formatDayjsToString(parsedValue.value)\r\n      }\r\n      if (Array.isArray(userInput.value)) {\r\n        return [\r\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\r\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\r\n        ]\r\n      } else if (userInput.value !== null) {\r\n        return userInput.value\r\n      }\r\n      if (!isTimePicker.value && valueIsEmpty.value) return\r\n      if (!pickerVisible.value && valueIsEmpty.value) return\r\n      if (formattedValue) {\r\n        return isDatesPicker.value\r\n          ? (formattedValue as Array<string>).join(', ')\r\n          : formattedValue\r\n      }\r\n      return ''\r\n    })\r\n\r\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\r\n\r\n    const isTimePicker = computed(() => props.type.startsWith('time'))\r\n\r\n    const isDatesPicker = computed(() => props.type === 'dates')\r\n\r\n    const triggerIcon = computed(\r\n      () => isTimeLikePicker.value ? Time : IconDate\r\n    )\r\n\r\n    const showClose = ref(false)\r\n\r\n    const onClearIconClick = (event) => {\r\n      if (props.readonly || pickerDisabled.value) return\r\n      if (showClose.value) {\r\n        event.stopPropagation()\r\n        focusOnInputBox()\r\n        emitInput(null)\r\n        emitChange(null, true)\r\n        ctx.emit('on-clear')\r\n        showClose.value = false\r\n        pickerVisible.value = false\r\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\r\n      }\r\n    }\r\n    const valueIsEmpty = computed(() => {\r\n      return (\r\n        !props.modelValue ||\r\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\r\n      )\r\n    })\r\n\r\n    const onMouseDownInput = async (event: MouseEvent) => {\r\n      if (props.readonly || pickerDisabled.value) return\r\n      if (\r\n        (event.target as HTMLElement)?.tagName !== 'INPUT' ||\r\n        refInput.value.includes(document.activeElement as HTMLInputElement)\r\n      ) {\r\n        pickerVisible.value = true\r\n      }\r\n    }\r\n\r\n    const onMouseEnter = () => {\r\n      if (props.readonly || pickerDisabled.value) return\r\n      if (!valueIsEmpty.value && props.clearable) {\r\n        showClose.value = true\r\n      }\r\n    }\r\n\r\n    const onMouseLeave = () => {\r\n      showClose.value = false\r\n    }\r\n\r\n    const onTouchStartInput = (event: TouchEvent) => {\r\n      if (props.readonly || pickerDisabled.value) return\r\n      if (\r\n        (event.touches[0].target as HTMLElement)?.tagName !== 'INPUT' ||\r\n        refInput.value.includes(document.activeElement as HTMLInputElement)\r\n      ) {\r\n        pickerVisible.value = true\r\n      }\r\n    }\r\n\r\n    const isRangeInput = computed(() => {\r\n      return props.type.indexOf('range') > -1\r\n    })\r\n\r\n    const pickerSize = useSize()\r\n\r\n    const popperPaneRef = computed(() => {\r\n      return refPopper.value?.popperRef?.contentRef\r\n    })\r\n\r\n    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\r\n    const actualInputRef = computed(() => {\r\n      if (unref(isRangeInput)) {\r\n        return unref(inputRef)\r\n      }\r\n\r\n      return (unref(inputRef) as ComponentPublicInstance)?.$el\r\n    })\r\n\r\n    onClickOutside(actualInputRef as any, (e: PointerEvent) => {\r\n      const unrefedPopperEl = unref(popperEl)\r\n      const inputEl = unref(actualInputRef)\r\n      if (\r\n        (unrefedPopperEl &&\r\n          (e.target === unrefedPopperEl ||\r\n            e.composedPath().includes(unrefedPopperEl))) ||\r\n        e.target === inputEl ||\r\n        e.composedPath().includes(inputEl) || props.type === \"datenoonrange\"\r\n      )\r\n        return\r\n      pickerVisible.value = false\r\n    })\r\n\r\n    const userInput = ref<null | any[] | string>(null)\r\n\r\n    const handleChange = () => {\r\n      if (userInput.value) {\r\n        const value = parseUserInputToDayjs(displayValue.value)\r\n        if (value) {\r\n          if (isValidValue(value)) {\r\n            emitInput(\r\n              Array.isArray(value)\r\n                ? value.map((_) => _.toDate())\r\n                : value.toDate()\r\n            )\r\n            userInput.value = null\r\n          }\r\n        }\r\n      }\r\n      if (userInput.value === '') {\r\n        emitInput(null)\r\n        emitChange(null)\r\n        userInput.value = null\r\n      }\r\n    }\r\n\r\n    // const blurInput = () => {\r\n    //   refInput.value.forEach((input) => input.blur())\r\n    // }\r\n\r\n    const parseUserInputToDayjs = (value) => {\r\n      if (!value) return null\r\n      return pickerOptions.value.parseUserInput!(value)\r\n    }\r\n\r\n    const formatDayjsToString = (value) => {\r\n      if (!value) return null\r\n      return pickerOptions.value.formatToString!(value)\r\n    }\r\n\r\n    const isValidValue = (value) => {\r\n      return pickerOptions.value.isValidValue!(value)\r\n    }\r\n\r\n    const handleKeydown = async (event) => {\r\n      if (props.readonly || pickerDisabled.value) return\r\n\r\n      const code = event.code\r\n      if (code === EVENT_CODE.esc) {\r\n        pickerVisible.value = false\r\n        event.preventDefault()\r\n        event.stopPropagation()\r\n        return\r\n      }\r\n\r\n      if (code === EVENT_CODE.down) {\r\n        if (pickerOptions.value.handleFocusPicker) {\r\n          event.preventDefault()\r\n          event.stopPropagation()\r\n        }\r\n        if (pickerVisible.value === false) {\r\n          pickerVisible.value = true\r\n          await nextTick()\r\n        }\r\n        if (pickerOptions.value.handleFocusPicker) {\r\n          pickerOptions.value.handleFocusPicker()\r\n          return\r\n        }\r\n      }\r\n\r\n      if (code === EVENT_CODE.tab) {\r\n        // if (!isRangeInput.value) {\r\n        //   handleChange()\r\n        //   pickerVisible.value = false\r\n        //   event.stopPropagation()\r\n        // } else {\r\n        //   // user may change focus between two input\r\n        //   setTimeout(() => {\r\n        //     if (refInput.value.indexOf(document.activeElement as any) === -1) {\r\n        //       pickerVisible.value = false\r\n        //       blurInput()\r\n        //     }\r\n        //   }, 0)\r\n        // }\r\n        hasJustTabExitedInput = true\r\n        return\r\n      }\r\n\r\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\r\n        if (\r\n          userInput.value === null ||\r\n          userInput.value === '' ||\r\n          isValidValue(parseUserInputToDayjs(displayValue.value))\r\n        ) {\r\n          handleChange()\r\n          pickerVisible.value = false\r\n        }\r\n        event.stopPropagation()\r\n        return\r\n      }\r\n\r\n      // if user is typing, do not let picker handle key input\r\n      if (userInput.value) {\r\n        event.stopPropagation()\r\n        return\r\n      }\r\n\r\n      if (pickerOptions.value.handleKeydown) {\r\n        pickerOptions.value.handleKeydown(event)\r\n      }\r\n    }\r\n\r\n    const onUserInput = (e) => {\r\n      userInput.value = e\r\n      if (!pickerVisible.value) {\r\n        pickerVisible.value = true\r\n      }\r\n    }\r\n\r\n    const handleStartInput = (event) => {\r\n      if (userInput.value) {\r\n        userInput.value = [event.target.value, userInput.value[1]]\r\n      } else {\r\n        userInput.value = [event.target.value, null]\r\n      }\r\n    }\r\n\r\n    const handleEndInput = (event) => {\r\n      if (userInput.value) {\r\n        userInput.value = [userInput.value[0], event.target.value]\r\n      } else {\r\n        userInput.value = [null, event.target.value]\r\n      }\r\n    }\r\n\r\n    const handleStartChange = () => {\r\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\r\n      if (value && value.isValid()) {\r\n        userInput.value = [formatDayjsToString(value), displayValue.value![1]]\r\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\r\n        if (isValidValue(newValue)) {\r\n          emitInput(newValue)\r\n          userInput.value = null\r\n        }\r\n      }\r\n    }\r\n\r\n    const handleEndChange = () => {\r\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\r\n      if (value && value.isValid()) {\r\n        userInput.value = [displayValue.value![0], formatDayjsToString(value)]\r\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\r\n        if (isValidValue(newValue)) {\r\n          emitInput(newValue)\r\n          userInput.value = null\r\n        }\r\n      }\r\n    }\r\n\r\n    const pickerOptions = ref<Partial<PickerOptions>>({})\r\n    const onSetPickerOption = <T extends keyof PickerOptions>(\r\n      e: [T, PickerOptions[T]]\r\n    ) => {\r\n      pickerOptions.value[e[0]] = e[1]\r\n      pickerOptions.value.panelReady = true\r\n    }\r\n\r\n    const onCalendarChange = (e) => {\r\n      ctx.emit('on-calendar-change', e)\r\n    }\r\n\r\n    const onPanelChange = (value, mode, view) => {\r\n      ctx.emit('on-panel-change', value, mode, view)\r\n    }\r\n\r\n    provide(TimePickerContextKey, {\r\n      props,\r\n    })\r\n\r\n    return {\r\n      // injected popper options\r\n      popperOptions,\r\n      attrs,\r\n      isDatesPicker,\r\n      onBeforeShow,\r\n      onHide,\r\n      handleEndChange,\r\n      handleStartChange,\r\n      handleStartInput,\r\n      handleEndInput,\r\n      onUserInput,\r\n      handleChange,\r\n      handleKeydown,\r\n      popperPaneRef,\r\n      onClickOutside,\r\n      pickerSize,\r\n      isRangeInput,\r\n      onMouseDownInput,\r\n      onMouseLeave,\r\n      onMouseEnter,\r\n      onTouchStartInput,\r\n      onClearIconClick,\r\n      showClose,\r\n      triggerIcon,\r\n      onPick,\r\n      handleFocusInput,\r\n      handleBlurInput,\r\n      pickerVisible,\r\n      pickerActualVisible,\r\n      displayValue,\r\n      parsedValue,\r\n      setSelectionRange,\r\n      refPopper,\r\n      inputRef,\r\n      pickerDisabled,\r\n      onSetPickerOption,\r\n      onCalendarChange,\r\n      onPanelChange,\r\n      focus,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_withCtx","_withModifiers","_createCommentVNode","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_renderSlot","_toDisplayString"],"mappings":"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"}