niuma-ui 1.3.8 → 2.0.0

package/dist/components/time-picker/src/RsTimePicker.impl.js

@@ -0,0 +1,374 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { isRsFormItemBoundControl, useRsFormItemContext } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "../../_shared/src/reka.js";
+import { EMPTY_TIME_RANGE, formatTimeFromParts, formatTimeRangeDisplay, getCurrentTime, isTimeRangeEmpty, isTimeRangeOrderedValues, isTimeWithinBounds, parseTimeValue, pickEarlierTime, pickLaterTime } from "./time-picker-utils.js";
+import RsTimePickerColumns_default from "./RsTimePickerColumns.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+//#region src/components/time-picker/src/RsTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-field__label"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+	key: 2,
+	class: "rs-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "rs-time-picker" };
+var _hoisted_5 = { class: "rs-time-picker__leading" };
+var _hoisted_6 = { class: "rs-time-picker__value" };
+var _hoisted_7 = {
+	key: 0,
+	class: "rs-time-picker__panel"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-time-picker__range-grid"
+};
+var _hoisted_9 = { class: "rs-time-picker__range-pane" };
+var _hoisted_10 = { class: "rs-time-picker__pane-title" };
+var _hoisted_11 = { class: "rs-time-picker__range-pane" };
+var _hoisted_12 = { class: "rs-time-picker__pane-title" };
+var _hoisted_13 = { class: "rs-time-picker__footer" };
+var _hoisted_14 = { class: "rs-time-picker__actions" };
+var _hoisted_15 = ["disabled"];
+var _hoisted_16 = {
+	key: 1,
+	class: "rs-field__hint"
+};
+var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTimePicker",
+	inheritAttrs: false,
+	__name: "RsTimePicker",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hint: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		range: {
+			type: Boolean,
+			default: false
+		},
+		withSeconds: {
+			type: Boolean,
+			default: false
+		},
+		minTime: {},
+		maxTime: {},
+		embedded: {
+			type: Boolean,
+			default: false
+		},
+		labelPosition: { default: "top" },
+		size: {},
+		id: {},
+		invalid: { type: Boolean }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		function isTimeRangeModel(value) {
+			return typeof value === "object" && value !== null && ("start" in value || "end" in value);
+		}
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const props = __props;
+		const fieldId = useId();
+		const attrs = useAttrs();
+		const { t } = useRsI18n();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, { id: props.id }));
+		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value));
+		const triggerId = computed(() => props.id || fieldId);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const columnsRef = useTemplateRef("columnsRef");
+		const draftHour = ref(0);
+		const draftMinute = ref(0);
+		const draftSecond = ref(0);
+		const draftStartTime = ref("");
+		const draftEndTime = ref("");
+		const rangeModel = computed({
+			get() {
+				if (!props.range) return { ...EMPTY_TIME_RANGE };
+				return isTimeRangeModel(model.value) ? model.value : { ...EMPTY_TIME_RANGE };
+			},
+			set(value) {
+				model.value = value;
+			}
+		});
+		const singleModel = computed({
+			get() {
+				if (props.range) return "";
+				return typeof model.value === "string" ? model.value : "";
+			},
+			set(value) {
+				model.value = value;
+			}
+		});
+		const startMaxTime = computed(() => pickEarlierTime(props.maxTime, draftEndTime.value, props.withSeconds));
+		const endMinTime = computed(() => pickLaterTime(props.minTime, draftStartTime.value, props.withSeconds));
+		const isEmpty = computed(() => props.range ? isTimeRangeEmpty(rangeModel.value) : !singleModel.value);
+		const displayValue = computed(() => {
+			if (props.range) {
+				const formatted = formatTimeRangeDisplay(rangeModel.value, { separator: t("timePicker.separator") });
+				if (formatted) return formatted;
+				return props.placeholder ?? t("timePicker.rangePlaceholder");
+			}
+			if (!singleModel.value) return props.placeholder ?? (props.embedded ? t("timePicker.embeddedPlaceholder") : t("timePicker.placeholder"));
+			return singleModel.value;
+		});
+		const draftTime = computed({
+			get() {
+				return formatTimeFromParts(draftHour.value, draftMinute.value, draftSecond.value, props.withSeconds);
+			},
+			set(value) {
+				const parsed = parseTimeValue(value, props.withSeconds);
+				if (!parsed) return;
+				draftHour.value = parsed.hour;
+				draftMinute.value = parsed.minute;
+				draftSecond.value = parsed.second;
+			}
+		});
+		function syncSingleDraft() {
+			const parsed = parseTimeValue(singleModel.value, props.withSeconds);
+			if (parsed) {
+				draftHour.value = parsed.hour;
+				draftMinute.value = parsed.minute;
+				draftSecond.value = parsed.second;
+				return;
+			}
+			const current = getCurrentTime();
+			draftHour.value = current.hour;
+			draftMinute.value = current.minute;
+			draftSecond.value = current.second;
+		}
+		function syncRangeDraft() {
+			const start = parseTimeValue(rangeModel.value.start, props.withSeconds);
+			const end = parseTimeValue(rangeModel.value.end, props.withSeconds);
+			const current = getCurrentTime();
+			draftStartTime.value = start ? formatTimeFromParts(start.hour, start.minute, start.second, props.withSeconds) : formatTimeFromParts(9, 0, 0, props.withSeconds);
+			draftEndTime.value = end ? formatTimeFromParts(end.hour, end.minute, end.second, props.withSeconds) : formatTimeFromParts(start?.hour ?? Math.min(current.hour + 1, 23), start?.minute ?? current.minute, start?.second ?? current.second, props.withSeconds);
+		}
+		function syncDraftFromModel() {
+			if (props.range) {
+				syncRangeDraft();
+				return;
+			}
+			syncSingleDraft();
+		}
+		function isUnitDisabled(unit, value) {
+			return !isTimeWithinBounds(unit === "hour" ? value : draftHour.value, unit === "minute" ? value : draftMinute.value, unit === "second" ? value : draftSecond.value, {
+				minTime: props.minTime,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			});
+		}
+		function confirmSingleSelection() {
+			if (!isTimeWithinBounds(draftHour.value, draftMinute.value, draftSecond.value, {
+				minTime: props.minTime,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			})) return;
+			singleModel.value = formatTimeFromParts(draftHour.value, draftMinute.value, draftSecond.value, props.withSeconds);
+			open.value = false;
+		}
+		function confirmRangeSelection() {
+			const start = draftStartTime.value;
+			const end = draftEndTime.value;
+			const startParsed = parseTimeValue(start, props.withSeconds);
+			const endParsed = parseTimeValue(end, props.withSeconds);
+			if (!startParsed || !endParsed) return;
+			if (!isTimeRangeOrderedValues(start, end, props.withSeconds)) return;
+			if (!isTimeWithinBounds(startParsed.hour, startParsed.minute, startParsed.second, {
+				minTime: props.minTime,
+				maxTime: startMaxTime.value,
+				withSeconds: props.withSeconds
+			}) || !isTimeWithinBounds(endParsed.hour, endParsed.minute, endParsed.second, {
+				minTime: endMinTime.value,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			})) return;
+			rangeModel.value = {
+				start,
+				end
+			};
+			open.value = false;
+		}
+		function confirmSelection() {
+			if (props.range) {
+				confirmRangeSelection();
+				return;
+			}
+			confirmSingleSelection();
+		}
+		function clearSelection() {
+			if (props.range) rangeModel.value = { ...EMPTY_TIME_RANGE };
+			else singleModel.value = "";
+			open.value = false;
+		}
+		function selectPreset() {
+			if (props.range) {
+				draftStartTime.value = formatTimeFromParts(9, 0, 0, props.withSeconds);
+				draftEndTime.value = formatTimeFromParts(18, 0, 0, props.withSeconds);
+				confirmRangeSelection();
+				return;
+			}
+			const current = getCurrentTime();
+			draftHour.value = current.hour;
+			draftMinute.value = current.minute;
+			draftSecond.value = current.second;
+			confirmSingleSelection();
+		}
+		watch(open, async (isOpen) => {
+			if (!isOpen) return;
+			syncDraftFromModel();
+			if (!props.range) {
+				await nextTick();
+				columnsRef.value?.scrollToSelectionAfterPaint();
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_RsTimePicker = resolveComponent("RsTimePicker", true);
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				__props.embedded ? "rs-time-picker-embedded" : "rs-field",
+				`rs-time-picker--${unref(resolvedSize)}`,
+				!__props.embedded && `rs-field--label-${__props.labelPosition}`
+			]) }, [
+				!__props.embedded && __props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [__props.labelPosition === "left" ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					for: unref(fieldId)
+				}, toDisplayString(__props.label), 9, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.label), 1)], 64)), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [createVNode(unref(PopoverRoot), {
+					open: open.value,
+					"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+					modal: !__props.embedded
+				}, {
+					default: withCtx(() => [createVNode(unref(PopoverTrigger), mergeProps(__props.embedded ? void 0 : unref(attrs), {
+						id: __props.embedded ? void 0 : triggerId.value,
+						type: "button",
+						class: ["rs-time-picker__trigger", {
+							"rs-time-picker__trigger--placeholder": isEmpty.value,
+							"rs-time-picker__trigger--embedded": __props.embedded,
+							"rs-time-picker__trigger--invalid": !__props.embedded && isInvalid.value
+						}],
+						disabled: __props.disabled,
+						"aria-invalid": !__props.embedded && isInvalid.value ? true : void 0
+					}), {
+						default: withCtx(() => [createElementVNode("span", _hoisted_5, [!__props.embedded ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: "clock",
+							size: triggerIconSize.value,
+							class: "rs-time-picker__icon"
+						}, null, 8, ["size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(displayValue.value), 1)]), createVNode(RsIcon_default, {
+							name: "chevron-down",
+							size: triggerIconSize.value,
+							class: "rs-time-picker__chevron"
+						}, null, 8, ["size"])]),
+						_: 1
+					}, 16, [
+						"id",
+						"class",
+						"disabled",
+						"aria-invalid"
+					]), createVNode(unref(PopoverPortal), null, {
+						default: withCtx(() => [createVNode(unref(PopoverContent), {
+							class: normalizeClass(["rs-time-picker__content", {
+								"rs-time-picker__content--range": __props.range && !__props.embedded,
+								"rs-time-picker__content--embedded": __props.embedded
+							}]),
+							"side-offset": 6,
+							align: "start"
+						}, {
+							default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("section", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("timePicker.rangeStart")), 1), createVNode(_component_RsTimePicker, {
+								modelValue: draftStartTime.value,
+								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draftStartTime.value = $event),
+								embedded: "",
+								size: unref(resolvedSize),
+								"with-seconds": __props.withSeconds,
+								"min-time": __props.minTime,
+								"max-time": startMaxTime.value,
+								disabled: __props.disabled
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"with-seconds",
+								"min-time",
+								"max-time",
+								"disabled"
+							])]), createElementVNode("section", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("timePicker.rangeEnd")), 1), createVNode(_component_RsTimePicker, {
+								modelValue: draftEndTime.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => draftEndTime.value = $event),
+								embedded: "",
+								size: unref(resolvedSize),
+								"with-seconds": __props.withSeconds,
+								"min-time": endMinTime.value,
+								"max-time": __props.maxTime,
+								disabled: __props.disabled
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"with-seconds",
+								"min-time",
+								"max-time",
+								"disabled"
+							])])])) : (openBlock(), createBlock(RsTimePickerColumns_default, {
+								key: 1,
+								ref_key: "columnsRef",
+								ref: columnsRef,
+								modelValue: draftTime.value,
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => draftTime.value = $event),
+								second: __props.withSeconds,
+								size: unref(resolvedSize),
+								disabled: __props.disabled,
+								"is-unit-disabled": isUnitDisabled
+							}, null, 8, [
+								"modelValue",
+								"second",
+								"size",
+								"disabled"
+							])), createElementVNode("footer", _hoisted_13, [createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__link",
+								onClick: selectPreset
+							}, toDisplayString(__props.range ? unref(t)("timePicker.rangePreset") : unref(t)("timePicker.now")), 1), createElementVNode("div", _hoisted_14, [createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__ghost",
+								onClick: clearSelection
+							}, toDisplayString(__props.range ? unref(t)("timePicker.rangeClear") : unref(t)("timePicker.clear")), 1), createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__confirm",
+								disabled: __props.range && (!draftStartTime.value || !draftEndTime.value),
+								onClick: confirmSelection
+							}, toDisplayString(unref(t)("timePicker.confirm")), 9, _hoisted_15)])])])) : createCommentVNode("", true)]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open", "modal"])]),
+				!__props.embedded && __props.hint ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsTimePicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/time-picker/src/RsTimePicker.js

