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

package/lib/control/data-view/data-view.cjs

@@ -88,9 +88,10 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.DataViewControlController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     vue3Util.useControlPopoverzIndex(c);
-    const classNames = vue.computed(() => {
-      return [ns.is("enable-page", c.model.enablePagingBar === true)];
-    });
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const isCollapse = vue.ref(false);
     const isLodeMoreDisabled = vue.computed(() => {
       if (c.model.enablePagingBar === true) {
@@ -230,7 +231,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderItemAction = (item) => {
       return vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
-        "class": ns.bem("item-content", "bottom", "actions"),
+        "class": [semanticClass("item.action"), ns.bem("item-content", "bottom", "actions")],
+        "style": semanticStyle("item.action"),
         "action-details": c.getOptItemModel(),
         "actions-state": c.state.uaState[item.srfkey],
         "zIndex": c.state.zIndex,
@@ -324,7 +326,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
             "class": ns.e("layout-col")
           }, {
             default: () => [vue.createVNode("div", {
-              "class": ns.b("scroll-item")
+              "style": semanticStyle("item"),
+              "class": [ns.b("scroll-item"), semanticClass("item")]
             }, [renderCard(element)])]
           }),
           footer: () => {
@@ -337,7 +340,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
                 "class": ns.e("layout-col")
               }, {
                 default: () => [vue.createVNode("div", {
-                  "class": ns.b("scroll-item")
+                  "style": semanticStyle("item"),
+                  "class": [ns.b("scroll-item"), semanticClass("item")]
                 }, [renderNewCard(group)])]
               });
           }
@@ -353,12 +357,14 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         item: ({
           element
         }) => vue.createVNode("div", {
-          "class": ns.b("scroll-item")
+          "style": semanticStyle("item"),
+          "class": [ns.b("scroll-item"), semanticClass("item")]
         }, [renderCard(element)]),
         footer: () => {
           if (c.enableNew && !c.state.readonly)
             return vue.createVNode("div", {
-              "class": ns.b("scroll-item")
+              "style": semanticStyle("item"),
+              "class": [ns.b("scroll-item"), semanticClass("item")]
             }, [renderNewCard(group)]);
         }
       });
