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

package/es/control/dashboard/portlet/chart-portlet/chart-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ControlType, ChartPortletController } from '@ibiz-template/runtime';
 
 "use strict";
@@ -21,6 +21,10 @@ const ChartPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a, _b;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const chart = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === ControlType.CHART;
     });
@@ -38,7 +42,9 @@ const ChartPortlet = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
-      chart
+      chart,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -54,7 +60,9 @@ const ChartPortlet = /* @__PURE__ */ defineComponent({
     }, _isSlot(_slot = h(resolveComponent("IBizControlShell"), {
       context,
       params,
-      modelData: this.chart
+      modelData: this.chart,
+      class: this.semanticClass("portlet.chart", this.controller),
+      style: this.semanticStyle("portlet.chart", this.controller)
     })) ? _slot : {
       default: () => [_slot]
     });

package/es/control/dashboard/portlet/container-portlet/container-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ContainerPortletController } from '@ibiz-template/runtime';
 import './container-portlet.css';
 
@@ -22,8 +22,14 @@ const ContainerPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -31,7 +37,9 @@ const ContainerPortlet = /* @__PURE__ */ defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = createVNode(resolveComponent("iBizRow"), {
-      "layout": this.modelData.layout
+      "layout": this.modelData.layout,
+      "class": this.semanticClass("portlet.container", this.controller),
+      "style": this.semanticStyle("portlet.container", this.controller)
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
       if (!props || !props.controller) {

package/es/control/dashboard/portlet/filter-portlet/filter-portlet.css

@@ -1 +1 @@
-.ibiz-portlet-filter__left{display:flex;flex-wrap:wrap;overflow:auto}.ibiz-portlet-filter__right{display:flex;align-items:flex-end;padding:var(--ibiz-spacing-base-tight)}.ibiz-portlet-filter .ibiz-portlet-layout-content{display:flex;justify-content:space-between}
+.ibiz-portlet-filter{--ibiz-portlet-filter-button-padding:var(--ibiz-spacing-base-tight)}.ibiz-portlet-filter__left{display:flex;flex-wrap:wrap;overflow:auto}.ibiz-portlet-filter__right{display:flex;align-items:flex-end;padding:var(--ibiz-portlet-filter-button-padding)}.ibiz-portlet-filter .ibiz-portlet-layout-content>div{display:flex;justify-content:space-between}

package/es/control/dashboard/portlet/filter-portlet/filter-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { FilterPortletController } from '@ibiz-template/runtime';
 import { FilterPortletItem } from './filter-portlet-item/filter-portlet-item.mjs';
 import './filter-portlet.css';
@@ -24,6 +24,10 @@ const FilterPortlet = /* @__PURE__ */ defineComponent({
     var _a;
     const c = props.controller;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const handleReset = () => {
       c.resetFilter();
     };
@@ -57,7 +61,9 @@ const FilterPortlet = /* @__PURE__ */ defineComponent({
       ns,
       handleReset,
       handleSearch,
-      renderFilter
+      renderFilter,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -68,6 +74,9 @@ const FilterPortlet = /* @__PURE__ */ defineComponent({
       "class": classArr
     }, {
       default: () => [createVNode("div", {
+        "class": this.semanticClass("portlet.filter"),
+        "style": this.semanticStyle("portlet.filter")
+      }, [createVNode("div", {
         "class": this.ns.e("left")
       }, [this.renderFilter()]), createVNode("div", {
         "class": this.ns.e("right")
@@ -79,7 +88,7 @@ const FilterPortlet = /* @__PURE__ */ defineComponent({
         "onClick": this.handleSearch
       }, _isSlot(_slot2 = ibiz.i18n.t("app.search")) ? _slot2 : {
         default: () => [_slot2]
-      })])]
+      })])])]
     });
   }
 });

package/es/control/dashboard/portlet/html-portlet/html-portlet.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { HtmlPortletController } from '@ibiz-template/runtime';
 import './html-portlet.css';
 
@@ -19,8 +19,14 @@ const HtmlPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -30,6 +36,8 @@ const HtmlPortlet = /* @__PURE__ */ defineComponent({
       "class": classArr
     }, {
       default: () => [createVNode("iframe", {
+        "class": this.semanticClass("portlet.html", this.controller),
+        "style": this.semanticStyle("portlet.html", this.controller),
         "src": this.modelData.pageUrl
       }, null)]
     });

package/es/control/dashboard/portlet/list-portlet/list-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ControlType, ListPortletController } from '@ibiz-template/runtime';
 
 "use strict";
@@ -21,6 +21,10 @@ const ListPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a, _b;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const list = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === ControlType.LIST;
     });