@@ -0,0 +1,10 @@
+import './RsTimePicker.css'
+import './RsTimePicker-1.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsTimePicker_vue_vue_type_script_setup_true_lang_default from "./RsTimePicker.impl.js";
+
+
+//#region src/components/time-picker/src/RsTimePicker.vue
+var RsTimePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsTimePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b32dafa2"]]);
+//#endregion
+export { RsTimePicker_default as default };

package/dist/components/time-picker/src/RsTimePickerColumns.css

@@ -0,0 +1,104 @@
+
+.rs-time-columns[data-v-48197425] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--rs-space-sm);
+  --rs-time-columns-list-max-height: 10rem;
+  --rs-time-columns-item-padding-y: 0.375rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-sm);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns--seconds[data-v-48197425] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.rs-time-columns--ssm[data-v-48197425] {
+  --rs-time-columns-list-max-height: 7.5rem;
+  --rs-time-columns-item-padding-y: 0.2rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+  gap: var(--rs-space-xs);
+}
+.rs-time-columns--sm[data-v-48197425] {
+  --rs-time-columns-list-max-height: 8.5rem;
+  --rs-time-columns-item-padding-y: 0.28rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns--lg[data-v-48197425] {
+  --rs-time-columns-list-max-height: 12rem;
+  --rs-time-columns-item-padding-y: 0.5rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-base);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns__column[data-v-48197425] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.rs-time-columns__label[data-v-48197425] {
+  text-align: center;
+  font-size: var(--rs-time-columns-label-font-size);
+  font-weight: var(--rs-font-weight-medium);
+  letter-spacing: 0.02em;
+  color: var(--rs-muted);
+}
+.rs-time-columns__list-shell[data-v-48197425] {
+  overflow: hidden;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
+}
+.rs-time-columns__list[data-v-48197425] {
+  position: relative;
+  max-height: var(--rs-time-columns-list-max-height);
+  overflow-y: auto;
+  padding: 0.25rem;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rs-muted) 42%, transparent) transparent;
+}
+/* 去掉 Windows 原生滚动条上下三角，避免盖住圆角描边 */
+.rs-time-columns__list[data-v-48197425]::-webkit-scrollbar {
+  width: 6px;
+}
+.rs-time-columns__list[data-v-48197425]::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.rs-time-columns__list[data-v-48197425]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rs-muted) 42%, transparent);
+}
+.rs-time-columns__list[data-v-48197425]::-webkit-scrollbar-track {
+  background: transparent;
+}
+.rs-time-columns__item[data-v-48197425] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  padding: var(--rs-time-columns-item-padding-y) 0;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-time-columns-item-font-size);
+  line-height: var(--rs-line-height-tight);
+  cursor: pointer;
+  transition: background var(--rs-transition-fast), color var(--rs-transition-fast);
+}
+.rs-time-columns__item[data-v-48197425]:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+}
+.rs-time-columns__item--active[data-v-48197425] {
+  background: var(--rs-primary);
+  color: var(--rs-primary-foreground);
+}
+.rs-time-columns__item--active[data-v-48197425]:hover:not(:disabled) {
+  opacity: 0.92;
+}
+.rs-time-columns__item[data-v-48197425]:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}

