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

package/es/control/data-view/data-view.mjs

@@ -1,5 +1,5 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, computed, ref, watch, withDirectives, resolveDirective, Fragment, h } from 'vue';
-import { useControlController, useNamespace, useControlPopoverzIndex, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch, withDirectives, resolveDirective, Fragment, h } from 'vue';
+import { useControlController, useNamespace, useControlPopoverzIndex, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { DataViewControlController, ControlVO, getControl } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import draggable from 'vuedraggable';
@@ -86,9 +86,10 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new DataViewControlController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     useControlPopoverzIndex(c);
-    const classNames = computed(() => {
-      return [ns.is("enable-page", c.model.enablePagingBar === true)];
-    });
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const isCollapse = ref(false);
     const isLodeMoreDisabled = computed(() => {
       if (c.model.enablePagingBar === true) {
@@ -228,7 +229,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const renderItemAction = (item) => {
       return createVNode(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,
@@ -322,7 +324,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
             "class": ns.e("layout-col")
           }, {
             default: () => [createVNode("div", {
-              "class": ns.b("scroll-item")
+              "style": semanticStyle("item"),
+              "class": [ns.b("scroll-item"), semanticClass("item")]
             }, [renderCard(element)])]
           }),
           footer: () => {
@@ -335,7 +338,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
                 "class": ns.e("layout-col")
               }, {
                 default: () => [createVNode("div", {
-                  "class": ns.b("scroll-item")
+                  "style": semanticStyle("item"),
+                  "class": [ns.b("scroll-item"), semanticClass("item")]
                 }, [renderNewCard(group)])]
               });
           }
@@ -351,12 +355,14 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         item: ({
           element
         }) => 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 createVNode("div", {
-              "class": ns.b("scroll-item")
+              "style": semanticStyle("item"),
+              "class": [ns.b("scroll-item"), semanticClass("item")]
             }, [renderNewCard(group)]);
         }
       });
