@ibiz-template/vue3-components 0.7.41-alpha.12 → 0.7.41-alpha.13

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

@@ -1 +1 @@
-.ibiz-calendar-user{--ibiz-calendar-user-cell-min-height:60px;display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base);overflow:hidden}.ibiz-calendar-user__cell{min-height:var(--ibiz-calendar-user-cell-min-height);border-bottom:1px solid var(--ibiz-color-tertiary);border-left:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user .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 .ibiz-calendar-user-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-calendar-user .ibiz-calendar-user-header{flex-shrink:0;padding-right:4px}.ibiz-calendar-user-header__top{border-top:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user-header__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-header__week-day{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.ibiz-calendar-user-header__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-header__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user .ibiz-calendar-user-content{flex:1;width:100%;height:100%;overflow:auto}.ibiz-calendar-user-content__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-content__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user-content__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}
+.ibiz-calendar-user{--ibiz-calendar-user-cell-min-height:60px;display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base);overflow:hidden}.ibiz-calendar-user__cell{min-height:var(--ibiz-calendar-user-cell-min-height);border-bottom:1px solid var(--ibiz-color-tertiary);border-left:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user .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 .ibiz-calendar-user-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-calendar-user .ibiz-calendar-user-header{flex-shrink:0}.ibiz-calendar-user-header__top{border-top:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user-header__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-header__week-day{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.ibiz-calendar-user-header__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-header__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user .ibiz-calendar-user-content{position:relative;flex:1;width:100%;height:100%;overflow:hidden}.ibiz-calendar-user-content__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-content__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user-content__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-content__wrapping{width:100%;height:100%;overflow:auto}.ibiz-calendar-user-content__wrapping::-webkit-scrollbar{display:none}.ibiz-calendar-user-scroll-bar{position:absolute;top:var(--ibiz-calendar-user-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-user-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-user-scroll-bar-thumb-height);cursor:pointer;background-color:#d3d3d3;border-radius:var(--ibiz-border-radius-extra-small)}

package/es/control/calendar/components/calendar-user/calendar-user.mjs

@@ -20,6 +20,14 @@ const CalendarUser = /* @__PURE__ */ defineComponent({
     timeList.value = getDayTime();
     const popoverValue = ref("");
     const curPopover = ref();
+    const scrollContainerRef = ref();
+    const scrollTop = ref(0);
+    const thumbHeight = ref(0);
+    const enableScroll = ref(false);
+    const orginY = ref(0);
+    const realHeight = ref(1);
+    const visibleHeight = ref(1);
+    const isScroll = ref(false);
     watch(() => props.selectedDay, () => {
       if (props.selectedDay) {
         weekday.value = calcCurWeek(new Date(props.selectedDay));
@@ -102,9 +110,62 @@ const CalendarUser = /* @__PURE__ */ defineComponent({
         }, [renderEvent(item)]);
       })])]);
     };
+    const onMouseMove = (event) => {
+      if (enableScroll.value) {
+        const y = event.clientY - orginY.value;
+        scrollTop.value += y;
+        orginY.value = event.clientY;
+        if (scrollContainerRef.value) {
+          scrollContainerRef.value.scrollTop = realHeight.value * (scrollTop.value / visibleHeight.value);
+        }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const onMouseUp = (event) => {
+      enableScroll.value = false;
+      event.preventDefault();
+      event.stopPropagation();
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    const onMouseDown = (event) => {
+      orginY.value = event.clientY;
+      enableScroll.value = true;
+      event.preventDefault();
+      event.stopPropagation();
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const renderScrollbar = () => {
+      return createVNode("div", {
+        "class": ns.b("scroll-bar")
+      }, [createVNode("div", {
+        "class": ns.be("scroll-bar", "thumb"),
+        "onMousedown": onMouseDown
+      }, null)]);
+    };
+    const onScroll = (event) => {
+      var _a, _b, _c;
+      const realTop = ((_a = event.target) == null ? void 0 : _a.scrollTop) || 0;
+      realHeight.value = (_b = event.target) == null ? void 0 : _b.scrollHeight;
+      visibleHeight.value = (_c = event.target) == null ? void 0 : _c.clientHeight;
+      const realRatio = realTop / realHeight.value;
+      scrollTop.value = realRatio * visibleHeight.value;
+    };
     const renderWeekContent = () => {
       return createVNode("div", {
-        "class": ns.b("content")
+        "class": ns.b("content"),
+        "style": {
+          ["--".concat(ns.namespace, "-calendar-user-scroll-bar-thumb-height")]: "".concat(thumbHeight.value, "px"),
+          ["--".concat(ns.namespace, "-calendar-user-scroll-bar-thumb-top")]: "".concat(scrollTop.value, "px")
+        }
+      }, [createVNode("div", {
+        "class": ns.be("content", "wrapping"),
+        "ref": (el) => {
+          scrollContainerRef.value = el;
+        },
+        "onScroll": onScroll
       }, [timeList.value.map((item) => {
         return createVNode("div", {
           "class": ns.be("content", "time-item")
@@ -115,8 +176,21 @@ const CalendarUser = /* @__PURE__ */ defineComponent({
             "class": [ns.be("content", "week-item"), ns.e("cell")]
           }, [renderEvent(day, item)]);
         })]);
-      })]);
+      })]), isScroll.value && renderScrollbar()]);
     };
+    watch(() => scrollContainerRef.value, () => {
+      if (scrollContainerRef.value) {
+        realHeight.value = scrollContainerRef.value.scrollHeight;
+        visibleHeight.value = scrollContainerRef.value.clientHeight;
+        if (realHeight.value > visibleHeight.value) {
+          isScroll.value = true;
+        }
+        thumbHeight.value = visibleHeight.value * (visibleHeight.value / realHeight.value);
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
     return {
       ns,
       renderWeekHeader,

package/es/control/data-view/data-view.d.ts

@@ -175,8 +175,8 @@ export declare const DataViewControl: import("vue").DefineComponent<{
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     isSimple: boolean;
     loadDefault: boolean;
 }, {}>;

package/es/control/data-view/index.d.ts

@@ -114,8 +114,8 @@ export declare const IBizDataViewControl: import("@ibiz-template/vue3-util").Typ
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     isSimple: boolean;
     loadDefault: boolean;
 }, {}>>;

package/es/control/form/form/index.mjs

@@ -11,6 +11,7 @@ import { IBizFormRawItem } from '../form-detail/form-rawitem/index.mjs';
 import { IBizFormTabPanel } from '../form-detail/form-tab-panel/index.mjs';
 import { IBizFormTabPage } from '../form-detail/form-tab-page/index.mjs';
 import { IBizFormButtonList } from '../form-detail/form-button-list/index.mjs';
+import { IBizFormIFrame } from '../form-detail/form-iframe/index.mjs';
 
 "use strict";
 const IBizFormControl = withInstall(FormControl, function(v) {
@@ -25,6 +26,7 @@ const IBizFormControl = withInstall(FormControl, function(v) {
   v.use(IBizFormTabPanel);
   v.use(IBizFormTabPage);
   v.use(IBizFormButtonList);
+  v.use(IBizFormIFrame);
 });
 
 export { IBizFormControl, IBizFormControl as default };

package/es/control/form/form-detail/form-iframe/form-iframe.css

@@ -0,0 +1 @@
+.ibiz-form-iframe{width:100%;height:100%}.ibiz-form-iframe__iframe{width:100%;height:100%}

package/es/control/form/form-detail/form-iframe/form-iframe.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { IDEFormIFrame } from '@ibiz/model-core';
+import { FormIFrameController } from '@ibiz-template/runtime';
+import './form-iframe.scss';
+export declare const FormIFrame: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof FormIFrameController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    url: import("vue").ComputedRef<string>;
+    loading: import("vue").Ref<boolean>;
+    onLoad: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof FormIFrameController;
+        required: true;
+    };
+}>>, {}, {}>;
+export default FormIFrame;

package/es/control/form/form-detail/form-iframe/form-iframe.mjs

@@ -0,0 +1,53 @@
+import { ref, computed, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { FormIFrameController } from '@ibiz-template/runtime';
+import './form-iframe.css';
+
+"use strict";
+const FormIFrame = /* @__PURE__ */ defineComponent({
+  name: "IBizFormIFrame",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: FormIFrameController,
+      required: true
+    }
+  },
+  setup(props) {
+    const c = props.controller;
+    const ns = useNamespace("form-iframe");
+    useController(c);
+    const loading = ref(true);
+    const url = computed(() => {
+      return c.calcIFrameUrl();
+    });
+    const onLoad = () => {
+      loading.value = false;
+    };
+    return {
+      ns,
+      url,
+      loading,
+      onLoad
+    };
+  },
+  render() {
+    if (!this.controller.state.visible || !this.url) {
+      return null;
+    }
+    return withDirectives(createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("iframe", {
+      "class": this.ns.e("iframe"),
+      "src": this.url,
+      "frameborder": "0",
+      "onLoad": () => this.onLoad(),
+      "onError": () => this.onLoad()
+    }, null)]), [[resolveDirective("loading"), this.loading]]);
+  }
+});
+
+export { FormIFrame, FormIFrame as default };

package/es/control/form/form-detail/form-iframe/form-iframe.provider.d.ts

@@ -0,0 +1,13 @@
+import { FormController, FormIFrameController, IFormDetailContainerController, IFormDetailProvider } from '@ibiz-template/runtime';
+import { IDEFormIFrame } from '@ibiz/model-core';
+/**
+ * 表单直接嵌入视图
+ *
+ * @export
+ * @class FormIFrameProvider
+ * @implements {IFormDetailProvider}
+ */
+export declare class FormIFrameProvider implements IFormDetailProvider {
+    component: string;
+    createController(detailModel: IDEFormIFrame, form: FormController, parent: IFormDetailContainerController | undefined): Promise<FormIFrameController>;
+}

package/es/control/form/form-detail/form-iframe/form-iframe.provider.mjs

@@ -0,0 +1,21 @@
+import { FormIFrameController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FormIFrameProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormIFrame");
+  }
+  async createController(detailModel, form, parent) {
+    const c = new FormIFrameController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { FormIFrameProvider };

package/es/control/form/form-detail/form-iframe/index.d.ts

@@ -0,0 +1,25 @@
+export declare const IBizFormIFrame: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormIFrameController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    url: import("vue").ComputedRef<string>;
+    loading: import("vue").Ref<boolean>;
+    onLoad: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormIFrameController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizFormIFrame;

package/es/control/form/form-detail/form-iframe/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { registerFormDetailProvider } from '@ibiz-template/runtime';
+import { FormIFrame } from './form-iframe.mjs';
+import { FormIFrameProvider } from './form-iframe.provider.mjs';
+
+"use strict";
+const IBizFormIFrame = withInstall(FormIFrame, function(v) {
+  v.component(FormIFrame.name, FormIFrame);
+  registerFormDetailProvider("IFRAME", () => new FormIFrameProvider());
+});
+
+export { IBizFormIFrame, IBizFormIFrame as default };

package/es/control/form/form-detail/form-item/form-item.css

@@ -1 +1 @@
-.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}
+.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}

