sard 1.0.0 → 1.0.2

package/components/datetime-picker-popout/datetime-picker-popout.js

@@ -0,0 +1,137 @@
+import { formatDate, toDate } from "../../utils/date.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import popout_default from "../popout/popout.js";
+import { getInitialValue, getMaxDate, getMinDate } from "../datetime-picker/common.js";
+import datetime_picker_default from "../datetime-picker/datetime-picker.js";
+import { omitFormPopoutProps, useFormPopout } from "../popout/useFormPopout.js";
+import { defaultDatetimePickerPopoutProps } from "./common.js";
+import { computed, createBlock, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, openBlock, unref, watch, withCtx } from "vue";
+//#region packages/sard/components/datetime-picker-popout/datetime-picker-popout.vue
+var datetime_picker_popout_default = /*@__PURE__*/ defineComponent({
+	__name: "datetime-picker-popout",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		calendar: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: [Date, String],
+			required: false
+		},
+		max: {
+			type: [Date, String],
+			required: false
+		},
+		modelValue: {
+			type: [Date, String],
+			required: false
+		},
+		filter: {
+			type: Function,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		valueFormat: {
+			type: String,
+			required: false
+		}
+	}, defaultDatetimePickerPopoutProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const omittedProps = omitFormPopoutProps(props);
+		const minDate = computed(() => toDate(props.min || getMinDate(), props.valueFormat));
+		const maxDate = computed(() => {
+			const maxDate = toDate(props.max || getMaxDate());
+			return maxDate < minDate.value ? new Date(minDate.value) : maxDate;
+		});
+		const { innerVisible, innerValue, draftValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, { onConfirmBefore() {
+			if (!draftValue.value) {
+				const initialValue = getInitialValue(minDate.value, maxDate.value);
+				draftValue.value = props.valueFormat ? formatDate(initialValue, props.valueFormat) : initialValue;
+			}
+		} });
+		const onEnter = () => {
+			if (!isEmptyBinding(innerValue.value) && draftValue.value !== innerValue.value) draftValue.value = innerValue.value;
+		};
+		const normalizeValue = (value) => {
+			const date = value ? toDate(value, props.valueFormat) : /* @__PURE__ */ new Date();
+			return date < minDate.value ? new Date(minDate.value) : date > maxDate.value ? new Date(maxDate.value) : date;
+		};
+		watch([minDate, maxDate], () => {
+			if (innerValue.value) {
+				const oldDate = toDate(innerValue.value, props.valueFormat);
+				const value = normalizeValue(innerValue.value);
+				if (value.getTime() !== oldDate.getTime()) {
+					draftValue.value = value;
+					onConfirm();
+				}
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_default, {
+				visible: unref(innerVisible),
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+				title: __props.title,
+				onConfirm: unref(onConfirm),
+				onEnter,
+				onVisibleHook: unref(onVisibleHook)
+			}, {
+				default: withCtx(() => [createVNode(datetime_picker_default, mergeProps(unref(omittedProps), {
+					"model-value": unref(draftValue),
+					onChange: unref(onChange)
+				}), null, 16, ["model-value", "onChange"])]),
+				_: 1
+			}, 8, [
+				"visible",
+				"title",
+				"onConfirm",
+				"onVisibleHook"
+			]);
+		};
+	}
+});
+//#endregion
+export { datetime_picker_popout_default as default };

package/components/datetime-picker-popout/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _DatetimePickerPopout from './datetime-picker-popout.vue';
+export declare const DatetimePickerPopout: EnhancedComponent<typeof _DatetimePickerPopout>;
+export default DatetimePickerPopout;
+export type { DatetimePickerPopoutProps, DatetimePickerPopoutSlots, DatetimePickerPopoutEmits, DatetimePickerPopoutExpose, } from './common';

