@xihan-ui/vue 4.2.0 → 5.1.0

package/dist/components/field-array/field-array.d.ts

@@ -1,11 +1,21 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { FieldArrayApi, FieldArrayCellSlotData, FieldArrayColumn, FieldArrayItem, FieldArrayLayout, FieldArraySchema, FieldArrayTranslations, FormPath } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
-import { FieldArrayApi, FieldArraySchema, FieldArrayTranslations, FormPath } from "@xihan-ui/headless";
 //#region src/components/field-array/field-array.d.ts
 type FieldArrayProps = FieldArraySchema['props'];
 /** 默认插槽的载荷：逐行投影与整份值、行数与上下限状态，以及整份替换、增删、移动的动作。 */
 type FieldArrayRootSlotProps = Pick<FieldArrayApi, 'items' | 'value' | 'count' | 'empty' | 'atMin' | 'atMax' | 'canAdd' | 'setValue' | 'add' | 'insert' | 'remove' | 'move' | 'moveUp' | 'moveDown'>;
+/** item-content 插槽的载荷：这一行。 */
+interface FieldArrayItemContentSlotProps {
+  item: FieldArrayItem;
+}
+/** item-cell 插槽的载荷：所在的行与列。 */
+type FieldArrayItemCellSlotProps = FieldArrayCellSlotData;
 declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<unknown[]>;
   };
@@ -22,6 +32,11 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
     type: PropType<() => unknown>;
   };
   movable: BooleanConstructor;
+  /** 表格排布下行尾把手钉在末端侧，缺省 true；关掉时把手随行一起横向滚动。 */
+  stickyActions: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -34,6 +49,14 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
     type: BooleanConstructor;
     default: undefined;
   };
+  /** 排布：list（缺省）一行一条纵向堆叠；table 是 role=table 的表格，表头与各行共用一套列宽。 */
+  layout: {
+    type: PropType<FieldArrayLayout>;
+  };
+  /** 表格排布的各列，只在 table 排布下生效；顺序即列序。 */
+  columns: {
+    type: PropType<FieldArrayColumn[]>;
+  };
   name: {
     type: PropType<FormPath>;
   };
@@ -46,6 +69,10 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
   'value-change': (_details: PayloadOf<FieldArrayProps, "onValueChange">) => true;
   'update:value': (_value: PayloadOf<FieldArrayProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<unknown[]>;
   };
@@ -62,6 +89,11 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
     type: PropType<() => unknown>;
   };
   movable: BooleanConstructor;
+  /** 表格排布下行尾把手钉在末端侧，缺省 true；关掉时把手随行一起横向滚动。 */
+  stickyActions: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -74,6 +106,14 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
     type: BooleanConstructor;
     default: undefined;
   };
+  /** 排布：list（缺省）一行一条纵向堆叠；table 是 role=table 的表格，表头与各行共用一套列宽。 */
+  layout: {
+    type: PropType<FieldArrayLayout>;
+  };
+  /** 表格排布的各列，只在 table 排布下生效；顺序即列序。 */
+  columns: {
+    type: PropType<FieldArrayColumn[]>;
+  };
   name: {
     type: PropType<FormPath>;
   };
@@ -88,9 +128,50 @@ declare const XhFieldArrayRoot: import("vue").DefineComponent<import("vue").Extr
   disabled: boolean;
   readOnly: boolean;
   movable: boolean;
