@silver-formily/element-plus 3.0.2 → 3.0.3

package/esm/array-items/array-items.mjs

@@ -0,0 +1,88 @@
+import { useCleanAttrs } from "../__builtins__/shared/utils.mjs";
+import { stylePrefix } from "../__builtins__/configs/index.mjs";
+import { getArrayItemSchema, isAdditionComponent, useKey } from "../array-base/utils.mjs";
+import { ArrayBase } from "../array-base/index.mjs";
+import { autorunEffect } from "@silver-formily/reactive-vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, unref, withCtx } from "vue";
+import { RecursionField, useField, useFieldSchema } from "@silver-formily/vue";
+import { isArr } from "@formily/shared";
+import { VueDraggable } from "vue-draggable-plus";
+//#region src/array-items/array-items.vue
+const _hoisted_1 = ["index"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "FArrayItems",
+	inheritAttrs: false,
+	__name: "array-items",
+	setup(__props) {
+		const fieldRef = useField();
+		const schemaRef = useFieldSchema();
+		const field = fieldRef.value;
+		const schema = schemaRef.value;
+		const prefixCls = `${stylePrefix}-array-items`;
+		const { getKey, keyMap } = useKey(schemaRef.value);
+		const dataSource = ref(isArr(field.value) ? field.value : []);
+		const triggerUpdateKey = ref(0);
+		autorunEffect(() => {
+			dataSource.value = isArr(field.value) ? [...field.value] : [];
+		});
+		async function handleDragEnd(evt) {
+			const { oldIndex, newIndex } = evt;
+			if (isArr(keyMap)) keyMap.splice(newIndex, 0, keyMap.splice(oldIndex, 1)[0]);
+			await field.move(oldIndex, newIndex);
+			triggerUpdateKey.value++;
+		}
+		const { props: arrayItemsProps } = useCleanAttrs([
+			"value",
+			"modelValue",
+			"onUpdate:modelValue"
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: prefixCls }, unref(arrayItemsProps)), [(openBlock(), createBlock(unref(ArrayBase), {
+				key: triggerUpdateKey.value,
+				"key-map": unref(keyMap)
+			}, {
+				default: withCtx(() => [createVNode(unref(VueDraggable), {
+					class: normalizeClass(`${prefixCls}-list`),
+					"model-value": dataSource.value,
+					handle: `.${unref(stylePrefix)}-array-base-sort-handle`,
+					animation: 150,
+					onEnd: handleDragEnd
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(dataSource.value, (element, index) => {
+						return openBlock(), createBlock(unref(ArrayBase).Item, {
+							key: unref(getKey)(element, index),
+							index,
+							record: element
+						}, {
+							default: withCtx(() => [(openBlock(), createElementBlock("div", {
+								key: unref(getKey)(element, index),
+								class: normalizeClass([`${prefixCls}-item-inner`]),
+								index
+							}, [createVNode(unref(RecursionField), {
+								schema: unref(getArrayItemSchema)(unref(schema), index),
+								name: index
+							}, null, 8, ["schema", "name"])], 10, _hoisted_1))]),
+							_: 2
+						}, 1032, ["index", "record"]);
+					}), 128))]),
+					_: 1
+				}, 8, [
+					"class",
+					"model-value",
+					"handle"
+				]), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(schema).properties, (itemSchema, key) => {
+					return openBlock(), createElementBlock(Fragment, { key }, [unref(isAdditionComponent)(itemSchema) ? (openBlock(), createBlock(unref(RecursionField), {
+						key: 0,
+						schema: itemSchema,
+						name: "addition"
+					}, null, 8, ["schema"])) : createCommentVNode("v-if", true)], 64);
+				}), 128))]),
+				_: 1
+			}, 8, ["key-map"]))], 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=array-items.mjs.map

