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

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

@@ -24,6 +24,7 @@
 @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 *;
+@use '../../ele-tab-bar/style/css-var.scss' as *;
 @use '../../ele-table/style/css-var.scss' as *;
 @use '../../ele-table-select/style/css-var.scss' as *;
 @use '../../ele-tabs/style/css-var.scss' as *;
@@ -33,7 +34,9 @@
 @use '../../ele-toolbar/style/css-var.scss' as *;
 @use '../../ele-tooltip/style/css-var.scss' as *;
 @use '../../ele-tree-select/style/css-var.scss' as *;
+@use '../../ele-tree-table/style/css-var.scss' as *;
 @use '../../ele-upload-list/style/css-var.scss' as *;
+@use '../../ele-viewer/style/css-var.scss' as *;
 @use '../../ele-virtual-table/style/css-var.scss' as *;
 
 /* 生成主题的 css 变量 */
@@ -65,6 +68,7 @@
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
     @include set-step-var($var);
+    @include set-tab-bar-var($var);
     @include set-table-var($var);
     @include set-table-select-var($var);
     @include set-tab-var($var);
@@ -74,7 +78,9 @@
     @include set-toolbar-var($var);
     @include set-tooltip-var($var);
     @include set-tree-select-var($var);
+    @include set-tree-table-var($var);
     @include set-upload-list-var($var);
+    @include set-viewer-var($var);
     @include set-virtual-table-var($var);
   }
 }

package/lib/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/lib/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/lib/utils/common.cjs

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("./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);
+}
+exports.capitalize = capitalize;
+exports.contentIsEllipsis = contentIsEllipsis;
+exports.debounce = debounce;
+exports.download = download;
+exports.downloadUrl = downloadUrl;
+exports.getCurrentStyle = getCurrentStyle;
+exports.getMappedSlots = getMappedSlots;
+exports.getSlotsMap = getSlotsMap;
+exports.getValue = getValue;
+exports.omit = omit;
+exports.pick = pick;
+exports.throttle = throttle;
+Object.keys(core).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => core[k]
+  });
+});

package/lib/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/lib/utils/core.cjs

@@ -72,23 +72,64 @@ function eachTree(data, callback, childrenField = "children", parent) {
     }
   }
 }
