@visactor/vue-vtable 1.10.3 → 1.10.4-alpha.2

package/dist/vue-vtable.js

@@ -23,9 +23,6 @@
 
   var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
 
-  function flattenVNodes(vnodes) {
-      return vnodes.flatMap(vnode => (Array.isArray(vnode.children) ? flattenVNodes(vnode.children) : vnode));
-  }
   function toCamelCase(str) {
       return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
   }
@@ -38,7 +35,12 @@
           }
       }
       return newProps;
-  }
+  }
+
+  function flattenVNodes(vnodes) {
+      return vnodes.flatMap(vnode => (Array.isArray(vnode.children) ? flattenVNodes(vnode.children) : vnode));
+  }
+
   function isEventProp(key, props) {
       return key.startsWith('on') && vutils.isFunction(props[key]);
   }
@@ -99,6 +101,90 @@
           });
       }
       return { rootComponent: createComponent(children) };
+  }
+  function createCustomLayoutHandler(children) {
+      return (args) => {
+          const { table, row, col, rect } = args;
+          const record = table.getCellOriginRecord(col, row);
+          const { height, width } = rect ?? table.getCellRect(col, row);
+          const rootContainer = children.customLayout({ table, row, col, rect, record, height, width })[0];
+          const { rootComponent } = createCustomLayout(rootContainer);
+          return {
+              rootContainer: rootComponent,
+              renderDefault: false
+          };
+      };
+  }
+
+  function extractPivotSlotOptions(vnodes) {
+      const options = {
+          columns: [],
+          columnHeaderTitle: [],
+          rows: [],
+          rowHeaderTitle: [],
+          indicators: [],
+          corner: {},
+          tooltip: {},
+          menu: {}
+      };
+      const typeMapping = {
+          PivotColumnDimension: 'columns',
+          PivotColumnHeaderTitle: 'columnHeaderTitle',
+          PivotRowDimension: 'rows',
+          PivotRowHeaderTitle: 'rowHeaderTitle',
+          PivotCorner: 'corner',
+          PivotIndicator: 'indicators',
+          Tooltip: 'tooltip',
+          Menu: 'menu'
+      };
+      vnodes.forEach(vnode => {
+          vnode.props = convertPropsToCamelCase(vnode.props);
+          const typeName = vnode.type?.symbol || vnode.type?.name;
+          const optionKey = typeMapping[typeName];
+          if (optionKey) {
+              if (Array.isArray(options[optionKey])) {
+                  if (vnode.props.hasOwnProperty('objectHandler')) {
+                      options[optionKey].push(vnode.props.objectHandler);
+                  }
+                  else {
+                      options[optionKey].push(vnode.props);
+                  }
+              }
+              else {
+                  options[optionKey] = vnode.props;
+              }
+          }
+      });
+      return options;
+  }
+  function extractListSlotOptions(vnodes) {
+      const options = {
+          columns: [],
+          tooltip: {},
+          menu: {}
+      };
+      const typeMapping = {
+          ListColumn: 'columns',
+          Tooltip: 'tooltip',
+          Menu: 'menu'
+      };
+      vnodes.forEach(vnode => {
+          vnode.props = convertPropsToCamelCase(vnode.props);
+          const typeName = vnode.type?.symbol || vnode.type?.name;
+          const optionKey = typeMapping[typeName];
+          if (optionKey) {
+              if (optionKey === 'columns' && vnode.children) {
+                  vnode.props.customLayout = createCustomLayoutHandler(vnode.children);
+              }
+              if (Array.isArray(options[optionKey])) {
+                  options[optionKey].push(vnode.props);
+              }
+              else {
+                  options[optionKey] = vnode.props;
+              }
+          }
+      });
+      return options;
   }
 
   const EVENT_TYPE = {
@@ -232,17 +318,20 @@
                   instance.on(TABLE_EVENTS[eventKey], vueEventHandler);
               });
           };