package/esm/array-items/array-items.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"array-items.mjs","names":[],"sources":["../../src/array-items/array-items.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ArrayField } from '@formily/core'\nimport { isArr } from '@formily/shared'\nimport { autorunEffect } from '@silver-formily/reactive-vue'\nimport { RecursionField, useField, useFieldSchema } from '@silver-formily/vue'\nimport { ref } from 'vue'\nimport { VueDraggable } from 'vue-draggable-plus'\nimport { useCleanAttrs } from '../__builtins__'\nimport { stylePrefix } from '../__builtins__/configs'\nimport { ArrayBase } from '../array-base'\nimport { getArrayItemSchema, isAdditionComponent, useKey } from '../array-base/utils'\n\ndefineOptions({\n  name: 'FArrayItems',\n  inheritAttrs: false,\n})\n\nconst fieldRef = useField<ArrayField>()\nconst schemaRef = useFieldSchema()\nconst field = fieldRef.value\nconst schema = schemaRef.value\n\nconst prefixCls = `${stylePrefix}-array-items`\nconst { getKey, keyMap } = useKey(schemaRef.value)\nconst dataSource = ref(isArr(field.value) ? field.value : [])\nconst triggerUpdateKey = ref(0)\n\nautorunEffect(() => {\n  dataSource.value = isArr(field.value) ? [...field.value] : []\n})\n\nasync function handleDragEnd(evt: { oldIndex: number, newIndex: number }) {\n  const { oldIndex, newIndex } = evt\n  if (isArr(keyMap)) {\n    keyMap.splice(newIndex, 0, keyMap.splice(oldIndex, 1)[0])\n  }\n  await field.move(oldIndex, newIndex)\n  triggerUpdateKey.value++\n}\nconst { props: arrayItemsProps } = useCleanAttrs(['value', 'modelValue', 'onUpdate:modelValue'])\n</script>\n\n<template>\n  <div :class=\"prefixCls\" v-bind=\"arrayItemsProps\">\n    <ArrayBase :key=\"triggerUpdateKey\" :key-map=\"keyMap\">\n      <VueDraggable\n        :class=\"`${prefixCls}-list`\"\n        :model-value=\"dataSource\"\n        :handle=\"`.${stylePrefix}-array-base-sort-handle`\"\n        :animation=\"150\"\n        @end=\"handleDragEnd\"\n      >\n        <ArrayBase.Item\n          v-for=\"(element, index) of dataSource\"\n          :key=\"getKey(element, index)\"\n          :index=\"index\"\n          :record=\"element\"\n        >\n          <div :key=\"getKey(element, index)\" :class=\"[`${prefixCls}-item-inner`]\" :index=\"index\">\n            <RecursionField :schema=\"getArrayItemSchema(schema, index)\" :name=\"index\" />\n          </div>\n        </ArrayBase.Item>\n      </VueDraggable>\n\n      <template v-for=\"(itemSchema, key) of schema.properties\" :key=\"key\">\n        <RecursionField v-if=\"isAdditionComponent(itemSchema)\" :schema=\"itemSchema\" name=\"addition\" />\n      </template>\n    </ArrayBase>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAiBA,MAAM,WAAW,UAAqB;EACtC,MAAM,YAAY,gBAAe;EACjC,MAAM,QAAQ,SAAS;EACvB,MAAM,SAAS,UAAU;EAEzB,MAAM,YAAY,GAAG,YAAY;EACjC,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,MAAK;EACjD,MAAM,aAAa,IAAI,MAAM,MAAM,MAAM,GAAG,MAAM,QAAQ,EAAE,CAAA;EAC5D,MAAM,mBAAmB,IAAI,EAAC;AAE9B,sBAAoB;AAClB,cAAW,QAAQ,MAAM,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,MAAM,GAAG,EAAC;IAC7D;EAED,eAAe,cAAc,KAA6C;GACxE,MAAM,EAAE,UAAU,aAAa;AAC/B,OAAI,MAAM,OAAO,CACf,QAAO,OAAO,UAAU,GAAG,OAAO,OAAO,UAAU,EAAE,CAAC,GAAE;AAE1D,SAAM,MAAM,KAAK,UAAU,SAAQ;AACnC,oBAAiB;;EAEnB,MAAM,EAAE,OAAO,oBAAoB,cAAc;GAAC;GAAS;GAAc;GAAsB,CAAA;;uBAI7F,mBAyBM,OAzBN,WAyBM,EAzBA,OAAO,WAAS,EAAU,MAAA,gBAAe,CAAA,EAAA,EAAA,WAAA,EAC7C,YAuBY,MAAA,UAAA,EAAA;IAvBA,KAAK,iBAAA;IAAmB,WAAS,MAAA,OAAM;;2BAkBlC,CAjBf,YAiBe,MAAA,aAAA,EAAA;KAhBZ,OAAK,eAAA,GAAK,UAAS,OAAA;KACnB,eAAa,WAAA;KACb,QAAM,IAAM,MAAA,YAAW,CAAA;KACvB,WAAW;KACX,OAAK;;4BAGkC,EAAA,UAAA,KAAA,EADxC,mBASiB,UAAA,MAAA,WARY,WAAA,QAAnB,SAAS,UAAK;0BADxB,YASiB,MAAA,UAAA,CAAA,MAAA;OAPd,KAAK,MAAA,OAAM,CAAC,SAAS,MAAK;OACnB;OACP,QAAQ;;8BAIH,EAAA,WAAA,EAFN,mBAEM,OAAA;QAFA,KAAK,MAAA,OAAM,CAAC,SAAS,MAAK;QAAI,OAAK,eAAA,CAAA,GAAM,UAAS,aAAA,CAAA;QAAwB;WAC9E,YAA4E,MAAA,eAAA,EAAA;QAA3D,QAAQ,MAAA,mBAAkB,CAAC,MAAA,OAAM,EAAE,MAAK;QAAI,MAAM;;;;;;;;;;0BAKzE,mBAEW,UAAA,MAAA,WAF2B,MAAA,OAAM,CAAC,aAA3B,YAAY,QAAG;wDAA8B,KAAG,EAAA,CAC1C,MAAA,oBAAmB,CAAC,WAAU,IAAA,WAAA,EAApD,YAA8F,MAAA,eAAA,EAAA;;MAAtC,QAAQ;MAAY,MAAK"}

