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

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);
           }

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

@@ -24,6 +24,10 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-page");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller);
     let position = "top";
     if (props.modelData.tabHeaderPos) {
       position = props.modelData.tabHeaderPos.toLowerCase();
@@ -34,7 +38,9 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       position,
-      onTabChange
+      onTabChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -46,11 +52,13 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
     const defaultSlots = ((_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)[0]) == null ? void 0 : _c.children) || [];
     if (defaultSlots.length === 1 || noTabHeader) {
       return vue.createVNode("div", {
-        "class": [this.ns.b(), this.ns.m("no-tab-header")]
+        "class": [this.ns.b(), this.semanticClass("page"), this.ns.m("no-tab-header")],
+        "style": this.semanticStyle("page")
       }, [defaultSlots]);
     }
     return vue.createVNode(vue.resolveComponent("el-tabs"), {
-      "class": [this.ns.b(), this.ns.b("tab"), this.ns.e(this.position)],
+      "class": [this.ns.b(), this.ns.b("tab"), this.semanticClass("page", this.controller), this.ns.e(this.position)],
+      "style": this.semanticStyle("page", this.controller),
       "model-value": (_d = defaultSlots[0]) == null ? void 0 : _d.key,
       "tab-position": this.position,
       "onTabChange": this.onTabChange
@@ -64,14 +72,16 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
         return null;
       }
       return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
-        "class": this.ns.b("tab-item"),
+        "class": [this.ns.b("tab-item"), this.semanticClass("page.item", this.controller)],
         "name": c.model.id,
+        "style": this.semanticStyle("page.item", this.controller),
         "lazy": true
       }, {
         default: () => slot,
         label: () => {
           return vue.createVNode("span", {
-            "class": c.labelClass
+            "class": [c.labelClass, this.ns.b("tab-label"), this.semanticClass("page.label", this.controller)],
+            "style": this.semanticStyle("page.label", this.controller)
           }, [c.model.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
             "icon": c.model.sysImage
           }, null) : null, c.model.caption]);

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

@@ -27,6 +27,10 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-raw-item");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const content = vue.ref("");
     const showFormDefaultContent = vue.computed(() => {
       if (props.controller.form.controlParams && props.controller.form.controlParams.editmode === "hover") {
@@ -187,11 +191,13 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
       content,
       showFormDefaultContent,
       isDesignPreview,
-      renderPreviewContent
+      renderPreviewContent,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
-    var _a;
+    var _a, _b, _c, _d, _e;
     if (!this.controller.state.visible) {
       return null;
     }
@@ -205,11 +211,14 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode(vue.resolveComponent("iBizRawItem"), {
       "class": [
         this.ns.b(),
+        this.semanticClass("rawitem", this.controller),
+        this.semanticClass("rawitem.".concat((_b = (_a = this.modelData.rawItem) == null ? void 0 : _a.contentType) == null ? void 0 : _b.toLowerCase()), this.controller),
         ...this.controller.containerClass,
         this.ns.is("show-default", this.showFormDefaultContent),
         // 表单直接内容文本类型与直接内容类型应具备与标签相同样式
-        this.ns.is("form-text", ["TEXT", "RAW"].includes(((_a = this.modelData.rawItem) == null ? void 0 : _a.contentType) || ""))
+        this.ns.is("form-text", ["TEXT", "RAW"].includes(((_c = this.modelData.rawItem) == null ? void 0 : _c.contentType) || ""))
       ],
+      "style": [this.semanticStyle("rawitem", this.controller), this.semanticStyle("rawitem.".concat((_e = (_d = this.modelData.rawItem) == null ? void 0 : _d.contentType) == null ? void 0 : _e.toLowerCase()), this.controller)],
       "rawItem": this.modelData,
       "content": this.content,
       "onClick": (event) => this.controller.onClick(event)

package/lib/control/form/form-detail/form-tab-page/form-tab-page.cjs

@@ -25,9 +25,15 @@ const FormTabPage = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-tab-page");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     vue3Util.useController(props.controller);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -35,7 +41,8 @@ const FormTabPage = /* @__PURE__ */ vue.defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     return vue.withDirectives(vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "class": [this.ns.b(), this.semanticClass("tabpage", this.controller), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "style": this.semanticStyle("tabpage", this.controller),
       "layout": this.modelData.layout,
       "element-loading-text": this.controller.state.loadingText,
       "onClick": (event) => this.controller.onClick(event)

package/lib/control/form/form-detail/form-tab-panel/form-tab-panel.cjs

@@ -26,6 +26,10 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-tab-panel");
     vue3Util.useController(props.controller);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const popoverVisible = vue.ref(false);
     const triggerClick = (key, event) => {
       const pageC = props.controller.form.details[key];
@@ -58,7 +62,9 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
       ns,
       popoverVisible,
       onTabClick,
-      renderAllTabContent
+      renderAllTabContent,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -68,13 +74,15 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const renderItemText = (c) => {
       return vue.createVNode("span", {
-        "class": [this.ns.b("tab-item-content"), ...c.labelClass]
+        "class": [this.ns.b("tab-item-content"), this.semanticClass("tabpanel.label", this.controller), ...c.labelClass],
+        "style": this.semanticStyle("tabpanel.label", this.controller)
       }, [c.model.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
         "icon": c.model.sysImage
       }, null), c.model.showCaption && c.model.caption]);
     };
     const tabContent = vue.withDirectives(vue.createVNode(vue.resolveComponent("el-tabs"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass],
+      "class": [this.ns.b(), this.semanticClass("tabpanel", this.controller), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass],
+      "style": this.semanticStyle("tabpanel", this.controller),
       "model-value": this.controller.state.activeTab,
       "element-loading-text": this.controller.state.loadingText,
       "onTabClick": this.onTabClick
@@ -88,7 +96,8 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
         return null;
       }
       return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
-        "class": this.ns.b("tab-item"),
+        "class": [this.ns.b("tab-item"), this.semanticClass("tabpanel.item", this.controller)],
+        "style": this.semanticStyle("tabpanel.item", this.controller),
         "label": c.model.caption,
         "name": c.model.id,
         "lazy": true
@@ -113,7 +122,8 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
     }), [[vue.resolveDirective("loading"), this.controller.state.loading && !isStyle2]]);
     if (this.modelData.detailStyle === "STYLE2") {
       return vue.withDirectives(vue.createVNode("div", {
-        "class": this.ns.b("tab-panel-container-style2"),
+        "class": [this.ns.b("tab-panel-container-style2"), this.semanticClass("tabpanel", this.controller)],
+        "style": this.semanticStyle("tabpanel", this.controller),
         "element-loading-text": this.controller.state.loadingText
       }, [tabContent, vue.createVNode(vue.resolveComponent("el-popover"), {
         "trigger": "click",

package/lib/control/form/search-form/advance-search/advance-search.cjs

@@ -24,9 +24,8 @@ const AdvanceSearch = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("advance-search");
     const c = props.controller;
     const renderAttrs = (model) => {
-      var _a;
       const attrs = {};
-      (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+      runtime.filterPresetAttrs(model.controlAttributes).forEach((item) => {
         if (item.attrName && item.attrValue) {
           attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
             ...c.getEventArgs(),

package/lib/control/form/search-form/search-form.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-searchform-buttons{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;height:100%;margin-top:var(--ibiz-spacing-tight);margin-left:var(--ibiz-spacing-tight);text-align:right}.ibiz-control-searchform{--ibiz-control-searchform-bg-color:transparent;--ibiz-control-searchform-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);display:flex;padding:var(--ibiz-control-searchform-padding);background-color:var(--ibiz-control-searchform-bg-color)}.ibiz-control-searchform>.ibiz-form-page{flex-grow:1}
+.ibiz-control-searchform{--ibiz-control-searchform-bg-color:transparent;--ibiz-control-searchform-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);display:flex;padding:var(--ibiz-control-searchform-padding);background-color:var(--ibiz-control-searchform-bg-color)}.ibiz-control-searchform>.ibiz-form-page{flex-grow:1}

package/lib/control/grid/grid/grid-control.util.cjs

@@ -731,7 +731,7 @@ function useGridHeaderStyle(tableRef, ns) {
           const height = entries[0].contentRect.height;
           if (height !== lastGridHeaderHeight) {
             const tempCssVars = {
-              "now-header-height": "".concat(height, "px")
+              "setting-height": "".concat(height, "px")
             };
             headerCssVars.value = ns.cssVarBlock(tempCssVars);
             lastGridHeaderHeight = height;