@ibiz-template/vue3-components 0.7.41-alpha.98 → 0.7.41-alpha.99

package/lib/control/form/form-detail/form-item/form-item.cjs

@@ -30,6 +30,10 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-item");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const onValueChange = (val, name, ignore = false) => {
       props.controller.setDataValue(val, name, ignore);
     };
@@ -49,7 +53,9 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
       c,
       showTitle,
       CustomHtml,
-      onValueChange
+      onValueChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -114,13 +120,14 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
     }
     if (this.c.isCustomCode)
       return vue.withDirectives(vue.createVNode("div", {
-        "class": [this.ns.b(), this.ns.e("script"), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+        "class": [this.ns.b(), this.ns.e("script"), this.semanticClass("item", this.controller), this.ns.m(this.modelData.id), compositeItem ? this.semanticClass("compositeItem", this.controller) : "", this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+        "style": [this.modelData.cssStyle, this.semanticStyle("item", this.controller), compositeItem ? this.semanticStyle("compositeItem", this.controller) : ""],
         "innerHTML": this.CustomHtml
       }, null), [[vue.resolveDirective("tooltip"), vue3Util.renderTooltip(this.c.data, this.c.model, this.c.form)]]);
     return vue.createVNode(vue.resolveComponent("iBizFormItemContainer"), {
       "id": "".concat(this.c.form.view.model.codeName, "_").concat(this.c.form.model.codeName, "_").concat(this.modelData.codeName),
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
-      "style": this.modelData.cssStyle,
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.semanticClass("item", this.controller), compositeItem ? this.semanticClass("compositeItem", this.controller) : "", this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+      "style": [this.modelData.cssStyle, this.semanticStyle("item", this.controller), compositeItem ? this.semanticStyle("compositeItem", this.controller) : ""],
       "controller": this.c,
       "onClick": (event) => this.c.onClick(event)
     }, _isSlot(editor) ? editor : {

package/lib/control/form/form-detail/form-item/form-item.css

@@ -1 +1 @@
-.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}
+.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px;--ibiz-form-item-label-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-label-line-height:var(--ibiz-height-control-default);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-label-width:130px;--ibiz-form-item-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-label-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-label-require-color:var(--ibiz-color-danger);--ibiz-form-item-label-require-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-icon-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-error-color:var(--ibiz-color-danger)}.ibiz-form-item.is-compositeItem{--ibiz-form-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-compositeItem-gap)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.cjs

@@ -19,13 +19,18 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-form");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const showActions = vue.computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
     const renderAddBtn = () => {
       let _slot;
       return vue.createVNode(vue.resolveComponent("el-button"), {
-        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "create")],
+        "style": semanticStyle("mdctrl.button", props.controller, "create"),
         "onClick": () => props.controller.create()
       }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
         default: () => [_slot]
@@ -38,7 +43,9 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
       ns,
       showActions,
       onCreated,
-      renderAddBtn
+      renderAddBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -49,6 +56,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     if (model.detailStyle === "STYLE2") {
       return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer2"), {
+        "class": this.semanticClass("mdctrl", this.controller),
+        "style": this.semanticStyle("mdctrl", this.controller),
         "controller": this.controller,
         "items": state.items
       }, {
@@ -59,7 +68,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
           }
           const formComponent = vue.h(vue.resolveComponent(formProvider.component), {
-            class: this.ns.be("item", "form"),
+            class: [this.ns.be("item", "form"), this.semanticClass("mdctrl.form", this.controller)],
+            style: this.semanticStyle("mdctrl.form", this.controller),
             key: data.id,
             modelData: model.contentControl,
             context: data.context,
@@ -73,8 +83,10 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
       });
     }
     return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer"), {
-      "class": this.ns.b(),
+      "class": [this.ns.b(), this.semanticClass("mdctrl", this.controller)],
+      "style": this.semanticStyle("mdctrl", this.controller),
       "items": state.items,
+      "controller": this.controller,
       "enableCreate": this.controller.enableCreate,
       "enableDelete": this.controller.enableDelete,
       "onAddClick": () => this.controller.create(),
@@ -88,7 +100,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
           return vue.createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
         }
         const formComponent = vue.h(vue.resolveComponent(formProvider.component), {
-          class: this.ns.be("item", "form"),
+          class: [this.ns.be("item", "form"), this.semanticClass("mdctrl.form", this.controller)],
+          style: this.semanticStyle("mdctrl.form", this.controller),
           key: data.id,
           modelData: model.contentControl,
           mdCtrlFormIndex: index,

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

@@ -1 +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:var(--ibiz-spacing-none)}.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}
+.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:var(--ibiz-form-mdctrl-button-width);text-align:center}.ibiz-form-mdctrl-form-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-form-item-actions__btn{margin-top:var(--ibiz-form-mdctrl-button-gap)}.ibiz-form-mdctrl-form-no-data{width:100%;display:flex;justify-content:flex-end}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.cjs