package/components/datetime-picker-popout/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import datetime_picker_popout_default from "./datetime-picker-popout.js";
+//#region packages/sard/components/datetime-picker-popout/index.ts
+const DatetimePickerPopout = enhanceComponent(datetime_picker_popout_default);
+//#endregion
+export { DatetimePickerPopout, DatetimePickerPopout as default };

package/components/datetime-range-picker/common.d.ts

@@ -0,0 +1,15 @@
+import { type DefaultProps } from '../config';
+import { type DatetimePickerSlots, type DatetimePickerProps } from '../datetime-picker/common';
+export interface DatetimeRangePickerProps extends Omit<DatetimePickerProps, 'modelValue'> {
+    modelValue?: (Date | string)[];
+    tabs?: string[];
+}
+export declare const defaultDatetimeRangePickerProps: DefaultProps<DatetimeRangePickerProps>;
+export interface DatetimeRangePickerSlots extends DatetimePickerSlots {
+    header?(props: Record<string, never>): any;
+    footer?(props: Record<string, never>): any;
+}
+export interface DatetimeRangePickerEmits {
+    (e: 'update:modelValue', date: (Date | string)[]): void;
+    (e: 'change', date: (Date | string)[]): void;
+}

package/components/datetime-range-picker/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/datetime-range-picker/common.ts
+const defaultDatetimeRangePickerProps = { type: "yMd" };
+//#endregion
+export { defaultDatetimeRangePickerProps };

package/components/datetime-range-picker/datetime-range-picker.d.ts

@@ -0,0 +1,27 @@
+import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from './common';
+type __VLS_Slots = DatetimeRangePickerSlots;
+declare const __VLS_base: import("vue").DefineComponent<DatetimeRangePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (date: (string | Date)[]) => any;
+    "update:modelValue": (date: (string | Date)[]) => any;
+}, string, import("vue").PublicProps, Readonly<DatetimeRangePickerProps> & Readonly<{
+    onChange?: ((date: (string | Date)[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((date: (string | Date)[]) => any) | undefined;
+}>, {
+    filter: (letter: import("../index.ts").DatetimeLetter, value: number, date: Date, index: number) => boolean;
+    min: Date | string;
+    max: Date | string;
+    type: string;
+    modelValue: (Date | string)[];
+    formatter: (letter: import("../index.ts").DatetimeLetter, option: import("../index.ts").DatetimeColumnOption, date: Date, index: number) => string | void | undefined;
+    valueFormat: string;
+    calendar: "solar" | "lunar";
+    tabs: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/datetime-range-picker/datetime-range-picker.js

@@ -0,0 +1,115 @@
+import { createBem } from "../../utils/bem.js";
+import { toDate } from "../../utils/date.js";
+import { omit } from "../../utils/object.js";
+import { getMaxDate, getMinDate, normalizeRangeValue } from "../datetime-picker/common.js";
+import datetime_picker_default from "../datetime-picker/datetime-picker.js";
+import tabs_default from "../tabs/tabs.js";
+import { defaultDatetimeRangePickerProps } from "./common.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, watch } from "vue";
+//#region packages/sard/components/datetime-range-picker/datetime-range-picker.vue
+var datetime_range_picker_default = /*@__PURE__*/ defineComponent({
+	__name: "datetime-range-picker",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		tabs: {
+			type: Array,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		calendar: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: [Date, String],
+			required: false
+		},
+		max: {
+			type: [Date, String],
+			required: false
+		},
+		filter: {
+			type: Function,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		valueFormat: {
+			type: String,
+			required: false
+		}
+	}, defaultDatetimeRangePickerProps),
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("datetime-range-picker");
+		const datetimePickerProps = computed(() => {
+			return omit(props, ["modelValue", "tabs"]);
+		});
+		const tabsOptions = computed(() => {
+			return [{
+				label: props.tabs?.[0],
+				value: 0
+			}, {
+				label: props.tabs?.[1],
+				value: 1
+			}];
+		});
+		const tabsCurrent = ref(0);
+		const minDate = computed(() => toDate(props.min || getMinDate(), props.valueFormat));
+		const maxDate = computed(() => {
+			const maxDate = toDate(props.max || getMaxDate(), props.valueFormat);
+			return maxDate < minDate.value ? new Date(minDate.value) : maxDate;
+		});
+		const startValue = ref();
+		const endValue = ref();
+		watch(() => props.modelValue, (value) => {
+			const [start, end] = normalizeRangeValue(minDate.value, maxDate.value, value, props.valueFormat);
+			startValue.value = start;
+			endValue.value = end;
+		}, { immediate: true });
+		const onChange = () => {
+			if (startValue.value && endValue.value) {
+				const emitValue = [startValue.value, endValue.value];
+				emit("update:modelValue", emitValue);
+				emit("change", emitValue);
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [
+				renderSlot(_ctx.$slots, "header"),
+				createVNode(tabs_default, {
+					modelValue: tabsCurrent.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabsCurrent.value = $event),
+					options: tabsOptions.value,
+					scrollable: ""
+				}, null, 8, ["modelValue", "options"]),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("container")) }, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("wrapper")),
+					style: normalizeStyle({ "--x": `${-Number(tabsCurrent.value) * 100}%` })
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("pane")) }, [createVNode(datetime_picker_default, mergeProps(datetimePickerProps.value, {
+					modelValue: startValue.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => startValue.value = $event),
+					onChange
+				}), null, 16, ["modelValue"])], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("pane")) }, [createVNode(datetime_picker_default, mergeProps(datetimePickerProps.value, {
+					modelValue: endValue.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => endValue.value = $event),
+					min: startValue.value,
+					onChange
+				}), null, 16, ["modelValue", "min"])], 2)], 6)], 2),
+				renderSlot(_ctx.$slots, "footer")
+			], 2);
+		};
+	}
+});
+//#endregion
+export { datetime_range_picker_default as default };

