sard 1.0.0 → 1.0.1

package/components/picker-view/picker-view.js

@@ -0,0 +1,69 @@
+import { createBem } from "../../utils/bem.js";
+import { flatVNode } from "../../utils/vnode.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import { pickerViewContextKey, pickerViewProps } from "./common.js";
+import { computed, createVNode, provide, reactive, ref, toRef, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/picker-view/picker-view.tsx
+var picker_view_default = defineSetupFnComponent((props, { slots, emit }) => {
+	const bem = createBem("picker-view");
+	const rootRef = useTemplateRef("root");
+	const innerValue = reactive([...props.value]);
+	watch(() => props.value, (value) => {
+		innerValue.length = value.length;
+		value.forEach((val, index) => {
+			if (val !== innerValue[index]) innerValue.splice(index, 1, val);
+		});
+	});
+	const columnsRef = ref([]);
+	function getItemIndex(vnode) {
+		return columnsRef.value.indexOf(vnode);
+	}
+	const getColumnValue = (columnInstance) => {
+		return computed({
+			get() {
+				const index = getItemIndex(columnInstance.vnode);
+				return innerValue[index] || 0;
+			},
+			set(current) {
+				const index = getItemIndex(columnInstance.vnode);
+				if (index < 0) return;
+				if (innerValue[index] !== current) {
+					innerValue[index] = current;
+					const value = innerValue.map((val) => val);
+					emit("update:value", value);
+					emit("change", value);
+				}
+			}
+		});
+	};
+	const height = ref(48);
+	useResizeObserver(rootRef, (size) => {
+		height.value = size.height;
+	});
+	provide(pickerViewContextKey, reactive({
+		maskStyle: toRef(() => props.maskStyle),
+		maskClass: toRef(() => props.maskClass),
+		indicatorClass: toRef(() => props.indicatorClass),
+		indicatorStyle: toRef(() => props.indicatorStyle),
+		height,
+		getColumnValue
+	}));
+	return () => {
+		const defaultSlots = slots.default && slots.default();
+		columnsRef.value = flatVNode(defaultSlots);
+		return createVNode("div", {
+			"ref": "root",
+			"class": bem.b()
+		}, [createVNode("div", { "class": bem.e("wrapper") }, [defaultSlots])]);
+	};
+}, {
+	name: "PickerView",
+	props: pickerViewProps,
+	emits: ["change", "update:value"],
+	slots: null
+});
+//#endregion
+export { picker_view_default as default };

package/components/popout/common.d.ts

@@ -0,0 +1,52 @@
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export type PopoutBeforeClose = (type: 'close' | 'cancel' | 'confirm', loading: {
+    readonly cancel: boolean;
+    readonly confirm: boolean;
+    readonly close: boolean;
+}) => any;
+export interface PopoutProps {
+    visible?: boolean;
+    title?: string;
+    type?: 'compact' | 'loose';
+    showCancel?: boolean;
+    cancelText?: string;
+    showConfirm?: boolean;
+    confirmText?: string;
+    confirmDisabled?: boolean;
+    showClose?: boolean;
+    showFooter?: boolean;
+    overlay?: boolean;
+    overlayClass?: string;
+    overlayStyle?: string;
+    background?: string;
+    transparent?: boolean;
+    overlayClosable?: boolean;
+    beforeClose?: PopoutBeforeClose;
+    showShadow?: boolean;
+    destroyOnClose?: boolean;
+    lazy?: boolean;
+}
+export declare const defaultPopoutProps: DefaultProps<PopoutProps>;
+export interface PopoutSlots {
+    default?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    cancel?(props: {
+        onClick: () => void;
+        loading: boolean;
+        text: string;
+    }): any;
+    confirm?(props: {
+        onClick: () => void;
+        loading: boolean;
+        text: string;
+        disabled?: boolean;
+    }): any;
+    'title-prepend'?(props: Record<string, never>): any;
+}
+export interface PopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'close'): void;
+    (e: 'cancel'): void;
+    (e: 'confirm'): void;
+}