@@ -20,6 +20,10 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-md");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const showActions = vue.computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
@@ -50,7 +54,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode(vue.resolveComponent("el-button"), {
               "type": "danger",
               "disabled": !isSelected.value,
-              "class": [ns.be("actions", "remove"), ns.be("actions", "btn")]
+              "class": [ns.be("actions", "remove"), ns.be("actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove")
             }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
               default: () => [_slot]
             });
@@ -60,7 +65,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-button"), {
         "type": "danger",
         "disabled": !isSelected.value,
-        "class": [ns.be("actions", "remove"), ns.be("actions", "btn")],
+        "class": [ns.be("actions", "remove"), ns.be("actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+        "style": semanticStyle("mdctrl.button", props.controller, "remove"),
         "onClick": () => handleRemove()
       }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
         default: () => [_slot2]
@@ -71,7 +77,9 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
       showActions,
       onCreated,
       onSelectionChange,
-      renderRemoveBtn
+      renderRemoveBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -82,7 +90,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     let controlComponent = null;
     const controlProps = {
-      class: this.ns.b("content"),
+      class: [this.ns.b("content"), this.semanticClass("mdctrl.md", this.controller)],
+      style: this.semanticStyle("mdctrl.md", this.controller),
       modelData: model.contentControl,
       context: this.controller.form.context,
       params: this.controller.form.params,
@@ -95,11 +104,13 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
     }
     controlComponent = vue.h(vue.resolveComponent(mdProvider.component), controlProps);
     return vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("mdctrl", this.controller)],