package/components/datetime-range-picker/index.css

@@ -0,0 +1 @@
+.s-datetime-range-picker__container{overflow:hidden}.s-datetime-range-picker__wrapper{display:flex;flex-wrap:nowrap;width:100%;transition:transform var(--s-duration);--final-x: var(--x);transform:translate3d(var(--final-x), 0, 0)}:root[dir=rtl] .s-datetime-range-picker__wrapper{--final-x: calc(var(--x) * -1)}.s-datetime-range-picker__pane{width:100%;flex:none}

package/components/datetime-range-picker/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _DatetimeRangePicker from './datetime-range-picker.vue';
+export declare const DatetimeRangePicker: EnhancedComponent<typeof _DatetimeRangePicker>;
+export default DatetimeRangePicker;
+export type { DatetimeRangePickerProps, DatetimeRangePickerSlots, DatetimeRangePickerEmits, } from './common';

package/components/datetime-range-picker/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import datetime_range_picker_default from "./datetime-range-picker.js";
+//#region packages/sard/components/datetime-range-picker/index.ts
+const DatetimeRangePicker = enhanceComponent(datetime_range_picker_default);
+//#endregion
+export { DatetimeRangePicker, DatetimeRangePicker as default };

package/components/datetime-range-picker-input/common.d.ts

@@ -0,0 +1,11 @@
+import { type DefaultProps } from '../config';
+import { type DatetimeRangePickerPopoutProps, type DatetimeRangePickerPopoutSlots, type DatetimeRangePickerPopoutEmits } from '../datetime-range-picker-popout/common';
+import { type PopoutInputSlots, type PopoutInputProps } from '../popout-input/common';
+export interface DatetimeRangePickerInputProps extends DatetimeRangePickerPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
+    outletFormat?: string;
+}
+export declare const defaultDatetimeRangePickerInputProps: DefaultProps<DatetimeRangePickerInputProps>;
+export interface DatetimeRangePickerInputSlots extends DatetimeRangePickerPopoutSlots, PopoutInputSlots {
+}
+export interface DatetimeRangePickerInputEmits extends DatetimeRangePickerPopoutEmits {
+}

