hfn-components 0.6.5 → 0.6.7

package/es/components/htTable/src/composables/use-selection.mjs

@@ -0,0 +1,58 @@
+import { watch, nextTick } from 'vue';
+
+function useSelection(options, onSelectionChange) {
+  const { tableRef, dataSource, selectedRows, rowKey } = options;
+  const handleSelectionChange = (rows) => {
+    onSelectionChange(rows);
+  };
+  const findRow = (item) => {
+    return dataSource().find((r) => r[rowKey()] === item[rowKey()]);
+  };
+  watch(
+    dataSource,
+    () => {
+      nextTick(() => {
+        if (!rowKey() || !selectedRows().length) return;
+        selectedRows().forEach((item) => {
+          const row = findRow(item);
+          if (row) {
+            tableRef.value?.toggleRowSelection(row, true);
+          }
+        });
+      });
+    },
+    { immediate: true }
+  );
+  watch(
+    selectedRows,
+    (newRows, oldRows) => {
+      nextTick(() => {
+        if (!rowKey()) return;
+        const oldSet = new Set((oldRows || []).map((r) => r[rowKey()]));
+        const newSet = new Set(newRows.map((r) => r[rowKey()]));
+        newRows.forEach((item) => {
+          if (!oldSet.has(item[rowKey()])) {
+            const row = findRow(item);
+            if (row) {
+              tableRef.value?.toggleRowSelection(row, true);
+            }
+          }
+        });
+        (oldRows || []).forEach((item) => {
+          if (!newSet.has(item[rowKey()])) {
+            const row = findRow(item);
+            if (row) {
+              tableRef.value?.toggleRowSelection(row, false);
+            }
+          }
+        });
+      });
+    },
+    { deep: true }
+  );
+  return {
+    handleSelectionChange
+  };
+}
+
+export { useSelection };

package/es/components/{elTable/src/elTable.d.ts → htTable/src/htTable.d.ts}

@@ -1,12 +1,30 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import type { clounmKyeType, dealKeyType } from 'hfn-components/es/constants';
+interface FilterOption {
+    text: string;
+    value: string;
+}
+export interface PaginationConfig {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    pageSizes?: number[];
+    layout?: string;
+}
 export interface ElTableColumns {
     key: clounmKyeType;
-    dealType: dealKeyType;
+    dataKey?: string;
+    dealType?: dealKeyType;
     dealFunction?: Function;
-    width: string | number;
+    width?: string | number;
     customizeLabel?: string;
     slot?: string;
+    headerSlot?: string;
+    sortable?: boolean | 'custom';
+    filterable?: boolean;
+    filters?: FilterOption[];
+    copyable?: boolean;
+    headerAlign?: 'left' | 'center' | 'right';
 }
 export declare const elTableProps: {
     readonly dataSource: {
@@ -29,10 +47,26 @@ export declare const elTableProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: PropType<PaginationConfig>;
+        readonly default: undefined;
+    };
 };
 export declare const columnDealProps: {
     readonly dealType: {
-        readonly type: PropType<"colorPercentage" | "percentage" | "basicText4" | "notProcessed" | "colorText" | "percentage4" | "absPercentage" | "thoundsandText2" | "thoundsandText4" | "other" | "customDeal" | "customSlot">;
+        readonly type: PropType<dealKeyType>;
         readonly default: "";
     };
     readonly text: {
@@ -47,10 +81,7 @@ export declare const columnDealProps: {
         readonly type: ObjectConstructor;
         readonly default: () => void;
     };
-    readonly slot: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
 };
 export type ElTableProps = ExtractPropTypes<typeof elTableProps>;
 export type ColumnDealProps = ExtractPropTypes<typeof columnDealProps>;
+export {};

package/es/components/{elTable/src/elTable.mjs → htTable/src/htTable.mjs}

@@ -19,6 +19,28 @@ const elTableProps = {
     type: Boolean,
     default: true
     // 默认允许手动拉伸列宽
+  },
+  // 多选相关
+  selectable: {
+    type: Boolean,
+    default: false
+    // 是否显示多选列
+  },
+  rowKey: {
+    type: String,
+    default: ""
+    // 行数据唯一标识字段
+  },
+  selectedRows: {
+    type: Array,
+    default: () => []
+    // 外部传入要选中的行
+  },
+  // 分页相关
+  pagination: {
+    type: Object,
+    default: void 0
+    // 不传则不显示分页
   }
 };
 const columnDealProps = {
@@ -39,10 +61,6 @@ const columnDealProps = {
     type: Object,
     default: () => {
     }
-  },
-  slot: {
-    type: String,
-    default: ""
   }
 };
 

