@visactor/vue-vtable 1.17.3-alpha.10 → 1.17.3-alpha.11

package/cjs/components/custom/vtable-vue-attribute-plugin.d.ts

@@ -1,5 +1,6 @@
 import type { IGraphic, IPlugin, IStage } from '@visactor/vtable/es/vrender';
 import { HtmlAttributePlugin } from '@visactor/vtable/es/vrender';
+import type { VNode } from 'vue';
 export declare class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPlugin {
     htmlMap: Record<string, {
         wrapContainer: HTMLElement;
@@ -16,10 +17,13 @@ export declare class VTableVueAttributePlugin extends HtmlAttributePlugin implem
     }>;
     private renderQueue;
     private isRendering;
+    currentContext?: any;
+    constructor(currentContext?: any);
     renderGraphicHTML(graphic: IGraphic): void;
     private scheduleRender;
     doRenderGraphic(graphic: IGraphic): void;
     private getGraphicOptions;
+    checkToPassAppContext(vnode: VNode): void;
     checkNeedRender(graphic: IGraphic): boolean;
     checkInViewport(graphic: IGraphic): boolean;
     checkDom(dom: HTMLElement): boolean;

package/cjs/components/custom/vtable-vue-attribute-plugin.js

@@ -6,10 +6,11 @@ var vutils = require('@visactor/vutils');
 var vue = require('vue');
 
 class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
-    constructor() {
-        super(...arguments);
+    constructor(currentContext) {
+        super();
         this.renderQueue = new Set();
         this.isRendering = false;
+        this.currentContext = currentContext;
     }
     renderGraphicHTML(graphic) {
         if (!this.checkNeedRender(graphic)) {
@@ -40,6 +41,9 @@ class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
     doRenderGraphic(graphic) {
         var _a;
         const { id, options } = this.getGraphicOptions(graphic);
+        if (!id) {
+            return;
+        }
         const stage = graphic.stage;
         const { element, container: expectedContainer } = options;
         const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
@@ -48,9 +52,19 @@ class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
             this.removeElement(id);
             targetMap = null;
         }
+        this.checkToPassAppContext(element);
         if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
             const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options });
             if (wrapContainer) {
+                const historyWrapContainer = document.getElementById(id);
+                const dataRenderId = `${this.renderId}`;
+                if (historyWrapContainer && historyWrapContainer.getAttribute('data-vue-renderId') !== dataRenderId) {
+                    vue.render(null, historyWrapContainer);
+                    historyWrapContainer.remove();
+                    this.removeWrapContainerEventListener(historyWrapContainer);
+                }
+                wrapContainer.id = id;
+                wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
                 vue.render(element, wrapContainer);
                 targetMap = {
                     wrapContainer,
@@ -75,12 +89,20 @@ class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
     }
     getGraphicOptions(graphic) {
         var _a;
-        const { vue } = graphic.attribute;
+        const { vue } = (graphic === null || graphic === void 0 ? void 0 : graphic.attribute) || {};
         if (!vue) {
             return null;
         }
-        const id = vutils.isNil(vue.id) ? `${(_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid}_vue` : vue.id;
-        return { id, options: vue };
+        const id = vutils.isNil(vue.id) ? (_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid : vue.id;
+        return { id: `vue_${id}`, options: vue };
+    }
+    checkToPassAppContext(vnode) {
+        if (this.currentContext) {
+            try {
+                vnode.appContext = this.currentContext;
+            }
+            catch (error) { }
+        }
     }
     checkNeedRender(graphic) {
         const { id, options } = this.getGraphicOptions(graphic) || {};
@@ -190,7 +212,7 @@ class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
         if (!positionChanged) {
             return;
         }
-        const { pointerEvents = true, penetrateEventList = ['wheel'] } = options;
+        const { pointerEvents, penetrateEventList = ['wheel'] } = options;
         const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
         const style = this.convertCellStyle(graphic);
         Object.assign(calculateStyle, Object.assign(Object.assign(Object.assign({ overflow: 'hidden' }, (style || {})), (rest || {})), { transform: `translate(${offsetX}px, ${offsetTop}px)`, boxSizing: 'border-box', display: visible !== false ? display || 'block' : 'none', pointerEvents: pointerEvents === true ? 'all' : pointerEvents || 'none', position: 'absolute' }));

package/cjs/edit/editor.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface DynamicRenderEditorParams {
     row: number;
     col: number;
@@ -23,13 +24,15 @@ export declare class DynamicRenderEditor {
     tableContainer: HTMLElement | null;
     currentValue: string | null;
     nodeMap?: Map<string | number, Map<string | number, (params: DynamicRenderEditorParams) => any>>;
-    constructor();
+    currentContext?: any;
+    constructor(currentContext?: any);
     registerNode(tableId?: string | number, key?: string | number, getNode?: () => (params: DynamicRenderEditorParams) => any): void;
     getNode(tableId?: string | number, key?: string | number): (params: DynamicRenderEditorParams) => any;
     removeNode(tableId: string | number): void;
     release(tableId?: string | number): void;
     onStart(editorContext: any): Promise<void>;
     createElement(editorContext: any): Promise<boolean>;
+    checkToPassAppContext(vnode: VNode): void;
     getColumnKeyField(column: any): any;
     getValue(): string;
     setValue(value: any): void;

package/cjs/edit/editor.js

@@ -6,7 +6,8 @@ var vue = require('vue');
 var VTable = require('@visactor/vtable');
 
 class DynamicRenderEditor {
-    constructor() {
+    constructor(currentContext) {
+        this.currentContext = currentContext;
         this.tableContainer = null;
         this.currentValue = null;
         this.wrapContainer = null;
@@ -81,10 +82,11 @@ class DynamicRenderEditor {
                 value,
                 table,
                 onChange: (value) => this.setValue(value)
-            })) === null || _b === void 0 ? void 0 : _b[0];
+            })) === null || _b === void 0 ? void 0 : _b.find((node) => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
             if (!vnode || !vue.isVNode(vnode)) {
                 return false;
             }
+            this.checkToPassAppContext(vnode);
             const wrapContainer = document.createElement('div');
             wrapContainer.style.position = 'absolute';
             wrapContainer.style.width = '100%';
@@ -101,6 +103,11 @@ class DynamicRenderEditor {
             return true;
         });
     }
+    checkToPassAppContext(vnode) {
+        if (this.currentContext) {
+            vnode.appContext = this.currentContext;
+        }
+    }
     getColumnKeyField(column) {
         const { field, key } = column || {};
         return vutils.isValid(key) ? key : field;

package/cjs/edit/util.d.ts

@@ -1,4 +1,4 @@
 import { DynamicRenderEditor } from './editor';
 export declare function checkRenderEditor(column: any, getEditCustomNode?: any): boolean;
 export declare function getRenderEditorColumnKeyField(column: any): any;
-export declare function getRenderEditor(create?: boolean): DynamicRenderEditor;
+export declare function getRenderEditor(create?: boolean, currentContext?: any): DynamicRenderEditor;

package/cjs/edit/util.js

@@ -21,10 +21,10 @@ function getRenderEditorColumnKeyField(column) {
     const { field, key } = column || {};
     return vutils.isValid(key) ? key : field;
 }
-function getRenderEditor(create) {
+function getRenderEditor(create, currentContext) {
     let renderEditor = VTable.register.editor(DYNAMIC_RENDER_EDITOR);
     if (!renderEditor && !!create) {
-        renderEditor = new editor.DynamicRenderEditor();
+        renderEditor = new editor.DynamicRenderEditor(currentContext);
         VTable.register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
     }
     return renderEditor;

package/cjs/hooks/useCellRender.js

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vtableVueAttributePlugin = require('../components/custom/vtable-vue-attribute-plugin.js');
 
 function useCellRender(props, tableRef) {
+    const instance = vue.getCurrentInstance();
     vue.watchEffect(() => {
         var _a, _b;
         if (!((_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.createReactContainer)) {
@@ -12,7 +13,7 @@ function useCellRender(props, tableRef) {
         if (!tableRef.value) {
             return;
         }
-        tableRef.value.scenegraph.stage.pluginService.register(new vtableVueAttributePlugin.VTableVueAttributePlugin());
+        tableRef.value.scenegraph.stage.pluginService.register(new vtableVueAttributePlugin.VTableVueAttributePlugin(instance === null || instance === void 0 ? void 0 : instance.appContext));
     });
 }
 

package/cjs/hooks/useEditorRender.js

@@ -7,6 +7,7 @@ require('@visactor/vtable');
 var util = require('../edit/util.js');
 
 function useEditorRender(props, tableRef) {
+    const instance = vue.getCurrentInstance();
     const validColumns = vue.computed(() => {
         var _a;
         const columns = (_a = props.options) === null || _a === void 0 ? void 0 : _a.columns;
@@ -31,7 +32,7 @@ function useEditorRender(props, tableRef) {
             renderEditor.removeNode(id);
         }
         else if (validColumns.value.length > 0) {
-            renderEditor = util.getRenderEditor(true);
+            renderEditor = util.getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
         }
         validColumns.value.forEach(column => {
             const { getEditCustomNode } = column;

package/cjs/index.d.ts

@@ -2,4 +2,4 @@ import * as VTable from '@visactor/vtable';
 export * from './tables';
 export * from './components';
 export { VTable };
-export declare const version = "1.17.3-alpha.10";
+export declare const version = "1.17.3-alpha.11";

package/cjs/index.js

@@ -40,7 +40,7 @@ function _interopNamespaceDefault(e) {
 
 var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
 
-const version = "1.17.3-alpha.10";
+const version = "1.17.3-alpha.11";
 
 exports.VTable = VTable__namespace;
 Object.defineProperty(exports, 'register', {

package/cjs/utils/customLayoutUtils.js

@@ -53,7 +53,7 @@ function createCustomLayout(children, isHeader, args) {
         const subChildren = resolveChildren(childChildren);
         if (vutils.isObject(props === null || props === void 0 ? void 0 : props.vue)) {
             const { element } = props.vue;
-            const targetVNode = element !== null && element !== void 0 ? element : subChildren[0];
+            const targetVNode = element !== null && element !== void 0 ? element : subChildren.find(node => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
             Object.assign(child.props.vue, {
                 element: vue.isVNode(targetVNode) ? targetVNode : null,
                 container: isHeader ? (_a = args === null || args === void 0 ? void 0 : args.table) === null || _a === void 0 ? void 0 : _a.headerDomContainer : (_b = args === null || args === void 0 ? void 0 : args.table) === null || _b === void 0 ? void 0 : _b.bodyDomContainer

package/dist/vue-vtable.js

@@ -69,7 +69,7 @@
           const subChildren = resolveChildren(childChildren);
           if (vutils.isObject(props?.vue)) {
               const { element } = props.vue;
-              const targetVNode = element ?? subChildren[0];
+              const targetVNode = element ?? subChildren.find(node => node?.type !== Symbol.for('v-cmt'));
               Object.assign(child.props.vue, {
                   element: vue.isVNode(targetVNode) ? targetVNode : null,
                   container: isHeader ? args?.table?.headerDomContainer : args?.table?.bodyDomContainer
@@ -134,7 +134,9 @@
       tableContainer;
       currentValue;
       nodeMap;
-      constructor() {
+      currentContext;
+      constructor(currentContext) {
+          this.currentContext = currentContext;
           this.tableContainer = null;
           this.currentValue = null;
           this.wrapContainer = null;
@@ -204,10 +206,11 @@
               value,
               table,
               onChange: (value) => this.setValue(value)
-          })?.[0];
+          })?.find((node) => node?.type !== Symbol.for('v-cmt'));
           if (!vnode || !vue.isVNode(vnode)) {
               return false;
           }
+          this.checkToPassAppContext(vnode);
           const wrapContainer = document.createElement('div');
           wrapContainer.style.position = 'absolute';
           wrapContainer.style.width = '100%';
@@ -223,6 +226,11 @@
           }
           return true;
       }
+      checkToPassAppContext(vnode) {
+          if (this.currentContext) {
+              vnode.appContext = this.currentContext;
+          }
+      }
       getColumnKeyField(column) {
           const { field, key } = column || {};
           return vutils.isValid(key) ? key : field;
@@ -307,10 +315,10 @@
       const { field, key } = column || {};
       return vutils.isValid(key) ? key : field;
   }
-  function getRenderEditor(create) {
+  function getRenderEditor(create, currentContext) {
       let renderEditor = VTable.register.editor(DYNAMIC_RENDER_EDITOR);
       if (!renderEditor && !!create) {
-          renderEditor = new DynamicRenderEditor();
+          renderEditor = new DynamicRenderEditor(currentContext);
           VTable.register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
       }
       return renderEditor;
@@ -470,6 +478,7 @@
   const TABLE_EVENTS_KEYS = Object.keys(TABLE_EVENTS);
 
   function useEditorRender(props, tableRef) {
+      const instance = vue.getCurrentInstance();
       const validColumns = vue.computed(() => {
           const columns = props.options?.columns;
           if (!vutils.isArray(columns)) {
@@ -493,7 +502,7 @@
               renderEditor.removeNode(id);
           }
           else if (validColumns.value.length > 0) {
-              renderEditor = getRenderEditor(true);
+              renderEditor = getRenderEditor(true, instance?.appContext);
           }
           validColumns.value.forEach(column => {
               const { getEditCustomNode } = column;
@@ -518,6 +527,11 @@
   class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
       renderQueue = new Set();
       isRendering = false;
+      currentContext;
+      constructor(currentContext) {
+          super();
+          this.currentContext = currentContext;
+      }
       renderGraphicHTML(graphic) {
           if (!this.checkNeedRender(graphic)) {
               return;
@@ -546,6 +560,9 @@
       }
       doRenderGraphic(graphic) {
           const { id, options } = this.getGraphicOptions(graphic);
+          if (!id) {
+              return;
+          }
           const stage = graphic.stage;
           const { element, container: expectedContainer } = options;
           const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
@@ -554,9 +571,19 @@
               this.removeElement(id);
               targetMap = null;
           }
+          this.checkToPassAppContext(element);
           if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
               const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options });
               if (wrapContainer) {
+                  const historyWrapContainer = document.getElementById(id);
+                  const dataRenderId = `${this.renderId}`;
+                  if (historyWrapContainer && historyWrapContainer.getAttribute('data-vue-renderId') !== dataRenderId) {
+                      vue.render(null, historyWrapContainer);
+                      historyWrapContainer.remove();
+                      this.removeWrapContainerEventListener(historyWrapContainer);
+                  }
+                  wrapContainer.id = id;
+                  wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
                   vue.render(element, wrapContainer);
                   targetMap = {
                       wrapContainer,
@@ -580,12 +607,20 @@
           }
       }
       getGraphicOptions(graphic) {
-          const { vue } = graphic.attribute;
+          const { vue } = graphic?.attribute || {};
           if (!vue) {
               return null;
           }
-          const id = vutils.isNil(vue.id) ? `${graphic.id ?? graphic._uid}_vue` : vue.id;
-          return { id, options: vue };
+          const id = vutils.isNil(vue.id) ? graphic.id ?? graphic._uid : vue.id;
+          return { id: `vue_${id}`, options: vue };
+      }
+      checkToPassAppContext(vnode) {
+          if (this.currentContext) {
+              try {
+                  vnode.appContext = this.currentContext;
+              }
+              catch (error) { }
+          }
       }
       checkNeedRender(graphic) {
           const { id, options } = this.getGraphicOptions(graphic) || {};
@@ -693,7 +728,7 @@
           if (!positionChanged) {
               return;
           }
-          const { pointerEvents = true, penetrateEventList = ['wheel'] } = options;
+          const { pointerEvents, penetrateEventList = ['wheel'] } = options;
           const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
           const style = this.convertCellStyle(graphic);
           Object.assign(calculateStyle, {
@@ -818,6 +853,7 @@
   }
 
   function useCellRender(props, tableRef) {
+      const instance = vue.getCurrentInstance();
       vue.watchEffect(() => {
           if (!props?.options?.customConfig?.createReactContainer) {
               return;
@@ -825,7 +861,7 @@
           if (!tableRef.value) {
               return;
           }
-          tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin());
+          tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin(instance?.appContext));
       });
   }
 
@@ -1257,7 +1293,7 @@
   }
   CheckBox.symbol = 'CheckBox';
 
-  const version = "1.17.3-alpha.10";
+  const version = "1.17.3-alpha.11";
 
   exports.VTable = VTable__namespace;
   Object.defineProperty(exports, 'register', {

package/dist/vue-vtable.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils"),require("@visactor/vtable/es/vrender")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils","@visactor/vtable/es/vrender"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.Vue,e.VUtils,e.VTable.vrender)}(this,(function(e,t,n,o,r){"use strict";function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=i(t);function a(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function s(e){const t={};for(const n in e)if(e.hasOwnProperty(n)){t[a(n)]=e[n]}return t}function u(e){return e.flatMap((e=>Array.isArray(e.children)?u(e.children):e))}function c(e,t,r){const i={Group:l.CustomLayout.Group,Image:l.CustomLayout.Image,Text:l.CustomLayout.Text,Tag:l.CustomLayout.Tag,Radio:l.CustomLayout.Radio,CheckBox:l.CustomLayout.CheckBox};return{rootComponent:function e(l){if(!l)return null;const{type:u,children:c}=l,d=s(l.props),p=i[u?.symbol||u?.name];if(!p)return null;const h=new p({...d});!function(e,t){Object.keys(t).forEach((n=>{if(function(e,t){return e.startsWith("on")&&o.isFunction(t[e])}(n,t)){let o;o=n.startsWith("on")?n.slice(2).toLowerCase():a(n.slice(2)).toLowerCase(),e.addEventListener(o,t[n])}}))}(h,d);const C=function(e){return e?.default?.()||e||[]}(c);if(o.isObject(d?.vue)){const{element:e}=d.vue,o=e??C[0];return Object.assign(l.props.vue,{element:n.isVNode(o)?o:null,container:t?r?.table?.headerDomContainer:r?.table?.bodyDomContainer}),h}return C.forEach((t=>{const n=e(t);n?h.add(n):t.type===Symbol.for("v-fgt")&&t.children.forEach((t=>{const n=e(t);n&&h.add(n)}))})),h}(e)}}function d(e,t){return n=>{const{table:o,row:r,col:i,rect:l}=n,a=o.getCellOriginRecord(i,r),{height:s,width:u}=l??o.getCellRect(i,r),d=t?"headerCustomLayout":"customLayout";if(!e[d])return null;const p=e[d]({table:o,row:r,col:i,rect:l,record:a,height:s,width:u})[0],{rootComponent:h}=c(p,t,n);return{rootContainer:h,renderDefault:!1}}}class p{wrapContainer;tableContainer;currentValue;nodeMap;constructor(){this.tableContainer=null,this.currentValue=null,this.wrapContainer=null,this.nodeMap=new Map}registerNode(e,t,n){o.isValid(e)&&o.isValid(t)&&"function"==typeof n&&(this.nodeMap.has(e)||this.nodeMap.set(e,new Map),this.nodeMap.get(e).set(t,n))}getNode(e,t){return this.nodeMap.get(e)?.get(t)}removeNode(e){this.nodeMap.delete(e)}release(e){o.isValid(e)?this.removeNode(e):this.nodeMap.clear()}async onStart(e){const{value:t}=e;this.setValue(t),await this.createElement(e)}async createElement(e){const{row:r,col:i,value:l,table:a,container:s,referencePosition:u}=e;if(!s)return!1;const c=a.getBodyColumnDefine(i,r),{editConfig:d}=c||{},{id:p}=a,h=this.getColumnKeyField(c);if(!o.isValid(h)||!o.isValid(p))return!1;if("function"==typeof d?.editBefore){if(!await d.editBefore(e))return a.showTooltip(i,r,{content:d.disablePrompt||"This field is not allowed to be edited",referencePosition:{rect:u?.rect,placement:t.TYPES.Placement.top},style:{bgColor:"black",color:"white",arrowMark:!0},disappearDelay:1e3}),!1}const C=this.getNode(p,h)?.({row:r,col:i,value:l,table:a,onChange:e=>this.setValue(e)})?.[0];if(!C||!n.isVNode(C))return!1;const m=document.createElement("div");m.style.position="absolute",m.style.width="100%",m.style.boxSizing="border-box";const{bgColor:y}=a.getCellStyle(i,r)||{};return m.style.backgroundColor=y||"#FFFFFF",this.wrapContainer=m,this.tableContainer=s,this.tableContainer.appendChild(m),n.render(C,m),u?.rect&&this.adjustPosition(u.rect),!0}getColumnKeyField(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}getValue(){return this.currentValue}setValue(e){this.currentValue=e}adjustPosition(e){this.wrapContainer&&(this.wrapContainer.style.top=`${e.top}px`,this.wrapContainer.style.left=`${e.left}px`,this.wrapContainer.style.width=`${e.width}px`,this.wrapContainer.style.height=`${e.height}px`)}async validateValue(e,n,r,i){const{col:l,row:a}=r||{};if(!o.isValid(l)||!o.isValid(a))return!0;const s=i.getBodyColumnDefine(l,a),{editConfig:u}=s||{};if("function"==typeof u?.validateValue){const o=await u.validateValue({col:l,row:a,value:e,oldValue:n,table:i});if(!1===o){const e=i.getVisibleCellRangeRelativeRect({col:l,row:a});return i.showTooltip(l,a,{content:u.invalidPrompt||"invalid",referencePosition:{rect:e,placement:t.TYPES.Placement.top},style:{bgColor:"red",color:"white",arrowMark:!0},disappearDelay:1e3}),!1}return o}return!0}onEnd(){this.wrapContainer&&this.tableContainer&&(n.render(null,this.wrapContainer),this.tableContainer.removeChild(this.wrapContainer)),this.wrapContainer=null,this.tableContainer=null}isEditorElement(e){return this.wrapContainer?.contains(e)||this.isClickEditorElement(e)}isClickEditorElement(e){for(;e;){if(e.classList&&e.classList.contains("table-editor-element"))return!0;e=e.parentNode}return!1}}const h="dynamic-render-editor";function C(e,t){const{editor:n}=e||{},r=m(e);return!(!o.isValid(r)||n!==h)&&("function"==typeof t?(e.getEditCustomNode=t,!0):"function"==typeof e.getEditCustomNode)}function m(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}function y(e){let n=t.register.editor(h);return!n&&e&&(n=new p,t.register.editor(h,n)),n}function f(e){const t={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:{},tooltip:{},menu:{}},n={PivotColumnDimension:"columns",PivotColumnHeaderTitle:"columnHeaderTitle",PivotRowDimension:"rows",PivotRowHeaderTitle:"rowHeaderTitle",PivotCorner:"corner",PivotIndicator:"indicators",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=s(e.props);const o=e.type?.symbol||e.type?.name,r=n[o];r&&(Array.isArray(t[r])?e.props.hasOwnProperty("objectHandler")?t[r].push(e.props.objectHandler):t[r].push(e.props):t[r]=e.props)})),t}function g(e,t){return{...e,columns:t.columns&&t.columns.length?t.columns:e.columns,columnHeaderTitle:t.columnHeaderTitle&&t.columnHeaderTitle.length?t.columnHeaderTitle:e.columnHeaderTitle,rows:t.rows&&t.rows.length?t.rows:e.rows,rowHeaderTitle:t.rowHeaderTitle&&t.rowHeaderTitle.length?t.rowHeaderTitle:e.rowHeaderTitle,indicators:t.indicators&&t.indicators.length?t.indicators:e.indicators,corner:Object.keys(e.corner||{}).length?e.corner:t.corner,tooltip:Object.keys(t.tooltip||{}).length?t.tooltip:e.tooltip,menu:Object.keys(t.menu||{}).length?t.menu:e.menu}}const E={...t.ListTable.EVENT_TYPE,...t.PivotTable.EVENT_TYPE,...t.PivotChart.EVENT_TYPE},v={onClickCell:E.CLICK_CELL,onDblClickCell:E.DBLCLICK_CELL,onMouseDownCell:E.MOUSEDOWN_CELL,onMouseUpCell:E.MOUSEUP_CELL,onSelectedCell:E.SELECTED_CELL,onKeyDown:E.KEYDOWN,onMouseEnterTable:E.MOUSEENTER_TABLE,onMouseLeaveTable:E.MOUSELEAVE_TABLE,onMouseDownTable:E.MOUSEDOWN_TABLE,onMouseMoveCell:E.MOUSEMOVE_CELL,onMouseEnterCell:E.MOUSEENTER_CELL,onMouseLeaveCell:E.MOUSELEAVE_CELL,onContextMenuCell:E.CONTEXTMENU_CELL,onResizeColumn:E.RESIZE_COLUMN,onResizeColumnEnd:E.RESIZE_COLUMN_END,onChangeHeaderPosition:E.CHANGE_HEADER_POSITION,onChangeHeaderPositionStart:E.CHANGE_HEADER_POSITION_START,onChangeHeaderPositionFail:E.CHANGE_HEADER_POSITION_FAIL,onSortClick:E.SORT_CLICK,onFreezeClick:E.FREEZE_CLICK,onScroll:E.SCROLL,onDropdownMenuClick:E.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:E.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:E.DRAG_SELECT_END,onDropdownIconClick:E.DROPDOWN_ICON_CLICK,onDropdownMenuClear:E.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:E.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:E.SHOW_MENU,onHideMenu:E.HIDE_MENU,onIconClick:E.ICON_CLICK,onLegendItemClick:E.LEGEND_ITEM_CLICK,onLegendItemHover:E.LEGEND_ITEM_HOVER,onLegendItemUnHover:E.LEGEND_ITEM_UNHOVER,onLegendChange:E.LEGEND_CHANGE,onMouseEnterAxis:E.MOUSEENTER_AXIS,onMouseLeaveAxis:E.MOUSELEAVE_AXIS,onCheckboxStateChange:E.CHECKBOX_STATE_CHANGE,onRadioStateChange:E.RADIO_STATE_CHANGE,onAfterRender:E.AFTER_RENDER,onInitialized:E.INITIALIZED,onPivotSortClick:E.PIVOT_SORT_CLICK,onDrillMenuClick:E.DRILLMENU_CLICK,onVChartEventType:E.VCHART_EVENT_TYPE,onChangeCellValue:E.CHANGE_CELL_VALUE,onMousedownFillHandle:E.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:E.DRAG_FILL_HANDLE_END,onDblclickFillHandle:E.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:E.SCROLL_VERTICAL_END,onScrollHorizontalEnd:E.SCROLL_HORIZONTAL_END,onChangCellValue:E.CHANGE_CELL_VALUE},b=Object.keys(v);function w(e,t){const r=n.computed((()=>{const t=e.options?.columns;return o.isArray(t)?t.filter((e=>!!o.isObject(e)&&!!C(e))):[]}));function i(){return t.value?.id}n.watchEffect((()=>{!function(){const e=i();if(!o.isValid(e))return;let t=y();t?t.removeNode(e):r.value.length>0&&(t=y(!0));r.value.forEach((n=>{const{getEditCustomNode:o}=n,r=m(n);t.registerNode(e,r,o),delete n.editCustomNode}))}()})),n.onBeforeUnmount((()=>{!function(){const e=i();if(!o.isValid(e))return;const t=y();t?.release(e)}()}))}class T extends r.HtmlAttributePlugin{renderQueue=new Set;isRendering=!1;renderGraphicHTML(e){this.checkNeedRender(e)&&(this.renderQueue.add(e),this.scheduleRender())}scheduleRender(){this.isRendering||(this.isRendering=!0,requestAnimationFrame((()=>{this.renderQueue.forEach((e=>{try{this.doRenderGraphic(e)}catch(t){const{id:n}=this.getGraphicOptions(e)||{};this.removeElement(n,!0)}})),this.renderQueue.clear(),this.isRendering=!1})))}doRenderGraphic(e){const{id:t,options:o}=this.getGraphicOptions(e),r=e.stage,{element:i,container:l}=o,a=l?function(e){const{col:t,row:n,stage:o}=L(e);let r=e.attribute.vue?.container;const{table:i}=o;r===i.bodyDomContainer?t<i.frozenColCount&&n>=i.rowCount-i.bottomFrozenRowCount?r=i.bottomFrozenBodyDomContainer:t>=i.colCount-i.rightFrozenColCount&&n>=i.rowCount-i.bottomFrozenRowCount?r=i.rightFrozenBottomDomContainer:n>=i.rowCount-i.bottomFrozenRowCount?r=i.bottomFrozenBodyDomContainer:t<i.frozenColCount?r=i.frozenBodyDomContainer:t>=i.colCount-i.rightFrozenColCount&&(r=i.rightFrozenBodyDomContainer):r===i.headerDomContainer&&(t<i.frozenColCount?r=i.frozenHeaderDomContainer:t>=i.colCount-i.rightFrozenColCount&&(r=i.rightFrozenHeaderDomContainer));return r}(e):l;let s=this.htmlMap?.[t];if(s&&a&&a!==s.container&&(this.removeElement(t),s=null),s&&this.checkDom(s.wrapContainer))n.render(i,s.wrapContainer);else{const{wrapContainer:l,nativeContainer:u}=this.getWrapContainer(r,a,{id:t,options:o});l&&(n.render(i,l),s={wrapContainer:l,nativeContainer:u,container:a,renderId:this.renderId,graphic:e,isInViewport:!0,lastPosition:null,lastStyle:{}},this.htmlMap[t]=s)}s&&(this.updateStyleOfWrapContainer(e,r,s.wrapContainer,s.nativeContainer),s.renderId=this.renderId)}getGraphicOptions(e){const{vue:t}=e.attribute;if(!t)return null;return{id:o.isNil(t.id)?`${e.id??e._uid}_vue`:t.id,options:t}}checkNeedRender(e){const{id:t,options:n}=this.getGraphicOptions(e)||{};if(!t)return!1;if(!e.stage)return!1;const{element:o}=n;if(!o)return!1;return this.checkInViewport(e)}checkInViewport(e){const{stage:t,globalAABBBounds:n}=e;if(!t)return!1;const o=100,{AABBBounds:r}=t,i=r.x1-o,l=r.x2+o,a=r.y1-o,s=r.y2+o;return n.x1<l&&n.x2>i&&n.y1<s&&n.y2>a}checkDom(e){return!!e&&document.contains(e)}removeAllDom(e){this.htmlMap&&(Object.keys(this.htmlMap).forEach((e=>{this.removeElement(e,!0)})),this.htmlMap=null)}removeElement(e,t){const o=this.htmlMap?.[e];if(!o)return;const{wrapContainer:r}=o;r&&(n.render(null,r),t?(this.checkDom(r)&&super.removeElement(e),delete this.htmlMap[e]):(r.remove(),o.isInViewport=!1),this.removeWrapContainerEventListener(r))}getWrapContainer(e,t,n){let o;o=t?"string"==typeof t?r.application.global.getElementById(t):t:e.window.getContainer();const{id:i}=n||{},l=this.htmlMap?.[i];if(l&&!l.isInViewport){const{wrapContainer:e}=l;return this.checkDom(e)||o.appendChild(e),{wrapContainer:e,nativeContainer:o}}return{wrapContainer:r.application.global.createDom({tagName:"div",parent:o}),nativeContainer:o}}updateStyleOfWrapContainer(e,t,n,i){const{attribute:l,type:a}=e,{vue:s,width:u,height:c,visible:d,display:p,...h}=l||{},{x:C,y:m}=this.calculatePosition(e,s.anchorType),{left:y,top:f}=this.calculateOffset(t,i,C,m),{id:g}=this.getGraphicOptions(e)||{},E=g?this.htmlMap[g]:null;if(!E)return;if(!(!E.lastPosition||E.lastPosition.x!==y||E.lastPosition.y!==f))return;const{pointerEvents:v=!0,penetrateEventList:b=["wheel"]}=s,w=this.parseDefaultStyleFromGraphic(e),T=this.convertCellStyle(e);Object.assign(w,{overflow:"hidden",...T||{},...h||{},transform:`translate(${y}px, ${f}px)`,boxSizing:"border-box",display:!1!==d?p||"block":"none",pointerEvents:!0===v?"all":v||"none",position:"absolute"}),"none"!==w.pointerEvents&&(this.removeWrapContainerEventListener(n),o.uniqArray(b).forEach((e=>{"wheel"===e&&(n.addEventListener("wheel",this.onWheel),n.addEventListener("wheel",(e=>e.preventDefault()),!0))}))),"text"===a&&"position"===s.anchorType&&Object.assign(w,this.getTransformOfText(e)),this.applyUserStyles(s,w,{offsetX:y,offsetTop:f,graphic:e,wrapContainer:n});!o.isEqual(E.lastStyle,w)&&(r.application.global.updateDom(n,{width:u,height:c,style:w}),E.lastStyle=w)}convertCellStyle(e){const{col:t,row:n,stage:r}=L(e),i=r?.table?.getCellStyle(t,n);if(!o.isObject(i))return;const{lineHeight:l,padding:a,...s}=i;return{...s,padding:o.isArray(a)?a.map((e=>`${e}px`)).join(" "):a}}calculatePosition(e,t){const n=e.globalAABBBounds;if("position"===t||n.empty()){const t=e.globalTransMatrix;return{x:t.e,y:t.f}}return o.calculateAnchorOfBounds(n,t||"top-left")}calculateOffset(e,t,n,o){const i=r.application.global.getElementTopLeft(t,!1),l=e.window.getTopLeft(!1);return{left:n+l.left-i.left,top:o+l.top-i.top}}applyUserStyles(e,t,n){if(o.isFunction(e.style)){const o=e.style({top:n.offsetTop,left:n.offsetX,width:n.graphic.globalAABBBounds.width(),height:n.graphic.globalAABBBounds.height()},n.graphic,n.wrapContainer);Object.assign(t,o)}else o.isObject(e.style)?Object.assign(t,e.style):o.isString(e.style)&&Object.assign(t,o.styleStringToObject(e.style))}}function L(e){for(;e?.parent;){if("custom-container"===e.name)return e;e=e.parent}return{col:-1,row:-1,stage:null}}var S=n.defineComponent({__name:"base-table",props:{type:{type:String,required:!1},options:{type:null,required:!1},records:{type:Array,required:!1},width:{type:[Number,String],required:!1,default:"100%"},height:{type:[Number,String],required:!1,default:"100%"},onReady:{type:Function,required:!1},onError:{type:Function,required:!1},keepColumnWidthChange:{type:Boolean,required:!1},onClickCell:{type:null,required:!1},onDblClickCell:{type:null,required:!1},onMouseDownCell:{type:null,required:!1},onMouseUpCell:{type:null,required:!1},onSelectedCell:{type:null,required:!1},onKeyDown:{type:null,required:!1},onMouseEnterTable:{type:null,required:!1},onMouseLeaveTable:{type:null,required:!1},onMouseDownTable:{type:null,required:!1},onMouseMoveCell:{type:null,required:!1},onMouseEnterCell:{type:null,required:!1},onMouseLeaveCell:{type:null,required:!1},onContextMenuCell:{type:null,required:!1},onResizeColumn:{type:null,required:!1},onResizeColumnEnd:{type:null,required:!1},onChangeHeaderPosition:{type:null,required:!1},onChangeHeaderPositionStart:{type:null,required:!1},onChangeHeaderPositionFail:{type:null,required:!1},onSortClick:{type:null,required:!1},onFreezeClick:{type:null,required:!1},onScroll:{type:null,required:!1},onDropdownMenuClick:{type:null,required:!1},onMouseOverChartSymbol:{type:null,required:!1},onDragSelectEnd:{type:null,required:!1},onDropdownIconClick:{type:null,required:!1},onDropdownMenuClear:{type:null,required:!1},onTreeHierarchyStateChange:{type:null,required:!1},onShowMenu:{type:null,required:!1},onHideMenu:{type:null,required:!1},onIconClick:{type:null,required:!1},onLegendItemClick:{type:null,required:!1},onLegendItemHover:{type:null,required:!1},onLegendItemUnHover:{type:null,required:!1},onLegendChange:{type:null,required:!1},onMouseEnterAxis:{type:null,required:!1},onMouseLeaveAxis:{type:null,required:!1},onCheckboxStateChange:{type:null,required:!1},onRadioStateChange:{type:null,required:!1},onAfterRender:{type:null,required:!1},onInitialized:{type:null,required:!1},onPivotSortClick:{type:null,required:!1},onDrillMenuClick:{type:null,required:!1},onVChartEventType:{type:null,required:!1},onChangeCellValue:{type:null,required:!1},onMousedownFillHandle:{type:null,required:!1},onDragFillHandleEnd:{type:null,required:!1},onDblclickFillHandle:{type:null,required:!1},onScrollVerticalEnd:{type:null,required:!1},onScrollHorizontalEnd:{type:null,required:!1}},emits:b,setup(e,{expose:o,emit:r}){const i=e,l=n.ref(null),a=n.shallowRef(null),s=n.ref(new Map),u=n.ref([]),c=n.ref([]);w(i,a),function(e,t){n.watchEffect((()=>{e?.options?.customConfig?.createReactContainer&&t.value&&t.value.scenegraph.stage.pluginService.register(new T)}))}(i,a),o({vTableInstance:a});const d=n.computed((()=>"number"==typeof i.width?`${i.width}px`:i.width)),p=n.computed((()=>"number"==typeof i.height?`${i.height}px`:i.height)),h=r,C=(e,t)=>{const n=new e(l.value,t);a.value=n,s.value.clear(),u.value=[],c.value=[],n.on("resize_column_end",(e=>{if(!i.keepColumnWidthChange)return;const{col:t,colWidths:o}=e,r=o[t];if(n.isPivotTable()){const e=n.getCellHeaderPaths(t,n.columnHeaderLevelCount);let o=null;o="rowHeader"===e.cellLocation?e.rowHeaderPaths:e.colHeaderPaths;let i=!1;for(let e=0;e<u.value.length;e++){const t=u.value[e];JSON.stringify(t.dimensions)===JSON.stringify(o)&&(t.width=r,i=!0)}i||u.value.push({dimensions:o,width:r})}else{const e=n.getBodyColumnDefine(t,0);e?.key&&s.value.set(e.key,r)}}))},m=()=>{if(!l.value)return;a.value&&a.value.release();const e=()=>void 0!==i.records&&null!==i.records&&i.records.length>0?i.records:i.options.records;try{switch(i.type){case"list":C(t.ListTable,{...i.options,records:e()});break;case"pivot":C(t.PivotTable,{...i.options,records:e()});break;case"chart":C(t.PivotChart,{...i.options,records:e()})}n=a.value,b.forEach((e=>{n.on(v[e],(t=>{h(e,t)}))})),i.onReady?.(a.value,!0)}catch(e){i.onError?.(e)}var n},y=e=>{if(a.value)try{if(i.keepColumnWidthChange){const t=function(e,t,n){if(n.isPivotTable())return t;const o=[];return e.forEach(((e,t)=>{o.push({key:t,width:e})})),o}(s.value,u.value,a.value);e={...e,columnWidthConfig:t,columnWidthConfigForRowHeader:t}}switch(i.type){case"list":a.value instanceof t.ListTable&&a.value.updateOption(e);break;case"pivot":a.value instanceof t.PivotTable&&a.value.updateOption(e);break;case"chart":a.value instanceof t.PivotChart&&a.value.updateOption(e)}}catch(e){i.onError?.(e)}};return n.onMounted(m),n.onBeforeUnmount((()=>{a.value?.release()})),n.watch((()=>i.options),((e,t)=>{a.value?y(e):m()})),n.watch((()=>i.records),((e,t)=>{a.value?y({...i.options,records:e}):m()}),{deep:!0}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:l,style:n.normalizeStyle([{width:d.value,height:p.value},{position:"relative"}])},null,4))}}),O=n.defineComponent({__name:"list-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.ref(null),i=n.useSlots(),l=n.computed((()=>{const e=function(e){const t={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=s(e.props);const o=e.type?.symbol||e.type?.name,r=n[o];r&&("columns"===r&&e.children&&(e.children.customLayout&&(e.props.customLayout=d(e.children)),e.children.headerCustomLayout&&(e.props.headerCustomLayout=d(e.children,!0)),C(e.props,e.children.edit)),Array.isArray(t[r])?t[r].push(e.props):t[r]=e.props)})),t}(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"list",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),M=n.defineComponent({__name:"pivot-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.shallowRef(null),i=n.useSlots(),l=n.computed((()=>{const e=f(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"pivot",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),_=n.defineComponent({__name:"pivot-chart",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.shallowRef(null),i=n.useSlots(),l=n.computed((()=>{const e=f(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"chart",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}});function D(e){return null}function N(e){return null}function R(e){return null}function H(e){return null}function I(e){return null}function P(e){return null}function q(e){return null}function k(e){return null}function A(e){return null}function V(){return null}function B(){return null}function x(){return null}function F(e){return null}function U(e){return null}function j(e){return null}D.symbol="ListColumn",N.symbol="PivotColumnDimension",R.symbol="PivotRowDimension",H.symbol="PivotColumnHeaderTitle",I.symbol="PivotRowHeaderTitle",P.symbol="PivotIndicator",q.symbol="PivotCorner",k.symbol="Menu",A.symbol="Tooltip",V.symbol="Group",B.symbol="Image",x.symbol="Text",F.symbol="Tag",U.symbol="Radio",j.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return t.register}}),e.CheckBox=j,e.Group=V,e.Image=B,e.ListColumn=D,e.ListTable=O,e.Menu=k,e.PivotChart=_,e.PivotColumnDimension=N,e.PivotColumnHeaderTitle=H,e.PivotCorner=q,e.PivotIndicator=P,e.PivotRowDimension=R,e.PivotRowHeaderTitle=I,e.PivotTable=M,e.Radio=U,e.Tag=F,e.Text=x,e.Tooltip=A,e.registerChartModule=(e,t)=>{l.register.chartModule(e,t)},e.version="1.17.3-alpha.10"}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils"),require("@visactor/vtable/es/vrender")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils","@visactor/vtable/es/vrender"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.Vue,e.VUtils,e.VTable.vrender)}(this,(function(e,t,n,o,r){"use strict";function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=i(t);function a(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function s(e){const t={};for(const n in e)if(e.hasOwnProperty(n)){t[a(n)]=e[n]}return t}function u(e){return e.flatMap((e=>Array.isArray(e.children)?u(e.children):e))}function c(e,t,r){const i={Group:l.CustomLayout.Group,Image:l.CustomLayout.Image,Text:l.CustomLayout.Text,Tag:l.CustomLayout.Tag,Radio:l.CustomLayout.Radio,CheckBox:l.CustomLayout.CheckBox};return{rootComponent:function e(l){if(!l)return null;const{type:u,children:c}=l,d=s(l.props),p=i[u?.symbol||u?.name];if(!p)return null;const h=new p({...d});!function(e,t){Object.keys(t).forEach((n=>{if(function(e,t){return e.startsWith("on")&&o.isFunction(t[e])}(n,t)){let o;o=n.startsWith("on")?n.slice(2).toLowerCase():a(n.slice(2)).toLowerCase(),e.addEventListener(o,t[n])}}))}(h,d);const C=function(e){return e?.default?.()||e||[]}(c);if(o.isObject(d?.vue)){const{element:e}=d.vue,o=e??C.find((e=>e?.type!==Symbol.for("v-cmt")));return Object.assign(l.props.vue,{element:n.isVNode(o)?o:null,container:t?r?.table?.headerDomContainer:r?.table?.bodyDomContainer}),h}return C.forEach((t=>{const n=e(t);n?h.add(n):t.type===Symbol.for("v-fgt")&&t.children.forEach((t=>{const n=e(t);n&&h.add(n)}))})),h}(e)}}function d(e,t){return n=>{const{table:o,row:r,col:i,rect:l}=n,a=o.getCellOriginRecord(i,r),{height:s,width:u}=l??o.getCellRect(i,r),d=t?"headerCustomLayout":"customLayout";if(!e[d])return null;const p=e[d]({table:o,row:r,col:i,rect:l,record:a,height:s,width:u})[0],{rootComponent:h}=c(p,t,n);return{rootContainer:h,renderDefault:!1}}}class p{wrapContainer;tableContainer;currentValue;nodeMap;currentContext;constructor(e){this.currentContext=e,this.tableContainer=null,this.currentValue=null,this.wrapContainer=null,this.nodeMap=new Map}registerNode(e,t,n){o.isValid(e)&&o.isValid(t)&&"function"==typeof n&&(this.nodeMap.has(e)||this.nodeMap.set(e,new Map),this.nodeMap.get(e).set(t,n))}getNode(e,t){return this.nodeMap.get(e)?.get(t)}removeNode(e){this.nodeMap.delete(e)}release(e){o.isValid(e)?this.removeNode(e):this.nodeMap.clear()}async onStart(e){const{value:t}=e;this.setValue(t),await this.createElement(e)}async createElement(e){const{row:r,col:i,value:l,table:a,container:s,referencePosition:u}=e;if(!s)return!1;const c=a.getBodyColumnDefine(i,r),{editConfig:d}=c||{},{id:p}=a,h=this.getColumnKeyField(c);if(!o.isValid(h)||!o.isValid(p))return!1;if("function"==typeof d?.editBefore){if(!await d.editBefore(e))return a.showTooltip(i,r,{content:d.disablePrompt||"This field is not allowed to be edited",referencePosition:{rect:u?.rect,placement:t.TYPES.Placement.top},style:{bgColor:"black",color:"white",arrowMark:!0},disappearDelay:1e3}),!1}const C=this.getNode(p,h)?.({row:r,col:i,value:l,table:a,onChange:e=>this.setValue(e)})?.find((e=>e?.type!==Symbol.for("v-cmt")));if(!C||!n.isVNode(C))return!1;this.checkToPassAppContext(C);const m=document.createElement("div");m.style.position="absolute",m.style.width="100%",m.style.boxSizing="border-box";const{bgColor:y}=a.getCellStyle(i,r)||{};return m.style.backgroundColor=y||"#FFFFFF",this.wrapContainer=m,this.tableContainer=s,this.tableContainer.appendChild(m),n.render(C,m),u?.rect&&this.adjustPosition(u.rect),!0}checkToPassAppContext(e){this.currentContext&&(e.appContext=this.currentContext)}getColumnKeyField(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}getValue(){return this.currentValue}setValue(e){this.currentValue=e}adjustPosition(e){this.wrapContainer&&(this.wrapContainer.style.top=`${e.top}px`,this.wrapContainer.style.left=`${e.left}px`,this.wrapContainer.style.width=`${e.width}px`,this.wrapContainer.style.height=`${e.height}px`)}async validateValue(e,n,r,i){const{col:l,row:a}=r||{};if(!o.isValid(l)||!o.isValid(a))return!0;const s=i.getBodyColumnDefine(l,a),{editConfig:u}=s||{};if("function"==typeof u?.validateValue){const o=await u.validateValue({col:l,row:a,value:e,oldValue:n,table:i});if(!1===o){const e=i.getVisibleCellRangeRelativeRect({col:l,row:a});return i.showTooltip(l,a,{content:u.invalidPrompt||"invalid",referencePosition:{rect:e,placement:t.TYPES.Placement.top},style:{bgColor:"red",color:"white",arrowMark:!0},disappearDelay:1e3}),!1}return o}return!0}onEnd(){this.wrapContainer&&this.tableContainer&&(n.render(null,this.wrapContainer),this.tableContainer.removeChild(this.wrapContainer)),this.wrapContainer=null,this.tableContainer=null}isEditorElement(e){return this.wrapContainer?.contains(e)||this.isClickEditorElement(e)}isClickEditorElement(e){for(;e;){if(e.classList&&e.classList.contains("table-editor-element"))return!0;e=e.parentNode}return!1}}const h="dynamic-render-editor";function C(e,t){const{editor:n}=e||{},r=m(e);return!(!o.isValid(r)||n!==h)&&("function"==typeof t?(e.getEditCustomNode=t,!0):"function"==typeof e.getEditCustomNode)}function m(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}function y(e,n){let o=t.register.editor(h);return!o&&e&&(o=new p(n),t.register.editor(h,o)),o}function f(e){const t={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:{},tooltip:{},menu:{}},n={PivotColumnDimension:"columns",PivotColumnHeaderTitle:"columnHeaderTitle",PivotRowDimension:"rows",PivotRowHeaderTitle:"rowHeaderTitle",PivotCorner:"corner",PivotIndicator:"indicators",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=s(e.props);const o=e.type?.symbol||e.type?.name,r=n[o];r&&(Array.isArray(t[r])?e.props.hasOwnProperty("objectHandler")?t[r].push(e.props.objectHandler):t[r].push(e.props):t[r]=e.props)})),t}function g(e,t){return{...e,columns:t.columns&&t.columns.length?t.columns:e.columns,columnHeaderTitle:t.columnHeaderTitle&&t.columnHeaderTitle.length?t.columnHeaderTitle:e.columnHeaderTitle,rows:t.rows&&t.rows.length?t.rows:e.rows,rowHeaderTitle:t.rowHeaderTitle&&t.rowHeaderTitle.length?t.rowHeaderTitle:e.rowHeaderTitle,indicators:t.indicators&&t.indicators.length?t.indicators:e.indicators,corner:Object.keys(e.corner||{}).length?e.corner:t.corner,tooltip:Object.keys(t.tooltip||{}).length?t.tooltip:e.tooltip,menu:Object.keys(t.menu||{}).length?t.menu:e.menu}}const E={...t.ListTable.EVENT_TYPE,...t.PivotTable.EVENT_TYPE,...t.PivotChart.EVENT_TYPE},v={onClickCell:E.CLICK_CELL,onDblClickCell:E.DBLCLICK_CELL,onMouseDownCell:E.MOUSEDOWN_CELL,onMouseUpCell:E.MOUSEUP_CELL,onSelectedCell:E.SELECTED_CELL,onKeyDown:E.KEYDOWN,onMouseEnterTable:E.MOUSEENTER_TABLE,onMouseLeaveTable:E.MOUSELEAVE_TABLE,onMouseDownTable:E.MOUSEDOWN_TABLE,onMouseMoveCell:E.MOUSEMOVE_CELL,onMouseEnterCell:E.MOUSEENTER_CELL,onMouseLeaveCell:E.MOUSELEAVE_CELL,onContextMenuCell:E.CONTEXTMENU_CELL,onResizeColumn:E.RESIZE_COLUMN,onResizeColumnEnd:E.RESIZE_COLUMN_END,onChangeHeaderPosition:E.CHANGE_HEADER_POSITION,onChangeHeaderPositionStart:E.CHANGE_HEADER_POSITION_START,onChangeHeaderPositionFail:E.CHANGE_HEADER_POSITION_FAIL,onSortClick:E.SORT_CLICK,onFreezeClick:E.FREEZE_CLICK,onScroll:E.SCROLL,onDropdownMenuClick:E.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:E.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:E.DRAG_SELECT_END,onDropdownIconClick:E.DROPDOWN_ICON_CLICK,onDropdownMenuClear:E.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:E.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:E.SHOW_MENU,onHideMenu:E.HIDE_MENU,onIconClick:E.ICON_CLICK,onLegendItemClick:E.LEGEND_ITEM_CLICK,onLegendItemHover:E.LEGEND_ITEM_HOVER,onLegendItemUnHover:E.LEGEND_ITEM_UNHOVER,onLegendChange:E.LEGEND_CHANGE,onMouseEnterAxis:E.MOUSEENTER_AXIS,onMouseLeaveAxis:E.MOUSELEAVE_AXIS,onCheckboxStateChange:E.CHECKBOX_STATE_CHANGE,onRadioStateChange:E.RADIO_STATE_CHANGE,onAfterRender:E.AFTER_RENDER,onInitialized:E.INITIALIZED,onPivotSortClick:E.PIVOT_SORT_CLICK,onDrillMenuClick:E.DRILLMENU_CLICK,onVChartEventType:E.VCHART_EVENT_TYPE,onChangeCellValue:E.CHANGE_CELL_VALUE,onMousedownFillHandle:E.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:E.DRAG_FILL_HANDLE_END,onDblclickFillHandle:E.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:E.SCROLL_VERTICAL_END,onScrollHorizontalEnd:E.SCROLL_HORIZONTAL_END,onChangCellValue:E.CHANGE_CELL_VALUE},b=Object.keys(v);function w(e,t){const r=n.getCurrentInstance(),i=n.computed((()=>{const t=e.options?.columns;return o.isArray(t)?t.filter((e=>!!o.isObject(e)&&!!C(e))):[]}));function l(){return t.value?.id}n.watchEffect((()=>{!function(){const e=l();if(!o.isValid(e))return;let t=y();t?t.removeNode(e):i.value.length>0&&(t=y(!0,r?.appContext));i.value.forEach((n=>{const{getEditCustomNode:o}=n,r=m(n);t.registerNode(e,r,o),delete n.editCustomNode}))}()})),n.onBeforeUnmount((()=>{!function(){const e=l();if(!o.isValid(e))return;const t=y();t?.release(e)}()}))}class T extends r.HtmlAttributePlugin{renderQueue=new Set;isRendering=!1;currentContext;constructor(e){super(),this.currentContext=e}renderGraphicHTML(e){this.checkNeedRender(e)&&(this.renderQueue.add(e),this.scheduleRender())}scheduleRender(){this.isRendering||(this.isRendering=!0,requestAnimationFrame((()=>{this.renderQueue.forEach((e=>{try{this.doRenderGraphic(e)}catch(t){const{id:n}=this.getGraphicOptions(e)||{};this.removeElement(n,!0)}})),this.renderQueue.clear(),this.isRendering=!1})))}doRenderGraphic(e){const{id:t,options:o}=this.getGraphicOptions(e);if(!t)return;const r=e.stage,{element:i,container:l}=o,a=l?function(e){const{col:t,row:n,stage:o}=L(e);let r=e.attribute.vue?.container;const{table:i}=o;r===i.bodyDomContainer?t<i.frozenColCount&&n>=i.rowCount-i.bottomFrozenRowCount?r=i.bottomFrozenBodyDomContainer:t>=i.colCount-i.rightFrozenColCount&&n>=i.rowCount-i.bottomFrozenRowCount?r=i.rightFrozenBottomDomContainer:n>=i.rowCount-i.bottomFrozenRowCount?r=i.bottomFrozenBodyDomContainer:t<i.frozenColCount?r=i.frozenBodyDomContainer:t>=i.colCount-i.rightFrozenColCount&&(r=i.rightFrozenBodyDomContainer):r===i.headerDomContainer&&(t<i.frozenColCount?r=i.frozenHeaderDomContainer:t>=i.colCount-i.rightFrozenColCount&&(r=i.rightFrozenHeaderDomContainer));return r}(e):l;let s=this.htmlMap?.[t];if(s&&a&&a!==s.container&&(this.removeElement(t),s=null),this.checkToPassAppContext(i),s&&this.checkDom(s.wrapContainer))n.render(i,s.wrapContainer);else{const{wrapContainer:l,nativeContainer:u}=this.getWrapContainer(r,a,{id:t,options:o});if(l){const o=document.getElementById(t),r=`${this.renderId}`;o&&o.getAttribute("data-vue-renderId")!==r&&(n.render(null,o),o.remove(),this.removeWrapContainerEventListener(o)),l.id=t,l.setAttribute("data-vue-renderId",r),n.render(i,l),s={wrapContainer:l,nativeContainer:u,container:a,renderId:this.renderId,graphic:e,isInViewport:!0,lastPosition:null,lastStyle:{}},this.htmlMap[t]=s}}s&&(this.updateStyleOfWrapContainer(e,r,s.wrapContainer,s.nativeContainer),s.renderId=this.renderId)}getGraphicOptions(e){const{vue:t}=e?.attribute||{};if(!t)return null;return{id:`vue_${o.isNil(t.id)?e.id??e._uid:t.id}`,options:t}}checkToPassAppContext(e){if(this.currentContext)try{e.appContext=this.currentContext}catch(e){}}checkNeedRender(e){const{id:t,options:n}=this.getGraphicOptions(e)||{};if(!t)return!1;if(!e.stage)return!1;const{element:o}=n;if(!o)return!1;return this.checkInViewport(e)}checkInViewport(e){const{stage:t,globalAABBBounds:n}=e;if(!t)return!1;const o=100,{AABBBounds:r}=t,i=r.x1-o,l=r.x2+o,a=r.y1-o,s=r.y2+o;return n.x1<l&&n.x2>i&&n.y1<s&&n.y2>a}checkDom(e){return!!e&&document.contains(e)}removeAllDom(e){this.htmlMap&&(Object.keys(this.htmlMap).forEach((e=>{this.removeElement(e,!0)})),this.htmlMap=null)}removeElement(e,t){const o=this.htmlMap?.[e];if(!o)return;const{wrapContainer:r}=o;r&&(n.render(null,r),t?(this.checkDom(r)&&super.removeElement(e),delete this.htmlMap[e]):(r.remove(),o.isInViewport=!1),this.removeWrapContainerEventListener(r))}getWrapContainer(e,t,n){let o;o=t?"string"==typeof t?r.application.global.getElementById(t):t:e.window.getContainer();const{id:i}=n||{},l=this.htmlMap?.[i];if(l&&!l.isInViewport){const{wrapContainer:e}=l;return this.checkDom(e)||o.appendChild(e),{wrapContainer:e,nativeContainer:o}}return{wrapContainer:r.application.global.createDom({tagName:"div",parent:o}),nativeContainer:o}}updateStyleOfWrapContainer(e,t,n,i){const{attribute:l,type:a}=e,{vue:s,width:u,height:c,visible:d,display:p,...h}=l||{},{x:C,y:m}=this.calculatePosition(e,s.anchorType),{left:y,top:f}=this.calculateOffset(t,i,C,m),{id:g}=this.getGraphicOptions(e)||{},E=g?this.htmlMap[g]:null;if(!E)return;if(!(!E.lastPosition||E.lastPosition.x!==y||E.lastPosition.y!==f))return;const{pointerEvents:v,penetrateEventList:b=["wheel"]}=s,w=this.parseDefaultStyleFromGraphic(e),T=this.convertCellStyle(e);Object.assign(w,{overflow:"hidden",...T||{},...h||{},transform:`translate(${y}px, ${f}px)`,boxSizing:"border-box",display:!1!==d?p||"block":"none",pointerEvents:!0===v?"all":v||"none",position:"absolute"}),"none"!==w.pointerEvents&&(this.removeWrapContainerEventListener(n),o.uniqArray(b).forEach((e=>{"wheel"===e&&(n.addEventListener("wheel",this.onWheel),n.addEventListener("wheel",(e=>e.preventDefault()),!0))}))),"text"===a&&"position"===s.anchorType&&Object.assign(w,this.getTransformOfText(e)),this.applyUserStyles(s,w,{offsetX:y,offsetTop:f,graphic:e,wrapContainer:n});!o.isEqual(E.lastStyle,w)&&(r.application.global.updateDom(n,{width:u,height:c,style:w}),E.lastStyle=w)}convertCellStyle(e){const{col:t,row:n,stage:r}=L(e),i=r?.table?.getCellStyle(t,n);if(!o.isObject(i))return;const{lineHeight:l,padding:a,...s}=i;return{...s,padding:o.isArray(a)?a.map((e=>`${e}px`)).join(" "):a}}calculatePosition(e,t){const n=e.globalAABBBounds;if("position"===t||n.empty()){const t=e.globalTransMatrix;return{x:t.e,y:t.f}}return o.calculateAnchorOfBounds(n,t||"top-left")}calculateOffset(e,t,n,o){const i=r.application.global.getElementTopLeft(t,!1),l=e.window.getTopLeft(!1);return{left:n+l.left-i.left,top:o+l.top-i.top}}applyUserStyles(e,t,n){if(o.isFunction(e.style)){const o=e.style({top:n.offsetTop,left:n.offsetX,width:n.graphic.globalAABBBounds.width(),height:n.graphic.globalAABBBounds.height()},n.graphic,n.wrapContainer);Object.assign(t,o)}else o.isObject(e.style)?Object.assign(t,e.style):o.isString(e.style)&&Object.assign(t,o.styleStringToObject(e.style))}}function L(e){for(;e?.parent;){if("custom-container"===e.name)return e;e=e.parent}return{col:-1,row:-1,stage:null}}var S=n.defineComponent({__name:"base-table",props:{type:{type:String,required:!1},options:{type:null,required:!1},records:{type:Array,required:!1},width:{type:[Number,String],required:!1,default:"100%"},height:{type:[Number,String],required:!1,default:"100%"},onReady:{type:Function,required:!1},onError:{type:Function,required:!1},keepColumnWidthChange:{type:Boolean,required:!1},onClickCell:{type:null,required:!1},onDblClickCell:{type:null,required:!1},onMouseDownCell:{type:null,required:!1},onMouseUpCell:{type:null,required:!1},onSelectedCell:{type:null,required:!1},onKeyDown:{type:null,required:!1},onMouseEnterTable:{type:null,required:!1},onMouseLeaveTable:{type:null,required:!1},onMouseDownTable:{type:null,required:!1},onMouseMoveCell:{type:null,required:!1},onMouseEnterCell:{type:null,required:!1},onMouseLeaveCell:{type:null,required:!1},onContextMenuCell:{type:null,required:!1},onResizeColumn:{type:null,required:!1},onResizeColumnEnd:{type:null,required:!1},onChangeHeaderPosition:{type:null,required:!1},onChangeHeaderPositionStart:{type:null,required:!1},onChangeHeaderPositionFail:{type:null,required:!1},onSortClick:{type:null,required:!1},onFreezeClick:{type:null,required:!1},onScroll:{type:null,required:!1},onDropdownMenuClick:{type:null,required:!1},onMouseOverChartSymbol:{type:null,required:!1},onDragSelectEnd:{type:null,required:!1},onDropdownIconClick:{type:null,required:!1},onDropdownMenuClear:{type:null,required:!1},onTreeHierarchyStateChange:{type:null,required:!1},onShowMenu:{type:null,required:!1},onHideMenu:{type:null,required:!1},onIconClick:{type:null,required:!1},onLegendItemClick:{type:null,required:!1},onLegendItemHover:{type:null,required:!1},onLegendItemUnHover:{type:null,required:!1},onLegendChange:{type:null,required:!1},onMouseEnterAxis:{type:null,required:!1},onMouseLeaveAxis:{type:null,required:!1},onCheckboxStateChange:{type:null,required:!1},onRadioStateChange:{type:null,required:!1},onAfterRender:{type:null,required:!1},onInitialized:{type:null,required:!1},onPivotSortClick:{type:null,required:!1},onDrillMenuClick:{type:null,required:!1},onVChartEventType:{type:null,required:!1},onChangeCellValue:{type:null,required:!1},onMousedownFillHandle:{type:null,required:!1},onDragFillHandleEnd:{type:null,required:!1},onDblclickFillHandle:{type:null,required:!1},onScrollVerticalEnd:{type:null,required:!1},onScrollHorizontalEnd:{type:null,required:!1}},emits:b,setup(e,{expose:o,emit:r}){const i=e,l=n.ref(null),a=n.shallowRef(null),s=n.ref(new Map),u=n.ref([]),c=n.ref([]);w(i,a),function(e,t){const o=n.getCurrentInstance();n.watchEffect((()=>{e?.options?.customConfig?.createReactContainer&&t.value&&t.value.scenegraph.stage.pluginService.register(new T(o?.appContext))}))}(i,a),o({vTableInstance:a});const d=n.computed((()=>"number"==typeof i.width?`${i.width}px`:i.width)),p=n.computed((()=>"number"==typeof i.height?`${i.height}px`:i.height)),h=r,C=(e,t)=>{const n=new e(l.value,t);a.value=n,s.value.clear(),u.value=[],c.value=[],n.on("resize_column_end",(e=>{if(!i.keepColumnWidthChange)return;const{col:t,colWidths:o}=e,r=o[t];if(n.isPivotTable()){const e=n.getCellHeaderPaths(t,n.columnHeaderLevelCount);let o=null;o="rowHeader"===e.cellLocation?e.rowHeaderPaths:e.colHeaderPaths;let i=!1;for(let e=0;e<u.value.length;e++){const t=u.value[e];JSON.stringify(t.dimensions)===JSON.stringify(o)&&(t.width=r,i=!0)}i||u.value.push({dimensions:o,width:r})}else{const e=n.getBodyColumnDefine(t,0);e?.key&&s.value.set(e.key,r)}}))},m=()=>{if(!l.value)return;a.value&&a.value.release();const e=()=>void 0!==i.records&&null!==i.records&&i.records.length>0?i.records:i.options.records;try{switch(i.type){case"list":C(t.ListTable,{...i.options,records:e()});break;case"pivot":C(t.PivotTable,{...i.options,records:e()});break;case"chart":C(t.PivotChart,{...i.options,records:e()})}n=a.value,b.forEach((e=>{n.on(v[e],(t=>{h(e,t)}))})),i.onReady?.(a.value,!0)}catch(e){i.onError?.(e)}var n},y=e=>{if(a.value)try{if(i.keepColumnWidthChange){const t=function(e,t,n){if(n.isPivotTable())return t;const o=[];return e.forEach(((e,t)=>{o.push({key:t,width:e})})),o}(s.value,u.value,a.value);e={...e,columnWidthConfig:t,columnWidthConfigForRowHeader:t}}switch(i.type){case"list":a.value instanceof t.ListTable&&a.value.updateOption(e);break;case"pivot":a.value instanceof t.PivotTable&&a.value.updateOption(e);break;case"chart":a.value instanceof t.PivotChart&&a.value.updateOption(e)}}catch(e){i.onError?.(e)}};return n.onMounted(m),n.onBeforeUnmount((()=>{a.value?.release()})),n.watch((()=>i.options),((e,t)=>{a.value?y(e):m()})),n.watch((()=>i.records),((e,t)=>{a.value?y({...i.options,records:e}):m()}),{deep:!0}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:l,style:n.normalizeStyle([{width:d.value,height:p.value},{position:"relative"}])},null,4))}}),O=n.defineComponent({__name:"list-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.ref(null),i=n.useSlots(),l=n.computed((()=>{const e=function(e){const t={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=s(e.props);const o=e.type?.symbol||e.type?.name,r=n[o];r&&("columns"===r&&e.children&&(e.children.customLayout&&(e.props.customLayout=d(e.children)),e.children.headerCustomLayout&&(e.props.headerCustomLayout=d(e.children,!0)),C(e.props,e.children.edit)),Array.isArray(t[r])?t[r].push(e.props):t[r]=e.props)})),t}(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"list",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),M=n.defineComponent({__name:"pivot-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.shallowRef(null),i=n.useSlots(),l=n.computed((()=>{const e=f(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"pivot",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),_=n.defineComponent({__name:"pivot-chart",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:t}){const o=e,r=n.shallowRef(null),i=n.useSlots(),l=n.computed((()=>{const e=f(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(S,n.mergeProps({type:"chart",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}});function D(e){return null}function N(e){return null}function I(e){return null}function R(e){return null}function P(e){return null}function A(e){return null}function H(e){return null}function k(e){return null}function q(e){return null}function V(){return null}function x(){return null}function B(){return null}function F(e){return null}function U(e){return null}function j(e){return null}D.symbol="ListColumn",N.symbol="PivotColumnDimension",I.symbol="PivotRowDimension",R.symbol="PivotColumnHeaderTitle",P.symbol="PivotRowHeaderTitle",A.symbol="PivotIndicator",H.symbol="PivotCorner",k.symbol="Menu",q.symbol="Tooltip",V.symbol="Group",x.symbol="Image",B.symbol="Text",F.symbol="Tag",U.symbol="Radio",j.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return t.register}}),e.CheckBox=j,e.Group=V,e.Image=x,e.ListColumn=D,e.ListTable=O,e.Menu=k,e.PivotChart=_,e.PivotColumnDimension=N,e.PivotColumnHeaderTitle=R,e.PivotCorner=H,e.PivotIndicator=A,e.PivotRowDimension=I,e.PivotRowHeaderTitle=P,e.PivotTable=M,e.Radio=U,e.Tag=F,e.Text=B,e.Tooltip=q,e.registerChartModule=(e,t)=>{l.register.chartModule(e,t)},e.version="1.17.3-alpha.11"}));

package/es/components/custom/vtable-vue-attribute-plugin.d.ts

@@ -1,5 +1,6 @@
 import type { IGraphic, IPlugin, IStage } from '@visactor/vtable/es/vrender';
 import { HtmlAttributePlugin } from '@visactor/vtable/es/vrender';
+import type { VNode } from 'vue';
 export declare class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPlugin {
     htmlMap: Record<string, {
         wrapContainer: HTMLElement;
@@ -16,10 +17,13 @@ export declare class VTableVueAttributePlugin extends HtmlAttributePlugin implem
     }>;
     private renderQueue;
     private isRendering;
+    currentContext?: any;
+    constructor(currentContext?: any);
     renderGraphicHTML(graphic: IGraphic): void;
     private scheduleRender;
     doRenderGraphic(graphic: IGraphic): void;
     private getGraphicOptions;
+    checkToPassAppContext(vnode: VNode): void;
     checkNeedRender(graphic: IGraphic): boolean;
     checkInViewport(graphic: IGraphic): boolean;
     checkDom(dom: HTMLElement): boolean;

package/es/components/custom/vtable-vue-attribute-plugin.js

@@ -4,10 +4,11 @@ import { isNil, uniqArray, isEqual, isObject, isArray, calculateAnchorOfBounds,
 import { render } from 'vue';
 
 class VTableVueAttributePlugin extends HtmlAttributePlugin {
-    constructor() {
-        super(...arguments);
+    constructor(currentContext) {
+        super();
         this.renderQueue = new Set();
         this.isRendering = false;
+        this.currentContext = currentContext;
     }
     renderGraphicHTML(graphic) {
         if (!this.checkNeedRender(graphic)) {
@@ -38,6 +39,9 @@ class VTableVueAttributePlugin extends HtmlAttributePlugin {
     doRenderGraphic(graphic) {
         var _a;
         const { id, options } = this.getGraphicOptions(graphic);
+        if (!id) {
+            return;
+        }
         const stage = graphic.stage;
         const { element, container: expectedContainer } = options;
         const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
@@ -46,9 +50,19 @@ class VTableVueAttributePlugin extends HtmlAttributePlugin {
             this.removeElement(id);
             targetMap = null;
         }
+        this.checkToPassAppContext(element);
         if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
             const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options });
             if (wrapContainer) {
+                const historyWrapContainer = document.getElementById(id);
+                const dataRenderId = `${this.renderId}`;
+                if (historyWrapContainer && historyWrapContainer.getAttribute('data-vue-renderId') !== dataRenderId) {
+                    render(null, historyWrapContainer);
+                    historyWrapContainer.remove();
+                    this.removeWrapContainerEventListener(historyWrapContainer);
+                }
+                wrapContainer.id = id;
+                wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
                 render(element, wrapContainer);
                 targetMap = {
                     wrapContainer,
@@ -73,12 +87,20 @@ class VTableVueAttributePlugin extends HtmlAttributePlugin {
     }
     getGraphicOptions(graphic) {
         var _a;
-        const { vue } = graphic.attribute;
+        const { vue } = (graphic === null || graphic === void 0 ? void 0 : graphic.attribute) || {};
         if (!vue) {
             return null;
         }
-        const id = isNil(vue.id) ? `${(_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid}_vue` : vue.id;
-        return { id, options: vue };
+        const id = isNil(vue.id) ? (_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid : vue.id;
+        return { id: `vue_${id}`, options: vue };
+    }
+    checkToPassAppContext(vnode) {
+        if (this.currentContext) {
+            try {
+                vnode.appContext = this.currentContext;
+            }
+            catch (error) { }
+        }
     }
     checkNeedRender(graphic) {
         const { id, options } = this.getGraphicOptions(graphic) || {};
@@ -188,7 +210,7 @@ class VTableVueAttributePlugin extends HtmlAttributePlugin {
         if (!positionChanged) {
             return;
         }
-        const { pointerEvents = true, penetrateEventList = ['wheel'] } = options;
+        const { pointerEvents, penetrateEventList = ['wheel'] } = options;
         const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
         const style = this.convertCellStyle(graphic);
         Object.assign(calculateStyle, Object.assign(Object.assign(Object.assign({ overflow: 'hidden' }, (style || {})), (rest || {})), { transform: `translate(${offsetX}px, ${offsetTop}px)`, boxSizing: 'border-box', display: visible !== false ? display || 'block' : 'none', pointerEvents: pointerEvents === true ? 'all' : pointerEvents || 'none', position: 'absolute' }));

package/es/edit/editor.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface DynamicRenderEditorParams {
     row: number;
     col: number;
@@ -23,13 +24,15 @@ export declare class DynamicRenderEditor {
     tableContainer: HTMLElement | null;
     currentValue: string | null;
     nodeMap?: Map<string | number, Map<string | number, (params: DynamicRenderEditorParams) => any>>;
-    constructor();
+    currentContext?: any;
+    constructor(currentContext?: any);
     registerNode(tableId?: string | number, key?: string | number, getNode?: () => (params: DynamicRenderEditorParams) => any): void;
     getNode(tableId?: string | number, key?: string | number): (params: DynamicRenderEditorParams) => any;
     removeNode(tableId: string | number): void;
     release(tableId?: string | number): void;
     onStart(editorContext: any): Promise<void>;
     createElement(editorContext: any): Promise<boolean>;
+    checkToPassAppContext(vnode: VNode): void;
     getColumnKeyField(column: any): any;
     getValue(): string;
     setValue(value: any): void;

package/es/edit/editor.js

@@ -4,7 +4,8 @@ import { isVNode, render } from 'vue';
 import { TYPES } from '@visactor/vtable';
 
 class DynamicRenderEditor {
-    constructor() {
+    constructor(currentContext) {
+        this.currentContext = currentContext;
         this.tableContainer = null;
         this.currentValue = null;
         this.wrapContainer = null;
@@ -79,10 +80,11 @@ class DynamicRenderEditor {
                 value,
                 table,
                 onChange: (value) => this.setValue(value)
-            })) === null || _b === void 0 ? void 0 : _b[0];
+            })) === null || _b === void 0 ? void 0 : _b.find((node) => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
             if (!vnode || !isVNode(vnode)) {
                 return false;
             }
+            this.checkToPassAppContext(vnode);
             const wrapContainer = document.createElement('div');
             wrapContainer.style.position = 'absolute';
             wrapContainer.style.width = '100%';
@@ -99,6 +101,11 @@ class DynamicRenderEditor {
             return true;
         });
     }
+    checkToPassAppContext(vnode) {
+        if (this.currentContext) {
+            vnode.appContext = this.currentContext;
+        }
+    }
     getColumnKeyField(column) {
         const { field, key } = column || {};
         return isValid(key) ? key : field;

package/es/edit/util.d.ts

@@ -1,4 +1,4 @@
 import { DynamicRenderEditor } from './editor';
 export declare function checkRenderEditor(column: any, getEditCustomNode?: any): boolean;
 export declare function getRenderEditorColumnKeyField(column: any): any;
-export declare function getRenderEditor(create?: boolean): DynamicRenderEditor;
+export declare function getRenderEditor(create?: boolean, currentContext?: any): DynamicRenderEditor;

package/es/edit/util.js

@@ -19,10 +19,10 @@ function getRenderEditorColumnKeyField(column) {
     const { field, key } = column || {};
     return isValid(key) ? key : field;
 }
-function getRenderEditor(create) {
+function getRenderEditor(create, currentContext) {
     let renderEditor = register.editor(DYNAMIC_RENDER_EDITOR);
     if (!renderEditor && !!create) {
-        renderEditor = new DynamicRenderEditor();
+        renderEditor = new DynamicRenderEditor(currentContext);
         register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
     }
     return renderEditor;

package/es/hooks/useCellRender.js

@@ -1,7 +1,8 @@
-import { watchEffect } from 'vue';
+import { getCurrentInstance, watchEffect } from 'vue';
 import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attribute-plugin.js';
 
 function useCellRender(props, tableRef) {
+    const instance = getCurrentInstance();
     watchEffect(() => {
         var _a, _b;
         if (!((_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.createReactContainer)) {
@@ -10,7 +11,7 @@ function useCellRender(props, tableRef) {
         if (!tableRef.value) {
             return;
         }
-        tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin());
+        tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin(instance === null || instance === void 0 ? void 0 : instance.appContext));
     });
 }
 

package/es/hooks/useEditorRender.js

@@ -1,10 +1,11 @@
-import { computed, watchEffect, onBeforeUnmount } from 'vue';
+import { getCurrentInstance, computed, watchEffect, onBeforeUnmount } from 'vue';
 import { isArray, isObject, isValid } from '@visactor/vutils';
 import 'tslib';
 import '@visactor/vtable';
 import { checkRenderEditor, getRenderEditor, getRenderEditorColumnKeyField } from '../edit/util.js';
 
 function useEditorRender(props, tableRef) {
+    const instance = getCurrentInstance();
     const validColumns = computed(() => {
         var _a;
         const columns = (_a = props.options) === null || _a === void 0 ? void 0 : _a.columns;
@@ -29,7 +30,7 @@ function useEditorRender(props, tableRef) {
             renderEditor.removeNode(id);
         }
         else if (validColumns.value.length > 0) {
-            renderEditor = getRenderEditor(true);
+            renderEditor = getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
         }
         validColumns.value.forEach(column => {
             const { getEditCustomNode } = column;

package/es/index.d.ts

@@ -2,4 +2,4 @@ import * as VTable from '@visactor/vtable';
 export * from './tables';
 export * from './components';
 export { VTable };
-export declare const version = "1.17.3-alpha.10";
+export declare const version = "1.17.3-alpha.11";

package/es/index.js

@@ -21,6 +21,6 @@ export { default as Tag } from './components/custom/tag.js';
 export { default as Radio } from './components/custom/radio.js';
 export { default as CheckBox } from './components/custom/checkBox.js';
 
-const version = "1.17.3-alpha.10";
+const version = "1.17.3-alpha.11";
 
 export { version };

package/es/utils/customLayoutUtils.js

@@ -32,7 +32,7 @@ function createCustomLayout(children, isHeader, args) {
         const subChildren = resolveChildren(childChildren);
         if (isObject(props === null || props === void 0 ? void 0 : props.vue)) {
             const { element } = props.vue;
-            const targetVNode = element !== null && element !== void 0 ? element : subChildren[0];
+            const targetVNode = element !== null && element !== void 0 ? element : subChildren.find(node => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
             Object.assign(child.props.vue, {
                 element: isVNode(targetVNode) ? targetVNode : null,
                 container: isHeader ? (_a = args === null || args === void 0 ? void 0 : args.table) === null || _a === void 0 ? void 0 : _a.headerDomContainer : (_b = args === null || args === void 0 ? void 0 : args.table) === null || _b === void 0 ? void 0 : _b.bodyDomContainer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vue-vtable",
-  "version": "1.17.3-alpha.10",
+  "version": "1.17.3-alpha.11",
   "description": "The vue version of VTable",
   "keywords": [
     "vue",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@visactor/vtable": "1.17.3-alpha.10",
+    "@visactor/vtable": "1.17.3-alpha.11",
     "@visactor/vutils": "~0.19.1"
   },
   "devDependencies": {
@@ -88,8 +88,8 @@
     "eslint-plugin-vue": "^9.26.0",
     "vue-eslint-parser": "^9.4.2",
     "@internal/bundler": "0.0.1",
-    "@internal/ts-config": "0.0.1",
-    "@internal/eslint-config": "0.0.1"
+    "@internal/eslint-config": "0.0.1",
+    "@internal/ts-config": "0.0.1"
   },
   "scripts": {
     "start": "vite ./demo",