@vunk/form 2.3.3 → 2.5.0

package/components/information-templates-default/index.mjs

@@ -0,0 +1,190 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, toDisplayString } from 'vue';
+import { VkfFormItemRendererTemplate } from '@vunk/form/components/form-item-renderer-template';
+import { VkfFormItem } from '@vunk/form/components/form-item';
+import { VkfSelect } from '@vunk/form/components/select';
+import { VkfTagInformation } from '@vunk/form/components/tag-information';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {};
+const emits = {};
+
+var _sfc_main = defineComponent({
+  name: "VkfInformationTemplatesDefault",
+  components: {
+    VkfFormItem,
+    VkfFormItemRendererTemplate,
+    VkfTagInformation,
+    VkfSelect
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const prefixCls = "vkf-information-templates-default";
+    const simpleStringTemplates = [
+      "VkfInput",
+      "VkfInputNumber",
+      "VkfSlider"
+    ];
+    const simpleSelectTemplates = [
+      "VkfSelect",
+      "VkfRadio"
+    ];
+    const simpleCollectionTemplates = [
+      "VkfInputCollection"
+    ];
+    return {
+      prefixCls,
+      simpleStringTemplates,
+      simpleSelectTemplates,
+      simpleCollectionTemplates
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  const _component_VkfFormItemRendererTemplate = resolveComponent("VkfFormItemRendererTemplate");
+  const _component_VkfSelect = resolveComponent("VkfSelect");
+  const _component_VkfTagInformation = resolveComponent("VkfTagInformation");
+  return openBlock(), createElementBlock(
+    Fragment,
+    null,
+    [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.simpleStringTemplates, (t) => {
+          return openBlock(), createBlock(_component_VkfFormItemRendererTemplate, {
+            key: t,
+            type: t
+          }, {
+            default: withCtx(({ props, value }) => [
+              createVNode(_component_VkfFormItem, {
+                class: normalizeClass(`${_ctx.prefixCls}-main`),
+                label: props.label,
+                prop: props.prop,
+                information: true
+              }, {
+                default: withCtx(() => [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(`${_ctx.prefixCls}-value`)
+                    },
+                    toDisplayString(value),
+                    3
+                    /* TEXT, CLASS */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["class", "label", "prop"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["type"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.simpleSelectTemplates, (t) => {
+          return openBlock(), createBlock(_component_VkfFormItemRendererTemplate, {
+            key: t,
+            type: t
+          }, {
+            default: withCtx(({ props, value }) => [
+              createVNode(_component_VkfSelect, {
+                label: props.label,
+                information: true,
+                class: normalizeClass(`${_ctx.prefixCls}-main`),
+                readonly: true,
+                "model-value": value,
+                options: props.options
+              }, null, 8, ["label", "class", "model-value", "options"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["type"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.simpleCollectionTemplates, (t) => {
+          return openBlock(), createBlock(_component_VkfFormItemRendererTemplate, {
+            key: t,
+            type: t
+          }, {
+            default: withCtx(({ props, value }) => [
+              createVNode(_component_VkfFormItem, {
+                class: normalizeClass(`${_ctx.prefixCls}-main`),
+                label: props.label,
+                prop: props.prop,
+                information: true
+              }, {
+                default: withCtx(() => [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(`${_ctx.prefixCls}-value`)
+                    },
+                    [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(value, (item, index) => {
+                          return openBlock(), createBlock(_component_VkfTagInformation, {
+                            key: index,
+                            "label-render": props.summaryLabel,
+                            data: item,
+                            "form-items": props.columns.map((v) => {
+                              return {
+                                ...v,
+                                ...v.templateProps,
+                                ...v.templateProps?.createTemplateProps?.({
+                                  row: item
+                                })
+                              };
+                            })
+                          }, null, 8, ["label-render", "data", "form-items"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["class", "label", "prop"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["type"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var VkfInformationTemplatesDefault = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/information-templates-default/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfInformationTemplatesDefault.install = (app) => {
+  app.component(VkfInformationTemplatesDefault.name || "VkfInformationTemplatesDefault", VkfInformationTemplatesDefault);
+};
+
+export { VkfInformationTemplatesDefault, types as __VkfInformationTemplatesDefault, VkfInformationTemplatesDefault as default };

package/components/information-templates-default/src/ctx.d.ts

@@ -0,0 +1,2 @@
+export declare const props: {};
+export declare const emits: {};

package/components/information-templates-default/src/index.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    prefixCls: string;
+    simpleStringTemplates: string[];
+    simpleSelectTemplates: readonly ["VkfSelect", "VkfRadio"];
+    simpleCollectionTemplates: string[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    VkfFormItem: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
+    VkfFormItemRendererTemplate: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
+    VkfTagInformation: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
+    VkfSelect: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/information-templates-default/src/types.d.ts

@@ -0,0 +1 @@
+export {};

package/components/input/src/ctx.d.ts

@@ -47,6 +47,10 @@ export declare const props: {
         type: StringConstructor;
         default: any;
     };
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
@@ -142,7 +146,7 @@ export declare const props: {
     inputStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{}>, boolean>;
     autofocus: BooleanConstructor;
 };
-export declare const createBindProps: <T2 extends import("@vunk/core").NormalObject, EX extends (Extract<"size", keyof T2> | Extract<"type", keyof T2> | Extract<"required", keyof T2> | Extract<"formItemSize", keyof T2> | Extract<"formItemSlots", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"formItemTip", keyof T2> | Extract<"formItemTipClass", keyof T2> | Extract<"labelTip", keyof T2> | Extract<"label", keyof T2> | Extract<"labelWidth", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"prop", keyof T2> | Extract<"rules", keyof T2> | Extract<"error", keyof T2> | Extract<"validateStatus", keyof T2> | Extract<"for", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"disabled", keyof T2> | Extract<"id", keyof T2> | Extract<"ariaLabel", keyof T2> | Extract<"modelValue", keyof T2> | Extract<"clearable", keyof T2> | Extract<"placeholder", keyof T2> | Extract<"formatter", keyof T2> | Extract<"autofocus", keyof T2> | Extract<"rows", keyof T2> | Extract<"validateEvent", keyof T2> | Extract<"tabindex", keyof T2> | Extract<"prefixIcon", keyof T2> | Extract<"maxlength", keyof T2> | Extract<"minlength", keyof T2> | Extract<"resize", keyof T2> | Extract<"autosize", keyof T2> | Extract<"autocomplete", keyof T2> | Extract<"parser", keyof T2> | Extract<"form", keyof T2> | Extract<"showPassword", keyof T2> | Extract<"showWordLimit", keyof T2> | Extract<"suffixIcon", keyof T2> | Extract<"containerRole", keyof T2> | Extract<"inputStyle", keyof T2> | Extract<"inputSlots", keyof T2>)[]>(propsArg: T2, excludes?: EX) => import("vue").ComputedRef<{ [P in EX extends (infer KE)[] ? Exclude<Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>, KE> : Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>]: { [k in Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>]: T2[k]; }[P]; }>;
+export declare const createBindProps: <T2 extends import("@vunk/core").NormalObject, EX extends (Extract<"size", keyof T2> | Extract<"type", keyof T2> | Extract<"required", keyof T2> | Extract<"formItemSize", keyof T2> | Extract<"formItemSlots", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"formItemTip", keyof T2> | Extract<"formItemTipClass", keyof T2> | Extract<"labelTip", keyof T2> | Extract<"information", keyof T2> | Extract<"label", keyof T2> | Extract<"labelWidth", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"prop", keyof T2> | Extract<"rules", keyof T2> | Extract<"error", keyof T2> | Extract<"validateStatus", keyof T2> | Extract<"for", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"disabled", keyof T2> | Extract<"id", keyof T2> | Extract<"ariaLabel", keyof T2> | Extract<"modelValue", keyof T2> | Extract<"clearable", keyof T2> | Extract<"placeholder", keyof T2> | Extract<"formatter", keyof T2> | Extract<"autofocus", keyof T2> | Extract<"rows", keyof T2> | Extract<"validateEvent", keyof T2> | Extract<"tabindex", keyof T2> | Extract<"prefixIcon", keyof T2> | Extract<"maxlength", keyof T2> | Extract<"minlength", keyof T2> | Extract<"resize", keyof T2> | Extract<"autosize", keyof T2> | Extract<"autocomplete", keyof T2> | Extract<"parser", keyof T2> | Extract<"form", keyof T2> | Extract<"showPassword", keyof T2> | Extract<"showWordLimit", keyof T2> | Extract<"suffixIcon", keyof T2> | Extract<"containerRole", keyof T2> | Extract<"inputStyle", keyof T2> | Extract<"inputSlots", keyof T2>)[]>(propsArg: T2, excludes?: EX) => import("vue").ComputedRef<{ [P in EX extends (infer KE)[] ? Exclude<Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "information" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>, KE> : Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "information" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>]: { [k in Extract<"size" | "type" | "required" | "formItemSize" | "formItemSlots" | "elRef" | "inline" | "readonly" | "formItemTip" | "formItemTipClass" | "labelTip" | "information" | "label" | "labelWidth" | "labelPosition" | "prop" | "rules" | "error" | "validateStatus" | "for" | "inlineMessage" | "showMessage" | "disabled" | "id" | "ariaLabel" | "modelValue" | "clearable" | "placeholder" | "formatter" | "autofocus" | "rows" | "validateEvent" | "tabindex" | "prefixIcon" | "maxlength" | "minlength" | "resize" | "autosize" | "autocomplete" | "parser" | "form" | "showPassword" | "showWordLimit" | "suffixIcon" | "containerRole" | "inputStyle" | "inputSlots", keyof T2>]: T2[k]; }[P]; }>;
 export declare const emits: {
     "update:modelValue": (value: string) => boolean;
     input: (value: string) => boolean;

package/components/input/src/index.vue.d.ts

@@ -45,6 +45,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: any;
     };
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
@@ -231,6 +235,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: any;
     };
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
@@ -348,6 +356,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     formItemTip: string;
     formItemTipClass: any;
     labelTip: string;
+    information: boolean;
     labelWidth: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     labelPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "top" | "left" | "right", unknown>;
     inlineMessage: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, BooleanConstructor], unknown, unknown>;

package/components/input-collection/index.cjs

@@ -13,6 +13,7 @@ var formItemRenderer = require('@vunk/form/components/form-item-renderer');
 var core = require('@vunk/core');
 var index = require('../index2.cjs');
 var rendererData = require('@vunk/form/components/renderer-data');
+var fieldset = require('@vunk/form/components/fieldset');
 var cloneDeep = require('../cloneDeep.cjs');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 require('../isObject.cjs');
@@ -39,9 +40,18 @@ const props = {
     default: true
   },
   /**
-   * @description Table中的模板是否继承父级表单的模板
+   * @description 简述一行的内容, 用于 Infomation
    */
-  inheritTemplates: {
+  summaryLabel: {
+    type: Function,
+    default: (data) => {
+      return Object.values(data).join(" ");
+    }
+  },
+  /**
+   * @description 开启 form-item 的 label 上的操作区域, 在labelPosition为top时生效
+   */
+  labelActions: {
     type: Boolean,
     default: false
   }
@@ -95,49 +105,107 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         };
       });
     });
+    const expandFormItemRaws = vue.computed(() => props2.columns.filter(e => e.expandVisible));
+    const expandColumn = {
+      type: "expand",
+      slots: e => {
+        const source = expandFormItemRaws.value.map(column => {
+          return {
+            prop: [props2.prop ?? [], e.$index, column.prop].flat(),
+            label: column.label,
+            templateType: column.templateType,
+            readonly: readonly.value,
+            ...column.templateProps,
+            ...column.createTemplateProps?.(e),
+            class: "vk-input-collection__expand-form-item"
+          };
+        });
+        return vue.createVNode(fieldset.VkfFieldset, {
+          "class": "vk-input-collection__expand-fieldset",
+          "label-width": "auto"
+        }, {
+          default: () => [vue.createVNode(formItemRenderer.VkfFormItemRenderer, {
+            "source": source
+          }, null)]
+        });
+      }
+    };
     const buttonsColumn = vue.computed(() => ({
       label: "\u64CD\u4F5C",
       align: "center",
-      width: "120px",
+      width: "85",
       hidden: readonly.value || !props2.splicable,
+      className: "vk-input-collection__buttons",
       slots: ({
         $index
       }) => vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
         "size": "small",
         "icon": index.plus_default,
+        "circle": true,
         "onClick": () => handlePlus($index)
       }, null), vue.createVNode(elementPlus.ElButton, {
         "size": "small",
         "icon": index.minus_default,
+        "circle": true,
         "onClick": () => handleMinus($index)
       }, null)])
     }));
+    const allColumns = vue.computed(() => {
+      const data = [...fullColumns.value, buttonsColumn.value];
+      if (expandFormItemRaws.value.length) {
+        data.unshift(expandColumn);
+      }
+      return data;
+    });
     function handlePlus(index) {
       const data = cloneDeep.cloneDeep(props2.modelValue);
       data.splice(index + 1, 0, {});
       emit("update:modelValue", data);
+      setExpandRowKeys([]);
     }
     function handleMinus(index) {
       const data = cloneDeep.cloneDeep(props2.modelValue);
       data.splice(index, 1);
       emit("update:modelValue", data);
+      setExpandRowKeys([]);
     }
     const addToFirst = () => {
       emit("update:modelValue", [{}, ...props2.modelValue]);
+      setExpandRowKeys([]);
     };
     const handleFormSetData = e => {
       const data = cloneDeep.cloneDeep(formData.value);
       core.ensetData(data, e);
       emit("update:modelValue", core.getValue(data, props2.prop));
     };
+    const ROW_KEY = "_row_key";
+    const tableData = vue.computed(() => {
+      return props2.modelValue.map((e, index) => {
+        return {
+          ...e,
+          [ROW_KEY]: index + ""
+        };
+      });
+    });
+    const expandRowKeys = vue.ref([]);
+    const handleExpandChange = (row, expandedRows) => {
+      expandRowKeys.value = expandedRows.map(e => e[ROW_KEY]);
+    };
+    function setExpandRowKeys(v) {
+      expandRowKeys.value = v;
+    }
     return {
       addToFirst,
       formItemBindProps,
       readonly,
-      fullColumns,
-      buttonsColumn,
       handleFormSetData,
-      formData
+      formData,
+      Plus: index.plus_default,
+      expandRowKeys,
+      handleExpandChange,
+      tableData,
+      ROW_KEY,
+      allColumns
     };
   }
 });
@@ -154,9 +222,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfFormItem = vue.resolveComponent("VkfFormItem");
   const _component_VkfRendererData = vue.resolveComponent("VkfRendererData");
   const _component_VkfTemplateInstancesProvider = vue.resolveComponent("VkfTemplateInstancesProvider");
-  return vue.openBlock(), vue.createBlock(_component_VkfTemplateInstancesProvider, { "inherit-templates": _ctx.inheritTemplates }, {
+  return vue.openBlock(), vue.createBlock(_component_VkfTemplateInstancesProvider, null, {
+    placeholder: vue.withCtx(() => [
+      vue.createVNode(_component_VkfTemplatesDefault)
+    ]),
     default: vue.withCtx(() => [
-      !_ctx.inheritTemplates ? (vue.openBlock(), vue.createBlock(_component_VkfTemplatesDefault, { key: 0 })) : vue.createCommentVNode("v-if", true),
       vue.createVNode(_component_VkfRendererData, {
         data: _ctx.formData,
         onSetData: _ctx.handleFormSetData
@@ -165,14 +235,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           vue.createVNode(
             _component_VkfFormItem,
             vue.normalizeProps(vue.guardReactiveProps(_ctx.formItemBindProps)),
-            {
+            vue.createSlots({
               default: vue.withCtx(() => [
-                !_ctx.readonly && _ctx.splicable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                !_ctx.readonly && _ctx.splicable && !_ctx.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
                   vue.createVNode(_component_ElButton, {
                     type: "primary",
                     onClick: _ctx.addToFirst
                   }, {
-                    default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                    default: vue.withCtx(() => _cache[1] || (_cache[1] = [
                       vue.createTextVNode(" \u6DFB\u52A0 ")
                     ])),
                     _: 1
@@ -180,26 +250,43 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   }, 8, ["onClick"])
                 ])) : vue.createCommentVNode("v-if", true),
                 vue.createVNode(_component_ElTable, {
-                  data: _ctx.modelValue,
-                  class: "vkf-input-collection-table"
+                  data: _ctx.tableData,
+                  class: "vkf-input-collection-table",
+                  "row-key": _ctx.ROW_KEY,
+                  "expand-row-keys": _ctx.expandRowKeys,
+                  "default-expand-all": "",
+                  onExpandChange: _ctx.handleExpandChange
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_component_VkTableColumns, {
-                      source: [
-                        ..._ctx.fullColumns,
-                        _ctx.buttonsColumn
-                      ]
-                    }, null, 8, ["source"])
+                    vue.createVNode(_component_VkTableColumns, { source: _ctx.allColumns }, null, 8, ["source"])
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["data"])
+                }, 8, ["data", "row-key", "expand-row-keys", "onExpandChange"])
               ]),
-              _: 1
-              /* STABLE */
-            },
-            16
-            /* FULL_PROPS */
+              _: 2
+              /* DYNAMIC */
+            }, [
+              !_ctx.readonly && _ctx.splicable && _ctx.labelActions ? {
+                name: "labelActions",
+                fn: vue.withCtx(() => [
+                  vue.createVNode(_component_ElButton, {
+                    size: "small",
+                    icon: _ctx.Plus,
+                    onClick: _ctx.addToFirst
+                  }, {
+                    default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                      vue.createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["icon", "onClick"])
+                ]),
+                key: "0"
+              } : void 0
+            ]),
+            1040
+            /* FULL_PROPS, DYNAMIC_SLOTS */
           )
         ]),
         _: 1
@@ -208,7 +295,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 1
     /* STABLE */
-  }, 8, ["inherit-templates"]);
+  });
 }
 var VkfInputCollection = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/input-collection/src/index.vue"]]);
 

package/components/input-collection/index.css

@@ -9,3 +9,12 @@
 .vkf-input-collection-table .vkf-form-item {
   margin-bottom: 0;
 }
+.vkf-input-collection-table .vk-input-collection__expand-form-item {
+  margin-bottom: 18px;
+}
+.vk-input-collection__expand-fieldset{
+  padding: 8px;
+}
+.vk-input-collection__buttons .cell{
+  padding: 0;
+}