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

package/lib/control/calendar/components/custom-calendar/custom-calendar.css

@@ -1 +1 @@
-.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar__calendar-user{display:flex;flex-direction:column;height:100%}.ibiz-custom-calendar__calendar-user-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--ibiz-spacing-base)}.ibiz-custom-calendar__calendar-user-header--right .el-date-editor.el-date-editor--week.el-input{width:250px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}
+.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{--ibiz-control-calendar-day-active-color:var(--ibiz-color-primary);--ibiz-control-calendar-day-border-color:var(--ibiz-control-calendar-border-color);display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-control-calendar-day-border-color)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-control-calendar-day-border-color)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{--ibiz-control-calendar-week-active-color:var(--ibiz-color-primary);--ibiz-control-calendar-week-border-color:var(--ibiz-control-calendar-border-color);display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-user{display:flex;flex-direction:column;height:100%}.ibiz-custom-calendar__calendar-user-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--ibiz-spacing-base)}.ibiz-custom-calendar__calendar-user-header--right .el-date-editor.el-date-editor--week.el-input{width:250px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}

package/lib/control/calendar/components/custom-calendar/use-custom-calendar.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var vue = require('vue');
 var dayjs = require('dayjs');
 var ElementPlus = require('element-plus');
-require('../util/index.cjs');
+var vue = require('vue');
 require('../constant/index.cjs');
+require('../util/index.cjs');
 var util = require('../util/util.cjs');
 var event = require('../constant/event.cjs');
 

package/lib/control/calendar/components/interface/calendar-daily.cjs

