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
9.9 KiB
1 line
9.9 KiB
2 years ago
|
{"version":3,"file":"panel-time-pick.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=\"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.
|