@ibiz-template/vue3-components 0.7.41-alpha.16 → 0.7.41-alpha.161

package/lib/panel-component/panel-view-header/panel-view-header.cjs

@@ -23,12 +23,16 @@ const PanelViewHeader = /* @__PURE__ */ vue.defineComponent({
      * @description 容器控制器
      */
     controller: {
-      type: runtime.PanelItemController,
+      type: runtime.PanelContainerController,
       required: true
     }
   },
   setup(props) {
     const ns = vue3Util.useNamespace("panel-view-header");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller);
     const {
       showCaption,
       titleBarCloseMode,
@@ -52,7 +56,9 @@ const PanelViewHeader = /* @__PURE__ */ vue.defineComponent({
       ns,
       isCollapse,
       classArr,
-      changeCollapse
+      changeCollapse,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -61,6 +67,8 @@ const PanelViewHeader = /* @__PURE__ */ vue.defineComponent({
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
       "slot": "content",
+      "class": this.semanticClass("content"),
+      "style": this.semanticStyle("content"),
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
@@ -68,6 +76,12 @@ const PanelViewHeader = /* @__PURE__ */ vue.defineComponent({
         return slot;
       }
       return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "class": this.semanticClass("item", {
+          props
+        }),
+        "style": this.semanticStyle("item", {
+          props
+        }),
         "layoutPos": props.modelData.layoutPos,
         "state": props.controller.state
       }, _isSlot(slot) ? slot : {
@@ -76,9 +90,11 @@ const PanelViewHeader = /* @__PURE__ */ vue.defineComponent({
     })) ? _slot : {
       default: () => [_slot]
     });
-    return vue.createVNode("div", {
-      "class": this.classArr
-    }, [content]);
+    return vue.withDirectives(vue.createVNode("div", {
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
+      "element-loading-text": this.controller.state.loadingText
+    }, [content]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

package/lib/panel-component/panel-view-header/panel-view-header.css

@@ -1 +1 @@
-.ibiz-panel-view-header{width:auto;height:64px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-panel-view-header .ibiz-row{height:100%}.ibiz-panel-view-header .ibiz-panel-container--view_header_right{padding:0 var(--ibiz-spacing-base)}.ibiz-panel-view-header .el-tabs__nav-wrap::after{display:none}
+.ibiz-panel-view-header{--ibiz-panel-view-header-height:64px;--ibiz-panel-view-header-border-color:var(--ibiz-color-border);--ibiz-panel-view-header-padding:0 var(--ibiz-spacing-base);width:auto;height:var(--ibiz-panel-view-header-height);border-bottom:1px solid var(--ibiz-panel-view-header-border-color)}.ibiz-panel-view-header .ibiz-row{height:100%}.ibiz-panel-view-header .ibiz-panel-container--view_header_right{padding:var(--ibiz-panel-view-header-padding)}.ibiz-panel-view-header .el-tabs__nav-wrap::after{display:none}

package/lib/panel-component/panel-view-header/panel-view-header.provider.cjs

@@ -14,7 +14,7 @@ class PanelViewHeaderProvider {
     __publicField(this, "component", "IBizPanelViewHeader");
   }
   async createController(panelItem, panel, parent) {
-    const c = new runtime.PanelItemController(panelItem, panel, parent);
+    const c = new runtime.PanelContainerController(panelItem, panel, parent);
     await c.init();
     return c;
   }

package/lib/panel-component/searchform-buttons/searchform-buttons.cjs

@@ -32,6 +32,10 @@ const SearchFormButtons = /* @__PURE__ */ vue.defineComponent({
     var _a, _b;
     const ns = vue3Util.useNamespace("searchform-buttons");
     const c = prop.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.searchFrom);
     const isDesignPreview = ((_b = (_a = c.panel) == null ? void 0 : _a.context) == null ? void 0 : _b.srfrunmode) === "DESIGN";
     const onSearchButtonClick = () => {
       if (isDesignPreview) {
@@ -61,20 +65,27 @@ const SearchFormButtons = /* @__PURE__ */ vue.defineComponent({
       onSearchButtonClick,
       onResetButtonClick,
       saveFilterConfirm,
-      onAdvanceSearch
+      onAdvanceSearch,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     let _slot, _slot4;
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass]
+      "class": [this.ns.b(), this.semanticClass("button"), this.ns.m(this.modelData.id), ...this.controller.containerClass],
+      "style": this.semanticStyle("button")
     }, [this.controller.searchButtonStyle === "SEARCHONLY" ? vue.createVNode(vue.resolveComponent("el-button"), {
-      "onClick": this.onSearchButtonClick
+      "onClick": this.onSearchButtonClick,
+      "class": [this.ns.e("search"), this.semanticClass("button.search")],
+      "style": this.semanticStyle("button.search")
     }, _isSlot(_slot = ibiz.i18n.t("app.search")) ? _slot : {
       default: () => [_slot]
     }) : vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "split-button": true,
       "type": "primary",
+      "class": [this.ns.e("search"), this.semanticClass("button.search")],
+      "style": this.semanticStyle("button.search"),
       "onClick": this.onSearchButtonClick
     }, {
       default: () => vue.createVNode("span", {
@@ -82,18 +93,30 @@ const SearchFormButtons = /* @__PURE__ */ vue.defineComponent({
       }, [ibiz.i18n.t("app.search")]),
       dropdown: () => {
         let _slot2, _slot3;
-        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), {
+          "class": this.semanticClass("popup"),
+          "style": this.semanticStyle("popup")
+        }, {
           default: () => [vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-            "onClick": this.onResetButtonClick
+            "onClick": this.onResetButtonClick,
+            "class": [this.ns.e("reset"), this.semanticClass("button.reset")],
+            "style": this.semanticStyle("button.reset")
           }, _isSlot(_slot2 = ibiz.i18n.t("app.reset")) ? _slot2 : {
             default: () => [_slot2]
           }), this.controller.searchFrom.state.enableStoredFilters && vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-            "onClick": this.saveFilterConfirm
+            "onClick": this.saveFilterConfirm,
+            "class": [this.ns.e("save"), this.semanticClass("button.save")],
+            "style": this.semanticStyle("button.save")
           }, _isSlot(_slot3 = ibiz.i18n.t("panelComponent.searchformButtons.saveCondition")) ? _slot3 : {
             default: () => [_slot3]
           }), this.controller.storedFilters.length > 0 && this.controller.storedFilters.map((item, index) => {
             return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-              "class": this.ns.b("filter-item"),
+              "class": [this.ns.b("filter-item"), this.semanticClass("button.item", {
+                item
+              })],
+              "style": this.semanticStyle("button.item", {
+                item
+              }),
               "onClick": () => {
                 this.controller.searchFrom.applyStoredFilter(index);
               }
@@ -113,7 +136,9 @@ const SearchFormButtons = /* @__PURE__ */ vue.defineComponent({
         });
       }
     }), this.controller.advanceSearch && vue.createVNode(vue.resolveComponent("el-button"), {
-      "onClick": this.onAdvanceSearch
+      "onClick": this.onAdvanceSearch,
+      "class": [this.ns.e("advance"), this.semanticClass("button.advance")],
+      "style": this.semanticStyle("button.advance")
     }, _isSlot(_slot4 = ibiz.i18n.t("app.advanceSearch")) ? _slot4 : {
       default: () => [_slot4]
     })]);

package/lib/panel-component/searchform-buttons/searchform-buttons.css

@@ -1 +1 @@
-.ibiz-searchform-buttons{--ibiz-searchform-buttons-height:40px;display:flex;gap:var(--ibiz-spacing-tight);align-items:center;height:var(--ibiz-searchform-buttons-height);margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-tight)}.ibiz-searchform-buttons .el-button+.el-button{margin-left:0}.ibiz-searchform-buttons-filter-item{position:relative}.ibiz-searchform-buttons-filter-item__text{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-searchform-buttons-filter-item__remove{position:absolute;top:var(--ibiz-spacing-base-tight);right:0;display:none;font-size:var(--ibiz-font-size-header-5)}.ibiz-searchform-buttons-filter-item:hover .ibiz-searchform-buttons-filter-item__remove{display:block}
+.ibiz-searchform-buttons{--ibiz-control-searchform-button-height:40px;--ibiz-control-searchform-button-gap:var(--ibiz-spacing-tight);--ibiz-control-searchform-button-margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-tight);display:flex;gap:var(--ibiz-control-searchform-button-gap);align-items:center;height:var(--ibiz-control-searchform-button-height);margin:var(--ibiz-control-searchform-button-margin)}.ibiz-searchform-buttons .el-button+.el-button{margin-left:0}.ibiz-searchform-buttons-filter-item{--ibiz-control-searchform-button-filter-font-size:var(--ibiz-font-size-header-5);--ibiz-control-searchform-button-filter-gap:var(--ibiz-spacing-extra-tight);position:relative}.ibiz-searchform-buttons-filter-item__text{padding-right:var(--ibiz-control-searchform-button-filter-gap)}.ibiz-searchform-buttons-filter-item__remove{position:absolute;top:50%;right:0;display:none;font-size:var(--ibiz-control-searchform-button-filter-font-size);transform:translateY(-50%)}.ibiz-searchform-buttons-filter-item:hover .ibiz-searchform-buttons-filter-item__remove{display:block}

package/lib/panel-component/short-cut/short-cut.cjs

@@ -34,6 +34,11 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("short-cut");
     const vue$1 = vue.getCurrentInstance().proxy;
     const router = vueRouter.useRouter();
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller);
+    const route = vueRouter.useRoute();
     const shortCutUtil = ibiz.util.shortCut;
     const isShowToolbar = vue.ref(true);
     const isShowMore = vue.ref(false);
@@ -65,6 +70,29 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
         shortCutUtil.setShortCutMode("vertical");
       }
     };
+    const processRouteContext = (item) => {
+      const tempContext = core.IBizContext.create(item.context);
+      const {
+        pathNodes
+      } = vue3Util.route2routePath(route);
+      if (pathNodes && pathNodes.length > 0) {
+        let srfKeepNull = false;
+        pathNodes.forEach((pathNode) => {
+          if (pathNode.context && Object.keys(pathNode.context).length > 0) {
+            Object.keys(pathNode.context).forEach((key) => {
+              if (!tempContext[key]) {
+                tempContext[key] = null;
+                srfKeepNull = true;
+              }
+            });
+          }
+        });
+        if (srfKeepNull) {
+          tempContext.srfkeepnull = true;
+        }
+      }
+      return tempContext;
+    };
     const onClick = (item) => {
       isShowMore.value = false;
       if (item.openMode === "ROUTE") {
@@ -75,7 +103,8 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
           });
         }
       } else {
-        ibiz.commands.execute(runtime.OpenAppViewCommand.TAG, item.appViewId, core.IBizContext.create(item.context), item.params, {
+        const tempContext = processRouteContext(item);
+        ibiz.commands.execute(runtime.OpenAppViewCommand.TAG, item.appViewId, tempContext, item.params, {
           openMode: openModeMap.get(item.openMode)
         });
       }
@@ -108,7 +137,12 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
         }) => {
           if (isVertical && !isShowToolbar.value || isVertical && isShowToolbar.value && index > 5 || !isVertical && index < 6) {
             return vue.createVNode("div", {
-              "class": [ns.e("item"), ns.e("draggable-item")],
+              "class": [ns.e("item"), ns.e("draggable-item"), semanticClass("item", {
+                item: element
+              })],
+              "style": semanticStyle("item", {
+                item: element
+              }),
               "title": core.showTitle(element.caption),
               "onClick": () => onClick(element)
             }, [vue.createVNode("svg", {
@@ -130,16 +164,36 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
               "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z",
               "id": "drag-icon-air"
             }, null)])])]), element.icon ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "class": ["caption-icon", "icon"],
+              "class": ["caption-icon", "icon", semanticClass("item.icon", {
+                item: element
+              })],
+              "style": semanticStyle("item.icon", {
+                item: element
+              }),
               "icon": element.icon
             }, null) : vue.createVNode("ion-icon", {
-              "class": ["caption-icon", "icon"],
+              "class": ["caption-icon", "icon", semanticClass("item.icon", {
+                item: element
+              })],
+              "style": semanticStyle("item.icon", {
+                item: element
+              }),
               "name": "ellipsis-horizontal-circle-outline"
             }, null), vue.createVNode("div", {
-              "class": ns.em("item", "caption")
+              "class": [ns.em("item", "caption"), semanticClass("item.caption", {
+                item: element
+              })],
+              "style": semanticStyle("item.caption", {
+                item: element
+              })
             }, [element.caption]), vue.createVNode("ion-icon", {
               "name": "close-outline",
-              "class": ["close-icon", "icon"],
+              "class": ["close-icon", "icon", semanticClass("item.close", {
+                item: element
+              })],
+              "style": semanticStyle("item.close", {
+                item: element
+              }),
               "onClick": (event) => onDelete(event, element.key)
             }, null)]);
           }
