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

package/lib/control/dashboard/portlet/list-portlet/list-portlet.cjs

@@ -23,6 +23,10 @@ const ListPortlet = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a, _b;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const list = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === runtime.ControlType.LIST;
     });
@@ -40,7 +44,9 @@ const ListPortlet = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      list
+      list,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -54,6 +60,8 @@ const ListPortlet = /* @__PURE__ */ vue.defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = vue.h(vue.resolveComponent("IBizControlShell"), {
+      class: this.semanticClass("portlet.list", this.controller),
+      style: this.semanticStyle("portlet.list", this.controller),
       context,
       params,
       modelData: this.list

package/lib/control/dashboard/portlet/menu-portlet/menu-portlet.cjs

@@ -20,12 +20,18 @@ const MenuPortlet = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a, _b;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const menu = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === runtime.ControlType.APP_MENU;
     });
     return {
       ns,
-      menu
+      menu,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -39,6 +45,8 @@ const MenuPortlet = /* @__PURE__ */ vue.defineComponent({
       "class": classArr
     }, {
       default: () => [this.menu && vue.createVNode(vue.resolveComponent("iBizAppMenuPortletControl"), {
+        "class": this.semanticClass("portlet.menu", this.controller),
+        "style": this.semanticStyle("portlet.menu", this.controller),
         "modelData": this.menu,
         "context": context,
         "params": params

package/lib/control/dashboard/portlet/portlet-layout/portlet-layout.cjs

@@ -23,6 +23,10 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("portlet-layout");
     const portletType = "portlet-".concat((_a = props.controller.model.portletType) == null ? void 0 : _a.toLowerCase());
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.dashboard);
     const zIndex = props.controller.dashboard.state.zIndex;
     const popperClass = vue.computed(() => {
       const classNames = [ns.em("toolbar", "".concat(portletType, "-").concat(c.model.id))];
@@ -93,7 +97,9 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       renderContent,
       openLink,
       clickPorlet,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -104,20 +110,24 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     const isCustom = !!(this.header || this.headerCaption || this.headerBg || this.headerAction);
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.is("no-header", !this.isShowHeader), this.ns.is("hight-light", state.hightLight)]
+      "class": [this.ns.b(), this.ns.is("no-header", !this.isShowHeader), this.ns.is("hight-light", state.hightLight), this.semanticClass("portlet")],
+      "style": this.semanticStyle("portlet")
     }, [this.isShowHeader ? this.header ? vue.createVNode("div", {
       "key": "header",
-      "class": [this.ns.b("header"), this.ns.is("custom", isCustom)]
+      "class": [this.ns.b("header"), this.ns.is("custom", isCustom), this.semanticClass("portlet.header")],
+      "style": this.semanticStyle("portlet.header")
     }, [this.renderContent(this.header)]) : vue.createVNode("div", {
       "key": "header",
-      "class": [this.ns.b("header"), this.ns.is("custom", isCustom)]
+      "class": [this.ns.b("header"), this.ns.is("custom", isCustom), this.semanticClass("portlet.header")],
+      "style": this.semanticStyle("portlet.header")
     }, [this.headerBg && vue.createVNode("div", {
       "class": this.ns.be("header", "bg")
     }, [this.renderContent(this.headerBg)]), vue.createVNode("div", {
       "class": this.ns.be("header", "left"),
       "onClick": (event) => this.clickPorlet(event, "title")
     }, [model.showTitleBar && (this.headerCaption ? this.renderContent(this.headerCaption) : vue.createVNode("div", {
-      "class": [this.ns.e("caption"), this.ns.is("link", !!this.linkAction)],
+      "class": [this.ns.e("caption"), this.ns.is("link", !!this.linkAction), this.semanticClass("portlet.caption")],
+      "style": this.semanticStyle("portlet.caption"),
       "onClick": this.openLink
     }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
       "class": this.ns.e("caption-icon"),
@@ -129,7 +139,8 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.be("header", "right")
     }, [this.headerAction ? this.renderContent(this.headerAction) : model.portletType !== "ACTIONBAR" && model.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
       "zIndex": this.zIndex,
-      "class": this.ns.e("toolbar"),
+      "class": [this.ns.e("toolbar"), this.semanticClass("portlet.action")],
+      "style": this.semanticStyle("portlet.action"),
       "action-details": model.uiactionGroup.uiactionGroupDetails,
       "actions-state": state.actionGroupState,
       "mode": model.actionGroupExtractMode === "ITEMS" ? "dropdown" : "buttons",
@@ -137,7 +148,8 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       "onActionClick": this.onActionClick
     }, null)])]) : null, vue.createVNode("div", {
       "key": "content",
-      "class": this.ns.b("content"),
+      "class": [this.ns.b("content"), this.semanticClass("portlet.content")],
+      "style": this.semanticStyle("portlet.content"),
       "onClick": (event) => this.clickPorlet(event, "content")
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
   }

package/lib/control/dashboard/portlet/portlet-layout/portlet-layout.css

@@ -1 +1 @@
-.ibiz-portlet-layout{--ibiz-portlet-layout-bg-color:transparent;--ibiz-portlet-layout-header-height:50px;--ibiz-portlet-layout-header-padding:calc(var(--ibiz-spacing-base-tight) + 2px) var(--ibiz-spacing-base);--ibiz-portlet-layout-header-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-header-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-header-border-bottom:var(--ibiz-border);--ibiz-portlet-layout-caption-max-width:300px;--ibiz-portlet-layout-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-portlet-layout-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-portlet-layout-caption-color:var(--ibiz-text-color-primary);--ibiz-portlet-layout-content-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-content-padding:var(--ibiz-spacing-none);--ibiz-portlet-layout-content-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-portlet-layout-padding);background-color:var(--ibiz-portlet-layout-bg-color)}.ibiz-portlet-layout__caption{max-width:var(--ibiz-portlet-layout-caption-max-width);height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-base)}.ibiz-portlet-layout__caption-text{font-size:var(--ibiz-portlet-layout-caption-font-size);font-weight:var(--ibiz-portlet-layout-caption-font-weight);line-height:var(--ibiz-portlet-layout-caption-font-size);color:var(--ibiz-portlet-layout-caption-color)}.ibiz-portlet-layout__caption::before{position:absolute;top:50%;left:0;width:4px;height:var(--ibiz-width-icon-large);content:"";background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-extra-small);transform:translateY(-50%)}.ibiz-portlet-layout__caption.is-link{cursor:pointer}.ibiz-portlet-layout__caption.is-link:hover{color:var(--ibiz-color-link)}.ibiz-portlet-layout.is-no-header>.ibiz-portlet-layout-content{height:100%}.ibiz-portlet-layout.is-hight-light{box-shadow:0 0 0 calc(var(--ibiz-portlet-layout-padding) - 2px) var(--ibiz-color-bg-1) inset,inset 0 0 0 var(--ibiz-portlet-layout-padding) var(--ibiz-color-warning-light-active)}.ibiz-portlet-layout-header{display:flex;justify-content:space-between}.ibiz-portlet-layout-header__left{position:relative}.ibiz-portlet-layout-header.is-custom{position:relative}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__left{z-index:1}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__right{z-index:1}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__bg{position:absolute;top:0;left:0;width:100%;height:100%}.ibiz-portlet-layout-header{height:var(--ibiz-portlet-layout-header-height);padding:var(--ibiz-portlet-layout-header-padding);margin:var(--ibiz-portlet-layout-header-margin);background-color:var(--ibiz-portlet-layout-header-bg-color);border-bottom:var(--ibiz-portlet-layout-header-border-bottom)}.ibiz-portlet-layout-content{height:calc(100% - var(--ibiz-portlet-layout-header-height));padding:var(--ibiz-portlet-layout-content-padding);margin:var(--ibiz-portlet-layout-content-margin);overflow-y:scroll;background-color:var(--ibiz-portlet-layout-content-bg-color)}
+.ibiz-portlet-layout{--ibiz-portlet-bg-color:transparent;--ibiz-portlet-padding:var(--ibiz-spacing-tight);--ibiz-portlet-hight-light-color:var(--ibiz-color-warning-light-active);--ibiz-portlet-header-height:50px;--ibiz-portlet-header-padding:calc(var(--ibiz-spacing-base-tight) + 2px) var(--ibiz-spacing-base);--ibiz-portlet-header-margin:var(--ibiz-spacing-none);--ibiz-portlet-header-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-caption-max-width:300px;--ibiz-portlet-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-portlet-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-portlet-caption-color:var(--ibiz-text-color-primary);--ibiz-portlet-caption-link-color:var(--ibiz-color-link);--ibiz-portlet-caption-icon-width:4px;--ibiz-portlet-caption-icon-height:var(--ibiz-width-icon-large);--ibiz-portlet-caption-icon-color:var(--ibiz-color-primary);--ibiz-portlet-caption-icon-border-radius:var(--ibiz-border-radius-extra-small);--ibiz-portlet-content-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-content-padding:var(--ibiz-spacing-none);--ibiz-portlet-content-margin:var(--ibiz-spacing-none);width:100%;height:100%;padding:var(--ibiz-portlet-padding);background-color:var(--ibiz-portlet-bg-color)}.ibiz-portlet-layout__caption{max-width:var(--ibiz-portlet-caption-max-width);height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-base)}.ibiz-portlet-layout__caption-text{font-size:var(--ibiz-portlet-caption-font-size);font-weight:var(--ibiz-portlet-caption-font-weight);line-height:var(--ibiz-portlet-caption-font-size);color:var(--ibiz-portlet-caption-color)}.ibiz-portlet-layout__caption::before{position:absolute;top:50%;left:0;width:var(--ibiz-portlet-caption-icon-width);height:var(--ibiz-portlet-caption-icon-height);content:"";background-color:var(--ibiz-portlet-caption-icon-color);border-radius:var(--ibiz-portlet-caption-icon-border-radius);transform:translateY(-50%)}.ibiz-portlet-layout__caption.is-link{cursor:pointer}.ibiz-portlet-layout__caption.is-link:hover{color:var(--ibiz-portlet-caption-link-color)}.ibiz-portlet-layout.is-no-header>.ibiz-portlet-layout-content{height:100%}.ibiz-portlet-layout.is-hight-light{box-shadow:0 0 0 calc(var(--ibiz-portlet-padding) - 2px) var(--ibiz-color-bg-1) inset,inset 0 0 0 var(--ibiz-portlet-padding) var(--ibiz-portlet-hight-light-color)}.ibiz-portlet-layout-header{display:flex;justify-content:space-between}.ibiz-portlet-layout-header__left{position:relative}.ibiz-portlet-layout-header.is-custom{position:relative}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__left{z-index:1}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__right{z-index:1}.ibiz-portlet-layout-header.is-custom .ibiz-portlet-layout-header__bg{position:absolute;top:0;left:0;width:100%;height:100%}.ibiz-portlet-layout-header{height:var(--ibiz-portlet-header-height);padding:var(--ibiz-portlet-header-padding);margin:var(--ibiz-portlet-header-margin);background-color:var(--ibiz-portlet-header-bg-color)}.ibiz-portlet-layout-content{height:calc(100% - var(--ibiz-portlet-header-height));padding:var(--ibiz-portlet-content-padding);margin:var(--ibiz-portlet-content-margin);overflow-y:scroll;background-color:var(--ibiz-portlet-content-bg-color)}

package/lib/control/dashboard/portlet/rawitem-portlet/rawitem-portlet.cjs

@@ -23,6 +23,10 @@ const RawItemPortlet = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = props.controller;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = c.model.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const content = vue.ref();
     const onInit = async () => {
       const rawItemModel = c.model.rawItem;
@@ -50,7 +54,9 @@ const RawItemPortlet = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      content
+      content,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -60,6 +66,8 @@ const RawItemPortlet = /* @__PURE__ */ vue.defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = vue.h(vue.resolveComponent("iBizRawItem"), {
+      class: this.semanticClass("portlet.rawitem", this.controller),
+      style: this.semanticStyle("portlet.rawitem", this.controller),
       rawItem: this.modelData,
       content: this.content
     })) ? _slot : {

package/lib/control/dashboard/portlet/report-portlet/report-portlet.cjs

@@ -23,6 +23,10 @@ const ReportPortlet = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a, _b;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const report = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === runtime.ControlType.REPORT_PANEL;
     });
@@ -47,7 +51,9 @@ const ReportPortlet = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       report,
-      linkAction
+      linkAction,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -62,6 +68,8 @@ const ReportPortlet = /* @__PURE__ */ vue.defineComponent({
       "linkAction": this.linkAction,
       "class": classArr
     }, _isSlot(_slot = vue.h(vue.resolveComponent("IBizControlShell"), {
+      class: this.semanticClass("portlet.report", this.controller),
+      style: this.semanticStyle("portlet.report", this.controller),
       context,
       params,
       modelData: this.report

package/lib/control/dashboard/portlet/view-portlet/view-portlet.cjs

@@ -23,6 +23,10 @@ const ViewPortlet = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const view = props.modelData.portletAppView;
     let timerTag;
     vue.onMounted(() => {
@@ -38,7 +42,9 @@ const ViewPortlet = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      view
+      view,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -52,6 +58,8 @@ const ViewPortlet = /* @__PURE__ */ vue.defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = vue.h(vue.resolveComponent("IBizViewShell"), {
+      class: this.semanticClass("portlet.view", this.controller),
+      style: this.semanticStyle("portlet.view", this.controller),
       context,
       params,
       modelData: this.view

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