package/esm/array-items/index.d.ts

@@ -1,130 +1,137 @@
-export declare const ArrayItems: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
+import { IArrayBaseAdditionProps, IArrayBaseOperationProps } from "../array-base/types.js";
+import { useArray, useIndex, useRecord } from "../array-base/utils.js";
+import * as _$vue from "vue";
+
+//#region src/array-items/index.d.ts
+declare const ArrayItems: {
+  new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+  }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+} & _$vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & {
+  Item: {
+    new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<_$vue.ExtractPropTypes<{
+      type: {
+        type: _$vue.PropType<"card" | "divide">;
+        default: string;
+      };
+    }>> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {
+      type: "card" | "divide";
+    }, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+      P: {};
+      B: {};
+      D: {};
+      C: {};
+      M: {};
+      Defaults: {};
+    }, Readonly<_$vue.ExtractPropTypes<{
+      type: {
+        type: _$vue.PropType<"card" | "divide">;
+        default: string;
+      };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+      type: "card" | "divide";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+  } & _$vue.ComponentOptionsBase<Readonly<_$vue.ExtractPropTypes<{
+    type: {
+      type: _$vue.PropType<"card" | "divide">;
+      default: string;
+    };
+  }>> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {
+    type: "card" | "divide";
+  }, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
+    $slots: {
+      default?: (props: {}) => any;
+    };
+  });
+  Index: {
+    new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+      P: {};
+      B: {};
+      D: {};
+      C: {};
+      M: {};
+      Defaults: {};
     }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