@@ -148,7 +202,8 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
     };
     const renderAction = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("item"), ns.e("action-item"), ns.is("hidden", isShowToolbar.value)],
+        "class": [ns.e("item"), ns.e("action-item"), ns.is("hidden", isShowToolbar.value), semanticClass("more")],
+        "style": semanticStyle("more"),
         "onClick": onShowChange
       }, [vue.createVNode("ion-icon", {
         "class": ["expand-icon", "icon"],
@@ -164,11 +219,13 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
         "placement": "top-start",
         "trigger": "click",
         "width": "auto",
-        "popper-class": ns.e("popover")
+        "popper-class": [ns.e("popover"), semanticClass("popup")],
+        "popper-style": semanticStyle("popup")
       }, {
         reference: () => {
           return vue.createVNode("div", {
-            "class": [ns.e("more"), ns.e("operate")]
+            "class": [ns.e("more"), ns.e("operate"), semanticClass("operate")],
+            "style": semanticStyle("operate")
           }, [vue.createVNode(vue.resolveComponent("el-tooltip"), {
             "content": ibiz.i18n.t("app.more"),
             "placement": "top"
@@ -188,7 +245,8 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
     };
     const renderRecover = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("recover"), ns.e("operate")],
+        "class": [ns.e("recover"), ns.e("operate"), semanticClass("operate")],
+        "style": semanticStyle("operate"),
         "onClick": onShowChange
       }, [vue.createVNode(vue.resolveComponent("el-tooltip"), {
         "effect": "dark",
@@ -208,12 +266,15 @@ const ShortCut = /* @__PURE__ */ vue.defineComponent({
       onChange,
       renderDraggable,
       renderMore,
-      renderRecover
+      renderRecover,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     return vue.createVNode("div", {
-      "class": [this.ns.b(), ...this.controller.containerClass, this.ns.is("conceal", this.data.length === 0)]
+      "class": [this.ns.b(), ...this.controller.containerClass, this.ns.is("conceal", this.data.length === 0), this.semanticClass("root")],
+      "style": this.semanticStyle("root")
     }, [this.isShowToolbar && this.renderDraggable(false), (!this.isShowToolbar || this.data.length > 6) && this.renderMore(), this.isShowToolbar && this.renderRecover()]);
   }
 });

package/lib/panel-component/short-cut/short-cut.css

@@ -1 +1 @@
-.ibiz-short-cut{position:fixed;right:var(--ibiz-spacing-base-loose);bottom:var(--ibiz-spacing-base-loose);z-index:2;display:flex;padding:var(--ibiz-spacing-extra-tight);background:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 var(--ibiz-spacing-base) rgba(0,0,0,.0784313725)}.ibiz-short-cut.is-conceal{visibility:hidden}.ibiz-short-cut .icon{flex-shrink:0;font-size:var(--ibiz-width-icon-medium)}.ibiz-short-cut__operate{cursor:pointer}.ibiz-short-cut__operate .el-tooltip__trigger{padding:var(--ibiz-spacing-tight);line-height:20px}.ibiz-short-cut__operate .el-tooltip__trigger:hover{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-primary-light-default);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-short-cut__more .more-icon{margin-left:var(--ibiz-spacing-tight)}.ibiz-short-cut__recover{margin-left:var(--ibiz-spacing-extra-tight)}.ibiz-short-cut__recover .recover-icon{transform:translate(0,3px)}.ibiz-short-cut__item{position:relative;display:flex;flex-flow:row nowrap;place-content:center flex-start;align-items:center;cursor:pointer}.ibiz-short-cut__item .drag-icon{display:none}.ibiz-short-cut__item .caption-icon,.ibiz-short-cut__item .drag-icon,.ibiz-short-cut__item .expand-icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-short-cut__item .close-icon{visibility:hidden}.ibiz-short-cut__item .close-icon:hover{color:var(--ibiz-color-danger-hover)}.ibiz-short-cut__item--caption{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-short-cut__item:hover .drag-icon{display:block}.ibiz-short-cut__item:hover .caption-icon{display:none}.ibiz-short-cut__item:hover .close-icon{visibility:visible}.ibiz-short-cut__item.is-hidden{display:none}.ibiz-short-cut__draggable.is-horizontal{display:flex}.ibiz-short-cut__draggable.is-horizontal .ibiz-short-cut__item{min-width:90px;max-width:150px;padding:0 var(--ibiz-spacing-base-tight);border-right:1px solid var(--ibiz-color-border)}.ibiz-short-cut__draggable.is-horizontal .ibiz-short-cut__item .close-icon{position:absolute;right:0;padding-right:var(--ibiz-spacing-tight);background-color:var(--ibiz-color-bg-1);box-shadow:-10px 0 20px 8px var(--ibiz-color-bg-1)}.ibiz-short-cut__draggable.is-vertical{max-height:400px;overflow-y:auto}.ibiz-short-cut__draggable.is-vertical .ibiz-short-cut__item{width:225px;height:44px;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-short-cut__draggable.is-vertical .ibiz-short-cut__item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-short-cut__draggable+.ibiz-short-cut__more{margin-left:var(--ibiz-spacing-extra-tight)}.ibiz-short-cut__popover .icon{flex-shrink:0;font-size:var(--ibiz-width-icon-medium)}.ibiz-short-cut__popover.el-popover.el-popper{padding:var(--ibiz-spacing-base-tight) 0}.ibiz-short-cut__action-item{width:225px;height:44px;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}
+.ibiz-short-cut{--ibiz-short-cut-right:var(--ibiz-spacing-base-loose);--ibiz-short-cut-bottom:var(--ibiz-spacing-base-loose);--ibiz-short-cut-padding:var(--ibiz-spacing-extra-tight);--ibiz-short-cut-bg-color:var(--ibiz-color-bg-1);--ibiz-short-cut-border-color:var(--ibiz-color-border);--ibiz-short-cut-border-radius:var(--ibiz-border-radius-small);--ibiz-short-cut-box-shadow:0 0 var(--ibiz-spacing-base) rgba(0, 0, 0, 0.0784313725);--ibiz-short-cut-item-icon-gap:var(--ibiz-spacing-tight);--ibiz-short-cut-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-short-cut-item-vertical-bg-color-hover:var(--ibiz-color-fill-1);--ibiz-short-cut-item-remove-color:var(--ibiz-color-danger-hover);--ibiz-short-cut-item-padding:0 var(--ibiz-spacing-base-tight);--ibiz-short-cut-item-vertical-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-short-cut-item-border-color:var(--ibiz-color-border);--ibiz-short-cut-item-remove-gap:var(--ibiz-spacing-tight);--ibiz-short-cut-item-remove-bg-color:var(--ibiz-color-bg-1);--ibiz-short-cut-item-remove-box-shadow:-10px 0 20px 8px var(--ibiz-color-bg-1);--ibiz-short-cut-operate-padding:var(--ibiz-spacing-tight);--ibiz-short-cut-operate-line-height:var(--ibiz-spacing-base-loose);--ibiz-short-cut-operate-color-hover:var(--ibiz-color-primary);--ibiz-short-cut-operate-bg-color-hover:var(--ibiz-color-primary-light-default);--ibiz-short-cut-operate-border-radius:var(--ibiz-border-radius-extra-small);--ibiz-short-cut-operate-icon-gap:var(--ibiz-spacing-tight);--ibiz-short-cut-operate-recover-gap:var(--ibiz-spacing-extra-tight);position:fixed;right:var(--ibiz-short-cut-right);bottom:var(--ibiz-short-cut-bottom);z-index:2;display:flex;padding:var(--ibiz-short-cut-padding);background:var(--ibiz-short-cut-bg-color);border:1px solid var(--ibiz-short-cut-border-color);border-radius:var(--ibiz-short-cut-border-radius);box-shadow:var(--ibiz-short-cut-box-shadow)}.ibiz-short-cut.is-conceal{visibility:hidden}.ibiz-short-cut .icon{flex-shrink:0;font-size:var(--ibiz-short-cut-item-font-size)}.ibiz-short-cut__operate{cursor:pointer}.ibiz-short-cut__operate .el-tooltip__trigger{padding:var(--ibiz-short-cut-operate-padding);line-height:var(--ibiz-short-cut-operate-line-height)}.ibiz-short-cut__operate .el-tooltip__trigger:hover{color:var(--ibiz-short-cut-operate-color-hover);background-color:var(--ibiz-short-cut-operate-bg-color-hover);border-radius:var(--ibiz-short-cut-operate-border-radius)}.ibiz-short-cut__more .more-icon{margin-left:var(--ibiz-short-cut-operate-icon-gap)}.ibiz-short-cut__recover{margin-left:var(--ibiz-short-cut-operate-recover-gap)}.ibiz-short-cut__recover .recover-icon{transform:translate(0,3px)}.ibiz-short-cut__item{position:relative;display:flex;flex-flow:row nowrap;place-content:center flex-start;align-items:center;cursor:pointer}.ibiz-short-cut__item .drag-icon{display:none}.ibiz-short-cut__item .caption-icon,.ibiz-short-cut__item .drag-icon,.ibiz-short-cut__item .expand-icon{margin-right:var(--ibiz-short-cut-item-icon-gap)}.ibiz-short-cut__item .close-icon{visibility:hidden}.ibiz-short-cut__item .close-icon:hover{color:var(--ibiz-short-cut-item-remove-color)}.ibiz-short-cut__item--caption{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-short-cut__item:hover .drag-icon{display:block}.ibiz-short-cut__item:hover .caption-icon{display:none}.ibiz-short-cut__item:hover .close-icon{visibility:visible}.ibiz-short-cut__item.is-hidden{display:none}.ibiz-short-cut__draggable.is-horizontal{display:flex}.ibiz-short-cut__draggable.is-horizontal .ibiz-short-cut__item{min-width:90px;max-width:150px;padding:var(--ibiz-short-cut-item-padding);border-right:1px solid var(--ibiz-short-cut-item-border-color)}.ibiz-short-cut__draggable.is-horizontal .ibiz-short-cut__item .close-icon{position:absolute;right:0;padding-right:var(--ibiz-short-cut-item-remove-gap);background-color:var(--ibiz-short-cut-item-remove-bg-color);box-shadow:var(--ibiz-short-cut-item-remove-box-shadow)}.ibiz-short-cut__draggable.is-vertical{max-height:400px;overflow-y:auto}.ibiz-short-cut__draggable.is-vertical .ibiz-short-cut__item{width:225px;height:44px;padding:var(--ibiz-short-cut-item-vertical-padding)}.ibiz-short-cut__draggable.is-vertical .ibiz-short-cut__item:hover{background-color:var(--ibiz-short-cut-item-vertical-bg-color)}.ibiz-short-cut__draggable+.ibiz-short-cut__more{margin-left:var(--ibiz-short-cut-operate-recover-gap)}.ibiz-short-cut__popover{--ibiz-short-cut-item-icon-gap:var(--ibiz-spacing-tight);--ibiz-short-cut-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-short-cut-item-vertical-bg-color-hover:var(--ibiz-color-fill-1);--ibiz-short-cut-item-remove-color:var(--ibiz-color-danger-hover);--ibiz-short-cut-item-padding:0 var(--ibiz-spacing-base-tight);--ibiz-short-cut-item-vertical-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-short-cut-item-border-color:var(--ibiz-color-border);--ibiz-short-cut-item-remove-gap:var(--ibiz-spacing-tight);--ibiz-short-cut-item-remove-bg-color:var(--ibiz-color-bg-1);--ibiz-short-cut-item-remove-box-shadow:-10px 0 20px 8px var(--ibiz-color-bg-1);--ibiz-short-cut-popup-padding:var(--ibiz-spacing-base-tight) 0}.ibiz-short-cut__popover .icon{flex-shrink:0;font-size:var(--ibiz-short-cut-item-icon-size)}.ibiz-short-cut__popover.el-popover.el-popper{padding:var(--ibiz-spacing-base-tight) 0}.ibiz-short-cut__action-item{width:225px;height:44px;padding:var(--ibiz-short-cut-item-vertical-padding)}

package/lib/panel-component/split-container/split-container.cjs

@@ -29,6 +29,10 @@ const SplitContainer = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       let result = [ns.b(), ns.m(id)];
       result = [...result, ...props.controller.containerClass, ns.is("hidden", !props.controller.state.visible), ns.is("hidden-trigger", props.controller.state.isHiddenTrigger)];
@@ -36,24 +40,50 @@ const SplitContainer = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a, _b;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
-    return vue.createVNode("div", {
-      "class": this.classArr
+    return vue.withDirectives(vue.createVNode("div", {
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
+      "element-loading-text": this.controller.state.loadingText
     }, [vue.createVNode(vue.resolveComponent("iBizSplit"), {
       "modelValue": this.controller.state.splitValue,
       "onUpdate:modelValue": ($event) => this.controller.state.splitValue = $event,
-      "mode": this.controller.splitMode
+      "mode": this.controller.splitMode,
+      "semantic": {
+        left: {
+          class: this.semanticClass("left"),
+          style: this.semanticStyle("left")
+        },
+        right: {
+          class: this.semanticClass("right"),
+          style: this.semanticStyle("right")
+        },
+        top: {
+          class: this.semanticClass("top"),
+          style: this.semanticStyle("top")
+        },
+        bottom: {
+          class: this.semanticClass("bottom"),
+          style: this.semanticStyle("bottom")
+        },
+        divider: {
+          class: this.semanticClass("divider"),
+          style: this.semanticStyle("divider")
+        }
+      }
     }, {
       left: () => defaultSlots[0],
       right: () => defaultSlots[1],
       top: () => defaultSlots[0],
       bottom: () => defaultSlots[1]
-    })]);
+    })]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

package/lib/panel-component/split-container/split-container.controller.cjs

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-class SplitContainerController extends runtime.PanelItemController {
+class SplitContainerController extends runtime.PanelContainerController {
   constructor() {
     super(...arguments);
     /**

package/lib/panel-component/split-container/split-container.state.cjs

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-class SplitContainerState extends runtime.PanelItemState {
+class SplitContainerState extends runtime.PanelContainerState {
   constructor() {
     super(...arguments);
     /**

package/lib/panel-component/user-action/user-action.cjs

@@ -29,15 +29,19 @@ const UserAction = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("user-action");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller);
     const imgConfig = {
       SETTING: {
-        imagePath: "svg/setting.svg"
+        imagePath: ibiz.config.imageAssets.setting
       },
       HELPER: {
-        imagePath: "svg/helper.svg"
+        imagePath: ibiz.config.imageAssets.helper
       },
       CUSTOM: {
-        imagePath: "svg/custom-workbench.svg"
+        imagePath: ibiz.config.imageAssets.customWorkbench
       }
     };
     let sysImage = props.modelData.sysImage;
@@ -92,15 +96,19 @@ const UserAction = /* @__PURE__ */ vue.defineComponent({
       ns,
       c,
       sysImage,
-      onClick
+      onClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     return vue.createVNode("div", {
-      "class": this.ns.b(),
+      "class": [this.ns.b(), this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "title": core.showTitle(this.modelData.caption)
     }, [vue.createVNode(vue.resolveComponent("i-biz-icon"), {
-      "class": [this.ns.e("image")],
+      "class": [this.ns.e("image"), this.semanticClass("content")],
+      "style": this.semanticStyle("content"),
       "icon": this.sysImage,
       "onClick": (event) => this.onClick(event)
     }, null)]);

package/lib/panel-component/user-action/user-action.css

@@ -1 +1 @@
-.ibiz-user-action{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-action__image{display:flex;place-items:center center;justify-content:center;width:calc(var(--ibiz-width-icon-extra-large) + 4px);height:calc(var(--ibiz-width-icon-extra-large) + 4px);margin-bottom:var(--ibiz-spacing-extra-tight);cursor:pointer}.ibiz-user-action__image svg{pointer-events:none}
+.ibiz-user-action{--ibiz-user-action-width:calc(var(--ibiz-width-icon-extra-large) + 4px);--ibiz-user-action-height:calc(var(--ibiz-width-icon-extra-large) + 4px);--ibiz-user-action-margin-bottom:var(--ibiz-spacing-extra-tight);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-action__image{display:flex;place-items:center center;justify-content:center;width:var(--ibiz-user-action-width);height:var(--ibiz-user-action-height);margin-bottom:var(--ibiz-user-action-margin-bottom);cursor:pointer}.ibiz-user-action__image svg{pointer-events:none}