ele-admin-plus 1.0.0-beta.1

package/lib/ele-pro-table/props.d.ts

@@ -0,0 +1,215 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { ToolbarTheme } from '../ele-toolbar/types';
+import type { Column, Columns, DataItem, Where, Datasource, RequestOption, ResponseOption, ParseData, Sorter, Filter, Pagination, DoneParams, TableTool, TableSize, RowClickChecked, TableLocale } from './types';
+/**
+ * 属性
+ */
+export declare const proTableProps: {
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    columns: {
+        type: PropType<Columns>;
+        required: boolean;
+    };
+    datasource: {
+        type: PropType<Datasource>;
+        required: boolean;
+    };
+    where: PropType<Where>;
+    request: PropType<RequestOption>;
+    response: PropType<ResponseOption>;
+    parseData: PropType<ParseData>;
+    ascendingValue: StringConstructor;
+    descendingValue: StringConstructor;
+    loadOnCreated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadOnChanged: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: BooleanConstructor;
+    selections: PropType<DataItem[]>;
+    current: PropType<DataItem | null>;
+    toolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    toolbarTheme: PropType<ToolbarTheme>;
+    toolbarStyle: PropType<CSSProperties>;
+    toolbarForm: BooleanConstructor;
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    tools: {
+        type: PropType<TableTool[]>;
+        default: () => TableTool[];
+    };
+    columnSortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    columnFixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximizedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maximizedHeight: (StringConstructor | NumberConstructor)[];
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowClickChecked: PropType<RowClickChecked>;
+    tableStyle: PropType<CSSProperties>;
+    footerStyle: PropType<CSSProperties>;
+    pagination: {
+        type: PropType<boolean | Pagination>;
+        default: boolean;
+    };
+    cacheKey: StringConstructor;
+    locale: PropType<TableLocale>;
+    data: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    size: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    width: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stripe: BooleanConstructor;
+    rowKey: PropType<string | ((row: any) => string) | undefined>;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: PropType<import("element-plus/es/components/table/src/table/defaults").SummaryMethod<any> | undefined>;
+    rowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    rowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    cellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    cellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    headerRowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    headerRowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    headerCellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    highlightCurrentRow: BooleanConstructor;
+    currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
+    expandRowKeys: PropType<any[] | undefined>;
+    defaultExpandAll: BooleanConstructor;
+    defaultSort: PropType<import("element-plus/es/components/table/src/table/defaults").Sort | undefined>;
+    tooltipEffect: StringConstructor;
+    tooltipOptions: PropType<Partial<Pick<import("element-plus").ElTooltipProps, "showArrow" | "effect" | "enterable" | "popperClass" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">> | undefined>;
+    spanMethod: PropType<((data: {
+        row: any;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined) | undefined>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: PropType<{
+            hasChildren?: string | undefined;
+            children?: string | undefined;
+        } | undefined>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+        };
+    };
+    lazy: BooleanConstructor;
+    load: PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+    style: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    tableLayout: {
+        type: PropType<"fixed" | "auto">;
+        default: string;
+    };
+    scrollbarAlwaysOn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexible: BooleanConstructor;
+};
+export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
+/**
+ * 事件
+ */
+export declare const tableEmits: {
+    select: (_selection: DataItem[], _row: DataItem) => boolean;
+    selectAll: (_selection: DataItem[]) => boolean;
+    selectionChange: (_selection: DataItem[]) => boolean;
+    cellMouseEnter: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellMouseLeave: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellClick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellDblclick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellContextmenu: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    rowClick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowContextmenu: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowDblclick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    headerClick: (_column: Column, _e: MouseEvent) => boolean;
+    headerContextmenu: (_column: Column, _e: MouseEvent) => boolean;
+    sortChange: (_sorter: Sorter) => boolean;
+    filterChange: (_filter: Filter) => boolean;
+    currentChange: (_current?: DataItem, _old?: DataItem) => boolean;
+    headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
+    expandChange: (_row: DataItem, _expanded: boolean) => boolean;
+};
+export declare const proTableEmits: {
+    done: (_result: DoneParams<DataItem>, _parent?: DataItem) => boolean;
+    'update:selections': (_selections: DataItem[]) => boolean;
+    'update:current': (_current?: DataItem | null) => boolean;
+    columnsChange: (_columns: Columns) => boolean;
+    sizeChange: (_size: TableSize) => boolean;
+    maximizedChange: (_maximized: boolean) => boolean;
+    refresh: () => boolean;
+    select: (_selection: DataItem[], _row: DataItem) => boolean;
+    selectAll: (_selection: DataItem[]) => boolean;
+    selectionChange: (_selection: DataItem[]) => boolean;
+    cellMouseEnter: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellMouseLeave: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellClick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellDblclick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellContextmenu: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    rowClick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowContextmenu: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowDblclick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    headerClick: (_column: Column, _e: MouseEvent) => boolean;
+    headerContextmenu: (_column: Column, _e: MouseEvent) => boolean;
+    sortChange: (_sorter: Sorter) => boolean;
+    filterChange: (_filter: Filter) => boolean;
+    currentChange: (_current?: DataItem, _old?: DataItem) => boolean;
+    headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
+    expandChange: (_row: DataItem, _expanded: boolean) => boolean;
+};