+          const createTableInstance = (Type, options) => {
+              vTableInstance.value = new Type(vTableContainer.value, options);
+          };
           const createVTable = () => {
-              if (!vTableContainer.value)
+              if (!vTableContainer.value) {
                   return;
+              }
               if (vTableInstance.value) {
                   vTableInstance.value.release();
               }
               const getRecords = () => {
-                  return props.records !== undefined && props.records !== null && props.records.length > 0 ? props.records : props.options.records;
-              };
-              const createTableInstance = (Type, options) => {
-                  vTableInstance.value = new Type(vTableContainer.value, options);
+                  return props.records !== undefined && props.records !== null && props.records.length > 0
+                      ? props.records
+                      : props.options.records;
               };
               try {
                   switch (props.type) {
@@ -269,11 +358,13 @@
                   props.onReady?.(vTableInstance.value, true);
               }
               catch (err) {
+                  props.onError?.(err);
               }
           };
           const updateVTable = (newOptions) => {
-              if (!vTableInstance.value)
+              if (!vTableInstance.value) {
                   return;
+              }
               try {
                   switch (props.type) {
                       case 'list':
@@ -299,14 +390,14 @@
           };
           vue.onMounted(createVTable);
           vue.onBeforeUnmount(() => vTableInstance.value?.release());
-          vue.watch(() => props.options, (newOptions) => {
+          vue.watch(() => props.options, newOptions => {
               if (vTableInstance.value) {
                   updateVTable(newOptions);
               }
               else {
                   createVTable();
               }
-          }, { deep: true });
+          });
           vue.watch(() => props.records, (newRecords, oldRecords) => {
               if (vTableInstance.value) {
                   updateVTable({ ...props.options, records: newRecords });
@@ -339,7 +430,7 @@
           const slots = vue.useSlots();
           const computedOptions = vue.computed(() => {
               const flattenedSlots = flattenVNodes(slots.default?.() || []);
-              const slotOptions = extractSlotOptions(flattenedSlots);
+              const slotOptions = extractListSlotOptions(flattenedSlots);
               return {
                   ...props.options,
                   columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns,
@@ -347,48 +438,6 @@
                   menu: slotOptions.menu || props.options.menu,
               };
           });
-          function extractSlotOptions(vnodes) {
-              const options = {
-                  columns: [],
-                  tooltip: {},
-                  menu: {},
-              };
-              const typeMapping = {
-                  ListColumn: 'columns',
-                  Tooltip: 'tooltip',
-                  Menu: 'menu',
-              };
-              vnodes.forEach(vnode => {
-                  vnode.props = convertPropsToCamelCase(vnode.props);
-                  const typeName = vnode.type?.symbol || vnode.type?.name;
-                  const optionKey = typeMapping[typeName];
-                  if (optionKey) {
-                      if (optionKey === 'columns' && vnode.children) {
-                          vnode.props.customLayout = createCustomLayoutHandler(vnode.children);
-                      }
-                      if (Array.isArray(options[optionKey])) {
-                          options[optionKey].push(vnode.props);
-                      }
-                      else {
-                          options[optionKey] = vnode.props;
-                      }
-                  }
-              });
-              return options;
-          }
-          function createCustomLayoutHandler(children) {
-              return (args) => {
-                  const { table, row, col, rect } = args;
-                  const record = table.getCellOriginRecord(col, row);
-                  const { height, width } = rect ?? table.getCellRect(col, row);
-                  const rootContainer = children.customLayout({ table, row, col, rect, record, height, width })[0];
-                  const { rootComponent } = createCustomLayout(rootContainer);
-                  return {
-                      rootContainer: rootComponent,
-                      renderDefault: false,
-                  };
-              };
-          }
           __expose({
               vTableInstance: vue.computed(() => baseTableRef.value?.vTableInstance || null),
           });
@@ -423,49 +472,17 @@
           const slots = vue.useSlots();
           const computedOptions = vue.computed(() => {
               const flattenedSlots = flattenVNodes(slots.default?.() || []);
-              const options = {
-                  columns: [],
-                  columnHeaderTitle: [],
-                  rows: [],
-                  rowHeaderTitle: [],
-                  indicators: [],
-                  corner: Object,
-                  tooltip: Object,
-                  menu: Object,
-              };
-              const typeMapping = {
-                  'PivotColumnDimension': 'columns',
-                  'PivotColumnHeaderTitle': 'columnHeaderTitle',
-                  'PivotRowDimension': 'rows',
-                  'PivotRowHeaderTitle': 'rowHeaderTitle',
-                  'PivotCorner': 'corner',
-                  'PivotIndicator': 'indicators',
-                  'Tooltip': 'tooltip',
-                  'Menu': 'menu',
-              };
-              flattenedSlots.forEach(vnode => {
-                  vnode.props = convertPropsToCamelCase(vnode.props);
-                  const typeName = vnode.type?.symbol || vnode.type?.name;
-                  const optionKey = typeMapping[typeName];
-                  if (optionKey) {
-                      if (Array.isArray(options[optionKey])) {
-                          options[optionKey].push(vnode.props);
-                      }
-                      else {
-                          options[optionKey] = vnode.props;
-                      }
-                  }
-              });
+              const slotOptions = extractPivotSlotOptions(flattenedSlots);
               return {
                   ...props.options,
-                  columns: options.columns.length ? options.columns : props.options.columns,
-                  columnHeaderTitle: options.columnHeaderTitle.length ? options.columnHeaderTitle : props.options.columnHeaderTitle,
-                  rows: options.rows.length ? options.rows : props.options.rows,
-                  rowHeaderTitle: options.rowHeaderTitle.length ? options.rowHeaderTitle : props.options.rowHeaderTitle,
-                  indicators: options.indicators.length ? options.indicators : props.options.indicators,
-                  corner: props.options.corner || options.corner,
-                  tooltip: props.options.tooltip || options.tooltip,
-                  menu: props.options.menu || options.menu,
+                  columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns,
+                  columnHeaderTitle: slotOptions.columnHeaderTitle.length ? slotOptions.columnHeaderTitle : props.options.columnHeaderTitle,
+                  rows: slotOptions.rows.length ? slotOptions.rows : props.options.rows,
+                  rowHeaderTitle: slotOptions.rowHeaderTitle.length ? slotOptions.rowHeaderTitle : props.options.rowHeaderTitle,
+                  indicators: slotOptions.indicators.length ? slotOptions.indicators : props.options.indicators,
+                  corner: props.options.corner || slotOptions.corner,
+                  tooltip: props.options.tooltip || slotOptions.tooltip,
+                  menu: props.options.menu || slotOptions.menu,
               };
           });
           __expose({ vTableInstance: vue.computed(() => baseTableRef.value?.vTableInstance || null) });
@@ -500,54 +517,17 @@
           const slots = vue.useSlots();
           const computedOptions = vue.computed(() => {
               const flattenedSlots = flattenVNodes(slots.default?.() || []);
-              const options = {
-                  columns: [],
-                  columnHeaderTitle: [],
-                  rows: [],
-                  rowHeaderTitle: [],
-                  indicators: [],
-                  corner: Object,
-                  tooltip: Object,
-                  menu: Object,
-              };
-              const typeMapping = {
-                  'PivotColumnDimension': 'columns',
-                  'PivotColumnHeaderTitle': 'columnHeaderTitle',
-                  'PivotRowDimension': 'rows',
-                  'PivotRowHeaderTitle': 'rowHeaderTitle',
-                  'PivotCorner': 'corner',
-                  'PivotIndicator': 'indicators',
-                  'Tooltip': 'tooltip',
-                  'Menu': 'menu',
-              };
-              flattenedSlots.forEach(vnode => {
-                  vnode.props = convertPropsToCamelCase(vnode.props);
-                  const typeName = vnode.type?.symbol || vnode.type?.name;
-                  const optionKey = typeMapping[typeName];
-                  if (optionKey) {
-                      if (Array.isArray(options[optionKey])) {
-                          if (vnode.props.hasOwnProperty('objectHandler')) {
-                              options[optionKey].push(vnode.props.objectHandler);
-                          }
-                          else {
-                              options[optionKey].push(vnode.props);
-                          }
-                      }
-                      else {
-                          options[optionKey] = vnode.props;
-                      }
-                  }
-              });
+              const slotOptions = extractPivotSlotOptions(flattenedSlots);
               return {
                   ...props.options,
-                  columns: options.columns.length ? options.columns : props.options.columns,
-                  columnHeaderTitle: options.columnHeaderTitle.length ? options.columnHeaderTitle : props.options.columnHeaderTitle,
-                  rows: options.rows.length ? options.rows : props.options.rows,
-                  rowHeaderTitle: options.rowHeaderTitle.length ? options.rowHeaderTitle : props.options.rowHeaderTitle,
-                  indicators: options.indicators.length ? options.indicators : props.options.indicators,
-                  corner: options.corner || props.options.corner,
-                  tooltip: options.tooltip || props.options.tooltip,
-                  menu: options.menu || props.options.menu,
+                  columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns,
+                  columnHeaderTitle: slotOptions.columnHeaderTitle.length ? slotOptions.columnHeaderTitle : props.options.columnHeaderTitle,
+                  rows: slotOptions.rows.length ? slotOptions.rows : props.options.rows,
+                  rowHeaderTitle: slotOptions.rowHeaderTitle.length ? slotOptions.rowHeaderTitle : props.options.rowHeaderTitle,
+                  indicators: slotOptions.indicators.length ? slotOptions.indicators : props.options.indicators,
+                  corner: props.options.corner || slotOptions.corner,
+                  tooltip: props.options.tooltip || slotOptions.tooltip,
+                  menu: props.options.menu || slotOptions.menu,
               };
           });
           __expose({ vTableInstance: vue.computed(() => baseTableRef.value?.vTableInstance || null) });
@@ -647,7 +627,7 @@
   }
   CheckBox.symbol = 'CheckBox';
 
-  const version = "1.10.3";
+  const version = "1.10.4-alpha.2";
 
   exports.VTable = VTable__namespace;
   Object.defineProperty(exports, 'register', {

package/dist/vue-vtable.min.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.vue,e.vutils)}(this,(function(e,o,n,t){"use strict";function r(e){var o=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),o.default=e,Object.freeze(o)}var l=r(o);function i(e){return e.flatMap((e=>Array.isArray(e.children)?i(e.children):e))}function u(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function s(e){const o={};for(const n in e)if(e.hasOwnProperty(n)){o[u(n)]=e[n]}return o}function a(e){const o={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(n){if(!n)return null;const{type:r,children:l}=n,i=s(n.props),a=o[r?.symbol||r?.name];if(!a)return null;const c=new a({...i});!function(e,o){Object.keys(o).forEach((n=>{if(function(e,o){return e.startsWith("on")&&t.isFunction(o[e])}(n,o)){let t;t=n.startsWith("on")?n.slice(2).toLowerCase():u(n.slice(2)).toLowerCase(),e.addEventListener(t,o[n])}}))}(c,i);return function(e){return e?.default?.()||e||[]}(l).forEach((o=>{const n=e(o);n?c.add(n):o.type===Symbol.for("v-fgt")&&o.children.forEach((o=>{const n=e(o);n&&c.add(n)}))})),c}(e)}}const c={...o.ListTable.EVENT_TYPE,...o.PivotTable.EVENT_TYPE,...o.PivotChart.EVENT_TYPE},d={onClickCell:c.CLICK_CELL,onDblClickCell:c.DBLCLICK_CELL,onMouseDownCell:c.MOUSEDOWN_CELL,onMouseUpCell:c.MOUSEUP_CELL,onSelectedCell:c.SELECTED_CELL,onKeyDown:c.KEYDOWN,onMouseEnterTable:c.MOUSEENTER_TABLE,onMouseLeaveTable:c.MOUSELEAVE_TABLE,onMouseDownTable:c.MOUSEDOWN_TABLE,onMouseMoveCell:c.MOUSEMOVE_CELL,onMouseEnterCell:c.MOUSEENTER_CELL,onMouseLeaveCell:c.MOUSELEAVE_CELL,onContextMenuCell:c.CONTEXTMENU_CELL,onResizeColumn:c.RESIZE_COLUMN,onResizeColumnEnd:c.RESIZE_COLUMN_END,onChangeHeaderPosition:c.CHANGE_HEADER_POSITION,onSortClick:c.SORT_CLICK,onFreezeClick:c.FREEZE_CLICK,onScroll:c.SCROLL,onDropdownMenuClick:c.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:c.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:c.DRAG_SELECT_END,onDropdownIconClick:c.DROPDOWN_ICON_CLICK,onDropdownMenuClear:c.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:c.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:c.SHOW_MENU,onHideMenu:c.HIDE_MENU,onIconClick:c.ICON_CLICK,onLegendItemClick:c.LEGEND_ITEM_CLICK,onLegendItemHover:c.LEGEND_ITEM_HOVER,onLegendItemUnHover:c.LEGEND_ITEM_UNHOVER,onLegendChange:c.LEGEND_CHANGE,onMouseEnterAxis:c.MOUSEENTER_AXIS,onMouseLeaveAxis:c.MOUSELEAVE_AXIS,onCheckboxStateChange:c.CHECKBOX_STATE_CHANGE,onRadioStateChange:c.RADIO_STATE_CHANGE,onAfterRender:c.AFTER_RENDER,onInitialized:c.INITIALIZED,onPivotSortClick:c.PIVOT_SORT_CLICK,onDrillMenuClick:c.DRILLMENU_CLICK,onVChartEventType:c.VCHART_EVENT_TYPE,onChangCellValue:c.CHANGE_CELL_VALUE,onMousedownFillHandle:c.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:c.DRAG_FILL_HANDLE_END,onDblclickFillHandle:c.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:c.SCROLL_VERTICAL_END,onScrollHorizontalEnd:c.SCROLL_HORIZONTAL_END},p=Object.keys(d);var C=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},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},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},onChangCellValue:{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:p,setup(e,{expose:t,emit:r}){const l=e,i=n.ref(null),u=n.shallowRef(null);t({vTableInstance:u});const s=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),a=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),c=r,C=()=>{if(!i.value)return;u.value&&u.value.release();const e=()=>void 0!==l.records&&null!==l.records&&l.records.length>0?l.records:l.options.records,n=(e,o)=>{u.value=new e(i.value,o)};try{switch(l.type){case"list":n(o.ListTable,{...l.options,records:e()});break;case"pivot":n(o.PivotTable,{...l.options,records:e()});break;case"chart":n(o.PivotChart,{...l.options,records:e()})}t=u.value,p.forEach((e=>{t.on(d[e],(o=>{c(e,o)}))})),l.onReady?.(u.value,!0)}catch(e){}var t},m=e=>{if(u.value)try{switch(l.type){case"list":u.value instanceof o.ListTable&&u.value.updateOption(e);break;case"pivot":u.value instanceof o.PivotTable&&u.value.updateOption(e);break;case"chart":u.value instanceof o.PivotChart&&u.value.updateOption(e)}}catch(e){l.onError?.(e)}};return n.onMounted(C),n.onBeforeUnmount((()=>u.value?.release())),n.watch((()=>l.options),(e=>{u.value?m(e):C()}),{deep:!0}),n.watch((()=>l.records),((e,o)=>{u.value?m({...l.options,records:e}):C()}),{deep:!0}),(e,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:i,style:n.normalizeStyle([{width:s.value,height:a.value},{position:"relative"}])},null,4))}}),m=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:o}){const t=e,r=n.ref(null),l=n.useSlots(),u=n.computed((()=>{const e=function(e){const o={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=s(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];var l;r&&("columns"===r&&e.children&&(e.props.customLayout=(l=e.children,e=>{const{table:o,row:n,col:t,rect:r}=e,i=o.getCellOriginRecord(t,n),{height:u,width:s}=r??o.getCellRect(t,n),c=l.customLayout({table:o,row:n,col:t,rect:r,record:i,height:u,width:s})[0],{rootComponent:d}=a(c);return{rootContainer:d,renderDefault:!1}})),Array.isArray(o[r])?o[r].push(e.props):o[r]=e.props)})),o}(i(l.default?.()||[]));return{...t.options,columns:e.columns.length?e.columns:t.options.columns,tooltip:e.tooltip||t.options.tooltip,menu:e.menu||t.options.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(C,n.mergeProps({type:"list",options:u.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))}}),y=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:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),u=n.computed((()=>{const e=i(l.default?.()||[]),o={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:Object,tooltip:Object,menu:Object},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 t=e.type?.symbol||e.type?.name,r=n[t];r&&(Array.isArray(o[r])?o[r].push(e.props):o[r]=e.props)})),{...t.options,columns:o.columns.length?o.columns:t.options.columns,columnHeaderTitle:o.columnHeaderTitle.length?o.columnHeaderTitle:t.options.columnHeaderTitle,rows:o.rows.length?o.rows:t.options.rows,rowHeaderTitle:o.rowHeaderTitle.length?o.rowHeaderTitle:t.options.rowHeaderTitle,indicators:o.indicators.length?o.indicators:t.options.indicators,corner:t.options.corner||o.corner,tooltip:t.options.tooltip||o.tooltip,menu:t.options.menu||o.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(C,n.mergeProps({type:"pivot",options:u.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))}}),E=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:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),u=n.computed((()=>{const e=i(l.default?.()||[]),o={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:Object,tooltip:Object,menu:Object},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 t=e.type?.symbol||e.type?.name,r=n[t];r&&(Array.isArray(o[r])?e.props.hasOwnProperty("objectHandler")?o[r].push(e.props.objectHandler):o[r].push(e.props):o[r]=e.props)})),{...t.options,columns:o.columns.length?o.columns:t.options.columns,columnHeaderTitle:o.columnHeaderTitle.length?o.columnHeaderTitle:t.options.columnHeaderTitle,rows:o.rows.length?o.rows:t.options.rows,rowHeaderTitle:o.rowHeaderTitle.length?o.rowHeaderTitle:t.options.rowHeaderTitle,indicators:o.indicators.length?o.indicators:t.options.indicators,corner:o.corner||t.options.corner,tooltip:o.tooltip||t.options.tooltip,menu:o.menu||t.options.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(C,n.mergeProps({type:"chart",options:u.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 h(e){return null}function T(e){return null}function v(e){return null}function b(e){return null}function f(e){return null}function L(e){return null}function g(e){return null}function w(e){return null}function _(e){return null}function H(){return null}function M(){return null}function O(){return null}function S(e){return null}function q(e){return null}function D(e){return null}h.symbol="ListColumn",T.symbol="PivotColumnDimension",v.symbol="PivotRowDimension",b.symbol="PivotColumnHeaderTitle",f.symbol="PivotRowHeaderTitle",L.symbol="PivotIndicator",g.symbol="PivotCorner",w.symbol="Menu",_.symbol="Tooltip",H.symbol="Group",M.symbol="Image",O.symbol="Text",S.symbol="Tag",q.symbol="Radio",D.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return o.register}}),e.CheckBox=D,e.Group=H,e.Image=M,e.ListColumn=h,e.ListTable=m,e.Menu=w,e.PivotChart=E,e.PivotColumnDimension=T,e.PivotColumnHeaderTitle=b,e.PivotCorner=g,e.PivotIndicator=L,e.PivotRowDimension=v,e.PivotRowHeaderTitle=f,e.PivotTable=y,e.Radio=q,e.Tag=S,e.Text=O,e.Tooltip=_,e.registerChartModule=(e,o)=>{l.register.chartModule(e,o)},e.version="1.10.3"}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.vue,e.vutils)}(this,(function(e,o,n,t){"use strict";function r(e){var o=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),o.default=e,Object.freeze(o)}var l=r(o);function i(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function u(e){const o={};for(const n in e)if(e.hasOwnProperty(n)){o[i(n)]=e[n]}return o}function s(e){return e.flatMap((e=>Array.isArray(e.children)?s(e.children):e))}function a(e){const o={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(n){if(!n)return null;const{type:r,children:l}=n,s=u(n.props),a=o[r?.symbol||r?.name];if(!a)return null;const c=new a({...s});!function(e,o){Object.keys(o).forEach((n=>{if(function(e,o){return e.startsWith("on")&&t.isFunction(o[e])}(n,o)){let t;t=n.startsWith("on")?n.slice(2).toLowerCase():i(n.slice(2)).toLowerCase(),e.addEventListener(t,o[n])}}))}(c,s);return function(e){return e?.default?.()||e||[]}(l).forEach((o=>{const n=e(o);n?c.add(n):o.type===Symbol.for("v-fgt")&&o.children.forEach((o=>{const n=e(o);n&&c.add(n)}))})),c}(e)}}function c(e){const o={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=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];r&&(Array.isArray(o[r])?e.props.hasOwnProperty("objectHandler")?o[r].push(e.props.objectHandler):o[r].push(e.props):o[r]=e.props)})),o}function d(e){const o={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];var l;r&&("columns"===r&&e.children&&(e.props.customLayout=(l=e.children,e=>{const{table:o,row:n,col:t,rect:r}=e,i=o.getCellOriginRecord(t,n),{height:u,width:s}=r??o.getCellRect(t,n),c=l.customLayout({table:o,row:n,col:t,rect:r,record:i,height:u,width:s})[0],{rootComponent:d}=a(c);return{rootContainer:d,renderDefault:!1}})),Array.isArray(o[r])?o[r].push(e.props):o[r]=e.props)})),o}const p={...o.ListTable.EVENT_TYPE,...o.PivotTable.EVENT_TYPE,...o.PivotChart.EVENT_TYPE},C={onClickCell:p.CLICK_CELL,onDblClickCell:p.DBLCLICK_CELL,onMouseDownCell:p.MOUSEDOWN_CELL,onMouseUpCell:p.MOUSEUP_CELL,onSelectedCell:p.SELECTED_CELL,onKeyDown:p.KEYDOWN,onMouseEnterTable:p.MOUSEENTER_TABLE,onMouseLeaveTable:p.MOUSELEAVE_TABLE,onMouseDownTable:p.MOUSEDOWN_TABLE,onMouseMoveCell:p.MOUSEMOVE_CELL,onMouseEnterCell:p.MOUSEENTER_CELL,onMouseLeaveCell:p.MOUSELEAVE_CELL,onContextMenuCell:p.CONTEXTMENU_CELL,onResizeColumn:p.RESIZE_COLUMN,onResizeColumnEnd:p.RESIZE_COLUMN_END,onChangeHeaderPosition:p.CHANGE_HEADER_POSITION,onSortClick:p.SORT_CLICK,onFreezeClick:p.FREEZE_CLICK,onScroll:p.SCROLL,onDropdownMenuClick:p.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:p.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:p.DRAG_SELECT_END,onDropdownIconClick:p.DROPDOWN_ICON_CLICK,onDropdownMenuClear:p.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:p.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:p.SHOW_MENU,onHideMenu:p.HIDE_MENU,onIconClick:p.ICON_CLICK,onLegendItemClick:p.LEGEND_ITEM_CLICK,onLegendItemHover:p.LEGEND_ITEM_HOVER,onLegendItemUnHover:p.LEGEND_ITEM_UNHOVER,onLegendChange:p.LEGEND_CHANGE,onMouseEnterAxis:p.MOUSEENTER_AXIS,onMouseLeaveAxis:p.MOUSELEAVE_AXIS,onCheckboxStateChange:p.CHECKBOX_STATE_CHANGE,onRadioStateChange:p.RADIO_STATE_CHANGE,onAfterRender:p.AFTER_RENDER,onInitialized:p.INITIALIZED,onPivotSortClick:p.PIVOT_SORT_CLICK,onDrillMenuClick:p.DRILLMENU_CLICK,onVChartEventType:p.VCHART_EVENT_TYPE,onChangCellValue:p.CHANGE_CELL_VALUE,onMousedownFillHandle:p.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:p.DRAG_FILL_HANDLE_END,onDblclickFillHandle:p.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:p.SCROLL_VERTICAL_END,onScrollHorizontalEnd:p.SCROLL_HORIZONTAL_END},E=Object.keys(C);var m=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},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},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},onChangCellValue:{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:E,setup(e,{expose:t,emit:r}){const l=e,i=n.ref(null),u=n.shallowRef(null);t({vTableInstance:u});const s=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),a=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),c=r,d=(e,o)=>{u.value=new e(i.value,o)},p=()=>{if(!i.value)return;u.value&&u.value.release();const e=()=>void 0!==l.records&&null!==l.records&&l.records.length>0?l.records:l.options.records;try{switch(l.type){case"list":d(o.ListTable,{...l.options,records:e()});break;case"pivot":d(o.PivotTable,{...l.options,records:e()});break;case"chart":d(o.PivotChart,{...l.options,records:e()})}n=u.value,E.forEach((e=>{n.on(C[e],(o=>{c(e,o)}))})),l.onReady?.(u.value,!0)}catch(e){l.onError?.(e)}var n},m=e=>{if(u.value)try{switch(l.type){case"list":u.value instanceof o.ListTable&&u.value.updateOption(e);break;case"pivot":u.value instanceof o.PivotTable&&u.value.updateOption(e);break;case"chart":u.value instanceof o.PivotChart&&u.value.updateOption(e)}}catch(e){l.onError?.(e)}};return n.onMounted(p),n.onBeforeUnmount((()=>u.value?.release())),n.watch((()=>l.options),(e=>{u.value?m(e):p()})),n.watch((()=>l.records),((e,o)=>{u.value?m({...l.options,records:e}):p()}),{deep:!0}),(e,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:i,style:n.normalizeStyle([{width:s.value,height:a.value},{position:"relative"}])},null,4))}}),y=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:o}){const t=e,r=n.ref(null),l=n.useSlots(),i=n.computed((()=>{const e=d(s(l.default?.()||[]));return{...t.options,columns:e.columns.length?e.columns:t.options.columns,tooltip:e.tooltip||t.options.tooltip,menu:e.menu||t.options.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(m,n.mergeProps({type:"list",options:i.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))}}),h=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:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(s(l.default?.()||[]));return{...t.options,columns:e.columns.length?e.columns:t.options.columns,columnHeaderTitle:e.columnHeaderTitle.length?e.columnHeaderTitle:t.options.columnHeaderTitle,rows:e.rows.length?e.rows:t.options.rows,rowHeaderTitle:e.rowHeaderTitle.length?e.rowHeaderTitle:t.options.rowHeaderTitle,indicators:e.indicators.length?e.indicators:t.options.indicators,corner:t.options.corner||e.corner,tooltip:t.options.tooltip||e.tooltip,menu:t.options.menu||e.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(m,n.mergeProps({type:"pivot",options:i.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))}}),T=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:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(s(l.default?.()||[]));return{...t.options,columns:e.columns.length?e.columns:t.options.columns,columnHeaderTitle:e.columnHeaderTitle.length?e.columnHeaderTitle:t.options.columnHeaderTitle,rows:e.rows.length?e.rows:t.options.rows,rowHeaderTitle:e.rowHeaderTitle.length?e.rowHeaderTitle:t.options.rowHeaderTitle,indicators:e.indicators.length?e.indicators:t.options.indicators,corner:t.options.corner||e.corner,tooltip:t.options.tooltip||e.tooltip,menu:t.options.menu||e.menu}}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(m,n.mergeProps({type:"chart",options:i.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 v(e){return null}function f(e){return null}function L(e){return null}function b(e){return null}function g(e){return null}function _(e){return null}function w(e){return null}function M(e){return null}function S(e){return null}function q(){return null}function H(){return null}function O(){return null}function D(e){return null}function I(e){return null}function R(e){return null}v.symbol="ListColumn",f.symbol="PivotColumnDimension",L.symbol="PivotRowDimension",b.symbol="PivotColumnHeaderTitle",g.symbol="PivotRowHeaderTitle",_.symbol="PivotIndicator",w.symbol="PivotCorner",M.symbol="Menu",S.symbol="Tooltip",q.symbol="Group",H.symbol="Image",O.symbol="Text",D.symbol="Tag",I.symbol="Radio",R.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return o.register}}),e.CheckBox=R,e.Group=q,e.Image=H,e.ListColumn=v,e.ListTable=y,e.Menu=M,e.PivotChart=T,e.PivotColumnDimension=f,e.PivotColumnHeaderTitle=b,e.PivotCorner=w,e.PivotIndicator=_,e.PivotRowDimension=L,e.PivotRowHeaderTitle=g,e.PivotTable=h,e.Radio=I,e.Tag=D,e.Text=O,e.Tooltip=S,e.registerChartModule=(e,o)=>{l.register.chartModule(e,o)},e.version="1.10.4-alpha.2"}));

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.10.3";
+export declare const version = "1.10.4-alpha.2";

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.10.3";
+const version = "1.10.4-alpha.2";
 
 export { version };