-function mapTree(data, formatter, childrenField = "children", resultChildrenField = "children", parent) {
+function formatTreeItem(item, index, parent, formatter, childrenField = "children", resultChildrenField = "children", afterFormatter) {
   const result = [];
-  if (data && data.length) {
+  const itemResult = formatter(item, index, parent);
+  if (itemResult === "flatChildren") {
+    const children = item[childrenField];
+    if (children) {
+      children.forEach((c, j) => {
+        const childItems = formatTreeItem(
+          c,
+          j,
+          item,
+          formatter,
+          childrenField,
+          resultChildrenField,
+          afterFormatter
+        );
+        childItems.forEach((childItem) => {
+          const afterItem = afterFormatter ? afterFormatter(childItem) : childItem;
+          if (afterItem) {
+            result.push(afterItem);
+          }
+        });
+      });
+    }
+  } else if (itemResult) {
+    if (item[childrenField] != null) {
+      itemResult[resultChildrenField] = mapTree(
+        item[childrenField],
+        formatter,
+        childrenField,
+        resultChildrenField,
+        afterFormatter,
+        itemResult
+      );
+    }
+    const afterItem = afterFormatter ? afterFormatter(itemResult) : itemResult;
+    if (afterItem) {
+      result.push(afterItem);
+    }
+  }
+  return result;
+}
+function mapTree(data, formatter, childrenField = "children", resultChildrenField = "children", afterFormatter, parent) {
+  const result = [];
+  if (data) {
     data.forEach((d, i) => {
-      const item = formatter(d, i, parent);
-      if (item) {
-        if (d[childrenField] != null) {
-          item[resultChildrenField] = mapTree(
-            d[childrenField],
-            formatter,
-            childrenField,
-            resultChildrenField,
-            item
-          );
-        }
+      const items = formatTreeItem(
+        d,
+        i,
+        parent,
+        formatter,
+        childrenField,
+        resultChildrenField,
+        afterFormatter
+      );
+      items.forEach((item) => {
         result.push(item);
-      }
+      });
     });
   }
   return result;
@@ -107,75 +148,6 @@ function findTree(data, predicate, childrenField) {
   );
   return temp;
 }
-function random(m, n) {
-  return Math.floor(Math.random() * (m - n) + n);
-}
-function uuid(length = 32, radix) {
-  const str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += str.charAt(Math.floor(Math.random() * (radix || str.length)));
-  }
-  return result;
-}
-function formatNumber(num) {
-  return String(num ?? "").replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");
-}
-function assignObject(target, source, excludes) {
-  Object.keys(target).forEach((key) => {
-    var _a;
-    if (!((_a = excludes == null ? void 0 : excludes.includes) == null ? void 0 : _a.call(excludes, key))) {
-      target[key] = source[key];
-    }
-  });
-  return target;
-}
-function isExternalLink(url) {
-  return !!(url && (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")));
-}
-function queryChild(parentEl, className, attr) {
-  return Array.from((parentEl == null ? void 0 : parentEl.children) ?? []).find((el) => {
-    if (className && !el.classList.contains(className)) {
-      return false;
-    }
-    if (attr != null && attr[0] != null) {
-      if (el.getAttribute(attr[0]) != attr[1]) {
-        return false;
-      }
-    }
-    return true;
-  });
-}
-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 checkFullscreen() {
   return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
 }
@@ -215,6 +187,29 @@ function gcj02ToBd09(point) {
     lat: z * Math.sin(theta) + 6e-3
   };
 }
+function random(m, n) {
+  return Math.floor(Math.random() * (m - n) + n);
+}
+function uuid(length = 32, radix) {
+  const str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += str.charAt(Math.floor(Math.random() * (radix || str.length)));
+  }
+  return result;
+}
+function formatNumber(num) {
+  return String(num ?? "").replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");
+}
+function assignObject(target, source, excludes) {
+  Object.keys(target).forEach((key) => {
+    var _a;
+    if (!((_a = excludes == null ? void 0 : excludes.includes) == null ? void 0 : _a.call(excludes, key))) {
+      target[key] = source[key];
+    }
+  });
+  return target;
+}
 async function copyText(text) {
   var _a;
   if (typeof ((_a = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a.writeText) === "function") {
@@ -237,89 +232,35 @@ async function copyText(text) {
   }
   el.remove();
 }
-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 debounce(func, wait) {
-  let timer = void 0;
-  const debounced = function(...args) {
-    if (timer) {
-      clearTimeout(timer);
+function queryChild(parentEl, className, attr) {
+  return Array.from((parentEl == null ? void 0 : parentEl.children) ?? []).find((el) => {
+    if (className && !el.classList.contains(className)) {
+      return false;
     }
-    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);
+    if (attr != null && attr[0] != null) {
+      if (el.getAttribute(attr[0]) != attr[1]) {
+        return false;
       }
-      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;
+    return true;
+  });
 }
-function pick(obj, fields) {
-  const result = {};
-  if (obj) {
-    for (const key of fields) {
-      result[key] = obj[key];
-    }
-  }
-  return result;
+function isExternalLink(url) {
+  return !!(url && (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")));
 }
 exports.assignObject = assignObject;
 exports.bd09ToGcj02 = bd09ToGcj02;
 exports.checkFullscreen = checkFullscreen;
-exports.contentIsEllipsis = contentIsEllipsis;
 exports.copyText = copyText;
-exports.debounce = debounce;
 exports.eachTree = eachTree;
 exports.exitFullscreen = exitFullscreen;
 exports.findTree = findTree;
 exports.formatNumber = formatNumber;
 exports.gcj02ToBd09 = gcj02ToBd09;
-exports.getCurrentStyle = getCurrentStyle;
-exports.getValue = getValue;
 exports.isExternalLink = isExternalLink;
 exports.mapTree = mapTree;
-exports.omit = omit;
-exports.pick = pick;
 exports.queryChild = queryChild;
 exports.random = random;
 exports.requestFullscreen = requestFullscreen;
-exports.throttle = throttle;
 exports.toTree = toTree;
 exports.uuid = uuid;