package/lib/ele-pro-table/props.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tableProps = require("element-plus/es/components/table/src/table/defaults");
+const proTableProps = {
+  ...tableProps,
+  border: {
+    type: Boolean,
+    default: true
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    required: true
+  },
+  // 数据源
+  datasource: {
+    type: [Array, Function],
+    required: true
+  },
+  // 默认请求参数
+  where: Object,
+  // 自定义请求参数名称
+  request: Object,
+  // 自定义响应参数名称
+  response: Object,
+  // 自定义响应数据解析
+  parseData: Function,
+  // 升序的排序值
+  ascendingValue: String,
+  // 降序的排序值
+  descendingValue: String,
+  // 初始是否请求数据
+  loadOnCreated: {
+    type: Boolean,
+    default: true
+  },
+  // 是否在排序和筛选改变后自动刷新
+  loadOnChanged: {
+    type: Boolean,
+    default: true
+  },
+  // 数据请求状态
+  loading: Boolean,
+  // 多选选中的数据
+  selections: Array,
+  // 单选选中的数据
+  current: Object,
+  // 是否开启顶部工具栏
+  toolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 表头工具栏主题
+  toolbarTheme: String,
+  // 表头工具栏样式
+  toolbarStyle: Object,
+  // 表头工具栏是否是表单
+  toolbarForm: Boolean,
+  // 标题
+  title: String,
+  // 副标题
+  subtitle: String,
+  // 表头工具按钮布局
+  tools: {
+    type: Array,
+    default: () => {
+      return ["reload", "size", "columns", "maximized"];
+    }
+  },
+  // 列配置是否可拖拽排序
+  columnSortable: {
+    type: Boolean,
+    default: true
+  },
+  // 列配置是否可固定列
+  columnFixed: {
+    type: Boolean,
+    default: true
+  },
+  // 表格全屏时的层级
+  maximizedIndex: {
+    type: Number,
+    default: 999
+  },
+  // 表格全屏状态的高度
+  maximizedHeight: [String, Number],
+  // 表头内容超出省略
+  headerEllipsis: {
+    type: Boolean,
+    default: true
+  },
+  // 多选时行点击选中
+  rowClickChecked: [Boolean, String],
+  // 自定义表格样式
+  tableStyle: Object,
+  // 自定义底部样式
+  footerStyle: Object,
+  // 分页组件
+  pagination: {
+    type: [Boolean, Object],
+    default: true
+  },
+  // 列配置缓存名称
+  cacheKey: String,
+  // 国际化
+  locale: Object
+};
+const tableEmits = {
+  select: (_selection, _row) => true,
+  selectAll: (_selection) => true,
+  selectionChange: (_selection) => true,
+  cellMouseEnter: (_row, _column, _cell, _e) => true,
+  cellMouseLeave: (_row, _column, _cell, _e) => true,
+  cellClick: (_row, _column, _cell, _e) => true,
+  cellDblclick: (_row, _column, _cell, _e) => true,
+  cellContextmenu: (_row, _column, _cell, _e) => true,
+  rowClick: (_row, _column, _e) => true,
+  rowContextmenu: (_row, _column, _e) => true,
+  rowDblclick: (_row, _column, _e) => true,
+  headerClick: (_column, _e) => true,
+  headerContextmenu: (_column, _e) => true,
+  sortChange: (_sorter) => true,
+  filterChange: (_filter) => true,
+  currentChange: (_current, _old) => true,
+  headerDragend: (_width, _old, _column, _e) => true,
+  expandChange: (_row, _expanded) => true
+};
+const proTableEmits = {
+  ...tableEmits,
+  done: (_result, _parent) => true,
+  "update:selections": (_selections) => true,
+  "update:current": (_current) => true,
+  columnsChange: (_columns) => true,
+  sizeChange: (_size) => true,
+  maximizedChange: (_maximized) => true,
+  refresh: () => true
+};
+exports.proTableEmits = proTableEmits;
+exports.proTableProps = proTableProps;
+exports.tableEmits = tableEmits;