@@ -368,7 +374,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         groupSysCss
       } = c.model;
       return vue.createVNode("div", {
-        "class": [ns.be("group-content", "item"), groupSysCss == null ? void 0 : groupSysCss.cssName, ns.is("collapse", c.state.collapseKeys.includes(group.key.toString()))]
+        "class": [semanticClass("group"), ns.be("group-content", "item"), groupSysCss == null ? void 0 : groupSysCss.cssName, ns.is("collapse", c.state.collapseKeys.includes(group.key.toString()))],
+        "style": semanticStyle("group")
       }, [vue.createVNode("div", {
         "class": ns.be("group-content", "item-header")
       }, [vue.createVNode("span", {
@@ -377,7 +384,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "class": ns.be("group-content", "item-action")
       }, [c.model.groupUIActionGroup && group.groupActionGroupState && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "zIndex": c.state.zIndex,
-        "class": ns.be("group-content", "header-actions"),
+        "class": [ns.be("group-content", "header-actions"), semanticClass("group.action")],
+        "style": semanticStyle("group.action"),
         "action-details": c.model.groupUIActionGroup.uiactionGroupDetails,
         "actions-state": group.groupActionGroupState,
         "onActionClick": (detail, event) => {
@@ -416,7 +424,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const upIcon = () => {
       return vue.createVNode("div", {
-        "class": ns.e("collapse-expand-icon")
+        "class": [ns.em("content", "icon"), ns.e("collapse-expand-icon")]
       }, [vue.createVNode("i", {
         "class": "fa fa-angle-double-up",
         "title": ibiz.i18n.t("control.common.collapseData"),
@@ -426,7 +434,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const downIcon = () => {
       return vue.createVNode("div", {
-        "class": ns.e("collapse-expand-icon")
+        "class": [ns.em("content", "icon"), ns.e("collapse-expand-icon")]
       }, [vue.createVNode("i", {
         "class": "fa fa-angle-double-down",
         "title": ibiz.i18n.t("control.common.expandData"),
@@ -436,7 +444,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const loadMoreIcon = () => {
       return vue.createVNode("div", {
-        "class": ns.e("load-more")
+        "class": [ns.em("content", "icon"), ns.e("load-more")]
       }, [vue.createVNode("i", {
         "class": "fa fa-angle-double-down",
         "title": ibiz.i18n.t("control.common.loadMore"),
@@ -446,8 +454,9 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderHasData = () => {
       return vue.withDirectives(vue.createVNode("div", {
-        "class": ns.e("content"),
         "ref": "infiniteScroll",
+        "style": semanticStyle("content"),
+        "class": [semanticClass("content"), ns.e("content")],
         "infinite-scroll-distance": 10,
         "infinite-scroll-disabled": isLodeMoreDisabled.value,
         "key": infiniteScrollKey.value
@@ -578,7 +587,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           "class": ns.e("layout-col")
         }, {
           default: () => [vue.createVNode("div", {
-            "class": ns.b("scroll-item")
+            "style": semanticStyle("item"),
+            "class": [ns.b("scroll-item"), semanticClass("item")]
           }, [renderSkeletonItem()])]
         }))]);
       }
@@ -587,7 +597,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [Array.from({
         length: count
       }, () => vue.createVNode("div", {
-        "class": ns.b("scroll-item")
+        "style": semanticStyle("item"),
+        "class": [ns.b("scroll-item"), semanticClass("item")]
       }, [renderSkeletonItem()]))]);
     };
     const renderGroupSkeleton = () => {
@@ -642,8 +653,14 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, null);
     };
     const renderSortBar = () => {
-      if (!c.state.noSort)
+      if (!c.state.noSort && c.state.sortItems.length)
         return vue.createVNode(vue.resolveComponent("iBizSortBar"), {
+          "class": semanticClass("sort"),
+          "style": semanticStyle("sort"),
+          "semantic": {
+            class: semanticClass("sort.item"),
+            style: semanticStyle("sort.item")
+          },
           "onSortChange": (item, order) => {
             c.setSort(item.key, order);
             c.load({
@@ -660,7 +677,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       if (c.state.enablePagingBar && c.model.pagingMode === 1)
         return vue.createVNode(vue.resolveComponent("iBizPagination"), {
           "mode": c.paginationMode,
-          "class": ns.e("pagination"),
+          "class": [ns.e("pagination"), semanticClass("pagination")],
+          "style": semanticStyle("pagination"),
           "total": c.state.total,
           "curPage": c.state.curPage,
           "size": c.state.size,
@@ -706,7 +724,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
-      classNames,
+      semanticClass,
+      semanticStyle,
       infiniteScroll,
       renderLayoutByStyle
     };
@@ -717,7 +736,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       "controller": this.c
     }, {
       default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-        "class": [this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
+        "class": [this.semanticClass("root"), this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
+        "style": this.semanticStyle("root"),
         "controller": this.c
       }, _isSlot(_slot = this.renderLayoutByStyle()) ? _slot : {
         default: () => [_slot]

package/lib/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-dataview__drag-icon{cursor:move;visibility:hidden}.ibiz-control-dataview__content{flex-grow:1;height:100%;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap}.ibiz-control-dataview__layout-flex>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview__layout-flex{align-content:flex-start;overflow:auto}.ibiz-control-dataview__batchtoolbar{display:none;padding:0 var(--ibiz-spacing-base);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-super-tight)}.ibiz-control-dataview__batchtoolbar.is-show{display:block}.ibiz-control-dataview__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;color:var(--ibiz-control-dataview-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item:hover .ibiz-control-dataview__drag-icon{visibility:visible}.ibiz-control-dataview-item__new{color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-color-border)}.ibiz-control-dataview-item__new .el-card__body{display:flex;align-items:center;justify-content:center}.ibiz-control-dataview-item__content{display:flex;align-items:center;width:100%;height:100%}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{flex-grow:1;--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);margin-top:var(--ibiz-spacing-tight);border-top:1px solid var(--ibiz-color-border)}.ibiz-control-dataview-item-content__bottom--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}
+.ibiz-control-dataview{--ibiz-control-dataview-bg-color:transparent;--ibiz-control-dataview-icon-color:var(--ibiz-color-text-2);--ibiz-control-dataview-hover-color:var(--ibiz-color-primary-hover);--ibiz-control-dataview-icon-size:var(--ibiz-font-size-header-3);--ibiz-control-dataview-padding:var(--ibiz-spacing-none);--ibiz-control-dataview-border-color:var(--ibiz-color-border);--ibiz-control-dataview-font-size:var(--ibiz-font-size-regular);--ibiz-control-dataview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-dataview-content-bg-color:var(--ibiz-control-dataview-bg-color);--ibiz-control-dataview-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-dataview-group-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-border-color:var(--ibiz-control-dataview-border-color);--ibiz-control-dataview-item-bg-color:transparent;--ibiz-control-dataview-item-padding:var(--ibiz-spacing-base);--ibiz-control-dataview-item-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-dataview-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-item-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-item-font-weight:var(--ibiz-control-dataview-font-weight);--ibiz-control-dataview-item-border-color:var(--ibiz-control-dataview-border-color);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%;padding:var(--ibiz-control-dataview-padding);background-color:var(--ibiz-control-dataview-bg-color)}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__nav-icon:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__drag-icon{cursor:move;visibility:hidden}.ibiz-control-dataview__content{flex-grow:1;height:100%;padding:var(--ibiz-control-dataview-content-padding);overflow:auto;background-color:var(--ibiz-control-dataview-content-bg-color)}.ibiz-control-dataview__content--icon{text-align:center}.ibiz-control-dataview__content--icon i{font-size:var(--ibiz-control-dataview-icon-size);color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__content--icon i:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-base-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-tight);align-content:flex-start;overflow:auto}.ibiz-control-dataview__batchtoolbar{display:none;padding:0 var(--ibiz-spacing-base);margin:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar{gap:var(--ibiz-spacing-tight)}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar__item{margin:0}.ibiz-control-dataview__batchtoolbar.is-show{display:block}.ibiz-control-dataview__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-dataview-item{color:var(--ibiz-control-dataview-item-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-item-hover-bg-color)}.ibiz-control-dataview-item:hover .ibiz-control-dataview__drag-icon{visibility:visible}.ibiz-control-dataview-item__new{color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item__new .el-card__body{display:flex;align-items:center;justify-content:center}.ibiz-control-dataview-item__content{display:flex;align-items:center;width:100%;height:100%}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-item-active-bg-color)}.ibiz-control-dataview-item-content{flex-grow:1}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);margin-top:var(--ibiz-spacing-tight);border-top:1px solid var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item-content__bottom--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-dataview-group-content{width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-padding);margin-bottom:var(--ibiz-spacing-tight);border-bottom:1px solid var(--ibiz-control-dataview-group-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-font-size);font-weight:var(--ibiz-control-dataview-group-font-weight);color:var(--ibiz-control-dataview-group-text-color)}

package/lib/control/drbar/drbar.cjs

@@ -63,6 +63,10 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const c = vue3Util.useControlController((...args) => new drbar_controller.DRBarController(...args));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = vueRouter.useRouter();
     const counterData = vue.ref({});
@@ -124,9 +128,8 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const renderMenuItems = (item) => {
-      if (!item.visible) {
+      if (!item.visible)
         return;
-      }
       if (item.children) {
         let subtitle = "";
         if (props.showMode === "horizontal") {
@@ -138,9 +141,10 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
           }
         }
         return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
-          "class": ns.b("group"),
           "index": item.tag,
-          "disabled": item.disabled
+          "disabled": item.disabled,
+          "class": [ns.b("group"), semanticClass("group")],
+          "style": semanticStyle("group")
         }, {
           default: () => item.children.map((child) => {
             return renderMenuItems(child);
@@ -152,26 +156,30 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
         });
       }
       return vue.createVNode(vue.resolveComponent("el-menu-item"), {
-        "class": ns.e("item"),
         "index": item.tag,
-        "disabled": item.disabled
+        "disabled": item.disabled,
+        "style": semanticStyle("item"),
+        "class": [ns.e("item"), semanticClass("item")]
       }, {
         default: () => [vue.createVNode(vue.resolveComponent("iBizIcon"), {
           "class": ns.e("icon"),
           "icon": item.sysImage
         }, null), vue.createVNode("span", null, [item.caption]), item.counterId && counterData.value[item.counterId] != null && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-          "class": ns.e("counter"),
           "value": counterData.value[item.counterId],
-          "counterMode": item.counterMode
+          "counterMode": item.counterMode,
+          "class": [ns.e("counter"), semanticClass("item.counter")],
+          "style": semanticStyle("item.counter")
         }, null)]
       });
     };
     return {
       c,
       ns,
+      opens,
+      semanticClass,
+      semanticStyle,
       handleSelect,
-      renderMenuItems,
-      opens
+      renderMenuItems
     };
   },
   render() {
@@ -183,14 +191,16 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
     } = this.c.state;
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "controller": this.c,
-      "class": this.ns.b()
+      "style": this.semanticStyle("root"),
+      "class": [this.ns.b(), this.semanticClass("root")]
     }, {
       default: () => [isCreated && isCalculatedPermission && vue.createVNode(vue.resolveComponent("el-menu"), {
-        "class": this.ns.e("menu"),
         "mode": this.showMode,
         "default-active": selectedItem,
+        "default-openeds": this.opens,
         "onSelect": this.handleSelect,
-        "default-openeds": this.opens
+        "style": this.semanticStyle("content"),
+        "class": [this.ns.e("menu"), this.semanticClass("content")]
       }, {
         default: () => {
           return drBarItems.map((item) => {

package/lib/control/drbar/drbar.css

@@ -1 +1 @@
-.ibiz-control-drbar{height:100%;--el-menu-base-level-padding:var(--ibiz-spacing-base);--ibiz-control-drbar-item-height:40px}.ibiz-control-drbar .el-menu--horizontal.el-menu{border-bottom:none}.ibiz-control-drbar .el-menu-item{justify-content:space-between;height:var(--ibiz-control-drbar-item-height);padding:0 var(--ibiz-spacing-base);margin:0 var(--ibiz-spacing-base);line-height:unset}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu{height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu .el-sub-menu__title{line-height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar__menu{height:100%;overflow:hidden auto}.ibiz-control-drbar .ibiz-badge{text-align:center}
+.ibiz-control-drbar{--ibiz-control-drbar-bg-color:transparent;--ibiz-control-drbar-padding:var(--ibiz-spacing-none);--ibiz-control-drbar-content-bg-color:var(--ibiz-control-drbar-bg-color);--ibiz-control-drbar-group-height:40px;--ibiz-control-drbar-group-text-color:var(--ibiz-color-text-0);--ibiz-control-drbar-group-font-size:var(--ibiz-font-size-regular);--ibiz-control-drbar-group-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-drbar-group-bg-color:var(--ibiz-control-drbar-bg-color);--ibiz-control-drbar-group-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-drbar-group-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-drbar-item-height:40px;--ibiz-control-drbar-item-text-color:var(--ibiz-color-text-0);--ibiz-control-drbar-item-active-color:var(--ibiz-color-primary);--ibiz-control-drbar-item-level-padding:var(--ibiz-spacing-base);--ibiz-control-drbar-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-drbar-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-drbar-item-bg-color:var(--ibiz-control-drbar-bg-color);--ibiz-control-drbar-item-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-drbar-item-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-drbar-item-counter-text-align:center;height:100%;background-color:var(--ibiz-control-drbar-bg-color);--el-menu-base-level-padding:var(--ibiz-control-drbar-item-level-padding)}.ibiz-control-drbar .el-menu--horizontal.el-menu{border-bottom:none}.ibiz-control-drbar .el-menu-item{justify-content:space-between;height:var(--ibiz-control-drbar-item-height);padding:var(--ibiz-control-drbar-item-padding);margin:var(--ibiz-control-drbar-item-margin);font-size:var(--ibiz-control-drbar-item-font-size);font-weight:var(--ibiz-control-drbar-item-font-weight);line-height:unset;background-color:var(--ibiz-control-drbar-item-bg-color)}.ibiz-control-drbar .el-menu-item.is-active{color:var(--ibiz-control-drbar-item-active-color)}.ibiz-control-drbar .el-menu--vertical .el-sub-menu .el-sub-menu__title{height:var(--ibiz-control-drbar-group-height);padding:var(--ibiz-control-drbar-group-padding);margin:var(--ibiz-control-drbar-group-margin);font-size:var(--ibiz-control-drbar-group-font-size);font-weight:var(--ibiz-control-drbar-group-font-weight);line-height:unset;background-color:var(--ibiz-control-drbar-group-bg-color)}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu .el-sub-menu__title{height:var(--ibiz-control-drbar-group-height);font-size:var(--ibiz-control-drbar-group-font-size);font-weight:var(--ibiz-control-drbar-group-font-weight);line-height:unset;background-color:var(--ibiz-control-drbar-group-bg-color)}.ibiz-control-drbar__menu{height:100%;overflow:hidden auto}.ibiz-control-drbar__counter{text-align:var(--ibiz-control-drbar-item-counter-text-align)}

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}