@@ -38,7 +42,9 @@ const ListPortlet = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
-      list
+      list,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -52,6 +58,8 @@ const ListPortlet = /* @__PURE__ */ defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = h(resolveComponent("IBizControlShell"), {
+      class: this.semanticClass("portlet.list", this.controller),
+      style: this.semanticStyle("portlet.list", this.controller),
       context,
       params,
       modelData: this.list

package/es/control/dashboard/portlet/menu-portlet/menu-portlet.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ControlType, MenuPortletController } from '@ibiz-template/runtime';
 
 "use strict";
@@ -18,12 +18,18 @@ const MenuPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a, _b;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const menu = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === ControlType.APP_MENU;
     });
     return {
       ns,
-      menu
+      menu,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -37,6 +43,8 @@ const MenuPortlet = /* @__PURE__ */ defineComponent({
       "class": classArr
     }, {
       default: () => [this.menu && createVNode(resolveComponent("iBizAppMenuPortletControl"), {
+        "class": this.semanticClass("portlet.menu", this.controller),
+        "style": this.semanticStyle("portlet.menu", this.controller),
         "modelData": this.menu,
         "context": context,
         "params": params

package/es/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/es/control/dashboard/portlet/portlet-layout/portlet-layout.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent, computed } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ScriptFactory, PortletPartController } from '@ibiz-template/runtime';
 import { showTitle } from '@ibiz-template/core';
 import './portlet-layout.css';
@@ -21,6 +21,10 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("portlet-layout");
     const portletType = "portlet-".concat((_a = props.controller.model.portletType) == null ? void 0 : _a.toLowerCase());
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.dashboard);
     const zIndex = props.controller.dashboard.state.zIndex;
     const popperClass = computed(() => {
       const classNames = [ns.em("toolbar", "".concat(portletType, "-").concat(c.model.id))];
@@ -91,7 +95,9 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
       renderContent,
       openLink,
       clickPorlet,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -102,20 +108,24 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
     } = this.controller;
     const isCustom = !!(this.header || this.headerCaption || this.headerBg || this.headerAction);
     return 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 ? 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)]) : 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 && createVNode("div", {
       "class": this.ns.be("header", "bg")
     }, [this.renderContent(this.headerBg)]), createVNode("div", {
       "class": this.ns.be("header", "left"),
       "onClick": (event) => this.clickPorlet(event, "title")
     }, [model.showTitleBar && (this.headerCaption ? this.renderContent(this.headerCaption) : 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
     }, [createVNode(resolveComponent("iBizIcon"), {
       "class": this.ns.e("caption-icon"),
@@ -127,7 +137,8 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
       "class": this.ns.be("header", "right")
     }, [this.headerAction ? this.renderContent(this.headerAction) : model.portletType !== "ACTIONBAR" && model.uiactionGroup && createVNode(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",
@@ -135,7 +146,8 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
       "onActionClick": this.onActionClick
     }, null)])]) : null, 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/es/control/dashboard/portlet/rawitem-portlet/rawitem-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, ref, onMounted } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 
 "use strict";
 function _isSlot(s) {
@@ -21,6 +21,10 @@ const RawItemPortlet = /* @__PURE__ */ defineComponent({
     var _a;
     const c = props.controller;
     const ns = useNamespace("portlet-".concat((_a = c.model.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const content = ref();
     const onInit = async () => {
       const rawItemModel = c.model.rawItem;
@@ -48,7 +52,9 @@ const RawItemPortlet = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
-      content
+      content,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -58,6 +64,8 @@ const RawItemPortlet = /* @__PURE__ */ defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = h(resolveComponent("iBizRawItem"), {
+      class: this.semanticClass("portlet.rawitem", this.controller),
+      style: this.semanticStyle("portlet.rawitem", this.controller),
       rawItem: this.modelData,
       content: this.content
     })) ? _slot : {

package/es/control/dashboard/portlet/report-portlet/report-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, computed, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ControlType, ReportPortletController } from '@ibiz-template/runtime';
 
 "use strict";
@@ -21,6 +21,10 @@ const ReportPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a, _b;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const report = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === ControlType.REPORT_PANEL;
     });
@@ -45,7 +49,9 @@ const ReportPortlet = /* @__PURE__ */ defineComponent({
     return {
       ns,
       report,
-      linkAction
+      linkAction,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -60,6 +66,8 @@ const ReportPortlet = /* @__PURE__ */ defineComponent({
       "linkAction": this.linkAction,
       "class": classArr
     }, _isSlot(_slot = h(resolveComponent("IBizControlShell"), {
+      class: this.semanticClass("portlet.report", this.controller),
+      style: this.semanticStyle("portlet.report", this.controller),
       context,
       params,
       modelData: this.report

package/es/control/dashboard/portlet/view-portlet/view-portlet.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ViewPortletController } from '@ibiz-template/runtime';
 
 "use strict";
@@ -21,6 +21,10 @@ const ViewPortlet = /* @__PURE__ */ defineComponent({
   setup(props) {
     var _a;
     const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.dashboard);
     const view = props.modelData.portletAppView;
     let timerTag;
     onMounted(() => {
@@ -36,7 +40,9 @@ const ViewPortlet = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
-      view
+      view,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -50,6 +56,8 @@ const ViewPortlet = /* @__PURE__ */ defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = h(resolveComponent("IBizViewShell"), {
+      class: this.semanticClass("portlet.view", this.controller),
+      style: this.semanticStyle("portlet.view", this.controller),
       context,
       params,
       modelData: this.view

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