sard 1.1.0 → 1.2.1

package/README.md

@@ -127,8 +127,7 @@ npm run publish
 8. 打包组件库 `npm run build:sard`
 9. 发布到 npm `npm run publish:sard`
 10. 推送代码和标签 `npm run push`
-11. 打包文档 `npm run build:site`
-12. 部署文档 `npm run deploy`
+11. 打包&部署文档 `npm run deploy`
 
 ## 新增组件流程
 

package/all-components.js

@@ -113,6 +113,7 @@ import { Table } from "./components/table/index.js";
 import { Tab, Tabs } from "./components/tabs/index.js";
 import { Tag } from "./components/tag/index.js";
 import { Text } from "./components/text/index.js";
+import { TextShrink } from "./components/text-shrink/index.js";
 import { Timeline, TimelineItem } from "./components/timeline/index.js";
 import { Toast } from "./components/toast/index.js";
 import { Tree, TreeBranch, TreeNode } from "./components/tree/index.js";
@@ -273,6 +274,7 @@ var all_components_default = {
 	Tabs,
 	Tag,
 	Text,
+	TextShrink,
 	Timeline,
 	TimelineItem,
 	Toast,

package/components/action-sheet/action-sheet-item.vue.js

@@ -57,7 +57,7 @@ var action_sheet_item_default = /*@__PURE__*/ defineComponent({
 					unref(bem).is("loading", props.loading)
 				]),
 				onClick
-			}, [!props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
+			}, [!props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
 				class: normalizeClass(unref(bem).e("item-label")),
 				style: normalizeStyle(labelStyle.value)
 			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(props.label), 1)])], 6), props.description || slots.description ? (openBlock(), createElementBlock("div", {

package/components/action-sheet/common.d.ts

@@ -1,5 +1,5 @@
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 import { type UseActionSheetReturn } from './context';
 export interface ActionSheetBeforeClose {
     (type: 'close' | 'cancel', loading: {

package/components/button/button.vue.js

@@ -110,7 +110,7 @@ var button_default = /*@__PURE__*/ defineComponent({
 			}, [__props.loading ? (openBlock(), createBlock(loading_default, {
 				key: 0,
 				type: __props.loadingType
-			}, null, 8, ["type"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+			}, null, 8, ["type"])) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
 		};
 	}
 });

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

@@ -1,7 +1,7 @@
 import { type CalendarProps } from '../calendar/common';
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface CalendarPopoutProps extends FormPopoutProps, CalendarProps {
 }
 export declare const defaultCalendarPopoutProps: DefaultProps<CalendarPopoutProps>;

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

@@ -1,7 +1,7 @@
 import { type CascaderOption, type CascaderProps } from '../cascader/common';
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface CascaderPopoutProps extends FormPopoutProps, CascaderProps {
 }
 export declare const defaultCascaderPopoutProps: DefaultProps<CascaderPopoutProps>;

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

@@ -1,7 +1,7 @@
 import { type CheckboxGroupProps } from '../checkbox/common';
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface CheckboxPopoutProps extends FormPopoutProps, CheckboxGroupProps {
     searchable?: boolean;
     filterPlaceholder?: string;

package/components/color-picker-popout/common.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
 import { type ColorPickerProps } from '../color-picker/common';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface ColorPickerPopoutProps extends FormPopoutProps, ColorPickerProps {
 }
 export declare const defaultColorPickerPopoutProps: DefaultProps<ColorPickerPopoutProps>;

package/components/crop-image/common.d.ts

@@ -1,5 +1,5 @@
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface CropImageProps {
     visible?: boolean;
     url?: string;

package/components/danmaku/index.css

@@ -1 +1 @@
-:root{--s-danmaku-row-height:34px}.s-danmaku{position:relative;overflow:hidden}.s-danmaku__track{position:relative;height:var(--s-danmaku-row-height)}.s-danmaku__item{position:absolute;top:50%;left:0;white-space:nowrap;will-change:transform;transform:translate3d(100vw, -50%, 0)}:root[dir=rtl] .s-danmaku__item{transform:translate3d(-100vw, -50%, 0)}
+:root{--s-danmaku-row-height:34px}.s-danmaku{position:relative;overflow:hidden}.s-danmaku__track{position:relative;height:var(--s-danmaku-row-height)}.s-danmaku__item{position:absolute;top:50%;left:0;white-space:nowrap;will-change:transform;transform:translate3d(100vw, -50%, 0);opacity:0;animation:s-danmaku-item-reveal .12s linear .15s forwards}:root[dir=rtl] .s-danmaku__item{transform:translate3d(-100vw, -50%, 0)}@keyframes s-danmaku-item-reveal{to{opacity:1}}

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

@@ -1,7 +1,7 @@
 import { type DatetimePickerProps, type DatetimePickerSlots } from '../datetime-picker/common';
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface DatetimePickerPopoutProps extends FormPopoutProps, DatetimePickerProps {
 }
 export declare const defaultDatetimePickerPopoutProps: DefaultProps<DatetimePickerPopoutProps>;

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

@@ -1,7 +1,7 @@
 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';
+import type { MotionEmits } from '../motion/common';
 export interface DatetimeRangePickerPopoutProps extends FormPopoutProps, DatetimeRangePickerProps {
 }
 export declare const defaultDatetimeRangePickerPopoutProps: DefaultProps<DatetimeRangePickerPopoutProps>;

package/components/descriptions/common.d.ts

@@ -14,21 +14,26 @@ export interface DescriptionsSlots {
 }
 export interface DescriptionsEmits {
 }
+export interface DescriptionsItemMeta {
+    colspan: () => number;
+    rowspan: () => number;
+}
 export interface DescriptionsContext {
     bordered?: boolean;
     colon?: boolean;
     labelWidth?: string;
     labelAlign?: DescriptionsAlign;
+    /** 注册一个描述项，返回注销函数 */
+    registerItem: (meta: DescriptionsItemMeta) => () => void;
+    /** 获取某个描述项内容格的列跨度 */
+    getContentSpan: (meta: DescriptionsItemMeta) => number | undefined;
 }
 export declare const descriptionsContextKey: InjectionKey<DescriptionsContext>;
 export interface DescriptionsItemProps {
     label?: string;
     colspan?: number;
     rowspan?: number;
-    labelWidth?: string;
     labelAlign?: DescriptionsAlign;
-    /** @internal set by Descriptions for last item in incomplete rows */
-    contentColspan?: number;
 }
 export declare const defaultDescriptionsItemProps: DefaultProps<DescriptionsItemProps>;
 export interface DescriptionsItemSlots {

package/components/descriptions/descriptions-item.vue.d.ts

@@ -3,10 +3,8 @@ type __VLS_Slots = DescriptionsItemSlots;
 declare const __VLS_base: import("vue").DefineComponent<DescriptionsItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DescriptionsItemProps> & Readonly<{}>, {
     label: string;
     colspan: number;
-    labelWidth: string;
     labelAlign: import("./common").DescriptionsAlign;
     rowspan: number;
-    contentColspan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/components/descriptions/descriptions-item.vue.js

@@ -1,9 +1,7 @@
 import { createBem } from "../../utils/bem.js";
 import { defaultDescriptionsItemProps, descriptionsContextKey } from "./common.js";
-import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, onUnmounted, openBlock, renderSlot, toDisplayString } from "vue";
 //#region packages/sard/components/descriptions/descriptions-item.vue
-const _hoisted_1 = ["rowspan"];
-const _hoisted_2 = ["colspan", "rowspan"];
 var descriptions_item_default = /*@__PURE__*/ defineComponent({
 	__name: "descriptions-item",
 	props: /*@__PURE__*/ mergeDefaults({
@@ -19,17 +17,9 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 			type: Number,
 			required: false
 		},
-		labelWidth: {
-			type: String,
-			required: false
-		},
 		labelAlign: {
 			type: String,
 			required: false
-		},
-		contentColspan: {
-			type: Number,
-			required: false
 		}
 	}, defaultDescriptionsItemProps),
 	setup(__props) {
@@ -39,15 +29,27 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 		if (!context) throw new Error("DescriptionsItem must be included in Descriptions.");
 		const colspan = computed(() => props.colspan ?? 1);
 		const rowspan = computed(() => props.rowspan ?? 1);
-		const contentColspan = computed(() => props.contentColspan ?? colspan.value * 2 - 1);
-		const effectiveLabelWidth = computed(() => props.labelWidth ?? context.labelWidth);
+		const meta = {
+			colspan: () => colspan.value,
+			rowspan: () => rowspan.value
+		};
+		onUnmounted(context.registerItem(meta));
+		const contentSpan = computed(() => {
+			return context.getContentSpan(meta) ?? colspan.value * 2 - 1;
+		});
 		const effectiveLabelAlign = computed(() => props.labelAlign ?? context.labelAlign);
 		const labelStyle = computed(() => {
 			const style = {};
-			if (effectiveLabelWidth.value) style.width = effectiveLabelWidth.value;
+			if (context.labelWidth) style.width = context.labelWidth;
 			if (effectiveLabelAlign.value) style.textAlign = effectiveLabelAlign.value;
+			if (rowspan.value > 1) style.gridRow = `span ${rowspan.value}`;
 			return Object.keys(style).length ? style : void 0;
 		});
+		const contentStyle = computed(() => {
+			const style = { "--s-descriptions-content-span": String(contentSpan.value) };
+			if (rowspan.value > 1) style.gridRow = `span ${rowspan.value}`;
+			return style;
+		});
 		const labelCellClass = computed(() => {
 			return [
 				bem.e("item-label"),
@@ -59,16 +61,13 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 			return [bem.e("item-content"), bem.is("bordered", context.bordered)];
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("td", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
 				class: normalizeClass(labelCellClass.value),
-				colspan: "1",
-				rowspan: rowspan.value,
 				style: normalizeStyle(labelStyle.value)
-			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 14, _hoisted_1), createElementVNode("td", {
+			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 6), createElementVNode("div", {
 				class: normalizeClass(contentCellClass.value),
-				colspan: contentColspan.value,
-				rowspan: rowspan.value
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_2)], 64);
+				style: normalizeStyle(contentStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6)], 64);
 		};
 	}
 });

package/components/descriptions/descriptions.vue.js

@@ -1,7 +1,6 @@
 import { createBem } from "../../utils/bem.js";
-import { flatVNode } from "../../utils/vnode.js";
 import { defaultDescriptionsProps, descriptionsContextKey } from "./common.js";
-import { Fragment, cloneVNode, computed, createBlock, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, renderList, resolveDynamicComponent, toRef, useSlots } from "vue";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, toRef } from "vue";
 //#region packages/sard/components/descriptions/descriptions.vue
 var descriptions_default = /*@__PURE__*/ defineComponent({
 	__name: "descriptions",
@@ -30,24 +29,36 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const bem = createBem("descriptions");
-		provide(descriptionsContextKey, reactive({
-			bordered: toRef(() => props.bordered),
-			colon: toRef(() => props.colon),
-			labelWidth: toRef(() => props.labelWidth),
-			labelAlign: toRef(() => props.labelAlign)
-		}));
-		const slots = useSlots();
 		const columns = computed(() => props.columns ?? 1);
-		const rows = computed(() => {
-			if (!slots.default) return [];
-			const children = flatVNode(slots.default());
+		const items = [];
+		const registeredVersion = ref(0);
+		function registerItem(meta) {
+			items.push(meta);
+			registeredVersion.value++;
+			return () => {
+				const index = items.indexOf(meta);
+				if (index !== -1) {
+					items.splice(index, 1);
+					registeredVersion.value++;
+				}
+			};
+		}
+		/**
+		* 计算每个描述项内容格的列跨度。
+		* 一个描述项占 `colspan * 2` 列（标签 1 列 + 内容 `colspan * 2 - 1` 列），
+		* 最后一项的内容会填满当前行剩余列。
+		*/
+		const contentSpans = computed(() => {
+			registeredVersion.value;
+			const spans = /* @__PURE__ */ new Map();
+			const columnCount = columns.value;
 			const result = [];
 			let temp = [];
-			let count = columns.value;
+			let count = columnCount;
 			const rowspanTemp = [];
-			children.forEach((node, index) => {
-				const nodeColspan = node.props?.colspan ?? 1;
-				const nodeRowspan = node.props?.rowspan ?? 1;
+			items.forEach((meta, index) => {
+				const nodeColspan = meta.colspan();
+				const nodeRowspan = meta.rowspan();
 				let rowNo = result.length;
 				rowspanTemp[rowNo] ||= 0;
 				if (nodeRowspan > 1) for (let i = 1; i < nodeRowspan; i++) {
@@ -60,28 +71,42 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 					if (count <= 0) {
 						result.push(temp);
 						temp = [];
-						count = columns.value;
+						count = columnCount;
 						rowNo++;
 					}
 				}
-				if (index === children.length - 1) {
-					temp.push(cloneVNode(node, { contentColspan: nodeColspan < count ? count * 2 - 1 : void 0 }));
+				if (index === items.length - 1) {
+					spans.set(meta, (nodeColspan < count ? count : nodeColspan) * 2 - 1);
+					temp.push(index);
 					result.push(temp);
 					return;
 				}
 				if (nodeColspan < count) {
 					count -= nodeColspan;
-					temp.push(node);
+					spans.set(meta, nodeColspan * 2 - 1);
+					temp.push(index);
 				} else {
 					const span = Math.min(nodeColspan, count);
-					temp.push(cloneVNode(node, { contentColspan: span === nodeColspan ? void 0 : span * 2 - 1 }));
+					spans.set(meta, span * 2 - 1);
+					temp.push(index);
 					result.push(temp);
-					count = columns.value;
+					count = columnCount;
 					temp = [];
 				}
 			});
-			return result;
+			return spans;
 		});
+		function getContentSpan(meta) {
+			return contentSpans.value.get(meta);
+		}
+		provide(descriptionsContextKey, reactive({
+			bordered: toRef(() => props.bordered),
+			colon: toRef(() => props.colon),
+			labelWidth: toRef(() => props.labelWidth),
+			labelAlign: toRef(() => props.labelAlign),
+			registerItem,
+			getContentSpan
+		}));
 		const descriptionsClass = computed(() => {
 			return [
 				bem.b(),
@@ -89,12 +114,15 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 				bem.has("colon", props.colon)
 			];
 		});
+		const descriptionsStyle = computed(() => {
+			const labelWidth = props.labelWidth;
+			return { gridTemplateColumns: labelWidth ? `repeat(${columns.value}, ${labelWidth} minmax(0, 1fr))` : `repeat(${columns.value * 2}, minmax(0, 1fr))` };
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("table", { class: normalizeClass(descriptionsClass.value) }, [createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, rowIndex) => {
-				return openBlock(), createElementBlock("tr", { key: rowIndex }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (child, colIndex) => {
-					return openBlock(), createBlock(resolveDynamicComponent(child), { key: colIndex });
-				}), 128))]);
-			}), 128))])], 2);
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(descriptionsClass.value),
+				style: normalizeStyle(descriptionsStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
 		};
 	}
 });

package/components/descriptions/index.css

@@ -1 +1 @@
-:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color)}.s-descriptions{width:100%;table-layout:fixed;border-collapse:collapse}.s-descriptions__item-label{padding-bottom:var(--s-descriptions-item-padding-y);padding-inline-end:var(--s-descriptions-item-padding-x);color:var(--s-descriptions-label-color);font-size:var(--s-descriptions-label-font-size);word-break:break-word}.s-descriptions__item-label:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border:var(--s-border-width) solid var(--s-descriptions-border-color);background:var(--s-descriptions-label-bg)}.s-descriptions__item-label:is(.has-colon)::after{content:":"}.s-descriptions__item-content{padding-bottom:var(--s-descriptions-item-padding-y)}.s-descriptions__item-content:not(:last-child){padding-inline-end:var(--s-descriptions-item-padding-x)}.s-descriptions__item-content{color:var(--s-descriptions-content-color);font-size:var(--s-descriptions-content-font-size);word-break:break-word}.s-descriptions__item-content:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border:var(--s-border-width) solid var(--s-descriptions-border-color)}.s-descriptions tr:last-child .s-descriptions__item-label:not(.is-bordered),.s-descriptions tr:last-child .s-descriptions__item-content:not(.is-bordered){padding-bottom:0}
+:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color)}.s-descriptions{display:grid;width:100%;column-gap:var(--s-descriptions-item-padding-x);row-gap:var(--s-descriptions-item-padding-y)}.s-descriptions:is(.is-bordered){column-gap:0;row-gap:0;border-block-start:var(--s-border-width) solid var(--s-descriptions-border-color);border-inline-start:var(--s-border-width) solid var(--s-descriptions-border-color)}.s-descriptions__item-label{color:var(--s-descriptions-label-color);font-size:var(--s-descriptions-label-font-size);word-break:break-word}.s-descriptions__item-label:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color);background:var(--s-descriptions-label-bg)}.s-descriptions__item-label:is(.has-colon)::after{content:":"}.s-descriptions__item-content{grid-column:span var(--s-descriptions-content-span, 1);color:var(--s-descriptions-content-color);font-size:var(--s-descriptions-content-font-size);word-break:break-word}.s-descriptions__item-content:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color)}

