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

package/es/editor/data-picker/picker-editor.controller.mjs

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

package/es/editor/list-box/list-box-picker-editor.controller.mjs

@@ -64,11 +64,8 @@ class ListBoxPickerEditorController extends EditorController {
           this.model.appDataEntityId,
           this.context.srfappid
         );
-        if (this.deACMode) {
-          if (this.deACMode.itemSysPFPluginId) {
-            this.acItemProvider = await getAcItemProvider(this.deACMode);
-          }
-        }
+        if (this.deACMode)
+          this.acItemProvider = await getAcItemProvider(this.deACMode);
       }
     }
   }

package/es/editor/map-picker/map-picker-editor.controller.mjs

@@ -22,7 +22,7 @@ class MapPickerEditorController extends EditorController {
      * @type {string}
      * @memberof MapPickerEditorController
      */
-    __publicField(this, "markerIcon", "".concat(ibiz.env.assetsUrl, "/images/poi-marker-default.png"));
+    __publicField(this, "markerIcon", ibiz.config.imageAssets.poiMarker);
     /**
      * @description 默认中心点坐标
      * @memberof MapPickerEditorController

package/es/editor/text-box/input/input.mjs

@@ -408,7 +408,7 @@ const IBizInput = /* @__PURE__ */ defineComponent({
       "title": ibiz.i18n.t("editor.textBox.openAiChat"),
       "onClick": this.onClick
     }, [createVNode("ion-icon", {
-      "src": "./assets/images/svg/chat.svg"
+      "src": ibiz.config.imageAssets.chat
     }, null)]) : null]);
   }
 });

package/es/panel-component/auth-userinfo/auth-userinfo.mjs