package/components/popout/common.js

@@ -0,0 +1,14 @@
+//#region packages/sard/components/popout/common.ts
+const defaultPopoutProps = {
+	type: "compact",
+	showCancel: void 0,
+	showConfirm: true,
+	showClose: true,
+	showFooter: true,
+	overlay: true,
+	overlayClosable: true,
+	lazy: void 0,
+	destroyOnClose: void 0
+};
+//#endregion
+export { defaultPopoutProps };

package/components/popout/index.css

@@ -0,0 +1 @@
+:root{--s-popout-border-radius:var(--s-border-radius-xl);--s-popout-bg:var(--s-bg-color-elevated);--s-popout-close-padding:var(--s-size);--s-popout-close-font-size:var(--s-font-size-lg);--s-popout-close-color:var(--s-text-color-secondary);--s-popout-header-compact-height:var(--s-content-height);--s-popout-header-loose-height:var(--s-content-height);--s-popout-header-loose-padding-x:60px;--s-popout-title-font-size:var(--s-font-size-lg);--s-popout-title-color:var(--s-text-color-emphasis);--s-popout-footer-gap-y:var(--s-content-padding-y);--s-popout-footer-gap-x:var(--s-content-padding-x);--s-popout-button-gap:var(--s-size)}.s-popout{max-height:100%;padding-bottom:var(--s-safe-bottom);border-top-left-radius:var(--s-popout-border-radius);border-top-right-radius:var(--s-popout-border-radius);background:var(--s-popout-bg)}.s-popout--divided{box-shadow:var(--s-box-shadow)}.s-popout__header{position:relative;display:flex;align-items:center}.s-popout__header--compact{height:var(--s-popout-header-compact-height)}.s-popout__header--loose{height:var(--s-popout-header-loose-height);padding-inline-start:var(--s-popout-header-loose-padding-x);padding-inline-end:var(--s-popout-header-loose-padding-x)}.s-popout__button-wrap{position:relative;display:flex;flex-direction:column;z-index:1;height:100%}.s-popout__button-wrap--end{margin-inline-start:auto}.s-popout__title{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;width:70%;height:100%;margin-inline-start:auto;margin-inline-end:auto;text-align:center;font-size:var(--s-popout-title-font-size);font-weight:var(--s-font-weight-bold);color:var(--s-popout-title-color);overflow:hidden}.s-popout__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-popout__close{position:absolute;top:0;inset-inline-end:0;height:100%;border-width:0;font-size:var(--s-popout-close-font-size);color:var(--s-popout-close-color)}.s-popout__footer{display:flex;align-items:center;gap:var(--s-popout-button-gap);padding:var(--s-popout-footer-gap-y) var(--s-popout-footer-gap-x)}.s-popout__footer-button{flex:1 1 0}

package/components/popout/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Popout from './popout.vue';
+export declare const Popout: EnhancedComponent<typeof _Popout>;
+export default Popout;
+export type { PopoutProps, PopoutSlots, PopoutEmits, PopoutBeforeClose } from './common';
+export * from './useFormPopout';

package/components/popout/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import "../../utils/index.js";
+import popout_default from "./popout.js";
+import { omitFormPopoutProps, useFormPopout } from "./useFormPopout.js";
+//#region packages/sard/components/popout/index.ts
+const Popout = enhanceComponent(popout_default);
+//#endregion
+export { Popout, Popout as default, omitFormPopoutProps, useFormPopout };

package/components/popout/popout.d.ts