@@ -26,6 +26,14 @@ const calendarDailyProps = util.handleProps({
   showDetail: {
     type: Boolean,
     default: false
+  },
+  semanticClass: {
+    type: Function,
+    required: true
+  },
+  semanticStyle: {
+    type: Function,
+    required: true
   }
 });
 const calendarDailyEmits = {

package/lib/control/calendar/components/interface/calendar-user.cjs

@@ -12,6 +12,14 @@ const calendarUserProps = util.handleProps({
   events: {
     type: Array,
     default: []
+  },
+  semanticClass: {
+    type: Function,
+    required: true
+  },
+  semanticStyle: {
+    type: Function,
+    required: true
   }
 });
 const calendarUserEmits = {

package/lib/control/calendar/components/interface/calendar-week.cjs

@@ -26,6 +26,14 @@ const calendarWeekProps = util.handleProps({
   },
   selectedData: {
     type: Object
+  },
+  semanticClass: {
+    type: Function,
+    required: true
+  },
+  semanticStyle: {
+    type: Function,
+    required: true
   }
 });
 const calendarWeekEmits = {

package/lib/control/calendar/components/interface/custom-calendar.cjs

@@ -61,6 +61,14 @@ const customCalendarProps = util.handleProps({
    */
   selectedData: {
     type: Object
+  },
+  semanticClass: {
+    type: Function,
+    required: true
+  },
+  semanticStyle: {
+    type: Function,
+    required: true
   }
 });
 const customCalendarEmits = {

package/lib/control/dashboard/custom-dashboard-container/custom-dashboard-container.cjs

@@ -23,6 +23,10 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
     emit
   }) {
     const ns = vue3Util.useNamespace("custom-dashboard-container");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.dashboard);
     const customDashboard = new runtime.CustomDashboardController(props.modelData, props.dashboard);
     props.dashboard.setCustomDashboard(customDashboard);
     const customC = vue.reactive(customDashboard);
@@ -152,7 +156,9 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
       onSaved,
       onReset,
       clickCollapse,
-      openFilterDesign
+      openFilterDesign,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -160,7 +166,8 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
     return vue.withDirectives(vue.createVNode("div", {
       "class": [this.ns.b()]
     }, [this.customC.showDesignBtn ? vue.createVNode("div", {
-      "class": this.ns.b("build-btn")
+      "class": [this.ns.b("build-btn"), this.semanticClass("custom")],
+      "style": this.semanticStyle("custom")
     }, [this.showTypeDir ? vue.createVNode("div", null, [this.showFilter ? vue.createVNode(vue.resolveComponent("el-button"), {
       "class": this.ns.b("deisgn-btn"),
       "title": ibiz.i18n.t("control.dashboard.customDashboardContainer.newFilter"),

package/lib/control/dashboard/dashboard.cjs

@@ -77,6 +77,10 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
   setup() {
     const c = vue3Util.useControlController((...args) => new runtime.DashboardController(...args));
     vue3Util.useControlPopoverzIndex(c);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const vue$1 = vue.getCurrentInstance().proxy;
     const customModelDatas = vue.ref([]);
     const anchorList = vue.ref([]);
@@ -158,7 +162,9 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       anchorList,
       dashboardRef,
       calcNavBarConfig,
-      handleCustomModelChange
+      handleCustomModelChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -227,7 +233,8 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "controller": this.c,
-      "class": [this.ns.b()]
+      "class": [this.ns.b(), this.semanticClass("root")],
+      "style": this.semanticStyle("root")
     }, {
       default: () => [state.isCreated && content]
     });

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

@@ -20,6 +20,10 @@ const ActionBarPortlet = /* @__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 zIndex = props.controller.dashboard.state.zIndex;
     const onActionClick = async (detail, event) => {
       await props.controller.onActionClick(detail, event);
@@ -27,7 +31,9 @@ const ActionBarPortlet = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       zIndex,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -37,6 +43,8 @@ const ActionBarPortlet = /* @__PURE__ */ vue.defineComponent({
       "class": classArr
     }, {
       default: () => [this.modelData.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
+        "class": this.semanticClass("portlet.actionbar", this.controller),
+        "style": this.semanticStyle("portlet.actionbar", this.controller),
         "zIndex": this.zIndex,
         "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
         "actions-state": this.controller.state.actionGroupState,

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

@@ -23,6 +23,10 @@ const ChartPortlet = /* @__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 chart = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
       return item.controlType === runtime.ControlType.CHART;
     });
@@ -40,7 +44,9 @@ const ChartPortlet = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      chart
+      chart,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -56,7 +62,9 @@ const ChartPortlet = /* @__PURE__ */ vue.defineComponent({
     }, _isSlot(_slot = vue.h(vue.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/lib/control/dashboard/portlet/container-portlet/container-portlet.cjs

@@ -24,8 +24,14 @@ const ContainerPortlet = /* @__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);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -33,7 +39,9 @@ const ContainerPortlet = /* @__PURE__ */ vue.defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = vue.createVNode(vue.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/lib/control/dashboard/portlet/filter-portlet/filter-portlet.cjs

@@ -26,6 +26,10 @@ const FilterPortlet = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = props.controller;
     const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.dashboard);
     const handleReset = () => {
       c.resetFilter();
     };
@@ -59,7 +63,9 @@ const FilterPortlet = /* @__PURE__ */ vue.defineComponent({
       ns,
       handleReset,
       handleSearch,
-      renderFilter
+      renderFilter,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -70,6 +76,9 @@ const FilterPortlet = /* @__PURE__ */ vue.defineComponent({
       "class": classArr
     }, {
       default: () => [vue.createVNode("div", {
+        "class": this.semanticClass("portlet.filter"),
+        "style": this.semanticStyle("portlet.filter")
+      }, [vue.createVNode("div", {
         "class": this.ns.e("left")
       }, [this.renderFilter()]), vue.createVNode("div", {
         "class": this.ns.e("right")
@@ -81,7 +90,7 @@ const FilterPortlet = /* @__PURE__ */ vue.defineComponent({
         "onClick": this.handleSearch
       }, _isSlot(_slot2 = ibiz.i18n.t("app.search")) ? _slot2 : {
         default: () => [_slot2]
-      })])]
+      })])])]
     });
   }
 });

package/lib/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/lib/control/dashboard/portlet/html-portlet/html-portlet.cjs

@@ -21,8 +21,14 @@ const HtmlPortlet = /* @__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);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -32,6 +38,8 @@ const HtmlPortlet = /* @__PURE__ */ vue.defineComponent({
       "class": classArr
     }, {
       default: () => [vue.createVNode("iframe", {
+        "class": this.semanticClass("portlet.html", this.controller),
+        "style": this.semanticStyle("portlet.html", this.controller),
         "src": this.modelData.pageUrl
       }, null)]
     });

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