package/es/control/form/form-detail/form-item/form-item.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, createVNode, resolveComponent, h, defineComponent } from 'vue';
+import { isVNode, ref, createVNode, createTextVNode, resolveComponent, h, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { CompositeFormItem } from './composite-form-item/composite-form-item.mjs';
 import './form-item.css';
@@ -64,13 +64,15 @@ const FormItem = /* @__PURE__ */ defineComponent({
       const {
         editorItems = []
       } = this.c.model.editor || {};
-      editor = editorItems.map((item) => {
+      editor = editorItems.map((item, index) => {
         const controller = this.c.form.details[item.id];
-        return createVNode(CompositeFormItem, {
+        return [createVNode(CompositeFormItem, {
           "modelData": controller.model,
           "controller": controller,
           "attrs": this.attrs
-        }, null);
+        }, null), editorItems.length - 1 > index && createVNode("span", {
+          "class": this.ns.e("composite-separator")
+        }, [createTextVNode("-")])];
       });
     } else {
       const editMode = (_d = (_c = (_b = this.c.editor) == null ? void 0 : _b.model) == null ? void 0 : _c.editorParams) == null ? void 0 : _d.editMode;

package/es/control/form/form-detail/index.d.ts

@@ -8,3 +8,4 @@ export * from './form-rawitem/index';
 export * from './form-tab-panel/index';
 export * from './form-tab-page/index';
 export * from './form-button-list/index';
+export * from './form-iframe';

package/es/control/form/form-detail/index.mjs

@@ -8,6 +8,7 @@ export { IBizFormRawItem } from './form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-tab-page/index.mjs';
 export { IBizFormButtonList } from './form-button-list/index.mjs';
+export { IBizFormIFrame } from './form-iframe/index.mjs';
 export { IBizFormItemContainer } from './form-item/form-item-container/form-item-container.mjs';
 export { IBizFormPageItem } from './form-page/form-page-item/form-page.item.mjs';
 

package/es/control/form/index.mjs

@@ -14,5 +14,6 @@ export { IBizFormRawItem } from './form-detail/form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-detail/form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-detail/form-tab-page/index.mjs';
 export { IBizFormButtonList } from './form-detail/form-button-list/index.mjs';
+export { IBizFormIFrame } from './form-detail/form-iframe/index.mjs';
 
 "use strict";

package/es/control/gantt/gantt.d.ts

@@ -132,7 +132,7 @@ export declare const GanttControl: import("vue").DefineComponent<{
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     loadDefault: boolean;
 }, {}>;

package/es/control/gantt/index.d.ts

@@ -83,8 +83,8 @@ export declare const IBizGanttControl: import("@ibiz-template/vue3-util").TypeWi
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     loadDefault: boolean;
 }, {}>>;
 export default IBizGanttControl;

package/es/control/grid/grid/grid.d.ts

@@ -226,8 +226,8 @@ export declare const GridControl: import("vue").DefineComponent<{
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     rowEditOpen: boolean;
     isSimple: boolean;
     loadDefault: boolean;

package/es/control/grid/grid/index.d.ts

@@ -162,8 +162,8 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     };
 }>>, {
     params: import("@ibiz-template/core").IApiParams;
-    mdctrlActiveMode: number;
     singleSelect: boolean;
+    mdctrlActiveMode: number;
     rowEditOpen: boolean;
     isSimple: boolean;
     loadDefault: boolean;

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

@@ -2,6 +2,7 @@ import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import '../grid-column/index.mjs';
 import { IBizRowEditPopover } from '../row-edit-popover/row-edit-popover.mjs';
+import { IBizVirtualizedTableControl } from '../virtualized-table/index.mjs';
 import { GridControl } from './grid.mjs';
 import { GridProvider } from './grid.provider.mjs';
 export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid-control.util.mjs';
@@ -22,6 +23,7 @@ const IBizGridControl = withInstall(GridControl, (v) => {
   v.use(IBizGridFieldEditColumn);
   v.use(IBizGridGroupColumn);
   v.use(IBizDynamicGridFieldEditColumn);
+  v.use(IBizVirtualizedTableControl);
   registerControlProvider(ControlType.GRID, () => new GridProvider());
 });
 

package/es/control/grid/grid-column/grid-field-column/grid-field-column.d.ts

@@ -1,6 +1,6 @@
 import { ILayoutPanel, IPanel, IUIActionGroupDetail } from '@ibiz/model-core';
-import { Ref, VNode } from 'vue';
-import { GridFieldColumnController, GridRowState } from '@ibiz-template/runtime';
+import { VNode } from 'vue';
+import { GridRowState, GridFieldColumnController } from '@ibiz-template/runtime';
 import './grid-field-column.scss';
 export declare const GridFieldColumn: import("vue").DefineComponent<{
     controller: {
@@ -17,7 +17,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     onTextClick: (event: MouseEvent) => void;
     onInfoTextChange: (text: string) => void;
     onActionClick: (detail: IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
-    CustomHtml: Ref<string | undefined>;
+    CustomHtml: import("vue").Ref<string | undefined>;
     fieldValue: import("vue").ComputedRef<any>;
     formatValue: import("vue").ComputedRef<string>;
     percent: import("vue").ComputedRef<string>;
@@ -25,7 +25,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;
     columnType: string | undefined;
-    codeListItems: Ref<readonly import("@ibiz-template/core").IApiData[]>;
+    codeListItems: import("vue").Ref<readonly import("@ibiz-template/core").IApiData[]>;
     hiddenEmpty: import("vue").ComputedRef<boolean>;
     findLayoutPanel: () => IPanel | undefined;
     renderPanelItemLayout: (item: IData, modelData: ILayoutPanel) => VNode;

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -1,5 +1,5 @@
-import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
-import { useNamespace, useCodeListListen } from '@ibiz-template/vue3-util';
+import { computed, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace, computedAsync, useCodeListListen } from '@ibiz-template/vue3-util';
 import { GridFieldColumnController, GridRowState, ValueExUtil } from '@ibiz-template/runtime';
 import { isNotNil } from 'ramda';
 import { showTitle } from '@ibiz-template/core';
@@ -35,12 +35,9 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
         props.controller.openLinkView(props.row, event);
       }
     };
-    const CustomHtml = ref("");
-    watch(() => props.row, async () => {
-      CustomHtml.value = await props.controller.getCustomHtml(props.row);
-    }, {
-      deep: true,
-      immediate: true
+    const CustomHtml = computedAsync(async () => {
+      const html = await props.controller.getCustomHtml(props.row);
+      return html;
     });
     const fieldValue = computed(() => props.row.data[props.controller.fieldName]);
     const formatValue = computed(() => props.controller.formatValue(fieldValue.value));

package/es/control/grid/virtualized-table/index.d.ts

@@ -0,0 +1,136 @@
+export declare const IBizVirtualizedTableControl: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiParams>;
+        default: () => {};
+    };
+    provider: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").IControlProvider>;
+    };
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    c: import("@ibiz-template/runtime").GridController<import("@ibiz/model-core").IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
+    ns: import("@ibiz-template/core").Namespace;
+    tableRef: import("vue").Ref<any>;
+    tableData: import("vue").ComputedRef<import("@ibiz-template/runtime").ControlVO[]>;
+    columnModel: import("vue").ComputedRef<import("./virtualized-table.util").IColumn[]>;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => void;
+    renderNoData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null;
+    calcRowClass: (params: import("@ibiz-template/core").IApiParams) => string;
+    renderBodyCell: (params: import("@ibiz-template/core").IApiParams) => JSX.Element;
+    handleRowClick: (event: MouseEvent, data: import("@ibiz-template/runtime").ControlVO) => Promise<void>;
+    calcColumnWidth: (_columns: import("./virtualized-table.util").IColumn[], bodyWidth: number) => import("./virtualized-table.util").IColumn[];
+    handleDbRowClick: (event: MouseEvent, data: import("@ibiz-template/runtime").ControlVO) => Promise<void>;
+    renderHeaderCell: (params: import("@ibiz-template/core").IApiParams) => JSX.Element;
+    renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiParams>;
+        default: () => {};
+    };
+    provider: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").IControlProvider>;
+    };
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    params: import("@ibiz-template/core").IApiParams;
+    singleSelect: boolean;
+    mdctrlActiveMode: number;
+    rowEditOpen: boolean;
+    isSimple: boolean;
+    loadDefault: boolean;
+}, {}>>;
+export default IBizVirtualizedTableControl;

package/es/control/grid/virtualized-table/index.mjs

@@ -0,0 +1,18 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { registerControlProvider } from '@ibiz-template/runtime';
+import { VirtualizedTableControl } from './virtualized-table.mjs';
+import { VirtualizedTableProvider } from './virtualized-table.provider.mjs';
+
+"use strict";
+const IBizVirtualizedTableControl = withInstall(
+  VirtualizedTableControl,
+  (v) => {
+    v.component(VirtualizedTableControl.name, VirtualizedTableControl);
+    registerControlProvider(
+      "GRID_VIRTUALIZED_TABLE",
+      () => new VirtualizedTableProvider()
+    );
+  }
+);
+
+export { IBizVirtualizedTableControl, IBizVirtualizedTableControl as default };