@@ -0,0 +1,61 @@
+import { type PopoutProps, type PopoutSlots } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = PopoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<PopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    close: () => 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: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<PopoutProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onClose?: (() => 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: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    background: string;
+    type: "compact" | "loose";
+    visible: boolean;
+    overlay: boolean;
+    overlayClass: string;
+    overlayStyle: string;
+    transparent: boolean;
+    overlayClosable: boolean;
+    destroyOnClose: boolean;
+    lazy: boolean;
+    showCancel: boolean;
+    beforeClose: import("./common").PopoutBeforeClose;
+    cancelText: string;
+    showConfirm: boolean;
+    confirmText: string;
+    confirmDisabled: boolean;
+    showClose: boolean;
+    showFooter: boolean;
+    showShadow: boolean;
+}, {}, {}, {}, 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/popout/popout.js

@@ -0,0 +1,309 @@
+import { createBem } from "../../utils/bem.js";
+import { isBoolean, isFunction } from "../../utils/is.js";
+import { noop } from "../../utils/utils.js";
+import { usePopupVisibleHookProvide } from "../popup/common.js";
+import "../../utils/index.js";
+import popup_default from "../popup/popup.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import button_default from "../button/button.js";
+import { defaultPopoutProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, reactive, readonly, renderSlot, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { Close } from "@sard/icons";
+//#region packages/sard/components/popout/popout.vue
+var popout_default = /*@__PURE__*/ defineComponent({
+	__name: "popout",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		showCancel: {
+			type: Boolean,
+			required: false
+		},
+		cancelText: {
+			type: String,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		confirmText: {
+			type: String,
+			required: false
+		},
+		confirmDisabled: {
+			type: Boolean,
+			required: false
+		},
+		showClose: {
+			type: Boolean,
+			required: false
+		},
+		showFooter: {
+			type: Boolean,
+			required: false
+		},
+		overlay: {
+			type: Boolean,
+			required: false
+		},
+		overlayClass: {
+			type: String,
+			required: false
+		},
+		overlayStyle: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		beforeClose: {
+			type: Function,
+			required: false
+		},
+		showShadow: {
+			type: Boolean,
+			required: false
+		},
+		destroyOnClose: {
+			type: Boolean,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPopoutProps),
+	emits: [
+		"update:visible",
+		"close",
+		"cancel",
+		"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 bem = createBem("popout");
+		const { t } = useTranslateWithPrefix("popout");
+		const mergedShowCancel = computed(() => {
+			return isBoolean(props.showCancel) ? props.showCancel : props.type === "loose" ? false : true;
+		});
+		const innerVisible = useModel(props, "visible");
+		const callVisibleHook = usePopupVisibleHookProvide();
+		const onVisibleHook = (name, el) => {
+			callVisibleHook(name);
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const loading = reactive({
+			cancel: false,
+			confirm: false,
+			close: false
+		});
+		const readonlyLoading = readonly(loading);
+		const asyncSet = /* @__PURE__ */ new Set();
+		watch(innerVisible, () => {
+			if (innerVisible.value === false) {
+				asyncSet.forEach((obj) => {
+					obj.valid = false;
+				});
+				Object.assign(loading, {
+					cancel: false,
+					confirm: false,
+					close: false
+				});
+			}
+		}, { flush: "sync" });
+		const perhapsClose = (type) => {
+			emit(type);
+			if (isFunction(props.beforeClose)) {
+				const result = props.beforeClose(type, readonlyLoading);
+				if (result instanceof Promise) {
+					loading[type] = true;
+					const obj = { valid: true };
+					asyncSet.add(obj);
+					return result.then(() => {
+						if (obj.valid) innerVisible.value = false;
+					}).catch(noop).finally(() => {
+						loading[type] = false;
+						asyncSet.delete(obj);
+					});
+				} else if (result === false) return;
+			}
+			innerVisible.value = false;
+		};
+		const onOverlayClick = () => {
+			if (props.overlayClosable) perhapsClose("close");
+		};
+		const onCloseClick = () => {
+			perhapsClose("close");
+		};
+		const onConfirm = () => {
+			perhapsClose("confirm");
+		};
+		const onCancel = () => {
+			perhapsClose("cancel");
+		};
+		const mergedConfirmText = computed(() => {
+			return props.confirmText || t("confirm");
+		});
+		const mergedCancelText = computed(() => {
+			return props.cancelText || t("cancel");
+		});
+		const popoutClass = computed(() => {
+			return [bem.b(), bem.m("divided", props.showShadow)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				effect: "slide-bottom",
+				visible: __props.visible,
+				overlay: __props.overlay,
+				"overlay-class": __props.overlayClass,
+				"overlay-style": __props.overlayStyle,
+				background: __props.background,
+				transparent: __props.transparent,
+				"destroy-on-close": __props.destroyOnClose,
+				lazy: __props.lazy,
+				onOverlayClick,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(popoutClass.value),
+					onTransitionend: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, [
+					createElementVNode("div", { class: normalizeClass([unref(bem).e("header"), unref(bem).em("header", props.type)]) }, [
+						__props.type === "compact" && mergedShowCancel.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass([unref(bem).e("button-wrap"), unref(bem).em("button-wrap", "start")])
+						}, [renderSlot(_ctx.$slots, "cancel", {
+							onClick: onCancel,
+							loading: loading.cancel,
+							text: mergedCancelText.value
+						}, () => [createVNode(button_default, {
+							variant: "link",
+							color: "secondary",
+							loading: loading.cancel,
+							block: "",
+							onClick: onCancel
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(mergedCancelText.value), 1)]),
+							_: 1
+						}, 8, ["loading"])])], 2)) : createCommentVNode("v-if", true),
+						renderSlot(_ctx.$slots, "title-prepend"),
+						createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", { class: normalizeClass(unref(bem).e("title-text")) }, toDisplayString(__props.title), 3)])], 2),
+						__props.type === "compact" && __props.showConfirm ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass([unref(bem).e("button-wrap"), unref(bem).em("button-wrap", "end")])
+						}, [renderSlot(_ctx.$slots, "confirm", {
+							onClick: onConfirm,
+							disabled: __props.confirmDisabled,
+							loading: loading.confirm,
+							text: mergedConfirmText.value
+						}, () => [createVNode(button_default, {
+							variant: "link",
+							color: "primary",
+							loading: loading.confirm,
+							disabled: __props.confirmDisabled,
+							block: "",
+							onClick: onConfirm
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(mergedConfirmText.value), 1)]),
+							_: 1
+						}, 8, ["loading", "disabled"])])], 2)) : createCommentVNode("v-if", true),
+						__props.type === "loose" && __props.showClose ? (openBlock(), createElementBlock("div", {
+							key: 2,
+							class: normalizeClass(unref(bem).e("close")),
+							onClick: onCloseClick
+						}, [createVNode(button_default, {
+							variant: "link",
+							color: "secondary",
+							size: "large",
+							block: ""
+						}, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						})], 2)) : createCommentVNode("v-if", true)
+					], 2),
+					renderSlot(_ctx.$slots, "default"),
+					__props.showFooter && __props.type === "loose" ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("footer"))
+					}, [mergedShowCancel.value ? renderSlot(_ctx.$slots, "cancel", {
+						key: 0,
+						onClick: onCancel,
+						loading: loading.cancel,
+						text: mergedCancelText.value
+					}, () => [createVNode(button_default, {
+						variant: "filled",
+						color: "primary",
+						round: "",
+						loading: loading.cancel,
+						block: "",
+						onClick: onCancel
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(mergedCancelText.value), 1)]),
+						_: 1
+					}, 8, ["loading"])]) : createCommentVNode("v-if", true), __props.showConfirm ? renderSlot(_ctx.$slots, "confirm", {
+						key: 1,
+						onClick: onConfirm,
+						disabled: __props.confirmDisabled,
+						loading: loading.confirm,
+						text: mergedConfirmText.value
+					}, () => [createVNode(button_default, {
+						variant: "solid",
+						color: "primary",
+						round: "",
+						loading: loading.confirm,
+						disabled: __props.confirmDisabled,
+						block: "",
+						onClick: onConfirm
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(mergedConfirmText.value), 1)]),
+						_: 1
+					}, 8, ["loading", "disabled"])]) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)
+				], 34)]),
+				_: 3
+			}, 8, [
+				"visible",
+				"overlay",
+				"overlay-class",
+				"overlay-style",
+				"background",
+				"transparent",
+				"destroy-on-close",
+				"lazy"
+			]);
+		};
+	}
+});
+//#endregion
+export { popout_default as default };