package/components/datetime-range-picker-input/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/datetime-range-picker-input/common.ts
+const defaultDatetimeRangePickerInputProps = {
+	type: "yMd",
+	validateEvent: true
+};
+//#endregion
+export { defaultDatetimeRangePickerInputProps };

package/components/datetime-range-picker-input/datetime-range-picker-input.d.ts

@@ -0,0 +1,63 @@
+import { type DatetimeRangePickerInputProps, type DatetimeRangePickerInputSlots } from './common';
+type __VLS_Slots = DatetimeRangePickerInputSlots;
+declare const __VLS_base: import("vue").DefineComponent<DatetimeRangePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (date: (string | Date)[] | undefined) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: import("../index.ts").MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (date: (string | Date)[] | undefined) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<DatetimeRangePickerInputProps> & Readonly<{
+    onChange?: ((date: (string | Date)[] | undefined) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((date: (string | Date)[] | undefined) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    filter: (letter: import("../index.ts").DatetimeLetter, value: number, date: Date, index: number) => boolean;
+    title: string;
+    min: Date | string;
+    max: Date | string;
+    readonly: boolean;
+    type: string;
+    visible: boolean;
+    loading: boolean;
+    disabled: boolean;
+    modelValue: (Date | string)[];
+    formatter: (letter: import("../index.ts").DatetimeLetter, option: import("../index.ts").DatetimeColumnOption, date: Date, index: number) => string | void | undefined;
+    valueFormat: string;
+    showConfirm: boolean;
+    calendar: "solar" | "lunar";
+    placeholder: string;
+    clearable: boolean;
+    validateEvent: boolean;
+    multiline: boolean;
+    inputProps: import("../index.ts").InputProps;
+    valueOnClear: () => any;
+    resettable: boolean;
+    outletFormat: string;
+    tabs: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/datetime-range-picker-input/datetime-range-picker-input.js

@@ -0,0 +1,198 @@
+import { formatDate, parseDate } from "../../utils/date.js";
+import { isString } from "../../utils/is.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import popout_input_default from "../popout-input/popout-input.js";
+import { partitionPopoutInputProps, usePopoutInput } from "../popout-input/usePopoutInput.js";
+import { mapTypeFormat } from "../datetime-picker-input/common.js";
+import datetime_range_picker_popout_default from "../datetime-range-picker-popout/datetime-range-picker-popout.js";
+import { defaultDatetimeRangePickerInputProps } from "./common.js";
+import { createBlock, createSlots, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, openBlock, renderSlot, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/datetime-range-picker-input/datetime-range-picker-input.vue
+var datetime_range_picker_input_default = /*@__PURE__*/ defineComponent({
+	__name: "datetime-range-picker-input",
+	props: /*@__PURE__*/ mergeDefaults({
+		outletFormat: {
+			type: String,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		tabs: {
+			type: Array,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		calendar: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: [Date, String],
+			required: false
+		},
+		max: {
+			type: [Date, String],
+			required: false
+		},
+		filter: {
+			type: Function,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		valueFormat: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		multiline: {
+			type: Boolean,
+			required: false
+		},
+		inputProps: {
+			type: Object,
+			required: false
+		},
+		valueOnClear: {
+			type: Function,
+			required: false
+		}
+	}, defaultDatetimeRangePickerInputProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const partitionedProps = partitionPopoutInputProps(props);
+		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit);
+		const { t } = useTranslateWithPrefix("datetimeRangePickerInput");
+		function getOutletTextMayByStr(date) {
+			if (isString(date) && props.valueFormat) date = parseDate(date, props.valueFormat);
+			if (date instanceof Date) return formatDate(date, props.outletFormat || mapTypeFormat[props.type]);
+			return date;
+		}
+		function getOutletText(value) {
+			return [getOutletTextMayByStr(value[0]), getOutletTextMayByStr(value[1])].join(` ${t("to")} `);
+		}
+		function getInputValue() {
+			if (!innerValue.value || Array.isArray(innerValue.value) && innerValue.value.length === 0) return "";
+			return getOutletText(innerValue.value);
+		}
+		watch(innerValue, () => {
+			inputValue.value = getInputValue();
+		}, { immediate: true });
+		const onConfirm = () => {
+			emit("confirm");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_input_default, mergeProps(unref(partitionedProps)[0], {
+				modelValue: unref(inputValue),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(inputValue) ? inputValue.value = $event : null),
+				onClear: unref(onClear),
+				onClick: unref(show)
+			}), createSlots({
+				default: withCtx(() => [createVNode(datetime_range_picker_popout_default, mergeProps(unref(partitionedProps)[1], {
+					visible: unref(innerVisible),
+					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+					modelValue: unref(innerValue),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(innerValue) ? innerValue.value = $event : null),
+					onChange: unref(onChange),
+					onVisibleHook: unref(onVisibleHook),
+					onConfirm
+				}), {
+					header: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+					footer: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+					_: 3
+				}, 16, [
+					"visible",
+					"modelValue",
+					"onChange",
+					"onVisibleHook"
+				])]),
+				_: 2
+			}, [
+				slots.prepend ? {
+					name: "prepend",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+					key: "0"
+				} : void 0,
+				slots.append ? {
+					name: "append",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+					key: "1"
+				} : void 0,
+				slots.arrow ? {
+					name: "arrow",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+					key: "2"
+				} : void 0
+			]), 1040, [
+				"modelValue",
+				"onClear",
+				"onClick"
+			]);
+		};
+	}
+});
+//#endregion
+export { datetime_range_picker_input_default as default };

package/components/datetime-range-picker-input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _DatetimeRangePickerInput from './datetime-range-picker-input.vue';
+export declare const DatetimeRangePickerInput: EnhancedComponent<typeof _DatetimeRangePickerInput>;
+export default DatetimeRangePickerInput;
+export type { DatetimeRangePickerInputProps, DatetimeRangePickerInputEmits } from './common';

package/components/datetime-range-picker-input/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import datetime_range_picker_input_default from "./datetime-range-picker-input.js";
+//#region packages/sard/components/datetime-range-picker-input/index.ts
+const DatetimeRangePickerInput = enhanceComponent(datetime_range_picker_input_default);
+//#endregion
+export { DatetimeRangePickerInput, DatetimeRangePickerInput as default };

package/components/datetime-range-picker-popout/common.d.ts

@@ -0,0 +1,17 @@
+import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from '../datetime-range-picker/common';
+import { type DefaultProps } from '../config';
+import { type FormPopoutProps } from '../popout/useFormPopout';
+import type { MotionEmits } from '../motion';
+export interface DatetimeRangePickerPopoutProps extends FormPopoutProps, DatetimeRangePickerProps {
+}
+export declare const defaultDatetimeRangePickerPopoutProps: DefaultProps<DatetimeRangePickerPopoutProps>;
+export interface DatetimeRangePickerPopoutSlots extends DatetimeRangePickerSlots {
+}
+export interface DatetimeRangePickerPopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', date: (Date | string)[] | undefined): void;
+    (e: 'change', date: (Date | string)[] | undefined): void;
+    (e: 'confirm'): void;
+}
+export interface DatetimeRangePickerPopoutExpose {
+}

package/components/datetime-range-picker-popout/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/datetime-range-picker-popout/common.ts
+const defaultDatetimeRangePickerPopoutProps = {
+	type: "yMd",
+	validateEvent: true
+};
+//#endregion
+export { defaultDatetimeRangePickerPopoutProps };