@antv/s2-vue 2.0.0-next.8 → 2.0.0

package/lib/hooks/useSheetUpdate.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSheetUpdate = void 0;
+const vue_1 = require("vue");
+/**
+ * props 会将所有属性用 shallowReactive 包裹起来：
+ * 1. 如果是对 dataCfg 或者 options 直接替换， 那么只需要简单的通过 ()=> props.dataCfg 这种 getter 就能监听到
+ * 2. 如果 dataCfg 任然是 reactive 数据，那么就存在直接修改了其中某一个属性的情况，这个时候就需要对所有的属性遍历来关联 watch 属性
+ * ? 如果数量特别多时，遍历可能存在性能问题，先暂时观察一下
+ */
+const useSheetUpdate = (s2Ref, props, hooks) => {
+    const updateFlag = (0, vue_1.reactive)({
+        rerender: false,
+        reloadData: false,
+        rebuildDataset: false,
+    });
+    (0, vue_1.watch)(() => props.options, (options, prevOptions) => {
+        updateFlag.rerender = true;
+        if (!Object.is(prevOptions?.hierarchyType, options?.hierarchyType)) {
+            updateFlag.reloadData = true;
+            updateFlag.rebuildDataset = true;
+        }
+        s2Ref.value?.setOptions(options);
+        s2Ref.value?.changeSheetSize(options?.width, options?.height);
+    }, { deep: (0, vue_1.isProxy)(props.options) });
+    (0, vue_1.watch)(() => props.dataCfg, (dataCfg, prevDataCfg) => {
+        if (prevDataCfg?.fields?.columns?.length !==
+            dataCfg?.fields?.columns?.length) {
+            s2Ref.value?.facet?.clearInitColLeafNodes();
+        }
+        updateFlag.rerender = true;
+        updateFlag.reloadData = true;
+        s2Ref.value?.setDataCfg(dataCfg);
+    }, { deep: (0, vue_1.isProxy)(props.dataCfg) });
+    (0, vue_1.watch)(() => props.themeCfg, (themeCfg) => {
+        updateFlag.rerender = true;
+        s2Ref.value?.setThemeCfg(themeCfg);
+    }, {
+        deep: (0, vue_1.isProxy)(props.themeCfg),
+    });
+    (0, vue_1.watch)(updateFlag, async (flag) => {
+        if (!flag.rerender) {
+            return;
+        }
+        hooks?.before?.();
+        const defaultRenderOptions = {
+            reloadData: flag.reloadData,
+            rebuildDataSet: flag.rebuildDataset,
+        };
+        const renderOptions = props?.onUpdate?.(defaultRenderOptions) || defaultRenderOptions;
+        await s2Ref.value?.render(renderOptions);
+        props?.onUpdateAfterRender?.(renderOptions);
+        hooks?.after?.();
+        flag.rerender = false;
+        flag.reloadData = false;
+        flag.rebuildDataset = false;
+    });
+};
+exports.useSheetUpdate = useSheetUpdate;
+//# sourceMappingURL=useSheetUpdate.js.map

package/lib/hooks/useSheetUpdate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetUpdate.js","sourceRoot":"","sources":["../../src/hooks/useSheetUpdate.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useSpreadSheet.d.ts