package/components/dialog/common.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultProps } from '../config';
 import { type ButtonProps } from '../button';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export type DialogBeforeClose = (type: 'close' | 'cancel' | 'confirm', loading: {
     readonly cancel: boolean;
     readonly confirm: boolean;

package/components/dnd/dnd-item.vue.js

@@ -1,7 +1,6 @@
 import { createBem } from "../../utils/bem.js";
-import { OnlyChild } from "../../utils/vnode.js";
 import { dndContextKey, dndItemContextKey } from "./common.js";
-import { computed, createBlock, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, unref, watchPostEffect, withCtx } from "vue";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, onUpdated, openBlock, provide, ref, renderSlot, shallowRef, useAttrs, useTemplateRef, watchPostEffect } from "vue";
 //#region packages/sard/components/dnd/dnd-item.vue
 var dnd_item_default = /*@__PURE__*/ defineComponent({
 	__name: "dnd-item",
@@ -14,9 +13,19 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 		const bem = createBem("dnd-item");
 		const dndContext = inject(dndContextKey);
 		if (!dndContext) throw new Error("DndItem must be included in Dnd.");
+		const wrapperRef = useTemplateRef("wrapperRef");
 		const elRef = shallowRef(null);
-		const onUpdate = (el) => {
+		const attrs = useAttrs();
+		let forwardedClass = "";
+		const syncElRef = () => {
+			const wrapper = wrapperRef.value;
+			const el = wrapper?.firstElementChild ?? wrapper ?? null;
 			elRef.value = el;
+			if (!el) return;
+			const next = normalizeClass(attrs.class);
+			for (const name of forwardedClass.split(" ")) if (name) el.classList.remove(name);
+			for (const name of next.split(" ")) if (name) el.classList.add(name);
+			forwardedClass = next;
 		};
 		let dropItemInfo = null;
 		let currentIndex = -1;
@@ -26,8 +35,10 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 			return elRef.value.getBoundingClientRect();
 		};
 		onMounted(() => {
+			syncElRef();
 			dndContext.addRectItem(getNodeRect);
 		});
+		onUpdated(syncElRef);
 		onBeforeUnmount(() => {
 			dndContext.removeRectItem(getNodeRect);
 		});
@@ -117,13 +128,12 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 		});
 		__expose({});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(OnlyChild), {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
 				class: normalizeClass(dndItemClass.value),
-				onUpdate
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["class"]);
+				style: { "display": "contents" }
+			}, [renderSlot(_ctx.$slots, "default")], 2);
 		};
 	}
 });

package/components/dnd/index.css

@@ -1 +1 @@
-.s-dnd-item{position:relative}.s-dnd-item--active{z-index:1;box-shadow:var(--s-box-shadow-secondary)}.s-dnd-item--passive{transition:transform var(--s-duration)}.s-dnd-handle{cursor:pointer;-webkit-user-select:none;user-select:none}.s-dnd-handle--dragging{touch-action:none}
+.s-dnd-item{border-radius:inherit}.s-dnd-item>*{position:relative}.s-dnd-item--active>*{z-index:1;box-shadow:var(--s-box-shadow-secondary)}.s-dnd-item--passive>*{transition:transform var(--s-duration)}.s-dnd-handle{cursor:pointer;-webkit-user-select:none;user-select:none}.s-dnd-handle--dragging{touch-action:none}

package/components/dropdown/common.d.ts

@@ -1,6 +1,6 @@
 import { type InjectionKey } from 'vue';
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface DropdownProps {
     direction?: 'down' | 'up';
     disabled?: boolean;