+  stickyActions: boolean;
 }, SlotsType<{
   default?: (props: FieldArrayRootSlotProps) => VNode[];
+  /** 不写默认插槽时每一行的作者内容（列表排布），载荷是这一行。 */
+  'item-content'?: (props: FieldArrayItemContentSlotProps) => VNode[];
+  /** 不写默认插槽时每一格的作者内容（表格排布），载荷是所在的行与列。 */
+  'item-cell'?: (props: FieldArrayItemCellSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhFieldArrayTable: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhFieldArrayHeader: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhFieldArrayColumnHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 列 id，与 columns 里的 id 对应。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 列 id，与 columns 里的 id 对应。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhFieldArrayItemCell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 列 id，与 columns 里的 id 对应。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 列 id，与 columns 里的 id 对应。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFieldArrayItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   index: {
     type: PropType<number | string>;
@@ -120,6 +201,10 @@ declare const XhFieldArrayAddTrigger: import("vue").DefineComponent<{}, () => VN
 declare const XhFieldArrayItemDeleteTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 拖动把手：按住拖这一行换位，只接指针、不占 Tab 位（键盘用上移、下移）。不换序时收起。 */
+declare const XhFieldArrayItemDragTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFieldArrayMoveUpTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -127,5 +212,5 @@ declare const XhFieldArrayMoveDownTrigger: import("vue").DefineComponent<{}, ()
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { FieldArrayRootSlotProps, XhFieldArrayAddTrigger, XhFieldArrayItem, XhFieldArrayItemAction, XhFieldArrayItemContent, XhFieldArrayItemDeleteTrigger, XhFieldArrayItemLabel, XhFieldArrayMoveDownTrigger, XhFieldArrayMoveUpTrigger, XhFieldArrayRoot };
+export { FieldArrayItemCellSlotProps, FieldArrayItemContentSlotProps, FieldArrayRootSlotProps, XhFieldArrayAddTrigger, XhFieldArrayColumnHeader, XhFieldArrayHeader, XhFieldArrayItem, XhFieldArrayItemAction, XhFieldArrayItemCell, XhFieldArrayItemContent, XhFieldArrayItemDeleteTrigger, XhFieldArrayItemDragTrigger, XhFieldArrayItemLabel, XhFieldArrayMoveDownTrigger, XhFieldArrayMoveUpTrigger, XhFieldArrayRoot, XhFieldArrayTable };
 //# sourceMappingURL=field-array.d.ts.map

package/dist/components/field-array/field-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-array.d.ts","names":[],"sources":["../../../src/components/field-array/field-array.ts"],"mappings":";;;;KAiBK,kBAAkB;;KAGX,0BAA0B,KACpC;cAiBW,gCAAgB,8BAAA;;IAKD,MAAA;;;IACO,MAAA;;;;;;;;;IAGC,MAAA;;;;;;;;;;;;;;;;IAKC,MAAA,SAAS;;;IACV,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;IAfX,MAAA;;;IACO,MAAA;;;;;;;;;IAGC,MAAA;;;;;;;;;;;;;;;;IAKC,MAAA,SAAS;;;IACV,MAAA,SAAS,QAAQ;;;;;;;;;;;EAQvC,WAAC,OAAO,4BAA4B;kCA4BhD;cAEW,gCAAgB,8BAAA;;IAIU,MAAA;;;;;;;IAAA,MAAA;;;MAQrC,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAOhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6CAA6B,0BAAA,oBAAA,4BAAA;;8BAOxC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAOpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAOtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"field-array.d.ts","names":[],"sources":["../../../src/components/field-array/field-array.ts"],"mappings":";;;;KAoBK,kBAAkB;;KAGX,0BAA0B,KACpC;;UAkBe;EACf,MAAM;;;KAII,8BAA8B;cAE7B,gCAAgB,8BAAA;;;;;;IAOD,MAAA;;;IACO,MAAA;;;;;;;;;IAGC,MAAA;;;;;;;;;;;;;;;;;;;;;;IAQN,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACV,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;IArBX,MAAA;;;IACO,MAAA;;;;;;;;;IAGC,MAAA;;;;;;;;;;;;;;;;;;;;;;IAQN,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACV,MAAA,SAAS,QAAQ;;;;;;;;;;;;EAQrC,WAAC,OAAO,4BAA4B;;EAE/B,kBAAC,OAAO,mCAAmC;;EAE9C,eAAC,OAAO,gCAAgC;kCA8BxD;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAY5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,8BAAA;;;;;;;;;;;;;;MAYnC,oDAAA;cAEW,oCAAoB,8BAAA;;;;;;;;;;;;;;MAW/B,oDAAA;cAEW,gCAAgB,8BAAA;;IAIU,MAAA;;;;;;;IAAA,MAAA;;;MAQrC,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAOhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6CAA6B,0BAAA,oBAAA,4BAAA;;8BAOxC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAOtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAOpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAOtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/field-array/field-array.js

@@ -1,19 +1,29 @@
-import { withXhConfig } from "../../config/config.js";
 import { useOptionalFormContext } from "../form/context.js";
+import { renderStructure } from "../../runtime/structure.js";
+import { withXhConfig } from "../../config/config.js";
 import { useFormControlProps } from "../form/use-form-control.js";
+import { useFieldGroupWiring, useFieldLabelWiring } from "../field/use-field-control.js";
 import { provideFieldArray, provideFieldArrayItem, useFieldArrayContext, useFieldArrayItemContext } from "./context.js";
 import { useFieldArray } from "./use-field-array.js";
+import { fieldArrayStructure } from "@xihan-ui/headless";
 import { computed, defineComponent, h } from "vue";
 //#region src/components/field-array/field-array.ts
 const XhFieldArrayRoot = defineComponent({
 	name: "XhFieldArrayRoot",
 	props: {
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
 		value: { type: Array },
 		defaultValue: { type: Array },
 		min: { type: Number },
 		max: { type: Number },
 		createItem: { type: Function },
 		movable: Boolean,
+		/** 表格排布下行尾把手钉在末端侧，缺省 true；关掉时把手随行一起横向滚动。 */
+		stickyActions: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -26,6 +36,10 @@ const XhFieldArrayRoot = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
+		/** 排布：list（缺省）一行一条纵向堆叠；table 是 role=table 的表格，表头与各行共用一套列宽。 */
+		layout: { type: String },
+		/** 表格排布的各列，只在 table 排布下生效；顺序即列序。 */
+		columns: { type: Array },
 		name: { type: [String, Array] },
 		translations: { type: Object }
 	},
@@ -45,7 +59,10 @@ const XhFieldArrayRoot = defineComponent({
 		return () => h("div", {
 			...ctx.api.value.getRootProps(),
 			ref: ctx.rootRef
-		}, slots.default?.({
+		}, !slots.default ? renderDefaultStructure(ctx.api.value, {
+			"item-content": slots["item-content"],
+			"item-cell": slots["item-cell"]
+		}) : slots.default({
 			items: ctx.api.value.items,
 			value: ctx.api.value.value,
 			count: ctx.api.value.count,
@@ -63,6 +80,58 @@ const XhFieldArrayRoot = defineComponent({
 		}));
 	}
 });
+const XhFieldArrayTable = defineComponent({
+	name: "XhFieldArrayTable",
+	setup(_, { slots }) {
+		const fieldWiring = useFieldGroupWiring();
+		const fieldLabel = useFieldLabelWiring();
+		const ctx = useFieldArrayContext();
+		return () => {
+			const props = ctx.api.value.getTableProps();
+			return h("div", ctx.api.value.layout === "table" ? fieldLabel.value({
+				...fieldWiring.value,
+				...props
+			}) : props, slots.default?.());
+		};
+	}
+});
+const XhFieldArrayHeader = defineComponent({
+	name: "XhFieldArrayHeader",
+	setup(_, { slots }) {
+		const ctx = useFieldArrayContext();
+		return () => h("div", ctx.api.value.getHeaderProps(), slots.default?.());
+	}
+});
+const XhFieldArrayColumnHeader = defineComponent({
+	name: "XhFieldArrayColumnHeader",
+	props: { 
+	/** 列 id，与 columns 里的 id 对应。 */
+value: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const ctx = useFieldArrayContext();
+		return () => h("div", ctx.api.value.getColumnHeaderProps({ value: props.value }), slots.default?.() ?? ctx.api.value.columns.find((column) => column.id === props.value)?.label);
+	}
+});
+const XhFieldArrayItemCell = defineComponent({
+	name: "XhFieldArrayItemCell",
+	props: { 
+	/** 列 id，与 columns 里的 id 对应。 */
+value: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const ctx = useFieldArrayContext();
+		const { item } = useFieldArrayItemContext();
+		return () => h("div", ctx.api.value.getItemCellProps({
+			index: item.value.index,
+			value: props.value
+		}), slots.default?.());
+	}
+});
 const XhFieldArrayItem = defineComponent({
 	name: "XhFieldArrayItem",
 	props: { index: {
@@ -116,6 +185,15 @@ const XhFieldArrayItemDeleteTrigger = defineComponent({
 		return () => h("button", ctx.api.value.getItemDeleteTriggerProps(item.value), slots.default?.());
 	}
 });
+/** 拖动把手：按住拖这一行换位，只接指针、不占 Tab 位（键盘用上移、下移）。不换序时收起。 */
+const XhFieldArrayItemDragTrigger = defineComponent({
+	name: "XhFieldArrayItemDragTrigger",
+	setup(_, { slots }) {
+		const ctx = useFieldArrayContext();
+		const { item } = useFieldArrayItemContext();
+		return () => h("button", ctx.api.value.getItemDragTriggerProps(item.value), slots.default?.());
+	}
+});
 const XhFieldArrayMoveUpTrigger = defineComponent({
 	name: "XhFieldArrayMoveUpTrigger",
 	setup(_, { slots }) {
@@ -132,7 +210,33 @@ const XhFieldArrayMoveDownTrigger = defineComponent({
 		return () => h("button", ctx.api.value.getMoveDownTriggerProps(item.value), slots.default?.());
 	}
 });
+/** 结构里的部件 → 部件组件。 */
+const FIELD_ARRAY_PARTS = {
+	"table": XhFieldArrayTable,
+	"header": XhFieldArrayHeader,
+	"column-header": XhFieldArrayColumnHeader,
+	"item": XhFieldArrayItem,
+	"item-label": XhFieldArrayItemLabel,
+	"item-content": XhFieldArrayItemContent,
+	"item-cell": XhFieldArrayItemCell,
+	"item-action": XhFieldArrayItemAction,
+	"add-trigger": XhFieldArrayAddTrigger,
+	"item-delete-trigger": XhFieldArrayItemDeleteTrigger,
+	"item-drag-trigger": XhFieldArrayItemDragTrigger,
+	"move-up-trigger": XhFieldArrayMoveUpTrigger,
+	"move-down-trigger": XhFieldArrayMoveDownTrigger
+};
+/**
+* 未写默认插槽时照 fieldArrayStructure 铺开的整套结构，与 Web Components 不写部件时元素生成的节点出自同一份。
+* 每一行（表格排布下每一格）的内容由 item-content / item-cell 插槽给出，没给时那一格空着。
+*/
+function renderDefaultStructure(api, content) {
+	return renderStructure(fieldArrayStructure(api), FIELD_ARRAY_PARTS, (node) => {
+		if (node.slot?.name === "item-content") return content["item-content"]?.({ item: node.data });
+		if (node.slot?.name === "item-cell") return content["item-cell"]?.(node.data);
+	});
+}
 //#endregion
-export { XhFieldArrayAddTrigger, XhFieldArrayItem, XhFieldArrayItemAction, XhFieldArrayItemContent, XhFieldArrayItemDeleteTrigger, XhFieldArrayItemLabel, XhFieldArrayMoveDownTrigger, XhFieldArrayMoveUpTrigger, XhFieldArrayRoot };
+export { XhFieldArrayAddTrigger, XhFieldArrayColumnHeader, XhFieldArrayHeader, XhFieldArrayItem, XhFieldArrayItemAction, XhFieldArrayItemCell, XhFieldArrayItemContent, XhFieldArrayItemDeleteTrigger, XhFieldArrayItemDragTrigger, XhFieldArrayItemLabel, XhFieldArrayMoveDownTrigger, XhFieldArrayMoveUpTrigger, XhFieldArrayRoot, XhFieldArrayTable };
 
 //# sourceMappingURL=field-array.js.map

package/dist/components/field-array/field-array.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-array.js","names":[],"sources":["../../../src/components/field-array/field-array.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 field array 相关实现。\n\nimport type { FieldArrayApi, FieldArrayItemProps, FieldArraySchema, FieldArrayTranslations, FormPath } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useOptionalFormContext } from '../form/context'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideFieldArray, provideFieldArrayItem, useFieldArrayContext, useFieldArrayItemContext } from './context'\nimport { useFieldArray } from './use-field-array'\n\ntype FieldArrayProps = FieldArraySchema['props']\n\n/** 默认插槽的载荷：逐行投影与整份值、行数与上下限状态，以及整份替换、增删、移动的动作。 */\nexport type FieldArrayRootSlotProps = Pick<\n  FieldArrayApi,\n  | 'items'\n  | 'value'\n  | 'count'\n  | 'empty'\n  | 'atMin'\n  | 'atMax'\n  | 'canAdd'\n  | 'setValue'\n  | 'add'\n  | 'insert'\n  | 'remove'\n  | 'move'\n  | 'moveUp'\n  | 'moveDown'\n>\n\nexport const XhFieldArrayRoot = defineComponent({\n  name: 'XhFieldArrayRoot',\n  // 有 connect 与机器兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    // 缺席值 undefined 表示非受控\n    value: { type: Array as PropType<unknown[]> },\n    defaultValue: { type: Array as PropType<unknown[]> },\n    min: { type: Number },\n    max: { type: Number },\n    createItem: { type: Function as PropType<() => unknown> },\n    movable: Boolean,\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: [String, Array] as PropType<FormPath> },\n    translations: { type: Object as PropType<Partial<FieldArrayTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸数组\n  emits: {\n    'value-change': (_details: PayloadOf<FieldArrayProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<FieldArrayProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FieldArrayRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const form = useOptionalFormContext()\n    const onValueChange: FieldArrayProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const ctx = useFieldArray(withXhConfig('field-array', useFormControlProps(props)) as FieldArrayProps, { onValueChange }, form?.service)\n    provideFieldArray(ctx)\n    // items 里每一项都带 key，作者铺行时直接 :key=\"row.key\"\n    return () => h('div', { ...(ctx.api.value.getRootProps() as Record<string, unknown>), ref: ctx.rootRef }, slots.default?.({\n      items: ctx.api.value.items,\n      value: ctx.api.value.value,\n      count: ctx.api.value.count,\n      empty: ctx.api.value.empty,\n      atMin: ctx.api.value.atMin,\n      atMax: ctx.api.value.atMax,\n      canAdd: ctx.api.value.canAdd,\n      setValue: ctx.api.value.setValue,\n      add: ctx.api.value.add,\n      insert: ctx.api.value.insert,\n      remove: ctx.api.value.remove,\n      move: ctx.api.value.move,\n      moveUp: ctx.api.value.moveUp,\n      moveDown: ctx.api.value.moveDown,\n    }))\n  },\n})\n\nexport const XhFieldArrayItem = defineComponent({\n  name: 'XhFieldArrayItem',\n  props: {\n    // 下标由作者声明，兼收字符串以支持模板里写 index=\"0\"\n    index: { type: [Number, String] as PropType<number | string>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFieldArrayContext()\n    const item = computed<FieldArrayItemProps>(() => ({ index: Math.trunc(Number(props.index)) }))\n    provideFieldArrayItem({ item })\n    return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 行前的行号或名目；纯标注，不与行内的控件建立 for 关联。 */\nexport const XhFieldArrayItemLabel = defineComponent({\n  name: 'XhFieldArrayItemLabel',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('span', ctx.api.value.getItemLabelProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemContent = defineComponent({\n  name: 'XhFieldArrayItemContent',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('div', ctx.api.value.getItemContentProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemAction = defineComponent({\n  name: 'XhFieldArrayItemAction',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('div', ctx.api.value.getItemActionProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayAddTrigger = defineComponent({\n  name: 'XhFieldArrayAddTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    return () => h('button', ctx.api.value.getAddTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemDeleteTrigger = defineComponent({\n  name: 'XhFieldArrayItemDeleteTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getItemDeleteTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayMoveUpTrigger = defineComponent({\n  name: 'XhFieldArrayMoveUpTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getMoveUpTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayMoveDownTrigger = defineComponent({\n  name: 'XhFieldArrayMoveDownTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getMoveDownTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"field-array.js","names":[],"sources":["../../../src/components/field-array/field-array.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 field array 相关实现。\n\nimport type { FieldArrayApi, FieldArrayCellSlotData, FieldArrayColumn, FieldArrayItem, FieldArrayItemProps, FieldArrayLayout, FieldArraySchema, FieldArrayTranslations, FormPath } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { fieldArrayStructure } from '@xihan-ui/headless'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useOptionalFormContext } from '../form/context'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideFieldArray, provideFieldArrayItem, useFieldArrayContext, useFieldArrayItemContext } from './context'\nimport { useFieldArray } from './use-field-array'\n\ntype FieldArrayProps = FieldArraySchema['props']\n\n/** 默认插槽的载荷：逐行投影与整份值、行数与上下限状态，以及整份替换、增删、移动的动作。 */\nexport type FieldArrayRootSlotProps = Pick<\n  FieldArrayApi,\n  | 'items'\n  | 'value'\n  | 'count'\n  | 'empty'\n  | 'atMin'\n  | 'atMax'\n  | 'canAdd'\n  | 'setValue'\n  | 'add'\n  | 'insert'\n  | 'remove'\n  | 'move'\n  | 'moveUp'\n  | 'moveDown'\n>\n\n/** item-content 插槽的载荷：这一行。 */\nexport interface FieldArrayItemContentSlotProps {\n  item: FieldArrayItem\n}\n\n/** item-cell 插槽的载荷：所在的行与列。 */\nexport type FieldArrayItemCellSlotProps = FieldArrayCellSlotData\n\nexport const XhFieldArrayRoot = defineComponent({\n  name: 'XhFieldArrayRoot',\n  // 有 connect 与机器兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    // 缺席值 undefined 表示非受控\n    value: { type: Array as PropType<unknown[]> },\n    defaultValue: { type: Array as PropType<unknown[]> },\n    min: { type: Number },\n    max: { type: Number },\n    createItem: { type: Function as PropType<() => unknown> },\n    movable: Boolean,\n    /** 表格排布下行尾把手钉在末端侧，缺省 true；关掉时把手随行一起横向滚动。 */\n    stickyActions: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    /** 排布：list（缺省）一行一条纵向堆叠；table 是 role=table 的表格，表头与各行共用一套列宽。 */\n    layout: { type: String as PropType<FieldArrayLayout> },\n    /** 表格排布的各列，只在 table 排布下生效；顺序即列序。 */\n    columns: { type: Array as PropType<FieldArrayColumn[]> },\n    name: { type: [String, Array] as PropType<FormPath> },\n    translations: { type: Object as PropType<Partial<FieldArrayTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸数组\n  emits: {\n    'value-change': (_details: PayloadOf<FieldArrayProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<FieldArrayProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    'default'?: (props: FieldArrayRootSlotProps) => VNode[]\n    /** 不写默认插槽时每一行的作者内容（列表排布），载荷是这一行。 */\n    'item-content'?: (props: FieldArrayItemContentSlotProps) => VNode[]\n    /** 不写默认插槽时每一格的作者内容（表格排布），载荷是所在的行与列。 */\n    'item-cell'?: (props: FieldArrayItemCellSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const form = useOptionalFormContext()\n    const onValueChange: FieldArrayProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const ctx = useFieldArray(withXhConfig('field-array', useFormControlProps(props)) as FieldArrayProps, { onValueChange }, form?.service)\n    provideFieldArray(ctx)\n    // 写了默认插槽时 items 里每一项都带 key，作者铺行时直接 :key=\"row.key\"；没写时照 fieldArrayStructure 铺整套结构\n    return () => h('div', { ...(ctx.api.value.getRootProps() as Record<string, unknown>), ref: ctx.rootRef }, !slots.default\n      ? renderDefaultStructure(ctx.api.value, { 'item-content': slots['item-content'], 'item-cell': slots['item-cell'] })\n      : slots.default({\n          items: ctx.api.value.items,\n          value: ctx.api.value.value,\n          count: ctx.api.value.count,\n          empty: ctx.api.value.empty,\n          atMin: ctx.api.value.atMin,\n          atMax: ctx.api.value.atMax,\n          canAdd: ctx.api.value.canAdd,\n          setValue: ctx.api.value.setValue,\n          add: ctx.api.value.add,\n          insert: ctx.api.value.insert,\n          remove: ctx.api.value.remove,\n          move: ctx.api.value.move,\n          moveUp: ctx.api.value.moveUp,\n          moveDown: ctx.api.value.moveDown,\n        }))\n  },\n})\n\nexport const XhFieldArrayTable = defineComponent({\n  name: 'XhFieldArrayTable',\n  setup(_, { slots }) {\n    // 表格排布下放进字段时，字段的标签并进表格的名字链、说明与错误文案进描述链；列表排布下表格不带角色，不接线\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = useFieldArrayContext()\n    return () => {\n      const props = ctx.api.value.getTableProps() as Record<string, unknown>\n      return h('div', ctx.api.value.layout === 'table' ? fieldLabel.value({ ...fieldWiring.value, ...props }) : props, slots.default?.())\n    }\n  },\n})\n\nexport const XhFieldArrayHeader = defineComponent({\n  name: 'XhFieldArrayHeader',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    return () => h('div', ctx.api.value.getHeaderProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayColumnHeader = defineComponent({\n  name: 'XhFieldArrayColumnHeader',\n  props: {\n    /** 列 id，与 columns 里的 id 对应。 */\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFieldArrayContext()\n    // 没写内容时显示这一列的 label\n    return () => h('div', ctx.api.value.getColumnHeaderProps({ value: props.value }) as Record<string, unknown>, slots.default?.()\n      ?? ctx.api.value.columns.find(column => column.id === props.value)?.label)\n  },\n})\n\nexport const XhFieldArrayItemCell = defineComponent({\n  name: 'XhFieldArrayItemCell',\n  props: {\n    /** 列 id，与 columns 里的 id 对应。 */\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('div', ctx.api.value.getItemCellProps({ index: item.value.index, value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItem = defineComponent({\n  name: 'XhFieldArrayItem',\n  props: {\n    // 下标由作者声明，兼收字符串以支持模板里写 index=\"0\"\n    index: { type: [Number, String] as PropType<number | string>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFieldArrayContext()\n    const item = computed<FieldArrayItemProps>(() => ({ index: Math.trunc(Number(props.index)) }))\n    provideFieldArrayItem({ item })\n    return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 行前的行号或名目；纯标注，不与行内的控件建立 for 关联。 */\nexport const XhFieldArrayItemLabel = defineComponent({\n  name: 'XhFieldArrayItemLabel',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('span', ctx.api.value.getItemLabelProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemContent = defineComponent({\n  name: 'XhFieldArrayItemContent',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('div', ctx.api.value.getItemContentProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemAction = defineComponent({\n  name: 'XhFieldArrayItemAction',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('div', ctx.api.value.getItemActionProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayAddTrigger = defineComponent({\n  name: 'XhFieldArrayAddTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    return () => h('button', ctx.api.value.getAddTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayItemDeleteTrigger = defineComponent({\n  name: 'XhFieldArrayItemDeleteTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getItemDeleteTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 拖动把手：按住拖这一行换位，只接指针、不占 Tab 位（键盘用上移、下移）。不换序时收起。 */\nexport const XhFieldArrayItemDragTrigger = defineComponent({\n  name: 'XhFieldArrayItemDragTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getItemDragTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayMoveUpTrigger = defineComponent({\n  name: 'XhFieldArrayMoveUpTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getMoveUpTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFieldArrayMoveDownTrigger = defineComponent({\n  name: 'XhFieldArrayMoveDownTrigger',\n  setup(_, { slots }) {\n    const ctx = useFieldArrayContext()\n    const { item } = useFieldArrayItemContext()\n    return () => h('button', ctx.api.value.getMoveDownTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 结构里的部件 → 部件组件。 */\nconst FIELD_ARRAY_PARTS = {\n  'table': XhFieldArrayTable,\n  'header': XhFieldArrayHeader,\n  'column-header': XhFieldArrayColumnHeader,\n  'item': XhFieldArrayItem,\n  'item-label': XhFieldArrayItemLabel,\n  'item-content': XhFieldArrayItemContent,\n  'item-cell': XhFieldArrayItemCell,\n  'item-action': XhFieldArrayItemAction,\n  'add-trigger': XhFieldArrayAddTrigger,\n  'item-delete-trigger': XhFieldArrayItemDeleteTrigger,\n  'item-drag-trigger': XhFieldArrayItemDragTrigger,\n  'move-up-trigger': XhFieldArrayMoveUpTrigger,\n  'move-down-trigger': XhFieldArrayMoveDownTrigger,\n}\n\ninterface FieldArrayStructureSlots {\n  'item-content'?: (props: FieldArrayItemContentSlotProps) => VNode[]\n  'item-cell'?: (props: FieldArrayItemCellSlotProps) => VNode[]\n}\n\n/**\n * 未写默认插槽时照 fieldArrayStructure 铺开的整套结构，与 Web Components 不写部件时元素生成的节点出自同一份。\n * 每一行（表格排布下每一格）的内容由 item-content / item-cell 插槽给出，没给时那一格空着。\n */\nfunction renderDefaultStructure(api: FieldArrayApi, content: FieldArrayStructureSlots): VNode[] {\n  return renderStructure(fieldArrayStructure(api), FIELD_ARRAY_PARTS, (node) => {\n    if (node.slot?.name === 'item-content')\n      return content['item-content']?.({ item: node.data as FieldArrayItem })\n    if (node.slot?.name === 'item-cell')\n      return content['item-cell']?.(node.data as FieldArrayCellSlotData)\n    return undefined\n  })\n}\n"],"mappings":";;;;;;;;;;AAiDA,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CAEN,OAAO;;EAEL,WAAW,EAAE,MAAM,OAAO;EAE1B,OAAO,EAAE,MAAM,MAA6B;EAC5C,cAAc,EAAE,MAAM,MAA6B;EACnD,KAAK,EAAE,MAAM,OAAO;EACpB,KAAK,EAAE,MAAM,OAAO;EACpB,YAAY,EAAE,MAAM,SAAoC;EACxD,SAAS;;EAET,eAAe;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EACnD,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAE7C,QAAQ,EAAE,MAAM,OAAqC;;EAErD,SAAS,EAAE,MAAM,MAAsC;EACvD,MAAM,EAAE,MAAM,CAAC,QAAQ,KAAK,EAAwB;EACpD,cAAc,EAAE,MAAM,OAAoD;CAC5E;CAEA,OAAO;EACL,iBAAiB,aAA0D;EAC3E,iBAAiB,WAAiE;CACpF;CACA,OAAO;CAOP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,OAAO,uBAAuB;EACpC,MAAM,iBAAmD,YAAY;GACnE,KAAK,gBAAgB,OAAO;GAC5B,KAAK,gBAAgB,QAAQ,KAAK;EACpC;EACA,MAAM,MAAM,cAAc,aAAa,eAAe,oBAAoB,KAAK,CAAC,GAAsB,EAAE,cAAc,GAAG,MAAM,OAAO;EACtI,kBAAkB,GAAG;EAErB,aAAa,EAAE,OAAO;GAAE,GAAI,IAAI,IAAI,MAAM,aAAa;GAA+B,KAAK,IAAI;EAAQ,GAAG,CAAC,MAAM,UAC7G,uBAAuB,IAAI,IAAI,OAAO;GAAE,gBAAgB,MAAM;GAAiB,aAAa,MAAM;EAAa,CAAC,IAChH,MAAM,QAAQ;GACZ,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,QAAQ,IAAI,IAAI,MAAM;GACtB,UAAU,IAAI,IAAI,MAAM;GACxB,KAAK,IAAI,IAAI,MAAM;GACnB,QAAQ,IAAI,IAAI,MAAM;GACtB,QAAQ,IAAI,IAAI,MAAM;GACtB,MAAM,IAAI,IAAI,MAAM;GACpB,QAAQ,IAAI,IAAI,MAAM;GACtB,UAAU,IAAI,IAAI,MAAM;EAC1B,CAAC,CAAC;CACR;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAElB,MAAM,cAAc,oBAAoB;EACxC,MAAM,aAAa,oBAAoB;EACvC,MAAM,MAAM,qBAAqB;EACjC,aAAa;GACX,MAAM,QAAQ,IAAI,IAAI,MAAM,cAAc;GAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,MAAM,WAAW,UAAU,WAAW,MAAM;IAAE,GAAG,YAAY;IAAO,GAAG;GAAM,CAAC,IAAI,OAAO,MAAM,UAAU,CAAC;EACpI;CACF;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,eAAe,GAA8B,MAAM,UAAU,CAAC;CACpG;AACF,CAAC;AAED,MAAa,2BAA2B,gBAAgB;CACtD,MAAM;CACN,OAAO;;AAEL,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAK,EACxC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EAEjC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,qBAAqB,EAAE,OAAO,MAAM,MAAM,CAAC,GAA8B,MAAM,UAAU,KACxH,IAAI,IAAI,MAAM,QAAQ,MAAK,WAAU,OAAO,OAAO,MAAM,KAAK,CAAC,EAAE,KAAK;CAC7E;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,OAAO;;AAEL,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAK,EACxC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,iBAAiB;GAAE,OAAO,KAAK,MAAM;GAAO,OAAO,MAAM;EAAM,CAAC,GAA8B,MAAM,UAAU,CAAC;CACrJ;AACF,CAAC;AAED,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO,EAEL,OAAO;EAAE,MAAM,CAAC,QAAQ,MAAM;EAAgC,UAAU;CAAK,EAC/E;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,MAAM,OAAO,gBAAqC,EAAE,OAAO,KAAK,MAAM,OAAO,MAAM,KAAK,CAAC,EAAE,EAAE;EAC7F,sBAAsB,EAAE,KAAK,CAAC;EAC9B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC5G;AACF,CAAC;;AAGD,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,kBAAkB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAClH;AACF,CAAC;AAED,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,oBAAoB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACnH;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,mBAAmB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAClH;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,mBAAmB,GAA8B,MAAM,UAAU,CAAC;CAC3G;AACF,CAAC;AAED,MAAa,gCAAgC,gBAAgB;CAC3D,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,0BAA0B,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC5H;AACF,CAAC;;AAGD,MAAa,8BAA8B,gBAAgB;CACzD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,wBAAwB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC1H;AACF,CAAC;AAED,MAAa,4BAA4B,gBAAgB;CACvD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,sBAAsB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACxH;AACF,CAAC;AAED,MAAa,8BAA8B,gBAAgB;CACzD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,SAAS,yBAAyB;EAC1C,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,wBAAwB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC1H;AACF,CAAC;;AAGD,MAAM,oBAAoB;CACxB,SAAS;CACT,UAAU;CACV,iBAAiB;CACjB,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,aAAa;CACb,eAAe;CACf,eAAe;CACf,uBAAuB;CACvB,qBAAqB;CACrB,mBAAmB;CACnB,qBAAqB;AACvB;;;;;AAWA,SAAS,uBAAuB,KAAoB,SAA4C;CAC9F,OAAO,gBAAgB,oBAAoB,GAAG,GAAG,oBAAoB,SAAS;EAC5E,IAAI,KAAK,MAAM,SAAS,gBACtB,OAAO,QAAQ,eAAe,GAAG,EAAE,MAAM,KAAK,KAAuB,CAAC;EACxE,IAAI,KAAK,MAAM,SAAS,aACtB,OAAO,QAAQ,YAAY,GAAG,KAAK,IAA8B;CAErE,CAAC;AACH"}

package/dist/components/field-array/use-field-array.d.ts

@@ -1,11 +1,13 @@
+import { FieldArrayApi, FieldArraySchema, FormSchema, SortableSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { FieldArrayApi, FieldArraySchema, FormSchema } from "@xihan-ui/headless";
 //#region src/components/field-array/use-field-array.d.ts
 interface FieldArrayContext {
   api: ComputedRef<FieldArrayApi>;
   service: Service<FieldArraySchema>;
-  /** 行所在的根节点：列表动效接在它上面。 */
+  /** 拖动换序的 sortable 机器：项是这个字段数组自己的行。 */
+  drag: Service<SortableSchema>;
+  /** 行所在的根节点：列表动效与拖动换序都接在它上面。 */
   rootRef: Ref<HTMLElement | null>;
 }
 declare function useFieldArray(props: FieldArraySchema['props'], handlers?: Pick<FieldArraySchema['props'], 'onValueChange'>, form?: Service<FormSchema> | null): FieldArrayContext;

package/dist/components/field-array/use-field-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-array.d.ts","names":[],"sources":["../../../src/components/field-array/use-field-array.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;iBAGC,cACd,OAAO,2BACP,WAAU,KAAK,6CACf,OAAO,QAAQ,qBACd"}
+{"version":3,"file":"use-field-array.d.ts","names":[],"sources":["../../../src/components/field-array/use-field-array.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,MAAM,QAAQ;;EAEd,SAAS,IAAI;;iBAGC,cACd,OAAO,2BACP,WAAU,KAAK,6CACf,OAAO,QAAQ,qBACd"}

package/dist/components/field-array/use-field-array.js

@@ -1,9 +1,9 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectFieldArray, fieldArrayDragContainer, fieldArrayDragItems, fieldArrayDragProps, fieldArrayMachine, sortableMachine } from "@xihan-ui/headless";
 import { computed, ref } from "vue";
 import { createScope } from "@xihan-ui/core";
-import { connectFieldArray, fieldArrayMachine } from "@xihan-ui/headless";
 //#region src/components/field-array/use-field-array.ts
 function useFieldArray(props, handlers = {}, form) {
 	const service = useMachine(fieldArrayMachine, () => ({
@@ -13,9 +13,13 @@ function useFieldArray(props, handlers = {}, form) {
 	service.refs.set("form", form ?? null);
 	const rootRef = ref(null);
 	service.refs.set("getRootEl", () => rootRef.value);
+	const drag = useMachine(sortableMachine, () => fieldArrayDragProps(service), createScope(null, createVueIdGenerator()));
+	drag.refs.set("getRootEl", () => fieldArrayDragContainer(rootRef.value));
+	drag.refs.set("getItemEls", () => fieldArrayDragItems(rootRef.value));
 	return {
-		api: computed(() => connectFieldArray(service, vueNormalize)),
+		api: computed(() => connectFieldArray(service, vueNormalize, drag)),
 		service,
+		drag,
 		rootRef
 	};
 }

package/dist/components/field-array/use-field-array.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-array.js","names":[],"sources":["../../../src/components/field-array/use-field-array.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use field array 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { FieldArrayApi, FieldArraySchema, FormSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectFieldArray, fieldArrayMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface FieldArrayContext {\n  api: ComputedRef<FieldArrayApi>\n  service: Service<FieldArraySchema>\n  /** 行所在的根节点：列表动效接在它上面。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\nexport function useFieldArray(\n  props: FieldArraySchema['props'],\n  handlers: Pick<FieldArraySchema['props'], 'onValueChange'> = {},\n  form?: Service<FormSchema> | null,\n): FieldArrayContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(fieldArrayMachine, () => ({ ...props, ...handlers }), scope)\n  service.refs.set('form', form ?? null)\n  const rootRef = ref<HTMLElement | null>(null)\n  // 传 getter 而非节点本身，ref 在挂载后才有值\n  service.refs.set('getRootEl', () => rootRef.value)\n  const api = computed(() => connectFieldArray(service, vueNormalize))\n  return { api, service, rootRef }\n}\n"],"mappings":";;;;;;;AAwBA,SAAgB,cACd,OACA,WAA6D,CAAC,GAC9D,MACmB;CAInB,MAAM,UAAU,WAAW,0BAA0B;EAAE,GAAG;EAAO,GAAG;CAAS,IAD/D,YAAY,MADZ,qBACsB,CACiD,CAAC;CACtF,QAAQ,KAAK,IAAI,QAAQ,QAAQ,IAAI;CACrC,MAAM,UAAU,IAAwB,IAAI;CAE5C,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAEjD,OAAO;EAAE,KADG,eAAe,kBAAkB,SAAS,YAAY,CACvD;EAAG;EAAS;CAAQ;AACjC"}
+{"version":3,"file":"use-field-array.js","names":[],"sources":["../../../src/components/field-array/use-field-array.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use field array 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { FieldArrayApi, FieldArraySchema, FormSchema, SortableSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectFieldArray, fieldArrayDragContainer, fieldArrayDragItems, fieldArrayDragProps, fieldArrayMachine, sortableMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface FieldArrayContext {\n  api: ComputedRef<FieldArrayApi>\n  service: Service<FieldArraySchema>\n  /** 拖动换序的 sortable 机器：项是这个字段数组自己的行。 */\n  drag: Service<SortableSchema>\n  /** 行所在的根节点：列表动效与拖动换序都接在它上面。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\nexport function useFieldArray(\n  props: FieldArraySchema['props'],\n  handlers: Pick<FieldArraySchema['props'], 'onValueChange'> = {},\n  form?: Service<FormSchema> | null,\n): FieldArrayContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(fieldArrayMachine, () => ({ ...props, ...handlers }), scope)\n  service.refs.set('form', form ?? null)\n  const rootRef = ref<HTMLElement | null>(null)\n  // 传 getter 而非节点本身，ref 在挂载后才有值\n  service.refs.set('getRootEl', () => rootRef.value)\n  // 拖动换序：另一台机器跑 sortable，props 现取行 key 与换序开关，放下即发换位\n  const drag = useMachine(sortableMachine, () => fieldArrayDragProps(service), createScope(null, createVueIdGenerator()))\n  drag.refs.set('getRootEl', () => fieldArrayDragContainer(rootRef.value))\n  drag.refs.set('getItemEls', () => fieldArrayDragItems(rootRef.value))\n  const api = computed(() => connectFieldArray(service, vueNormalize, drag))\n  return { api, service, drag, rootRef }\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,cACd,OACA,WAA6D,CAAC,GAC9D,MACmB;CAInB,MAAM,UAAU,WAAW,0BAA0B;EAAE,GAAG;EAAO,GAAG;CAAS,IAD/D,YAAY,MADZ,qBACsB,CACiD,CAAC;CACtF,QAAQ,KAAK,IAAI,QAAQ,QAAQ,IAAI;CACrC,MAAM,UAAU,IAAwB,IAAI;CAE5C,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAEjD,MAAM,OAAO,WAAW,uBAAuB,oBAAoB,OAAO,GAAG,YAAY,MAAM,qBAAqB,CAAC,CAAC;CACtH,KAAK,KAAK,IAAI,mBAAmB,wBAAwB,QAAQ,KAAK,CAAC;CACvE,KAAK,KAAK,IAAI,oBAAoB,oBAAoB,QAAQ,KAAK,CAAC;CAEpE,OAAO;EAAE,KADG,eAAe,kBAAkB,SAAS,cAAc,IAAI,CAC7D;EAAG;EAAS;EAAM;CAAQ;AACvC"}

package/dist/components/fieldset/fieldset.d.ts

@@ -1,7 +1,11 @@
-import { PropType } from "vue";
 import { FieldsetTranslations } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
 //#region src/components/fieldset/fieldset.d.ts
 declare const XhFieldsetRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 组标题文字。不写默认插槽时铺 legend 部件；需要放置其他内容时改用 legend 插槽。 */
+  legend: {
+    type: StringConstructor;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -17,9 +21,13 @@ declare const XhFieldsetRoot: import("vue").DefineComponent<import("vue").Extrac
   translations: {
     type: PropType<Partial<FieldsetTranslations>>;
   };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 组标题文字。不写默认插槽时铺 legend 部件；需要放置其他内容时改用 legend 插槽。 */
+  legend: {
+    type: StringConstructor;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -39,22 +47,29 @@ declare const XhFieldsetRoot: import("vue").DefineComponent<import("vue").Extrac
   required: boolean;
   invalid: boolean;
   disabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhFieldsetLegend: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}, SlotsType<{
+  default?: () => VNode[];
+  legend?: () => VNode[];
+  description?: () => VNode[];
+  fieldGroup?: () => VNode[];
+  errorText?: () => VNode[];
+  actions?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhFieldsetLegend: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhFieldsetDescription: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhFieldsetDescription: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** 把并排的几个字段圈为一段；纯排版。 */
-declare const XhFieldsetFieldGroup: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhFieldsetFieldGroup: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** 组末尾的按钮行；纯排版。 */
-declare const XhFieldsetActions: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhFieldsetActions: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhFieldsetErrorText: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhFieldsetErrorText: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion

package/dist/components/fieldset/fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.d.ts","names":[],"sources":["../../../src/components/fieldset/fieldset.ts"],"mappings":";;;cAca,8BAAc,8BAAA;;;;;;;;;;;;;;IAOS,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;;IAAjB,MAAA,SAAS,QAAQ;;;;;;qCAanD;cAEW,gCAAgB,wCAAA,oBAAA,4BAAA;;8BAU3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,wCAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,wCAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,wCAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,wCAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"fieldset.d.ts","names":[],"sources":["../../../src/components/fieldset/fieldset.ts"],"mappings":";;;cAgBa,8BAAc,8BAAA;;;;;;;;;;;;;;;;;;IASS,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;IAAjB,MAAA,SAAS,QAAQ;;;;;;;EAGvC,gBAAM;EACP,eAAM;EACD,oBAAM;EACP,mBAAM;EACP,kBAAM;EACR,gBAAM;kCAqBlB;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAU3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAShC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAQ9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/fieldset/fieldset.js

@@ -1,11 +1,15 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { provideXhConfig, useXhConfig, withXhConfig } from "../../config/config.js";
 import { provideFieldset, provideFieldsetOuterDisabled, useFieldsetContext, useFieldsetOuterDisabled } from "./context.js";
-import { useFieldset } from "./use-fieldset.js";
-import { computed, defineComponent, h } from "vue";
+import { useFieldset, useFieldsetPartPresence } from "./use-fieldset.js";
+import { fieldsetStructure, hasNamingContent } from "@xihan-ui/headless";
+import { computed, defineComponent, h, ref } from "vue";
 //#region src/components/fieldset/fieldset.ts
 const XhFieldsetRoot = defineComponent({
 	name: "XhFieldsetRoot",
 	props: {
+		/** 组标题文字。不写默认插槽时铺 legend 部件；需要放置其他内容时改用 legend 插槽。 */
+		legend: { type: String },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -20,13 +24,20 @@ const XhFieldsetRoot = defineComponent({
 		},
 		translations: { type: Object }
 	},
+	slots: Object,
 	setup(props, { slots }) {
 		const outer = useXhConfig();
 		const ctx = useFieldset(withXhConfig("fieldset", props));
 		provideFieldset(ctx);
 		provideXhConfig(() => ({ disabled: ctx.api.value.disabled || void 0 }));
 		provideFieldsetOuterDisabled(computed(() => outer.value.disabled === true));
-		return () => h("fieldset", ctx.api.value.getRootProps(), slots.default?.());
+		return () => h("fieldset", ctx.api.value.getRootProps(), slots.default ? slots.default() : renderDefaultStructure(props.legend, {
+			"legend": slots.legend,
+			"description": slots.description,
+			"field-group": slots.fieldGroup,
+			"error-text": slots.errorText,
+			"actions": slots.actions
+		}));
 	}
 });
 const XhFieldsetLegend = defineComponent({
@@ -42,7 +53,12 @@ const XhFieldsetDescription = defineComponent({
 	name: "XhFieldsetDescription",
 	setup(_, { slots }) {
 		const ctx = useFieldsetContext();
-		return () => h("p", ctx.api.value.getDescriptionProps(), slots.default?.());
+		const el = ref(null);
+		useFieldsetPartPresence(ctx, "description", () => el.value != null && hasNamingContent(el.value));
+		return () => h("p", {
+			...ctx.api.value.getDescriptionProps(),
+			ref: el
+		}, slots.default?.());
 	}
 });
 /** 把并排的几个字段圈为一段；纯排版。 */
@@ -65,9 +81,28 @@ const XhFieldsetErrorText = defineComponent({
 	name: "XhFieldsetErrorText",
 	setup(_, { slots }) {
 		const ctx = useFieldsetContext();
+		useFieldsetPartPresence(ctx, "errorText");
 		return () => h("p", ctx.api.value.getErrorTextProps(), slots.default?.());
 	}
 });
+/** 标准结构里各部件对应的组件。 */
+const FIELDSET_PARTS = {
+	"legend": XhFieldsetLegend,
+	"description": XhFieldsetDescription,
+	"field-group": XhFieldsetFieldGroup,
+	"error-text": XhFieldsetErrorText,
+	"actions": XhFieldsetActions
+};
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 fieldsetStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。组标题恒在，其余给了哪个插槽才铺哪一段。
+*/
+function renderDefaultStructure(legend, sections) {
+	return renderStructure(fieldsetStructure({
+		legend,
+		slotted: (name) => sections[name] != null
+	}), FIELDSET_PARTS, (node) => node.slot ? sections[node.slot.name]?.() : void 0);
+}
 //#endregion
 export { XhFieldsetActions, XhFieldsetDescription, XhFieldsetErrorText, XhFieldsetFieldGroup, XhFieldsetLegend, XhFieldsetRoot };