package/es/components/htTable/src/htTable.vue.d.ts

@@ -0,0 +1,115 @@
+declare function __VLS_template(): Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
+    text: any;
+    row: any;
+}) => any>>;
+declare const __VLS_component: import("vue").DefineComponent<{
+    readonly dataSource: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly tableColumn: {
+        readonly type: import("vue").PropType<import("./htTable").ElTableColumns[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly headerColor: {
+        readonly type: StringConstructor;
+        readonly default: "#f0f0f0";
+    };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<import("./htTable").PaginationConfig>;
+        readonly default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection-change": (rows: any[]) => void;
+    "sort-change": (args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => void;
+    "filter-change": (args_0: Record<string, string[]>) => void;
+    "page-change": (current: number) => void;
+    "size-change": (pageSize: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly dataSource: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly tableColumn: {
+        readonly type: import("vue").PropType<import("./htTable").ElTableColumns[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly headerColor: {
+        readonly type: StringConstructor;
+        readonly default: "#f0f0f0";
+    };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<import("./htTable").PaginationConfig>;
+        readonly default: undefined;
+    };
+}>> & {
+    "onSelection-change"?: ((rows: any[]) => any) | undefined;
+    "onSort-change"?: ((args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => any) | undefined;
+    "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+    "onPage-change"?: ((current: number) => any) | undefined;
+    "onSize-change"?: ((pageSize: number) => any) | undefined;
+}, {
+    readonly dataSource: unknown[];
+    readonly tableColumn: import("./htTable").ElTableColumns[];
+    readonly loading: boolean;
+    readonly headerColor: string;
+    readonly resizable: boolean;
+    readonly selectable: boolean;
+    readonly rowKey: string;
+    readonly selectedRows: unknown[];
+    readonly pagination: import("./htTable").PaginationConfig;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/htTable/src/htTable.vue.mjs

@@ -0,0 +1,216 @@
+import _sfc_main from './htTable.vue2.mjs';
+import { openBlock, createElementBlock, withDirectives, createBlock, withCtx, createCommentVNode, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, renderSlot, createVNode, withModifiers } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = { class: "ht-table-wrapper" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { key: 2 };
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = { style: { "padding": "20px 0", "text-align": "center" } };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = /* @__PURE__ */ createElementVNode(
+  "p",
+  { style: { "margin": "8px 0 0", "color": "#999", "font-size": "14px" } },
+  "\u6682\u65E0\u6570\u636E",
+  -1
+  /* HOISTED */
+);
+const _hoisted_9 = {
+  key: 0,
+  class: "ht-table-pagination"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    withDirectives((openBlock(), createBlock($setup["ElTable"], {
+      ref: "tableRef",
+      data: $setup.props.dataSource,
+      "row-key": $setup.props.rowKey || void 0,
+      style: { "width": "100%" },
+      height: "100%",
+      "header-cell-style": {
+        background: $setup.props.headerColor,
+        color: "#000",
+        "font-weight": 500,
+        "font-size": "12px"
+      },
+      onSortChange: $setup.handleSortChange,
+      onFilterChange: $setup.handleFilterChange,
+      onSelectionChange: $setup.handleSelectionChange
+    }, {
+      empty: withCtx(() => [
+        createElementVNode("div", _hoisted_6, [
+          createElementVNode("img", {
+            src: $setup.EmptySimple,
+            alt: "\u6682\u65E0\u6570\u636E"
+          }, null, 8, _hoisted_7),
+          _hoisted_8
+        ])
+      ]),
+      default: withCtx(() => [
+        $setup.props.selectable ? (openBlock(), createBlock($setup["ElTableColumn"], {
+          key: 0,
+          type: "selection",
+          width: "32",
+          "reserve-selection": true
+        })) : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList($setup.props.tableColumn, (item) => {
+            return openBlock(), createBlock($setup["ElTableColumn"], {
+              key: item.key,
+              prop: item.dataKey || item.key,
+              "column-key": item.dataKey || item.key,
+              width: item.width,
+              sortable: item.sortable || false,
+              filters: item.filters,
+              "filter-multiple": true,
+              "header-align": item.headerAlign || "left",
+              "show-overflow-tooltip": ""
+            }, {
+              header: withCtx(() => [
+                createCommentVNode(" \u81EA\u5B9A\u4E49\u8868\u5934\u63D2\u69FD "),
+                item.headerSlot ? renderSlot(_ctx.$slots, item.headerSlot, { key: 0 }) : item.customizeLabel ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  [
+                    createCommentVNode(" \u539F\u6709\u8868\u5934\u903B\u8F91 "),
+                    createElementVNode("span", null, [
+                      item.customizeLabel === "target" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                        createElementVNode(
+                          "div",
+                          null,
+                          toDisplayString($setup.targetHead.filter((items) => items.key === item.key.split("_")[0])[0].name),
+                          1
+                          /* TEXT */
+                        ),
+                        createElementVNode(
+                          "div",
+                          null,
+                          toDisplayString($setup.TARGET_END_KEY.filter((items) => items.key === item.key.split("_")[1])[0].name),
+                          1
+                          /* TEXT */
+                        )
+                      ])) : (openBlock(), createElementBlock(
+                        "div",
+                        _hoisted_3,
+                        toDisplayString(item.customizeLabel),
+                        1
+                        /* TEXT */
+                      ))
+                    ])
+                  ],
+                  2112
+                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                )) : (openBlock(), createElementBlock(
+                  "span",
+                  _hoisted_4,
+                  toDisplayString($setup.TABLE_KEY[item.key]),
+                  1
+                  /* TEXT */
+                ))
+              ]),
+              default: withCtx((scope) => [
+                createElementVNode(
+                  "span",
+                  {
+                    class: normalizeClass({ "ht-table-cell-copy": item.copyable })
+                  },
+                  [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: normalizeClass({ "ht-table-cell-text": item.copyable })
+                      },
+                      [
+                        item.key === "index" ? (openBlock(), createElementBlock(
+                          "span",
+                          _hoisted_5,
+                          toDisplayString($setup.getRowIndex(scope.$index)),
+                          1
+                          /* TEXT */
+                        )) : item.dealType === "customSlot" ? renderSlot(_ctx.$slots, item.slot, {
+                          key: 1,
+                          text: item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key),
+                          row: scope.row
+                        }) : item.dealType === "other" ? (openBlock(), createBlock($setup["ColumnDeal"], {
+                          key: 2,
+                          dealType: scope.row.dealType,
+                          text: item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key)
+                        }, null, 8, ["dealType", "text"])) : (openBlock(), createBlock($setup["ColumnDeal"], {
+                          key: 3,
+                          dealType: item.dealType || "notProcessed",
+                          text: item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key),
+                          row: scope.row,
+                          "deal-function": item.dealFunction
+                        }, null, 8, ["dealType", "text", "row", "deal-function"]))
+                      ],
+                      2
+                      /* CLASS */
+                    ),
+                    item.copyable ? (openBlock(), createBlock(
+                      $setup["ElTooltip"],
+                      {
+                        key: 0,
+                        content: "\u590D\u5236",
+                        placement: "top",
+                        "show-after": 300
+                      },
+                      {
+                        default: withCtx(() => [
+                          createVNode($setup["ElIcon"], {
+                            class: "ht-copy-icon",
+                            onClick: withModifiers(($event) => $setup.handleCopy(item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key)), ["stop"]),
+                            onMouseenter: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, {
+                            default: withCtx(() => [
+                              createVNode($setup["CopyDocument"])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["onClick"])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      },
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["prop", "column-key", "width", "sortable", "filters", "header-align"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["data", "row-key", "header-cell-style", "onSelectionChange"])), [
+      [$setup["vLoading"], $setup.props.loading]
+    ]),
+    createCommentVNode(" \u5206\u9875\u5668 "),
+    $setup.props.pagination ? (openBlock(), createElementBlock("div", _hoisted_9, [
+      createVNode($setup["ElPagination"], {
+        background: "",
+        "current-page": $setup.currentPage,
+        "page-size": $setup.pageSize,
+        "page-sizes": $setup.props.pagination.pageSizes || [10, 20, 30, 50, 100],
+        layout: $setup.props.pagination.layout || "total, prev, pager, next, sizes, jumper",
+        total: $setup.total,
+        onCurrentChange: $setup.handleCurrentChange,
+        onSizeChange: $setup.handleSizeChange
+      }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total"])
+    ])) : createCommentVNode("v-if", true)
+  ]);
+}
+var elTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/htTable/src/htTable.vue"]]);
+
+export { elTable as default };

package/es/components/htTable/src/htTable.vue2.mjs

@@ -0,0 +1,84 @@
+import { defineComponent, ref } from 'vue';
+import { vLoading, ElTooltip, ElIcon, ElPagination, ElTableColumn, ElTable } from 'element-plus';
+import { CopyDocument } from '@element-plus/icons-vue';
+import { TABLE_KEY } from '../../../constants/table.mjs';
+import { TARGET_END_KEY } from '../../../constants/target.mjs';
+import '../../../constants/chartConfig.mjs';
+import EmptySimple from '../../../icons/svg/empty-simple.svg.mjs';
+import { getTargetHeadWithYears, convertKey } from '../../../utils/table.mjs';
+import ColumnDeal from './columnDeal.vue.mjs';
+import { elTableProps } from './htTable.mjs';
+import { useSelection } from './composables/use-selection.mjs';
+import { usePagination } from './composables/use-pagination.mjs';
+import { useCopy } from './composables/use-copy.mjs';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "HtTable"
+  },
+  __name: "htTable",
+  props: elTableProps,
+  emits: ["sort-change", "filter-change", "selection-change", "page-change", "size-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const emit = __emit;
+    const props = __props;
+    const tableRef = ref();
+    const handleSortChange = ({ prop, order }) => {
+      emit("sort-change", { field: prop, order });
+    };
+    const handleFilterChange = (filters) => {
+      emit("filter-change", filters);
+    };
+    const { handleSelectionChange } = useSelection(
+      {
+        tableRef,
+        dataSource: () => props.dataSource,
+        selectedRows: () => props.selectedRows,
+        rowKey: () => props.rowKey
+      },
+      (rows) => emit("selection-change", rows)
+    );
+    const targetHead = getTargetHeadWithYears();
+    const {
+      currentPage,
+      pageSize,
+      total,
+      getRowIndex,
+      handleCurrentChange: onCurrentChange,
+      handleSizeChange: onSizeChange
+    } = usePagination({
+      pagination: () => props.pagination
+    });
+    const handleCurrentChange = (page) => onCurrentChange(page, emit);
+    const handleSizeChange = (size) => onSizeChange(size, emit);
+    const { handleCopy } = useCopy();
+    const __returned__ = { emit, props, tableRef, handleSortChange, handleFilterChange, handleSelectionChange, targetHead, currentPage, pageSize, total, getRowIndex, onCurrentChange, onSizeChange, handleCurrentChange, handleSizeChange, handleCopy, get ElTable() {
+      return ElTable;
+    }, get ElTableColumn() {
+      return ElTableColumn;
+    }, get ElPagination() {
+      return ElPagination;
+    }, get ElIcon() {
+      return ElIcon;
+    }, get ElTooltip() {
+      return ElTooltip;
+    }, get vLoading() {
+      return vLoading;
+    }, get CopyDocument() {
+      return CopyDocument;
+    }, get TABLE_KEY() {
+      return TABLE_KEY;
+    }, get TARGET_END_KEY() {
+      return TARGET_END_KEY;
+    }, get EmptySimple() {
+      return EmptySimple;
+    }, get convertKey() {
+      return convertKey;
+    }, ColumnDeal };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+export { _sfc_main as default };