{"version":3,"file":"panel-time-pick.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\r\n  <transition :name=\"transitionName\">\r\n    <div v-if=\"actualVisible || visible\" class=\"sg-time-panel\">\r\n      <div\r\n        class=\"sg-time-panel__content\"\r\n        :class=\"{ 'has-seconds': showSeconds }\"\r\n      >\r\n        <time-spinner\r\n          ref=\"spinner\"\r\n          :role=\"datetimeRole || 'start'\"\r\n          :arrow-control=\"arrowControl\"\r\n          :show-seconds=\"showSeconds\"\r\n          :am-pm-mode=\"amPmMode\"\r\n          :spinner-date=\"(parsedValue as any)\"\r\n          :disabled-hours=\"disabledHours\"\r\n          :disabled-minutes=\"disabledMinutes\"\r\n          :disabled-seconds=\"disabledSeconds\"\r\n          :step=\"step\"\r\n          @change=\"handleChange\"\r\n          @set-option=\"onSetOption\"\r\n          @select-range=\"setSelectionRange\"\r\n        />\r\n      </div>\r\n      <div class=\"sg-time-panel__footer\" v-if=\"confirm\">\r\n        <sg-button\r\n          text\r\n          @click=\"handleCancel\"\r\n        >\r\n          {{ t('sg.datepicker.cancel') }}\r\n        </sg-button>\r\n        <sg-button\r\n          type=\"primary\"\r\n          @click=\"handleConfirm()\"\r\n        >\r\n          {{ t('sg.datepicker.confirm') }}\r\n        </sg-button>\r\n      </div>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, computed, inject } from 'vue'\r\nimport dayjs from 'dayjs'\r\nimport { EVENT_CODE } from '@sgui-plus/utils/aria'\r\nimport { useLocale } from '@sgui-plus/hooks'\r\nimport { TimePickerContextKey } from '../common/constant'\r\nimport TimeSpinner from './basic-time-spinner.vue'\r\nimport SgButton from '@sgui-plus/components/button'\r\nimport { getAvailableArrs, useOldValue } from './useTimePicker'\r\n\r\nimport type { PropType } from 'vue'\r\nimport type { Dayjs } from 'dayjs'\r\n\r\nexport default defineComponent({\r\n  components: {\r\n    TimeSpinner,\r\n    SgButton\r\n  },\r\n\r\n  props: {\r\n    confirm: Boolean,\r\n    visible: Boolean,\r\n    actualVisible: {\r\n      type: Boolean,\r\n      default: undefined,\r\n    },\r\n    datetimeRole: {\r\n      type: String,\r\n    },\r\n    parsedValue: {\r\n      type: [Object, String] as PropType<string | Dayjs>,\r\n    },\r\n    format: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n  },\r\n\r\n  emits: ['pick', 'select-range', 'set-picker-option'],\r\n\r\n  setup(props, ctx) {\r\n    const { t, lang } = useLocale()\r\n    // data\r\n    const selectionRange = ref([0, 2])\r\n    const oldValue = useOldValue(props)\r\n    // computed\r\n    const transitionName = computed(() => {\r\n      return props.actualVisible === undefined ? 'sg-zoom-in-top' : ''\r\n    })\r\n    const showSeconds = computed(() => {\r\n      return props.format.includes('ss')\r\n    })\r\n    const amPmMode = computed(() => {\r\n      if (props.format.includes('A')) return 'A'\r\n      if (props.format.includes('a')) return 'a'\r\n      return ''\r\n    })\r\n    // method\r\n    const isValidValue = (_date: Dayjs) => {\r\n      const parsedDate = dayjs(_date).locale(lang.value)\r\n      const result = getRangeAvailableTime(parsedDate)\r\n      return parsedDate.isSame(result)\r\n    }\r\n    const handleCancel = () => {\r\n      ctx.emit('pick', oldValue.value, false)\r\n    }\r\n    const handleConfirm = (visible = false, first = false) => {\r\n      if (first) return\r\n      ctx.emit('pick', props.parsedValue, visible)\r\n    }\r\n    const handleChange = (_date: Dayjs) => {\r\n      // visible avoids edge cases, when use scrolls during panel closing animation\r\n      if (!props.visible) {\r\n        return\r\n      }\r\n      const result = getRangeAvailableTime(_date).millisecond(0)\r\n      ctx.emit('pick', result, true)\r\n    }\r\n\r\n    const setSelectionRange = (start, end) => {\r\n      ctx.emit('select-range', start, end)\r\n      selectionRange.value = [start, end]\r\n    }\r\n\r\n    const changeSelectionRange = (step: number) => {\r\n      const list = [0, 3].concat(showSeconds.value ? [6] : [])\r\n      const mapping = ['hours', 'minutes'].concat(\r\n        showSeconds.value ? ['seconds'] : []\r\n      )\r\n      const index = list.indexOf(selectionRange.value[0])\r\n      const next = (index + step + list.length) % list.length\r\n      timePickerOptions['start_emitSelectRange'](mapping[next])\r\n    }\r\n\r\n    const handleKeydown = (event: KeyboardEvent) => {\r\n      const code = event.code\r\n\r\n      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {\r\n        const step = code === EVENT_CODE.left ? -1 : 1\r\n        changeSelectionRange(step)\r\n        event.preventDefault()\r\n        return\r\n      }\r\n\r\n      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {\r\n        const step = code === EVENT_CODE.up ? -1 : 1\r\n        timePickerOptions['start_scrollDown'](step)\r\n        event.preventDefault()\r\n        return\r\n      }\r\n    }\r\n\r\n    const getRangeAvailableTime = (date: Dayjs) => {\r\n      const availableMap = {\r\n        hour: getAvailableHours,\r\n        minute: getAvailableMinutes,\r\n        second: getAvailableSeconds,\r\n      }\r\n      let result = date\r\n      ;['hour', 'minute', 'second'].forEach((_) => {\r\n        if (availableMap[_]) {\r\n          let availableArr\r\n          const method = availableMap[_]\r\n          if (_ === 'minute') {\r\n            availableArr = method(result.hour(), props.datetimeRole)\r\n          } else if (_ === 'second') {\r\n            availableArr = method(\r\n              result.hour(),\r\n              result.minute(),\r\n              props.datetimeRole\r\n            )\r\n          } else {\r\n            availableArr = method(props.datetimeRole)\r\n          }\r\n          if (\r\n            availableArr &&\r\n            availableArr.length &&\r\n            !availableArr.includes(result[_]())\r\n          ) {\r\n            result = result[_](availableArr[0])\r\n          }\r\n        }\r\n      })\r\n      return result\r\n    }\r\n\r\n    const parseUserInput = (value: Dayjs) => {\r\n      if (!value) return null\r\n      return dayjs(value, props.format).locale(lang.value)\r\n    }\r\n\r\n    const formatToString = (value: Dayjs) => {\r\n      if (!value) return null\r\n      return value.format(props.format)\r\n    }\r\n\r\n    const getDefaultValue = () => {\r\n      return dayjs(defaultValue).locale(lang.value)\r\n    }\r\n\r\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\r\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\r\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\r\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\r\n    ctx.emit('set-picker-option', [\r\n      'getRangeAvailableTime',\r\n      getRangeAvailableTime,\r\n    ])\r\n    ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])\r\n    const timePickerOptions = {} as any\r\n    const onSetOption = (e) => {\r\n      timePickerOptions[e[0]] = e[1]\r\n    }\r\n    const pickerBase = inject(TimePickerContextKey) as any\r\n    const {\r\n      arrowControl,\r\n      disabledHours,\r\n      disabledMinutes,\r\n      disabledSeconds,\r\n      defaultValue,\r\n      step\r\n    } = pickerBase.props\r\n    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\r\n      getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)\r\n\r\n    return {\r\n      transitionName,\r\n      arrowControl,\r\n      onSetOption,\r\n      t,\r\n      handleConfirm,\r\n      handleChange,\r\n      setSelectionRange,\r\n      amPmMode,\r\n      showSeconds,\r\n      handleCancel,\r\n      disabledHours,\r\n      disabledMinutes,\r\n      disabledSeconds,\r\n      step\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_createElementVNode","_normalizeClass","_createVNode"],"mappings":";;;;MAEyC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAqBpC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;;AAtBf,EAAA,MAAA,oBAAA,GAAAA,gBAAA,CAqCa,WArCM,CAAA,CAAA;AACN,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAiBC,UAAO,EAAA,EAAA,IAAA,EAAA,IAAA,CAAA,cAAA,EAAA,EAAA;AAAA,IAAnC,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MACE,IAAA,CAAA,aAAA,IAAA,IAAA,CAmBM,OAlBC,IAAAH,SAAA,EAAA,EAAAI,kBAAA,CAAC,KAAwB,EAAA,UAAA,EAAA;AAAA,QAAAC,kBAAA,CAAA,KAAA,EAAA;UAG9B,KAcE,EAAAC,cAAA,CAAA,CAAA,wBAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,WAAA,EAAA,CAAA,CAAA;AAAA,SAAA,EAAA;sBAZO,uBAAY,EAAA;AAAA,YAClB,GAAA,EAAA,SAAA;AAAA,YACA,IAAc,EAAA,IAAA,CAAA,YAAA,IAAA,OAAA;AAAA,YACd,eAAY,EAAA,IAAA,CAAA,YAAA;AAAA,YACZ,gBAAY,IAAG,CAAA,WAAA;AAAA,YACf,YAAgB,EAAA,IAAA,CAAA,QAAA;AAAA,YAChB,cAAkB,EAAA,IAAA,CAAA,WAAA;AAAA,YAClB,kBAAgB,IAAE,CAAA,aAAA;AAAA,YAClB,kBAAU,EAAA,IAAA,CAAA,eAAA;AAAA,YACV,kBAAQ,EAAA,IAAA,CAAA,eAAA;AAAA,YACR,IAAU,EAAA,IAAA,CAAA,IAAA;AAAA,YACV,QAAc,EAAA,IAAA,CAAA,YAAA;AAAA,YAAA,WAAA,EAAA,IAAA,CAAA,WAAA;;WAG6B,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,eAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,CAAA,CAAA;AAAA,SAAA,EAAA,CAAA,CAAA;aAC9C,OACM,IAAAN,SAAA,EAAA,EAAAI,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,UAAAG,WAAA,CACI,oBAAY,EAAA;AAAA,YAAA,IAAA,EAAA,EAAA;;;;;;AAItB,YAAA,CAAA,EAAA,CAAA;AAAA,WAAA,EACE,CAAc,EAAA,CAAA,SAAA,CAAA,CAAA;AAAA,UACRA,WAAA,CAAA,oBAAA,EAAA;AAAA,YAAA,IAAA,EAAA,SAAA;AAE0B,YAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,WAAA,EAAA;;;;;;;;;;;;;;;;"}