@ibiz-template/vue3-components 0.7.41-alpha.122 → 0.7.41-alpha.124

package/es/common/data-import/data-import.mjs

@@ -134,7 +134,7 @@ const DataImport = /* @__PURE__ */ defineComponent({
       "onClick": this.selectFile
     }, [createVNode("img", {
       "class": this.ns.be("upload", "img"),
-      "src": "./assets/images/icon-import.svg"
+      "src": ibiz.config.imageAssets.iconImport
     }, null), createVNode("span", {
       "class": this.ns.be("upload", "text")
     }, [ibiz.i18n.t("component.dataImport.clickToUpload")])]) : createVNode("div", {

package/es/control/chart/chart.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, isVNode, createVNode, resolveComponent, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { defineComponent, isVNode, createVNode, resolveComponent, ref, watch, nextTick, onMounted, withDirectives, resolveDirective, onBeforeUnmount } from 'vue';
 import { useControlController, useNamespace, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { init } from 'echarts';
 import { createUUID } from 'qx-util';
@@ -88,6 +88,32 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     const drillDetailPos = ref({});
     const drillDetailRef = ref();
     let tempParams;
+    const childClass = [{
+      class: "".concat(ns.em("grid", "body-row"), " ").concat(semanticClass("table.body.row")),
+      selector: ".el-table__row"
+    }, {
+      class: "".concat(ns.em("grid", "header-row"), " ").concat(semanticClass("table.header.row")),
+      selector: ".el-table__header tr"
+    }, {
+      class: "".concat(ns.em("grid", "body-cell"), " ").concat(semanticClass("table.body.cell")),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: "".concat(ns.em("grid", "header-cell"), " ").concat(semanticClass("table.header.cell")),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("table.body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("table.header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("table.body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("table.header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     const initSimpleData = () => {
       if (!props.data) {
         return;
@@ -216,7 +242,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     });
     const renderGrid = () => {
       let _slot;
-      return createVNode(resolveComponent("el-table"), {
+      return withDirectives(createVNode(resolveComponent("el-table"), {
         "ref": "tableRef",
         "border": true,
         "data": getGridData(),
@@ -224,23 +250,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
           width: "100%"
         },
         "max-height": maxHeight.value,
-        "span-method": c.spanMethod.bind(c),
-        "header-row-style": (...args) => semanticStyle("table.header.row", args),
-        "header-row-class-name": (...args) => {
-          return [ns.em("grid", "header-row"), semanticClass("table.header.row", args)].join(" ");
-        },
-        "header-cell-style": (...args) => semanticStyle("table.header.cell", args),
-        "header-cell-class-name": (...args) => {
-          return [ns.em("grid", "header-cell"), semanticClass("table.header.cell", args)].join(" ");
-        },
-        "row-style": (...args) => semanticStyle("table.body.row", args),
-        "row-class-name": (...args) => {
-          return [ns.em("grid", "body-row"), semanticClass("table.body.row", args)].join(" ");
-        },
-        "cell-style": (...args) => semanticStyle("table.body.cell", args),
-        "cell-class-name": (...args) => {
-          return [ns.em("grid", "body-cell"), semanticClass("table.body.cell", args)].join(" ");
-        }
+        "span-method": c.spanMethod.bind(c)
       }, _isSlot(_slot = c.state.gridHeaders.map((column) => {
         return createVNode(resolveComponent("el-table-column"), {
           "prop": column.id,
@@ -249,7 +259,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
         }, null);
       })) ? _slot : {
         default: () => [_slot]
-      });
+      }), [[resolveDirective("child-class"), childClass], [resolveDirective("child-style"), childStyle]]);
     };
     const renderNoData = () => {
       if (c.state.items.length === 0) {

package/es/control/data-view/data-view.mjs

@@ -1,9 +1,10 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch, withDirectives, resolveDirective, Fragment, h } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch, h, withDirectives, resolveDirective, Fragment } from 'vue';
 import { useControlController, useNamespace, useControlPopoverzIndex, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
-import { DataViewControlController, ControlVO, getControl } from '@ibiz-template/runtime';
+import { DataViewControlController, ControlVO, getMDCtrlItemProvider, getControl } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import draggable from 'vuedraggable';
 import '../../util/index.mjs';
+import { useDataViewSkeleton } from './data-view.util.mjs';
 import './data-view.css';
 import { usePagination } from '../../util/pagination/use-pagination.mjs';
 
@@ -262,6 +263,14 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       }, [renderItemAction(item)]) : null]);
     };
     const renderCard = (item) => {
+      const provider = getMDCtrlItemProvider(c.model);
+      if (provider)
+        return h(resolveComponent(provider.component), {
+          data: item,
+          controller: c,
+          onClick: (event) => onRowClick(item, event),
+          onDblclick: (event) => onDbRowClick(item, event)
+        });
       const itemStyle = ns.cssVarBlock({
         "item-bg-color": "".concat(item.bgcolor || ""),
         "text-color": "".concat(item.fontcolor || ""),
@@ -573,6 +582,12 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       return icon;
     };
     const ITEM_HEIGHT = 24;
+    const {
+      setSkeletonContentRef,
+      calcSkeletonCount
+    } = useDataViewSkeleton({
+      model: c.model
+    });
     const calcSkeletonRows = () => {
       const {
         cardHeight
@@ -638,34 +653,34 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     };
     const renderGroupSkeleton = () => {
       return createVNode("div", {
-        "class": ns.b("skeleton")
+        "class": [ns.e("content"), ns.b("group-content")]
       }, [Array.from({
         length: 3
       }, () => createVNode("div", {
-        "class": ns.b("skeleton-group")
+        "class": ns.be("group-content", "item")
       }, [createVNode("div", {
-        "class": ns.be("skeleton-group", "header")
+        "class": ns.be("group-content", "item-header")
       }, [createVNode(resolveComponent("el-skeleton"), {
         "animated": true,
         "rows": 1
       }, {
         template: () => createVNode(resolveComponent("el-skeleton-item"), {
           "variant": "rect",
-          "style": "width: 15%"
+          "style": "width: 15%;height: 24px;"
         }, null)
       })]), createVNode("div", {
-        "class": [ns.be("skeleton", "content"), ns.be("skeleton-group", "content")]
-      }, [renderSkeletonCardLayout(3)])]))]);
+        "ref": setSkeletonContentRef
+      }, [renderSkeletonCardLayout(calcSkeletonCount(3))])]))]);
     };
     const renderSkeleton = () => {
       if (c.state.enableGroup) {
         return renderGroupSkeleton();
       }
-      const count = c.state.size || 6;
+      const count = c.state.size || calcSkeletonCount(6);
       return createVNode("div", {
-        "class": ns.b("skeleton")
+        "class": ns.e("content")
       }, [createVNode("div", {
-        "class": ns.be("skeleton", "content")
+        "ref": setSkeletonContentRef
       }, [renderSkeletonCardLayout(Math.min(count, 20))])]);
     };
     const renderNavIcon = () => {
@@ -732,7 +747,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       const provider = c.view.providers[id];
       return h(resolveComponent((provider == null ? void 0 : provider.component) || "IBizControlShell"), {
         class: [ns.e("searchbar"), semanticClass("searchbar")],
-        style: semanticStyle(searchbar),
+        style: semanticStyle("searchbar"),
         context: c.view.context,
         params: c.view.params,
         modelData: searchbar,

package/es/control/data-view/data-view.util.mjs

@@ -0,0 +1,43 @@
+import { ref, onBeforeUnmount } from 'vue';
+
+"use strict";
+const useDataViewSkeleton = ({
+  model
+}) => {
+  let skeletonContentEl;
+  const skeletonContainerWidth = ref(0);
+  let skeletonResizeObserver;
+  const setSkeletonContentRef = (el) => {
+    skeletonResizeObserver == null ? void 0 : skeletonResizeObserver.disconnect();
+    skeletonResizeObserver = void 0;
+    skeletonContentEl = el || void 0;
+    if (skeletonContentEl) {
+      const update = () => {
+        skeletonContainerWidth.value = skeletonContentEl.clientWidth;
+      };
+      update();
+      skeletonResizeObserver = new ResizeObserver(update);
+      skeletonResizeObserver.observe(skeletonContentEl);
+    }
+  };
+  onBeforeUnmount(() => {
+    skeletonResizeObserver == null ? void 0 : skeletonResizeObserver.disconnect();
+  });
+  const calcSkeletonCount = (defaultCount) => {
+    const { cardWidth, cardColXS, cardColSM, cardColMD, cardColLG } = model;
+    if (!cardWidth || !skeletonContainerWidth.value || cardColXS || cardColSM || cardColMD || cardColLG) {
+      return defaultCount;
+    }
+    let gap = 0;
+    if (skeletonContentEl) {
+      gap = Number.parseFloat(getComputedStyle(skeletonContentEl).gap) || 0;
+    }
+    const count = Math.floor(
+      (skeletonContainerWidth.value + gap) / (cardWidth + gap)
+    );
+    return Math.max(1, count);
+  };
+  return { setSkeletonContentRef, calcSkeletonCount };
+};
+
+export { useDataViewSkeleton };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.mjs

@@ -277,10 +277,11 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
           "align": "center"
         }, {
           default: (opts) => {
+            const rowEnableDelete = this.controller.getRowEnableDelete(opts.row);
             const {
               $index
             } = opts;
-            if (!this.controller.enableDelete) {
+            if (!this.controller.enableDelete || !rowEnableDelete) {
               return createVNode("span", null, [$index + 1]);
             }
             return [this.renderRemoveBtn($index), createVNode("span", {

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.mjs

@@ -320,6 +320,7 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
           "align": "center"
         }, {
           default: (opts) => {
+            const rowEnableDelete = this.controller.getRowEnableDelete(opts.row);
             const {
               $index
             } = opts;
@@ -339,7 +340,7 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
               "onClick": () => {
                 this.controller.create(isEmpty ? 0 : $index + 1);
               }
-            }, null), this.controller.enableDelete && !isEmpty && this.renderRemoveBtn($index)]);
+            }, null), this.controller.enableDelete && rowEnableDelete && !isEmpty && this.renderRemoveBtn($index)]);
           }
         })];
       },

