yc-pro-components 0.0.42 → 0.0.44

package/lib/components/virtual-table/src/index.vue.d.ts

@@ -0,0 +1,139 @@
+import { TableV2Instance } from 'element-plus';
+import { DefineComponent, ComputedRef, ShallowRef, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { ButtonsCallBackParams, ActionBarProps } from 'yc-pro-components/es/components/table';
+import { PlusVirtualTableProps, VirtualTableColumn } from './type';
+import { PageInfo, RecordType, PlusColumn } from 'yc-pro-components/es/types';
+import { PlusPaginationProps } from 'yc-pro-components/es/components/pagination';
+
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PlusVirtualTableProps>, {
+    columns: () => never[];
+    tableData: () => never[];
+    data: () => never[];
+    pagination: boolean;
+    actionBar: boolean;
+    hasIndexColumn: boolean;
+    isSelection: boolean;
+    loadingStatus: boolean;
+    rowKey: string;
+    defaultSize: string;
+    rowHeight: number;
+    headerHeight: number;
+    fixed: boolean;
+    defaultColumnWidth: number;
+    columnsEmptyText: string;
+    scrollbarAlwaysOn: boolean;
+    titleBar: boolean;
+    selectionColumnWidth: number;
+    indexColumnWidth: number;
+    stripe: boolean;
+    border: boolean;
+}>, {
+    getSelectionRows: () => RecordType[];
+    clearSelection: () => void;
+    toggleRowSelection: (row: RecordType, selected?: boolean | undefined) => void;
+    toggleAllSelection: (selected?: boolean | undefined) => void;
+    scrollToRow: (rowIndex: number) => void;
+    data: ComputedRef<RecordType[]>;
+    tableRef: ShallowRef< TableV2Instance | null>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    paginationChange: (pageInfo: PageInfo) => void;
+    clickAction: (data: ButtonsCallBackParams) => void;
+    "selection-change": (selection: RecordType[]) => void;
+    select: (selection: RecordType[], row: RecordType) => void;
+    "select-all": (selection: RecordType[]) => void;
+    refresh: () => void;
+    "row-click": (rowData: RecordType, rowIndex: number) => void;
+    "sort-change": (data: {
+        column: VirtualTableColumn;
+        prop: string;
+        order: string | null;
+    }) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PlusVirtualTableProps>, {
+    columns: () => never[];
+    tableData: () => never[];
+    data: () => never[];
+    pagination: boolean;
+    actionBar: boolean;
+    hasIndexColumn: boolean;
+    isSelection: boolean;
+    loadingStatus: boolean;
+    rowKey: string;
+    defaultSize: string;
+    rowHeight: number;
+    headerHeight: number;
+    fixed: boolean;
+    defaultColumnWidth: number;
+    columnsEmptyText: string;
+    scrollbarAlwaysOn: boolean;
+    titleBar: boolean;
+    selectionColumnWidth: number;
+    indexColumnWidth: number;
+    stripe: boolean;
+    border: boolean;
+}>>> & {
+    onSelect?: ((selection: RecordType[], row: RecordType) => any) | undefined;
+    onClickAction?: ((data: ButtonsCallBackParams) => any) | undefined;
+    "onSelect-all"?: ((selection: RecordType[]) => any) | undefined;
+    "onSelection-change"?: ((selection: RecordType[]) => any) | undefined;
+    "onSort-change"?: ((data: {
+        column: VirtualTableColumn;
+        prop: string;
+        order: string | null;
+    }) => any) | undefined;
+    "onRow-click"?: ((rowData: RecordType, rowIndex: number) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
+    onPaginationChange?: ((pageInfo: PageInfo) => any) | undefined;
+}, {
+    fixed: boolean;
+    data: RecordType[];
+    columns: PlusColumn[];
+    border: boolean;
+    rowKey: string;
+    actionBar: false | Partial< ActionBarProps>;
+    stripe: boolean;
+    scrollbarAlwaysOn: boolean;
+    titleBar: boolean | {
+        title?: string | undefined;
+        refresh?: boolean | undefined;
+    };
+    defaultSize: "" | "default" | "small" | "large";
+    tableData: RecordType[];
+    pagination: false | Partial<PlusPaginationProps>;
+    hasIndexColumn: boolean;
+    isSelection: boolean;
+    loadingStatus: boolean;
+    columnsEmptyText: string;
+    headerHeight: number;
+    rowHeight: number;
+    defaultColumnWidth: number;
+    selectionColumnWidth: number;
+    indexColumnWidth: number;
+}, {}>, {
+    title?(_: {}): any;
+    toolbar?(_: {}): any;
+    "pagination-left"?(_: {}): any;
+    "pagination-right"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/virtual-table/src/index.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_vue_vue_type_script_setup_true_lang = require('./index.vue2.js');
+var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+var _VirtualTable = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__file", "index.vue"]]);
+
+exports.default = _VirtualTable;

package/lib/components/virtual-table/src/index.vue2.js

@@ -0,0 +1,331 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var ElementPlusIconsVue = require('@element-plus/icons-vue');
+var index = require('../../pagination/index.js');
+var page = require('../../../constants/page.js');
+var useColumnAdapter = require('./use-column-adapter.js');
+var useVirtualSelection = require('./use-virtual-selection.js');
+var useVirtualScroll = require('./use-virtual-scroll.js');
+
+const _hoisted_1 = {
+  key: 0,
+  class: "plus-virtual-table__title-bar"
+};
+const _hoisted_2 = { class: "plus-virtual-table__title-bar__left" };
+const _hoisted_3 = {
+  key: 0,
+  class: "plus-virtual-table__title-bar__text"
+};
+const _hoisted_4 = { class: "plus-virtual-table__title-bar__right" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusVirtualTable",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: {
+    columns: { default: () => [] },
+    tableData: { default: () => [] },
+    data: { default: () => [] },
+    pagination: { type: [Boolean, Object], default: false },
+    actionBar: { type: [Boolean, Object], default: false },
+    hasIndexColumn: { type: Boolean, default: false },
+    isSelection: { type: Boolean, default: false },
+    loadingStatus: { type: Boolean, default: false },
+    height: {},
+    width: {},
+    headerCellStyle: {},
+    rowKey: { default: "id" },
+    defaultSize: { default: "default" },
+    rowHeight: { default: 50 },
+    headerHeight: { default: 50 },
+    fixed: { type: Boolean, default: true },
+    defaultColumnWidth: { default: 150 },
+    columnsEmptyText: { default: "-" },
+    rowClass: {},
+    rowStyle: {},
+    scrollbarAlwaysOn: { type: Boolean, default: true },
+    titleBar: { type: [Boolean, Object], default: false },
+    selectionColumnWidth: { default: 50 },
+    indexColumnWidth: { default: 60 },
+    stripe: { type: Boolean, default: false },
+    border: { type: Boolean, default: false }
+  },
+  emits: ["paginationChange", "clickAction", "selection-change", "select", "select-all", "refresh", "row-click", "sort-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const tableData = vue.computed(() => {
+      var _a2;
+      return ((_a2 = props.tableData) == null ? void 0 : _a2.length) ? props.tableData : props.data;
+    });
+    const state = vue.reactive({
+      subPageInfo: {
+        ...((_a = props.pagination) == null ? void 0 : _a.modelValue) || page.DefaultPageInfo
+      }
+    });
+    vue.watch(
+      () => {
+        var _a2;
+        return (_a2 = props.pagination) == null ? void 0 : _a2.modelValue;
+      },
+      (newVal) => {
+        if (newVal) {
+          Object.assign(state.subPageInfo, newVal);
+        }
+      },
+      { deep: true }
+    );
+    const {
+      tableRef,
+      wrapperRef,
+      scrollToRow,
+      useAutoResizer,
+      containerStyle,
+      rowHeight,
+      headerHeight,
+      containerWidth
+    } = useVirtualScroll.useVirtualScroll({
+      height: () => props.height,
+      width: () => props.width,
+      rowHeight: () => props.rowHeight,
+      headerHeight: () => props.headerHeight
+    });
+    const selectionComposable = useVirtualSelection.useVirtualSelection({
+      rowKey: () => props.rowKey,
+      data: () => tableData.value,
+      onSelectionChange: (selection) => {
+        emit("selection-change", selection);
+      },
+      onSelect: (selection, row) => {
+        emit("select", selection, row);
+      },
+      onSelectAll: (selection) => {
+        emit("select-all", selection);
+      }
+    });
+    const { virtualColumns } = useColumnAdapter.useColumnAdapter({
+      columns: () => props.columns,
+      isSelection: () => props.isSelection,
+      hasIndexColumn: () => props.hasIndexColumn,
+      actionBar: () => props.actionBar,
+      rowKey: () => props.rowKey,
+      defaultColumnWidth: () => props.defaultColumnWidth,
+      columnsEmptyText: () => props.columnsEmptyText,
+      containerWidth: () => containerWidth.value,
+      pageInfo: () => {
+        if (!props.pagination) return void 0;
+        return state.subPageInfo;
+      },
+      selectionColumnWidth: () => props.selectionColumnWidth,
+      indexColumnWidth: () => props.indexColumnWidth,
+      selectionCellRenderer: () => selectionComposable.selectionCellRenderer,
+      selectionHeaderRenderer: () => selectionComposable.selectionHeaderRenderer,
+      onClickAction: (params) => {
+        emit("clickAction", params);
+      }
+    });
+    const showTitleBar = vue.computed(() => !!props.titleBar);
+    const titleBarConfig = vue.computed(() => {
+      if (typeof props.titleBar === "object") {
+        return props.titleBar;
+      }
+      return { refresh: false };
+    });
+    const fixedWidth = vue.computed(() => {
+      const w = props.width;
+      if (typeof w === "number") return w;
+      if (typeof w === "string") return parseInt(w, 10) || 700;
+      return 700;
+    });
+    const fixedHeight = vue.computed(() => {
+      const h = props.height;
+      if (typeof h === "number") return h;
+      if (typeof h === "string") return parseInt(h, 10) || 400;
+      return 400;
+    });
+    const rowEventHandlers = vue.computed(() => ({
+      onClick: (params) => {
+        emit("row-click", params.rowData, params.rowIndex);
+      }
+    }));
+    const wrapperClass = vue.computed(() => [
+      "plus-virtual-table",
+      {
+        "plus-virtual-table--striped": props.stripe,
+        "plus-virtual-table--border": props.border
+      }
+    ]);
+    const mergedRowClass = vue.computed(() => {
+      return (params) => {
+        const classes = [];
+        if (props.stripe && params.rowIndex % 2 === 1) {
+          classes.push("plus-virtual-table__row--striped");
+        }
+        const userClass = props.rowClass;
+        if (typeof userClass === "string") {
+          classes.push(userClass);
+        } else if (typeof userClass === "function") {
+          const result = userClass(params);
+          if (result) classes.push(result);
+        }
+        return classes.join(" ");
+      };
+    });
+    const headerClass = vue.computed(() => "plus-virtual-table__header");
+    const handlePaginationChange = () => {
+      emit("paginationChange", { ...state.subPageInfo });
+    };
+    const handleRefresh = () => {
+      emit("refresh");
+    };
+    const { subPageInfo } = vue.toRefs(state);
+    __expose({
+      getSelectionRows: selectionComposable.getSelectionRows,
+      clearSelection: selectionComposable.clearSelection,
+      toggleRowSelection: selectionComposable.toggleRowSelection,
+      toggleAllSelection: selectionComposable.toggleAllSelection,
+      scrollToRow,
+      data: tableData,
+      tableRef
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref_key: "wrapperRef",
+          ref: wrapperRef,
+          class: vue.normalizeClass(wrapperClass.value)
+        },
+        [
+          vue.createCommentVNode(" \u6807\u9898\u680F\uFF08\u7B80\u5316\u7248\uFF09 "),
+          showTitleBar.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                titleBarConfig.value.title ? (vue.openBlock(), vue.createElementBlock(
+                  "span",
+                  _hoisted_3,
+                  vue.toDisplayString(titleBarConfig.value.title),
+                  1
+                  /* TEXT */
+                )) : vue.createCommentVNode("v-if", true)
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.renderSlot(_ctx.$slots, "toolbar"),
+              titleBarConfig.value.refresh ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 0,
+                class: "plus-virtual-table__title-bar__refresh",
+                size: 16,
+                onClick: handleRefresh
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(ElementPlusIconsVue.Refresh))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : vue.createCommentVNode("v-if", true)
+            ])
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u8868\u683C\u4E3B\u4F53 "),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              class: "plus-virtual-table__body",
+              style: vue.normalizeStyle(vue.unref(containerStyle))
+            },
+            [
+              vue.createCommentVNode(" \u81EA\u9002\u5E94\u6A21\u5F0F\uFF1A\u4F7F\u7528 AutoResizer \u81EA\u52A8\u83B7\u53D6\u7236\u5BB9\u5668\u5C3A\u5BF8 "),
+              vue.unref(useAutoResizer) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElAutoResizer), { key: 0 }, {
+                default: vue.withCtx(({ height: autoHeight, width: autoWidth }) => [
+                  vue.createVNode(vue.unref(elementPlus.ElTableV2), {
+                    ref_key: "tableRef",
+                    ref: tableRef,
+                    columns: vue.unref(virtualColumns),
+                    data: tableData.value,
+                    width: autoWidth,
+                    height: autoHeight,
+                    fixed: _ctx.fixed,
+                    "row-key": _ctx.rowKey,
+                    "row-height": vue.unref(rowHeight),
+                    "header-height": vue.unref(headerHeight),
+                    "row-class": mergedRowClass.value,
+                    "row-event-handlers": rowEventHandlers.value,
+                    "scrollbar-always-on": _ctx.scrollbarAlwaysOn,
+                    "header-class": headerClass.value
+                  }, null, 8, ["columns", "data", "width", "height", "fixed", "row-key", "row-height", "header-height", "row-class", "row-event-handlers", "scrollbar-always-on", "header-class"])
+                ]),
+                _: 1
+                /* STABLE */
+              })) : (vue.openBlock(), vue.createElementBlock(
+                vue.Fragment,
+                { key: 1 },
+                [
+                  vue.createCommentVNode(" \u56FA\u5B9A\u5C3A\u5BF8\u6A21\u5F0F\uFF1A\u76F4\u63A5\u4F7F\u7528\u6307\u5B9A\u7684\u5BBD\u9AD8 "),
+                  vue.createVNode(vue.unref(elementPlus.ElTableV2), {
+                    ref_key: "tableRef",
+                    ref: tableRef,
+                    columns: vue.unref(virtualColumns),
+                    data: tableData.value,
+                    width: fixedWidth.value,
+                    height: fixedHeight.value,
+                    fixed: _ctx.fixed,
+                    "row-key": _ctx.rowKey,
+                    "row-height": vue.unref(rowHeight),
+                    "header-height": vue.unref(headerHeight),
+                    "row-class": mergedRowClass.value,
+                    "row-event-handlers": rowEventHandlers.value,
+                    "scrollbar-always-on": _ctx.scrollbarAlwaysOn,
+                    "header-class": headerClass.value
+                  }, null, 8, ["columns", "data", "width", "height", "fixed", "row-key", "row-height", "header-height", "row-class", "row-event-handlers", "scrollbar-always-on", "header-class"])
+                ],
+                2112
+                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+              ))
+            ],
+            4
+            /* STYLE */
+          )), [
+            [vue.unref(elementPlus.vLoading), _ctx.loadingStatus]
+          ]),
+          vue.createCommentVNode(" \u5206\u9875 "),
+          _ctx.pagination ? (vue.openBlock(), vue.createBlock(vue.unref(index.PlusPagination), vue.mergeProps({
+            key: 1,
+            modelValue: vue.unref(subPageInfo),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(subPageInfo) ? subPageInfo.value = $event : null)
+          }, _ctx.pagination, {
+            class: "plus-virtual-table__pagination",
+            onChange: handlePaginationChange
+          }), vue.createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots["pagination-left"] ? {
+              name: "pagination-left",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "pagination-left")
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["pagination-right"] ? {
+              name: "pagination-right",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "pagination-right")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["modelValue"])) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;