@visactor/vue-vtable 1.22.9-alpha.0 → 1.22.9-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/dist/vue-vtable.js +1 -1
- package/dist/vue-vtable.min.js +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/package.json +4 -4
package/cjs/index.d.ts
CHANGED
package/cjs/index.js
CHANGED
|
@@ -41,7 +41,7 @@ function _interopNamespaceDefault(e) {
|
|
|
41
41
|
|
|
42
42
|
var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
|
|
43
43
|
|
|
44
|
-
const version = "1.22.9-alpha.
|
|
44
|
+
const version = "1.22.9-alpha.1";
|
|
45
45
|
|
|
46
46
|
exports.VTable = VTable__namespace;
|
|
47
47
|
Object.defineProperty(exports, 'register', {
|
package/dist/vue-vtable.js
CHANGED
package/dist/vue-vtable.min.js
CHANGED
|
@@ -1 +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 s(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function a(e){const t={};for(const n in e)if(e.hasOwnProperty(n)){t[s(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=a(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():s(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;let o=e??C.find((e=>e?.type!==Symbol.for("v-cmt")));return o=n.isVNode(o)?o.key?o:n.cloneVNode(o,{key:`row_${r.row}_col_${r.col}`}):null,Object.assign(l.props.vue,{element:o,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,s=o.getCellOriginRecord(i,r),{height:a,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:s,height:a,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:s,container:a,referencePosition:u}=e;if(!a)return!1;const c=s.getBodyColumnDefine(i,r),{editConfig:d}=c||{},{id:p}=s,h=this.getColumnKeyField(c);if(!o.isValid(h)||!o.isValid(p))return!1;if("function"==typeof d?.editBefore){if(!await d.editBefore(e))return s.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=s?.getCellOriginRecord(i,r),y=this.getNode(p,h);if(!y)return!1;const f=n.h(y,{row:r,col:i,value:l,refValue:n.customRef(((e,t)=>({get:()=>(e(),this.getValue()),set:e=>{this.setValue(e),t()}}))),record:C,table:s,onChange:e=>this.setValue(e)});if(!f||!n.isVNode(f))return!1;this.checkToPassAppContext(f,s);const m=document.createElement("div");m.style.position="absolute",m.style.width="100%",m.style.boxSizing="border-box";const{bgColor:g}=s.getCellStyle(i,r)||{};return m.style.backgroundColor=g||"#FFFFFF",this.wrapContainer=m,this.tableContainer=a,this.tableContainer.appendChild(m),n.render(f,m),u?.rect&&this.adjustPosition(u.rect),!0}checkToPassAppContext(e,t){try{const n=t.options?.customConfig?.getVueUserAppContext?.()??this.currentContext;n?.components&&n?.directives&&(e.appContext=n)}catch(e){}}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:s}=r||{};if(!o.isValid(l)||!o.isValid(s))return!0;const a=i.getBodyColumnDefine(l,s),{editConfig:u}=a||{};if("function"==typeof u?.validateValue){const o=await u.validateValue({col:l,row:s,value:e,oldValue:n,table:i});if(!1===o){const e=i.getVisibleCellRangeRelativeRect({col:l,row:s});return i.showTooltip(l,s,{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=y(e);if(!o.isValid(r)||n!==h)return!1;if("function"==typeof t){if(e.getEditCustomNode=t,Array.isArray(e.columns)&&e.columns.length)for(const n of e.columns)C(n,t);return!0}return"function"==typeof e.getEditCustomNode}function y(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}function f(e,n){let o=t.register.editor(h);return!o&&e&&(o=new p(n),t.register.editor(h,o)),o}function m(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=a(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,onContextMenuCanvas:E.CONTEXTMENU_CANVAS,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,onEmptyTipClick:E.EMPTY_TIP_CLICK,onEmptyTipDblClick:E.EMPTY_TIP_DBLCLICK,onButtonClick:E.BUTTON_CLICK,onBeforeCacheChartImage:E.BEFORE_CACHE_CHART_IMAGE,onPastedData:E.PASTED_DATA,onSelectedClear:E.SELECTED_CLEAR},b=Object.keys(v);function w(e,t){const r=n.getCurrentInstance(),i=n.computed((()=>{const t=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=f();t?t.removeNode(e):i.value.length>0&&(t=f(!0,r?.appContext));i.value.forEach((n=>{const{getEditCustomNode:o}=n,r=y(n);t.registerNode(e,r,o),delete n.editCustomNode}))}()})),n.onBeforeUnmount((()=>{!function(){const e=l();if(!o.isValid(e))return;const t=f();t?.release(e)}()}))}function T(e){return e.flatMap((e=>Array.isArray(e.columns)?T(e.columns):e))}class L extends r.HtmlAttributePlugin{name="VTableVueAttributePlugin";renderQueue=new Set;isRendering=!1;MAX_CACHE_COUNT=100;accessQueue=[];VIEWPORT_BUFFER=100;BUFFER_ZONE=500;styleUpdateQueue=new Map;styleUpdateRequested=!1;eventHandlers=new WeakMap;currentContext;constructor(e){super(),this.currentContext=e}renderGraphicHTML(e){this.checkNeedRender(e)&&(this.renderQueue.add(e),this.scheduleRender())}scheduleRender(){this.isRendering||(this.isRendering=!0,r.vglobal.getRequestAnimationFrame()((()=>{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,s=l?function(e){const{col:t,row:n,stage:o}=_(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 a=this.htmlMap?.[t];if(a&&s&&s!==a.container&&(this.removeElement(t),a=null),this.checkToPassAppContext(i,e),!a||!this.checkDom(a.wrapContainer)){this.checkAndClearCache(e);const{wrapContainer:l,nativeContainer:u,reuse:c}=this.getWrapContainer(r,s,{id:t,options:o});if(l){const o=`${this.renderId}`;l.id=t,l.setAttribute("data-vue-renderId",o),l.style.display="none",c||n.render(i,l),a={wrapContainer:l,nativeContainer:u,container:s,renderId:this.renderId,graphic:e,isInViewport:!0,lastPosition:null,lastStyle:{}},this.htmlMap[t]=a}}a&&(a.renderId=this.renderId,a.lastAccessed=Date.now(),this.updateAccessQueue(t),this.updateStyleOfWrapContainer(e,r,a.wrapContainer,a.nativeContainer))}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,t){try{const n=this.getCustomConfig(t),o=n?.getVueUserAppContext?.()??this.currentContext;o?.components&&o?.directives&&(e.appContext=o)}catch(e){}}getCustomConfig(e){const t=_(e);return t?.stage?.table?.options?.customConfig}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){return this.checkInViewportByZone(e,this.VIEWPORT_BUFFER)}checkInBuffer(e){return this.checkInViewportByZone(e,this.BUFFER_ZONE)}checkInViewportByZone(e,t=0){const{stage:n,globalAABBBounds:o}=e;if(!n)return!1;const{AABBBounds:r}=n,i=r.x1-t,l=r.x2+t,s=r.y1-t,a=r.y2+t;return o.x1<l&&o.x2>i&&o.y1<a&&o.y2>s}updateAccessQueue(e){const t=this.accessQueue.indexOf(e);t>-1&&this.accessQueue.splice(t,1),this.accessQueue.unshift(e)}checkAndClearCache(e){const{viewportNodes:t,bufferNodes:n,cacheNodes:o}=this.classifyNodes(),r=t.length+n.length+o.length,i=this.getCustomConfig(e),l=i?.maxDomCacheCount??this.MAX_CACHE_COUNT;if(r<=l)return;const s=r-l;let a=o.slice(0,s);if(a.length<s){const e=n.sort(((e,t)=>this.htmlMap[e].lastAccessed-this.htmlMap[t].lastAccessed)).slice(0,s-a.length);a=a.concat(e)}a.forEach((e=>this.removeElement(e,!0)))}classifyNodes(){const e=[],t=[],n=[];return Object.keys(this.htmlMap).forEach((o=>{const r=this.htmlMap[o];r.isInViewport?e.push(o):this.checkInBuffer(r.graphic)?t.push(o):n.push(o)})),{viewportNodes:e,bufferNodes:t,cacheNodes:n}}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;if(r){if(t)n.render(null,r),this.checkDom(r)&&super.removeElement(e),delete this.htmlMap[e];else{r.remove(),o.isInViewport=!1;const t=this.accessQueue.indexOf(e);t>-1&&this.accessQueue.splice(t,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),{reuse:!0,wrapContainer:e,nativeContainer:o}}return{wrapContainer:r.application.global.createDom({tagName:"div",parent:o}),nativeContainer:o}}updateStyleOfWrapContainer(e,t,n,r){const{attribute:i,type:l}=e,{vue:s,width:a,height:u,visible:c,display:d,...p}=i||{},{x:h,y:C}=this.calculatePosition(e,s.anchorType),{left:y,top:f}=this.calculateOffset(t,r,h,C),{id:m}=this.getGraphicOptions(e)||{},g=m?this.htmlMap[m]:null;if(!g)return;if(!(!g.lastPosition||g.lastPosition.x!==y||g.lastPosition.y!==f))return;const{pointerEvents:E}=s,v=this.parseDefaultStyleFromGraphic(e),b=this.convertCellStyle(e);Object.assign(v,{width:`${a}px`,height:`${u}px`,overflow:"hidden",...b||{},...p||{},transform:`translate(${y}px, ${f}px)`,boxSizing:"border-box",display:!1!==c?d||"block":"none",pointerEvents:!0===E?"all":E||"none",position:"absolute"}),"none"!==v.pointerEvents&&this.checkToAddEventListener(n),"text"===l&&"position"===s.anchorType&&Object.assign(v,this.getTransformOfText(e)),this.applyUserStyles(s,v,{offsetX:y,offsetTop:f,graphic:e,wrapContainer:n});!o.isEqual(g.lastStyle,v)&&(this.styleUpdateQueue.set(n.id,v),this.requestStyleUpdate(),g.lastStyle=v)}checkToAddEventListener(e){if(!this.eventHandlers.has(e)){const t=e=>{e.preventDefault(),this.onWheel(e)};e.addEventListener("wheel",t,{passive:!1}),this.eventHandlers.set(e,t)}}requestStyleUpdate(){this.styleUpdateRequested||(this.styleUpdateRequested=!0,r.vglobal.getRequestAnimationFrame()((()=>{this.styleUpdateQueue.forEach(((e,t)=>{const n=this.htmlMap?.[t]?.wrapContainer;n&&Object.assign(n.style,e)})),this.styleUpdateQueue.clear(),this.styleUpdateRequested=!1})))}convertCellStyle(e){const{col:t,row:n,stage:r}=_(e),i=r?.table?.getCellStyle(t,n);if(!o.isObject(i))return;const{lineHeight:l,padding:s,...a}=i;return{...a,padding:o.isArray(s)?s.map((e=>`${e}px`)).join(" "):s}}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 _(e){for(;e?.parent;){if(e.name===t.CUSTOM_CONTAINER_NAME||(e.name||"").startsWith(t.CUSTOM_MERGE_PRE_NAME))return e;e=e.parent}return{col:-1,row:-1,stage:null}}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},keepColumnWidthChange:{type:Boolean,required:!1},onClickCell:{type:Function,required:!1},onDblClickCell:{type:Function,required:!1},onMouseDownCell:{type:Function,required:!1},onMouseUpCell:{type:Function,required:!1},onSelectedCell:{type:Function,required:!1},onKeyDown:{type:Function,required:!1},onMouseEnterTable:{type:Function,required:!1},onMouseLeaveTable:{type:Function,required:!1},onMouseDownTable:{type:Function,required:!1},onMouseMoveCell:{type:Function,required:!1},onMouseEnterCell:{type:Function,required:!1},onMouseLeaveCell:{type:Function,required:!1},onContextMenuCell:{type:Function,required:!1},onContextMenuCanvas:{type:Function,required:!1},onResizeColumn:{type:Function,required:!1},onResizeColumnEnd:{type:Function,required:!1},onChangeHeaderPosition:{type:Function,required:!1},onChangeHeaderPositionStart:{type:Function,required:!1},onChangeHeaderPositionFail:{type:Function,required:!1},onSortClick:{type:Function,required:!1},onFreezeClick:{type:Function,required:!1},onScroll:{type:Function,required:!1},onDropdownMenuClick:{type:Function,required:!1},onMouseOverChartSymbol:{type:Function,required:!1},onDragSelectEnd:{type:Function,required:!1},onDropdownIconClick:{type:Function,required:!1},onDropdownMenuClear:{type:Function,required:!1},onTreeHierarchyStateChange:{type:Function,required:!1},onShowMenu:{type:Function,required:!1},onHideMenu:{type:Function,required:!1},onIconClick:{type:Function,required:!1},onLegendItemClick:{type:Function,required:!1},onLegendItemHover:{type:Function,required:!1},onLegendItemUnHover:{type:Function,required:!1},onLegendChange:{type:Function,required:!1},onMouseEnterAxis:{type:Function,required:!1},onMouseLeaveAxis:{type:Function,required:!1},onCheckboxStateChange:{type:Function,required:!1},onRadioStateChange:{type:Function,required:!1},onAfterRender:{type:Function,required:!1},onInitialized:{type:Function,required:!1},onPivotSortClick:{type:Function,required:!1},onDrillMenuClick:{type:Function,required:!1},onVChartEventType:{type:Function,required:!1},onChangeCellValue:{type:Function,required:!1},onMousedownFillHandle:{type:Function,required:!1},onDragFillHandleEnd:{type:Function,required:!1},onDblclickFillHandle:{type:Function,required:!1},onScrollVerticalEnd:{type:Function,required:!1},onScrollHorizontalEnd:{type:Function,required:!1},onChangCellValue:{type:Function,required:!1},onEmptyTipClick:{type:Function,required:!1},onEmptyTipDblClick:{type:Function,required:!1},onButtonClick:{type:Function,required:!1},onBeforeCacheChartImage:{type:Function,required:!1},onPastedData:{type:Function,required:!1}},emits:b,setup(e,{expose:r,emit:i}){const l=e,s=n.ref(null),a=n.shallowRef(null),u=n.ref(new Map),c=n.ref([]),d=n.ref([]);w(l,a),function(e,t){const r=n.getCurrentInstance(),i=e?.options?.customConfig?.createReactContainer;n.watchEffect((()=>{if(!i)return;const e=t.value?.scenegraph?.stage?.pluginService;if(!e)return;const n=e.findPluginsByName("VTableVueAttributePlugin");if(o.isArray(n)&&n.length)return;const l=new L(r?.appContext);e.register(l)}))}(l,a),r({vTableInstance:a});const p=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),h=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),C=i,y=(e,t)=>{const n=new e(s.value,t);a.value=n,u.value.clear(),c.value=[],d.value=[],n.on("resize_column_end",(e=>{if(!l.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<c.value.length;e++){const t=c.value[e];JSON.stringify(t.dimensions)===JSON.stringify(o)&&(t.width=r,i=!0)}i||c.value.push({dimensions:o,width:r})}else{const e=n.getBodyColumnDefine(t,0);e?.key&&u.value.set(e.key,r)}}))},f=()=>{if(!s.value)return;a.value&&a.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":y(t.ListTable,{...l.options,records:e()});break;case"pivot":y(t.PivotTable,{...l.options,records:e()});break;case"chart":y(t.PivotChart,{...l.options,records:e()})}n=a.value,b.forEach((e=>{n.on(v[e],(t=>{C(e,t)}))})),l.onReady?.(a.value,!0)}catch(e){l.onError?.(e)}var n},m=e=>{if(a.value)try{if(l.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}(u.value,c.value,a.value);e={...e,columnWidthConfig:t,columnWidthConfigForRowHeader:t}}switch(l.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){l.onError?.(e)}};return n.onMounted(f),n.onBeforeUnmount((()=>{a.value?.release()})),n.watch((()=>l.options),((e,t)=>{a.value?m(e):f()})),n.watch((()=>l.records),((e,t)=>{a.value?m({...l.options,records:e}):f()}),{deep:!0}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:s,style:n.normalizeStyle([{width:p.value,height:h.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=a(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))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"list",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}}),A=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=m(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"pivot",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}}),F=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=m(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"chart",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}});function N(e){return null}function S(e){return null}function R(e){return null}function D(e){return null}function I(e){return null}function k(e){return null}function P(e){return null}function q(e){return null}function H(e){return null}function V(){return null}function x(){return null}function B(){return null}function U(e){return null}function j(e){return null}function z(e){return null}N.symbol="ListColumn",S.symbol="PivotColumnDimension",R.symbol="PivotRowDimension",D.symbol="PivotColumnHeaderTitle",I.symbol="PivotRowHeaderTitle",k.symbol="PivotIndicator",P.symbol="PivotCorner",q.symbol="Menu",H.symbol="Tooltip",V.symbol="Group",x.symbol="Image",B.symbol="Text",U.symbol="Tag",j.symbol="Radio",z.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return t.register}}),e.CheckBox=z,e.DYNAMIC_RENDER_EDITOR=h,e.Group=V,e.Image=x,e.ListColumn=N,e.ListTable=O,e.Menu=q,e.PivotChart=F,e.PivotColumnDimension=S,e.PivotColumnHeaderTitle=D,e.PivotCorner=P,e.PivotIndicator=k,e.PivotRowDimension=R,e.PivotRowHeaderTitle=I,e.PivotTable=A,e.Radio=j,e.Tag=U,e.Text=B,e.Tooltip=H,e.registerChartModule=(e,t)=>{l.register.chartModule(e,t)},e.version="1.22.9-alpha.0"}));
|
|
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 s(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function a(e){const t={};for(const n in e)if(e.hasOwnProperty(n)){t[s(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=a(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():s(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;let o=e??C.find((e=>e?.type!==Symbol.for("v-cmt")));return o=n.isVNode(o)?o.key?o:n.cloneVNode(o,{key:`row_${r.row}_col_${r.col}`}):null,Object.assign(l.props.vue,{element:o,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,s=o.getCellOriginRecord(i,r),{height:a,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:s,height:a,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:s,container:a,referencePosition:u}=e;if(!a)return!1;const c=s.getBodyColumnDefine(i,r),{editConfig:d}=c||{},{id:p}=s,h=this.getColumnKeyField(c);if(!o.isValid(h)||!o.isValid(p))return!1;if("function"==typeof d?.editBefore){if(!await d.editBefore(e))return s.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=s?.getCellOriginRecord(i,r),y=this.getNode(p,h);if(!y)return!1;const f=n.h(y,{row:r,col:i,value:l,refValue:n.customRef(((e,t)=>({get:()=>(e(),this.getValue()),set:e=>{this.setValue(e),t()}}))),record:C,table:s,onChange:e=>this.setValue(e)});if(!f||!n.isVNode(f))return!1;this.checkToPassAppContext(f,s);const m=document.createElement("div");m.style.position="absolute",m.style.width="100%",m.style.boxSizing="border-box";const{bgColor:g}=s.getCellStyle(i,r)||{};return m.style.backgroundColor=g||"#FFFFFF",this.wrapContainer=m,this.tableContainer=a,this.tableContainer.appendChild(m),n.render(f,m),u?.rect&&this.adjustPosition(u.rect),!0}checkToPassAppContext(e,t){try{const n=t.options?.customConfig?.getVueUserAppContext?.()??this.currentContext;n?.components&&n?.directives&&(e.appContext=n)}catch(e){}}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:s}=r||{};if(!o.isValid(l)||!o.isValid(s))return!0;const a=i.getBodyColumnDefine(l,s),{editConfig:u}=a||{};if("function"==typeof u?.validateValue){const o=await u.validateValue({col:l,row:s,value:e,oldValue:n,table:i});if(!1===o){const e=i.getVisibleCellRangeRelativeRect({col:l,row:s});return i.showTooltip(l,s,{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=y(e);if(!o.isValid(r)||n!==h)return!1;if("function"==typeof t){if(e.getEditCustomNode=t,Array.isArray(e.columns)&&e.columns.length)for(const n of e.columns)C(n,t);return!0}return"function"==typeof e.getEditCustomNode}function y(e){const{field:t,key:n}=e||{};return o.isValid(n)?n:t}function f(e,n){let o=t.register.editor(h);return!o&&e&&(o=new p(n),t.register.editor(h,o)),o}function m(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=a(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,onContextMenuCanvas:E.CONTEXTMENU_CANVAS,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,onEmptyTipClick:E.EMPTY_TIP_CLICK,onEmptyTipDblClick:E.EMPTY_TIP_DBLCLICK,onButtonClick:E.BUTTON_CLICK,onBeforeCacheChartImage:E.BEFORE_CACHE_CHART_IMAGE,onPastedData:E.PASTED_DATA,onSelectedClear:E.SELECTED_CLEAR},b=Object.keys(v);function w(e,t){const r=n.getCurrentInstance(),i=n.computed((()=>{const t=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=f();t?t.removeNode(e):i.value.length>0&&(t=f(!0,r?.appContext));i.value.forEach((n=>{const{getEditCustomNode:o}=n,r=y(n);t.registerNode(e,r,o),delete n.editCustomNode}))}()})),n.onBeforeUnmount((()=>{!function(){const e=l();if(!o.isValid(e))return;const t=f();t?.release(e)}()}))}function T(e){return e.flatMap((e=>Array.isArray(e.columns)?T(e.columns):e))}class L extends r.HtmlAttributePlugin{name="VTableVueAttributePlugin";renderQueue=new Set;isRendering=!1;MAX_CACHE_COUNT=100;accessQueue=[];VIEWPORT_BUFFER=100;BUFFER_ZONE=500;styleUpdateQueue=new Map;styleUpdateRequested=!1;eventHandlers=new WeakMap;currentContext;constructor(e){super(),this.currentContext=e}renderGraphicHTML(e){this.checkNeedRender(e)&&(this.renderQueue.add(e),this.scheduleRender())}scheduleRender(){this.isRendering||(this.isRendering=!0,r.vglobal.getRequestAnimationFrame()((()=>{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,s=l?function(e){const{col:t,row:n,stage:o}=_(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 a=this.htmlMap?.[t];if(a&&s&&s!==a.container&&(this.removeElement(t),a=null),this.checkToPassAppContext(i,e),!a||!this.checkDom(a.wrapContainer)){this.checkAndClearCache(e);const{wrapContainer:l,nativeContainer:u,reuse:c}=this.getWrapContainer(r,s,{id:t,options:o});if(l){const o=`${this.renderId}`;l.id=t,l.setAttribute("data-vue-renderId",o),l.style.display="none",c||n.render(i,l),a={wrapContainer:l,nativeContainer:u,container:s,renderId:this.renderId,graphic:e,isInViewport:!0,lastPosition:null,lastStyle:{}},this.htmlMap[t]=a}}a&&(a.renderId=this.renderId,a.lastAccessed=Date.now(),this.updateAccessQueue(t),this.updateStyleOfWrapContainer(e,r,a.wrapContainer,a.nativeContainer))}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,t){try{const n=this.getCustomConfig(t),o=n?.getVueUserAppContext?.()??this.currentContext;o?.components&&o?.directives&&(e.appContext=o)}catch(e){}}getCustomConfig(e){const t=_(e);return t?.stage?.table?.options?.customConfig}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){return this.checkInViewportByZone(e,this.VIEWPORT_BUFFER)}checkInBuffer(e){return this.checkInViewportByZone(e,this.BUFFER_ZONE)}checkInViewportByZone(e,t=0){const{stage:n,globalAABBBounds:o}=e;if(!n)return!1;const{AABBBounds:r}=n,i=r.x1-t,l=r.x2+t,s=r.y1-t,a=r.y2+t;return o.x1<l&&o.x2>i&&o.y1<a&&o.y2>s}updateAccessQueue(e){const t=this.accessQueue.indexOf(e);t>-1&&this.accessQueue.splice(t,1),this.accessQueue.unshift(e)}checkAndClearCache(e){const{viewportNodes:t,bufferNodes:n,cacheNodes:o}=this.classifyNodes(),r=t.length+n.length+o.length,i=this.getCustomConfig(e),l=i?.maxDomCacheCount??this.MAX_CACHE_COUNT;if(r<=l)return;const s=r-l;let a=o.slice(0,s);if(a.length<s){const e=n.sort(((e,t)=>this.htmlMap[e].lastAccessed-this.htmlMap[t].lastAccessed)).slice(0,s-a.length);a=a.concat(e)}a.forEach((e=>this.removeElement(e,!0)))}classifyNodes(){const e=[],t=[],n=[];return Object.keys(this.htmlMap).forEach((o=>{const r=this.htmlMap[o];r.isInViewport?e.push(o):this.checkInBuffer(r.graphic)?t.push(o):n.push(o)})),{viewportNodes:e,bufferNodes:t,cacheNodes:n}}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;if(r){if(t)n.render(null,r),this.checkDom(r)&&super.removeElement(e),delete this.htmlMap[e];else{r.remove(),o.isInViewport=!1;const t=this.accessQueue.indexOf(e);t>-1&&this.accessQueue.splice(t,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),{reuse:!0,wrapContainer:e,nativeContainer:o}}return{wrapContainer:r.application.global.createDom({tagName:"div",parent:o}),nativeContainer:o}}updateStyleOfWrapContainer(e,t,n,r){const{attribute:i,type:l}=e,{vue:s,width:a,height:u,visible:c,display:d,...p}=i||{},{x:h,y:C}=this.calculatePosition(e,s.anchorType),{left:y,top:f}=this.calculateOffset(t,r,h,C),{id:m}=this.getGraphicOptions(e)||{},g=m?this.htmlMap[m]:null;if(!g)return;if(!(!g.lastPosition||g.lastPosition.x!==y||g.lastPosition.y!==f))return;const{pointerEvents:E}=s,v=this.parseDefaultStyleFromGraphic(e),b=this.convertCellStyle(e);Object.assign(v,{width:`${a}px`,height:`${u}px`,overflow:"hidden",...b||{},...p||{},transform:`translate(${y}px, ${f}px)`,boxSizing:"border-box",display:!1!==c?d||"block":"none",pointerEvents:!0===E?"all":E||"none",position:"absolute"}),"none"!==v.pointerEvents&&this.checkToAddEventListener(n),"text"===l&&"position"===s.anchorType&&Object.assign(v,this.getTransformOfText(e)),this.applyUserStyles(s,v,{offsetX:y,offsetTop:f,graphic:e,wrapContainer:n});!o.isEqual(g.lastStyle,v)&&(this.styleUpdateQueue.set(n.id,v),this.requestStyleUpdate(),g.lastStyle=v)}checkToAddEventListener(e){if(!this.eventHandlers.has(e)){const t=e=>{e.preventDefault(),this.onWheel(e)};e.addEventListener("wheel",t,{passive:!1}),this.eventHandlers.set(e,t)}}requestStyleUpdate(){this.styleUpdateRequested||(this.styleUpdateRequested=!0,r.vglobal.getRequestAnimationFrame()((()=>{this.styleUpdateQueue.forEach(((e,t)=>{const n=this.htmlMap?.[t]?.wrapContainer;n&&Object.assign(n.style,e)})),this.styleUpdateQueue.clear(),this.styleUpdateRequested=!1})))}convertCellStyle(e){const{col:t,row:n,stage:r}=_(e),i=r?.table?.getCellStyle(t,n);if(!o.isObject(i))return;const{lineHeight:l,padding:s,...a}=i;return{...a,padding:o.isArray(s)?s.map((e=>`${e}px`)).join(" "):s}}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 _(e){for(;e?.parent;){if(e.name===t.CUSTOM_CONTAINER_NAME||(e.name||"").startsWith(t.CUSTOM_MERGE_PRE_NAME))return e;e=e.parent}return{col:-1,row:-1,stage:null}}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},keepColumnWidthChange:{type:Boolean,required:!1},onClickCell:{type:Function,required:!1},onDblClickCell:{type:Function,required:!1},onMouseDownCell:{type:Function,required:!1},onMouseUpCell:{type:Function,required:!1},onSelectedCell:{type:Function,required:!1},onKeyDown:{type:Function,required:!1},onMouseEnterTable:{type:Function,required:!1},onMouseLeaveTable:{type:Function,required:!1},onMouseDownTable:{type:Function,required:!1},onMouseMoveCell:{type:Function,required:!1},onMouseEnterCell:{type:Function,required:!1},onMouseLeaveCell:{type:Function,required:!1},onContextMenuCell:{type:Function,required:!1},onContextMenuCanvas:{type:Function,required:!1},onResizeColumn:{type:Function,required:!1},onResizeColumnEnd:{type:Function,required:!1},onChangeHeaderPosition:{type:Function,required:!1},onChangeHeaderPositionStart:{type:Function,required:!1},onChangeHeaderPositionFail:{type:Function,required:!1},onSortClick:{type:Function,required:!1},onFreezeClick:{type:Function,required:!1},onScroll:{type:Function,required:!1},onDropdownMenuClick:{type:Function,required:!1},onMouseOverChartSymbol:{type:Function,required:!1},onDragSelectEnd:{type:Function,required:!1},onDropdownIconClick:{type:Function,required:!1},onDropdownMenuClear:{type:Function,required:!1},onTreeHierarchyStateChange:{type:Function,required:!1},onShowMenu:{type:Function,required:!1},onHideMenu:{type:Function,required:!1},onIconClick:{type:Function,required:!1},onLegendItemClick:{type:Function,required:!1},onLegendItemHover:{type:Function,required:!1},onLegendItemUnHover:{type:Function,required:!1},onLegendChange:{type:Function,required:!1},onMouseEnterAxis:{type:Function,required:!1},onMouseLeaveAxis:{type:Function,required:!1},onCheckboxStateChange:{type:Function,required:!1},onRadioStateChange:{type:Function,required:!1},onAfterRender:{type:Function,required:!1},onInitialized:{type:Function,required:!1},onPivotSortClick:{type:Function,required:!1},onDrillMenuClick:{type:Function,required:!1},onVChartEventType:{type:Function,required:!1},onChangeCellValue:{type:Function,required:!1},onMousedownFillHandle:{type:Function,required:!1},onDragFillHandleEnd:{type:Function,required:!1},onDblclickFillHandle:{type:Function,required:!1},onScrollVerticalEnd:{type:Function,required:!1},onScrollHorizontalEnd:{type:Function,required:!1},onChangCellValue:{type:Function,required:!1},onEmptyTipClick:{type:Function,required:!1},onEmptyTipDblClick:{type:Function,required:!1},onButtonClick:{type:Function,required:!1},onBeforeCacheChartImage:{type:Function,required:!1},onPastedData:{type:Function,required:!1}},emits:b,setup(e,{expose:r,emit:i}){const l=e,s=n.ref(null),a=n.shallowRef(null),u=n.ref(new Map),c=n.ref([]),d=n.ref([]);w(l,a),function(e,t){const r=n.getCurrentInstance(),i=e?.options?.customConfig?.createReactContainer;n.watchEffect((()=>{if(!i)return;const e=t.value?.scenegraph?.stage?.pluginService;if(!e)return;const n=e.findPluginsByName("VTableVueAttributePlugin");if(o.isArray(n)&&n.length)return;const l=new L(r?.appContext);e.register(l)}))}(l,a),r({vTableInstance:a});const p=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),h=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),C=i,y=(e,t)=>{const n=new e(s.value,t);a.value=n,u.value.clear(),c.value=[],d.value=[],n.on("resize_column_end",(e=>{if(!l.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<c.value.length;e++){const t=c.value[e];JSON.stringify(t.dimensions)===JSON.stringify(o)&&(t.width=r,i=!0)}i||c.value.push({dimensions:o,width:r})}else{const e=n.getBodyColumnDefine(t,0);e?.key&&u.value.set(e.key,r)}}))},f=()=>{if(!s.value)return;a.value&&a.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":y(t.ListTable,{...l.options,records:e()});break;case"pivot":y(t.PivotTable,{...l.options,records:e()});break;case"chart":y(t.PivotChart,{...l.options,records:e()})}n=a.value,b.forEach((e=>{n.on(v[e],(t=>{C(e,t)}))})),l.onReady?.(a.value,!0)}catch(e){l.onError?.(e)}var n},m=e=>{if(a.value)try{if(l.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}(u.value,c.value,a.value);e={...e,columnWidthConfig:t,columnWidthConfigForRowHeader:t}}switch(l.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){l.onError?.(e)}};return n.onMounted(f),n.onBeforeUnmount((()=>{a.value?.release()})),n.watch((()=>l.options),((e,t)=>{a.value?m(e):f()})),n.watch((()=>l.records),((e,t)=>{a.value?m({...l.options,records:e}):f()}),{deep:!0}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:s,style:n.normalizeStyle([{width:p.value,height:h.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=a(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))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"list",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}}),A=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=m(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"pivot",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}}),F=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=m(u(i.default?.()||[]));return g(o.options,e)}));return t({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(t,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(M,n.mergeProps({type:"chart",options:l.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},t.$attrs),null,16,["options","records","width","height"]),n.renderSlot(t.$slots,"default")],64))}});function N(e){return null}function S(e){return null}function R(e){return null}function D(e){return null}function I(e){return null}function k(e){return null}function P(e){return null}function q(e){return null}function H(e){return null}function V(){return null}function x(){return null}function B(){return null}function U(e){return null}function j(e){return null}function z(e){return null}N.symbol="ListColumn",S.symbol="PivotColumnDimension",R.symbol="PivotRowDimension",D.symbol="PivotColumnHeaderTitle",I.symbol="PivotRowHeaderTitle",k.symbol="PivotIndicator",P.symbol="PivotCorner",q.symbol="Menu",H.symbol="Tooltip",V.symbol="Group",x.symbol="Image",B.symbol="Text",U.symbol="Tag",j.symbol="Radio",z.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return t.register}}),e.CheckBox=z,e.DYNAMIC_RENDER_EDITOR=h,e.Group=V,e.Image=x,e.ListColumn=N,e.ListTable=O,e.Menu=q,e.PivotChart=F,e.PivotColumnDimension=S,e.PivotColumnHeaderTitle=D,e.PivotCorner=P,e.PivotIndicator=k,e.PivotRowDimension=R,e.PivotRowHeaderTitle=I,e.PivotTable=A,e.Radio=j,e.Tag=U,e.Text=B,e.Tooltip=H,e.registerChartModule=(e,t)=>{l.register.chartModule(e,t)},e.version="1.22.9-alpha.1"}));
|
package/es/index.d.ts
CHANGED
package/es/index.js
CHANGED
|
@@ -22,6 +22,6 @@ export { default as Radio } from './components/custom/radio.js';
|
|
|
22
22
|
export { default as CheckBox } from './components/custom/checkBox.js';
|
|
23
23
|
export { DYNAMIC_RENDER_EDITOR } from './constants.js';
|
|
24
24
|
|
|
25
|
-
const version = "1.22.9-alpha.
|
|
25
|
+
const version = "1.22.9-alpha.1";
|
|
26
26
|
|
|
27
27
|
export { version };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vue-vtable",
|
|
3
|
-
"version": "1.22.9-alpha.
|
|
3
|
+
"version": "1.22.9-alpha.1",
|
|
4
4
|
"description": "The vue version of VTable",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@visactor/vtable": "1.22.9-alpha.
|
|
53
|
+
"@visactor/vtable": "1.22.9-alpha.1",
|
|
54
54
|
"@visactor/vutils": "~0.19.1"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
@@ -95,9 +95,9 @@
|
|
|
95
95
|
"axios": "^1.4.0",
|
|
96
96
|
"eslint-plugin-vue": "^9.26.0",
|
|
97
97
|
"vue-eslint-parser": "^9.4.2",
|
|
98
|
-
"@internal/bundler": "0.0.1",
|
|
99
98
|
"@internal/eslint-config": "0.0.1",
|
|
100
|
-
"@internal/ts-config": "0.0.1"
|
|
99
|
+
"@internal/ts-config": "0.0.1",
|
|
100
|
+
"@internal/bundler": "0.0.1"
|
|
101
101
|
},
|
|
102
102
|
"scripts": {
|
|
103
103
|
"start": "vite ./demo",
|