@@ -0,0 +1,75 @@
+import { type SpreadSheet } from '@antv/s2';
+import type { BaseSheetInitEmits, EmitFn } from '../interface';
+import type { BaseSheetProps } from '../utils/initPropAndEmits';
+export declare function useSpreadSheet(props: BaseSheetProps, emit: EmitFn<BaseSheetInitEmits>): {
+    wrapperRef: import("vue").Ref<HTMLDivElement>;
+    containerRef: import("vue").Ref<HTMLDivElement>;
+    s2Ref: import("vue").ShallowRef<SpreadSheet>;
+    loading: import("vue").Ref<boolean>;
+    setLoading: (updated: boolean) => void;
+    pagination: {
+        customOptions: import("lodash").Omit<import("@antv/s2").Pagination & Partial<import("vue").ExtractPropTypes<{
+            total: NumberConstructor;
+            defaultCurrent: NumberConstructor;
+            disabled: {
+                type: BooleanConstructor;
+                default: any;
+            };
+            current: NumberConstructor;
+            defaultPageSize: NumberConstructor;
+            pageSize: NumberConstructor;
+            hideOnSinglePage: {
+                type: BooleanConstructor;
+                default: any;
+            };
+            showSizeChanger: {
+                type: BooleanConstructor;
+                default: any;
+            };
+            pageSizeOptions: import("vue").PropType<(string | number)[]>;
+            buildOptionText: import("vue").PropType<(opt: {
+                value: any;
+            }) => any>;
+            showQuickJumper: {
+                type: import("vue").PropType<boolean | {
+                    goButton?: any;
+                }>;
+                default: boolean | {
+                    goButton?: any;
+                };
+            };
+            showTotal: import("vue").PropType<(total: number, range: [number, number]) => any>;
+            size: import("vue").PropType<"small" | "default">;
+            simple: {
+                type: BooleanConstructor;
+                default: any;
+            };
+            locale: ObjectConstructor;
+            prefixCls: StringConstructor;
+            selectPrefixCls: StringConstructor;
+            totalBoundaryShowSizeChanger: NumberConstructor;
+            selectComponentClass: StringConstructor;
+            itemRender: import("vue").PropType<(opt: {
+                page: number;
+                type: "page" | "prev" | "next" | "jump-prev" | "jump-next";
+                originalElement: any;
+            }) => any>;
+            role: StringConstructor;
+            responsive: BooleanConstructor;
+            showLessItems: {
+                type: BooleanConstructor;
+                default: any;
+            };
+            onChange: import("vue").PropType<(page: number, pageSize: number) => void>;
+            onShowSizeChange: import("vue").PropType<(current: number, size: number) => void>;
+            'onUpdate:current': import("vue").PropType<(current: number) => void>;
+            'onUpdate:pageSize': import("vue").PropType<(size: number) => void>;
+        }>>, "total" | "current" | "pageSize">;
+        visible: import("vue").ComputedRef<boolean>;
+        current: import("vue").Ref<number>;
+        pageSize: import("vue").Ref<number>;
+        total: import("vue").Ref<number>;
+        change: (nextCurrent: number) => void;
+        showSizeChange: (nextPageSize: number) => void;
+    };
+};

package/lib/hooks/useSpreadSheet.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpreadSheet = void 0;
+const s2_1 = require("@antv/s2");
+const vue_1 = require("vue");
+const options_1 = require("../utils/options");
+const useEvents_1 = require("./useEvents");
+const useLoading_1 = require("./useLoading");
+const usePagination_1 = require("./usePagination");
+const useResize_1 = require("./useResize");
+const useSheetUpdate_1 = require("./useSheetUpdate");
+function useSpreadSheet(props, emit) {
+    const { dataCfg, options, themeCfg, loading: loadingProps, sheetType, spreadsheet: customSpreadSheet, onMounted: onS2Mounted, } = props;
+    const wrapperRef = (0, vue_1.ref)();
+    const containerRef = (0, vue_1.ref)();
+    const s2Ref = (0, vue_1.shallowRef)();
+    const { loading, setLoading } = (0, useLoading_1.useLoading)(s2Ref, loadingProps);
+    const pagination = (0, usePagination_1.usePagination)(s2Ref, props);
+    const renderSpreadSheet = (container) => {
+        const rawDataCfg = (0, vue_1.toRaw)(dataCfg);
+        const rawOptions = (0, vue_1.toRaw)(options);
+        const s2Options = (0, options_1.getSheetComponentOptions)(rawOptions);
+        if (customSpreadSheet) {
+            return customSpreadSheet(container, rawDataCfg, s2Options);
+        }
+        if (sheetType === 'table' || sheetType === 'editable') {
+            return new s2_1.TableSheet(container, rawDataCfg, s2Options);
+        }
+        return new s2_1.PivotSheet(container, rawDataCfg, s2Options);
+    };
+    const buildSpreadSheet = async () => {
+        setLoading(true);
+        s2Ref.value = renderSpreadSheet(containerRef.value);
+        s2Ref.value.setThemeCfg((0, vue_1.toRaw)(themeCfg));
+        await s2Ref.value.render();
+        setLoading(false);
+        onS2Mounted?.(s2Ref.value);
+    };
+    (0, vue_1.onMounted)(buildSpreadSheet);
+    (0, useEvents_1.useEvents)(s2Ref, emit);
+    (0, useSheetUpdate_1.useSheetUpdate)(s2Ref, props, {
+        before() {
+            setLoading(true);
+        },
+        after() {
+            setLoading(false);
+        },
+    });
+    (0, useResize_1.useResize)(s2Ref, props, { wrapperRef, containerRef });
+    (0, vue_1.onBeforeUnmount)(() => {
+        setLoading(false);
+        s2Ref.value?.destroy();
+    });
+    return {
+        wrapperRef,
+        containerRef,
+        s2Ref,
+        loading,
+        setLoading,
+        pagination,
+    };
+}
+exports.useSpreadSheet = useSpreadSheet;
+//# sourceMappingURL=useSpreadSheet.js.map

