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

package/lib/control/drtab/drtab.cjs

@@ -58,6 +58,10 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const router = vueRouter.useRouter();
     const controlRef = vue.ref();
     const counterData = vue.ref({});
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const {
       visibleItems,
       moreItems
@@ -137,9 +141,10 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const renderDropdownList = () => {
       return vue.createVNode(vue.resolveComponent("el-dropdown"), {
         "trigger": "click",
-        "class": ns.b("dropdown-list"),
+        "onCommand": onTabChange,
+        "style": semanticStyle("dropdown"),
         "popper-class": ns.be("dropdown-list", "popper"),
-        "onCommand": onTabChange
+        "class": [ns.b("dropdown-list"), semanticClass("dropdown")]
       }, {
         default: () => {
           var _a2, _b, _c;
@@ -162,7 +167,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
           }, [c.state.drTabPages.map((tab) => {
             if (!tab.hidden) {
               return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-                "class": [ns.bem("dropdown-list", "popper", "item"), ns.is("active", tab.tag === c.state.activeName)],
+                "class": [semanticClass("dropdown.item"), ns.bem("dropdown-list", "popper", "item"), ns.is("active", tab.tag === c.state.activeName)],
+                "style": semanticStyle("dropdown.item"),
                 "command": tab.tag,
                 "disabled": tab.disabled
               }, {
@@ -171,6 +177,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
                 }, null), vue.createVNode("span", {
                   "class": "caption"
                 }, [tab.caption]), tab.counterId && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": [ns.bem("dropdown-list", "popper", "counter"), semanticClass("dropdown.item.counter")],
+                  "style": semanticStyle("dropdown.item.counter"),
                   "value": counterData.value[tab.counterId],
                   "counterMode": tab.counterMode
                 }, null), tab.tag === c.state.activeName && vue.createVNode("ion-icon", {
@@ -186,12 +194,14 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      moreItems,
       activeTab,
       controlRef,
       counterData,
-      visibleItems,
-      moreItems,
       tabPosition,
+      visibleItems,
+      semanticClass,
+      semanticStyle,
       onTabChange,
       handleTabChange,
       renderDropdownList
@@ -203,7 +213,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       isCalculatedPermission
     } = this.c.state;
     if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
-      return vue.createVNode(flowDrtab.FlowDrtab, {
+      return vue.createVNode(flowDrtab.FlowDrtab, vue.mergeProps(this.$attrs, {
         "pagesstate": this.visibleItems,
         "drtabpages": this.modelData.dedrtabPages,
         "context": this.c.context,
@@ -212,13 +222,14 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
         "counterData": this.counterData,
         "activeTab": this.activeTab,
         "controller": this.c
-      }, null);
+      }), null);
     }
     const moreTab = this.moreItems.find((tab) => tab.tag === this.c.state.activeName) || {};
     const more = vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "trigger": "click",
-      "class": this.ns.b("more-dropdown"),
-      "popper-class": this.ns.b("more-dropdown-popper")
+      "style": this.semanticStyle("more"),
+      "popper-class": this.ns.b("more-dropdown-popper"),
+      "class": [this.ns.b("more-dropdown"), this.semanticClass("more")]
     }, {
       default: () => {
         return vue.createVNode("div", {
@@ -241,7 +252,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
           default: () => {
             return this.moreItems.map((item) => {
               return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-                "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : ""],
+                "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : "", this.ns.bem("more-dropdown-popper", "label", "item"), this.semanticClass("more.item")],
+                "style": this.semanticStyle("more.item"),
                 "onClick": () => this.onTabChange(item.tag)
               }, {
                 default: () => [vue.createVNode("span", {
@@ -250,7 +262,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
                   "class": this.ns.bem("more-dropdown-popper", "label", "text"),
                   "title": core.showTitle(item.caption || "")
                 }, [item.caption || ""]), item.counterId && this.counterData[item.counterId] != null && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "class": this.ns.bem("more-dropdown-popper", "label", "counter"),
+                  "class": [this.ns.bem("more-dropdown-popper", "label", "counter"), this.semanticClass("more.item.counter")],
+                  "style": this.semanticStyle("more.item.counter"),
                   "value": this.counterData[item.counterId],
                   "counterMode": item.counterMode
                 }, null)])]
@@ -263,13 +276,16 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "ref": "controlRef",
       "controller": this.c,
-      "class": [this.ns.b(), this.moreItems.length > 0 ? this.ns.b("more") : ""]
+      "class": [this.ns.b(), this.semanticClass("root"), this.moreItems.length > 0 ? this.ns.b("more") : ""],
+      "style": this.semanticStyle("root")
     }, {
       default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : vue.createVNode(vue.resolveComponent("el-tabs"), {
+        "tabPosition": this.tabPosition,
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
-        "tabPosition": this.tabPosition,
-        "onTabChange": this.handleTabChange
+        "onTabChange": this.handleTabChange,
+        "style": this.semanticStyle("content"),
+        "class": [this.ns.e("content"), this.semanticClass("content")]
       }, {
         default: () => [this.visibleItems.map((tab) => {
           const counterNum = tab.counterId ? this.counterData[tab.counterId] : void 0;
@@ -282,14 +298,16 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
             }, {
               label: () => {
                 return vue.createVNode("span", {
-                  "class": this.ns.b("label")
+                  "class": [this.ns.b("label"), this.semanticClass("item")],
+                  "style": this.semanticStyle("item")
                 }, [tab.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
                   "class": this.ns.be("label", "icon"),
                   "icon": tab.sysImage
                 }, null), vue.createVNode("span", {
                   "class": this.ns.be("label", "text")
                 }, [tab.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "class": this.ns.e("counter"),
+                  "class": [this.ns.e("counter"), this.semanticClass("item.counter")],
+                  "style": this.semanticStyle("item.counter"),
                   "value": counterNum,
                   "counterMode": tab.counterMode
                 }, null)]);

package/lib/control/drtab/drtab.css

@@ -1 +1 @@
-.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab .ibiz-badge{text-align:center}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;align-items:center;font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{position:absolute;top:0;right:-6px}.ibiz-control-drtab-dropdown-list__popper{min-width:150px;max-width:220px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{font-size:var(--ibiz-width-icon-medium);color:var(--ibiz-color-primary)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}
+.ibiz-control-drtab{--ibiz-control-drtab-bg-color:transparent;--ibiz-control-drtab-padding:var(--ibiz-spacing-none);--ibiz-control-drtab-content-gap:var(--ibiz-spacing-none);--ibiz-control-drtab-item-hover-bg-color:transparent;--ibiz-control-drtab-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-item-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-item-text-color:var(--ibiz-color-text-2);--ibiz-control-drtab-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-more-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-drtab-more-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-more-text-color:var(--ibiz-color-text-2);--ibiz-control-drtab-more-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-padding:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-text-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-font-size:var(--ibiz-font-size-header-5);padding:var(--ibiz-control-drtab-padding);background-color:var(--ibiz-control-drtab-bg-color)}.ibiz-control-drtab__counter{margin-left:var(--ibiz-control-drtab-item-gap)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-control-drtab-content-gap)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-control-drtab-content-gap)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-item-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-control-drtab-item-font-size);color:var(--ibiz-control-drtab-item-text-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-item-hover-color);background-color:var(--ibiz-control-drtab-item-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-item-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab .ibiz-badge{text-align:center}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-control-drtab-item-gap)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;gap:var(--ibiz-control-drtab-more-gap);align-items:center;font-size:var(--ibiz-control-drtab-more-font-size);color:var(--ibiz-control-drtab-more-text-color)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-control-drtab-more-hover-color)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px;--ibiz-control-drtab-more-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-more-item-active-bg-color:var(--ibiz-color-primary-active);--ibiz-control-drtab-more-item-counter-min-width:20px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-control-drtab-more-item-active-bg-color)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;gap:var(--ibiz-control-drtab-more-item-gap);align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:var(--ibiz-control-drtab-more-item-counter-min-width)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-control-drtab-more-item-active-bg-color)}.ibiz-control-drtab-dropdown-list .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;gap:var(--ibiz-control-drtab-dropdown-gap);align-items:center;padding:var(--ibiz-control-drtab-dropdown-padding);font-size:var(--ibiz-control-drtab-dropdown-font-size);color:var(--ibiz-control-drtab-dropdown-text-color);cursor:pointer}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{position:absolute;top:0;right:-6px}.ibiz-control-drtab-dropdown-list__popper{min-width:150px;max-width:220px;--ibiz-control-drtab-dropdown-item-bg-color:transparent;--ibiz-control-drtab-dropdown-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-item-text-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-item-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-drtab-dropdown-item-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-drtab-dropdown-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-drtab-dropdown-item-icon-color:var(--ibiz-color-primary);--ibiz-control-drtab-dropdown-item-counter-size:var(--ibiz-width-icon-medium);--ibiz-control-drtab-dropdown-item-counter-font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;gap:var(--ibiz-control-drtab-dropdown-item-gap);align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-drtab-dropdown-item-counter-size);height:var(--ibiz-control-drtab-dropdown-item-counter-size);font-size:var(--ibiz-control-drtab-dropdown-item-counter-font-size)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{font-size:var(--ibiz-control-drtab-dropdown-item-icon-size);color:var(--ibiz-control-drtab-dropdown-item-icon-color)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-control-drtab-dropdown-item-active-bg-color)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:var(--ibiz-control-drtab-dropdown-item-bg-color)}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-control-drtab-dropdown-item-text-color);background-color:var(--ibiz-control-drtab-dropdown-item-bg-color)}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-control-drtab-dropdown-item-hover-bg-color)}

