You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
17 KiB
1 line
17 KiB
{"ast":null,"code":"import { defineComponent, inject, ref, computed, openBlock, createBlock, Transition, unref, withCtx, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, createCommentVNode } from 'vue';\nimport dayjs from 'dayjs';\nimport '../../../../constants/index.mjs';\nimport '../../../../hooks/index.mjs';\nimport '../../../../utils/index.mjs';\nimport { panelTimePickerProps } from '../props/panel-time-picker.mjs';\nimport { useTimePanel } from '../composables/use-time-panel.mjs';\nimport { buildAvailableTimeSlotGetter, useOldValue } from '../composables/use-time-picker.mjs';\nimport TimeSpinner from './basic-time-spinner.mjs';\nimport _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useNamespace } from '../../../../hooks/use-namespace/index.mjs';\nimport { useLocale } from '../../../../hooks/use-locale/index.mjs';\nimport { isUndefined } from '../../../../utils/types.mjs';\nimport { EVENT_CODE } from '../../../../constants/aria.mjs';\nconst _sfc_main = /* @__PURE__ */defineComponent({\n __name: \"panel-time-pick\",\n props: panelTimePickerProps,\n emits: [\"pick\", \"select-range\", \"set-picker-option\"],\n setup(__props, {\n emit\n }) {\n const props = __props;\n const pickerBase = inject(\"EP_PICKER_BASE\");\n const {\n arrowControl,\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n defaultValue\n } = pickerBase.props;\n const {\n getAvailableHours,\n getAvailableMinutes,\n getAvailableSeconds\n } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);\n const ns = useNamespace(\"time\");\n const {\n t,\n lang\n } = useLocale();\n const selectionRange = ref([0, 2]);\n const oldValue = useOldValue(props);\n const transitionName = computed(() => {\n return isUndefined(props.actualVisible) ? `${ns.namespace.value}-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 const isValidValue = _date => {\n const parsedDate = dayjs(_date).locale(lang.value);\n const result = getRangeAvailableTime(parsedDate);\n return parsedDate.isSame(result);\n };\n const handleCancel = () => {\n emit(\"pick\", oldValue.value, false);\n };\n const handleConfirm = (visible = false, first = false) => {\n if (first) return;\n emit(\"pick\", props.parsedValue, visible);\n };\n const handleChange = _date => {\n if (!props.visible) {\n return;\n }\n const result = getRangeAvailableTime(_date).millisecond(0);\n emit(\"pick\", result, true);\n };\n const setSelectionRange = (start, end) => {\n emit(\"select-range\", start, end);\n selectionRange.value = [start, end];\n };\n const changeSelectionRange = step => {\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 const handleKeydown = event => {\n const code = event.code;\n const {\n left,\n right,\n up,\n down\n } = EVENT_CODE;\n if ([left, right].includes(code)) {\n const step = code === left ? -1 : 1;\n changeSelectionRange(step);\n event.preventDefault();\n return;\n }\n if ([up, down].includes(code)) {\n const step = code === up ? -1 : 1;\n timePickerOptions[\"start_scrollDown\"](step);\n event.preventDefault();\n return;\n }\n };\n const {\n timePickerOptions,\n onSetOption,\n getAvailableTime\n } = useTimePanel({\n getAvailableHours,\n getAvailableMinutes,\n getAvailableSeconds\n });\n const getRangeAvailableTime = date => {\n return getAvailableTime(date, props.datetimeRole || \"\", true);\n };\n const parseUserInput = value => {\n if (!value) return null;\n return dayjs(value, props.format).locale(lang.value);\n };\n const formatToString = value => {\n if (!value) return null;\n return value.format(props.format);\n };\n const getDefaultValue = () => {\n return dayjs(defaultValue).locale(lang.value);\n };\n emit(\"set-picker-option\", [\"isValidValue\", isValidValue]);\n emit(\"set-picker-option\", [\"formatToString\", formatToString]);\n emit(\"set-picker-option\", [\"parseUserInput\", parseUserInput]);\n emit(\"set-picker-option\", [\"handleKeydownInput\", handleKeydown]);\n emit(\"set-picker-option\", [\"getRangeAvailableTime\", getRangeAvailableTime]);\n emit(\"set-picker-option\", [\"getDefaultValue\", getDefaultValue]);\n return (_ctx, _cache) => {\n return openBlock(), createBlock(Transition, {\n name: unref(transitionName)\n }, {\n default: withCtx(() => [_ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock(\"div\", {\n key: 0,\n class: normalizeClass(unref(ns).b(\"panel\"))\n }, [createElementVNode(\"div\", {\n class: normalizeClass([unref(ns).be(\"panel\", \"content\"), {\n \"has-seconds\": unref(showSeconds)\n }])\n }, [createVNode(TimeSpinner, {\n ref: \"spinner\",\n role: _ctx.datetimeRole || \"start\",\n \"arrow-control\": unref(arrowControl),\n \"show-seconds\": unref(showSeconds),\n \"am-pm-mode\": unref(amPmMode),\n \"spinner-date\": _ctx.parsedValue,\n \"disabled-hours\": unref(disabledHours),\n \"disabled-minutes\": unref(disabledMinutes),\n \"disabled-seconds\": unref(disabledSeconds),\n onChange: handleChange,\n onSetOption: unref(onSetOption),\n onSelectRange: setSelectionRange\n }, null, 8, [\"role\", \"arrow-control\", \"show-seconds\", \"am-pm-mode\", \"spinner-date\", \"disabled-hours\", \"disabled-minutes\", \"disabled-seconds\", \"onSetOption\"])], 2), createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).be(\"panel\", \"footer\"))\n }, [createElementVNode(\"button\", {\n type: \"button\",\n class: normalizeClass([unref(ns).be(\"panel\", \"btn\"), \"cancel\"]),\n onClick: handleCancel\n }, toDisplayString(unref(t)(\"el.datepicker.cancel\")), 3), createElementVNode(\"button\", {\n type: \"button\",\n class: normalizeClass([unref(ns).be(\"panel\", \"btn\"), \"confirm\"]),\n onClick: $event => handleConfirm()\n }, toDisplayString(unref(t)(\"el.datepicker.confirm\")), 11, [\"onClick\"])], 2)], 2)) : createCommentVNode(\"v-if\", true)]),\n _: 1\n }, 8, [\"name\"]);\n };\n }\n});\nvar TimePickPanel = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"panel-time-pick.vue\"]]);\nexport { TimePickPanel as default };","map":{"version":3,"names":["pickerBase","inject","arrowControl","disabledHours","disabledMinutes","disabledSeconds","defaultValue","props","getAvailableHours","getAvailableMinutes","getAvailableSeconds","buildAvailableTimeSlotGetter","ns","useNamespace","t","lang","useLocale","selectionRange","ref","oldValue","useOldValue","transitionName","computed","isUndefined","actualVisible","namespace","value","showSeconds","format","includes","amPmMode","isValidValue","_date","parsedDate","dayjs","locale","result","getRangeAvailableTime","isSame","handleCancel","emit","handleConfirm","visible","first","parsedValue","handleChange","millisecond","setSelectionRange","start","end","changeSelectionRange","step","list","concat","mapping","index","indexOf","next","length","timePickerOptions","handleKeydown","event","code","left","right","up","down","EVENT_CODE","preventDefault","onSetOption","getAvailableTime","useTimePanel","date","datetimeRole","parseUserInput","formatToString","getDefaultValue"],"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=\"ns.b('panel')\">\n <div :class=\"[ns.be('panel', 'content'), { '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 as any)\"\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=\"ns.be('panel', 'footer')\">\n <button\n type=\"button\"\n :class=\"[ns.be('panel', 'btn'), 'cancel']\"\n @click=\"handleCancel\"\n >\n {{ t('el.datepicker.cancel') }}\n </button>\n <button\n type=\"button\"\n :class=\"[ns.be('panel', 'btn'), 'confirm']\"\n @click=\"handleConfirm()\"\n >\n {{ t('el.datepicker.confirm') }}\n </button>\n </div>\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { isUndefined } from '@element-plus/utils'\nimport { panelTimePickerProps } from '../props/panel-time-picker'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n buildAvailableTimeSlotGetter,\n useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimePickerProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\n// Injections\nconst pickerBase = inject('EP_PICKER_BASE') as any\nconst {\n arrowControl,\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n defaultValue,\n} = pickerBase.props\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds)\n\nconst ns = useNamespace('time')\nconst { t, lang } = useLocale()\n// data\nconst selectionRange = ref([0, 2])\nconst oldValue = useOldValue(props)\n// computed\nconst transitionName = computed(() => {\n return isUndefined(props.actualVisible)\n ? `${ns.namespace.value}-zoom-in-top`\n : ''\n})\nconst showSeconds = computed(() => {\n return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n if (props.format.includes('A')) return 'A'\n if (props.format.includes('a')) return 'a'\n return ''\n})\n// method\nconst isValidValue = (_date: Dayjs) => {\n const parsedDate = dayjs(_date).locale(lang.value)\n const result = getRangeAvailableTime(parsedDate)\n return parsedDate.isSame(result)\n}\nconst handleCancel = () => {\n emit('pick', oldValue.value, false)\n}\nconst handleConfirm = (visible = false, first = false) => {\n if (first) return\n emit('pick', props.parsedValue, visible)\n}\nconst 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 emit('pick', result, true)\n}\n\nconst setSelectionRange = (start: number, end: number) => {\n emit('select-range', start, end)\n selectionRange.value = [start, end]\n}\n\nconst changeSelectionRange = (step: number) => {\n const list = [0, 3].concat(showSeconds.value ? [6] : [])\n const mapping = ['hours', 'minutes'].concat(\n showSeconds.value ? ['seconds'] : []\n )\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\nconst handleKeydown = (event: KeyboardEvent) => {\n const code = event.code\n\n const { left, right, up, down } = EVENT_CODE\n\n if ([left, right].includes(code)) {\n const step = code === left ? -1 : 1\n changeSelectionRange(step)\n event.preventDefault()\n return\n }\n\n if ([up, down].includes(code)) {\n const step = code === up ? -1 : 1\n timePickerOptions['start_scrollDown'](step)\n event.preventDefault()\n return\n }\n}\n\nconst { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({\n getAvailableHours,\n getAvailableMinutes,\n getAvailableSeconds,\n})\n\nconst getRangeAvailableTime = (date: Dayjs) => {\n return getAvailableTime(date, props.datetimeRole || '', true)\n}\n\nconst parseUserInput = (value: Dayjs) => {\n if (!value) return null\n return dayjs(value, props.format).locale(lang.value)\n}\n\nconst formatToString = (value: Dayjs) => {\n if (!value) return null\n return value.format(props.format)\n}\n\nconst getDefaultValue = () => {\n return dayjs(defaultValue).locale(lang.value)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['formatToString', formatToString])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\n</script>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |