ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/es/style/themes/default.scss

@@ -3,12 +3,25 @@
 @use '../util.scss' as *;
 
 // 过渡动画
-$ele-transition: 0.2s !default;
-
+$transition-base: 0.2s !default;
 // 美化滚动条样式选择器
 $scrollbar-selector: '' !default;
+// 输入框清空图标
+$icon-clear-path: 'M512 43C768 43 981 256 981 512S768 981 512 981 43 768 43 512 256 43 512 43ZM683 277 512 448 341 277 277 341 448 512 277 683 341 747 512 576 683 747 747 683 576 512 747 341Z' !default;
+// 表单验证通过图标
+$icon-validate-path: 'M512 43C768 43 981 256 981 512S768 981 512 981 43 768 43 512 256 43 512 43ZM448 619 299 470 235 534 448 747 811 384 747 320Z' !default;
+// 树表格展开图标
+$icon-expand-path: 'M362 811 662 512 362 213' !default;
+// 树表格加载图标
+$icon-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
+// 表格筛选图标
+$icon-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
+// 字体
+$logo-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 
-// 样式变量
+// 主题变量
 $ele: () !default;
 $ele: map.deep-merge(
   (
@@ -24,9 +37,7 @@ $ele: map.deep-merge(
     'layout': (
       // 布局
       'bg': elVar('bg-color', 'page'),
-      'height': 100vh,
-      'index': 99,
-      'mask-index': calc(#{elVar('index', 'popper')} + 800)
+      'index': 99
     ),
     'header': (
       // 顶栏
@@ -44,10 +55,14 @@ $ele: map.deep-merge(
       'dark-color': #fff,
       'dark-bg': #001529,
       'dark-shadow': 0 1px 4px rgba(0, 0, 0, 0.1),
-      'primary-active-bg': transparent
+      'primary-active-bg': transparent,
+      'ghost-bg': hsla(0, 0%, 100%, 0.4),
+      'ghost-filter': blur(8px)
     ),
     'logo': (
       // Logo
+      'size': '18px',
+      'family': $logo-family,
       'color': elVar('text-color', 'primary'),
       'dark-color': #fff,
       'shadow': 1px 2px 3px rgba(0, 21, 41, 0.08),
@@ -60,22 +75,15 @@ $ele: map.deep-merge(
       'mix-width': 160px,
       'bg': elVar('bg-color'),
       'dark-bg': #001529,
-      'shadow': 1px 3px 3px rgba(0, 21, 41, 0.08),
-      'dark-shadow': 0 4px 4px rgba(0, 0, 0, 0.35),
-      'transition': (width $ele-transition, left $ele-transition),
-      'tool-height': 40px
+      'shadow': 1px 0 3px rgba(0, 21, 41, 0.08),
+      'dark-shadow': 0 0 4px rgba(0, 0, 0, 0.35),
+      'transition': (width $transition-base, left $transition-base),
+      'tool-height': 40px,
+      'ghost-bg': elVar('fill-color', 'lighter')
     ),
     'sidebox': (
       // 双侧栏一级
-      'width': 80px,
-      'padding': 8px,
-      'collapse-padding': 4px,
-      'font-size': 12px,
-      'icon-font-size': 18px,
-      'title-margin': 6px,
-      'item-padding': 12px 0,
-      'collapse-item-padding': 12px 0,
-      'item-radius': elVar('border-radius', 'base')
+      'width': 80px
     ),
     'menu-thumb': (
       // 菜单滚动条
@@ -119,6 +127,12 @@ $ele: map.deep-merge(
       'close-hover-color': #fff,
       'close-hover-bg': transparent
     ),
+    'backtop': (
+      // 返回顶部
+      'color': elVar('color-primary'),
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': elVar('box-shadow', 'light')
+    ),
     'message': (
       // 消息提示
       'color': elVar('text-color', 'regular'),
@@ -165,7 +179,14 @@ $ele: map.deep-merge(
       'header-font-weight': normal,
       'header-border': 1px solid elVar('border-color', 'light'),
       'footer-padding': 14px 22px,
-      'footer-border': 1px solid elVar('border-color', 'light')
+      'footer-border': 1px solid elVar('border-color', 'light'),
+      'collapse-size': 24px,
+      'collapse-font-size': 16px,
+      'collapse-color': elVar('text-color', 'secondary'),
+      'collapse-radius': elVar('border-radius', 'small'),
+      'collapse-margin': 1px -6px 0 0,
+      'collapse-hover-color': elVar('text-color', 'primary'),
+      'collapse-hover-bg': transparent
     ),
     'check-card': (
       // 可选卡片
@@ -338,9 +359,15 @@ $ele: map.deep-merge(
       'item-color': elVar('text-color', 'primary'),
       'item-hover-color': elVar('color', 'primary'),
       'item-hover-bg': transparent,
+      'item-focus-bg': transparent,
       'item-active-color': elVar('color-primary'),
       'item-active-bg': elVar('color-primary', 'light-9'),
-      'item-active-line': 3px
+      'item-active-line': 3px,
+      'compact-font-size': 12px,
+      'compact-icon-font-size': 18px,
+      'compact-title-margin': 6px,
+      'compact-item-padding': 12px 0,
+      'compact-collapse-item-padding': 12px 0
     ),
     'menu-popup': (
       // 气泡菜单
@@ -363,11 +390,13 @@ $ele: map.deep-merge(
       'item-margin': 0,
       'item-radius': 0,
       'hover-bg': transparent,
+      'focus-bg': transparent,
       'active-bg': transparent,
       'arrow-margin': 0 -2px 0 6px,
       'line-margin': 14px,
       'line-size': 2px,
       'dark-hover-bg': transparent,
+      'dark-focus-bg': transparent,
       'dark-active-bg': transparent,
       'popup-margin': 0px
     ),
@@ -389,6 +418,7 @@ $ele: map.deep-merge(
       'color': rgba(255, 255, 255, 0.8),
       'hover-color': #fff,
       'hover-bg': transparent,
+      'focus-bg': transparent,
       'active-color': #fff,
       'active-bg': elVar('color-primary')
     ),
@@ -401,9 +431,11 @@ $ele: map.deep-merge(
       'dot-size': 8px,
       'dot-margin': 0 8px 0 0,
       'dot-color': #d9d9d9,
-      'dot-hover-color': elVar('color-primary'),
-      'dark-dot-color': rgba(255, 255, 255, 0.4),
-      'dark-dot-hover-color': #fff,
+      'dot-hover-color': #b6b6b6,
+      'dot-active-color': elVar('color-primary'),
+      'dark-dot-color': #888888,
+      'dark-dot-hover-color': #dddddd,
+      'dark-dot-active-color': #fff,
       'bg-1': #61b2fc,
       'bg-2': #7dd733,
       'bg-3': #32a2d4,
@@ -596,7 +628,7 @@ $ele: map.deep-merge(
       'simple-tool-hover-bg': eleVar('tab', 'simple-hover-bg'),
       'indicator-dot-size': 8px,
       'indicator-dot-color': #d9d9d9,
-      'indicator-dot-hover-color': #c8c8c8,
+      'indicator-dot-hover-color': #b6b6b6,
       'indicator-dot-active-color': elVar('color-primary'),
       'indicator-margin': 6px,
       'tag-space': 4px,

package/es/style/themes/rounded.scss

@@ -15,9 +15,6 @@ $ele-rounded: map.deep-merge(
     'sidebar': (
       'tool-height': 38px
     ),
-    'sidebox': (
-      'item-radius': elVar('border-radius', 'base')
-    ),
     'alert': (
       'radius': $radius-large,
       'close-hover-bg': hsla(0, 0%, 60%, 0.15)
@@ -65,6 +62,7 @@ $ele-rounded: map.deep-merge(
       'item-radius': elVar('border-radius', 'base'),
       'item-hover-color': elVar('text-color', 'primary'),
       'item-hover-bg': elVar('fill-color', 'light'),
+      'item-focus-bg': elVar('fill-color', 'light'),
       'item-active-line': 0
     ),
     'menu-popup': (
@@ -78,14 +76,17 @@ $ele-rounded: map.deep-merge(
       'item-margin': 4px,
       'item-radius': elVar('border-radius', 'base'),
       'hover-bg': rgba(0, 0, 0, 0.04),
+      'focus-bg': rgba(0, 0, 0, 0.04),
       'active-bg': elVar('color-primary', 'light-9'),
       'arrow-margin': 0 -4px 0 4px,
       'line-size': 0,
       'dark-hover-bg': rgba(255, 255, 255, 0.1),
+      'dark-focus-bg': rgba(255, 255, 255, 0.1),
       'dark-active-bg': elVar('color-primary')
     ),
     'menu-dark': (
-      'hover-bg': rgba(255, 255, 255, 0.1)
+      'hover-bg': rgba(255, 255, 255, 0.1),
+      'focus-bg': rgba(255, 255, 255, 0.1)
     ),
     'menu-colorful': (
       'icon-radius': elVar('border-radius', 'base'),

package/es/style/themes/theme-util.scss

@@ -1,4 +1,6 @@
+@use '../../ele-admin-layout/style/css-var.scss' as *;
 @use '../../ele-alert/style/css-var.scss' as *;
+@use '../../ele-backtop/style/css-var.scss' as *;
 @use '../../ele-app/style/css-var.scss' as *;
 @use '../../ele-basic-select/style/css-var.scss' as *;
 @use '../../ele-bottom-bar/style/css-var.scss' as *;
@@ -16,7 +18,6 @@
 @use '../../ele-page/style/css-var.scss' as *;
 @use '../../ele-pagination/style/css-var.scss' as *;
 @use '../../ele-popconfirm/style/css-var.scss' as *;
-@use '../../ele-pro-layout/style/css-var.scss' as *;
 @use '../../ele-pro-table/style/css-var.scss' as *;
 @use '../../ele-segmented/style/css-var.scss' as *;
 @use '../../ele-steps/style/css-var.scss' as *;
@@ -33,7 +34,9 @@
 /* 生成主题的 css 变量 */
 @mixin set-theme-var($selector, $var) {
   #{$selector} {
+    @include set-layout-var($var);
     @include set-alert-var($var);
+    @include set-backtop-var($var);
     @include set-app-var($var);
     @include set-basic-select-var($var);
     @include set-bottom-bar-var($var);
@@ -51,7 +54,6 @@
     @include set-page-var($var);
     @include set-pagination-var($var);
     @include set-popconfirm-var($var);
-    @include set-layout-var($var);
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
     @include set-step-var($var);

package/es/style/util.scss

@@ -1,4 +1,4 @@
-@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as el;
 @use 'sass:map';
 
 /* 生成 css 变量名 */
@@ -38,15 +38,15 @@
 
 /* 获取 element 的 css 变量值 */
 @function elVar($args...) {
-  @return getCssVar($args...);
+  @return el.getCssVar($args...);
 }
 
 /* 获取 element 的 css 变量值带默认值 */
 @function elVarDefault($args, $default) {
-  @return getCssVarWithDefault($args, $default);
+  @return el.getCssVarWithDefault($args, $default);
 }
 
 /* 获取 element 的 css 变量名 */
 @function elVarName($args...) {
-  @return getCssVarName($args...);
+  @return el.getCssVarName($args...);
 }

package/es/utils/core.d.ts

@@ -1,4 +1,3 @@
-/** 常用工具方法 */
 /**
  * toTree 方法参数
  */
@@ -12,13 +11,13 @@ export interface ToTreeOption<T> {
     /** 生成的 children 字段名称 */
     childrenField?: string | null;
     /** 最顶级的 parentId 值 */
-    parentId?: number | string | Array<number | string> | null;
+    parentId?: number | string | (number | string)[] | null;
     /** 是否添加包含所有父级 id 的字段 */
     addParentIds?: boolean | null;
     /** 包含所有父级 id 字段的名称 */
     parentIdsField?: string | null;
     /** 所有父级的 id */
-    parentIds?: Array<number | string> | null;
+    parentIds?: (number | string)[] | null;
 }
 /**
  * parentId 形式数据转 children 形式
@@ -26,20 +25,20 @@ export interface ToTreeOption<T> {
  */
 export declare function toTree<T>(option: ToTreeOption<T>): T[];
 /**
- * 遍历树形形式数据
- * @param data 需要遍历的数据
+ * 遍历 children 形式数据
+ * @param data 数据
  * @param callback 回调
  * @param childrenField children 字段名
  */
 export declare function eachTree<T>(data?: T[], callback?: (item: T, index: number, parent?: T) => void | boolean, childrenField?: string, parent?: T): void;
 /**
- * 格式化树形数据
- * @param data 需要格式化的数据
+ * 格式化 children 形式数据
+ * @param data 数据
  * @param formatter 格式器
  * @param childrenField children 字段名
- * @param resultChildrenField 格式化后的 children 字段名
+ * @param resultChildrenField 返回后的 children 字段名
  */
-export declare function mapTree<T, U>(data: T[] | undefined | null, formatter: (item: T, index?: number, parent?: U) => U | void | undefined, childrenField?: string, resultChildrenField?: string, parent?: U): U[];
+export declare function mapTree<T, K>(data: T[] | undefined | null, formatter: (item: T, index?: number, parent?: K) => K | void | undefined, childrenField?: string, resultChildrenField?: string, parent?: K): K[];
 /**
  * 查找树形数据
  * @param data 数据
@@ -47,18 +46,18 @@ export declare function mapTree<T, U>(data: T[] | undefined | null, formatter: (
  * @param childrenField children 字段名
  */
 export declare function findTree<T>(data: T[] | undefined, predicate: (value: T, index: number) => unknown, childrenField?: string): T | undefined;
+/**
+ * 生成 m 到 n 的随机数
+ * @param m 最小值(包含)
+ * @param n 最大值(不包含)
+ */
+export declare function random(m: number, n: number): number;
 /**
  * 生成随机字符串
  * @param length 长度
  * @param radix 基数
  */
 export declare function uuid(length?: number, radix?: number): string;
-/**
- * 生成 m 到 n 的随机数
- * @param m 最小值, 包含
- * @param n 最大值, 不包含
- */
-export declare function random(m: number, n: number): number;
 /**
  * 数字千分位
  * @param num 数字
@@ -70,20 +69,42 @@ export declare function formatNumber(num?: number | null): string;
  * @param source 源对象
  * @param excludes 排除的字段
  */
-export declare function assignObject<T extends {}>(target: T, source: Record<string, any>, excludes?: string[]): T;
+export declare function assignObject<T extends {}, K extends {}>(target: T, source: K, excludes?: string[]): T;
 /**
- * 全屏
- * @param el HTMLElement
+ * 判断是否是外链
+ * @param url 地址
  */
-export declare function requestFullscreen(el?: HTMLElement): void;
+export declare function isExternalLink(url?: string | null): boolean;
 /**
- * 退出全屏
+ * 查找直接子元素
+ * @param parentEl 父元素
+ * @param className 类名
+ * @param attr 属性
  */
-export declare function exitFullscreen(): void;
+export declare function queryChild(parentEl?: Element, className?: string, attr?: string[]): Element | undefined;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+/**
+ * 判断元素内容是否溢出省略
+ * @param el 元素节点
+ */
+export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
 /**
  * 检查是否全屏
  */
 export declare function checkFullscreen(): boolean;
+/**
+ * 退出全屏
+ */
+export declare function exitFullscreen(): void;
+/**
+ * 全屏
+ * @param el HTMLElement
+ */
+export declare function requestFullscreen(el?: HTMLElement): void;
 /**
  * 经纬度坐标
  */
@@ -103,16 +124,15 @@ export declare function bd09ToGcj02(point: Point): Point;
  * @param point 坐标
  */
 export declare function gcj02ToBd09(point: Point): Point;
+/** 复制字符串 */
+export declare function copyText(text: string): Promise<undefined>;
 /**
- * 判断是否是外链
- * @param url 地址
- */
-export declare function isExternalLink(url?: string | null): boolean;
-/**
- * 获取节点样式
- * @param el 节点
+ * 根据字段路径获取值
+ * @param data 数据
+ * @param path 字段路径
+ * @param defaultValue 默认值
  */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
 /**
  * 防抖函数
  * @param func 函数
@@ -123,29 +143,18 @@ export declare function debounce<T extends (...args: any) => any>(func: T, wait:
  * 节流函数
  * @param func 函数
  * @param wait 等待时间
+ * @param trailing 是否在节流结束后调用
  */
-export declare function throttle<T extends (...args: any) => any>(func: T, wait: number): (this: any) => void;
+export declare function throttle<T extends (...args: any) => any>(func: T, wait: number, trailing?: boolean): (this: any) => void;
 /**
  * 忽略对象属性
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends object, K extends keyof T>(obj: T | null | undefined, fields: Array<K>): Omit<T, K>;
+export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Omit<T, K>;
 /**
  * 摘选对象属性
  * @param obj 来源对象
  * @param fields 摘选的属性
  */
-export declare function pick<T extends object, K extends keyof T>(obj: T, fields: Array<K>): Pick<T, K>;
-/**
- * 判断元素内容是否溢出省略
- * @param el 元素节点
- */
-export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
-/**
- * 查找子元素
- * @param parentEl 父元素
- * @param className 类名
- * @param attr 属性
- */
-export declare function queryChild(parentEl: Element, className?: string, attr?: string[]): Element | undefined;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Pick<T, K>;