package/lib/control/drtab/flow-drtab.cjs

@@ -52,6 +52,10 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("flow-drtab");
     const uuid = qxUtil.createUUID();
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const navtag = vue.ref("");
     const viewList = vue.ref([]);
     const navbarpos = vue.ref();
@@ -247,9 +251,10 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
     const renderAnchorBar = () => {
       if (c.enableAnchor) {
         return vue.createVNode("div", {
-          "class": [ns.e("anchor-bar"), ns.is(navbarpos.value, true)],
+          "class": [ns.e("anchor-bar"), ns.is(navbarpos.value, true), semanticClass("flow.anchor")],
           "style": {
-            width: "".concat(navBarWidth.value, "px")
+            width: "".concat(navBarWidth.value, "px"),
+            ...semanticStyle("flow.anchor")
           }
         }, [vue.createVNode("div", {
           "class": [ns.e("anchor-items"), ns.is(navbarpos.value)],
@@ -264,7 +269,8 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
             return null;
           }
           return vue.createVNode("div", {
-            "class": [ns.e("anchor-item"), ns.is("active", "".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag) === navtag.value)],
+            "class": [ns.e("anchor-item"), semanticClass("flow.anchor.item"), ns.is("active", "".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag) === navtag.value)],
+            "style": semanticStyle("flow.anchor.item"),
             "id": "navbar_".concat(target.appViewId, "_").concat(item.tag),
             "onClick": () => onClickBar(item)
           }, [item.caption]);
@@ -282,11 +288,13 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       ns,
       uuid,
       navbarpos,
-      onViewMounted,
       navBarWidth,
+      semanticClass,
+      semanticStyle,
       calcStyle,
-      renderAnchorBar,
-      handleScroll
+      handleScroll,
+      onViewMounted,
+      renderAnchorBar
     };
   },
   render() {
@@ -302,7 +310,8 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode("div", {
         "id": "".concat(target.appViewId, "_").concat(item.tag),
-        "class": this.ns.e("tab-item")
+        "style": this.semanticStyle("flow.item"),
+        "class": [this.ns.e("tab-item"), this.semanticClass("flow.item")]
       }, [this.showHeader && vue.createVNode("div", {
         "class": this.ns.em("tab-item", "label")
       }, [item.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
@@ -311,7 +320,8 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       }, null), vue.createVNode("span", {
         "class": this.ns.be("label", "text")
       }, [item.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-        "class": this.ns.e("counter"),
+        "class": [this.ns.e("counter"), this.semanticClass("flow.item.counter")],
+        "style": this.semanticStyle("flow.item.counter"),
         "value": counterNum,
         "counterMode": item.counterMode
       }, null)]), vue.createVNode("div", {
@@ -325,7 +335,8 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       })])]);
     });
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.navbarpos), this.ns.is("left", (_a = this.navbarpos) == null ? void 0 : _a.includes("left")), this.ns.is("right", (_b = this.navbarpos) == null ? void 0 : _b.includes("right")), this.ns.is("enable-anchor", this.c.enableAnchor)],
+      "class": [this.ns.b(), this.semanticClass("flow"), this.ns.m(this.navbarpos), this.ns.is("left", (_a = this.navbarpos) == null ? void 0 : _a.includes("left")), this.ns.is("right", (_b = this.navbarpos) == null ? void 0 : _b.includes("right")), this.ns.is("enable-anchor", this.c.enableAnchor)],
+      "style": this.semanticStyle("flow"),
       "onScroll": this.handleScroll,
       "id": this.uuid
     }, [this.renderAnchorBar(), vue.createVNode("div", {

package/lib/control/drtab/flow-drtab.css

@@ -1 +1 @@
-.ibiz-flow-drtab{width:100%;height:100%;overflow:hidden;background-color:var(--ibiz-color-bg-0)}.ibiz-flow-drtab__container{height:100%;overflow:auto}.ibiz-flow-drtab__tab-item{background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab__tab-item--label{padding:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);border-bottom:1px solid var(--ibiz-color-fill-1)}.ibiz-flow-drtab__tab-item--tab-view{padding:var(--ibiz-spacing-tight) 0}.ibiz-flow-drtab__tab-item+.ibiz-flow-drtab__tab-item{margin-top:var(--ibiz-spacing-base)}.ibiz-flow-drtab__counter{font-size:var(--ibiz-font-size-regular);text-align:center}.ibiz-flow-drtab .ibiz-flow-drtab{background-color:inherit}.ibiz-flow-drtab.is-enable-anchor{display:flex;gap:var(--ibiz-spacing-base)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__container{flex:1}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar{display:flex;min-width:200px;padding:var(--ibiz-spacing-base) 0;font-size:var(--ibiz-font-size-regular);background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topleft{align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomleft{align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topright{flex-direction:row-reverse;align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomright{flex-direction:row-reverse;align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleleft{align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleright{flex-direction:row-reverse;align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-items{width:100%;max-height:100%;overflow:auto}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item{width:100%;height:32px;padding:0 var(--ibiz-spacing-base);overflow:hidden;line-height:32px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item:hover{color:var(--ibiz-color-primary)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active{position:relative;color:var(--ibiz-color-primary)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active::before{position:absolute;top:0;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-color-primary);border-radius:2px}.ibiz-flow-drtab.is-enable-anchor.is-left{flex-direction:row;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-left>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}.ibiz-flow-drtab.is-enable-anchor.is-right{flex-direction:row-reverse;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-right>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}
+.ibiz-flow-drtab{--ibiz-control-drtab-flow-bg-color:var(--ibiz-color-bg-0);--ibiz-control-drtab-flow-item-padding:var(--ibiz-spacing-base);--ibiz-control-drtab-flow-item-bg-color:var(--ibiz-color-bg-1);--ibiz-control-drtab-flow-item-border-color:var(--ibiz-color-fill-1);--ibiz-control-drtab-flow-item-font-size:var(--ibiz-font-size-header-5);--ibiz-control-drtab-flow-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-control-drtab-flow-anchor-gap:var(--ibiz-spacing-base);--ibiz-control-drtab-flow-anchor-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-flow-anchor-bg-color:var(--ibiz-color-bg-1);--ibiz-control-drtab-flow-anchor-border-radius:var(--ibiz-border-radius-medium);--ibiz-control-drtab-flow-item-counter-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-flow-item-counter-text-align:center;--ibiz-control-drtab-flow-anchor-item-padding:0 var(--ibiz-spacing-base);--ibiz-control-drtab-flow-anchor-item-hover-color:var(--ibiz-color-primary);--ibiz-control-drtab-flow-anchor-item-active-color:var(--ibiz-color-primary);width:100%;height:100%;overflow:hidden;background-color:var(--ibiz-control-drtab-flow-bg-color)}.ibiz-flow-drtab__container{height:100%;overflow:auto}.ibiz-flow-drtab__tab-item{background-color:var(--ibiz-control-drtab-flow-item-bg-color);border-radius:var(--ibiz-control-drtab-flow-item-border-radius)}.ibiz-flow-drtab__tab-item--label{padding:var(--ibiz-control-drtab-flow-item-padding);font-size:var(--ibiz-control-drtab-flow-item-font-size);border-bottom:1px solid var(--ibiz-control-drtab-flow-item-border-color)}.ibiz-flow-drtab__tab-item--tab-view{padding:var(--ibiz-spacing-tight) 0}.ibiz-flow-drtab__tab-item+.ibiz-flow-drtab__tab-item{margin-top:var(--ibiz-spacing-base)}.ibiz-flow-drtab__counter{font-size:var(--ibiz-control-drtab-flow-item-counter-font-size);text-align:var(--ibiz-control-drtab-flow-item-counter-text-align)}.ibiz-flow-drtab .ibiz-flow-drtab{background-color:inherit}.ibiz-flow-drtab.is-enable-anchor{display:flex;gap:var(--ibiz-spacing-base)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__container{flex:1}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar{display:flex;min-width:200px;padding:var(--ibiz-control-drtab-flow-anchor-gap) 0;font-size:var(--ibiz-control-drtab-flow-anchor-font-size);background-color:var(--ibiz-control-drtab-flow-anchor-bg-color);border-radius:var(--ibiz-control-drtab-flow-anchor-border-radius)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topleft{align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomleft{align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topright{flex-direction:row-reverse;align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomright{flex-direction:row-reverse;align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleleft{align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleright{flex-direction:row-reverse;align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-items{width:100%;max-height:100%;overflow:auto}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item{width:100%;height:32px;padding:var(--ibiz-control-drtab-flow-anchor-item-padding);overflow:hidden;line-height:32px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item:hover{color:var(--ibiz-control-drtab-flow-anchor-item-hover-color)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active{position:relative;color:var(--ibiz-control-drtab-flow-anchor-item-active-color)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active::before{position:absolute;top:0;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-drtab-flow-anchor-item-active-color);border-radius:2px}.ibiz-flow-drtab.is-enable-anchor.is-left{flex-direction:row;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-left>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}.ibiz-flow-drtab.is-enable-anchor.is-right{flex-direction:row-reverse;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-right>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}

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

@@ -1 +1 @@
-.ibiz-control-edit-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}.ibiz-control-edit-form.is-item-filter .ibiz-control-form{overflow-y:auto;height:calc(100% - 32px)}
+.ibiz-control-edit-form{--ibiz-control-edit-form-padding-bottom:var(--ibiz-spacing-tight);--ibiz-control-edit-form-filter-height:calc(100% - 32px);width:100%;height:100%;padding-bottom:var(--ibiz-control-edit-form-padding-bottom)}.ibiz-control-edit-form.is-item-filter .ibiz-control-form{height:var(--ibiz-control-edit-form-filter-height);overflow-y:auto}

package/lib/control/form/form/form.cjs

@@ -30,9 +30,8 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       form: c
     };
     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, {
             ...props.controller.getEventArgs(),
@@ -42,6 +41,10 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       });
       return attrs;
     };
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const renderByDetailType = (detail, isRoot = false) => {
       const {
         hidden,
@@ -100,7 +103,9 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       c,
       FormDetail,
       slotProps,
-      renderByDetailType
+      renderByDetailType,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -139,7 +144,8 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": this.ns.b(),
+      "class": [this.ns.b(), this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "controller": this.c
     }, _isSlot(slots) ? slots : {
       default: () => [slots]

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

@@ -25,6 +25,11 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-button");
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const captionText = vue.computed(() => {
       const {
         caption,
@@ -37,7 +42,9 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      captionText
+      captionText,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -45,7 +52,8 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
       return null;
     }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.ns.is("loading", this.controller.state.loading), this.ns.is("readonly", this.controller.state.readonly), this.modelData.detailStyle && this.ns.m(this.modelData.detailStyle.toLowerCase()), ...this.controller.containerClass]
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.ns.is("loading", this.controller.state.loading), this.ns.is("readonly", this.controller.state.readonly), this.semanticClass("button", this.controller), this.modelData.detailStyle && this.ns.m(this.modelData.detailStyle.toLowerCase()), ...this.controller.containerClass],
+      "style": this.semanticStyle("button", this.controller)
     }, [vue.createVNode(vue.resolveComponent("el-button"), {
       "sime": "small",
       "onClick": this.controller.onClick.bind(this.controller),

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

@@ -1 +1 @@
-.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);width:100%;height:100%;padding:var(--ibiz-spacing-tight);overflow:hidden}.ibiz-form-button .el-button{width:100%;height:100%}.ibiz-form-button .el-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start}.ibiz-form-button .el-button .ibiz-form-button-content i,.ibiz-form-button .el-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height)}.ibiz-form-button .el-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .el-button .ibiz-icon{display:none}.ibiz-form-button.is-readonly{display:none}
+.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-form-button-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-form-button-padding);overflow:hidden}.ibiz-form-button .el-button{width:100%;height:100%}.ibiz-form-button .el-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start}.ibiz-form-button .el-button .ibiz-form-button-content i,.ibiz-form-button .el-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height)}.ibiz-form-button .el-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .el-button .ibiz-icon{display:none}.ibiz-form-button.is-readonly{display:none}

package/lib/control/form/form-detail/form-button-list/form-button-list.cjs

@@ -24,6 +24,10 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-button-list");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const handleClick = async (id, e) => {
       e == null ? void 0 : e.stopPropagation();
@@ -33,7 +37,9 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     };
     return {
       ns,
-      handleClick
+      handleClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -42,7 +48,8 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     if (state.visible) {
       return vue.createVNode(vue.resolveComponent("iBizButtonList"), {
-        "class": [this.ns.b(), ...this.controller.containerClass],
+        "class": [this.ns.b(), this.semanticClass("button.list", this.controller), ...this.controller.containerClass],
+        "style": this.semanticStyle("button.list", this.controller),
         "model": this.modelData,
         "disabled": state.disabled,
         "buttonsState": state.buttonsState,

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

@@ -24,6 +24,11 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-druipart");
     vue3Util.useController(props.controller);
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const isDesignPreview = ((_a = props.controller.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onCreated = (event) => {
       props.controller.setEmbedView(event.view);
@@ -31,7 +36,9 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       isDesignPreview,
-      onCreated
+      onCreated,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -47,7 +54,8 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     }
     const viewShell = vue.resolveComponent("IBizViewShell");
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.semanticClass("druipart", this.controller), ...this.controller.containerClass],
+      "style": this.semanticStyle("druipart", this.controller),
       "onClick": (event) => this.controller.onClick(event)
     }, [vue.h(viewShell, {
       context: this.controller.navContext,

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

@@ -26,6 +26,10 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-group");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const zIndex = props.controller.form.state.zIndex;
     const changeCollapse = () => {
       if (!c.disableClose) {
@@ -53,7 +57,9 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
       zIndex,
       captionText,
       changeCollapse,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -80,7 +86,7 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     })) ? _slot : {
       default: () => [_slot]
     });
-    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass];
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), this.semanticClass("group", this.controller), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass];
     if (this.modelData.showCaption === true) {
       classArr.push(this.ns.m("show-header"));
       classArr.push(this.ns.b("collapse"));
@@ -95,9 +101,9 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     let header = null;
     if (this.modelData.showCaption) {
       header = vue.createVNode("div", {
-        "class": [this.ns.b("header")],
+        "class": [this.ns.b("header"), this.semanticClass("group.header", this.controller)],
         "onClick": this.changeCollapse,
-        "style": this.controller.model.labelCssStyle
+        "style": [this.controller.model.labelCssStyle, this.semanticStyle("group.header", this.controller)]
       }, [vue.createVNode("div", {
         "class": [this.ns.be("header", "left")]
       }, [vue.createVNode("div", {
@@ -109,7 +115,8 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
         "class": [this.ns.be("header", "right")]
       }, [this.modelData.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "zIndex": this.zIndex,
-        "class": this.ns.e("toolbar"),
+        "class": [this.ns.e("toolbar"), this.semanticClass("group.action", this.controller)],
+        "style": this.semanticStyle("group.action", this.controller),
         "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
         "actions-state": state.actionGroupState,
         "onActionClick": this.onActionClick,
@@ -138,7 +145,8 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     let footer = null;
     if (this.modelData.showMoreMode === 2) {
       footer = vue.createVNode("div", {
-        "class": [this.ns.b("footer")]
+        "class": [this.ns.b("footer"), this.semanticClass("group.footer", this.controller)],
+        "style": this.semanticStyle("group.footer", this.controller)
       }, [vue.createVNode("div", {
         "class": this.ns.be("footer", "show-more-button"),
         "onClick": () => {
@@ -148,12 +156,13 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     }
     return vue.withDirectives(vue.createVNode("div", {
       "class": classArr,
+      "style": this.semanticStyle("group", this.controller),
       "element-loading-text": this.controller.state.loadingText,
       "id": "".concat(this.controller.form.view.model.codeName, "_").concat(this.controller.form.model.codeName, "_").concat(this.modelData.codeName),
       "onClick": (event) => this.controller.onClick(event)
     }, [header, vue.createVNode("div", {
-      "class": this.ns.b("content"),
-      "style": this.controller.model.cssStyle
+      "class": [this.ns.b("content"), this.semanticClass("group.content", this.controller)],
+      "style": [this.controller.model.cssStyle, this.semanticStyle("group.content", this.controller)]
     }, [content]), footer]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });

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

@@ -24,6 +24,10 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
     const c = props.controller;
     const ns = vue3Util.useNamespace("form-iframe");
     vue3Util.useController(c);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const loading = vue.ref(true);
     const url = vue.computed(() => {
       return c.calcIFrameUrl();
@@ -35,7 +39,9 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
       ns,
       url,
       loading,
-      onLoad
+      onLoad,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -43,7 +49,8 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
       return null;
     }
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("iframe", this.controller)],
+      "style": this.semanticStyle("iframe", this.controller)
     }, [vue.createVNode("iframe", {
       "class": this.ns.e("iframe"),
       "src": this.url,

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

@@ -17,6 +17,10 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-item-container");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const visible = vue.ref(false);
     const {
       sysImage,
@@ -106,7 +110,8 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
         },
         content: () => {
           return vue.createVNode("div", {
-            "class": ns.em("popper", "content")
+            "class": [ns.em("popper", "content"), semanticClass("item.tooltip", props.controller)],
+            "style": semanticStyle("item.tooltip", props.controller)
           }, [vue.createVNode("div", {
             "class": ns.em("popper", "tooltip")
           }, [renderTipContent()]), c.state.inputTipUrl && vue.createVNode("a", {
@@ -121,7 +126,8 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
       const form = props.controller.form;
       const showTipsIcon = enableInputTip && form.showTipsIcon;
       return vue.createVNode("div", {
-        "class": [ns.e("label"), ...c.labelClass || []]
+        "class": [ns.e("label"), semanticClass("item.label", props.controller), ...c.labelClass || []],
+        "style": semanticStyle("item.label", props.controller)
       }, [showTipsIcon && vue.createVNode("div", {
         "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
       }, [renderTipsIcon(), sysImage && vue.createVNode(vue3Util.IBizIcon, {
@@ -135,7 +141,9 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       showError,
-      renderLabel
+      renderLabel,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -147,10 +155,12 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
     const content = vue.createVNode("div", {
       "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(labelPos == null ? void 0 : labelPos.toLowerCase()))]
     }, [vue.withDirectives(vue.createVNode("div", {
-      "class": [this.ns.e("editor")]
+      "class": [this.ns.e("editor"), this.semanticClass("item.content", this.controller)],
+      "style": this.semanticStyle("item.content", this.controller)
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vue.resolveDirective("tooltip"), vue3Util.renderTooltip(this.controller.data, this.controller.model, this.controller.form)]]), this.showError && this.controller.state.error ? vue.createVNode("div", {
       "title": core.showTitle(this.controller.state.error),
-      "class": [this.ns.e("error")]
+      "class": [this.ns.e("error"), this.semanticClass("item.error", this.controller)],
+      "style": this.semanticStyle("item.error", this.controller)
     }, [this.controller.state.error]) : null]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(labelPos == null ? void 0 : labelPos.toLowerCase()), this.ns.is("required", this.controller.state.required), this.ns.is("error", !!this.controller.state.error)],

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

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container__popper.is-md.el-popper.el-popper{padding:0}.ibiz-form-item-container__popper.is-md.el-popper.el-popper .ibiz-form-item-container__popper--content{padding:0}.ibiz-form-item-container__popper.is-md .ibiz-markdown{max-height:100vh;padding:0 calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight));overflow:auto}.ibiz-form-item-container__popper.is-md .ibiz-form-item-container__popper--tooltip{padding:calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight)) 0}.ibiz-form-item-container__popper.is-md .ibiz-markdown-cherry{width:auto!important}.ibiz-form-item-container__popper.is-md .cherry-previewer p:only-child{margin:0}.ibiz-form-item-container__popper.is-md .cherry-previewer>p:first-child{margin-top:0}.ibiz-form-item-container__popper.is-md .cherry-sidebar,.ibiz-form-item-container__popper.is-md .cherry-toolbar,.ibiz-form-item-container__popper.is-md .cherry-toolbar-button{display:none}.ibiz-form-item-container__popper.is-md .cherry{font-size:inherit;line-height:inherit}.ibiz-form-item-container__popper.is-md .cherry,.ibiz-form-item-container__popper.is-md .cherry .cherry-previewer{padding:0;background-color:transparent;border:none!important;box-shadow:none}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}
+.ibiz-form-item-container{width:100%;height:100%;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-label-font-size);color:var(--ibiz-form-item-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-form-item-icon-gap)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container__popper.is-md.el-popper.el-popper{padding:0}.ibiz-form-item-container__popper.is-md.el-popper.el-popper .ibiz-form-item-container__popper--content{padding:0}.ibiz-form-item-container__popper.is-md .ibiz-markdown{max-height:100vh;padding:0 calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight));overflow:auto}.ibiz-form-item-container__popper.is-md .ibiz-form-item-container__popper--tooltip{padding:calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight)) 0}.ibiz-form-item-container__popper.is-md .ibiz-markdown-cherry{width:auto!important}.ibiz-form-item-container__popper.is-md .cherry-previewer p:only-child{margin:0}.ibiz-form-item-container__popper.is-md .cherry-previewer>p:first-child{margin-top:0}.ibiz-form-item-container__popper.is-md .cherry-sidebar,.ibiz-form-item-container__popper.is-md .cherry-toolbar,.ibiz-form-item-container__popper.is-md .cherry-toolbar-button{display:none}.ibiz-form-item-container__popper.is-md .cherry{font-size:inherit;line-height:inherit}.ibiz-form-item-container__popper.is-md .cherry,.ibiz-form-item-container__popper.is-md .cherry .cherry-previewer{padding:0;background-color:transparent;border:none!important;box-shadow:none}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-form-item-label-gap)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-form-item-label-gap)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-label-left-padding);line-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-label-right-padding);line-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:var(--ibiz-form-item-label-require-gap);font-family:SimSun;line-height:1;color:var(--ibiz-form-item-label-require-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-error-font-size);line-height:calc(var(--ibiz-form-item-error-font-size) + 2px);color:var(--ibiz-form-item-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-error-color) inset}