package/components/popout/useFormPopout.d.ts

@@ -0,0 +1,43 @@
+import type { MotionEmits, MotionHookName } from '../motion/common';
+export interface UseFormPopoutProps {
+    visible?: boolean;
+    modelValue?: any;
+    validateEvent?: boolean;
+    resettable?: boolean;
+}
+export interface FormPopoutProps {
+    visible?: boolean;
+    title?: string;
+    resettable?: boolean;
+    validateEvent?: boolean;
+    showConfirm?: boolean;
+}
+export declare function omitFormPopoutProps<T>(props: T & FormPopoutProps): import("vue").ComputedRef<Omit<T & FormPopoutProps, "title" | "visible" | "showConfirm" | "validateEvent" | "resettable">>;
+export interface UseFormPopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', ...args: any[]): void;
+    (e: 'change', ...args: any[]): void;
+    (e: 'confirm'): void;
+}
+/**
+ * 表单 Popout 组合式函数
+ *
+ * 统一管理所有表单类 popout 组件（如 select-popout、picker-popout、datetime-picker-popout 等）的通用逻辑：
+ * - `innerVisible` — 弹出层显示/隐藏状态（双向绑定 `visible`）
+ * - `innerValue`  — 已确认的外部值（同步自 `modelValue`，变更时触发表单校验）
+ * - `draftValue`  — 弹出层中的临时草稿值，仅在确认后同步到 `innerValue`
+ * - `onChange`    — 草稿变更回调，同时触发自定义 `onChange` 逻辑
+ * - `onConfirm`   — 确认回调：若草稿值与当前值不同则 emit modelValue 更新及 change 事件
+ * - `onVisibleHook` — 动画生命周期钩子，支持 `resettable` 模式下关闭时重置草稿值
+ */
+export declare function useFormPopout(props: UseFormPopoutProps, emit: UseFormPopoutEmits, options?: {
+    onChange?: (...args: any[]) => void;
+    onConfirmBefore?: () => any;
+}): {
+    innerVisible: import("vue").ModelRef<boolean | undefined, PropertyKey, boolean | undefined, boolean | undefined>;
+    innerValue: import("vue").Ref<any, any>;
+    draftValue: import("vue").Ref<any, any>;
+    onChange: (value: any, ...args: any[]) => void;
+    onConfirm: (showConfirm?: boolean) => void;
+    onVisibleHook: (name: MotionHookName, el: Element) => void;
+};

