@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,369 @@
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import { useFormTextDetail } from "../../utils/form-text-detail.js";
+import RuiMenu_default from "../overlays/menu/RuiMenu.js";
+import { getNonRootAttrs, getRootAttrs } from "../../utils/helpers.js";
+import { dateTimePickerStyles } from "./date-time-picker-styles.js";
+import RuiDateTimePickerMenu_default from "./RuiDateTimePickerMenu.js";
+import { useDateTimeSelection } from "./use-date-time-selection.js";
+import { useInputHandler } from "./use-input-handler.js";
+import { useKeyboardHandler } from "./use-keyboard-handler.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, withCtx, withModifiers } from "vue";
+import { isDefined, useFocus, useFocusWithin } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/date-time-picker/RuiDateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-invalid", "tabindex"];
+var _hoisted_2 = [
+	"disabled",
+	"value",
+	"placeholder",
+	"readonly",
+	"aria-invalid"
+];
+var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiDateTimePicker",
+	inheritAttrs: false,
+	__name: "RuiDateTimePicker",
+	props: /* @__PURE__ */ mergeModels({
+		minDate: {},
+		maxDate: {},
+		format: { default: "day-first" },
+		type: { default: "epoch-ms" },
+		accuracy: { default: "minute" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		allowEmpty: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		label: { default: "Pick a date" },
+		variant: { default: "default" },
+		hint: {},
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const baseFormats = {
+			"day-first": "DD/MM/YYYY HH:mm",
+			"month-first": "MM/DD/YYYY HH:mm",
+			"year-first": "YYYY/MM/DD HH:mm"
+		};
+		const isOpen = ref(false);
+		const cursorPosition = ref(0);
+		const currentValue = ref();
+		const textInput = useTemplateRef("textInput");
+		const activator = useTemplateRef("activator");
+		const menuWrapperRef = useTemplateRef("menuWrapperRef");
+		const calendarMenuOpen = ref(false);
+		const { focused: activatorFocusedWithin } = useFocusWithin(activator);
+		const { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);
+		const { focused: searchInputFocused } = useFocus(textInput);
+		const anyFocused = computed(() => get$1(activatorFocusedWithin) || get$1(menuWrapperFocusedWithin));
+		const { clear: clearSelection, getDateTime, internalErrorMessages, maxAllowedDate, minAllowedDate, segmentData, selectedDate, selectedDay, selectedHour, selectedMillisecond, selectedMinute, selectedMonth, selectedSecond, selectedTime, selectedTimezone, selectedYear, setNow, valueSet } = useDateTimeSelection({
+			accuracy: __props.accuracy,
+			allowEmpty: __props.allowEmpty,
+			maxDate: __props.maxDate,
+			minDate: __props.minDate,
+			modelValue,
+			type: __props.type
+		});
+		const { setValue, getCurrent } = useInputHandler(segmentData, currentValue);
+		const dateFormat = computed(() => {
+			const fmt = baseFormats[__props.format];
+			if (__props.accuracy === "second") return fmt.replace("HH:mm", "HH:mm:ss");
+			else if (__props.accuracy === "millisecond") return fmt.replace("HH:mm", "HH:mm:ss.SSS");
+			return fmt;
+		});
+		const { clear: clearSegment, getCurrentSegment, handleBlur, handleClick, handleFocus, handleInput, handleInputSelection, handleKeyDown, handleMouseDown, handlePaste, setSegment } = useKeyboardHandler({
+			accuracy: __props.accuracy,
+			currentValue,
+			cursorPosition,
+			dateFormat,
+			disabled: __props.disabled,
+			getCurrent,
+			getDateTime,
+			readonly: __props.readonly,
+			setValue,
+			textInput
+		});
+		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const isOutlined = computed(() => __props.variant === "outlined");
+		const formattedDisplay = computed(() => {
+			let result = get$1(dateFormat);
+			const replacements = [
+				{
+					pattern: "YYYY",
+					value: getDisplayValue(selectedYear, 4)
+				},
+				{
+					pattern: "MM",
+					value: getDisplayValue(selectedMonth, 2)
+				},
+				{
+					pattern: "DD",
+					value: getDisplayValue(selectedDay, 2)
+				},
+				{
+					pattern: "HH",
+					value: getDisplayValue(selectedHour, 2)
+				},
+				{
+					pattern: "mm",
+					value: getDisplayValue(selectedMinute, 2)
+				},
+				{
+					pattern: "ss",
+					value: getDisplayValue(selectedSecond, 2)
+				},
+				{
+					pattern: "SSS",
+					value: getDisplayValue(selectedMillisecond, 3)
+				}
+			];
+			for (const { pattern, value } of replacements) if (value !== void 0) result = result.replace(pattern, value);
+			return result;
+		});
+		const timeSelection = computed({
+			get() {
+				const type = getCurrentSegment()?.type;
+				if (type === "mm") return "minute";
+				else if (type === "ss") return "second";
+				else if (type === "SSS") return "millisecond";
+				return "hour";
+			},
+			set(value) {
+				let segmentType = "HH";
+				if (value === "minute") segmentType = "mm";
+				else if (value === "second") segmentType = "ss";
+				else if (value === "millisecond") segmentType = "SSS";
+				setSegment(segmentType);
+			}
+		});
+		const float = computed(() => (get$1(isOpen) || get$1(valueSet) || get$1(searchInputFocused)) && get$1(isOutlined));
+		const legendText = computed(() => {
+			if (!get$1(float) || !__props.label) return "";
+			return __props.required ? `${__props.label} ﹡` : __props.label;
+		});
+		const ui = computed(() => dateTimePickerStyles({
+			filled: __props.variant === "filled",
+			outlined: get$1(isOutlined),
+			float: get$1(float),
+			opened: get$1(isOpen),
+			dense: __props.dense,
+			disabled: __props.disabled,
+			readonly: __props.readonly,
+			hasError: get$1(hasError),
+			hasSuccess: get$1(hasSuccess) && !get$1(hasError)
+		}));
+		const combinedErrorMessages = computed(() => {
+			if (!__props.errorMessages) return get$1(internalErrorMessages);
+			return [...Array.isArray(__props.errorMessages) ? __props.errorMessages : [__props.errorMessages], ...get$1(internalErrorMessages)];
+		});
+		function getDisplayValue(digit, padding) {
+			return isDefined(digit) ? get$1(digit).toString().padStart(padding, "0") : void 0;
+		}
+		async function setInputFocus() {
+			await nextTick(() => {
+				set$1(searchInputFocused, true);
+			});
+		}
+		function clear(segmentType) {
+			if (!segmentType) {
+				clearSelection();
+				set$1(currentValue, void 0);
+				return;
+			}
+			clearSegment(segmentType);
+		}
+		function handleInputClick(event) {
+			handleClick(event);
+			if (!get$1(isOpen)) set$1(isOpen, true);
+		}
+		function arrowClicked(event) {
+			if (get$1(isOpen)) {
+				set$1(isOpen, false);
+				event.stopPropagation();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RuiMenu_default, mergeProps({
+				modelValue: unref(isOpen),
+				"onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
+			}, unref(getRootAttrs)(_ctx.$attrs), {
+				class: unref(ui).wrapper(),
+				placement: "bottom-start",
+				dense: __props.dense,
+				hint: __props.hint,
+				disabled: __props.disabled,
+				"success-messages": __props.successMessages,
+				"error-messages": unref(combinedErrorMessages),
+				"close-on-content-click": false,
+				"show-details": !__props.hideDetails,
+				persistent: unref(calendarMenuOpen),
+				"full-width": "",
+				"disable-auto-focus": ""
+			}), {
+				activator: withCtx(({ attrs, open }) => [createElementVNode("div", mergeProps({
+					ref_key: "activator",
+					ref: activator,
+					class: unref(ui).activator()
+				}, {
+					...unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]),
+					...__props.readonly ? {} : attrs
+				}, {
+					"data-id": "activator",
+					"aria-invalid": unref(hasError),
+					tabindex: __props.disabled || __props.readonly ? -1 : 0,
+					onClick: _cache[10] || (_cache[10] = ($event) => setInputFocus())
+				}), [
+					unref(isOutlined) && (unref(searchInputFocused) || open || unref(valueSet)) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						"data-id": "label",
+						class: normalizeClass([unref(ui).label(), { "pr-2": !unref(valueSet) && !open && unref(isOutlined) }])
+					}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						"data-id": "required-indicator",
+						class: normalizeClass(unref(ui).required())
+					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+					createElementVNode("span", { class: normalizeClass(unref(ui).iconPrepend()) }, [createVNode(RuiIcon_default, {
+						class: "text-rui-text-secondary transition",
+						size: __props.dense ? 16 : 24,
+						name: "lu-calendar-days"
+					}, null, 8, ["size"])], 2),
+					createElementVNode("div", { class: normalizeClass(unref(ui).value()) }, [createElementVNode("input", {
+						ref_key: "textInput",
+						ref: textInput,
+						disabled: __props.disabled,
+						value: unref(formattedDisplay),
+						class: "bg-transparent outline-none flex-1 min-w-0",
+						type: "text",
+						placeholder: unref(dateFormat),
+						readonly: __props.readonly,
+						"aria-invalid": unref(hasError),
+						onMousedown: _cache[0] || (_cache[0] = ($event) => unref(handleMouseDown)($event)),
+						onFocus: _cache[1] || (_cache[1] = ($event) => unref(handleFocus)()),
+						onBlur: _cache[2] || (_cache[2] = ($event) => unref(handleBlur)()),
+						onSelect: _cache[3] || (_cache[3] = ($event) => unref(handleInputSelection)($event)),
+						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => handleInputClick($event), ["stop"])),
+						onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event)),
+						onPaste: _cache[6] || (_cache[6] = ($event) => unref(handlePaste)($event)),
+						onInput: _cache[7] || (_cache[7] = ($event) => unref(handleInput)($event))
+					}, null, 40, _hoisted_2)], 2),
+					__props.allowEmpty && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton_default, {
+						key: 1,
+						variant: "text",
+						icon: "",
+						"data-id": "clear-button",
+						size: "sm",
+						tabindex: "-1",
+						color: "error",
+						class: normalizeClass([
+							unref(ui).clear(),
+							unref(anyFocused) && "!visible",
+							{ "mr-2": !__props.dense }
+						]),
+						onClick: _cache[8] || (_cache[8] = withModifiers(($event) => clear(), ["stop", "prevent"]))
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, {
+							name: "lu-x",
+							size: "18"
+						})]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true),
+					createElementVNode("span", {
+						class: normalizeClass(unref(ui).iconWrapper()),
+						"data-id": "append",
+						onClick: _cache[9] || (_cache[9] = ($event) => arrowClicked($event))
+					}, [createVNode(RuiIcon_default, {
+						class: normalizeClass(unref(ui).icon()),
+						size: __props.dense ? 16 : 24,
+						name: "lu-chevron-down"
+					}, null, 8, ["class", "size"])], 2)
+				], 16, _hoisted_1), unref(isOutlined) ? (openBlock(), createElementBlock("fieldset", {
+					key: 0,
+					class: normalizeClass(unref(ui).fieldset())
+				}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)]),
+				default: withCtx(() => [createVNode(RuiDateTimePickerMenu_default, {
+					ref_key: "menuWrapperRef",
+					ref: menuWrapperRef,
+					"selected-date": unref(selectedDate),
+					"onUpdate:selectedDate": _cache[11] || (_cache[11] = ($event) => isRef(selectedDate) ? selectedDate.value = $event : null),
+					"selected-time": unref(selectedTime),
+					"onUpdate:selectedTime": _cache[12] || (_cache[12] = ($event) => isRef(selectedTime) ? selectedTime.value = $event : null),
+					"selected-hour": unref(selectedHour),
+					"onUpdate:selectedHour": _cache[13] || (_cache[13] = ($event) => isRef(selectedHour) ? selectedHour.value = $event : null),
+					"selected-minute": unref(selectedMinute),
+					"onUpdate:selectedMinute": _cache[14] || (_cache[14] = ($event) => isRef(selectedMinute) ? selectedMinute.value = $event : null),
+					"selected-second": unref(selectedSecond),
+					"onUpdate:selectedSecond": _cache[15] || (_cache[15] = ($event) => isRef(selectedSecond) ? selectedSecond.value = $event : null),
+					"selected-millisecond": unref(selectedMillisecond),
+					"onUpdate:selectedMillisecond": _cache[16] || (_cache[16] = ($event) => isRef(selectedMillisecond) ? selectedMillisecond.value = $event : null),
+					"time-selection": unref(timeSelection),
+					"onUpdate:timeSelection": _cache[17] || (_cache[17] = ($event) => isRef(timeSelection) ? timeSelection.value = $event : null),
+					"selected-timezone": unref(selectedTimezone),
+					"onUpdate:selectedTimezone": _cache[18] || (_cache[18] = ($event) => isRef(selectedTimezone) ? selectedTimezone.value = $event : null),
+					"calendar-menu-open": unref(calendarMenuOpen),
+					"onUpdate:calendarMenuOpen": _cache[19] || (_cache[19] = ($event) => isRef(calendarMenuOpen) ? calendarMenuOpen.value = $event : null),
+					accuracy: __props.accuracy,
+					"max-date": unref(maxAllowedDate),
+					"min-date": unref(minAllowedDate),
+					onSetNow: _cache[20] || (_cache[20] = ($event) => unref(setNow)())
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "menu-content")]),
+					_: 3
+				}, 8, [
+					"selected-date",
+					"selected-time",
+					"selected-hour",
+					"selected-minute",
+					"selected-second",
+					"selected-millisecond",
+					"time-selection",
+					"selected-timezone",
+					"calendar-menu-open",
+					"accuracy",
+					"max-date",
+					"min-date"
+				])]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"class",
+				"dense",
+				"hint",
+				"disabled",
+				"success-messages",
+				"error-messages",
+				"show-details",
+				"persistent"
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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 RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { dateTimePickerStyles, type DateTimePickerVariant } from '@/components/date-time-picker/date-time-picker-styles';\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';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> = T extends 'date'\n  ? Date | undefined\n  : T extends 'epoch-ms'\n    ? number | undefined\n    : T extends 'epoch'\n      ? 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?: DateTimePickerVariant;\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<DateTimeModelType>>({ required: true });\n\nconst {\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,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n} = defineProps<RuiDateTimePickerProps>();\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 = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst anyFocused = computed<boolean>(() => get(activatorFocusedWithin) || get(menuWrapperFocusedWithin));\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,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst dateFormat = computed<string>(() => {\n  const fmt = baseFormats[format];\n  if (accuracy === 'second') {\n    return fmt.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (accuracy === 'millisecond') {\n    return fmt.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return fmt;\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,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled,\n  getCurrent,\n  getDateTime,\n  readonly,\n  setValue,\n  textInput,\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => 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 = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\n  opened: get(isOpen),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit) ? get(digit).toString().padStart(padding, '0') : 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 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\nfunction arrowClicked(event: MouseEvent): 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    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.wrapper()\"\n    placement=\"bottom-start\"\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    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : attrs),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        :tabindex=\"disabled || readonly ? -1 : 0\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.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=\"[\n            ui.clear(),\n            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=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\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"],"mappings":"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"}