+      "style": this.semanticStyle("mdctrl", this.controller)
     }, [controlComponent, this.showActions && vue.createVNode("div", {
       "class": this.ns.b("actions")
     }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("el-button"), {
-      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn")],
+      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn"), this.semanticClass("mdctrl.button", this.controller, "create")],
+      "style": this.semanticStyle("mdctrl.button", this.controller, "create"),
       "onClick": () => this.controller.create()
     }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
       default: () => [_slot3]

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

@@ -1 +1 @@
-.ibiz-form-mdctrl-md{--ibiz-form-mdctrl-md-empty-image-width:64px;--ibiz-form-mdctrl-md-empty-padding:var(--ibiz-spacing-none);--ibiz-form-mdctrl-md-empty-margin-top:var(--ibiz-spacing-tight);display:flex}.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-content .ibiz-no-data{--el-empty-image-width:var(--ibiz-form-mdctrl-md-empty-image-width);--el-empty-description-margin-top:var(--ibiz-form-mdctrl-md-empty-margin-top);--el-empty-padding:var(--ibiz-form-mdctrl-md-empty-padding);line-height: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:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-md-actions__btn{margin-bottom:var(--ibiz-spacing-tight)}
+.ibiz-form-mdctrl-md{--ibiz-form-mdctrl-md-empty-image-width:64px;--ibiz-form-mdctrl-md-empty-padding:var(--ibiz-spacing-none);--ibiz-form-mdctrl-md-empty-margin-top:var(--ibiz-spacing-tight);display:flex}.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-content .ibiz-no-data{--el-empty-image-width:var(--ibiz-form-mdctrl-md-empty-image-width);--el-empty-description-margin-top:var(--ibiz-form-mdctrl-md-empty-margin-top);--el-empty-padding:var(--ibiz-form-mdctrl-md-empty-padding);line-height:1}.ibiz-form-mdctrl-md-actions{flex-shrink:0;width:var(--ibiz-form-mdctrl-button-width);text-align:center}.ibiz-form-mdctrl-md-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-md-actions__btn{margin-bottom:var(--ibiz-form-mdctrl-button-gap)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.cjs

@@ -19,21 +19,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-repeater");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const onDataChange = (data) => {
       props.controller.setValue(data);
     };
     return {
       ns,
-      onDataChange
+      onDataChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a;
-    const classNames = [this.ns.b()];
+    const classNames = [this.ns.b(), this.semanticClass("repeater", this.controller)];
+    const style = this.semanticStyle("repeater", this.controller);
     switch (this.controller.repeaterStyle) {
       case "MultiForm":
         return vue.createVNode(repeaterMultiForm.RepeaterMultiForm, {
           "class": classNames,
+          "style": style,
           "onChange": this.onDataChange,
           "controller": this.controller
         }, null);
@@ -42,25 +50,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
         if (gridStyle === "style2") {
           return vue.createVNode(repeaterGrid2.RepeaterGrid2, {
             "class": classNames,
+            "style": style,
             "controller": this.controller,
             "onChange": this.onDataChange
           }, null);
         }
         return vue.createVNode(repeaterGrid.RepeaterGrid, {
           "class": classNames,
+          "style": style,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       case "SingleForm":
         return vue.createVNode(repeaterSingleForm.RepeaterSingleForm, {
           "class": classNames,
+          "style": style,
           "data": this.controller.value,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       default:
         return vue.createVNode("div", {
-          "class": classNames
+          "class": classNames,
+          "style": style
         }, [ibiz.i18n.t("control.form.formMDctrlRepeater.noSupportStyle", {
           repeaterStyle: this.controller.repeaterStyle
         })]);

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.cjs

@@ -38,6 +38,10 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       loadMore,
       updateTotalItems
     } = formMdctrlRepeater_util.useLoadMore(props.controller.value, chunkSize);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     core.recursiveIterate(props.controller.repeatedForm, (item) => {
       var _a2;
       if (item.detailType === "FORMITEM") {
@@ -142,7 +146,8 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode(vue.resolveComponent("el-button"), {
               "text": true,
               "type": "danger",
-              "class": [ns.be("index", "remove")]
+              "style": semanticStyle("button", props.controller, "remove"),
+              "class": [ns.be("index", "remove"), semanticClass("button", props.controller, "remove")]
             }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
               default: () => [_slot]
             });
@@ -152,7 +157,8 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-button"), {
         "text": true,
         "type": "danger",
-        "class": [ns.be("index", "remove")],
+        "class": [ns.be("index", "remove"), semanticClass("repeater.button", props.controller, "remove")],
+        "style": semanticStyle("repeater.button", props.controller, "remove"),
         "onClick": () => props.controller.remove(index)
       }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
         default: () => [_slot2]
@@ -166,20 +172,30 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       renderItems,
       formControllers,
       renderRemoveBtn,
-      loadMore
+      loadMore,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a;
     let _slot3;
-    const tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    let tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    if (tableHeight) {
+      if (tableHeight > 0 && tableHeight <= 1) {
+        tableHeight = "".concat(tableHeight * 100, "%");
+      } else {
+        tableHeight = "".concat(tableHeight, "px");
+      }
+    }
     const heightObject = tableHeight ? {
       height: tableHeight
     } : {};
     return vue.createVNode("div", {
       "class": this.ns.b()
     }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("el-button"), {
-      "class": this.ns.e("add-btn"),
+      "class": [this.ns.e("add-btn"), this.semanticClass("repeater.button", this.controller, "create")],
+      "style": this.semanticStyle("repeater.button", this.controller, "create"),
       "onClick": () => {
         this.controller.create();
       }
@@ -189,7 +205,8 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       "ref": "tableRef",
       "key": this.tableKey,
       "show-header": true,
-      "class": this.ns.e("table"),
+      "class": [this.ns.e("table"), this.semanticClass("repeater.grid", this.controller)],
+      "style": this.semanticStyle("repeater.grid", this.controller),
       "data": this.renderItems,
       "cell-class-name": ({
         columnIndex

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

@@ -1 +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__drag-icon{cursor:move}.ibiz-repeater-grid__sortable-ghost{opacity:.5}.ibiz-repeater-grid .el-table__row{height:57px}.ibiz-repeater-grid .el-table__cell:has(.is-editor-content-fixed){z-index:calc(var(--el-table-index) + 1)}.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:var(--ibiz-spacing-extra-tight)}.ibiz-repeater-grid-index__remove{display:none}
+.ibiz-repeater-grid{--ibiz-repeater-grid-remove-color:var(--ibiz-color-danger);--ibiz-repeater-grid-cell-padding:var(--ibiz-spacing-extra-tight);--ibiz-repeater-grid-row-height:57px;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__drag-icon{cursor:move}.ibiz-repeater-grid__sortable-ghost{opacity:.5}.ibiz-repeater-grid .el-table__row{height:var(--ibiz-repeater-grid-row-height)}.ibiz-repeater-grid .el-table__cell:has(.is-editor-content-fixed){z-index:calc(var(--el-table-index) + 1)}.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-repeater-grid-remove-color)}.ibiz-repeater-grid-index .cell{padding:var(--ibiz-repeater-grid-cell-padding)}.ibiz-repeater-grid-index__remove{display:none}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.cjs

@@ -38,6 +38,10 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
       loadMore,
       updateTotalItems
     } = formMdctrlRepeater_util.useLoadMore(props.controller.value, chunkSize);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     core.recursiveIterate(props.controller.repeatedForm, (item) => {
       var _a2;
       if (item.detailType === "FORMITEM") {
@@ -133,7 +137,8 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode("ion-icon", {
               "name": "remove-outline",
               "title": ibiz.i18n.t("app.delete"),
-              "class": ns.b("remove-btn")
+              "class": [ns.b("remove-btn"), semanticClass("repeater.button", props.controller, "remove")],
+              "style": semanticStyle("repeater.button", props.controller, "remove")
             }, null);
           }
         });
@@ -141,7 +146,8 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("ion-icon", {
         "name": "remove-outline",
         "title": ibiz.i18n.t("app.delete"),
-        "class": ns.b("remove-btn"),
+        "class": [ns.b("remove-btn"), semanticClass("repeater.button", props.controller, "remove")],
+        "style": semanticStyle("repeater.button", props.controller, "remove"),
         "onClick": () => {
           props.controller.remove(index);
           formControllers.splice(index, 1);
@@ -156,7 +162,9 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
       renderItems,
       formControllers,
       renderRemoveBtn,
-      loadMore
+      loadMore,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -172,7 +180,8 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
       "ref": "tableRef",
       "key": this.tableKey,
       "show-header": true,
-      "class": this.ns.e("table"),
+      "class": [this.ns.e("table"), this.semanticClass("repeater.grid", this.controller)],
+      "style": this.semanticStyle("repeater.grid", this.controller),
       "data": isEmpty && this.controller.enableCreate ? [{}] : this.renderItems,
       "cell-class-name": ({
         columnIndex
@@ -291,7 +300,8 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
             }, [this.controller.enableCreate && vue.createVNode("ion-icon", {
               "name": "add-outline",
               "title": ibiz.i18n.t("app.add"),
-              "class": this.ns.b("add-btn"),
+              "class": [this.ns.b("add-btn"), this.semanticClass("repeater.button", this.controller, "create")],
+              "style": this.semanticStyle("repeater.button", this.controller, "create"),
               "onClick": () => {
                 this.controller.create(isEmpty ? 0 : $index + 1);
               }

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.cjs

@@ -45,6 +45,7 @@ const RepeaterMultiForm = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.b(),
       "userStyle": userStyle,
       "items": items,
+      "controller": this.controller,
       "enableCreate": this.controller.enableCreate,
       "enableDelete": this.controller.enableDelete,
       "enableSort": this.controller.enableSort,

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

@@ -1 +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)}
+.ibiz-repeater-single-form{--ibiz-repeater-form-header-height:32px;width:100%}.ibiz-repeater-single-form__content{width:100%}.ibiz-repeater-single-form-header{height:var(--ibiz-repeater-form-header-height)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.cjs

@@ -24,6 +24,10 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-mdctrl");
     vue3Util.useController(props.controller);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const c = props.controller;
     const zIndex = props.controller.form.state.zIndex;
     const hasCaption = c.model.showCaption && !!c.model.caption;
@@ -39,7 +43,9 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
       hasHeader,
       hasCaption,
       isDesignPreview,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -79,12 +85,15 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass, this.hasCaption ? this.ns.m("show-caption") : ""]
     }, [this.hasHeader && vue.createVNode("div", {
-      "class": this.ns.b("header")
+      "class": [this.ns.b("header"), this.semanticClass("mdctrl.header", this.controller)],
+      "style": this.semanticStyle("mdctrl.header", this.controller)
     }, [vue.createVNode("div", {
-      "class": this.ns.e("title")
+      "class": [this.ns.b("title"), this.semanticClass("mdctrl.title", this.controller)],
+      "style": this.semanticStyle("mdctrl.title", this.controller)
     }, [this.hasCaption ? this.c.model.caption : ""]), model.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
       "zIndex": this.zIndex,
-      "class": this.ns.e("toolbar"),
+      "class": [this.ns.b("toolbar"), this.semanticClass("mdctrl.toolbar", this.controller)],
+      "style": this.semanticStyle("mdctrl.toolbar", this.controller),
       "action-details": model.uiactionGroup.uiactionGroupDetails,
       "actions-state": this.controller.state.actionGroupState,
       "onActionClick": this.onActionClick

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

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:49px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl-header{display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-spacing-base-tight) 0;margin:calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-tight);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-form-mdctrl-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-font-size:var(--ibiz-font-size-header-5);--ibiz-form-mdctrl-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-mdctrl-button-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-button-width:80px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-form-mdctrl-font-size);font-weight:var(--ibiz-form-mdctrl-font-weight)}.ibiz-form-mdctrl-header{--ibiz-form-mdctrl-header-height:49px;--ibiz-form-mdctrl-header-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-form-mdctrl-header-margin:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-form-mdctrl-header-border-color:var(--ibiz-color-border);display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-form-mdctrl-header-padding);margin:var(--ibiz-form-mdctrl-header-margin);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-form-mdctrl-header-border-color)}.ibiz-form-mdctrl-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.cjs

@@ -5,6 +5,7 @@ var draggable = require('vuedraggable');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./mdctrl-container.css');
 var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
 
 "use strict";
 function _isSlot(s) {
@@ -34,6 +35,10 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     enableSort: {
       type: Boolean,
       required: false
+    },
+    controller: {
+      type: runtime.FormMDCtrlController,
+      required: true
     }
   },
   emits: {
@@ -46,6 +51,10 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     slots
   }) {
     const ns = vue3Util.useNamespace("mdctrl-container");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const dragClssName = ns.be("item", "icon-drag");
     const showActions = vue.computed(() => {
       return props.enableCreate || props.enableDelete;
@@ -82,7 +91,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     const renderAddBtn = () => {
       let _slot;
       return vue.createVNode(vue.resolveComponent("el-button"), {
-        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "create")],
+        "style": semanticStyle("mdctrl.button", props.controller, "create"),
         "onClick": () => emit("addClick")
       }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
         default: () => [_slot]
@@ -103,7 +113,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
             let _slot2;
             return vue.createVNode(vue.resolveComponent("el-button"), {
               "type": "danger",
-              "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")]
+              "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove")
             }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
               default: () => [_slot2]
             });
@@ -112,7 +123,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode(vue.resolveComponent("el-button"), {
         "type": "danger",
-        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+        "style": semanticStyle("mdctrl.button", props.controller, "remove"),
         "onClick": () => emit("removeClick", item, index)
       }, _isSlot(_slot3 = ibiz.i18n.t("app.delete")) ? _slot3 : {
         default: () => [_slot3]
@@ -120,7 +132,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     };
     const renderStyle2AddBtn = () => {
       return vue.createVNode(vue.resolveComponent("el-button"), {
-        "class": [ns.be("style2-item-actions", "create"), ns.be("style2-item-actions", "btn")],
+        "class": [ns.be("style2-item-actions", "create"), ns.be("style2-item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "create")],
+        "style": semanticStyle("mdctrl.button", props.controller, "create"),
         "title": ibiz.i18n.t("app.add"),
         "onClick": () => emit("addClick")
       }, {
@@ -143,7 +156,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
           reference: () => {
             return vue.createVNode(vue.resolveComponent("el-button"), {
               "type": "danger",
-              "class": [ns.be("style2-item-actions", "remove"), ns.be("style2-item-actions", "btn")],
+              "class": [ns.be("style2-item-actions", "remove"), ns.be("style2-item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove"),
               "title": ibiz.i18n.t("app.delete")
             }, {
               default: () => [vue.createVNode("ion-icon", {
@@ -155,7 +169,8 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode(vue.resolveComponent("el-button"), {
         "type": "danger",
-        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("button", props.controller, "remove")],
+        "style": semanticStyle("button", props.controller, "remove"),
         "onClick": () => emit("removeClick", item, index)
       }, _isSlot(_slot4 = ibiz.i18n.t("app.delete")) ? _slot4 : {
         default: () => [_slot4]

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.css

@@ -1 +1 @@
-.ibiz-mdctrl-container-item{--ibiz-mdctrl-container-item-drag-chosen-color:rgba(var(--ibiz-grey-1), 1);display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item__left{flex-shrink:0}.ibiz-mdctrl-container-item__right{flex-shrink:0;width:60px;margin-left:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-item__icon-drag{display:flex;align-items:center;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-tight);cursor:move}.ibiz-mdctrl-container-item__icon-drag>svg{display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base);height:var(--ibiz-spacing-base);fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container-item.is-drag-chosen{background-color:var(--ibiz-mdctrl-container-item-drag-chosen-color)}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}
+.ibiz-mdctrl-container-item{--ibiz-mdctrl-item-drag-chosen-color:rgba(var(--ibiz-grey-1), 1);--ibiz-mdctrl-button-width:60px;--ibiz-mdctrl-button-gap:var(--ibiz-spacing-tight);display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item__left{flex-shrink:0}.ibiz-mdctrl-container-item__right{flex-shrink:0;width:var(--ibiz-mdctrl-button-width);margin-left:var(--ibiz-mdctrl-button-gap)}.ibiz-mdctrl-container-item__icon-drag{display:flex;align-items:center;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-tight);cursor:move}.ibiz-mdctrl-container-item__icon-drag>svg{display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base);height:var(--ibiz-spacing-base);fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container-item.is-drag-chosen{background-color:var(--ibiz-mdctrl-item-drag-chosen-color)}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.cjs

@@ -26,6 +26,10 @@ const MDCtrlContainer2 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("mdctrl-container2");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const currentItem = vue.ref("");
     vue.watch(() => props.items, () => {
       var _a;
@@ -126,7 +130,9 @@ const MDCtrlContainer2 = /* @__PURE__ */ vue.defineComponent({
       handleRemove,
       handleArrowClick,
       handleDragStart,
-      handleDragEnd
+      handleDragEnd,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -160,7 +166,8 @@ const MDCtrlContainer2 = /* @__PURE__ */ vue.defineComponent({
         }, [index.dragIcon()]), vue.createVNode("div", {
           "class": this.ns.be("header-item", "text")
         }, [element.title]), this.controller.enableDelete && vue.createVNode("div", {
-          "class": this.ns.be("header-item", "btn"),
+          "class": [this.ns.be("header-item", "btn"), this.semanticClass("mdctrl.button", this.controller, "remove")],
+          "style": this.semanticStyle("mdctrl.button", this.controller, "remove"),
           "title": core.showTitle(ibiz.i18n.t("app.delete")),
           "onClick": (e) => {
             this.handleRemove(e, element);
@@ -169,7 +176,8 @@ const MDCtrlContainer2 = /* @__PURE__ */ vue.defineComponent({
       },
       footer: () => {
         return [this.controller.enableCreate && vue.createVNode("div", {
-          "class": [this.ns.b("header-item"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "class": [this.ns.b("header-item"), this.semanticClass("mdctrl.button", this.controller, "create"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "style": this.semanticStyle("mdctrl.button", this.controller, "create"),
           "onClick": (e) => {
             this.handleAdd(e);
           }