package/lib/ele-pro-table/style/css-var.scss

@@ -0,0 +1,11 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-pro-table-var($var) {
+  .ele-pro-table {
+    @include set-ele-var('table', $var);
+  }
+
+  .ele-tool-column {
+    @include set-ele-var('tool-column', $var);
+  }
+}

package/lib/ele-pro-table/style/index.js

@@ -0,0 +1,18 @@
+"use strict";
+require("element-plus/es/components/dropdown/style/index");
+require("element-plus/es/components/dropdown-menu/style/index");
+require("element-plus/es/components/dropdown-item/style/index");
+require("element-plus/es/components/popover/style/index");
+require("element-plus/es/components/checkbox/style/index");
+require("element-plus/es/components/checkbox-group/style/index");
+require("element-plus/es/components/tooltip/style/index");
+require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/link/style/index");
+require("element-plus/es/components/table/style/index");
+require("element-plus/es/components/table-column/style/index");
+require("element-plus/es/components/empty/style/index");
+require("element-plus/es/components/loading/style/index");
+require("../../ele-pagination/style/index");
+require("../../ele-toolbar/style/index");
+require("../../ele-tool/style/index");
+require("./index.scss");

package/lib/ele-pro-table/style/index.scss

@@ -0,0 +1,229 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pro-table-var($ele);
+
+.ele-pro-table {
+  /* 顶部工具栏 */
+  & > .ele-toolbar {
+    border-bottom: none;
+  }
+
+  /* 底部 */
+  .ele-pro-table-footer {
+    padding-top: 2px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & > .ele-pagination {
+      margin: 0 auto;
+    }
+  }
+
+  /* 全屏 */
+  &.is-maximized {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+    padding: 0 0 16px 0;
+    box-sizing: border-box;
+    background-color: elVar('bg-color');
+
+    .ele-toolbar.is-plain {
+      padding: 0 16px;
+    }
+  }
+
+  /* 变量修改 */
+  div.el-table {
+    #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
+    #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
+    #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
+    #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
+    #{elVarName('table', 'tr-bg-color')}: eleVar('table', 'tr-bg');
+    #{elVarName('table', 'expanded-cell-bg-color')}: eleVar('table', 'tr-bg');
+    #{elVarName('bg-color')}: eleVar('table', 'bg');
+  }
+
+  /* loading */
+  .el-table--border > .el-loading-mask {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+  }
+
+  /* 表头 */
+  th {
+    font-weight: normal;
+  }
+
+  .caret-wrapper .sort-caret {
+    #{elVarName('text-color', 'placeholder')}: elVar('text-color', 'disabled');
+  }
+
+  .el-table__column-filter-trigger i {
+    font-size: 13px;
+    vertical-align: -2px;
+    color: elVar('text-color', 'secondary');
+  }
+
+  .el-table--small .el-table__column-filter-trigger i {
+    font-size: 12px;
+  }
+
+  /* 选中行 */
+  .el-table__body tr.current-row.hover-row > td.el-table__cell {
+    background-color: elVar('table', 'current-row-bg-color');
+  }
+
+  /* 表头超出隐藏 */
+  &.is-header-ellipsis th.el-table__cell > .cell {
+    white-space: nowrap;
+  }
+
+  /* 空状态 */
+  .el-table__empty-text {
+    color: elVar('text-color', 'placeholder');
+  }
+
+  .el-empty {
+    padding: 16px 0;
+  }
+
+  .el-empty__description {
+    margin-top: 8px;
+    line-height: 1;
+
+    p {
+      color: elVar('text-color', 'placeholder');
+    }
+  }
+
+  // 开关
+  .el-switch {
+    height: auto;
+  }
+}
+
+/* 密度 */
+.ele-tool-size-popper {
+  min-width: 80px;
+}
+
+/* 列配置 */
+.ele-tool-column.el-popper {
+  padding: 0;
+  max-width: 100%;
+  width: eleVar('tool-column', 'width') !important;
+}
+
+.ele-tool-column {
+  .el-checkbox-group {
+    line-height: inherit;
+  }
+
+  .el-checkbox__label {
+    color: inherit !important;
+    line-height: inherit;
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .el-checkbox {
+    height: eleVar('tool-column', 'item-height');
+    line-height: eleVar('tool-column', 'item-height');
+  }
+}
+
+.ele-tool-column-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid eleVar('tool-column', 'line-color');
+  padding: eleVar('tool-column', 'header-padding');
+  box-sizing: border-box;
+  position: relative;
+
+  .ele-tool-column-label {
+    flex: 1;
+  }
+}
+
+.ele-tool-column-body {
+  padding: eleVar('tool-column', 'body-padding');
+  max-height: eleVar('tool-column', 'max-height');
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-tool-column-item {
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('tool-column', 'item-padding');
+  transition: background-color 0.2s;
+  position: relative;
+
+  .ele-tool-column-handle {
+    display: flex;
+    font-size: 14px;
+    color: elVar('text-color', 'placeholder');
+    margin-right: 4px;
+    cursor: move;
+  }
+
+  .ele-tool-column-label {
+    flex: 1;
+    overflow: hidden;
+
+    .el-checkbox {
+      width: 100%;
+    }
+  }
+
+  .ele-tool-column-fixed {
+    display: flex;
+    align-items: center;
+
+    .ele-tool-fixed-item {
+      display: flex;
+      font-size: 12px;
+      margin-left: 4px;
+      color: elVar('text-color', 'placeholder');
+      transition: color 0.2s;
+      cursor: pointer;
+
+      &:hover {
+        color: elVar('text-color', 'regular');
+      }
+
+      &.is-active {
+        color: elVar('color-primary');
+      }
+    }
+  }
+
+  &:hover,
+  &.sortable-chosen {
+    background: elVar('color-primary', 'light-9');
+  }
+
+  &.sortable-ghost {
+    opacity: 0;
+  }
+}
+
+.ele-tool-column.is-sortable {
+  .ele-tool-column-item {
+    padding-left: 6px;
+  }
+
+  .ele-tool-column-header .ele-tool-column-label {
+    padding-left: calc(24px - #{eleVar('tool-column', 'item-padding')});
+  }
+}