ele-admin-plus 1.3.0 → 1.4.0-beta.1

package/es/style/themes/transparent-css-var.scss

@@ -0,0 +1,45 @@
+/** 透明主题 css 变量 */
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use './transparent.scss' as *;
+@use './theme-util.scss' as *;
+@use '../util.scss' as *;
+$transparent-selector: 'html.is-transparent' !default;
+
+@include set-theme-var($transparent-selector, $ele-transparent);
+
+#{$transparent-selector} {
+  @include set-ele-var('skin-bg', $ele-transparent);
+
+  & {
+    @include el.set-component-css-var(
+      'border-color',
+      (
+        '': hsla(0, 0%, 60%, 0.28),
+        'light': hsla(0, 0%, 60%, 0.24),
+        'lighter': hsla(0, 0%, 60%, 0.2),
+        'extra-light': hsla(0, 0%, 60%, 0.16)
+      )
+    );
+
+    @include el.set-component-css-var(
+      'fill-color',
+      (
+        '': hsla(0, 0%, 60%, 0.2),
+        'light': hsla(0, 0%, 60%, 0.1),
+        'lighter': hsla(0, 0%, 60%, 0.08),
+        'blank': $bg-transparent
+      )
+    );
+
+    @include el.set-component-css-var(
+      'bg-color',
+      (
+        'overlay': eleVar('skin-bg', 'overlay')
+      )
+    );
+  }
+
+  body {
+    background: eleVar('skin-bg', 'wallpaper');
+  }
+}

package/es/style/themes/transparent.scss

@@ -0,0 +1,86 @@
+/** 透明主题 */
+@use 'sass:map';
+@use '../util.scss' as *;
+$bg-transparent: transparent !default;
+
+$ele-transparent: () !default;
+$ele-transparent: map.deep-merge(
+  (
+    'skin-bg': (
+      'wallpaper': $bg-transparent,
+      'header': hsla(0, 0%, 60%, 0.2),
+      'sidebar': hsla(0, 0%, 60%, 0.2),
+      'card': hsla(0, 0%, 60%, 0.2),
+      'overlay': hsla(0, 0%, 60%, 0.4),
+      'tooltip': hsla(0, 0%, 18%, 0.8)
+    ),
+    'layout': (
+      'bg': $bg-transparent
+    ),
+    'header': (
+      'bg': eleVar('skin-bg', 'header')
+    ),
+    'sidebar': (
+      'bg': eleVar('skin-bg', 'sidebar'),
+      'mobile-backdrop-filter': blur(18px)
+    ),
+    'card': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'table': (
+      'tr-bg': $bg-transparent,
+      'fixed-backdrop-filter': blur(18px)
+    ),
+    'table-select': (
+      'tr-bg': $bg-transparent
+    ),
+    'bottom-bar': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'scrollbar': (
+      'color': hsla(0, 0%, 68%, 0.4),
+      'hover-color': hsla(0, 0%, 68%, 0.68)
+    ),
+    'menu-thumb': (
+      'color': hsla(0, 0%, 68%, 0.4),
+      'hover-color': hsla(0, 0%, 68%, 0.68)
+    ),
+    'menu': (
+      'bg': $bg-transparent
+    ),
+    'segmented': (
+      'bg': elVar('fill-color', 'light')
+    ),
+    'tab': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'step': (
+      'bg': none,
+      'backdrop-filter': blur(3px)
+    ),
+    'backtop': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'viewer': (
+      'bg': radial-gradient(
+          #{elVar('text-color', 'placeholder')} 8%,
+          $bg-transparent 8%
+        )
+        center / 16px 16px repeat
+    ),
+    'pro-form-builder': (
+      'group-label-bg': none,
+      'group-label-backdrop-filter': blur(18px)
+    ),
+    'checkbox': (
+      'bg': $bg-transparent
+    ),
+    'radio': (
+      'bg': $bg-transparent
+    ),
+    'tooltip': (
+      'bg': eleVar('skin-bg', 'tooltip')
+    )
+  ),
+  $ele-transparent
+);

package/es/utils/common.d.ts