-    Item: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-            type: {
-                type: import('vue').PropType<"card" | "divide">;
-                default: string;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
-            type: "card" | "divide";
-        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('vue').ExtractPropTypes<{
-            type: {
-                type: import('vue').PropType<"card" | "divide">;
-                default: string;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
-            type: "card" | "divide";
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-        type: {
-            type: import('vue').PropType<"card" | "divide">;
-            default: string;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-        type: "card" | "divide";
-    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-    Index: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {
-                index: number;
-            }): any;
-        };
-    });
-    SortHandle: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    Addition: import('vue').DefineComponent<import('../array-base/types').IArrayBaseAdditionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('../array-base/types').IArrayBaseAdditionProps> & Readonly<{}>, {
-        method: "push" | "unshift";
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    Remove: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-    MoveDown: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-    MoveUp: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('../array-base/types').IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-    useArray: typeof import('../array-base/utils').useArray;
-    useIndex: typeof import('../array-base/utils').useIndex;
-    useRecord: typeof import('../array-base/utils').useRecord;
+  } & _$vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
+    $slots: {
+      default?: (props: {
+        index: number;
+      }) => any;
+    };
+  });
+  SortHandle: _$vue.DefineComponent<{}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+  Addition: _$vue.DefineComponent<IArrayBaseAdditionProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<IArrayBaseAdditionProps> & Readonly<{}>, {
+    method: "push" | "unshift";
+  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+  Remove: {
+    new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+      P: {};
+      B: {};
+      D: {};
+      C: {};
+      M: {};
+      Defaults: {};
+    }, Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+  } & _$vue.ComponentOptionsBase<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
+    $slots: {
+      default?: (props: {}) => any;
+    };
+  });
+  MoveDown: {
+    new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+      P: {};
+      B: {};
+      D: {};
+      C: {};
+      M: {};
+      Defaults: {};
+    }, Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+  } & _$vue.ComponentOptionsBase<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
+    $slots: {
+      default?: (props: {}) => any;
+    };
+  });
+  MoveUp: {
+    new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, true, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
+      P: {};
+      B: {};
+      D: {};
+      C: {};
+      M: {};
+      Defaults: {};
+    }, Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+  } & _$vue.ComponentOptionsBase<Readonly<IArrayBaseOperationProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
+    $slots: {
+      default?: (props: {}) => any;
+    };
+  });
+  useArray: typeof useArray;
+  useIndex: typeof useIndex;
+  useRecord: typeof useRecord;
 };
-export default ArrayItems;
+//#endregion
+export { ArrayItems };
+//# sourceMappingURL=index.d.ts.map

package/esm/array-items/index.mjs

