ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.3

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

@@ -1,15 +1,26 @@
 import tableProps from "element-plus/es/components/table/src/table/defaults";
-const proTableProps = {
+const tableViewProps = {
   ...tableProps,
-  border: {
-    type: Boolean,
-    default: true
-  },
   // 列配置
   columns: {
     type: Array,
     required: true
   },
+  // 数据请求状态
+  loading: Boolean,
+  // 起始编号
+  pageIndex: Number
+};
+const proTableProps = {
+  ...tableViewProps,
+  stripe: {
+    type: Boolean,
+    default: null
+  },
+  border: {
+    type: Boolean,
+    default: null
+  },
   // 数据源
   datasource: {
     type: [Array, Function],
@@ -23,10 +34,6 @@ const proTableProps = {
   response: Object,
   // 自定义响应数据解析
   parseData: Function,
-  // 升序的排序值
-  ascendingValue: String,
-  // 降序的排序值
-  descendingValue: String,
   // 初始是否请求数据
   loadOnCreated: {
     type: Boolean,
@@ -37,32 +44,20 @@ const proTableProps = {
     type: Boolean,
     default: true
   },
-  // 数据请求状态
-  loading: Boolean,
   // 多选选中的数据
   selections: Array,
   // 单选选中的数据
   current: Object,
   // 是否开启顶部工具栏
   toolbar: {
-    type: Boolean,
+    type: [Boolean, Object],
     default: true
   },
-  // 表头工具栏主题
-  toolbarTheme: String,
-  // 表头工具栏样式
-  toolbarStyle: Object,
-  // 表头工具栏是否是表单
-  toolbarForm: Boolean,
-  // 标题
-  title: String,
-  // 副标题
-  subtitle: String,
   // 表头工具按钮布局
   tools: {
-    type: Array,
+    type: [Boolean, Array],
     default: () => {
-      return ["reload", "size", "columns", "maximized"];
+      return null;
     }
   },
   // 列配置是否可拖拽排序
@@ -76,10 +71,7 @@ const proTableProps = {
     default: true
   },
   // 表格全屏时的层级
-  maximizedIndex: {
-    type: Number,
-    default: 999
-  },
+  maximizedIndex: Number,
   // 表格全屏状态的高度
   maximizedHeight: [String, Number],
   // 表头内容超出省略
@@ -96,8 +88,12 @@ const proTableProps = {
   // 分页组件
   pagination: {
     type: [Boolean, Object],
-    default: true
+    default: () => {
+      return null;
+    }
   },
+  // 设置粘性头部
+  sticky: Boolean,
   // 列配置缓存名称
   cacheKey: String,
   // 国际化
@@ -125,16 +121,26 @@ const tableEmits = {
 };
 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
 };
+const tablePropKeys = Object.keys(tableProps);
 export {
   proTableEmits,
   proTableProps,
-  tableEmits
+  tableEmits,
+  tablePropKeys,
+  tableViewProps
 };

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

@@ -3,61 +3,25 @@
 
 @include set-pro-table-var($ele);
 
+/* 表格变量替换 */
+.ele-pro-table div.el-table {
+  #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
+  #{elVarName('table', 'text-color')}: eleVar('table', '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');
+}
+
 .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;
   }
@@ -76,23 +40,44 @@
     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__expand-icon {
+    vertical-align: -2px;
+
+    & > .el-icon {
+      font-size: 13px;
+    }
+  }
+
+  // 边框线
+  .el-table--border::after {
+    width: 0.8px;
+  }
+
+  .el-table__inner-wrapper::before {
+    height: 0.8px;
+  }
+
+  // loading
+  .el-table--border > .el-loading-mask {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
   }
 
-  /* 空状态 */
+  // 空状态
   .el-table__empty-text {
     color: elVar('text-color', 'placeholder');
   }
 
   .el-empty {
-    padding: 16px 0;
+    padding: 58px 0;
   }
 
   .el-empty__description {
@@ -110,7 +95,61 @@
   }
 }
 
-/* 密度 */
+/* 底栏 */
+.ele-pro-table-footer {
+  padding-top: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  & > .ele-pagination {
+    margin: 0 auto;
+  }
+}
+
+/* 表头超出隐藏 */
+.ele-pro-table.is-header-ellipsis th.el-table__cell > .cell {
+  white-space: nowrap;
+}
+
+/* 粘性头部 */
+.ele-pro-table.is-sticky > .el-table {
+  overflow: visible;
+
+  & > .el-table__inner-wrapper > .el-table__header-wrapper {
+    position: sticky;
+    top: eleVar('table', 'sticky-top');
+    z-index: var(#{eleVarName('layout', 'index')}, 2);
+  }
+}
+
+.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-pro-table.is-sticky {
+  #{eleVarName('table', 'sticky-top')}: 94px;
+}
+
+.ele-admin-maximized:not(.ele-admin-expanded) .ele-pro-table.is-sticky {
+  #{eleVarName('table', 'sticky-top')}: 40px;
+}
+
+/* 全屏 */
+.ele-pro-table.is-maximized {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  padding: 0 0 16px 0;
+  box-sizing: border-box;
+  background: elVar('bg-color');
+  z-index: calc(var(#{eleVarName('layout', 'index')}, 0) + 99);
+
+  .ele-toolbar.is-plain {
+    padding: 0 16px;
+  }
+}
+
+/* 密度设置 */
 .ele-tool-size-popper {
   min-width: 80px;
 }

package/es/ele-pro-table/types/index.d.ts

@@ -1,8 +1,9 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, Slot } from 'vue';
 import type { TableProps } from 'element-plus';
 import type { Sort } from 'element-plus/es/components/table/src/table/defaults';
 import type ColumnProps from 'element-plus/es/components/table/src/table-column/defaults';
 import type { PaginationProps } from '../../ele-pagination/props';
+import type { ToolbarProps } from '../../ele-toolbar/props';
 /**
  * 数据
  */
@@ -14,7 +15,7 @@ export type Where = Record<keyof any, any>;
 /**
  * 排序参数
  */
-export type Orders = Record<string, string>;
+export type Orders = Record<string, OrderValue>;
 /**
  * 筛选参数
  */
@@ -86,6 +87,10 @@ export interface ReloadParams {
  * @param resolve 树表格懒加载方法
  */
 export type ReloadFunction = (option?: ReloadParams, parent?: DataItem, resolve?: ResolveFunction) => void;
+/**
+ * 排序的值
+ */
+export type OrderValue = string | number | boolean | null | undefined;
 /**
  * 请求参数设置
  */
@@ -94,6 +99,10 @@ export interface RequestOption {
     sortName?: string;
     /** 排序方式参数名称 */
     orderName?: string;
+    /** 升序的排序值 */
+    ascValue?: OrderValue;
+    /** 降序的排序值 */
+    descValue?: OrderValue;
 }
 /**
  * 响应参数设置
@@ -107,7 +116,7 @@ export interface ResponseOption {
 /**
  * 响应数据解析
  */
-export type ParseData = (data: unknown) => unknown;
+export type ParseData = (data: unknown) => DatasourceResult;
 /**
  * 排序方式封装
  */
@@ -172,12 +181,19 @@ export type TableSize = TableProps<DataItem>['size'];
 /**
  * 分页组件属性
  */
-export interface Pagination extends Partial<PaginationProps> {
+export interface TablePagination extends Partial<PaginationProps> {
     /** 是否自动修正页码 */
     autoAmend?: boolean;
     /** 自定义样式 */
     style?: CSSProperties;
 }
+/**
+ * 工具栏组件属性
+ */
+export interface TableToolbar extends Partial<ToolbarProps> {
+    /** 自定义样式 */
+    style?: CSSProperties;
+}
 /**
  * 内置工具按钮
  */
@@ -248,6 +264,10 @@ export type TableLoad = TableProps<DataItem>['load'];
  * 多选时行点击选中
  */
 export type RowClickChecked = boolean | 'smart';
+/**
+ * 获取插槽方法
+ */
+export type GetSlotFunc = (name: string) => Slot | undefined;
 /**
  * 表格实例数据
  */

package/es/ele-pro-table/util.d.ts

@@ -1,18 +1,40 @@
-import type { Ref, SetupContext } from 'vue';
+import type { SetupContext } from 'vue';
 import type { ElTable } from 'element-plus';
-import type { TableGlobalConfig } from '../ele-config-provider/types';
+import type { PaginationProps } from '../ele-pagination/props';
 import type { tableEmits } from './props';
-import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, Pagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
+import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
 /**
  * 获取默认页码
  * @param opt 分页组件属性
  */
-export declare function getDefaultPage(opt: boolean | Pagination): number | undefined;
+export declare function getTablePage(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
 /**
  * 获取默认每页数量
  * @param opt 分页组件属性
  */
-export declare function getDefaultLimit(opt: boolean | Pagination): number | undefined;
+export declare function getTableLimit(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
+/**
+ * 获取分页组件默认属性
+ * @param opt 分页组件属性
+ */
+export declare function getPaginationProps(size: TableSize, pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined, pageProps?: Pick<PaginationProps, 'total' | 'pageSize' | 'currentPage'>): Partial<PaginationProps> | null;
+/**
+ * 获取请求参数名称
+ * @param globalRequest 全局配置
+ * @param request 当前配置
+ */
+export declare function getRequestName(globalRequest?: RequestOption, request?: RequestOption): RequestOption;
+/**
+ * 获取响应参数名称
+ * @param globalRequest 全局配置
+ * @param request 当前配置
+ */
+export declare function getResponseName(globalResponse?: ResponseOption, response?: ResponseOption): ResponseOption;
+/**
+ * 获取表格默认尺寸
+ * @param globalProps 全局配置
+ */
+export declare function getTableSize(cacheKey?: string, size?: TableSize, globalSize?: TableSize): TableSize;
 /**
  * 获取数据某字段值
  * @param data 数据
@@ -96,11 +118,6 @@ export declare function getSizeCacheKey(cacheKey: string): string;
  * @param cacheKey 缓存的名称
  */
 export declare function getCacheSize(cacheKey?: string): TableSize;
-/**
- * 获取表格默认尺寸
- * @param globalProps 全局配置
- */
-export declare function getDefaultSize(size: TableSize, globalProps: Ref<TableGlobalConfig>): TableSize;
 /**
  * 判断行是否被禁用
  * @param row 行数据

package/es/ele-pro-table/util.js

@@ -1,11 +1,47 @@
-import { uuid, eachTree } from "../utils/core";
-function getDefaultPage(opt) {
-  const isObj = opt != null && typeof opt === "object";
-  return isObj && opt.currentPage != null ? opt.currentPage : 1;
+import { omit, uuid, eachTree } from "../utils/core";
+function getTablePage(pagination, globalPagination) {
+  const props = getPaginationProps(void 0, pagination, globalPagination);
+  return (props == null ? void 0 : props.currentPage) ?? 1;
 }
-function getDefaultLimit(opt) {
-  const isObj = opt != null && typeof opt === "object";
-  return isObj && opt.pageSize != null ? opt.pageSize : 10;
+function getTableLimit(pagination, globalPagination) {
+  const props = getPaginationProps(void 0, pagination, globalPagination);
+  return (props == null ? void 0 : props.pageSize) ?? 10;
+}
+function getPaginationProps(size, pagination, globalPagination, pageProps) {
+  const props = pagination ?? globalPagination ?? true;
+  if (props == null || props === false) {
+    return null;
+  }
+  const defaultProps = {
+    small: size !== "large",
+    pagerCount: 5,
+    layout: "total, prev, pager, next, sizes, jumper",
+    pageSizes: [10, 20, 30, 40, 50, 100],
+    hideOnSinglePage: false
+  };
+  if (typeof props === "object") {
+    return Object.assign(defaultProps, omit(props, ["autoAmend"]), pageProps);
+  }
+  return Object.assign(defaultProps, pageProps);
+}
+function getRequestName(globalRequest, request) {
+  const defaultRequest = {
+    sortName: "sort",
+    orderName: "order",
+    ascValue: "asc",
+    descValue: "desc"
+  };
+  return Object.assign(defaultRequest, globalRequest, request);
+}
+function getResponseName(globalResponse, response) {
+  const defaultResponse = {
+    dataName: "list",
+    countName: "count"
+  };
+  return Object.assign(defaultResponse, globalResponse, response);
+}
+function getTableSize(cacheKey, size, globalSize) {
+  return getCacheSize(cacheKey) ?? size ?? globalSize ?? "default";
 }
 function getValue(data, field) {
   if (typeof field === "function") {
@@ -261,9 +297,6 @@ function getCacheSize(cacheKey) {
     }
   }
 }
-function getDefaultSize(size, globalProps) {
-  return size ?? globalProps.value.size ?? "default";
-}
 function isDisableRow(row, index, columns) {
   let disabled = false;
   eachTree(columns, (col) => {
@@ -396,15 +429,18 @@ export {
   getCheckedColumns,
   getColId,
   getColsCacheKey,
-  getDefaultLimit,
-  getDefaultPage,
-  getDefaultSize,
   getInitCacheColumns,
   getInitColumns,
   getOrderItems,
+  getPaginationProps,
   getRequestFilters,
+  getRequestName,
+  getResponseName,
   getSettingCols,
   getSizeCacheKey,
+  getTableLimit,
+  getTablePage,
+  getTableSize,
   getValue,
   isDisableRow,
   reloadData,

package/es/ele-segmented/index.d.ts

@@ -0,0 +1,33 @@
+import type { ElTabsInstance } from '../ele-app/types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    block: BooleanConstructor;
+    disabled: BooleanConstructor;
+    items: {
+        type: import("vue").PropType<import("./types").SegmentedItem[]>;
+        required: boolean;
+    };
+    size: import("vue").PropType<import("./types").SegmentedSize>;
+}, {
+    tabRef: import("vue").Ref<ElTabsInstance>;
+    onUpdateModelValue: (value: string | number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value: string | number) => boolean;
+    change: (_active: string | number) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    block: BooleanConstructor;
+    disabled: BooleanConstructor;
+    items: {
+        type: import("vue").PropType<import("./types").SegmentedItem[]>;
+        required: boolean;
+    };
+    size: import("vue").PropType<import("./types").SegmentedSize>;
+}>> & {
+    "onUpdate:modelValue"?: ((_value: string | number) => any) | undefined;
+    onChange?: ((_active: string | number) => any) | undefined;
+}, {
+    block: boolean;
+    disabled: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-segmented/index.js

@@ -0,0 +1,77 @@
+import { defineComponent, ref, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, resolveDynamicComponent, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { ElIcon, ElTabs, ElTabPane } from "element-plus";
+import { useLicense } from "../ele-config-provider/receiver";
+import { segmentedProps, segmentedEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleSegmented",
+  components: { ElIcon, ElTabs, ElTabPane },
+  props: segmentedProps,
+  emits: segmentedEmits,
+  setup(props, { emit }) {
+    const { authenticated } = useLicense();
+    const tabRef = ref(null);
+    const onUpdateModelValue = (value) => {
+      if (authenticated.value && props.modelValue !== value) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    return { tabRef, onUpdateModelValue };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-segmented-item-label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElTabPane = resolveComponent("ElTabPane");
+  const _component_ElTabs = resolveComponent("ElTabs");
+  return openBlock(), createBlock(_component_ElTabs, {
+    ref: "tabRef",
+    modelValue: _ctx.modelValue,
+    stretch: _ctx.block,
+    class: normalizeClass([
+      "ele-segmented",
+      { "is-block": _ctx.block },
+      { "is-large": _ctx.size === "large" },
+      { "is-small": _ctx.size === "small" },
+      { "is-disabled": _ctx.disabled }
+    ]),
+    "onUpdate:modelValue": _ctx.onUpdateModelValue
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+        return openBlock(), createBlock(_component_ElTabPane, {
+          key: item.value,
+          name: item.value,
+          disabled: _ctx.disabled || item.disabled
+        }, {
+          label: withCtx(() => [
+            renderSlot(_ctx.$slots, "label", { item }, () => [
+              item.icon ? (openBlock(), createBlock(_component_ElIcon, mergeProps({ key: 0 }, item.iconProps || {}, { class: "ele-segmented-item-icon" }), {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+                    style: normalizeStyle(item.iconStyle)
+                  }, null, 8, ["style"]))
+                ]),
+                _: 2
+              }, 1040)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_1, toDisplayString(item.label), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["name", "disabled"]);
+      }), 128))
+    ]),
+    _: 3
+  }, 8, ["modelValue", "stretch", "class", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-segmented/props.d.ts

@@ -0,0 +1,23 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { SegmentedSize, SegmentedItem } from './types';
+/**
+ * 属性
+ */
+export declare const segmentedProps: {
+    modelValue: (StringConstructor | NumberConstructor)[];
+    block: BooleanConstructor;
+    disabled: BooleanConstructor;
+    items: {
+        type: PropType<SegmentedItem[]>;
+        required: boolean;
+    };
+    size: PropType<SegmentedSize>;
+};
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>;
+/**
+ * 事件
+ */
+export declare const segmentedEmits: {
+    'update:modelValue': (_value: string | number) => boolean;
+    change: (_active: string | number) => boolean;
+};