@rotki/ui-library 2.10.0 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordions/accordion/RuiAccordion.vue.d.ts +2 -2
- package/dist/components/alerts/RuiAlert.vue.d.ts +3 -3
- package/dist/components/buttons/button/RuiButton.vue.d.ts +9 -5
- package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts +9 -5
- package/dist/components/calendar/state.js +1 -1
- package/dist/components/calendar/state.js.map +1 -1
- package/dist/components/cards/RuiCard.vue.d.ts +6 -6
- package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts +3 -4
- package/dist/components/date-time-picker/RuiDateTimePicker.vue2.js +66 -249
- package/dist/components/date-time-picker/RuiDateTimePicker.vue2.js.map +1 -1
- package/dist/components/date-time-picker/use-date-time-selection.d.ts +38 -0
- package/dist/components/date-time-picker/use-date-time-selection.js +286 -0
- package/dist/components/date-time-picker/use-date-time-selection.js.map +1 -0
- package/dist/components/date-time-picker/use-keyboard-handler.d.ts +2 -0
- package/dist/components/date-time-picker/use-keyboard-handler.js +71 -60
- package/dist/components/date-time-picker/use-keyboard-handler.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue.d.ts +29 -25
- package/dist/components/forms/checkbox/RuiCheckbox.vue.d.ts +2 -2
- package/dist/components/forms/radio-button/radio/RuiRadio.vue.d.ts +9 -5
- package/dist/components/forms/radio-button/radio-group/RuiRadioGroup.vue.d.ts +9 -5
- package/dist/components/forms/revealable-text-field/RuiRevealableTextField.vue.d.ts +4 -4
- package/dist/components/forms/select/RuiMenuSelect.vue.d.ts +29 -25
- package/dist/components/forms/text-area/RuiTextArea.vue.d.ts +3 -3
- package/dist/components/forms/text-field/RuiTextField.vue.d.ts +3 -3
- package/dist/components/overlays/badge/RuiBadge.vue.d.ts +3 -3
- package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.d.ts +2 -2
- package/dist/components/overlays/dialog/RuiDialog.vue.d.ts +2 -2
- package/dist/components/overlays/menu/RuiMenu.vue.d.ts +2 -2
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue.d.ts +2 -2
- package/dist/components/overlays/notification/RuiNotification.vue.d.ts +2 -2
- package/dist/components/overlays/tooltip/RuiTooltip.vue.d.ts +2 -2
- package/dist/components/tables/RuiDataTable.vue.d.ts +9 -5
- package/dist/components/tables/RuiExpandButton.vue.d.ts +2 -2
- package/dist/components/tables/RuiTableHead.vue.d.ts +9 -5
- package/dist/components/tabs/tab/RuiTab.vue.d.ts +1 -1
- package/dist/components/tabs/tab-item/RuiTabItem.vue.d.ts +3 -3
- package/dist/components/tabs/tab-items/RuiTabItems.vue.d.ts +9 -5
- package/dist/components/time-picker/RuiTimePicker.vue2.js +0 -1
- package/dist/components/time-picker/RuiTimePicker.vue2.js.map +1 -1
- package/dist/composables/defaults/table.js +1 -1
- package/dist/composables/defaults/table.js.map +1 -1
- package/dist/composables/icons.js +1 -1
- package/dist/composables/icons.js.map +1 -1
- package/dist/composables/use-rui-i18n.js +1 -1
- package/dist/composables/use-rui-i18n.js.map +1 -1
- package/dist/style.css +2 -2
- package/dist/web-types.json +72 -72
- package/package.json +31 -40
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiDateTimePicker.vue2.js","sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport { guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n T extends 'date' ? Date | undefined :\n T extends 'epoch-ms' ? number | undefined :\n T extends 'epoch' ? number | undefined :\n Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n minDate?: Date | number;\n maxDate?: Date | number | 'now';\n format?: DateFormat;\n type?: DateTimeModelType;\n accuracy?: TimeAccuracy;\n disabled?: boolean;\n allowEmpty?: boolean;\n readonly?: boolean;\n dense?: boolean;\n label?: string;\n variant?: 'default' | 'filled' | 'outlined';\n hint?: string;\n errorMessages?: string | string[];\n successMessages?: string | string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDateTimePicker',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<typeof props.type>>({ required: true });\n\nconst props = withDefaults(defineProps<RuiDateTimePickerProps>(), {\n disabled: false,\n readonly: false,\n allowEmpty: false,\n dense: false,\n type: 'epoch-ms',\n hideDetails: false,\n label: 'Pick a date',\n variant: 'default',\n hint: undefined,\n maxDate: undefined,\n minDate: undefined,\n format: 'day-first',\n accuracy: 'minute',\n errorMessages: () => [],\n successMessages: () => [],\n required: false,\n});\n\ndefineSlots<{\n 'menu-content': () => any;\n}>();\n\nconst baseFormats: Record<DateFormat, string> = {\n 'day-first': 'DD/MM/YYYY HH:mm',\n 'month-first': 'MM/DD/YYYY HH:mm',\n 'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst MILLISECONDS = 1000;\n\nconst isOpen = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst internalErrorMessages = ref<string[]>([]);\n\nconst selectedYear = ref<number>();\nconst selectedMonth = ref<number>();\nconst selectedDay = ref<number>();\n\nconst selectedHour = ref<number>();\nconst selectedMinute = ref<number>();\nconst selectedSecond = ref<number>();\nconst selectedMillisecond = ref<number>();\nconst selectedTimezone = ref<string | undefined>(guessTimezone());\n\nconst currentValue = ref<number>();\nconst now = ref(dayjs.tz(undefined, guessTimezone()));\n\nconst textInput = ref<HTMLInputElement>();\nconst activator = ref();\nconst menuWrapperRef = ref();\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst { setValue, update, getCurrent } = useInputHandler({\n DD: selectedDay,\n MM: selectedMonth,\n YYYY: selectedYear,\n HH: selectedHour,\n mm: selectedMinute,\n ss: selectedSecond,\n SSS: selectedMillisecond,\n}, currentValue);\n\nconst minAllowedDate = computed<Date>(() => {\n if (props.minDate === undefined) {\n return new Date(1970, 0, 1);\n }\n\n if (props.type === 'epoch' && typeof props.minDate === 'number') {\n return new Date(props.minDate * MILLISECONDS);\n }\n\n return new Date(props.minDate);\n});\n\nconst maxAllowedDate = computed<Date | undefined>(() => {\n if (props.maxDate === undefined) {\n return undefined;\n }\n if (props.maxDate === 'now') {\n return get(now).toDate();\n }\n if (props.type === 'epoch' && typeof props.maxDate === 'number') {\n return new Date(props.maxDate * MILLISECONDS);\n }\n return new Date(props.maxDate);\n});\n\nconst dateFormat = computed<string>(() => {\n const dateFormat = props.format;\n const format = baseFormats[dateFormat];\n if (props.accuracy === 'second') {\n return format.replace('HH:mm', 'HH:mm:ss');\n }\n else if (props.accuracy === 'millisecond') {\n return format.replace('HH:mm', 'HH:mm:ss.SSS');\n }\n return format;\n});\n\nconst {\n clear: clearSegment,\n getCurrentSegment,\n handleClick,\n handleFocus,\n handleInput,\n handleInputSelection,\n handleKeyDown,\n handlePaste,\n setSegment,\n} = useKeyboardHandler({\n currentValue,\n cursorPosition,\n disabled: props.disabled,\n getDateTime,\n getCurrent,\n readonly: props.readonly,\n dateFormat,\n setValue,\n textInput,\n accuracy: props.accuracy,\n});\n\nconst { t } = useRuiI8n();\n\nfunction handleInputClick(event: MouseEvent): void {\n // Open menu if not already open\n if (!get(isOpen)) {\n set(isOpen, true);\n }\n // Handle segment selection\n handleClick(event);\n}\n\nconst anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);\n\nconst selectedDate = computed<Date | undefined>({\n set(value?: Date) {\n set(selectedYear, value?.getFullYear());\n set(selectedMonth, value ? value.getMonth() + 1 : undefined);\n set(selectedDay, value?.getDate());\n },\n get() {\n if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {\n return undefined;\n }\n const date = new Date();\n date.setFullYear(get(selectedYear));\n date.setMonth(get(selectedMonth) - 1);\n date.setDate(get(selectedDay));\n return date;\n },\n});\n\nconst selectedTime = computed<Date | undefined>({\n set(value?: Date) {\n set(selectedHour, value?.getHours());\n set(selectedMinute, value?.getMinutes());\n set(selectedSecond, value?.getSeconds());\n set(selectedMillisecond, value?.getMilliseconds());\n },\n get() {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return undefined;\n }\n const date = new Date();\n date.setHours(\n get(selectedHour),\n get(selectedMinute),\n get(selectedSecond) ?? 0,\n get(selectedMillisecond) ?? 0,\n );\n return date;\n },\n});\n\nconst valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\nconst labelWithQuote = computed<string>(() => {\n if (!props.label)\n return '\"\\\\200B\"';\n\n const asterisk = props.required ? '﹡' : '';\n return `' ${props.label}${asterisk} '`;\n});\n\nconst isOutlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n let result = get(dateFormat);\n\n const replacements = [\n { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 3) },\n ];\n\n for (const { pattern, value } of replacements) {\n if (value !== undefined) {\n result = result.replace(pattern, value);\n }\n }\n\n return result;\n});\n\nconst timeSelection = computed<TimePickerSelection>({\n get() {\n const type = getCurrentSegment()?.type;\n\n if (type === 'mm') {\n return 'minute';\n }\n else if (type === 'ss') {\n return 'second';\n }\n else if (type === 'SSS') {\n return 'millisecond';\n }\n return 'hour';\n },\n set(value: TimePickerSelection) {\n let segmentType: DateTimeSegmentType = 'HH';\n if (value === 'minute') {\n segmentType = 'mm';\n }\n else if (value === 'second') {\n segmentType = 'ss';\n }\n else if (value === 'millisecond') {\n segmentType = 'SSS';\n }\n\n setSegment(segmentType);\n },\n});\n\nconst float = logicAnd(logicOr(isOpen, valueSet, searchInputFocused), isOutlined);\n\nconst combinedErrorMessages = computed<string[]>(() => {\n let propErrors: string[];\n if (props.errorMessages) {\n propErrors = Array.isArray(props.errorMessages)\n ? props.errorMessages\n : [props.errorMessages];\n }\n else {\n propErrors = Array.isArray(props.errorMessages)\n ? props.errorMessages\n : [];\n }\n return [...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n return isDefined(digit)\n ? get(digit).toString().padStart(padding, '0')\n : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n await nextTick(() => {\n set(searchInputFocused, true);\n });\n}\n\nfunction clear(segmentType?: string): void {\n set(internalErrorMessages, []);\n\n if (!segmentType) {\n set(selectedYear, undefined);\n set(selectedMonth, undefined);\n set(selectedDay, undefined);\n set(selectedHour, undefined);\n set(selectedMinute, undefined);\n set(selectedSecond, undefined);\n set(selectedMillisecond, undefined);\n set(currentValue, undefined);\n set(modelValue, undefined);\n return;\n }\n\n clearSegment(segmentType);\n}\n\nfunction arrowClicked(event: any): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n\nfunction getDateTime(): Dayjs {\n let dateTime = dayjs();\n if (isDefined(selectedYear)) {\n dateTime = dateTime.year(get(selectedYear));\n }\n\n if (isDefined(selectedMonth)) {\n dateTime = dateTime.month(get(selectedMonth) - 1);\n }\n\n if (isDefined(selectedDay)) {\n const daysInMonth = dateTime.daysInMonth();\n const day = Math.min(get(selectedDay), daysInMonth);\n dateTime = dateTime.date(day);\n }\n\n if (isDefined(selectedHour)) {\n dateTime = dateTime.hour(get(selectedHour));\n }\n\n if (isDefined(selectedMinute)) {\n dateTime = dateTime.minute(get(selectedMinute));\n }\n\n if (isDefined(selectedSecond)) {\n dateTime = dateTime.second(get(selectedSecond));\n }\n\n if (isDefined(selectedMillisecond)) {\n dateTime = dateTime.millisecond(get(selectedMillisecond));\n }\n\n return dateTime;\n}\n\nfunction setNow(): void {\n set(internalErrorMessages, []);\n\n const date = dayjs();\n set(now, date);\n set(selectedYear, date.year());\n set(selectedMonth, date.month() + 1);\n set(selectedDay, date.date());\n set(selectedHour, date.hour());\n set(selectedMinute, date.minute());\n set(selectedSecond, includeSeconds(props.accuracy) ? date.second() : 0);\n set(selectedMillisecond, includeMilliseconds(props.accuracy) ? date.millisecond() : 0);\n\n nextTick(() => {\n updateModelValue();\n });\n}\n\nfunction isDateValid(date: Dayjs): boolean {\n const min = get(minAllowedDate);\n const max = get(maxAllowedDate);\n\n set(internalErrorMessages, []);\n\n if (min && date.isBefore(min)) {\n const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n date: min.toLocaleDateString(),\n }, `Date cannot be before ${min.toLocaleDateString()}`);\n set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n return false;\n }\n\n if (max && date.isAfter(max)) {\n const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: max.toLocaleDateString() }, `Date cannot be after ${max.toLocaleDateString()}`);\n const errorMessage = props.maxDate === 'now' ? nowError : maxError;\n set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n return false;\n }\n\n return true;\n}\n\nfunction emitUpdate(updatedModel: Dayjs) {\n const typeMap = {\n 'date': () => updatedModel.toDate(),\n 'epoch-ms': () => updatedModel.valueOf(),\n 'epoch': () => updatedModel.valueOf() / MILLISECONDS,\n } as const;\n\n set(modelValue, typeMap[props.type]());\n}\n\nfunction updateModelValue(): void {\n if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n return;\n }\n\n if (!(isDefined(selectedDate) && isDefined(selectedTime))) {\n set(modelValue, undefined);\n }\n else {\n const date = get(selectedDate);\n const time = get(selectedTime);\n\n const updatedModel = dayjs.tz(isDefined(modelValue) ? get(modelValue) : undefined, get(selectedTimezone))\n .year(date.getFullYear())\n .month(date.getMonth())\n .date(date.getDate())\n .hour(time.getHours())\n .minute(time.getMinutes())\n .second(includeSeconds(props.accuracy) ? time.getSeconds() : 0)\n .millisecond(includeMilliseconds(props.accuracy) ? time.getMilliseconds() : 0);\n\n if (!isDateValid(updatedModel)) {\n return;\n }\n\n emitUpdate(updatedModel);\n }\n}\n\nconst { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([selectedDate, selectedTime], [prevSelectedDate, prevSelectedTime]) => {\n const currentTimezone = get(selectedTimezone);\n const newSelectedDate = dayjs.tz(selectedDate, currentTimezone);\n const oldSelectedDate = dayjs.tz(prevSelectedDate, currentTimezone);\n const newSelectedTime = dayjs.tz(selectedTime, currentTimezone);\n const oldSelectedTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n if (newSelectedDate.isSame(oldSelectedDate) && newSelectedTime.isSame(oldSelectedTime)) {\n return;\n }\n\n set(now, dayjs());\n updateModelValue();\n});\n\nfunction updateInternalModel(value: ModelValueType<typeof props.type>) {\n ignoreUpdates(() => {\n const updatedValue = props.type === 'epoch' && typeof value === 'number'\n ? value * MILLISECONDS\n : value;\n const date = dayjs.tz(updatedValue, get(selectedTimezone));\n isDateValid(date);\n update(date, props.accuracy);\n });\n}\n\nwatch(selectedTimezone, (newTimezone: string | undefined) => {\n if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n set(now, dayjs());\n updateModelValue();\n }\n});\n\nwatch(modelValue, (value) => {\n set(now, dayjs());\n if (value === undefined) {\n clear();\n }\n else {\n updateInternalModel(value);\n }\n});\n\nonMounted(() => {\n if (isDefined(modelValue)) {\n updateInternalModel(get(modelValue));\n }\n else if (!props.allowEmpty) {\n setNow();\n }\n});\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n :class=\"$style.wrapper\"\n :dense=\"dense\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :success-messages=\"successMessages\"\n :error-messages=\"combinedErrorMessages\"\n :close-on-content-click=\"false\"\n :show-details=\"!hideDetails\"\n :persistent=\"calendarMenuOpen\"\n :popper=\"{\n placement: 'bottom-start',\n }\"\n full-width\n v-bind=\"{\n ...getRootAttrs($attrs),\n }\"\n >\n <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n <div\n ref=\"activator\"\n class=\"group\"\n :class=\"[\n $style.activator,\n {\n [$style.disabled]: disabled,\n [$style.readonly]: readonly,\n [$style.outlined]: isOutlined,\n [$style.dense]: dense,\n [$style.float]: float,\n [$style.opened]: open,\n [$style['with-value']]: valueSet,\n [$style['with-error']]: hasError,\n [$style['with-success']]: hasSuccess && !hasError,\n },\n ]\"\n v-bind=\"{\n ...getNonRootAttrs($attrs, ['onClick', 'class']),\n ...(props.readonly ? {} : attrs) }\n \"\n data-id=\"activator\"\n :data-error=\"hasError ? '' : undefined\"\n :tabindex=\"disabled || props.readonly ? -1 : 0\"\n @click=\"setInputFocus()\"\n >\n <span\n v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n :class=\"[\n $style.label,\n {\n 'absolute': isOutlined,\n 'pr-2': !valueSet && !open && isOutlined,\n },\n ]\"\n >\n {{ label }}\n <span\n v-if=\"props.required\"\n class=\"text-rui-error\"\n >\n ﹡\n </span>\n </span>\n\n <span :class=\"[$style.icon__wrapper, $style.icon__prepend]\">\n <RuiIcon\n :class=\"[$style.icon]\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-calendar-days\"\n />\n </span>\n\n <div :class=\"$style.value\">\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :value=\"formattedDisplay\"\n class=\"bg-transparent outline-none flex-1 min-w-0\"\n type=\"text\"\n :placeholder=\"dateFormat\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n @focus=\"handleFocus()\"\n @select=\"handleInputSelection($event)\"\n @click.stop=\"handleInputClick($event)\"\n @keydown=\"handleKeyDown($event)\"\n @paste=\"handlePaste($event)\"\n @input=\"handleInput($event)\"\n />\n </div>\n\n <RuiButton\n v-if=\"allowEmpty && valueSet && !disabled\"\n variant=\"text\"\n icon\n data-id=\"clear-button\"\n size=\"sm\"\n tabindex=\"-1\"\n color=\"error\"\n class=\"group-hover:!visible\"\n :class=\"[$style.clear, anyFocused && '!visible', {\n 'mr-2': !dense,\n }]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"18\"\n />\n </RuiButton>\n\n <span\n :class=\"[$style.icon__wrapper, $style.icon__append]\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"[$style.icon, { 'rotate-180': open }]\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n </div>\n <fieldset\n v-if=\"isOutlined\"\n :class=\"$style.fieldset\"\n >\n <legend :class=\"{ 'px-2': float }\" />\n </fieldset>\n </template>\n <template #default>\n <RuiDateTimePickerMenu\n ref=\"menuWrapperRef\"\n v-model:selected-date=\"selectedDate\"\n v-model:selected-time=\"selectedTime\"\n v-model:selected-hour=\"selectedHour\"\n v-model:selected-minute=\"selectedMinute\"\n v-model:selected-second=\"selectedSecond\"\n v-model:selected-millisecond=\"selectedMillisecond\"\n v-model:time-selection=\"timeSelection\"\n v-model:selected-timezone=\"selectedTimezone\"\n v-model:calendar-menu-open=\"calendarMenuOpen\"\n :accuracy=\"accuracy\"\n :max-date=\"maxAllowedDate\"\n :min-date=\"minAllowedDate\"\n @set-now=\"setNow()\"\n >\n <slot name=\"menu-content\" />\n </RuiDateTimePickerMenu>\n </template>\n </RuiMenu>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n @apply w-full inline-flex flex-col;\n\n .activator {\n @apply relative inline-flex items-center w-full;\n @apply outline-none focus-within:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n &:not(.outlined) {\n @apply hover:bg-gray-100 focus-within:bg-gray-100;\n }\n\n &.dense {\n @apply py-1.5 min-h-10;\n\n ~ .fieldset {\n @apply px-2;\n }\n }\n\n &.disabled {\n @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n }\n\n &.readonly {\n @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n }\n\n &.outlined {\n @apply border-none hover:border-none;\n\n &.opened,\n &:focus,\n &:focus-within {\n @apply border-rui-primary;\n\n ~ .fieldset {\n @apply border-rui-primary #{!important};\n @apply border-2 #{!important};\n }\n }\n\n ~ .fieldset {\n @apply border border-black/[0.23];\n }\n\n &:hover {\n ~ .fieldset {\n @apply border-black;\n }\n }\n\n &.disabled {\n ~ .fieldset {\n @apply border-dotted;\n @apply border border-black/[0.23] #{!important};\n }\n }\n\n &.with-success {\n .label {\n @apply text-rui-success #{!important};\n }\n\n ~ .fieldset {\n @apply border-rui-success #{!important};\n }\n }\n\n &.with-error {\n .label {\n @apply text-rui-error #{!important};\n }\n\n ~ .fieldset {\n @apply border-rui-error #{!important};\n }\n }\n }\n\n .label {\n @apply text-rui-text-secondary;\n max-width: calc(100% - 2.5rem);\n }\n\n .label,\n .value {\n @apply block truncate transition-all duration-75;\n }\n\n .value {\n @apply flex gap-1 flex-wrap flex-1 ps-8;\n }\n\n .clear {\n @apply ml-auto shrink-0 invisible;\n }\n\n .icon {\n @apply text-rui-text-secondary transition;\n\n &__wrapper {\n @apply flex items-center justify-end;\n @apply absolute top-px bottom-0;\n }\n\n &__append {\n @apply right-3;\n }\n\n &__prepend {\n @apply left-3;\n }\n }\n\n &.float {\n .label {\n @apply -translate-y-2 top-0 text-xs px-1;\n }\n\n ~ .fieldset {\n legend {\n &:after {\n content: v-bind(labelWithQuote);\n }\n }\n }\n\n &.opened,\n &.opened.with-value,\n &:focus,\n &:focus.with-value,\n &:focus-within,\n &:focus-within.with-value {\n .label {\n @apply text-rui-primary;\n }\n\n ~ .fieldset {\n @apply border-rui-primary;\n @apply border-2 #{!important};\n }\n }\n }\n }\n\n .fieldset {\n @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n legend {\n @apply opacity-0 text-xs truncate;\n max-width: calc(100% - 1rem);\n\n &:before {\n content: ' ';\n }\n\n &:after {\n @apply truncate max-w-full leading-[0];\n content: '\\200B';\n }\n }\n }\n}\n\n.menu {\n @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n @apply bg-rui-grey-200 #{!important};\n\n &.active {\n @apply bg-rui-grey-300 #{!important};\n }\n}\n\n:global(.dark) {\n .wrapper {\n .activator {\n @apply bg-transparent text-rui-text;\n\n &:not(.outlined) {\n @apply hover:bg-white/10 focus-within:bg-white/10;\n\n &.disabled {\n @apply bg-white/10;\n }\n }\n\n &.readonly {\n @apply bg-white/10;\n }\n\n &.outlined {\n ~ .fieldset {\n @apply border-white/[0.23];\n }\n\n &.disabled {\n ~ .fieldset {\n @apply border-white/[0.23] #{!important};\n }\n }\n\n &:hover {\n ~ .fieldset {\n @apply border-white;\n }\n }\n }\n }\n }\n\n .highlighted {\n @apply bg-rui-grey-800 #{!important};\n\n &.active {\n @apply bg-rui-grey-700 #{!important};\n }\n }\n}\n</style>\n"],"names":["_useModel","dateFormat","selectedDate","selectedTime","_openBlock","_createBlock","_mergeProps","_unref","$style","getRootAttrs","$attrs","_withCtx","_createElementVNode","getNonRootAttrs","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","_withModifiers","RuiDateTimePickerMenu","_renderSlot"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RuiDateTimePicker.vue2.js","sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n T extends 'date' ? Date | undefined :\n T extends 'epoch-ms' ? number | undefined :\n T extends 'epoch' ? number | undefined :\n Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n minDate?: Date | number;\n maxDate?: Date | number | 'now';\n format?: DateFormat;\n type?: DateTimeModelType;\n accuracy?: 'minute' | 'second' | 'millisecond';\n disabled?: boolean;\n allowEmpty?: boolean;\n readonly?: boolean;\n dense?: boolean;\n label?: string;\n variant?: 'default' | 'filled' | 'outlined';\n hint?: string;\n errorMessages?: string | string[];\n successMessages?: string | string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDateTimePicker',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<typeof props.type>>({ required: true });\n\nconst props = withDefaults(defineProps<RuiDateTimePickerProps>(), {\n disabled: false,\n readonly: false,\n allowEmpty: false,\n dense: false,\n type: 'epoch-ms',\n hideDetails: false,\n label: 'Pick a date',\n variant: 'default',\n hint: undefined,\n maxDate: undefined,\n minDate: undefined,\n format: 'day-first',\n accuracy: 'minute',\n errorMessages: () => [],\n successMessages: () => [],\n required: false,\n});\n\ndefineSlots<{\n 'menu-content': () => any;\n}>();\n\nconst baseFormats: Record<DateFormat, string> = {\n 'day-first': 'DD/MM/YYYY HH:mm',\n 'month-first': 'MM/DD/YYYY HH:mm',\n 'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst textInput = ref<HTMLInputElement>();\nconst activator = ref();\nconst menuWrapperRef = ref();\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n clear: clearSelection,\n getDateTime,\n internalErrorMessages,\n maxAllowedDate,\n minAllowedDate,\n segmentData,\n selectedDate,\n selectedDay,\n selectedHour,\n selectedMillisecond,\n selectedMinute,\n selectedMonth,\n selectedSecond,\n selectedTime,\n selectedTimezone,\n selectedYear,\n setNow,\n valueSet,\n} = useDateTimeSelection({\n accuracy: props.accuracy,\n allowEmpty: props.allowEmpty,\n maxDate: props.maxDate,\n minDate: props.minDate,\n modelValue,\n type: props.type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst dateFormat = computed<string>(() => {\n const dateFormat = props.format;\n const format = baseFormats[dateFormat];\n if (props.accuracy === 'second') {\n return format.replace('HH:mm', 'HH:mm:ss');\n }\n else if (props.accuracy === 'millisecond') {\n return format.replace('HH:mm', 'HH:mm:ss.SSS');\n }\n return format;\n});\n\nconst {\n clear: clearSegment,\n getCurrentSegment,\n handleBlur,\n handleClick,\n handleFocus,\n handleInput,\n handleInputSelection,\n handleKeyDown,\n handleMouseDown,\n handlePaste,\n setSegment,\n} = useKeyboardHandler({\n accuracy: props.accuracy,\n currentValue,\n cursorPosition,\n dateFormat,\n disabled: props.disabled,\n getCurrent,\n getDateTime,\n readonly: props.readonly,\n setValue,\n textInput,\n});\n\nfunction handleInputClick(event: MouseEvent): void {\n // Handle segment selection first, before any DOM changes from menu opening\n handleClick(event);\n // Open menu if not already open\n if (!get(isOpen)) {\n set(isOpen, true);\n }\n}\n\nconst anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);\n\nconst labelWithQuote = computed<string>(() => {\n if (!props.label)\n return '\"\\\\200B\"';\n\n const asterisk = props.required ? '﹡' : '';\n return `' ${props.label}${asterisk} '`;\n});\n\nconst isOutlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n let result = get(dateFormat);\n\n const replacements = [\n { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 3) },\n ];\n\n for (const { pattern, value } of replacements) {\n if (value !== undefined) {\n result = result.replace(pattern, value);\n }\n }\n\n return result;\n});\n\nconst timeSelection = computed<TimePickerSelection>({\n get() {\n const type = getCurrentSegment()?.type;\n\n if (type === 'mm') {\n return 'minute';\n }\n else if (type === 'ss') {\n return 'second';\n }\n else if (type === 'SSS') {\n return 'millisecond';\n }\n return 'hour';\n },\n set(value: TimePickerSelection) {\n let segmentType: DateTimeSegmentType = 'HH';\n if (value === 'minute') {\n segmentType = 'mm';\n }\n else if (value === 'second') {\n segmentType = 'ss';\n }\n else if (value === 'millisecond') {\n segmentType = 'SSS';\n }\n\n setSegment(segmentType);\n },\n});\n\nconst float = logicAnd(logicOr(isOpen, valueSet, searchInputFocused), isOutlined);\n\nconst combinedErrorMessages = computed<string[]>(() => {\n let propErrors: string[];\n if (props.errorMessages) {\n propErrors = Array.isArray(props.errorMessages)\n ? props.errorMessages\n : [props.errorMessages];\n }\n else {\n propErrors = Array.isArray(props.errorMessages)\n ? props.errorMessages\n : [];\n }\n return [...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n return isDefined(digit)\n ? get(digit).toString().padStart(padding, '0')\n : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n await nextTick(() => {\n set(searchInputFocused, true);\n });\n}\n\nfunction clear(segmentType?: string): void {\n if (!segmentType) {\n clearSelection();\n set(currentValue, undefined);\n return;\n }\n\n clearSegment(segmentType);\n}\n\nfunction arrowClicked(event: any): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n :class=\"$style.wrapper\"\n :dense=\"dense\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :success-messages=\"successMessages\"\n :error-messages=\"combinedErrorMessages\"\n :close-on-content-click=\"false\"\n :show-details=\"!hideDetails\"\n :persistent=\"calendarMenuOpen\"\n :popper=\"{\n placement: 'bottom-start',\n }\"\n full-width\n disable-auto-focus\n v-bind=\"{\n ...getRootAttrs($attrs),\n }\"\n >\n <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n <div\n ref=\"activator\"\n class=\"group\"\n :class=\"[\n $style.activator,\n {\n [$style.disabled]: disabled,\n [$style.readonly]: readonly,\n [$style.outlined]: isOutlined,\n [$style.dense]: dense,\n [$style.float]: float,\n [$style.opened]: open,\n [$style['with-value']]: valueSet,\n [$style['with-error']]: hasError,\n [$style['with-success']]: hasSuccess && !hasError,\n },\n ]\"\n v-bind=\"{\n ...getNonRootAttrs($attrs, ['onClick', 'class']),\n ...(props.readonly ? {} : attrs) }\n \"\n data-id=\"activator\"\n :data-error=\"hasError ? '' : undefined\"\n :tabindex=\"disabled || props.readonly ? -1 : 0\"\n @click=\"setInputFocus()\"\n >\n <span\n v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n data-id=\"label\"\n :class=\"[\n $style.label,\n {\n 'absolute': isOutlined,\n 'pr-2': !valueSet && !open && isOutlined,\n },\n ]\"\n >\n {{ label }}\n <span\n v-if=\"props.required\"\n data-id=\"required-indicator\"\n class=\"text-rui-error\"\n >\n ﹡\n </span>\n </span>\n\n <span :class=\"[$style.icon__wrapper, $style.icon__prepend]\">\n <RuiIcon\n :class=\"[$style.icon]\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-calendar-days\"\n />\n </span>\n\n <div :class=\"$style.value\">\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :value=\"formattedDisplay\"\n class=\"bg-transparent outline-none flex-1 min-w-0\"\n type=\"text\"\n :placeholder=\"dateFormat\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n @mousedown=\"handleMouseDown($event)\"\n @focus=\"handleFocus()\"\n @blur=\"handleBlur()\"\n @select=\"handleInputSelection($event)\"\n @click.stop=\"handleInputClick($event)\"\n @keydown=\"handleKeyDown($event)\"\n @paste=\"handlePaste($event)\"\n @input=\"handleInput($event)\"\n />\n </div>\n\n <RuiButton\n v-if=\"allowEmpty && valueSet && !disabled\"\n variant=\"text\"\n icon\n data-id=\"clear-button\"\n size=\"sm\"\n tabindex=\"-1\"\n color=\"error\"\n class=\"group-hover:!visible\"\n :class=\"[$style.clear, anyFocused && '!visible', {\n 'mr-2': !dense,\n }]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"18\"\n />\n </RuiButton>\n\n <span\n :class=\"[$style.icon__wrapper, $style.icon__append]\"\n data-id=\"append\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"[$style.icon, { 'rotate-180': open }]\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n </div>\n <fieldset\n v-if=\"isOutlined\"\n :class=\"$style.fieldset\"\n >\n <legend :class=\"{ 'px-2': float }\" />\n </fieldset>\n </template>\n <template #default>\n <RuiDateTimePickerMenu\n ref=\"menuWrapperRef\"\n v-model:selected-date=\"selectedDate\"\n v-model:selected-time=\"selectedTime\"\n v-model:selected-hour=\"selectedHour\"\n v-model:selected-minute=\"selectedMinute\"\n v-model:selected-second=\"selectedSecond\"\n v-model:selected-millisecond=\"selectedMillisecond\"\n v-model:time-selection=\"timeSelection\"\n v-model:selected-timezone=\"selectedTimezone\"\n v-model:calendar-menu-open=\"calendarMenuOpen\"\n :accuracy=\"accuracy\"\n :max-date=\"maxAllowedDate\"\n :min-date=\"minAllowedDate\"\n @set-now=\"setNow()\"\n >\n <slot name=\"menu-content\" />\n </RuiDateTimePickerMenu>\n </template>\n </RuiMenu>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n @apply w-full inline-flex flex-col;\n\n .activator {\n @apply relative inline-flex items-center w-full;\n @apply outline-none focus-within:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n &:not(.outlined) {\n @apply hover:bg-gray-100 focus-within:bg-gray-100;\n }\n\n &.dense {\n @apply py-1.5 min-h-10;\n\n ~ .fieldset {\n @apply px-2;\n }\n }\n\n &.disabled {\n @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n }\n\n &.readonly {\n @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n }\n\n &.outlined {\n @apply border-none hover:border-none;\n\n &.opened,\n &:focus,\n &:focus-within {\n @apply border-rui-primary;\n\n ~ .fieldset {\n @apply border-rui-primary #{!important};\n @apply border-2 #{!important};\n }\n }\n\n ~ .fieldset {\n @apply border border-black/[0.23];\n }\n\n &:hover {\n ~ .fieldset {\n @apply border-black;\n }\n }\n\n &.disabled {\n ~ .fieldset {\n @apply border-dotted;\n @apply border border-black/[0.23] #{!important};\n }\n }\n\n &.with-success {\n .label {\n @apply text-rui-success #{!important};\n }\n\n ~ .fieldset {\n @apply border-rui-success #{!important};\n }\n }\n\n &.with-error {\n .label {\n @apply text-rui-error #{!important};\n }\n\n ~ .fieldset {\n @apply border-rui-error #{!important};\n }\n }\n }\n\n .label {\n @apply text-rui-text-secondary;\n max-width: calc(100% - 2.5rem);\n }\n\n .label,\n .value {\n @apply block truncate transition-all duration-75;\n }\n\n .value {\n @apply flex gap-1 flex-wrap flex-1 ps-8;\n }\n\n .clear {\n @apply ml-auto shrink-0 invisible;\n }\n\n .icon {\n @apply text-rui-text-secondary transition;\n\n &__wrapper {\n @apply flex items-center justify-end;\n @apply absolute top-px bottom-0;\n }\n\n &__append {\n @apply right-3;\n }\n\n &__prepend {\n @apply left-3;\n }\n }\n\n &.float {\n .label {\n @apply -translate-y-2 top-0 text-xs px-1;\n }\n\n ~ .fieldset {\n legend {\n &:after {\n content: v-bind(labelWithQuote);\n }\n }\n }\n\n &.opened,\n &.opened.with-value,\n &:focus,\n &:focus.with-value,\n &:focus-within,\n &:focus-within.with-value {\n .label {\n @apply text-rui-primary;\n }\n\n ~ .fieldset {\n @apply border-rui-primary;\n @apply border-2 #{!important};\n }\n }\n }\n }\n\n .fieldset {\n @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n legend {\n @apply opacity-0 text-xs truncate;\n max-width: calc(100% - 1rem);\n\n &:before {\n content: ' ';\n }\n\n &:after {\n @apply truncate max-w-full leading-[0];\n content: '\\200B';\n }\n }\n }\n}\n\n.menu {\n @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n @apply bg-rui-grey-200 #{!important};\n\n &.active {\n @apply bg-rui-grey-300 #{!important};\n }\n}\n\n:global(.dark) {\n .wrapper {\n .activator {\n @apply bg-transparent text-rui-text;\n\n &:not(.outlined) {\n @apply hover:bg-white/10 focus-within:bg-white/10;\n\n &.disabled {\n @apply bg-white/10;\n }\n }\n\n &.readonly {\n @apply bg-white/10;\n }\n\n &.outlined {\n ~ .fieldset {\n @apply border-white/[0.23];\n }\n\n &.disabled {\n ~ .fieldset {\n @apply border-white/[0.23] #{!important};\n }\n }\n\n &:hover {\n ~ .fieldset {\n @apply border-white;\n }\n }\n }\n }\n }\n\n .highlighted {\n @apply bg-rui-grey-800 #{!important};\n\n &.active {\n @apply bg-rui-grey-700 #{!important};\n }\n }\n}\n</style>\n"],"names":["_useModel","dateFormat","_openBlock","_createBlock","_mergeProps","_unref","$style","getRootAttrs","$attrs","_withCtx","_createElementVNode","getNonRootAttrs","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","_withModifiers","RuiDateTimePickerMenu","_renderSlot"],"mappings":"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"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
|
|
2
|
+
import type { SegmentData } from '../../components/date-time-picker/types.js';
|
|
3
|
+
import type { TimeAccuracy } from '../../consts/time-accuracy.js';
|
|
4
|
+
import { type Dayjs } from 'dayjs';
|
|
5
|
+
type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
|
|
6
|
+
type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
|
|
7
|
+
interface DateTimeSelectionOptions<T extends DateTimeModelType> {
|
|
8
|
+
modelValue: Ref<ModelValueType<T>>;
|
|
9
|
+
type: T;
|
|
10
|
+
accuracy: TimeAccuracy;
|
|
11
|
+
minDate: Date | number | undefined;
|
|
12
|
+
maxDate: Date | number | 'now' | undefined;
|
|
13
|
+
allowEmpty: boolean;
|
|
14
|
+
}
|
|
15
|
+
interface DateTimeSelectionReturn {
|
|
16
|
+
selectedYear: Ref<number | undefined>;
|
|
17
|
+
selectedMonth: Ref<number | undefined>;
|
|
18
|
+
selectedDay: Ref<number | undefined>;
|
|
19
|
+
selectedHour: Ref<number | undefined>;
|
|
20
|
+
selectedMinute: Ref<number | undefined>;
|
|
21
|
+
selectedSecond: Ref<number | undefined>;
|
|
22
|
+
selectedMillisecond: Ref<number | undefined>;
|
|
23
|
+
selectedTimezone: Ref<string | undefined>;
|
|
24
|
+
selectedDate: WritableComputedRef<Date | undefined>;
|
|
25
|
+
selectedTime: WritableComputedRef<Date | undefined>;
|
|
26
|
+
valueSet: ComputedRef<boolean>;
|
|
27
|
+
internalErrorMessages: Ref<string[]>;
|
|
28
|
+
now: Ref<Dayjs>;
|
|
29
|
+
segmentData: SegmentData;
|
|
30
|
+
minAllowedDate: ComputedRef<Date>;
|
|
31
|
+
maxAllowedDate: ComputedRef<Date | undefined>;
|
|
32
|
+
getDateTime: () => Dayjs;
|
|
33
|
+
setNow: () => void;
|
|
34
|
+
clear: () => void;
|
|
35
|
+
isDateValid: (date: Dayjs) => boolean;
|
|
36
|
+
}
|
|
37
|
+
export declare function useDateTimeSelection<T extends DateTimeModelType>(options: DateTimeSelectionOptions<T>): DateTimeSelectionReturn;
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
import { guessTimezone, includeSeconds, includeMilliseconds } from "./utils.js";
|
|
3
|
+
import { useRuiI8n } from "../../composables/use-rui-i18n.js";
|
|
4
|
+
import { RUI_I18N_KEYS } from "../../i18n/keys.js";
|
|
5
|
+
import { ref, computed, watch, onMounted, nextTick } from "vue";
|
|
6
|
+
import { get, set } from "@vueuse/shared";
|
|
7
|
+
import { isDefined, watchIgnorable } from "@vueuse/core";
|
|
8
|
+
const MILLISECONDS = 1e3;
|
|
9
|
+
function useDateTimeSelection(options) {
|
|
10
|
+
const {
|
|
11
|
+
accuracy,
|
|
12
|
+
allowEmpty,
|
|
13
|
+
maxDate,
|
|
14
|
+
minDate,
|
|
15
|
+
modelValue,
|
|
16
|
+
type
|
|
17
|
+
} = options;
|
|
18
|
+
const { t } = useRuiI8n();
|
|
19
|
+
const selectedYear = ref();
|
|
20
|
+
const selectedMonth = ref();
|
|
21
|
+
const selectedDay = ref();
|
|
22
|
+
const selectedHour = ref();
|
|
23
|
+
const selectedMinute = ref();
|
|
24
|
+
const selectedSecond = ref();
|
|
25
|
+
const selectedMillisecond = ref();
|
|
26
|
+
const selectedTimezone = ref(guessTimezone());
|
|
27
|
+
const internalErrorMessages = ref([]);
|
|
28
|
+
const now = ref(dayjs.tz(void 0, guessTimezone()));
|
|
29
|
+
const minAllowedDate = computed(() => {
|
|
30
|
+
if (minDate === void 0) {
|
|
31
|
+
return new Date(1970, 0, 1);
|
|
32
|
+
}
|
|
33
|
+
if (type === "epoch" && typeof minDate === "number") {
|
|
34
|
+
return new Date(minDate * MILLISECONDS);
|
|
35
|
+
}
|
|
36
|
+
return new Date(minDate);
|
|
37
|
+
});
|
|
38
|
+
const maxAllowedDate = computed(() => {
|
|
39
|
+
if (maxDate === void 0) {
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
if (maxDate === "now") {
|
|
43
|
+
return get(now).toDate();
|
|
44
|
+
}
|
|
45
|
+
if (type === "epoch" && typeof maxDate === "number") {
|
|
46
|
+
return new Date(maxDate * MILLISECONDS);
|
|
47
|
+
}
|
|
48
|
+
return new Date(maxDate);
|
|
49
|
+
});
|
|
50
|
+
const segmentData = {
|
|
51
|
+
DD: selectedDay,
|
|
52
|
+
HH: selectedHour,
|
|
53
|
+
MM: selectedMonth,
|
|
54
|
+
SSS: selectedMillisecond,
|
|
55
|
+
YYYY: selectedYear,
|
|
56
|
+
mm: selectedMinute,
|
|
57
|
+
ss: selectedSecond
|
|
58
|
+
};
|
|
59
|
+
const selectedDate = computed({
|
|
60
|
+
get() {
|
|
61
|
+
if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {
|
|
62
|
+
return void 0;
|
|
63
|
+
}
|
|
64
|
+
const date = /* @__PURE__ */ new Date();
|
|
65
|
+
date.setFullYear(get(selectedYear));
|
|
66
|
+
date.setDate(1);
|
|
67
|
+
date.setMonth(get(selectedMonth) - 1);
|
|
68
|
+
date.setDate(get(selectedDay));
|
|
69
|
+
return date;
|
|
70
|
+
},
|
|
71
|
+
set(value) {
|
|
72
|
+
set(selectedYear, value?.getFullYear());
|
|
73
|
+
set(selectedMonth, value ? value.getMonth() + 1 : void 0);
|
|
74
|
+
set(selectedDay, value?.getDate());
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const selectedTime = computed({
|
|
78
|
+
get() {
|
|
79
|
+
if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {
|
|
80
|
+
return void 0;
|
|
81
|
+
}
|
|
82
|
+
const date = /* @__PURE__ */ new Date();
|
|
83
|
+
date.setHours(
|
|
84
|
+
get(selectedHour),
|
|
85
|
+
get(selectedMinute),
|
|
86
|
+
get(selectedSecond) ?? 0,
|
|
87
|
+
get(selectedMillisecond) ?? 0
|
|
88
|
+
);
|
|
89
|
+
return date;
|
|
90
|
+
},
|
|
91
|
+
set(value) {
|
|
92
|
+
set(selectedHour, value?.getHours());
|
|
93
|
+
set(selectedMinute, value?.getMinutes());
|
|
94
|
+
set(selectedSecond, value?.getSeconds());
|
|
95
|
+
set(selectedMillisecond, value?.getMilliseconds());
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
const valueSet = computed(() => isDefined(selectedDate) && isDefined(selectedTime));
|
|
99
|
+
function getDateTime() {
|
|
100
|
+
let dateTime = dayjs();
|
|
101
|
+
if (isDefined(selectedYear)) {
|
|
102
|
+
dateTime = dateTime.year(get(selectedYear));
|
|
103
|
+
}
|
|
104
|
+
if (isDefined(selectedMonth)) {
|
|
105
|
+
dateTime = dateTime.month(get(selectedMonth) - 1);
|
|
106
|
+
}
|
|
107
|
+
if (isDefined(selectedDay)) {
|
|
108
|
+
const daysInMonth = dateTime.daysInMonth();
|
|
109
|
+
const day = Math.min(get(selectedDay), daysInMonth);
|
|
110
|
+
dateTime = dateTime.date(day);
|
|
111
|
+
}
|
|
112
|
+
if (isDefined(selectedHour)) {
|
|
113
|
+
dateTime = dateTime.hour(get(selectedHour));
|
|
114
|
+
}
|
|
115
|
+
if (isDefined(selectedMinute)) {
|
|
116
|
+
dateTime = dateTime.minute(get(selectedMinute));
|
|
117
|
+
}
|
|
118
|
+
if (isDefined(selectedSecond)) {
|
|
119
|
+
dateTime = dateTime.second(get(selectedSecond));
|
|
120
|
+
}
|
|
121
|
+
if (isDefined(selectedMillisecond)) {
|
|
122
|
+
dateTime = dateTime.millisecond(get(selectedMillisecond));
|
|
123
|
+
}
|
|
124
|
+
return dateTime;
|
|
125
|
+
}
|
|
126
|
+
function isDateValid(date) {
|
|
127
|
+
const min = get(minAllowedDate);
|
|
128
|
+
const max = get(maxAllowedDate);
|
|
129
|
+
set(internalErrorMessages, []);
|
|
130
|
+
if (min && date.isBefore(min)) {
|
|
131
|
+
const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {
|
|
132
|
+
date: min.toLocaleDateString()
|
|
133
|
+
}, `Date cannot be before ${min.toLocaleDateString()}`);
|
|
134
|
+
set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
if (max && date.isAfter(max)) {
|
|
138
|
+
const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, "The selected date cannot be in the future");
|
|
139
|
+
const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: max.toLocaleDateString() }, `Date cannot be after ${max.toLocaleDateString()}`);
|
|
140
|
+
const errorMessage = maxDate === "now" ? nowError : maxError;
|
|
141
|
+
set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);
|
|
142
|
+
return false;
|
|
143
|
+
}
|
|
144
|
+
return true;
|
|
145
|
+
}
|
|
146
|
+
function emitUpdate(updatedModel) {
|
|
147
|
+
const typeMap = {
|
|
148
|
+
"date": () => updatedModel.toDate(),
|
|
149
|
+
"epoch": () => updatedModel.valueOf() / MILLISECONDS,
|
|
150
|
+
"epoch-ms": () => updatedModel.valueOf()
|
|
151
|
+
};
|
|
152
|
+
set(modelValue, typeMap[type]());
|
|
153
|
+
}
|
|
154
|
+
function updateModelValue() {
|
|
155
|
+
if (!isDefined(selectedDate) || !isDefined(selectedTime)) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
if (!(isDefined(selectedDate) && isDefined(selectedTime))) {
|
|
159
|
+
set(modelValue, void 0);
|
|
160
|
+
} else {
|
|
161
|
+
const date = get(selectedDate);
|
|
162
|
+
const time = get(selectedTime);
|
|
163
|
+
const updatedModel = dayjs.tz(isDefined(modelValue) ? get(modelValue) : void 0, get(selectedTimezone)).year(date.getFullYear()).month(date.getMonth()).date(date.getDate()).hour(time.getHours()).minute(time.getMinutes()).second(includeSeconds(accuracy) ? time.getSeconds() : 0).millisecond(includeMilliseconds(accuracy) ? time.getMilliseconds() : 0);
|
|
164
|
+
if (!isDateValid(updatedModel)) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
emitUpdate(updatedModel);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
function clear() {
|
|
171
|
+
set(internalErrorMessages, []);
|
|
172
|
+
set(selectedYear, void 0);
|
|
173
|
+
set(selectedMonth, void 0);
|
|
174
|
+
set(selectedDay, void 0);
|
|
175
|
+
set(selectedHour, void 0);
|
|
176
|
+
set(selectedMinute, void 0);
|
|
177
|
+
set(selectedSecond, void 0);
|
|
178
|
+
set(selectedMillisecond, void 0);
|
|
179
|
+
set(modelValue, void 0);
|
|
180
|
+
}
|
|
181
|
+
function setNow() {
|
|
182
|
+
set(internalErrorMessages, []);
|
|
183
|
+
const date = dayjs();
|
|
184
|
+
set(now, date);
|
|
185
|
+
set(selectedYear, date.year());
|
|
186
|
+
set(selectedMonth, date.month() + 1);
|
|
187
|
+
set(selectedDay, date.date());
|
|
188
|
+
set(selectedHour, date.hour());
|
|
189
|
+
set(selectedMinute, date.minute());
|
|
190
|
+
set(selectedSecond, includeSeconds(accuracy) ? date.second() : 0);
|
|
191
|
+
set(selectedMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);
|
|
192
|
+
nextTick(() => {
|
|
193
|
+
updateModelValue();
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
function updateSegments(date) {
|
|
197
|
+
const year = date.year();
|
|
198
|
+
const month = date.month() + 1;
|
|
199
|
+
const day = date.date();
|
|
200
|
+
const hour = date.hour();
|
|
201
|
+
const minute = date.minute();
|
|
202
|
+
const second = includeSeconds(accuracy) ? date.second() : void 0;
|
|
203
|
+
const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : void 0;
|
|
204
|
+
if (get(selectedYear) !== year)
|
|
205
|
+
set(selectedYear, year);
|
|
206
|
+
if (get(selectedMonth) !== month)
|
|
207
|
+
set(selectedMonth, month);
|
|
208
|
+
if (get(selectedDay) !== day)
|
|
209
|
+
set(selectedDay, day);
|
|
210
|
+
if (get(selectedHour) !== hour)
|
|
211
|
+
set(selectedHour, hour);
|
|
212
|
+
if (get(selectedMinute) !== minute)
|
|
213
|
+
set(selectedMinute, minute);
|
|
214
|
+
if (get(selectedSecond) !== second)
|
|
215
|
+
set(selectedSecond, second);
|
|
216
|
+
if (get(selectedMillisecond) !== millisecond)
|
|
217
|
+
set(selectedMillisecond, millisecond);
|
|
218
|
+
}
|
|
219
|
+
const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {
|
|
220
|
+
const currentTimezone = get(selectedTimezone);
|
|
221
|
+
const newDate = dayjs.tz(newSelectedDate, currentTimezone);
|
|
222
|
+
const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);
|
|
223
|
+
const newTime = dayjs.tz(newSelectedTime, currentTimezone);
|
|
224
|
+
const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);
|
|
225
|
+
if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
set(now, dayjs());
|
|
229
|
+
updateModelValue();
|
|
230
|
+
});
|
|
231
|
+
function updateInternalModel(value) {
|
|
232
|
+
ignoreUpdates(() => {
|
|
233
|
+
const updatedValue = type === "epoch" && typeof value === "number" ? value * MILLISECONDS : value;
|
|
234
|
+
const date = dayjs.tz(updatedValue, get(selectedTimezone));
|
|
235
|
+
isDateValid(date);
|
|
236
|
+
updateSegments(date);
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
watch(selectedTimezone, (newTimezone) => {
|
|
240
|
+
if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {
|
|
241
|
+
set(now, dayjs());
|
|
242
|
+
updateModelValue();
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
watch(modelValue, (value) => {
|
|
246
|
+
set(now, dayjs());
|
|
247
|
+
if (value === void 0) {
|
|
248
|
+
clear();
|
|
249
|
+
} else {
|
|
250
|
+
updateInternalModel(value);
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
onMounted(() => {
|
|
254
|
+
if (isDefined(modelValue)) {
|
|
255
|
+
updateInternalModel(get(modelValue));
|
|
256
|
+
} else if (!allowEmpty) {
|
|
257
|
+
setNow();
|
|
258
|
+
}
|
|
259
|
+
});
|
|
260
|
+
return {
|
|
261
|
+
clear,
|
|
262
|
+
getDateTime,
|
|
263
|
+
internalErrorMessages,
|
|
264
|
+
isDateValid,
|
|
265
|
+
maxAllowedDate,
|
|
266
|
+
minAllowedDate,
|
|
267
|
+
now,
|
|
268
|
+
segmentData,
|
|
269
|
+
selectedDate,
|
|
270
|
+
selectedDay,
|
|
271
|
+
selectedHour,
|
|
272
|
+
selectedMillisecond,
|
|
273
|
+
selectedMinute,
|
|
274
|
+
selectedMonth,
|
|
275
|
+
selectedSecond,
|
|
276
|
+
selectedTime,
|
|
277
|
+
selectedTimezone,
|
|
278
|
+
selectedYear,
|
|
279
|
+
setNow,
|
|
280
|
+
valueSet
|
|
281
|
+
};
|
|
282
|
+
}
|
|
283
|
+
export {
|
|
284
|
+
useDateTimeSelection
|
|
285
|
+
};
|
|
286
|
+
//# sourceMappingURL=use-date-time-selection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-date-time-selection.js","sources":["../../../src/components/date-time-picker/use-date-time-selection.ts"],"sourcesContent":["import type { ComputedRef, Ref, WritableComputedRef } from 'vue';\nimport type { SegmentData } from '@/components/date-time-picker/types';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n T extends 'date' ? Date | undefined :\n T extends 'epoch-ms' ? number | undefined :\n T extends 'epoch' ? number | undefined :\n Date | number | undefined;\n\ninterface DateTimeSelectionOptions<T extends DateTimeModelType> {\n modelValue: Ref<ModelValueType<T>>;\n type: T;\n accuracy: TimeAccuracy;\n minDate: Date | number | undefined;\n maxDate: Date | number | 'now' | undefined;\n allowEmpty: boolean;\n}\n\ninterface DateTimeSelectionReturn {\n selectedYear: Ref<number | undefined>;\n selectedMonth: Ref<number | undefined>;\n selectedDay: Ref<number | undefined>;\n selectedHour: Ref<number | undefined>;\n selectedMinute: Ref<number | undefined>;\n selectedSecond: Ref<number | undefined>;\n selectedMillisecond: Ref<number | undefined>;\n selectedTimezone: Ref<string | undefined>;\n selectedDate: WritableComputedRef<Date | undefined>;\n selectedTime: WritableComputedRef<Date | undefined>;\n valueSet: ComputedRef<boolean>;\n internalErrorMessages: Ref<string[]>;\n now: Ref<Dayjs>;\n segmentData: SegmentData;\n minAllowedDate: ComputedRef<Date>;\n maxAllowedDate: ComputedRef<Date | undefined>;\n getDateTime: () => Dayjs;\n setNow: () => void;\n clear: () => void;\n isDateValid: (date: Dayjs) => boolean;\n}\n\nconst MILLISECONDS = 1000;\n\nexport function useDateTimeSelection<T extends DateTimeModelType>(\n options: DateTimeSelectionOptions<T>,\n): DateTimeSelectionReturn {\n const {\n accuracy,\n allowEmpty,\n maxDate,\n minDate,\n modelValue,\n type,\n } = options;\n\n const { t } = useRuiI8n();\n\n const selectedYear = ref<number | undefined>();\n const selectedMonth = ref<number | undefined>();\n const selectedDay = ref<number | undefined>();\n\n const selectedHour = ref<number | undefined>();\n const selectedMinute = ref<number | undefined>();\n const selectedSecond = ref<number | undefined>();\n const selectedMillisecond = ref<number | undefined>();\n const selectedTimezone = ref<string | undefined>(guessTimezone());\n\n const internalErrorMessages = ref<string[]>([]);\n const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n const minAllowedDate = computed<Date>(() => {\n if (minDate === undefined) {\n return new Date(1970, 0, 1);\n }\n\n if (type === 'epoch' && typeof minDate === 'number') {\n return new Date(minDate * MILLISECONDS);\n }\n\n return new Date(minDate);\n });\n\n const maxAllowedDate = computed<Date | undefined>(() => {\n if (maxDate === undefined) {\n return undefined;\n }\n if (maxDate === 'now') {\n return get(now).toDate();\n }\n if (type === 'epoch' && typeof maxDate === 'number') {\n return new Date(maxDate * MILLISECONDS);\n }\n return new Date(maxDate);\n });\n\n const segmentData: SegmentData = {\n DD: selectedDay,\n HH: selectedHour,\n MM: selectedMonth,\n SSS: selectedMillisecond,\n YYYY: selectedYear,\n mm: selectedMinute,\n ss: selectedSecond,\n };\n\n const selectedDate = computed<Date | undefined>({\n get() {\n if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {\n return undefined;\n }\n const date = new Date();\n date.setFullYear(get(selectedYear));\n // Set day to 1 first to prevent month overflow when today's day > days in target month\n // e.g., if today is Dec 30 and we set month to Feb, day 30 would overflow to March\n date.setDate(1);\n date.setMonth(get(selectedMonth) - 1);\n date.setDate(get(selectedDay));\n return date;\n },\n set(value?: Date) {\n set(selectedYear, value?.getFullYear());\n set(selectedMonth, value ? value.getMonth() + 1 : undefined);\n set(selectedDay, value?.getDate());\n },\n });\n\n const selectedTime = computed<Date | undefined>({\n get() {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return undefined;\n }\n const date = new Date();\n date.setHours(\n get(selectedHour),\n get(selectedMinute),\n get(selectedSecond) ?? 0,\n get(selectedMillisecond) ?? 0,\n );\n return date;\n },\n set(value?: Date) {\n set(selectedHour, value?.getHours());\n set(selectedMinute, value?.getMinutes());\n set(selectedSecond, value?.getSeconds());\n set(selectedMillisecond, value?.getMilliseconds());\n },\n });\n\n const valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\n function getDateTime(): Dayjs {\n let dateTime = dayjs();\n\n if (isDefined(selectedYear)) {\n dateTime = dateTime.year(get(selectedYear));\n }\n\n if (isDefined(selectedMonth)) {\n dateTime = dateTime.month(get(selectedMonth) - 1);\n }\n\n if (isDefined(selectedDay)) {\n const daysInMonth = dateTime.daysInMonth();\n const day = Math.min(get(selectedDay), daysInMonth);\n dateTime = dateTime.date(day);\n }\n\n if (isDefined(selectedHour)) {\n dateTime = dateTime.hour(get(selectedHour));\n }\n\n if (isDefined(selectedMinute)) {\n dateTime = dateTime.minute(get(selectedMinute));\n }\n\n if (isDefined(selectedSecond)) {\n dateTime = dateTime.second(get(selectedSecond));\n }\n\n if (isDefined(selectedMillisecond)) {\n dateTime = dateTime.millisecond(get(selectedMillisecond));\n }\n\n return dateTime;\n }\n\n function isDateValid(date: Dayjs): boolean {\n const min = get(minAllowedDate);\n const max = get(maxAllowedDate);\n\n set(internalErrorMessages, []);\n\n if (min && date.isBefore(min)) {\n const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n date: min.toLocaleDateString(),\n }, `Date cannot be before ${min.toLocaleDateString()}`);\n set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n return false;\n }\n\n if (max && date.isAfter(max)) {\n const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: max.toLocaleDateString() }, `Date cannot be after ${max.toLocaleDateString()}`);\n const errorMessage = maxDate === 'now' ? nowError : maxError;\n set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n return false;\n }\n\n return true;\n }\n\n function emitUpdate(updatedModel: Dayjs): void {\n const typeMap = {\n 'date': () => updatedModel.toDate(),\n 'epoch': () => updatedModel.valueOf() / MILLISECONDS,\n 'epoch-ms': () => updatedModel.valueOf(),\n } as const;\n\n set(modelValue, typeMap[type]() as ModelValueType<T>);\n }\n\n function updateModelValue(): void {\n if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n return;\n }\n\n if (!(isDefined(selectedDate) && isDefined(selectedTime))) {\n set(modelValue, undefined as ModelValueType<T>);\n }\n else {\n const date = get(selectedDate);\n const time = get(selectedTime);\n\n const updatedModel = dayjs.tz(isDefined(modelValue) ? get(modelValue) : undefined, get(selectedTimezone))\n .year(date.getFullYear())\n .month(date.getMonth())\n .date(date.getDate())\n .hour(time.getHours())\n .minute(time.getMinutes())\n .second(includeSeconds(accuracy) ? time.getSeconds() : 0)\n .millisecond(includeMilliseconds(accuracy) ? time.getMilliseconds() : 0);\n\n if (!isDateValid(updatedModel)) {\n return;\n }\n\n emitUpdate(updatedModel);\n }\n }\n\n function clear(): void {\n set(internalErrorMessages, []);\n set(selectedYear, undefined);\n set(selectedMonth, undefined);\n set(selectedDay, undefined);\n set(selectedHour, undefined);\n set(selectedMinute, undefined);\n set(selectedSecond, undefined);\n set(selectedMillisecond, undefined);\n set(modelValue, undefined as ModelValueType<T>);\n }\n\n function setNow(): void {\n set(internalErrorMessages, []);\n\n const date = dayjs();\n set(now, date);\n set(selectedYear, date.year());\n set(selectedMonth, date.month() + 1);\n set(selectedDay, date.date());\n set(selectedHour, date.hour());\n set(selectedMinute, date.minute());\n set(selectedSecond, includeSeconds(accuracy) ? date.second() : 0);\n set(selectedMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);\n\n nextTick(() => {\n updateModelValue();\n });\n }\n\n function updateSegments(date: Dayjs): void {\n const year = date.year();\n const month = date.month() + 1;\n const day = date.date();\n const hour = date.hour();\n const minute = date.minute();\n const second = includeSeconds(accuracy) ? date.second() : undefined;\n const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : undefined;\n\n if (get(selectedYear) !== year)\n set(selectedYear, year);\n if (get(selectedMonth) !== month)\n set(selectedMonth, month);\n if (get(selectedDay) !== day)\n set(selectedDay, day);\n if (get(selectedHour) !== hour)\n set(selectedHour, hour);\n if (get(selectedMinute) !== minute)\n set(selectedMinute, minute);\n if (get(selectedSecond) !== second)\n set(selectedSecond, second);\n if (get(selectedMillisecond) !== millisecond)\n set(selectedMillisecond, millisecond);\n }\n\n const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {\n const currentTimezone = get(selectedTimezone);\n const newDate = dayjs.tz(newSelectedDate, currentTimezone);\n const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);\n const newTime = dayjs.tz(newSelectedTime, currentTimezone);\n const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {\n return;\n }\n\n set(now, dayjs());\n updateModelValue();\n });\n\n function updateInternalModel(value: ModelValueType<T>): void {\n ignoreUpdates(() => {\n const updatedValue = type === 'epoch' && typeof value === 'number'\n ? value * MILLISECONDS\n : value;\n const date = dayjs.tz(updatedValue, get(selectedTimezone));\n isDateValid(date);\n updateSegments(date);\n });\n }\n\n watch(selectedTimezone, (newTimezone: string | undefined) => {\n if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n set(now, dayjs());\n updateModelValue();\n }\n });\n\n watch(modelValue, (value) => {\n set(now, dayjs());\n if (value === undefined) {\n clear();\n }\n else {\n updateInternalModel(value);\n }\n });\n\n onMounted(() => {\n if (isDefined(modelValue)) {\n updateInternalModel(get(modelValue));\n }\n else if (!allowEmpty) {\n setNow();\n }\n });\n\n return {\n clear,\n getDateTime,\n internalErrorMessages,\n isDateValid,\n maxAllowedDate,\n minAllowedDate,\n now,\n segmentData,\n selectedDate,\n selectedDay,\n selectedHour,\n selectedMillisecond,\n selectedMinute,\n selectedMonth,\n selectedSecond,\n selectedTime,\n selectedTimezone,\n selectedYear,\n setNow,\n valueSet,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -22,11 +22,13 @@ interface KeyboardHandlerOptions {
|
|
|
22
22
|
export declare function useKeyboardHandler(options: KeyboardHandlerOptions): {
|
|
23
23
|
clear: (segmentType?: string) => void;
|
|
24
24
|
getCurrentSegment: (position?: number) => Segment | undefined;
|
|
25
|
+
handleBlur: () => void;
|
|
25
26
|
handleClick: (event: MouseEvent) => void;
|
|
26
27
|
handleFocus: () => void;
|
|
27
28
|
handleInput: (event: Event) => void;
|
|
28
29
|
handleInputSelection: (event: Event) => void;
|
|
29
30
|
handleKeyDown: (event: KeyboardEvent) => void;
|
|
31
|
+
handleMouseDown: (event: MouseEvent) => void;
|
|
30
32
|
handlePaste: (event: ClipboardEvent) => void;
|
|
31
33
|
setSegment: (segmentType: DateTimeSegmentType) => void;
|
|
32
34
|
};
|