@@ -1,108 +1,22 @@
-import "element-plus";
-import { autorunEffect as M } from "@silver-formily/reactive-vue";
-import "@vueuse/core";
-import { defineComponent as S, openBlock as a, createElementBlock as n, normalizeClass as h, renderSlot as V, ref as $, mergeProps as B, unref as e, createBlock as f, withCtx as y, createVNode as C, Fragment as v, renderList as R, createCommentVNode as D } from "vue";
-import "@formily/core";
-import { useField as U, useFieldSchema as K, RecursionField as F } from "@silver-formily/vue";
-import { useCleanAttrs as P, composeExport as b } from "../__builtins__/shared/utils.mjs";
-import { ArrayBase as r } from "../array-base/index.mjs";
-import { stylePrefix as I } from "../__builtins__/configs/index.mjs";
-import { isArr as _ } from "@formily/shared";
-import { VueDraggable as H } from "vue-draggable-plus";
-import { useKey as N, getArrayItemSchema as z, isAdditionComponent as L } from "../array-base/utils.mjs";
-import '../styles/array-items/index.css';const j = /* @__PURE__ */ S({
-  name: "FArrayItemsItem",
-  __name: "array-items-item",
-  props: {
-    type: {
-      type: String,
-      default: "card"
-    }
-  },
-  setup(A) {
-    const i = A, l = `${I}-array-items`;
-    return (s, c) => (a(), n("div", {
-      class: h(`${l}-${i.type}`)
-    }, [
-      V(s.$slots, "default")
-    ], 2));
-  }
-}), q = ["index"], G = /* @__PURE__ */ S({
-  name: "FArrayItems",
-  inheritAttrs: !1,
-  __name: "array-items",
-  setup(A) {
-    const i = U(), l = K(), s = i.value, c = l.value, u = `${I}-array-items`, { getKey: g, keyMap: m } = N(l.value), d = $(_(s.value) ? s.value : []), k = $(0);
-    M(() => {
-      d.value = _(s.value) ? [...s.value] : [];
-    });
-    async function w(x) {
-      const { oldIndex: p, newIndex: t } = x;
-      _(m) && m.splice(t, 0, m.splice(p, 1)[0]), await s.move(p, t), k.value++;
-    }
-    const { props: E } = P(["value", "modelValue", "onUpdate:modelValue"]);
-    return (x, p) => (a(), n("div", B({ class: u }, e(E)), [
-      (a(), f(e(r), {
-        key: k.value,
-        "key-map": e(m)
-      }, {
-        default: y(() => [
-          C(e(H), {
-            class: h(`${u}-list`),
-            "model-value": d.value,
-            handle: `.${e(I)}-array-base-sort-handle`,
-            animation: 150,
-            onEnd: w
-          }, {
-            default: y(() => [
-              (a(!0), n(v, null, R(d.value, (t, o) => (a(), f(e(r).Item, {
-                key: e(g)(t, o),
-                index: o,
-                record: t
-              }, {
-                default: y(() => [
-                  (a(), n("div", {
-                    key: e(g)(t, o),
-                    class: h([`${u}-item-inner`]),
-                    index: o
-                  }, [
-                    C(e(F), {
-                      schema: e(z)(e(c), o),
-                      name: o
-                    }, null, 8, ["schema", "name"])
-                  ], 10, q))
-                ]),
-                _: 2
-              }, 1032, ["index", "record"]))), 128))
-            ]),
-            _: 1
-          }, 8, ["class", "model-value", "handle"]),
-          (a(!0), n(v, null, R(e(c).properties, (t, o) => (a(), n(v, { key: o }, [
-            e(L)(t) ? (a(), f(e(F), {
-              key: 0,
-              schema: t,
-              name: "addition"
-            }, null, 8, ["schema"])) : D("", !0)
-          ], 64))), 128))
-        ]),
-        _: 1
-      }, 8, ["key-map"]))
-    ], 16));
-  }
-}), oe = b(G, {
-  Item: j,
-  Index: r.Index,
-  SortHandle: r.SortHandle,
-  Addition: r.Addition,
-  Remove: r.Remove,
-  MoveDown: r.MoveDown,
-  MoveUp: r.MoveUp,
-  useArray: r.useArray,
-  useIndex: r.useIndex,
-  useRecord: r.useRecord
+import { composeExport } from "../__builtins__/shared/utils.mjs";
+import { ArrayBase } from "../array-base/index.mjs";
+import _sfc_main from "./array-items-item.mjs";
+import _sfc_main$1 from "./array-items.mjs";
+import "./style.css";
+//#region src/array-items/index.ts
+const ArrayItems = composeExport(_sfc_main$1, {
+	Item: _sfc_main,
+	Index: ArrayBase.Index,
+	SortHandle: ArrayBase.SortHandle,
+	Addition: ArrayBase.Addition,
+	Remove: ArrayBase.Remove,
+	MoveDown: ArrayBase.MoveDown,
+	MoveUp: ArrayBase.MoveUp,
+	useArray: ArrayBase.useArray,
+	useIndex: ArrayBase.useIndex,
+	useRecord: ArrayBase.useRecord
 });
-export {
-  oe as ArrayItems,
-  oe as default
-};
-//# sourceMappingURL=index.mjs.map
+//#endregion
+export { ArrayItems as default };
+
+//# sourceMappingURL=index.mjs.map

package/esm/array-items/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/array-items/array-items-item.vue","../../src/array-items/array-items.vue","../../src/array-items/index.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { PropType } from 'vue'\nimport { stylePrefix } from '../__builtins__/configs'\n\ndefineOptions({\n  name: 'FArrayItemsItem',\n})\n\nconst props = defineProps({\n  type: {\n    type: String as PropType<'card' | 'divide'>,\n    default: 'card',\n  },\n})\n\nconst prefixCls = `${stylePrefix}-array-items`\n</script>\n\n<template>\n  <div\n    :class=\"`${prefixCls}-${props.type}`\"\n  >\n    <slot />\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport type { ArrayField } from '@formily/core'\nimport { isArr } from '@formily/shared'\nimport { autorunEffect } from '@silver-formily/reactive-vue'\nimport { RecursionField, useField, useFieldSchema } from '@silver-formily/vue'\nimport { ref } from 'vue'\nimport { VueDraggable } from 'vue-draggable-plus'\nimport { useCleanAttrs } from '../__builtins__'\nimport { stylePrefix } from '../__builtins__/configs'\nimport { ArrayBase } from '../array-base'\nimport { getArrayItemSchema, isAdditionComponent, useKey } from '../array-base/utils'\n\ndefineOptions({\n  name: 'FArrayItems',\n  inheritAttrs: false,\n})\n\nconst fieldRef = useField<ArrayField>()\nconst schemaRef = useFieldSchema()\nconst field = fieldRef.value\nconst schema = schemaRef.value\n\nconst prefixCls = `${stylePrefix}-array-items`\nconst { getKey, keyMap } = useKey(schemaRef.value)\nconst dataSource = ref(isArr(field.value) ? field.value : [])\nconst triggerUpdateKey = ref(0)\n\nautorunEffect(() => {\n  dataSource.value = isArr(field.value) ? [...field.value] : []\n})\n\nasync function handleDragEnd(evt: { oldIndex: number, newIndex: number }) {\n  const { oldIndex, newIndex } = evt\n  if (isArr(keyMap)) {\n    keyMap.splice(newIndex, 0, keyMap.splice(oldIndex, 1)[0])\n  }\n  await field.move(oldIndex, newIndex)\n  triggerUpdateKey.value++\n}\nconst { props: arrayItemsProps } = useCleanAttrs(['value', 'modelValue', 'onUpdate:modelValue'])\n</script>\n\n<template>\n  <div :class=\"prefixCls\" v-bind=\"arrayItemsProps\">\n    <ArrayBase :key=\"triggerUpdateKey\" :key-map=\"keyMap\">\n      <VueDraggable\n        :class=\"`${prefixCls}-list`\"\n        :model-value=\"dataSource\"\n        :handle=\"`.${stylePrefix}-array-base-sort-handle`\"\n        :animation=\"150\"\n        @end=\"handleDragEnd\"\n      >\n        <ArrayBase.Item\n          v-for=\"(element, index) of dataSource\"\n          :key=\"getKey(element, index)\"\n          :index=\"index\"\n          :record=\"element\"\n        >\n          <div :key=\"getKey(element, index)\" :class=\"[`${prefixCls}-item-inner`]\" :index=\"index\">\n            <RecursionField :schema=\"getArrayItemSchema(schema, index)\" :name=\"index\" />\n          </div>\n        </ArrayBase.Item>\n      </VueDraggable>\n\n      <template v-for=\"(itemSchema, key) of schema.properties\" :key=\"key\">\n        <RecursionField v-if=\"isAdditionComponent(itemSchema)\" :schema=\"itemSchema\" name=\"addition\" />\n      </template>\n    </ArrayBase>\n  </div>\n</template>\n","import { composeExport } from '../__builtins__/shared'\nimport { ArrayBase } from '../array-base'\nimport ArrayItemsItem from './array-items-item.vue'\nimport ArrayItemsInner from './array-items.vue'\nimport './style.scss'\n\nexport const ArrayItems = composeExport(ArrayItemsInner, {\n  Item: ArrayItemsItem,\n  Index: ArrayBase.Index,\n  SortHandle: ArrayBase.SortHandle,\n  Addition: ArrayBase.Addition,\n  Remove: ArrayBase.Remove,\n  MoveDown: ArrayBase.MoveDown,\n  MoveUp: ArrayBase.MoveUp,\n  useArray: ArrayBase.useArray,\n  useIndex: ArrayBase.useIndex,\n  useRecord: ArrayBase.useRecord,\n})\n\nexport default ArrayItems\n"],"names":["props","__props","prefixCls","stylePrefix","_createElementBlock","_normalizeClass","_renderSlot","_ctx","fieldRef","useField","schemaRef","useFieldSchema","field","schema","getKey","keyMap","useKey","dataSource","ref","isArr","triggerUpdateKey","autorunEffect","handleDragEnd","evt","oldIndex","newIndex","arrayItemsProps","useCleanAttrs","_openBlock","_mergeProps","_unref","_createBlock","ArrayBase","_createVNode","VueDraggable","_Fragment","_renderList","element","index","RecursionField","getArrayItemSchema","itemSchema","key","isAdditionComponent","ArrayItems","composeExport","ArrayItemsInner","ArrayItemsItem"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["ArrayItemsInner","ArrayItemsItem"],"sources":["../../src/array-items/index.ts"],"sourcesContent":["import { composeExport } from '../__builtins__/shared'\nimport { ArrayBase } from '../array-base'\nimport ArrayItemsItem from './array-items-item.vue'\nimport ArrayItemsInner from './array-items.vue'\nimport './style.scss'\n\nexport const ArrayItems = composeExport(ArrayItemsInner, {\n  Item: ArrayItemsItem,\n  Index: ArrayBase.Index,\n  SortHandle: ArrayBase.SortHandle,\n  Addition: ArrayBase.Addition,\n  Remove: ArrayBase.Remove,\n  MoveDown: ArrayBase.MoveDown,\n  MoveUp: ArrayBase.MoveUp,\n  useArray: ArrayBase.useArray,\n  useIndex: ArrayBase.useIndex,\n  useRecord: ArrayBase.useRecord,\n})\n\nexport default ArrayItems\n"],"mappings":";;;;;;AAMA,MAAa,aAAa,cAAcA,aAAiB;CACvD,MAAMC;CACN,OAAO,UAAU;CACjB,YAAY,UAAU;CACtB,UAAU,UAAU;CACpB,QAAQ,UAAU;CAClB,UAAU,UAAU;CACpB,QAAQ,UAAU;CAClB,UAAU,UAAU;CACpB,UAAU,UAAU;CACpB,WAAW,UAAU;CACtB,CAAC"}

package/esm/array-items/style.css

@@ -0,0 +1,22 @@
+.formily-element-plus-array-items {
+  width: 100%;
+}
+.formily-element-plus-array-items .formily-element-plus-array-items-item-inner:last-child .formily-element-plus-array-items-divide {
+  border-bottom: none;
+}
+
+.formily-element-plus-array-items-card {
+  display: flex;
+  border: 1px solid var(--el-border-color);
+  margin-bottom: 10px;
+  padding: 3px 6px;
+  background: var(--el-bg-color-overlay);
+  justify-content: space-between;
+}
+
+.formily-element-plus-array-items-divide {
+  display: flex;
+  border-bottom: 1px solid var(--el-border-color);
+  padding-top: 10px;
+  justify-content: space-between;
+}