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

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

@@ -1 +1 @@
-.ibiz-calendar-user{--ibiz-calendar-user-cell-min-height:60px;--ibiz-calendar-user-cell-min-width:114px;--ibiz-calendar-user-head-cell-min-width:75px;display:flex;flex-direction:column;width:calc(100% - var(--ibiz-spacing-base) - var(--ibiz-spacing-base));height:calc(100% - var(--ibiz-spacing-base) - var(--ibiz-spacing-base));margin:var(--ibiz-spacing-base);overflow:auto hidden}.ibiz-calendar-user__row{display:flex}.ibiz-calendar-user__cell{display:flex;flex:1;align-items:center;justify-content:center;min-height:var(--ibiz-calendar-user-cell-min-height);padding:0 var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-tertiary);border-left:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell:first-child{min-width:var(--ibiz-calendar-user-head-cell-min-width)}.ibiz-calendar-user__cell:not(:first-child){min-width:var(--ibiz-calendar-user-cell-min-width)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user__cell .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-calendar-user__cell--top{border-top:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user__custom-user-popover{max-height:300px;overflow:auto}.ibiz-calendar-user__custom-user-popover .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user__custom-user-popover .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-calendar-user__more{flex-shrink:0;padding-left:var(--ibiz-spacing-tight);overflow:hidden;font-size:var(--ibiz-font-size-small);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-calendar-user__more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-calendar-user__header{flex-shrink:0;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}.ibiz-calendar-user__body{flex:1;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}
+.ibiz-calendar-user{--ibiz-control-calendar-user-margin:var(--ibiz-spacing-base);--ibiz-control-calendar-user-cell-min-height:60px;--ibiz-control-calendar-user-cell-min-width:114px;--ibiz-control-calendar-user-cell-head-min-width:75px;--ibiz-control-calendar-user-cell-border-color:var(--ibiz-color-tertiary);--ibiz-control-calendar-user-cell-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-calendar-user-item-active-color:var(--ibiz-color-primary-text);--ibiz-control-calendar-user-item-active-bg-color:var(--ibiz-color-primary);display:flex;flex-direction:column;width:calc(100% - var(--ibiz-control-calendar-user-margin) * 2);height:calc(100% - var(--ibiz-control-calendar-user-margin) * 2);margin:var(--ibiz-control-calendar-user-margin);overflow:auto hidden}.ibiz-calendar-user__row{display:flex}.ibiz-calendar-user__cell{display:flex;flex:1;align-items:center;justify-content:center;min-height:var(--ibiz-control-calendar-user-cell-min-height);padding:var(--ibiz-control-calendar-user-cell-padding);border-bottom:1px solid var(--ibiz-control-calendar-user-cell-border-color);border-left:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__cell:first-child{min-width:var(--ibiz-control-calendar-user-cell-head-min-width)}.ibiz-calendar-user__cell:not(:first-child){min-width:var(--ibiz-control-calendar-user-cell-min-width)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__cell--top{border-top:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user__custom-user-popover{max-height:300px;overflow:auto}.ibiz-calendar-user .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user .ibiz-control-calendar-item.is-active{color:var(--ibiz-control-calendar-user-item-active-color);background-color:var(--ibiz-control-calendar-user-item-active-bg-color)}.ibiz-calendar-user__more{flex-shrink:0;padding-left:var(--ibiz-spacing-tight);overflow:hidden;font-size:var(--ibiz-control-calendar-more-font-size);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:var(--ibiz-control-calendar-more-border-radius)}.ibiz-calendar-user__more:hover{background-color:var(--ibiz-control-calendar-more-hover-bg-color)}.ibiz-calendar-user__header{flex-shrink:0;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}.ibiz-calendar-user__body{flex:1;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}

package/lib/control/calendar/components/{calendar-flatten/calendar-flatten.cjs → calendar-user2/calendar-user2.cjs}

@@ -4,12 +4,12 @@ var vue = require('vue');
 var dayjs = require('dayjs');
 var vue3Util = require('@ibiz-template/vue3-util');
 var quarterOfYear = require('dayjs/plugin/quarterOfYear');
-require('./calendar-flatten.css');
+require('./calendar-user2.css');
 
 "use strict";
 dayjs.extend(quarterOfYear);
-const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
-  name: "CalendarFlatten",
+const CalendarUser2 = /* @__PURE__ */ vue.defineComponent({
+  name: "CalendarUser2",
   props: {
     title: {
       type: String,
@@ -27,6 +27,14 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
       required: true,
       type: Array,
       validator: (range) => range.length === 2
+    },
+    semanticClass: {
+      type: Function,
+      required: true
+    },
+    semanticStyle: {
+      type: Function,
+      required: true
     }
   },
   emits: {
@@ -36,7 +44,7 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     emit
   }) {
-    const ns = vue3Util.useNamespace("calendar-flatten");
+    const ns = vue3Util.useNamespace("calendar-user2");
     const range = vue.computed({
       get() {
         return props.timeRange;
@@ -108,24 +116,28 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
   },
   render() {
     return vue.createVNode("div", {
-      "class": this.ns.b()
+      "style": this.semanticStyle("user2"),
+      "class": [this.ns.b(), this.semanticClass("user2")]
     }, [vue.createVNode("div", {
-      "class": this.ns.e("header")
+      "class": [this.ns.e("header"), this.semanticClass("user2.header")],
+      "style": this.semanticStyle("user2.header")
     }, [vue.createVNode("div", {
       "class": this.ns.em("header", "left")
     }, [this.title]), vue.createVNode("div", {
-      "class": this.ns.em("header", "centre")
+      "class": [this.ns.em("header", "legend"), this.semanticStyle("legend")],
+      "style": this.semanticStyle("legend")
     }, [this.legends.length > 1 && this.legends.map((legend) => {
       return vue.createVNode("div", {
-        "class": this.ns.e("legend"),
+        "class": [this.ns.e("legend-item"), this.semanticStyle("legend.item")],
+        "style": this.semanticStyle("legend.item"),
         "onClick": () => this.$emit("legendClick", legend)
       }, [vue.createVNode("div", {
-        "class": this.ns.em("legend", "dot"),
+        "class": this.ns.em("legend-item", "dot"),
         "style": {
           backgroundColor: legend.isShow ? legend == null ? void 0 : legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")")
         }
       }, null), vue.createVNode("div", {
-        "class": this.ns.em("legend", "text")
+        "class": this.ns.em("legend-item", "text")
       }, [legend.name])]);
     })]), vue.createVNode("div", {
       "class": this.ns.em("header", "right")
@@ -136,7 +148,8 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
       "onUpdate:modelValue": ($event) => this.range = $event,
       "class": this.ns.e("data-picker")
     }, null)])]), vue.createVNode("div", {
-      "class": this.ns.e("body")
+      "class": [this.ns.e("body"), this.semanticClass("user2.body")],
+      "style": this.semanticStyle("user2.body")
     }, [this.months.map((month) => {
       return vue.createVNode(vue.resolveComponent("el-calendar"), {
         "modelValue": month,
@@ -186,8 +199,9 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
             }, [marks.map((mark) => {
               if (mark.isShow)
                 return vue.createVNode("div", {
-                  "class": this.ns.e("dot"),
+                  "class": [this.ns.e("dot"), this.semanticClass("dot")],
                   "style": {
+                    ...this.semanticStyle("dot"),
                     backgroundColor: mark.bkcolor
                   }
                 }, null);
@@ -199,4 +213,4 @@ const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-exports.CalendarFlatten = CalendarFlatten;
+exports.CalendarUser2 = CalendarUser2;

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

@@ -0,0 +1 @@
+.ibiz-calendar-user2{--ibiz-control-calendar-user2-gap:var(--ibiz-spacing-tight);--ibiz-control-calendar-user2-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-user2-border-color:var(--ibiz-control-calendar-border-color);--ibiz-control-calendar-user2-dot-small-size:4px;--ibiz-control-calendar-user2-dot-default-size:16px;--ibiz-control-calendar-user2-dot-border-radius:50%;--ibiz-control-calendar-user2-cell-size:50px;--ibiz-control-calendar-user2-cell-padding:var(--ibiz-spacing-none);display:flex;flex-direction:column;gap:var(--ibiz-control-calendar-user2-gap);width:100%;height:100%}.ibiz-calendar-user2__header{display:flex;flex-shrink:0;align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);border-bottom:1px solid var(--ibiz-control-calendar-user2-border-color)}.ibiz-calendar-user2__header--left{flex-shrink:0;min-width:300px}.ibiz-calendar-user2__header--legend{display:flex;flex-grow:1;gap:var(--ibiz-control-calendar-user2-gap);align-items:center;justify-content:center}.ibiz-calendar-user2__header--right{flex-shrink:0}.ibiz-calendar-user2__body{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-control-calendar-user2-gap);overflow:auto}.ibiz-calendar-user2__month-calendar{width:366px;border:1px solid var(--ibiz-control-calendar-user2-border-color)}.ibiz-calendar-user2__month-calendar .el-calendar__header{display:flex;justify-content:center}.ibiz-calendar-user2__month-calendar .el-calendar__body{padding:var(--ibiz-control-calendar-user2-padding)}.ibiz-calendar-user2__month-calendar .el-calendar-table .el-calendar-day{width:var(--ibiz-control-calendar-user2-cell-size);height:var(--ibiz-control-calendar-user2-cell-size);padding:var(--ibiz-control-calendar-user2-cell-none)}.ibiz-calendar-user2__month-calendar .el-calendar-table td.is-selected{background-color:transparent}.ibiz-calendar-user2__date{display:flex;flex-direction:column;gap:var(--ibiz-spacing-extra-tight);align-items:center;justify-content:center;width:100%;height:100%;padding:4px}.ibiz-calendar-user2__date--day{flex-shrink:0}.ibiz-calendar-user2__date--mark{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight);justify-content:center;overflow:hidden}.ibiz-calendar-user2__dot{width:var(--ibiz-control-calendar-user2-dot-small-size);height:var(--ibiz-control-calendar-user2-dot-small-size);border-radius:var(--ibiz-control-calendar-user2-dot-border-radius)}.ibiz-calendar-user2__legend-item{display:flex;gap:var(--ibiz-control-calendar-legend-gap);align-items:center;cursor:pointer}.ibiz-calendar-user2__legend-item--dot{width:var(--ibiz-control-calendar-user2-dot-default-size);height:var(--ibiz-control-calendar-user2-dot-default-size);border-radius:var(--ibiz-control-calendar-user2-dot-border-radius)}.ibiz-calendar-user2__popover{max-height:300px;overflow:auto;--ibiz-control-calendar-user2-item-active-color:var(--ibiz-color-primary-text);--ibiz-control-calendar-user2-item-active-bg-color:var(--ibiz-color-primary)}.ibiz-calendar-user2__event .ibiz-control-calendar-item{width:126px;height:auto}.ibiz-calendar-user2__event .ibiz-control-calendar-item.is-active{color:var(--ibiz-control-calendar-user2-item-active-color);background-color:var(--ibiz-control-calendar-user2-item-active-bg-color)}

package/lib/control/calendar/components/calendar-user2/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue3Util = require('@ibiz-template/vue3-util');
+var calendarUser2 = require('./calendar-user2.cjs');
+
+"use strict";
+const IBizCalendarUser2 = vue3Util.withInstall(calendarUser2.CalendarUser2, (v) => {
+  v.component(calendarUser2.CalendarUser2.name, calendarUser2.CalendarUser2);
+});
+
+exports.IBizCalendarUser2 = IBizCalendarUser2;
+exports.default = IBizCalendarUser2;

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

@@ -122,8 +122,11 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       const component = renderPopoverContent(event);
       return vue.createVNode("div", {
         "key": index,
-        "class": [ns.em(classEName, "event-box")],
-        "style": eventBoxStyle
+        "class": [ns.em(classEName, "event-box"), props.semanticClass("week.".concat(location === "header" ? "header.item" : "body.item"))],
+        "style": {
+          ...eventBoxStyle,
+          ...props.semanticStyle("week.".concat(location === "header" ? "header.item" : "body.item"))
+        }
       }, [vue.createVNode("button", {
         "class": [ns.em(classEName, "event-content"), ns.is("selected-event", !!event.isSelectedEvent), event.classname],
         "onClick": () => {
@@ -154,7 +157,8 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
     };
     const renderHeader = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("header")],
+        "style": props.semanticStyle("week.header"),
+        "class": [ns.e("header"), props.semanticClass("week.header")],
         "ref": (el) => {
           resizableHand.value = el;
         }
@@ -206,8 +210,9 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
     };
     const renderContent = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("scroll-area")],
-        "onMousemove": contentMousemove
+        "onMousemove": contentMousemove,
+        "style": props.semanticStyle("week.body"),
+        "class": [ns.e("scroll-area"), props.semanticClass("week.body")]
       }, [vue.createVNode("div", {
         "class": ns.e("time-pane")
       }, [vue.createVNode("div", {

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

@@ -1 +1 @@
-.ibiz-calendar-week{display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:100%;height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:calc(100% - 7px);height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-calendar-week__header--events{display:flex;flex:1;width:100%;height:30px;overflow:hidden;position:relative}.ibiz-calendar-week__header--event-container{width:calc(100% - 97px);height:100%;overflow-y:auto;overflow-x:hidden}.ibiz-calendar-week__header--event-container::-webkit-scrollbar{display:none}.ibiz-calendar-week__header--container-scroll{display:flex;height:auto}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:auto}.ibiz-calendar-week__header--event-cell::after{content:"";display:block;position:absolute;top:0;right:0;width:1px;height:var(--ibiz-calendar-week-header-event-scroll-real-height);border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-box{position:absolute;display:flex;min-width:32px}.ibiz-calendar-week__header--event-box:has(.ibiz-calendar-week__header--check){min-width:50px}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:100%;min-height:22px;cursor:pointer;background-color:var(--ibiz-color-primary);border:none;outline:0}.ibiz-calendar-week__header--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:calc(100% - 7px);height:10px;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-color-border)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-color-primary);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.ibiz-popover{position:absolute;z-index:110;padding:var(--ibiz-spacing-tight);background:var(--ibiz-color-bg-1);border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-calendar-week__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-week-scroll-bar{position:absolute;top:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-week-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-height);cursor:pointer;background-color:var(--ibiz-color-fill-2);border-radius:var(--ibiz-border-radius-extra-small)}
+.ibiz-calendar-week{--ibiz-control-calendar-week-tody-text-color:var(--ibiz-color-primary-text);--ibiz-control-calendar-week-tody-bg-color:var(--ibiz-color-primary);--ibiz-control-calendar-week-item-bg-color:var(--ibiz-color-primary);--ibiz-control-calendar-week-item-active-border-color:var(--ibiz-color-primary);--ibiz-control-calendar-week-scroll-width:4px;--ibiz-control-calendar-week-scroll-border-radius:var(--ibiz-border-radius-extra-small);--ibiz-control-calendar-week-scroll-bg-color:var(--ibiz-color-fill-2);display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:100%;height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-control-calendar-week-border-color);border-bottom:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:calc(100% - 7px);height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-control-calendar-week-border-color);border-bottom:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:var(--ibiz-control-calendar-week-tody-text-color);background-color:var(--ibiz-control-calendar-week-tody-bg-color)}.ibiz-calendar-week__header--events{position:relative;display:flex;flex:1;width:100%;height:30px;overflow:hidden}.ibiz-calendar-week__header--event-container{width:calc(100% - 97px);height:100%;overflow:hidden auto}.ibiz-calendar-week__header--event-container::-webkit-scrollbar{display:none}.ibiz-calendar-week__header--container-scroll{display:flex;height:auto}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:auto}.ibiz-calendar-week__header--event-cell::after{position:absolute;top:0;right:0;display:block;width:1px;height:var(--ibiz-calendar-week-header-event-scroll-real-height);content:"";border-right:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__header--event-box{position:absolute;display:flex;min-width:32px}.ibiz-calendar-week__header--event-box:has(.ibiz-calendar-week__header--check){min-width:50px}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:100%;min-height:22px;cursor:pointer;background-color:var(--ibiz-control-calendar-week-item-bg-color);border:none;outline:0}.ibiz-calendar-week__header--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:calc(100% - 7px);height:10px;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-control-calendar-week-active-color);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-control-calendar-week-border-color)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-control-calendar-week-item-active-border-color)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.ibiz-popover{position:absolute;z-index:110;padding:var(--ibiz-spacing-tight);background:var(--ibiz-color-bg-1);border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-calendar-week__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-week-scroll-bar{position:absolute;top:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-top);right:0;z-index:10;width:var(--ibiz-control-calendar-week-scroll-width);height:100%;border-radius:var(--ibiz-control-calendar-week-scroll-border-radius)}.ibiz-calendar-week-scroll-bar__thumb{width:var(--ibiz-control-calendar-week-scroll-width);height:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-height);cursor:pointer;background-color:var(--ibiz-control-calendar-week-scroll-bg-color);border-radius:var(--ibiz-control-calendar-week-scroll-border-radius)}

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

@@ -43,9 +43,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
     const renderWeek = () => {
       var _a;
       return vue.createVNode("div", {
-        "class": [ns.e("calendar-week")]
+        "class": [ns.e("calendar-week"), props.semanticClass("week")],
+        "style": props.semanticStyle("week")
       }, [(slots == null ? void 0 : slots.header) ? vue.createVNode("div", {
-        "class": [ns.em("calendar-month", "header")]
+        "class": [ns.em("calendar-week", "header")]
       }, [(_a = slots == null ? void 0 : slots.header) == null ? void 0 : _a.call(slots, {
         date: dayjs(realSelectedDay.value).format("YYYY-MM-DD"),
         legends: legends.value
@@ -79,6 +80,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "placeholder": "\u9009\u62E9\u65E5\u671F",
         "shortcuts": shortcuts
       }, null)])])]), vue.createVNode(index.IBizCalendarWeek, {
+        "semanticClass": props.semanticClass,
+        "semanticStyle": props.semanticStyle,
         "selected-day": realSelectedDay.value,
         "showDetail": props.showDetail,
         "events": events.value,
@@ -93,35 +96,36 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
     const renderDay = () => {
       var _a;
       return vue.createVNode("div", {
-        "class": [ns.e("calendar-week")]
+        "class": [ns.e("calendar-day"), props.semanticClass("day")],
+        "style": props.semanticStyle("day")
       }, [(slots == null ? void 0 : slots.header) ? vue.createVNode("div", {
-        "class": [ns.em("calendar-month", "header")]
+        "class": [ns.em("calendar-day", "header")]
       }, [(_a = slots == null ? void 0 : slots.header) == null ? void 0 : _a.call(slots, {
         date: dayjs(realSelectedDay.value).format("YYYY-MM-DD"),
         legends: legends.value
       })]) : vue.createVNode("div", {
-        "class": [ns.em("calendar-week", "header")]
+        "class": [ns.em("calendar-day", "header")]
       }, [vue.createVNode("div", {
-        "class": ns.em("calendar-week", "header-top")
+        "class": ns.em("calendar-day", "header-top")
       }, [vue.createVNode("div", {
-        "class": ns.em("calendar-week", "title")
+        "class": ns.em("calendar-day", "title")
       }, [props.calendarTitle || ibiz.i18n.t("control.calendar.title")]), vue.createVNode("div", {
-        "class": ns.em("calendar-week", "legend")
+        "class": ns.em("calendar-day", "legend")
       }, [legends.value.length > 1 && legends.value.map((item) => {
         return vue.createVNode("div", {
-          "class": ns.em("calendar-week", "legend-item"),
+          "class": ns.em("calendar-day", "legend-item"),
           "onClick": () => selectLegend(item)
         }, [vue.createVNode("div", {
-          "class": ns.em("calendar-week", "legend-item-tip"),
+          "class": ns.em("calendar-day", "legend-item-tip"),
           "style": {
             background: item.isShow ? item.bkcolor : "var(".concat(ns.cssVarName("color-disabled-bg"), ")")
           }
         }, null), vue.createVNode("div", {
-          "class": ns.em("calendar-week", "legend-item-text"),
+          "class": ns.em("calendar-day", "legend-item-text"),
           "title": core.showTitle(item.name)
         }, [item.name])]);
       })]), vue.createVNode("div", {
-        "class": ns.em("calendar-week", "select-time")
+        "class": ns.em("calendar-day", "select-time")
       }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
         "modelValue": realSelectedDay.value,
         "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
@@ -129,8 +133,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "placeholder": ibiz.i18n.t("control.calendar.calendardaily.selectdate"),
         "shortcuts": shortcuts
       }, null)])]), vue.createVNode("div", {
-        "class": ns.em("calendar-week", "text-secondary")
+        "class": ns.em("calendar-day", "text-secondary")
       }, [curWeek.value])]), vue.createVNode(index$1.IBizCalendarDaily, {
+        "semanticClass": props.semanticClass,
+        "semanticStyle": props.semanticStyle,
         "selected-day": realSelectedDay.value,
         "controller": props.controller,
         "showDetail": props.showDetail,
@@ -146,7 +152,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
     const renderUser = () => {
       const weekRange = useCustomCalendar.calcCurrentWeekRange(new Date(realSelectedDay.value));
       return vue.createVNode("div", {
-        "class": [ns.e("calendar-user")]
+        "class": [ns.e("calendar-user"), props.semanticClass("user")],
+        "style": props.semanticStyle("user")
       }, [vue.createVNode("div", {
         "class": [ns.e("calendar-user-header")]
       }, [vue.createVNode("div", {
@@ -165,6 +172,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "placeholder": ibiz.i18n.t("control.calendar.calendarUser.selectWeekRange"),
         "format": ibiz.i18n.t("control.calendar.calendarUser.weekFormat")
       }, null)])]), vue.createVNode(index$2.IBizCalendarUser, {
+        "semanticClass": props.semanticClass,
+        "semanticStyle": props.semanticStyle,
         "selected-day": realSelectedDay.value,
         "events": events.value,
         "onEventClick": (value) => handleEVentClick(value),
@@ -194,7 +203,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
   },
   render() {
     return vue.createVNode("div", {
-      "class": [this.ns.b()]
+      "style": this.semanticStyle("content"),
+      "class": [this.ns.b(), this.semanticClass("content")]
     }, [this.renderContent()]);
   }
 });

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/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)]
     });