package/dist/components/time-picker/src/RsTimePickerColumns.d.ts

@@ -0,0 +1,30 @@
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsTimeUnit } from './time-picker-utils';
+type __VLS_Props = {
+    minuteStep?: number;
+    second?: boolean;
+    disabled?: boolean;
+    size?: RsComponentSize;
+    isUnitDisabled?: (unit: RsTimeUnit, value: number) => boolean;
+};
+declare function scrollToSelection(): void;
+declare function scrollToSelectionAfterPaint(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    scrollToSelection: typeof scrollToSelection;
+    scrollToSelectionAfterPaint: typeof scrollToSelectionAfterPaint;
+    resolvedSize: import("vue").ComputedRef<RsComponentSize>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    second: boolean;
+    minuteStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/time-picker/src/RsTimePickerColumns.impl.js

@@ -0,0 +1,172 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { TIME_HOUR_OPTIONS, TIME_SECOND_OPTIONS, formatTimeFromParts, getTimeMinuteOptions, parseTimeValue, scheduleAfterPaint, scrollTimeColumnToValue } from "./time-picker-utils.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, renderList, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+//#region src/components/time-picker/src/RsTimePickerColumns.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-time-columns__column" };
+var _hoisted_2 = { class: "rs-time-columns__label" };
+var _hoisted_3 = { class: "rs-time-columns__list-shell" };
+var _hoisted_4 = [
+	"data-value",
+	"disabled",
+	"onClick"
+];
+var _hoisted_5 = { class: "rs-time-columns__column" };
+var _hoisted_6 = { class: "rs-time-columns__label" };
+var _hoisted_7 = { class: "rs-time-columns__list-shell" };
+var _hoisted_8 = [
+	"data-value",
+	"disabled",
+	"onClick"
+];
+var _hoisted_9 = {
+	key: 0,
+	class: "rs-time-columns__column"
+};
+var _hoisted_10 = { class: "rs-time-columns__label" };
+var _hoisted_11 = { class: "rs-time-columns__list-shell" };
+var _hoisted_12 = [
+	"data-value",
+	"disabled",
+	"onClick"
+];
+var RsTimePickerColumns_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTimePickerColumns",
+	__name: "RsTimePickerColumns",
+	props: /*@__PURE__*/ mergeModels({
+		minuteStep: { default: 1 },
+		second: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		isUnitDisabled: {}
+	}, {
+		"modelValue": { default: "00:00" },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const { t } = useRsI18n();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const hourListRef = useTemplateRef("hourListRef");
+		const minuteListRef = useTemplateRef("minuteListRef");
+		const secondListRef = useTemplateRef("secondListRef");
+		let cancelScheduledScroll;
+		const hourOptions = TIME_HOUR_OPTIONS;
+		const secondOptions = TIME_SECOND_OPTIONS;
+		const minuteOptions = computed(() => getTimeMinuteOptions(props.minuteStep));
+		const parts = computed(() => {
+			const parsed = parseTimeValue(model.value, props.second);
+			if (parsed) return {
+				hour: parsed.hour,
+				minute: parsed.minute,
+				second: parsed.second
+			};
+			return {
+				hour: 0,
+				minute: 0,
+				second: 0
+			};
+		});
+		function isDisabled(unit, value) {
+			return props.disabled || (props.isUnitDisabled?.(unit, value) ?? false);
+		}
+		function scrollColumn(container, value) {
+			scrollTimeColumnToValue(container, value);
+		}
+		function scrollToSelection() {
+			scrollColumn(hourListRef.value, parts.value.hour);
+			scrollColumn(minuteListRef.value, parts.value.minute);
+			if (props.second) scrollColumn(secondListRef.value, parts.value.second);
+		}
+		function scrollToSelectionAfterPaint() {
+			cancelScheduledScroll?.();
+			cancelScheduledScroll = scheduleAfterPaint(scrollToSelection);
+		}
+		function selectUnit(unit, value) {
+			if (isDisabled(unit, value)) return;
+			const next = {
+				...parts.value,
+				[unit]: value
+			};
+			model.value = formatTimeFromParts(next.hour, next.minute, next.second, props.second);
+		}
+		watch(() => [
+			parts.value.hour,
+			parts.value.minute,
+			parts.value.second,
+			props.second
+		], () => {
+			nextTick(scrollToSelection);
+		}, { flush: "post" });
+		onMounted(() => {
+			scrollToSelectionAfterPaint();
+		});
+		onUnmounted(() => {
+			cancelScheduledScroll?.();
+		});
+		__expose({
+			scrollToSelection,
+			scrollToSelectionAfterPaint,
+			resolvedSize
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-time-columns", [`rs-time-columns--${unref(resolvedSize)}`, { "rs-time-columns--seconds": __props.second }]]) }, [
+				createElementVNode("div", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("timePicker.hour")), 1), createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+					ref_key: "hourListRef",
+					ref: hourListRef,
+					class: "rs-time-columns__list"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(hourOptions), (option) => {
+					return openBlock(), createElementBlock("button", {
+						key: option.value,
+						type: "button",
+						class: normalizeClass(["rs-time-columns__item", { "rs-time-columns__item--active": parts.value.hour === option.value }]),
+						"data-unit": "hour",
+						"data-value": option.value,
+						disabled: isDisabled("hour", option.value),
+						onClick: ($event) => selectUnit("hour", option.value)
+					}, toDisplayString(option.label), 11, _hoisted_4);
+				}), 128))], 512)])]),
+				createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(unref(t)("timePicker.minute")), 1), createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+					ref_key: "minuteListRef",
+					ref: minuteListRef,
+					class: "rs-time-columns__list"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(minuteOptions.value, (option) => {
+					return openBlock(), createElementBlock("button", {
+						key: option.value,
+						type: "button",
+						class: normalizeClass(["rs-time-columns__item", { "rs-time-columns__item--active": parts.value.minute === option.value }]),
+						"data-unit": "minute",
+						"data-value": option.value,
+						disabled: isDisabled("minute", option.value),
+						onClick: ($event) => selectUnit("minute", option.value)
+					}, toDisplayString(option.label), 11, _hoisted_8);
+				}), 128))], 512)])]),
+				__props.second ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("timePicker.second")), 1), createElementVNode("div", _hoisted_11, [createElementVNode("div", {
+					ref_key: "secondListRef",
+					ref: secondListRef,
+					class: "rs-time-columns__list"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(secondOptions), (option) => {
+					return openBlock(), createElementBlock("button", {
+						key: option.value,
+						type: "button",
+						class: normalizeClass(["rs-time-columns__item", { "rs-time-columns__item--active": parts.value.second === option.value }]),
+						"data-unit": "second",
+						"data-value": option.value,
+						disabled: isDisabled("second", option.value),
+						onClick: ($event) => selectUnit("second", option.value)
+					}, toDisplayString(option.label), 11, _hoisted_12);
+				}), 128))], 512)])])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsTimePickerColumns_vue_vue_type_script_setup_true_lang_default as default };