package/components/popout/useFormPopout.js

@@ -0,0 +1,70 @@
+import { omit } from "../../utils/object.js";
+import "../../utils/index.js";
+import { useFormItemContext } from "../form/common.js";
+import { computed, ref, useModel, watch } from "vue";
+//#region packages/sard/components/popout/useFormPopout.ts
+function omitFormPopoutProps(props) {
+	return computed(() => omit(props, [
+		"visible",
+		"title",
+		"resettable",
+		"validateEvent",
+		"showConfirm"
+	]));
+}
+/**
+* 表单 Popout 组合式函数
+*
+* 统一管理所有表单类 popout 组件（如 select-popout、picker-popout、datetime-picker-popout 等）的通用逻辑：
+* - `innerVisible` — 弹出层显示/隐藏状态（双向绑定 `visible`）
+* - `innerValue`  — 已确认的外部值（同步自 `modelValue`，变更时触发表单校验）
+* - `draftValue`  — 弹出层中的临时草稿值，仅在确认后同步到 `innerValue`
+* - `onChange`    — 草稿变更回调，同时触发自定义 `onChange` 逻辑
+* - `onConfirm`   — 确认回调：若草稿值与当前值不同则 emit modelValue 更新及 change 事件
+* - `onVisibleHook` — 动画生命周期钩子，支持 `resettable` 模式下关闭时重置草稿值
+*/
+function useFormPopout(props, emit, options = {}) {
+	const formItemContext = useFormItemContext();
+	const visible = useModel(props, "visible");
+	const innerValue = ref(props.modelValue);
+	watch(() => props.modelValue, () => {
+		innerValue.value = props.modelValue;
+		if (props.validateEvent) formItemContext?.onChange();
+	});
+	const draftValue = ref(props.modelValue);
+	watch(innerValue, () => {
+		draftValue.value = innerValue.value;
+	});
+	let restArgs = [];
+	const onChange = (value, ...args) => {
+		draftValue.value = value;
+		restArgs = args;
+		options.onChange?.(value, ...args);
+	};
+	const onConfirm = (showConfirm = true) => {
+		if (showConfirm) emit("confirm");
+		const extraArgs = options.onConfirmBefore?.();
+		if (extraArgs) restArgs = extraArgs;
+		if (draftValue.value !== innerValue.value) {
+			innerValue.value = draftValue.value;
+			const args = [innerValue.value, ...restArgs];
+			emit("update:modelValue", ...args);
+			emit("change", ...args);
+		}
+	};
+	const onVisibleHook = (name, el) => {
+		if (props.resettable && name === "after-leave" && draftValue.value !== innerValue.value) draftValue.value = innerValue.value;
+		emit("visible-hook", name, el);
+		emit(name, el);
+	};
+	return {
+		innerVisible: visible,
+		innerValue,
+		draftValue,
+		onChange,
+		onConfirm,
+		onVisibleHook
+	};
+}
+//#endregion
+export { omitFormPopoutProps, useFormPopout };