@@ -366,7 +372,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         groupSysCss
       } = c.model;
       return 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")
       }, [createVNode("div", {
         "class": ns.be("group-content", "item-header")
       }, [createVNode("span", {
@@ -375,7 +382,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         "class": ns.be("group-content", "item-action")
       }, [c.model.groupUIActionGroup && group.groupActionGroupState && createVNode(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) => {
@@ -414,7 +422,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const upIcon = () => {
       return createVNode("div", {
-        "class": ns.e("collapse-expand-icon")
+        "class": [ns.em("content", "icon"), ns.e("collapse-expand-icon")]
       }, [createVNode("i", {
         "class": "fa fa-angle-double-up",
         "title": ibiz.i18n.t("control.common.collapseData"),
@@ -424,7 +432,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const downIcon = () => {
       return createVNode("div", {
-        "class": ns.e("collapse-expand-icon")
+        "class": [ns.em("content", "icon"), ns.e("collapse-expand-icon")]
       }, [createVNode("i", {
         "class": "fa fa-angle-double-down",
         "title": ibiz.i18n.t("control.common.expandData"),
@@ -434,7 +442,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const loadMoreIcon = () => {
       return createVNode("div", {
-        "class": ns.e("load-more")
+        "class": [ns.em("content", "icon"), ns.e("load-more")]
       }, [createVNode("i", {
         "class": "fa fa-angle-double-down",
         "title": ibiz.i18n.t("control.common.loadMore"),
@@ -444,8 +452,9 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const renderHasData = () => {
       return withDirectives(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
@@ -576,7 +585,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
           "class": ns.e("layout-col")
         }, {
           default: () => [createVNode("div", {
-            "class": ns.b("scroll-item")
+            "style": semanticStyle("item"),
+            "class": [ns.b("scroll-item"), semanticClass("item")]
           }, [renderSkeletonItem()])]
         }))]);
       }
@@ -585,7 +595,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       }, [Array.from({
         length: count
       }, () => createVNode("div", {
-        "class": ns.b("scroll-item")
+        "style": semanticStyle("item"),
+        "class": [ns.b("scroll-item"), semanticClass("item")]
       }, [renderSkeletonItem()]))]);
     };
     const renderGroupSkeleton = () => {
@@ -640,8 +651,14 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         }, null);
     };
     const renderSortBar = () => {
-      if (!c.state.noSort)
+      if (!c.state.noSort && c.state.sortItems.length)
         return createVNode(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({
@@ -658,7 +675,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       if (c.state.enablePagingBar && c.model.pagingMode === 1)
         return createVNode(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,
@@ -704,7 +722,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
-      classNames,
+      semanticClass,
+      semanticStyle,
       infiniteScroll,
       renderLayoutByStyle
     };
@@ -715,7 +734,8 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       "controller": this.c
     }, {
       default: () => [createVNode(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/es/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/es/control/drbar/drbar.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent, ref, onUnmounted, watch } from 'vue';
-import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
+import { useControlController, useSemanticNode, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { DRBarController } from './drbar.controller.mjs';
 import './drbar.css';
@@ -61,6 +61,10 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const c = useControlController((...args) => new DRBarController(...args));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = useRouter();
     const counterData = ref({});
@@ -122,9 +126,8 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
       });
     }
     const renderMenuItems = (item) => {
-      if (!item.visible) {
+      if (!item.visible)
         return;
-      }
       if (item.children) {
         let subtitle = "";
         if (props.showMode === "horizontal") {
@@ -136,9 +139,10 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
           }
         }
         return createVNode(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);
@@ -150,26 +154,30 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
         });
       }
       return createVNode(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: () => [createVNode(resolveComponent("iBizIcon"), {
           "class": ns.e("icon"),
           "icon": item.sysImage
         }, null), createVNode("span", null, [item.caption]), item.counterId && counterData.value[item.counterId] != null && createVNode(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() {
@@ -181,14 +189,16 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
     } = this.c.state;
     return createVNode(resolveComponent("iBizControlBase"), {
       "controller": this.c,
-      "class": this.ns.b()
+      "style": this.semanticStyle("root"),
+      "class": [this.ns.b(), this.semanticClass("root")]
     }, {
       default: () => [isCreated && isCalculatedPermission && createVNode(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/es/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/es/control/drtab/drtab.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, createVNode, resolveComponent, createTextVNode, ref, computed, onUnmounted, watch } from 'vue';
-import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
+import { defineComponent, createVNode, mergeProps, resolveComponent, createTextVNode, ref, computed, onUnmounted, watch } from 'vue';
+import { useControlController, useNamespace, useSemanticNode, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { hasSubRoute } from '@ibiz-template/runtime';
 import { isNil } from 'ramda';
@@ -56,6 +56,10 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     const router = useRouter();
     const controlRef = ref();
     const counterData = ref({});
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const {
       visibleItems,
       moreItems
@@ -135,9 +139,10 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     const renderDropdownList = () => {
       return createVNode(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;
@@ -160,7 +165,8 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
           }, [c.state.drTabPages.map((tab) => {
             if (!tab.hidden) {
               return createVNode(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
               }, {
@@ -169,6 +175,8 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
                 }, null), createVNode("span", {
                   "class": "caption"
                 }, [tab.caption]), tab.counterId && createVNode(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 && createVNode("ion-icon", {
@@ -184,12 +192,14 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
+      moreItems,
       activeTab,
       controlRef,
       counterData,
-      visibleItems,
-      moreItems,
       tabPosition,
+      visibleItems,
+      semanticClass,
+      semanticStyle,
       onTabChange,
       handleTabChange,
       renderDropdownList
@@ -201,7 +211,7 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
       isCalculatedPermission
     } = this.c.state;
     if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
-      return createVNode(FlowDrtab, {
+      return createVNode(FlowDrtab, mergeProps(this.$attrs, {
         "pagesstate": this.visibleItems,
         "drtabpages": this.modelData.dedrtabPages,
         "context": this.c.context,
@@ -210,13 +220,14 @@ const DRTabControl = /* @__PURE__ */ 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 = createVNode(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 createVNode("div", {
@@ -239,7 +250,8 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
           default: () => {
             return this.moreItems.map((item) => {
               return createVNode(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: () => [createVNode("span", {
@@ -248,7 +260,8 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
                   "class": this.ns.bem("more-dropdown-popper", "label", "text"),
                   "title": showTitle(item.caption || "")
                 }, [item.caption || ""]), item.counterId && this.counterData[item.counterId] != null && createVNode(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)])]
@@ -261,13 +274,16 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     return createVNode(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() : createVNode(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;
@@ -280,14 +296,16 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
             }, {
               label: () => {
                 return createVNode("span", {
-                  "class": this.ns.b("label")
+                  "class": [this.ns.b("label"), this.semanticClass("item")],
+                  "style": this.semanticStyle("item")
                 }, [tab.sysImage && createVNode(resolveComponent("iBizIcon"), {
                   "class": this.ns.be("label", "icon"),
                   "icon": tab.sysImage
                 }, null), createVNode("span", {
                   "class": this.ns.be("label", "text")
                 }, [tab.caption]), !isNil(counterNum) && createVNode(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/es/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/es/control/drtab/flow-drtab.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, resolveComponent, createVNode, h, ref, computed, nextTick, watch, onActivated } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { isNil } from 'ramda';
 import { createUUID } from 'qx-util';
 import './flow-drtab.css';
@@ -50,6 +50,10 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("flow-drtab");
     const uuid = createUUID();
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const navtag = ref("");
     const viewList = ref([]);
     const navbarpos = ref();
@@ -245,9 +249,10 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
     const renderAnchorBar = () => {
       if (c.enableAnchor) {
         return 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")
           }
         }, [createVNode("div", {
           "class": [ns.e("anchor-items"), ns.is(navbarpos.value)],
@@ -262,7 +267,8 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
             return null;
           }
           return 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]);
@@ -280,11 +286,13 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
       ns,
       uuid,
       navbarpos,
-      onViewMounted,
       navBarWidth,
+      semanticClass,
+      semanticStyle,
       calcStyle,
-      renderAnchorBar,
-      handleScroll
+      handleScroll,
+      onViewMounted,
+      renderAnchorBar
     };
   },
   render() {
@@ -300,7 +308,8 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
       }
       return 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 && createVNode("div", {
         "class": this.ns.em("tab-item", "label")
       }, [item.sysImage && createVNode(resolveComponent("iBizIcon"), {
@@ -309,7 +318,8 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
       }, null), createVNode("span", {
         "class": this.ns.be("label", "text")
       }, [item.caption]), !isNil(counterNum) && createVNode(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)]), createVNode("div", {
@@ -323,7 +333,8 @@ const FlowDrtab = /* @__PURE__ */ defineComponent({
       })])]);
     });
     return 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(), createVNode("div", {

package/es/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}