package/es/tables/base-table.vue.js

@@ -77,18 +77,21 @@ var _sfc_main = defineComponent({
                 instance.on(TABLE_EVENTS[eventKey], vueEventHandler);
             });
         };
+        const createTableInstance = (Type, options) => {
+            vTableInstance.value = new Type(vTableContainer.value, options);
+        };
         const createVTable = () => {
-            var _a;
-            if (!vTableContainer.value)
+            var _a, _b;
+            if (!vTableContainer.value) {
                 return;
+            }
             if (vTableInstance.value) {
                 vTableInstance.value.release();
             }
             const getRecords = () => {
-                return props.records !== undefined && props.records !== null && props.records.length > 0 ? props.records : props.options.records;
-            };
-            const createTableInstance = (Type, options) => {
-                vTableInstance.value = new Type(vTableContainer.value, options);
+                return props.records !== undefined && props.records !== null && props.records.length > 0
+                    ? props.records
+                    : props.options.records;
             };
             try {
                 switch (props.type) {
@@ -106,12 +109,14 @@ var _sfc_main = defineComponent({
                 (_a = props.onReady) === null || _a === void 0 ? void 0 : _a.call(props, vTableInstance.value, true);
             }
             catch (err) {
+                (_b = props.onError) === null || _b === void 0 ? void 0 : _b.call(props, err);
             }
         };
         const updateVTable = (newOptions) => {
             var _a;
-            if (!vTableInstance.value)
+            if (!vTableInstance.value) {
                 return;
+            }
             try {
                 switch (props.type) {
                     case 'list':
@@ -137,14 +142,14 @@ var _sfc_main = defineComponent({
         };
         onMounted(createVTable);
         onBeforeUnmount(() => { var _a; return (_a = vTableInstance.value) === null || _a === void 0 ? void 0 : _a.release(); });
-        watch(() => props.options, (newOptions) => {
+        watch(() => props.options, newOptions => {
             if (vTableInstance.value) {
                 updateVTable(newOptions);
             }
             else {
                 createVTable();
             }
-        }, { deep: true });
+        });
         watch(() => props.records, (newRecords, oldRecords) => {
             if (vTableInstance.value) {
                 updateVTable(Object.assign(Object.assign({}, props.options), { records: newRecords }));

package/es/tables/list-table.vue.js

@@ -1,5 +1,8 @@
 import { defineComponent, ref, useSlots, computed, openBlock, createElementBlock, Fragment, createVNode, mergeProps, renderSlot } from 'vue';
-import { flattenVNodes, convertPropsToCamelCase, createCustomLayout } from './utils.js';
+import { flattenVNodes } from '../utils/vnodeUtils.js';
+import '@visactor/vtable';
+import '@visactor/vutils';
+import { extractListSlotOptions } from '../utils/slotUtils.js';
 import _sfc_main$1 from './base-table.vue.js';
 
 var _sfc_main = defineComponent({
@@ -17,52 +20,9 @@ var _sfc_main = defineComponent({
         const computedOptions = computed(() => {
             var _a;
             const flattenedSlots = flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
-            const slotOptions = extractSlotOptions(flattenedSlots);
+            const slotOptions = extractListSlotOptions(flattenedSlots);
             return Object.assign(Object.assign({}, props.options), { columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns, tooltip: slotOptions.tooltip || props.options.tooltip, menu: slotOptions.menu || props.options.menu });
         });
-        function extractSlotOptions(vnodes) {
-            const options = {
-                columns: [],
-                tooltip: {},
-                menu: {},
-            };
-            const typeMapping = {
-                ListColumn: 'columns',
-                Tooltip: 'tooltip',
-                Menu: 'menu',
-            };
-            vnodes.forEach(vnode => {
-                var _a, _b;
-                vnode.props = convertPropsToCamelCase(vnode.props);
-                const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
-                const optionKey = typeMapping[typeName];
-                if (optionKey) {
-                    if (optionKey === 'columns' && vnode.children) {
-                        vnode.props.customLayout = createCustomLayoutHandler(vnode.children);
-                    }
-                    if (Array.isArray(options[optionKey])) {
-                        options[optionKey].push(vnode.props);
-                    }
-                    else {
-                        options[optionKey] = vnode.props;
-                    }
-                }
-            });
-            return options;
-        }
-        function createCustomLayoutHandler(children) {
-            return (args) => {
-                const { table, row, col, rect } = args;
-                const record = table.getCellOriginRecord(col, row);
-                const { height, width } = rect !== null && rect !== void 0 ? rect : table.getCellRect(col, row);
-                const rootContainer = children.customLayout({ table, row, col, rect, record, height, width })[0];
-                const { rootComponent } = createCustomLayout(rootContainer);
-                return {
-                    rootContainer: rootComponent,
-                    renderDefault: false,
-                };
-            };
-        }
         __expose({
             vTableInstance: computed(() => { var _a; return ((_a = baseTableRef.value) === null || _a === void 0 ? void 0 : _a.vTableInstance) || null; }),
         });

package/es/tables/pivot-chart.vue.js

@@ -1,5 +1,8 @@
 import { defineComponent, shallowRef, useSlots, computed, openBlock, createElementBlock, Fragment, createVNode, mergeProps, renderSlot } from 'vue';
-import { flattenVNodes, convertPropsToCamelCase } from './utils.js';
+import { flattenVNodes } from '../utils/vnodeUtils.js';
+import '@visactor/vtable';
+import '@visactor/vutils';
+import { extractPivotSlotOptions } from '../utils/slotUtils.js';
 import _sfc_main$1 from './base-table.vue.js';
 
 var _sfc_main = defineComponent({
@@ -17,46 +20,8 @@ var _sfc_main = defineComponent({
         const computedOptions = computed(() => {
             var _a;
             const flattenedSlots = flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
-            const options = {
-                columns: [],
-                columnHeaderTitle: [],
-                rows: [],
-                rowHeaderTitle: [],
-                indicators: [],
-                corner: Object,
-                tooltip: Object,
-                menu: Object,
-            };
-            const typeMapping = {
-                'PivotColumnDimension': 'columns',
-                'PivotColumnHeaderTitle': 'columnHeaderTitle',
-                'PivotRowDimension': 'rows',
-                'PivotRowHeaderTitle': 'rowHeaderTitle',
-                'PivotCorner': 'corner',
-                'PivotIndicator': 'indicators',
-                'Tooltip': 'tooltip',
-                'Menu': 'menu',
-            };
-            flattenedSlots.forEach(vnode => {
-                var _a, _b;
-                vnode.props = convertPropsToCamelCase(vnode.props);
-                const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
-                const optionKey = typeMapping[typeName];
-                if (optionKey) {
-                    if (Array.isArray(options[optionKey])) {
-                        if (vnode.props.hasOwnProperty('objectHandler')) {
-                            options[optionKey].push(vnode.props.objectHandler);
-                        }
-                        else {
-                            options[optionKey].push(vnode.props);
-                        }
-                    }
-                    else {
-                        options[optionKey] = vnode.props;
-                    }
-                }
-            });
-            return Object.assign(Object.assign({}, props.options), { columns: options.columns.length ? options.columns : props.options.columns, columnHeaderTitle: options.columnHeaderTitle.length ? options.columnHeaderTitle : props.options.columnHeaderTitle, rows: options.rows.length ? options.rows : props.options.rows, rowHeaderTitle: options.rowHeaderTitle.length ? options.rowHeaderTitle : props.options.rowHeaderTitle, indicators: options.indicators.length ? options.indicators : props.options.indicators, corner: options.corner || props.options.corner, tooltip: options.tooltip || props.options.tooltip, menu: options.menu || props.options.menu });
+            const slotOptions = extractPivotSlotOptions(flattenedSlots);
+            return Object.assign(Object.assign({}, props.options), { columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns, columnHeaderTitle: slotOptions.columnHeaderTitle.length ? slotOptions.columnHeaderTitle : props.options.columnHeaderTitle, rows: slotOptions.rows.length ? slotOptions.rows : props.options.rows, rowHeaderTitle: slotOptions.rowHeaderTitle.length ? slotOptions.rowHeaderTitle : props.options.rowHeaderTitle, indicators: slotOptions.indicators.length ? slotOptions.indicators : props.options.indicators, corner: props.options.corner || slotOptions.corner, tooltip: props.options.tooltip || slotOptions.tooltip, menu: props.options.menu || slotOptions.menu });
         });
         __expose({ vTableInstance: computed(() => { var _a; return ((_a = baseTableRef.value) === null || _a === void 0 ? void 0 : _a.vTableInstance) || null; }) });
         return (_ctx, _cache) => {