package/es/control/grid/grid/grid-control.util.mjs

@@ -72,10 +72,17 @@ function useITableEvent(c) {
     }, 300);
   }
   const allGridColumns = [];
+  const headerCellClassNameMap = /* @__PURE__ */ new Map();
   recursiveIterate(
     c.model,
     (column) => {
       allGridColumns.push(column);
+      if (column.codeName && column.headerSysCss && column.headerSysCss.cssName) {
+        headerCellClassNameMap.set(
+          column.codeName,
+          column.headerSysCss.cssName
+        );
+      }
     },
     { childrenFields: ["degridColumns"] }
   );
@@ -379,13 +386,7 @@ function useITableEvent(c) {
     _rowIndex,
     _columnIndex
   }) {
-    const columnModel = allGridColumns.find((gridColumn) => {
-      return gridColumn.codeName === column.property;
-    });
-    if (columnModel && columnModel.headerSysCss && columnModel.headerSysCss.cssName) {
-      return columnModel.headerSysCss.cssName;
-    }
-    return "";
+    return headerCellClassNameMap.get(column.property) || "";
   }
   watch(
     () => c.state.sortQuery,

package/es/control/grid/grid/grid.mjs

@@ -364,6 +364,32 @@ const GridControl = /* @__PURE__ */ defineComponent({
       cleanup = NOOP,
       setDragEvent
     } = useGridDraggable(tableRef, ns, c);
+    const childClass = [{
+      class: semanticClass("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticClass("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticClass("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticClass("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     c.evt.on("onLoadSuccess", () => {
       if (setDragEvent) {
         setDragEvent();
@@ -562,6 +588,8 @@ const GridControl = /* @__PURE__ */ defineComponent({
       isLodeMoreDisabled,
       semanticClass,
       semanticStyle,
+      childClass,
+      childStyle,
       pageSemantic,
       onRowClick,
       spanMethod,
@@ -598,7 +626,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
         "controller": this.c,
         "style": [this.headerCssVars, this.semanticStyle("root")]
       }, {
-        default: () => [createVNode(resolveComponent("el-table"), mergeProps({
+        default: () => [withDirectives(createVNode(resolveComponent("el-table"), mergeProps({
           "border": true,
           "ref": "tableRef",
           "data": this.tableData,
@@ -618,37 +646,11 @@ const GridControl = /* @__PURE__ */ defineComponent({
           "onHeaderDragend": this.headerDragend,
           "default-expand-all": defaultExpandAll,
           "show-header": !this.c.state.hideHeader,
-          "row-class-name": (event) => {
-            return [this.handleRowClassName(event), this.semanticClass("body.row", {
-              event
-            })].join(" ");
-          },
-          "header-row-class-name": (...args) => this.semanticClass("header.row", {
-            args
-          }),
-          "row-style": (...args) => this.semanticStyle("body.row", {
-            args
-          }),
-          "header-row-style": (...args) => this.semanticStyle("header.row", {
-            args
-          }),
+          "row-class-name": this.handleRowClassName,
           "highlight-current-row": state.singleSelect,
           "expandRowKeys": this.c.state.expandRowKeys,
           "onSelectionChange": this.onSelectionChange,
-          "cell-class-name": (...args) => this.semanticClass("body.cell", {
-            args
-          }),
-          "header-cell-class-name": (data) => {
-            return [this.handleHeaderCellClassName(data), this.semanticClass("header.cell", {
-              event: data
-            })].join(" ");
-          },
-          "cell-style": (...args) => this.semanticStyle("body.cell", {
-            args
-          }),
-          "header-cell-style": (...args) => this.semanticStyle("header.cell", {
-            args
-          }),
+          "header-cell-class-name": this.handleHeaderCellClassName,
           "onExpandChange": (row, expanded) => this.c.expandChange(row, expanded)
         }, this.$attrs, renderAttrs(this.c.model, {
           ...this.c.getEventArgs()
@@ -690,7 +692,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
               }, null), ibiz.i18n.t("app.add")]
             }) : this.renderPopover()];
           }
-        }), this.c.state.enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
+        }), [[resolveDirective("child-class"), this.childClass], [resolveDirective("child-style"), this.childStyle]]), this.c.state.enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
           "class": this.semanticClass("pagination"),
           "style": this.semanticStyle("pagination"),
           "semantic": this.pageSemantic,

package/es/control/list/list.mjs

@@ -1,7 +1,7 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch, h } from 'vue';
 import { useControlController, useNamespace, useControlPopoverzIndex, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { isNil, debounce } from 'lodash-es';
-import { ListController, ControlVO } from '@ibiz-template/runtime';
+import { ListController, ControlVO, getMDCtrlItemProvider } from '@ibiz-template/runtime';
 import draggable from 'vuedraggable';
 import { showTitle } from '@ibiz-template/core';
 import '../../util/index.mjs';
@@ -310,6 +310,14 @@ const ListControl = /* @__PURE__ */ defineComponent({
       }, null);
     };
     const renderItem = (item) => {
+      const provider = getMDCtrlItemProvider(c.model);
+      if (provider)
+        return h(resolveComponent(provider.component), {
+          data: item,
+          controller: c,
+          onClick: () => c.onRowClick(item),
+          onDblclick: () => c.onDbRowClick(item)
+        });
       const cardStyle = ns.cssVarBlock({
         "item-bg-color": "".concat(item.bgcolor || ""),
         "text-color": "".concat(item.fontcolor || ""),

package/es/control/tree/tree.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, withDirectives, resolveDirective, ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, h, withDirectives, resolveDirective, ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue';
 import { useControlController, useSemanticNode, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import { cloneDeep, debounce } from 'lodash-es';
@@ -868,10 +868,19 @@ const TreeControl = /* @__PURE__ */ defineComponent({
             if (this.newNodeKey === data._id)
               return this.renderNewNode();
             const nodeData = this.findNodeData(data._uuid, this.c);
-            if (!nodeData) {
+            if (!nodeData)
               return null;
-            }
             const nodeModel = this.c.getNodeModel(nodeData._nodeId);
+            const provider = this.c.nodeProvider[nodeData._nodeId];
+            if (provider)
+              return h(resolveComponent(provider.component), {
+                data: nodeData,
+                model: nodeModel,
+                controller: this.c,
+                onDblclick: (evt) => this.onNodeDbClick(nodeData, evt),
+                onClick: (evt) => this.onNodeClick(nodeData, data, evt),
+                onContextmenu: (evt) => this.onNodeContextmenu(nodeData, evt)
+              });
             if (this.editingNodeKey === nodeData._id) {
               return createVNode("div", {
                 "class": [this.ns.b("node"), (_a = nodeModel.sysCss) == null ? void 0 : _a.cssName, nodeData._dynaClass]

package/es/control/tree-grid/tree-grid.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, nextTick, watch, createTextVNode, renderSlot } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, withDirectives, mergeProps, resolveDirective, nextTick, watch, createTextVNode, renderSlot } from 'vue';
 import { useControlController, useControlPopoverzIndex, useNamespace, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { recursiveIterate } from '@ibiz-template/core';
 import { filterPresetAttrs, ScriptFactory, TreeGridController } from '@ibiz-template/runtime';
@@ -110,6 +110,32 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       semanticClass,
       semanticStyle
     } = useSemanticNode(c);
+    const childClass = [{
+      class: semanticClass("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticClass("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticClass("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticClass("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     const {
       tableRef,
       onRowClick,
@@ -281,6 +307,8 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       semanticClass,
       semanticStyle,
       pageSemantic,
+      childClass,
+      childStyle,
       loadData,
       onRowClick,
       renderColumn,
@@ -315,7 +343,7 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       }, {
         default: () => {
           var _a;
-          return [this.c.state.isLoaded && createVNode(resolveComponent("el-table"), mergeProps({
+          return [this.c.state.isLoaded && withDirectives(createVNode(resolveComponent("el-table"), mergeProps({
             "lazy": true,
             "border": true,
             "ref": "tableRef",
@@ -336,32 +364,8 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
             "onSelectionChange": this.onSelectionChange,
             "highlight-current-row": state.singleSelect,
             "onExpandChange": (row, expanded) => this.c.expandChange(row, expanded),
-            "row-class-name": (event) => {
-              return [this.handleRowClassName(event), this.semanticClass("body.row", {
-                event
-              })].join(" ");
-            },
-            "header-row-class-name": (...args) => this.semanticClass("header.row", {
-              args
-            }),
-            "row-style": (...args) => this.semanticStyle("body.row", {
-              args
-            }),
-            "header-row-style": (...args) => this.semanticStyle("header.row", {
-              args
-            }),
-            "cell-class-name": (...args) => this.semanticClass("body.cell", {
-              args
-            }),
-            "header-cell-class-name": (data) => {
-              return [this.handleHeaderCellClassName(data), this.semanticClass("header.cell", {
-                event: data
-              })].join(" ");
-            },
-            "cell-style": (...args) => this.semanticStyle("body.cell", {
-              args
-            }),
-            "header-cell-style": this.semanticStyle("header.cell"),
+            "row-class-name": this.handleRowClassName,
+            "header-cell-class-name": this.handleHeaderCellClassName,
             "tree-props": {
               children: "children",
               hasChildren: "hasChildren"
@@ -385,7 +389,7 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
             append: () => {
               return this.renderPopover();
             }
-          }), enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
+          }), [[resolveDirective("child-class"), this.childClass], [resolveDirective("child-style"), this.childStyle]]), enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
             "class": this.semanticClass("pagination"),
             "style": this.semanticStyle("pagination"),
             "semantic": this.pageSemantic,

package/es/control/tree-grid-ex/tree-grid-ex.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, renderSlot, createVNode, resolveComponent, mergeProps, h, computed, ref, watchEffect } from 'vue';
+import { isVNode, defineComponent, renderSlot, createVNode, resolveComponent, mergeProps, h, withDirectives, resolveDirective, computed, ref, watchEffect } from 'vue';
 import { useControlController, useControlPopoverzIndex, useNamespace, useSemanticNode, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { filterPresetAttrs, ScriptFactory, TreeGridExController } from '@ibiz-template/runtime';
 import { RuntimeError } from '@ibiz-template/core';
@@ -61,6 +61,32 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
       semanticClass,
       semanticStyle
     } = useSemanticNode(c);
+    const childClass = [{
+      class: semanticClass("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticClass("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticClass("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticClass("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     const renderNoData = () => {
       const {
         isLoaded
@@ -213,6 +239,8 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
       tableRefreshKey,
       semanticClass,
       semanticStyle,
+      childClass,
+      childStyle,
       loadData,
       onRowClick,
       renderNoData,
@@ -293,7 +321,7 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
         "class": [this.ns.b(), this.semanticClass("root")],
         "style": this.semanticStyle("root")
       }, {
-        default: () => [this.c.state.isLoaded && createVNode(resolveComponent("el-table"), mergeProps({
+        default: () => [this.c.state.isLoaded && withDirectives(createVNode(resolveComponent("el-table"), mergeProps({
           "ref": "tableRef",
           "key": this.tableRefreshKey,
           "class": [this.ns.e("table"), this.semanticClass("content")],
@@ -308,30 +336,7 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
           "lazy": true,
           "onRowClick": this.onRowClick,
           "onExpandChange": this.onExpandChange,
-          "row-class-name": (event) => {
-            return [this.handleRowClassName(event), this.semanticClass("body.row", {
-              event
-            })].join(" ");
-          },
-          "header-row-class-name": (...args) => this.semanticClass("header.row", {
-            args
-          }),
-          "row-style": (...args) => this.semanticStyle("body.row", {
-            args
-          }),
-          "header-row-style": (...args) => this.semanticStyle("header.row", {
-            args
-          }),
-          "cell-class-name": (...args) => this.semanticClass("body.cell", {
-            args
-          }),
-          "header-cell-class-name": (...args) => this.semanticClass("header.cell", {
-            args
-          }),
-          "cell-style": (...args) => this.semanticStyle("body.cell", {
-            args
-          }),
-          "header-cell-style": this.semanticStyle("header.cell"),
+          "row-class-name": this.handleRowClassName,
           "load": this.loadData
         }, renderAttrs(this.c.model, {
           ...this.c.getEventArgs()
@@ -345,7 +350,7 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
           append: () => {
             return this.renderPopover();
           }
-        })]
+        }), [[resolveDirective("child-class"), this.childClass], [resolveDirective("child-style"), this.childStyle]])]
       })]
     });
   }

package/es/editor/autocomplete/autocomplete-editor.controller.mjs

@@ -88,9 +88,8 @@ class AutoCompleteEditorController extends EditorController {
               }
             );
           }
-          if (this.deACMode.itemSysPFPluginId) {
+          if (this.deACMode)
             this.acItemProvider = await getAcItemProvider(this.deACMode);
-          }
         }
       }
     }