package/dist/components/date-time-picker/RuiDateTimePickerMenu.js

@@ -0,0 +1,7 @@
+import RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default from "./RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/date-time-picker/RuiDateTimePickerMenu.vue
+var RuiDateTimePickerMenu_default = RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiDateTimePickerMenu_default as default };
+
+//# sourceMappingURL=RuiDateTimePickerMenu.js.map

package/dist/components/date-time-picker/RuiDateTimePickerMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDateTimePickerMenu.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePickerMenu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCalendar from '@/components/calendar/RuiCalendar.vue';\nimport { timezones } from '@/components/date-time-picker/timezones';\nimport RuiAutoComplete from '@/components/forms/auto-complete/RuiAutoComplete.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTimePicker, { type TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\n\ndefineOptions({\n  name: 'RuiDateTimePickerMenu',\n});\n\nconst selectedDate = defineModel<Date | undefined>('selectedDate', { required: true });\nconst selectedTime = defineModel<Date | undefined>('selectedTime', { required: true });\nconst selectedHour = defineModel<number | undefined>('selectedHour', { required: true });\nconst selectedMinute = defineModel<number | undefined>('selectedMinute', { required: true });\nconst selectedSecond = defineModel<number | undefined>('selectedSecond', { required: true });\nconst selectedMillisecond = defineModel<number | undefined>('selectedMillisecond', { required: true });\nconst timeSelection = defineModel<TimePickerSelection>('timeSelection', { required: true });\nconst selectedTimezone = defineModel<string | undefined>('selectedTimezone', { required: true });\nconst calendarMenuOpen = defineModel<boolean>('calendarMenuOpen', { required: true });\n\ndefineProps<{\n  accuracy: TimeAccuracy;\n  maxDate?: Date | number;\n  minDate?: Date | number;\n}>();\n\nconst emit = defineEmits<{\n  'set-now': [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n}>();\n\nfunction setNow(): void {\n  emit('set-now');\n}\n</script>\n\n<template>\n  <div class=\"flex divide-x divide-rui-grey-200 dark:divide-rui-grey-800\">\n    <RuiCalendar\n      v-model=\"selectedDate\"\n      v-model:menu-open=\"calendarMenuOpen\"\n      borderless\n      :max-date=\"maxDate\"\n      :min-date=\"minDate\"\n    />\n    <RuiTimePicker\n      v-model=\"selectedTime\"\n      v-model:hour=\"selectedHour\"\n      v-model:minute=\"selectedMinute\"\n      v-model:second=\"selectedSecond\"\n      v-model:millisecond=\"selectedMillisecond\"\n      v-model:selection=\"timeSelection\"\n      :accuracy=\"accuracy\"\n      borderless\n    />\n    <div>\n      <div class=\"flex gap-3 p-4 pl-3\">\n        <div class=\"flex flex-col justify-center items-center\">\n          <RuiButton\n            variant=\"text\"\n            icon\n            data-id=\"set-now\"\n            @click=\"setNow()\"\n          >\n            <RuiIcon\n              name=\"lu-clock\"\n              size=\"18\"\n            />\n          </RuiButton>\n        </div>\n        <RuiAutoComplete\n          v-model=\"selectedTimezone\"\n          hide-details\n          label=\"Timezone\"\n          class=\"pt-0 pr-0\"\n          variant=\"outlined\"\n          :options=\"timezones\"\n        />\n      </div>\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { TimeAccuracy } from '../../consts/time-accuracy.js';
-import { type TimePickerSelection } from '../../components/time-picker/RuiTimePicker.vue.js';
+import { type TimePickerSelection } from '../../components/time-picker/RuiTimePicker.vue';
 type __VLS_Props = {
     accuracy: TimeAccuracy;
     maxDate?: Date | number;

package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,134 @@
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import RuiCalendar_default from "../calendar/RuiCalendar.js";
+import { timezones } from "./timezones.js";
+import RuiAutoComplete_default from "../forms/auto-complete/RuiAutoComplete.js";
+import RuiTimePicker_default from "../time-picker/RuiTimePicker.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+//#region src/components/date-time-picker/RuiDateTimePickerMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex divide-x divide-rui-grey-200 dark:divide-rui-grey-800" };
+var _hoisted_2 = { class: "flex gap-3 p-4 pl-3" };
+var _hoisted_3 = { class: "flex flex-col justify-center items-center" };
+var RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiDateTimePickerMenu",
+	__name: "RuiDateTimePickerMenu",
+	props: /* @__PURE__ */ mergeModels({
+		accuracy: {},
+		maxDate: {},
+		minDate: {}
+	}, {
+		"selectedDate": { required: true },
+		"selectedDateModifiers": {},
+		"selectedTime": { required: true },
+		"selectedTimeModifiers": {},
+		"selectedHour": { required: true },
+		"selectedHourModifiers": {},
+		"selectedMinute": { required: true },
+		"selectedMinuteModifiers": {},
+		"selectedSecond": { required: true },
+		"selectedSecondModifiers": {},
+		"selectedMillisecond": { required: true },
+		"selectedMillisecondModifiers": {},
+		"timeSelection": { required: true },
+		"timeSelectionModifiers": {},
+		"selectedTimezone": { required: true },
+		"selectedTimezoneModifiers": {},
+		"calendarMenuOpen": {
+			type: Boolean,
+			required: true
+		},
+		"calendarMenuOpenModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["set-now"], [
+		"update:selectedDate",
+		"update:selectedTime",
+		"update:selectedHour",
+		"update:selectedMinute",
+		"update:selectedSecond",
+		"update:selectedMillisecond",
+		"update:timeSelection",
+		"update:selectedTimezone",
+		"update:calendarMenuOpen"
+	]),
+	setup(__props, { emit: __emit }) {
+		const selectedDate = useModel(__props, "selectedDate");
+		const selectedTime = useModel(__props, "selectedTime");
+		const selectedHour = useModel(__props, "selectedHour");
+		const selectedMinute = useModel(__props, "selectedMinute");
+		const selectedSecond = useModel(__props, "selectedSecond");
+		const selectedMillisecond = useModel(__props, "selectedMillisecond");
+		const timeSelection = useModel(__props, "timeSelection");
+		const selectedTimezone = useModel(__props, "selectedTimezone");
+		const calendarMenuOpen = useModel(__props, "calendarMenuOpen");
+		const emit = __emit;
+		function setNow() {
+			emit("set-now");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(RuiCalendar_default, {
+					modelValue: selectedDate.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedDate.value = $event),
+					"menu-open": calendarMenuOpen.value,
+					"onUpdate:menuOpen": _cache[1] || (_cache[1] = ($event) => calendarMenuOpen.value = $event),
+					borderless: "",
+					"max-date": __props.maxDate,
+					"min-date": __props.minDate
+				}, null, 8, [
+					"modelValue",
+					"menu-open",
+					"max-date",
+					"min-date"
+				]),
+				createVNode(RuiTimePicker_default, {
+					modelValue: selectedTime.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedTime.value = $event),
+					hour: selectedHour.value,
+					"onUpdate:hour": _cache[3] || (_cache[3] = ($event) => selectedHour.value = $event),
+					minute: selectedMinute.value,
+					"onUpdate:minute": _cache[4] || (_cache[4] = ($event) => selectedMinute.value = $event),
+					second: selectedSecond.value,
+					"onUpdate:second": _cache[5] || (_cache[5] = ($event) => selectedSecond.value = $event),
+					millisecond: selectedMillisecond.value,
+					"onUpdate:millisecond": _cache[6] || (_cache[6] = ($event) => selectedMillisecond.value = $event),
+					selection: timeSelection.value,
+					"onUpdate:selection": _cache[7] || (_cache[7] = ($event) => timeSelection.value = $event),
+					accuracy: __props.accuracy,
+					borderless: ""
+				}, null, 8, [
+					"modelValue",
+					"hour",
+					"minute",
+					"second",
+					"millisecond",
+					"selection",
+					"accuracy"
+				]),
+				createElementVNode("div", null, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createVNode(RuiButton_default, {
+					variant: "text",
+					icon: "",
+					"data-id": "set-now",
+					onClick: _cache[8] || (_cache[8] = ($event) => setNow())
+				}, {
+					default: withCtx(() => [createVNode(RuiIcon_default, {
+						name: "lu-clock",
+						size: "18"
+					})]),
+					_: 1
+				})]), createVNode(RuiAutoComplete_default, {
+					modelValue: selectedTimezone.value,
+					"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => selectedTimezone.value = $event),
+					"hide-details": "",
+					label: "Timezone",
+					class: "pt-0 pr-0",
+					variant: "outlined",
+					options: unref(timezones)
+				}, null, 8, ["modelValue", "options"])]), renderSlot(_ctx.$slots, "default")])
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePickerMenu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCalendar from '@/components/calendar/RuiCalendar.vue';\nimport { timezones } from '@/components/date-time-picker/timezones';\nimport RuiAutoComplete from '@/components/forms/auto-complete/RuiAutoComplete.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTimePicker, { type TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\n\ndefineOptions({\n  name: 'RuiDateTimePickerMenu',\n});\n\nconst selectedDate = defineModel<Date | undefined>('selectedDate', { required: true });\nconst selectedTime = defineModel<Date | undefined>('selectedTime', { required: true });\nconst selectedHour = defineModel<number | undefined>('selectedHour', { required: true });\nconst selectedMinute = defineModel<number | undefined>('selectedMinute', { required: true });\nconst selectedSecond = defineModel<number | undefined>('selectedSecond', { required: true });\nconst selectedMillisecond = defineModel<number | undefined>('selectedMillisecond', { required: true });\nconst timeSelection = defineModel<TimePickerSelection>('timeSelection', { required: true });\nconst selectedTimezone = defineModel<string | undefined>('selectedTimezone', { required: true });\nconst calendarMenuOpen = defineModel<boolean>('calendarMenuOpen', { required: true });\n\ndefineProps<{\n  accuracy: TimeAccuracy;\n  maxDate?: Date | number;\n  minDate?: Date | number;\n}>();\n\nconst emit = defineEmits<{\n  'set-now': [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n}>();\n\nfunction setNow(): void {\n  emit('set-now');\n}\n</script>\n\n<template>\n  <div class=\"flex divide-x divide-rui-grey-200 dark:divide-rui-grey-800\">\n    <RuiCalendar\n      v-model=\"selectedDate\"\n      v-model:menu-open=\"calendarMenuOpen\"\n      borderless\n      :max-date=\"maxDate\"\n      :min-date=\"minDate\"\n    />\n    <RuiTimePicker\n      v-model=\"selectedTime\"\n      v-model:hour=\"selectedHour\"\n      v-model:minute=\"selectedMinute\"\n      v-model:second=\"selectedSecond\"\n      v-model:millisecond=\"selectedMillisecond\"\n      v-model:selection=\"timeSelection\"\n      :accuracy=\"accuracy\"\n      borderless\n    />\n    <div>\n      <div class=\"flex gap-3 p-4 pl-3\">\n        <div class=\"flex flex-col justify-center items-center\">\n          <RuiButton\n            variant=\"text\"\n            icon\n            data-id=\"set-now\"\n            @click=\"setNow()\"\n          >\n            <RuiIcon\n              name=\"lu-clock\"\n              size=\"18\"\n            />\n          </RuiButton>\n        </div>\n        <RuiAutoComplete\n          v-model=\"selectedTimezone\"\n          hide-details\n          label=\"Timezone\"\n          class=\"pt-0 pr-0\"\n          variant=\"outlined\"\n          :options=\"timezones\"\n        />\n      </div>\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,eAAe,SAA6B,SAAC,eAAmC;EACtF,MAAM,eAAe,SAA6B,SAAC,eAAmC;EACtF,MAAM,eAAe,SAA+B,SAAC,eAAmC;EACxF,MAAM,iBAAiB,SAA+B,SAAC,iBAAqC;EAC5F,MAAM,iBAAiB,SAA+B,SAAC,iBAAqC;EAC5F,MAAM,sBAAsB,SAA+B,SAAC,sBAA0C;EACtG,MAAM,gBAAgB,SAAgC,SAAC,gBAAoC;EAC3F,MAAM,mBAAmB,SAA+B,SAAC,mBAAuC;EAChG,MAAM,mBAAmB,SAAoB,SAAC,mBAAuC;EAQrF,MAAM,OAAO;EAQb,SAAS,SAAe;AACtB,QAAK,UAAU;;;uBAKf,mBA4CM,OA5CN,YA4CM;IA3CJ,YAME,qBAAA;iBALS,aAAA;+EAAY,QAAA;KACb,aAAW,iBAAA;iFAAgB,QAAA;KACnC,YAAA;KACC,YAAU,QAAA;KACV,YAAU,QAAA;;;;;;;IAEb,YASE,uBAAA;iBARS,aAAA;+EAAY,QAAA;KACb,MAAM,aAAA;yEAAY,QAAA;KAClB,QAAQ,eAAA;6EAAc,QAAA;KACtB,QAAQ,eAAA;6EAAc,QAAA;KACtB,aAAa,oBAAA;uFAAmB,QAAA;KAChC,WAAW,cAAA;+EAAa,QAAA;KAC/B,UAAU,QAAA;KACX,YAAA;;;;;;;;;;IAEF,mBAyBM,OAAA,MAAA,CAxBJ,mBAsBM,OAtBN,YAsBM,CArBJ,mBAYM,OAZN,YAYM,CAXJ,YAUY,mBAAA;KATV,SAAQ;KACR,MAAA;KACA,WAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAM;;4BAKZ,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;;UAIX,YAOE,yBAAA;iBANS,iBAAA;mFAAgB,QAAA;KACzB,gBAAA;KACA,OAAM;KACN,OAAM;KACN,SAAQ;KACP,SAAS,MAAA,UAAS;8CAGvB,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}