@ibiz-template/vue3-components 0.3.5 → 0.3.6-dev.0

package/es/control/form/edit-form/edit-form.mjs

@@ -1,4 +1,4 @@
-import { reactive, resolveComponent, createVNode, defineComponent } from 'vue';
+import { watch, reactive, resolveComponent, createVNode, defineComponent } from 'vue';
 import { EditFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 
@@ -35,9 +35,24 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
-    const c = useControlController((...args) => new EditFormController(...args));
+    const c = useControlController((...args) => new EditFormController(...args), {
+      excludePropsKeys: ["data"]
+    });
     if (props.isSimple) {
-      c.state.isLoaded = true;
+      c.evt.on("onMounted", () => {
+        c.setSimpleData(props.data || {});
+      });
+      watch(() => props.data, (newVal) => {
+        const changeVal = newVal || {};
+        const find = Object.keys(c.data).find((key) => {
+          return changeVal[key] !== c.data[key];
+        });
+        if (find) {
+          c.setSimpleData(changeVal);
+        }
+      }, {
+        deep: true
+      });
     }
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     c.evt.on("onCreated", () => {

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.css

@@ -0,0 +1 @@
+.ibiz-form-mdctrl-form-item{display:flex}.ibiz-form-mdctrl-form-item__form{flex-grow:1}.ibiz-form-mdctrl-form-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-form-mdctrl-form-item-actions .el-button+.el-button{margin-left:0}.ibiz-form-mdctrl-form-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl-form-no-data{width:100%;display:flex;justify-content:flex-end}

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.d.ts

@@ -1,17 +1,18 @@
-import { PropType } from 'vue';
-import { FormMDCtrlFormController } from '@ibiz-template/runtime';
+import { EventBase, FormMDCtrlFormController } from '@ibiz-template/runtime';
+import './form-mdctrl-form.scss';
 export declare const FormMDCtrlForm: import("vue").DefineComponent<{
     controller: {
-        type: PropType<FormMDCtrlFormController>;
+        type: typeof FormMDCtrlFormController;
         required: true;
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
-    c: FormMDCtrlFormController;
+    showActions: import("vue").ComputedRef<boolean>;
+    onCreated: (id: string, event: EventBase) => void;
+    renderAddBtn: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
-        type: PropType<FormMDCtrlFormController>;
+        type: typeof FormMDCtrlFormController;
         required: true;
     };
 }>>, {}, {}>;
-export default FormMDCtrlForm;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.mjs

@@ -1,75 +1,73 @@
-import { isVNode, reactive, resolveComponent, h, createTextVNode, createVNode, defineComponent } from 'vue';
-import { useNamespace, useController } from '@ibiz-template/vue3-util';
-import { calcDeCodeNameById } from '@ibiz-template/runtime';
-import { FormMDCtrlContainer } from '../form-mdctrl-container/form-mdctrl-container.mjs';
+import { computed, resolveComponent, createTextVNode, createVNode, h, defineComponent } from 'vue';
+import { FormMDCtrlFormController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-mdctrl-form.css';
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
   name: "IBizFormMDCtrlForm",
   props: {
     controller: {
-      type: Object,
+      type: FormMDCtrlFormController,
       required: true
     }
   },
   setup(props) {
-    const ns = useNamespace("form-mdctrl");
-    useController(props.controller);
-    const c = props.controller;
-    c.state = reactive(c.state);
+    const ns = useNamespace("form-mdctrl-form");
+    const showActions = computed(() => {
+      return props.controller.enableCreate || props.controller.enableDelete;
+    });
+    const renderAddBtn = () => {
+      return createVNode(resolveComponent("el-button"), {
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "onClick": () => props.controller.create()
+      }, {
+        default: () => [createTextVNode("\u6DFB\u52A0")]
+      });
+    };
+    const onCreated = (id, event) => {
+      props.controller.setFormController(id, event.ctrl);
+    };
     return {
       ns,
-      c
+      showActions,
+      onCreated,
+      renderAddBtn
     };
   },
   render() {
-    let _slot;
-    const c = this.c;
-    const renderContent = () => {
-      if (c.controlModel && c.provider) {
-        return c.state.data.map((item, index) => {
-          const tempContext = c.parent.form.context.clone();
-          if (c.model.contentControl) {
-            const codeName = calcDeCodeNameById(c.model.contentControl.appDataEntityId);
-            tempContext[codeName] = item.srfkey;
+    const {
+      state,
+      formProvider,
+      model
+    } = this.controller;
+    return createVNode(resolveComponent("iBizMDCtrlContainer"), {
+      "class": this.ns.b(),
+      "items": state.items,
+      "enableCreate": this.controller.enableCreate,
+      "enableDelete": this.controller.enableDelete,
+      "onAddClick": () => this.controller.create(),
+      "onRemoveClick": (item) => this.controller.remove(item.id)
+    }, {
+      item: ({
+        data
+      }) => {
+        if (!formProvider) {
+          return createVNode("div", null, [createTextVNode("\u672A\u627E\u5230\u8868\u5355\u7684\u9002\u914D\u5668")]);
+        }
+        const formComponent = h(resolveComponent(formProvider.component), {
+          class: this.ns.be("item", "form"),
+          modelData: model.contentControl,
+          context: data.context,
+          params: data.params,
+          onCreated: (event) => {
+            this.onCreated(data.id, event);
           }
-          const controlProps = {
-            modelData: c.controlModel,
-            context: tempContext,
-            params: c.parent.form.params,
-            onFormDataChange: (arg) => c.onFormChange(arg.data, index),
-            onRemoveSuccess: () => c.onFormRemoveSuccess(index),
-            onCreated: (event) => c.onControlCreated(event, index)
-          };
-          const controlComponent = h(resolveComponent(c.provider.component), controlProps);
-          return createVNode("div", {
-            "class": this.ns.b("form-content"),
-            "key": item.srfkey
-          }, [controlComponent, createVNode("div", {
-            "class": this.ns.b("btn")
-          }, [c.parent.isDelete && createVNode(resolveComponent("el-button"), {
-            "type": "danger",
-            "class": this.ns.b("remove-btn"),
-            "onClick": () => this.c.onDataRemove(index)
-          }, {
-            default: () => [createTextVNode("\u5220\u9664")]
-          })])]);
         });
+        return formComponent;
       }
-    };
-    return createVNode(FormMDCtrlContainer, {
-      "class": this.ns.b("form"),
-      "controller": c.parent,
-      "onInsertButtonClick": () => {
-        c.onDataInsert();
-      }
-    }, _isSlot(_slot = renderContent()) ? _slot : {
-      default: () => [_slot]
     });
   }
 });
 
-export { FormMDCtrlForm, FormMDCtrlForm as default };
+export { FormMDCtrlForm };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.css

@@ -0,0 +1 @@
+.ibiz-form-mdctrl-md{display:flex}.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-form-mdctrl-md-actions .el-button+.el-button{margin-left:0}.ibiz-form-mdctrl-md-actions__btn{margin-bottom:var(--ibiz-spacing-tight)}

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.d.ts

@@ -0,0 +1,19 @@
+import { EventBase, FormMDCtrlMDController } from '@ibiz-template/runtime';
+import './form-mdctrl-md.scss';
+export declare const FormMDCtrlMD: import("vue").DefineComponent<{
+    controller: {
+        type: typeof FormMDCtrlMDController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    showActions: import("vue").ComputedRef<boolean>;
+    isSelected: import("vue").Ref<boolean>;
+    onCreated: (event: EventBase) => void;
+    onSelectionChange: (event: EventBase) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: typeof FormMDCtrlMDController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.mjs

@@ -0,0 +1,72 @@
+import { computed, ref, resolveComponent, h, createTextVNode, createVNode, defineComponent } from 'vue';
+import { FormMDCtrlMDController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-mdctrl-md.css';
+
+"use strict";
+const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
+  name: "IBizFormMDCtrlMD",
+  props: {
+    controller: {
+      type: FormMDCtrlMDController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-mdctrl-md");
+    const showActions = computed(() => {
+      return props.controller.enableCreate || props.controller.enableDelete;
+    });
+    const onCreated = (event) => {
+      props.controller.setMDControl(event.ctrl);
+    };
+    const isSelected = ref(false);
+    const onSelectionChange = (event) => {
+      isSelected.value = event.data.length > 0;
+    };
+    return {
+      ns,
+      showActions,
+      isSelected,
+      onCreated,
+      onSelectionChange
+    };
+  },
+  render() {
+    const {
+      mdProvider,
+      model
+    } = this.controller;
+    const controlProps = {
+      class: this.ns.b("content"),
+      modelData: model.contentControl,
+      context: this.controller.form.context,
+      params: this.controller.form.params,
+      onCreated: this.onCreated,
+      onSelectionChange: this.onSelectionChange
+    };
+    if (model.contentType === "GRID") {
+      controlProps.rowEditOpen = true;
+    }
+    const controlComponent = h(resolveComponent(mdProvider.component), controlProps);
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [controlComponent, this.showActions && createVNode("div", {
+      "class": this.ns.b("actions")
+    }, [this.controller.enableCreate && createVNode(resolveComponent("el-button"), {
+      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn")],
+      "onClick": () => this.controller.create()
+    }, {
+      default: () => [createTextVNode("\u6DFB\u52A0")]
+    }), this.controller.enableDelete && createVNode(resolveComponent("el-button"), {
+      "type": "danger",
+      "disabled": !this.isSelected,
+      "class": [this.ns.be("actions", "remove"), this.ns.be("actions", "btn")],
+      "onClick": () => this.controller.remove()
+    }, {
+      default: () => [createTextVNode("\u5220\u9664")]
+    })])]);
+  }
+});
+
+export { FormMDCtrlMD };

package/es/control/form/form-detail/form-mdctrl/{form-mdctrl-data-view/form-mdctrl-data-view.d.ts → form-mdctrl-repeater/form-mdctrl-repeater.d.ts}

@@ -1,17 +1,15 @@
-import { PropType } from 'vue';
-import { FormMDCtrlDataViewController } from '@ibiz-template/runtime';
-export declare const FormMDCtrlDataView: import("vue").DefineComponent<{
+import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
+export declare const FormMDCtrlRepeater: import("vue").DefineComponent<{
     controller: {
-        type: PropType<FormMDCtrlDataViewController>;
+        type: typeof FormMDCtrlRepeaterController;
         required: true;
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
-    c: FormMDCtrlDataViewController;
+    onDataChange: (data: IData | IData[] | null) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
-        type: PropType<FormMDCtrlDataViewController>;
+        type: typeof FormMDCtrlRepeaterController;
         required: true;
     };
 }>>, {}, {}>;
-export default FormMDCtrlDataView;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.mjs

@@ -0,0 +1,57 @@
+import { createTextVNode, createVNode, defineComponent } from 'vue';
+import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { RepeaterSingleForm } from './repeater-single-form/repeater-single-form.mjs';
+import { RepeaterMultiForm } from './repeater-multi-form/repeater-multi-form.mjs';
+import { RepeaterGrid } from './repeater-grid/repeater-grid.mjs';
+
+"use strict";
+const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
+  name: "IBizFormMDCtrlRepeater",
+  props: {
+    controller: {
+      type: FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-mdctrl-repeater");
+    const onDataChange = (data) => {
+      props.controller.setValue(data);
+    };
+    return {
+      ns,
+      onDataChange
+    };
+  },
+  render() {
+    const classNames = [this.ns.b()];
+    switch (this.controller.repeaterStyle) {
+      case "MultiForm":
+        return createVNode(RepeaterMultiForm, {
+          "class": classNames,
+          "onChange": this.onDataChange,
+          "controller": this.controller
+        }, null);
+      case "Grid":
+        return createVNode(RepeaterGrid, {
+          "class": classNames,
+          "controller": this.controller,
+          "onChange": this.onDataChange
+        }, null);
+      case "SingleForm":
+        return createVNode(RepeaterSingleForm, {
+          "class": classNames,
+          "data": this.controller.value,
+          "controller": this.controller,
+          "onChange": this.onDataChange
+        }, null);
+      default:
+        return createVNode("div", {
+          "class": classNames
+        }, [createTextVNode("\u6682\u672A\u652F\u6301\u91CD\u590D\u5668\u6837\u5F0F"), this.controller.repeaterStyle]);
+    }
+  }
+});
+
+export { FormMDCtrlRepeater };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.css

@@ -0,0 +1 @@
+.ibiz-repeater-grid{position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-color-danger)}.ibiz-repeater-grid-index .cell{padding:4px}.ibiz-repeater-grid-index__remove{display:none}

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.d.ts

@@ -0,0 +1,2 @@
+import './repeater-grid.scss';
+export declare const RepeaterGrid: any;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.mjs

@@ -0,0 +1,203 @@
+import { isVNode, reactive, watch, resolveComponent, createTextVNode, createVNode, h, defineComponent } from 'vue';
+import { FormMDCtrlRepeaterController, EditFormController } from '@ibiz-template/runtime';
+import { useNamespace, useCtx } from '@ibiz-template/vue3-util';
+import './repeater-grid.css';
+import { recursiveIterate } from '@ibiz-template/core';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const RepeaterGrid = /* @__PURE__ */ defineComponent({
+  name: "IBizRepeaterGrid",
+  props: {
+    controller: {
+      type: FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("repeater-grid");
+    const formItems = [];
+    recursiveIterate(props.controller.repeatedForm, (item) => {
+      if (item.detailType === "FORMITEM") {
+        formItems.push(item);
+      }
+    }, {
+      childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
+    });
+    const onSingleValueChange = (value, index) => {
+      const arrData = [...props.controller.value];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    const ctx = useCtx();
+    const formControllers = reactive([]);
+    const addFormController = async (data = {}) => {
+      const formC = new EditFormController(props.controller.repeatedForm, props.controller.context, props.controller.params, ctx);
+      formC.state.isSimple = true;
+      await formC.created();
+      formC.setSimpleData(data);
+      formControllers.push(formC);
+      formC.evt.on("onFormDataChange", (event) => {
+        const formData = {
+          ...event.data[0]
+        };
+        const index = formControllers.indexOf(formC);
+        onSingleValueChange(formData, index);
+      });
+    };
+    watch(() => props.controller.value, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        newVal.forEach((item, index) => {
+          const formC = formControllers[index];
+          if (formC) {
+            const changeVal = item || {};
+            const find = Object.keys(formC.data).find((key) => {
+              return changeVal[key] !== formC.data[key];
+            });
+            if (find) {
+              formC.setSimpleData(changeVal);
+            }
+          } else {
+            addFormController(item);
+          }
+        });
+        if (newVal.length < formControllers.length) {
+          formControllers.forEach((c, index) => {
+            if (index >= newVal.length) {
+              c.state.isLoaded = false;
+            }
+          });
+        }
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const renderRemoveBtn = (index) => {
+      if (!props.controller.enableDelete) {
+        return null;
+      }
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return createVNode(resolveComponent("el-popconfirm"), {
+          "title": "\u662F\u5426\u5220\u9664\u9009\u4E2D\u9879",
+          "confirm-button-text": "\u786E\u8BA4",
+          "cancel-button-text": "\u53D6\u6D88",
+          "onConfirm": () => props.controller.remove(index)
+        }, {
+          reference: () => {
+            return createVNode(resolveComponent("el-button"), {
+              "text": true,
+              "type": "danger",
+              "class": [ns.be("index", "remove")]
+            }, {
+              default: () => [createTextVNode("\u5220\u9664")]
+            });
+          }
+        });
+      }
+      return createVNode(resolveComponent("el-button"), {
+        "text": true,
+        "type": "danger",
+        "class": [ns.be("index", "remove")],
+        "onClick": () => props.controller.remove(index)
+      }, {
+        default: () => [createTextVNode("\u5220\u9664")]
+      });
+    };
+    return {
+      ns,
+      formItems,
+      formControllers,
+      renderRemoveBtn
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.controller.enableCreate && createVNode(resolveComponent("el-button"), {
+      "class": this.ns.e("add-btn"),
+      "onClick": () => {
+        this.controller.create();
+      }
+    }, {
+      default: () => [createTextVNode("\u6DFB\u52A0")]
+    }), createVNode(resolveComponent("el-table"), {
+      "class": this.ns.e("table"),
+      "show-header": true,
+      "data": this.controller.value,
+      "cell-class-name": ({
+        columnIndex
+      }) => {
+        return columnIndex === 0 ? this.ns.b("index") : "";
+      }
+    }, {
+      default: () => [createVNode(resolveComponent("el-table-column"), {
+        "type": "index",
+        "width": 66,
+        "align": "center"
+      }, {
+        default: (opts) => {
+          const {
+            $index
+          } = opts;
+          if (!this.controller.enableDelete) {
+            return createVNode("span", null, [$index + 1]);
+          }
+          return [this.renderRemoveBtn($index), createVNode("span", {
+            "class": this.ns.be("index", "text")
+          }, [$index + 1])];
+        }
+      }), this.formItems.length > 0 && this.formItems.map((item) => {
+        return createVNode(resolveComponent("el-table-column"), {
+          "label": item.caption,
+          "prop": item.id,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            const {
+              $index
+            } = opts;
+            const formC = this.formControllers[$index];
+            if (!formC || !formC.state.isLoaded) {
+              return createVNode("div", null, [createTextVNode("\u4E0D\u5B58\u5728\u6216\u52A0\u8F7D\u4E2D")]);
+            }
+            const formItemC = formC.formItems.find((x) => x.name === item.id);
+            let editor = null;
+            if (!formItemC.editorProvider) {
+              editor = createVNode(resolveComponent("not-supported-editor"), {
+                "modelData": item.editor
+              }, null);
+            } else {
+              const component = resolveComponent(formItemC.editorProvider.formEditor);
+              editor = h(component, {
+                value: formItemC.value,
+                data: formItemC.data,
+                controller: formItemC.editor,
+                disabled: formItemC.state.disabled,
+                readonly: formItemC.model.editor.readOnly,
+                onChange: (val, name) => {
+                  formItemC.setDataValue(val, name);
+                }
+              });
+            }
+            return createVNode(resolveComponent("iBizGridEditItem"), {
+              "error": formItemC.state.error,
+              "required": formItemC.state.required
+            }, _isSlot(editor) ? editor : {
+              default: () => [editor]
+            });
+          }
+        });
+      })]
+    })]);
+  }
+});
+
+export { RepeaterGrid };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.d.ts

@@ -0,0 +1,19 @@
+import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
+export declare const RepeaterMultiForm: import("vue").DefineComponent<{
+    controller: {
+        type: typeof FormMDCtrlRepeaterController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onValueChange: (value: IData, index: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: IData[]) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: typeof FormMDCtrlRepeaterController;
+        required: true;
+    };
+}>> & {
+    onChange?: ((_value: IData[]) => any) | undefined;
+}, {}, {}>;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.mjs

@@ -0,0 +1,59 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { RepeaterSingleForm } from '../repeater-single-form/repeater-single-form.mjs';
+
+"use strict";
+const RepeaterMultiForm = /* @__PURE__ */ defineComponent({
+  name: "IBizRepeaterMultiForm",
+  props: {
+    controller: {
+      type: FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("repeater-multi-form");
+    const onValueChange = (value, index) => {
+      const arrData = [...props.controller.value];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    return {
+      ns,
+      onValueChange
+    };
+  },
+  render() {
+    const items = this.controller.value;
+    return createVNode(resolveComponent("iBizMDCtrlContainer"), {
+      "class": this.ns.b(),
+      "items": items,
+      "enableCreate": this.controller.enableCreate,
+      "enableDelete": this.controller.enableDelete,
+      "onAddClick": () => this.controller.create(),
+      "onRemoveClick": (_item, index) => this.controller.remove(index)
+    }, {
+      item: ({
+        data,
+        index
+      }) => {
+        return createVNode(RepeaterSingleForm, {
+          "key": index,
+          "data": data,
+          "controller": this.controller,
+          "onChange": (value) => {
+            this.onValueChange(value, index);
+          }
+        }, null);
+      }
+    });
+  }
+});
+
+export { RepeaterMultiForm };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.css

@@ -0,0 +1 @@
+.ibiz-repeater-single-form{--ibiz-repeater-single-form-header-height:32px;width:100%}.ibiz-repeater-single-form__content{width:100%}.ibiz-repeater-single-form-header{height:var(--ibiz-repeater-single-form-header-height)}