@@ -90,7 +90,7 @@ const AuthUserinfo = /* @__PURE__ */ defineComponent({
       }, [createVNode(resolveComponent("el-avatar"), {
         "class": [this.ns.b("avatar"), this.semanticClass("avatar")],
         "style": this.semanticStyle("avatar"),
-        "src": "./assets/images/user-avatar.png"
+        "src": ibiz.config.imageAssets.userAvatar
       }, null), createVNode("div", {
         "class": [this.ns.b("name"), this.ns.is("collapse", this.isCollapse), this.semanticClass("name")],
         "style": this.semanticStyle("name")

package/es/panel-component/global-search/global-search.controller.mjs

@@ -179,10 +179,7 @@ class GlobalSearchController extends PanelItemController {
           func.appId
         );
         if (deACMode) {
-          let acItemProvider;
-          if (deACMode.itemSysPFPluginId) {
-            acItemProvider = await getAcItemProvider(deACMode);
-          }
+          const acItemProvider = await getAcItemProvider(deACMode);
           this.state.items.push({
             deACMode,
             acItemProvider,

package/es/panel-component/user-action/user-action.mjs

@@ -33,13 +33,13 @@ const UserAction = /* @__PURE__ */ defineComponent({
     } = 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;

package/es/panel-component/user-message/user-message.mjs

@@ -43,7 +43,7 @@ const UserMessage = /* @__PURE__ */ defineComponent({
     noticeController.internalMessage.provider = new InternalMessageDefaultProvider();
     const currentTab = ref("notification");
     const sysImage = props.modelData.sysImage || {
-      imagePath: "svg/message.svg"
+      imagePath: ibiz.config.imageAssets.message
     };
     const popoverRef = ref();
     const hiddenPopover = () => {

package/es/util/ai-chat-util/ai-chat-util.mjs

@@ -180,6 +180,11 @@ class AIChatUtil {
     } else {
       chatOptions.chunkEntity = ibiz.config.common.aiChunkEntity;
     }
+    if (editorParams.topiccaptioncomputedmode) {
+      chatOptions.captionComputedMode = editorParams.topiccaptioncomputedmode;
+    } else {
+      chatOptions.captionComputedMode = ibiz.config.common.aiChatTopicCaptionComputedMode;
+    }
     chatOptions.fetchAgentList = (query) => {
       return this.getAIAgentList(context, { ...params, query }, editorParams);
     };
@@ -767,6 +772,12 @@ class AIChatUtil {
     } else {
       chatOptions.chunkEntity = ibiz.config.common.aiChunkEntity;
     }
+    if (params.hasOwnProperty("topiccaptioncomputedmode")) {
+      chatOptions.captionComputedMode = params.topiccaptioncomputedmode;
+      delete params.topiccaptioncomputedmode;
+    } else {
+      chatOptions.captionComputedMode = ibiz.config.common.aiChatTopicCaptionComputedMode;
+    }
     chatOptions.fetchAgentList = (query) => {
       return this.getAIAgentList(context, { ...params, query });
     };

package/es/view/403-view/403-view.mjs

@@ -29,7 +29,7 @@ const View403 = /* @__PURE__ */ defineComponent({
       "class": [this.ns.b(), this.ns.is("top", this.isTop)]
     }, [createVNode("img", {
       "class": this.ns.b("img"),
-      "src": "".concat(ibiz.env.assetsUrl, "/images/403.png")
+      "src": ibiz.config.imageAssets.noPermission
     }, null), createVNode("div", {
       "class": this.ns.b("text")
     }, [createVNode("div", {

package/es/view/404-view/404-view.mjs

@@ -29,7 +29,7 @@ const View404 = /* @__PURE__ */ defineComponent({
       "class": [this.ns.b(), this.ns.is("top", this.isTop)]
     }, [createVNode("img", {
       "class": this.ns.b("img"),
-      "src": "".concat(ibiz.env.assetsUrl, "/images/404.png")
+      "src": ibiz.config.imageAssets.noFind
     }, null), createVNode("div", {
       "class": this.ns.b("text")
     }, [createVNode("div", {

package/es/view/login-view/login-view.mjs

@@ -114,7 +114,6 @@ const LoginView = /* @__PURE__ */ defineComponent({
           const loginViewConfig = await ibiz.hub.config.view.get("AppLoginView");
           if (loginViewConfig) {
             loginView.value = loginViewConfig;
-            hasLoginView.value = true;
           }
         } catch (err) {
           ibiz.log.warn(err);
@@ -141,14 +140,14 @@ const LoginView = /* @__PURE__ */ defineComponent({
         }, [createVNode("header", {
           "class": ns.b("box-header")
         }, [createVNode("img", {
-          "src": "./assets/images/login-header.png"
+          "src": ibiz.config.imageAssets.loginHeader
         }, null), createVNode("span", {
           "class": ns.b("box-header-title")
         }, [appTitle])]), createVNode("main", {
           "class": ns.b("box-main")
         }, [createVNode("img", {
           "class": ns.be("box-main", "avatar"),
-          "src": "./assets/images/login-avatar.png"
+          "src": ibiz.config.imageAssets.loginAvatar
         }, null), createVNode("div", {
           "class": ns.b("box-main-content")
         }, [createVNode(resolveComponent("el-form"), {

package/es/view/share-view/share-view.mjs

@@ -62,7 +62,7 @@ const ShareView = /* @__PURE__ */ defineComponent({
     }, [createVNode("header", {
       "class": this.ns.b("box-header")
     }, [createVNode("img", {
-      "src": "./assets/images/login-header.png"
+      "src": ibiz.config.imageAssets.loginHeader
     }, null), createVNode("div", {
       "class": this.ns.b("box-header-title")
     }, [createVNode("div", null, [this.shareUser.userName]), ibiz.i18n.t("view.shareView.inviting")])]), createVNode("main", {

package/es/view/unauthorized-view/unauthorized-view.mjs

@@ -41,7 +41,7 @@ const UnauthorizedView = /* @__PURE__ */ defineComponent({
           "class": ns.b()
         }, [createVNode("img", {
           "class": ns.e("img"),
-          "src": "".concat(ibiz.env.assetsUrl, "/images/404.png")
+          "src": ibiz.config.imageAssets.noFind
         }, null), createVNode("div", {
           "class": ns.e("tips")
         }, [ibiz.i18n.t("view.noResourcesView.noResourcePrompt"), createVNode("br", null, null), ibiz.i18n.t("view.noResourcesView.noExistPrompt", {

package/es/web-app/guard/auth-guard/auth-guard.mjs

@@ -268,7 +268,9 @@ class AuthGuard {
     const uiThemes = app.model.appUIThemes || [];
     if (uiThemes.length > 0) {
       const colorThemes = uiThemes.filter((uiTheme) => {
-        return uiTheme.themeParams && uiTheme.themeParams["icon-theme"] !== "true";
+        var _a;
+        const isIconTheme = ((_a = uiTheme.themeParams) == null ? void 0 : _a["icon-theme"]) === "true";
+        return !isIconTheme && Boolean(uiTheme.cssStyle || uiTheme.themeParams);
       });
       if (colorThemes.length > 0) {
         for (let index = 0; index < colorThemes.length; index++) {

package/es/web-app/guard/auth-guard/dyna-auth-guard.mjs

@@ -9,6 +9,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const PREDEFINED_THEMES = ["light", "dark", "blue"];
 class DynaAuthGuard extends AuthGuard {
   constructor() {
     super(...arguments);
@@ -41,10 +42,15 @@ class DynaAuthGuard extends AuthGuard {
       const module = await import('@ibiz-template/web-theme');
       const theme = module.default || module;
       AppHooks.useComponent.callSync(null, theme);
-      if (ibiz.config.theme)
+      if (ibiz.config.theme && PREDEFINED_THEMES.includes(ibiz.config.theme)) {
         ibiz.util.theme.setTheme(ibiz.config.theme);
+      }
       if (appModel.appUIThemes) {
         await this.loadTheme();
+        const themeTags = appModel.appUIThemes.map((uiTheme) => uiTheme.themeTag).filter((tag) => !!tag);
+        if (ibiz.config.theme && (PREDEFINED_THEMES.includes(ibiz.config.theme) || themeTags.includes(ibiz.config.theme))) {
+          ibiz.util.theme.setTheme(ibiz.config.theme);
+        }
       }
       if (app.model.title) {
         ibiz.util.setBrowserTitle("");

package/lib/common/data-import/data-import.cjs

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

package/lib/control/chart/chart.cjs

@@ -92,6 +92,32 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
     const drillDetailPos = vue.ref({});
     const drillDetailRef = vue.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;
@@ -220,7 +246,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
     });
     const renderGrid = () => {
       let _slot;
-      return vue.createVNode(vue.resolveComponent("el-table"), {
+      return vue.withDirectives(vue.createVNode(vue.resolveComponent("el-table"), {
         "ref": "tableRef",
         "border": true,
         "data": getGridData(),
@@ -228,23 +254,7 @@ const ChartControl = /* @__PURE__ */ vue.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 vue.createVNode(vue.resolveComponent("el-table-column"), {
           "prop": column.id,
@@ -253,7 +263,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
         }, null);
       })) ? _slot : {
         default: () => [_slot]
-      });
+      }), [[vue.resolveDirective("child-class"), childClass], [vue.resolveDirective("child-style"), childStyle]]);
     };
     const renderNoData = () => {
       if (c.state.items.length === 0) {

package/lib/control/data-view/data-view.cjs

@@ -6,6 +6,7 @@ var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
 var draggable = require('vuedraggable');
 require('../../util/index.cjs');
+var dataView_util = require('./data-view.util.cjs');
 require('./data-view.css');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
 
@@ -264,6 +265,14 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [renderItemAction(item)]) : null]);
     };
     const renderCard = (item) => {
+      const provider = runtime.getMDCtrlItemProvider(c.model);
+      if (provider)
+        return vue.h(vue.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 || ""),
@@ -575,6 +584,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       return icon;
     };
     const ITEM_HEIGHT = 24;
+    const {
+      setSkeletonContentRef,
+      calcSkeletonCount
+    } = dataView_util.useDataViewSkeleton({
+      model: c.model
+    });
     const calcSkeletonRows = () => {
       const {
         cardHeight
@@ -640,34 +655,34 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderGroupSkeleton = () => {
       return vue.createVNode("div", {
-        "class": ns.b("skeleton")
+        "class": [ns.e("content"), ns.b("group-content")]
       }, [Array.from({
         length: 3
       }, () => vue.createVNode("div", {
-        "class": ns.b("skeleton-group")
+        "class": ns.be("group-content", "item")
       }, [vue.createVNode("div", {
-        "class": ns.be("skeleton-group", "header")
+        "class": ns.be("group-content", "item-header")
       }, [vue.createVNode(vue.resolveComponent("el-skeleton"), {
         "animated": true,
         "rows": 1
       }, {
         template: () => vue.createVNode(vue.resolveComponent("el-skeleton-item"), {
           "variant": "rect",
-          "style": "width: 15%"
+          "style": "width: 15%;height: 24px;"
         }, null)
       })]), vue.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 vue.createVNode("div", {
-        "class": ns.b("skeleton")
+        "class": ns.e("content")
       }, [vue.createVNode("div", {
-        "class": ns.be("skeleton", "content")
+        "ref": setSkeletonContentRef
       }, [renderSkeletonCardLayout(Math.min(count, 20))])]);
     };
     const renderNavIcon = () => {
@@ -734,7 +749,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       const provider = c.view.providers[id];
       return vue.h(vue.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/lib/control/data-view/data-view.util.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+const useDataViewSkeleton = ({
+  model
+}) => {
+  let skeletonContentEl;
+  const skeletonContainerWidth = vue.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);
+    }
+  };
+  vue.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 };
+};
+
+exports.useDataViewSkeleton = useDataViewSkeleton;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.cjs

@@ -279,10 +279,11 @@ const RepeaterGrid = /* @__PURE__ */ vue.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 vue.createVNode("span", null, [$index + 1]);
             }
             return [this.renderRemoveBtn($index), vue.createVNode("span", {

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.cjs

@@ -322,6 +322,7 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
           "align": "center"
         }, {
           default: (opts) => {
+            const rowEnableDelete = this.controller.getRowEnableDelete(opts.row);
             const {
               $index
             } = opts;
@@ -341,7 +342,7 @@ const RepeaterGrid2 = /* @__PURE__ */ vue.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/lib/control/grid/grid/grid-control.util.cjs

@@ -74,10 +74,17 @@ function useITableEvent(c) {
     }, 300);
   }
   const allGridColumns = [];
+  const headerCellClassNameMap = /* @__PURE__ */ new Map();
   core.recursiveIterate(
     c.model,
     (column) => {
       allGridColumns.push(column);
+      if (column.codeName && column.headerSysCss && column.headerSysCss.cssName) {
+        headerCellClassNameMap.set(
+          column.codeName,
+          column.headerSysCss.cssName
+        );
+      }
     },
     { childrenFields: ["degridColumns"] }
   );
@@ -381,13 +388,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) || "";
   }
   vue.watch(
     () => c.state.sortQuery,

package/lib/control/grid/grid/grid.cjs

@@ -366,6 +366,32 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       cleanup = core.NOOP,
       setDragEvent
     } = gridControl_util.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();
@@ -564,6 +590,8 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       isLodeMoreDisabled,
       semanticClass,
       semanticStyle,
+      childClass,
+      childStyle,
       pageSemantic,
       onRowClick,
       spanMethod,
@@ -600,7 +628,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
         "controller": this.c,
         "style": [this.headerCssVars, this.semanticStyle("root")]
       }, {
-        default: () => [vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+        default: () => [vue.withDirectives(vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
           "border": true,
           "ref": "tableRef",
           "data": this.tableData,
@@ -620,37 +648,11 @@ const GridControl = /* @__PURE__ */ vue.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()
@@ -692,7 +694,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
               }, null), ibiz.i18n.t("app.add")]
             }) : this.renderPopover()];
           }
-        }), this.c.state.enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
+        }), [[vue.resolveDirective("child-class"), this.childClass], [vue.resolveDirective("child-style"), this.childStyle]]), this.c.state.enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
           "class": this.semanticClass("pagination"),
           "style": this.semanticStyle("pagination"),
           "semantic": this.pageSemantic,

package/lib/control/list/list.cjs

@@ -312,6 +312,14 @@ const ListControl = /* @__PURE__ */ vue.defineComponent({
       }, null);
     };
     const renderItem = (item) => {
+      const provider = runtime.getMDCtrlItemProvider(c.model);
+      if (provider)
+        return vue.h(vue.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/lib/control/tree/tree.cjs

@@ -870,10 +870,19 @@ const TreeControl = /* @__PURE__ */ vue.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 vue.h(vue.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 vue.createVNode("div", {
                 "class": [this.ns.b("node"), (_a = nodeModel.sysCss) == null ? void 0 : _a.cssName, nodeData._dynaClass]