package/components/popout-input/common.d.ts

@@ -0,0 +1,26 @@
+import { type DefaultProps } from '../config';
+import { type InputProps } from '../input/common';
+export interface PopoutInputProps {
+    modelValue?: string | number;
+    placeholder?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    loading?: boolean;
+    multiline?: boolean;
+    inputProps?: InputProps;
+    valueOnClear?: () => any;
+}
+export declare const defaultPopoutInputProps: DefaultProps<PopoutInputProps>;
+export interface PopoutInputEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'clear'): void;
+}
+export interface PopoutInputSlots {
+    prepend?(): any;
+    append?(): any;
+    arrow?(): any;
+    default?(): any;
+}

package/components/popout-input/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/popout-input/common.ts
+const defaultPopoutInputProps = {};
+//#endregion
+export { defaultPopoutInputProps };

package/components/popout-input/index.css

@@ -0,0 +1 @@
+:root{--s-popout-input-arrow-font-size:var(--s-font-size);--s-popout-input-arrow-color:var(--s-border-color);--s-popout-input-opacity-active:var(--s-opacity-active);--s-popout-input-append-gap:var(--s-size-2xs);--s-popout-input-loading-size:var(--s-font-size-lg);--s-popout-input-loading-color:var(--s-text-color-fourth)}.s-popout-input--down{opacity:var(--s-popout-input-opacity-active)}.s-popout-input--readonly,.s-popout-input--loading{cursor:unset}.s-popout-input--disabled{cursor:not-allowed}.s-popout-input__append{display:flex;align-items:center;gap:var(--s-popout-input-append-gap)}.s-popout-input__loading{font-size:var(--s-popout-input-loading-size);color:var(--s-popout-input-loading-color)}.s-popout-input__seal{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;cursor:pointer}.s-popout-input__arrow{font-size:var(--s-popout-input-arrow-font-size);color:var(--s-popout-input-arrow-color)}:root[dir=rtl] .s-popout-input__arrow{transform:rotateY(180deg)}