@@ -0,0 +1,82 @@
+import { Mutable, SlotObject } from '../ele-app/types';
+
+export * from './core';
+/**
+ * 防抖函数
+ * @param func 函数
+ * @param wait 等待时间
+ */
+export declare function debounce<T extends (...args: any) => any>(func: T, wait: number): (this: any) => void;
+/**
+ * 节流函数
+ * @param func 函数
+ * @param wait 等待时间
+ * @param trailing 是否在节流结束后调用
+ */
+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 {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Mutable<Omit<T, K>>;
+/**
+ * 摘选对象属性
+ * @param obj 来源对象
+ * @param fields 摘选的属性
+ */
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;
+/**
+ * 根据字段路径获取值
+ * @param data 数据
+ * @param path 字段路径
+ * @param defaultValue 默认值
+ */
+export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
+/**
+ * 首字母大写
+ * @param str 字符串
+ */
+export declare function capitalize(str: string): string;
+/**
+ * 获取映射后的插槽
+ * @param slots 插槽
+ * @param slotsMap 插槽映射
+ * @param excludes 排除的插槽映射
+ * @param excludeSlots 排除的插槽
+ * @param reserveSlots 是否保留所有的插槽
+ */
+export declare function getMappedSlots(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): SlotObject;
+/**
+ * 获取可用的插槽映射
+ * @param slots 插槽
+ * @param slotsMap 插槽映射
+ * @param excludes 排除的插槽映射
+ * @param excludeSlots 排除的插槽
+ * @param reserveSlots 是否保留所有的插槽
+ */
+export declare function getSlotsMap(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): Record<string, string>;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+/**
+ * 判断元素内容是否溢出省略
+ * @param el 元素节点
+ * @param direction 只判断单个方向是否溢出
+ */
+export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
+/**
+ * 下载文件
+ * @param url 文件地址
+ * @param name 文件名
+ */
+export declare function downloadUrl(url: string, name: string): void;
+/**
+ * 下载文件
+ * @param data 二进制数据
+ * @param name 文件名
+ * @param type 文件类型
+ */
+export declare function download(data: Blob | ArrayBuffer | string, name: string, type?: string): void;

package/es/utils/common.js

@@ -0,0 +1,162 @@
+export * from "./core";
+function debounce(func, wait) {
+  let timer = void 0;
+  const debounced = function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      func.apply(this, args);
+      timer = void 0;
+    }, wait);
+  };
+  return debounced;
+}
+function throttle(func, wait, trailing) {
+  let timer = void 0;
+  const debounced = function(...args) {
+    if (!timer) {
+      if (!trailing) {
+        func.apply(this, args);
+      }
+      timer = setTimeout(() => {
+        if (trailing) {
+          func.apply(this, args);
+        }
+        timer = void 0;
+      }, wait);
+    }
+  };
+  return debounced;
+}
+function omit(obj, fields) {
+  const result = Object.assign({}, obj);
+  if (obj) {
+    for (const key of fields) {
+      delete result[key];
+    }
+  }
+  return result;
+}
+function pick(obj, fields) {
+  const result = {};
+  if (obj) {
+    for (const key of fields) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+function getValue(data, path, defaultValue) {
+  if (data == null) {
+    return defaultValue;
+  }
+  const pathType = typeof path;
+  if (pathType === "function") {
+    return path(data);
+  }
+  const fields = (pathType === "string" ? path.match(/[^\[\].]+/g) : path) ?? [];
+  let result = data;
+  for (const key of fields) {
+    result = result[key.trim()];
+  }
+  return typeof result === "undefined" ? defaultValue : result;
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getMappedSlots(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+  const resultSlots = {};
+  const userSlots = slotsMap || {};
+  Object.keys(userSlots).forEach((name) => {
+    const slotName = userSlots[name];
+    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
+      resultSlots[name] = slots[slotName];
+    }
+  });
+  if (reserveSlots) {
+    Object.keys(slots).forEach((name) => {
+      if (!resultSlots[name] && !(excludeSlots || []).includes(name)) {
+        resultSlots[name] = slots[name];
+      }
+    });
+  }
+  return resultSlots;
+}
+function getSlotsMap(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+  const resultMap = {};
+  const userSlots = slotsMap || {};
+  Object.keys(userSlots).forEach((name) => {
+    const slotName = userSlots[name];
+    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
+      resultMap[name] = slotName;
+    }
+  });
+  if (reserveSlots) {
+    Object.keys(slots).forEach((name) => {
+      if (!resultMap[name] && !(excludeSlots || []).includes(name)) {
+        resultMap[name] = name;
+      }
+    });
+  }
+  return resultMap;
+}
+function getCurrentStyle(el) {
+  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+}
+function contentIsEllipsis(el, direction) {
+  if (!el || !el.childNodes.length) {
+    return false;
+  }
+  const range = document.createRange();
+  range.setStart(el, 0);
+  range.setEnd(el, el.childNodes.length);
+  const { width, height } = range.getBoundingClientRect();
+  const floorW = Math.floor(width);
+  const rangeWidth = width - floorW < 8e-3 ? floorW : width;
+  const floorH = Math.floor(height);
+  const rangeHeight = height - floorH < 8e-3 ? floorH : height;
+  const style = getCurrentStyle(el);
+  const top = Number.parseInt(style.paddingTop) || 0;
+  const left = Number.parseInt(style.paddingLeft) || 0;
+  const right = Number.parseInt(style.paddingRight) || 0;
+  const bottom = Number.parseInt(style.paddingBottom) || 0;
+  const horizontalPadding = left + right;
+  const verticalPadding = top + bottom;
+  if (direction === "horizontal") {
+    return rangeWidth + horizontalPadding > el.offsetWidth || el.scrollWidth > el.offsetWidth;
+  }
+  if (direction === "vertical") {
+    return rangeHeight + verticalPadding > el.offsetHeight || el.scrollHeight > el.offsetHeight;
+  }
+  return rangeWidth + horizontalPadding > el.offsetWidth || rangeHeight + verticalPadding > el.offsetHeight || el.scrollWidth > el.offsetWidth;
+}
+function downloadUrl(url, name) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+function download(data, name, type) {
+  const blob = new Blob([data], { type: type || "application/octet-stream" });
+  const url = URL.createObjectURL(blob);
+  downloadUrl(url, name);
+  URL.revokeObjectURL(url);
+}
+export {
+  capitalize,
+  contentIsEllipsis,
+  debounce,
+  download,
+  downloadUrl,
+  getCurrentStyle,
+  getMappedSlots,
+  getSlotsMap,
+  getValue,
+  omit,
+  pick,
+  throttle
+};

package/es/utils/core.d.ts

@@ -1,5 +1,3 @@
-import { Mutable } from '../ele-app/types';
-
 /**
  * toTree 方法参数
  */
@@ -35,68 +33,22 @@ export declare function toTree<T>(option: ToTreeOption<T>): T[];
  */
 export declare function eachTree<T>(data?: T[], callback?: (item: T, index: number, parent?: T) => void | boolean, childrenField?: string, parent?: T): false | undefined;
 /**
- * 格式化 children 形式数据
+ * 处理 children 形式数据
  * @param data 数据
  * @param formatter 格式器
  * @param childrenField children 字段名
  * @param resultChildrenField 返回后的 children 字段名
+ * @param afterFormatter 后置格式器
  * @param parent 当前的父级
  */
-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[];
+export declare function mapTree<T, K>(data: T[] | undefined | null, formatter: (item: T, index?: number, parent?: T | K) => K | void | undefined | 'flatChildren', childrenField?: string, resultChildrenField?: string, afterFormatter?: (item: K) => K | void | undefined, parent?: T | K): K[];
 /**
- * 查找树形数据
+ * 查找 children 形式数据
  * @param data 数据
  * @param predicate 查找条件
  * @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;
-/**
- * 数字千分位
- * @param num 数字
- */
-export declare function formatNumber(num?: number | null): string;
-/**
- * 赋值不改变原字段
- * @param target 目标对象
- * @param source 源对象
- * @param excludes 排除的字段
- */
-export declare function assignObject<T extends {}, K extends {}>(target: T, source: K, excludes?: string[]): T;
-/**
- * 判断是否是外链
- * @param url 地址
- */
-export declare function isExternalLink(url?: string | null): boolean;
-/**
- * 查找直接子元素
- * @param parentEl 父元素
- * @param className 类名
- * @param attr 属性
- */
-export declare function queryChild(parentEl?: Element, className?: string, attr?: string[]): Element | undefined;
-/**
- * 获取节点样式
- * @param el 节点
- */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
-/**
- * 判断元素内容是否溢出省略
- * @param el 元素节点
- * @param direction 只判断单个方向是否溢出
- */
-export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
 /**
  * 检查是否全屏
  */
@@ -130,43 +82,43 @@ export declare function bd09ToGcj02(point: Point): Point;
  */
 export declare function gcj02ToBd09(point: Point): Point;
 /**
- * 复制字符串
- * @param text 字符串
+ * 生成 m 到 n 的随机数
+ * @param m 最小值(包含)
+ * @param n 最大值(不包含)
  */
-export declare function copyText(text: string): Promise<undefined>;
+export declare function random(m: number, n: number): number;
 /**
- * 根据字段路径获取值
- * @param data 数据
- * @param path 字段路径
- * @param defaultValue 默认值
+ * 生成随机字符串
+ * @param length 长度
+ * @param radix 基数
  */
-export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
+export declare function uuid(length?: number, radix?: number): string;
 /**
- * 防抖函数
- * @param func 函数
- * @param wait 等待时间
+ * 数字千分位
+ * @param num 数字
  */
-export declare function debounce<T extends (...args: any) => any>(func: T, wait: number): (this: any) => void;
+export declare function formatNumber(num?: number | null): string;
 /**
- * 节流函数
- * @param func 函数
- * @param wait 等待时间
- * @param trailing 是否在节流结束后调用
+ * 赋值不改变原字段
+ * @param target 目标对象
+ * @param source 源对象
+ * @param excludes 排除的字段
  */
-export declare function throttle<T extends (...args: any) => any>(func: T, wait: number, trailing?: boolean): (this: any) => void;
+export declare function assignObject<T extends {}, K extends {}>(target: T, source: K, excludes?: string[]): T;
 /**
- * 忽略对象属性
- * @param obj 来源对象
- * @param fields 忽略的属性
+ * 复制字符串
+ * @param text 字符串
  */
-export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Mutable<Omit<T, K>>;
+export declare function copyText(text: string): Promise<undefined>;
 /**
- * 摘选对象属性
- * @param obj 来源对象
- * @param fields 摘选的属性
+ * 查找直接子元素
+ * @param parentEl 父元素
+ * @param className 根据类名查找
+ * @param attr 根据属性查找
  */
-export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;
+export declare function queryChild(parentEl?: Element, className?: string, attr?: string[]): Element | undefined;
 /**
- * 首字母大写
+ * 判断是否是外链
+ * @param url 地址
  */
-export declare function capitalize(str: string): string;
+export declare function isExternalLink(url?: string | null): boolean;