package/lib/hooks/useSpreadSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpreadSheet.js","sourceRoot":"","sources":["../../src/hooks/useSpreadSheet.ts"],"names":[],"mappings":";;;AAAA,iCAKkB;AAClB,6BAAyE;AAGzE,8CAA4D;AAC5D,2CAAwC;AACxC,6CAA0C;AAC1C,mDAAgD;AAChD,2CAAwC;AACxC,qDAAkD;AAElD,SAAgB,cAAc,CAC5B,KAAqB,EACrB,IAAgC;IAEhC,MAAM,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EAAE,YAAY,EACrB,SAAS,EACT,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,WAAW,GACvB,GAAG,KAAK,CAAC;IACV,MAAM,UAAU,GAAG,IAAA,SAAG,GAAkB,CAAC;IACzC,MAAM,YAAY,GAAG,IAAA,SAAG,GAAkB,CAAC;IAE3C,MAAM,KAAK,GAAG,IAAA,gBAAU,GAAe,CAAC;IAExC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,IAAA,6BAAa,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE/C,MAAM,iBAAiB,GAAG,CAAC,SAAyB,EAAE,EAAE;QACtD,MAAM,UAAU,GAAG,IAAA,WAAK,EAAC,OAAQ,CAAC,CAAC;QACnC,MAAM,UAAU,GAAG,IAAA,WAAK,EAAC,OAAO,CAAC,CAAC;QAElC,MAAM,SAAS,GAAG,IAAA,kCAAwB,EAAC,UAAuB,CAAC,CAAC;QAEpE,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,iBAAiB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;QAC7D,CAAC;QAED,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO,IAAI,eAAU,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;QAC1D,CAAC;QAED,OAAO,IAAI,eAAU,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;QAClC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,YAAY,CAAC,KAAM,CAAC,CAAC;QACrD,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAA,WAAK,EAAC,QAAQ,CAAC,CAAC,CAAC;QACzC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAE3B,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAA,eAAS,EAAC,gBAAgB,CAAC,CAAC;IAC5B,IAAA,qBAAS,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACvB,IAAA,+BAAc,EAAC,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM;YACJ,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QACD,KAAK;YACH,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,IAAA,qBAAS,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtD,IAAA,qBAAe,EAAC,GAAG,EAAE;QACnB,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,UAAU;QACV,YAAY;QACZ,KAAK;QACL,OAAO;QACP,UAAU;QACV,UAAU;KACX,CAAC;AACJ,CAAC;AAzED,wCAyEC"}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import './utils/extendLocale';
+export * from './components';
+export * from './hooks/useExpose';
+export declare const version = "@antv/s2-vue-v2.0.0";