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

package/es/style/themes/default.scss

@@ -48,7 +48,7 @@
 }
 
 // 过渡动画
-$ele-transition: 0.3s cubic-bezier(0.2, 0, 0, 1) !default;
+$ele-transition: 0.2s !default;
 
 // 样式变量
 $ele: () !default;
@@ -119,6 +119,29 @@ $ele: map.merge(
       'item-radius': 2px,
       'popup-margin': 8px
     ),
+    'alert': (
+      // 警告提示
+      'color': elVar('text-color', 'regular'),
+      'size': elVar('font-size', 'small'),
+      'title-color': elVar('text-color', 'primary'),
+      'title-size': elVar('font-size', 'base'),
+      'title-line-height': 24px,
+      'icon-size': elVar('font-size', 'medium'),
+      'rich-icon-size': 26px,
+      'close-size': elVar('font-size', 'base'),
+      'close-color': elVar('text-color', 'placeholder'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'padding': 6px 12px,
+      'rich-padding': 12px 14px,
+      'radius': elVar('border-radius', 'base')
+    ),
+    'alert-dark': (
+      // 警告提示 dark 主题
+      'color': rgba(255, 255, 255, 0.8),
+      'title-color': #fff,
+      'close-color': rgba(255, 255, 255, 0.5),
+      'close-hover-color': rgba(255, 255, 255, 0.8)
+    ),
     'message-plain': (
       // 消息提示简约风格
       'color': elVar('text-color', 'regular'),
@@ -201,8 +224,8 @@ $ele: map.merge(
     ),
     'menu-horizontal': (
       // 水平菜单
-      'item-padding': 4px,
-      'item-margin': 12px
+      'item-padding': 16px,
+      'item-margin': 0
     ),
     'menu-group': (
       // 分组菜单
@@ -291,6 +314,37 @@ $ele: map.merge(
       'padding': 16px,
       'max-width': 1120px
     ),
+    'segmented': (
+      // 分段器
+      'padding': 3px,
+      'bg': elVar('fill-color', 'light'),
+      'radius': elVar('border-radius', 'base'),
+      'height': 28px,
+      'font-size': 14px,
+      'item-padding': 12px,
+      'color': elVar('text-color', 'secondary'),
+      'active-color': elVar('text-color', 'primary'),
+      'active-bg': elVar('bg-color', 'overlay'),
+      'active-shadow': 0 1px 3px 0 rgba(0, 0, 0, 0.08),
+      'hover-bg': rgba(0, 0, 0, 0.04),
+      'disabled-color': elVar('text-color', 'placeholder')
+    ),
+    'segmented-large': (
+      // 分段器大号
+      'padding': 4px,
+      'radius': 6px,
+      'height': 36px,
+      'font-size': 16px,
+      'item-padding': 16px
+    ),
+    'segmented-small': (
+      // 分段器小号
+      'padding': 2px,
+      'radius': elVar('border-radius', 'small'),
+      'height': 20px,
+      'font-size': 13px,
+      'item-padding': 7px
+    ),
     'tool-column': (
       // 表格列配置
       'width': 220px,
@@ -335,8 +389,9 @@ $ele: map.merge(
       'bg': elVar('bg-color', 'overlay')
     ),
     'table': (
-      // 静态表格
+      // 表格
       'bg': elVar('bg-color', 'overlay'),
+      'color': elVar('text-color', 'regular'),
       'border-color': elVar('border-color', 'light'),
       'font-szie': elVar('font-size', 'base'),
       'line-height': 23px,
@@ -350,7 +405,8 @@ $ele: map.merge(
       'lg-size': elVar('font-size', 'base'),
       'lg-padding': 13px 16px,
       'sm-size': elVar('font-size', 'extra-small'),
-      'sm-padding': 4px 8px
+      'sm-padding': 4px 8px,
+      'sticky-top': 0
     ),
     'text-size': (
       // 文本
@@ -383,16 +439,23 @@ $ele: map.merge(
     ),
     'tooltip': (
       // 文字提示
-      'padding': '6px 10px',
+      'line-height': '22px',
+      'font-size': elVar('font-size', 'extra-small'),
       'radius': elVar('border-radius', 'base'),
-      'size': elVar('font-size', 'extra-small'),
-      'line-height': '20px'
-    ),
-    'tooltip-dark': (
-      // 文字提示暗色风格
+      'padding': '6px 10px',
       'color': '#fff',
       'bg': '#000',
-      'border': none
+      'arrow-bg': eleVar('tooltip', 'bg'),
+      'border': none,
+      'arrow-size': '8px',
+      'arrow-offset': '-4px'
+    ),
+    'tooltip-light': (
+      // 文字提示亮色风格
+      'color': elVar('text-color', 'primary'),
+      'bg': elVar('bg-color', 'overlay'),
+      'arrow-bg': eleVar('tooltip-light', 'bg'),
+      'border': 1px solid elVar('border-color')
     ),
     'image-viewer': (
       // 图片预览

package/es/utils/core.d.ts

@@ -56,23 +56,6 @@ export declare function formatNumber(num?: number | null): string;
  * @param excludes 排除的字段
  */
 export declare function assignObject<T extends {}>(target: T, source: Record<string, any>, excludes?: string[]): T;
-/**
- * 经纬度坐标
- */
-export interface Point {
-    lng: number;
-    lat: number;
-}
-/**
- * 百度地图坐标转高德地图坐标
- * @param point 坐标
- */
-export declare function bd09ToGcj02(point: Point): Point;
-/**
- * 高德地图坐标转百度地图坐标
- * @param point 坐标
- */
-export declare function gcj02ToBd09(point: Point): Point;
 /**
  * 全屏
  * @param el HTMLElement
@@ -87,25 +70,22 @@ export declare function exitFullscreen(): void;
  */
 export declare function checkFullscreen(): boolean;
 /**
- * 获取屏幕宽度
- */
-export declare function screenWidth(): number;
-/**
- * 获取屏幕高度
- */
-export declare function screenHeight(): number;
-/**
- * 内容区域选择器
+ * 经纬度坐标
  */
-export declare const contentSelector = ".ele-admin-body > .ele-admin-content";
+export interface Point {
+    lng: number;
+    lat: number;
+}
 /**
- * 获取内容区域宽度
+ * 百度地图坐标转高德地图坐标
+ * @param point 坐标
  */
-export declare function contentWidth(): number;
+export declare function bd09ToGcj02(point: Point): Point;
 /**
- * 获取内容区域高度
+ * 高德地图坐标转百度地图坐标
+ * @param point 坐标
  */
-export declare function contentHeight(): number;
+export declare function gcj02ToBd09(point: Point): Point;
 /**
  * 判断是否是外链
  * @param url 地址
@@ -128,10 +108,10 @@ export declare function throttle<T extends (...args: any) => any>(func: T, wait:
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends object, K extends keyof T>(obj: T, ...fields: Array<K>): Omit<T, K>;
+export declare function omit<T extends object, K extends keyof T>(obj: T, fields: Array<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>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: Array<K>): Pick<T, K>;

package/es/utils/core.js

@@ -107,6 +107,23 @@ function assignObject(target, source, excludes) {
   });
   return target;
 }
+function requestFullscreen(el) {
+  if (el == null) {
+    el = document.documentElement;
+  }
+  const func = el.requestFullscreen || el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
+  if (!func) {
+    throw new Error("您的浏览器不支持全屏模式");
+  }
+  func.call(el);
+}
+function exitFullscreen() {
+  const func = document.exitFullscreen || document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
+  func && func.call(document);
+}
+function checkFullscreen() {
+  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
+}
 function bd09ToGcj02(point) {
   const x_pi = 3.141592653589793 * 3e3 / 180;
   const x = point.lng - 65e-4;
@@ -129,38 +146,6 @@ function gcj02ToBd09(point) {
     lat: z * Math.sin(theta) + 6e-3
   };
 }
-function requestFullscreen(el) {
-  if (el == null) {
-    el = document.documentElement;
-  }
-  const func = el.requestFullscreen || el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
-  if (!func) {
-    throw new Error("您的浏览器不支持全屏模式");
-  }
-  func.call(el);
-}
-function exitFullscreen() {
-  const func = document.exitFullscreen || document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
-  func && func.call(document);
-}
-function checkFullscreen() {
-  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
-}
-function screenWidth() {
-  return document.documentElement.clientWidth || document.body.clientWidth;
-}
-function screenHeight() {
-  return document.documentElement.clientHeight || document.body.clientHeight;
-}
-const contentSelector = ".ele-admin-body > .ele-admin-content";
-function contentWidth() {
-  const el = document.querySelector(contentSelector);
-  return (el == null ? void 0 : el.clientWidth) ?? screenWidth();
-}
-function contentHeight() {
-  const el = document.querySelector(contentSelector);
-  return (el == null ? void 0 : el.clientHeight) ?? screenHeight();
-}
 function isExternalLink(url) {
   return !!(url && (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")));
 }
@@ -189,7 +174,7 @@ function throttle(func, wait) {
   };
   return debounced;
 }
-function omit(obj, ...fields) {
+function omit(obj, fields) {
   const result = Object.assign({}, obj);
   if (obj) {
     for (let i = 0; i < fields.length; i++) {
@@ -199,7 +184,7 @@ function omit(obj, ...fields) {
   }
   return result;
 }
-function pick(obj, ...fields) {
+function pick(obj, fields) {
   const result = {};
   if (obj) {
     for (let i = 0; i < fields.length; i++) {
@@ -213,9 +198,6 @@ export {
   assignObject,
   bd09ToGcj02,
   checkFullscreen,
-  contentHeight,
-  contentSelector,
-  contentWidth,
   debounce,
   eachTree,
   exitFullscreen,
@@ -227,8 +209,6 @@ export {
   pick,
   random,
   requestFullscreen,
-  screenHeight,
-  screenWidth,
   throttle,
   toTree,
   uuid

package/es/utils/menu-util.js

@@ -1,5 +1,6 @@
+import { defineComponent, computed, unref, h } from "vue";
+import { useLayoutState } from "../ele-config-provider/receiver";
 import { isExternalLink, eachTree } from "./core";
-import { createIframe } from "./iframe-component";
 function camelCase(str) {
   const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
   return val.charAt(0).toUpperCase() + val.slice(1);
@@ -24,7 +25,28 @@ function getRouteComponent(menu, name, func) {
   if (!menu.component || !isExternalLink(menu.component)) {
     return { component: func(menu.component, menu, name) };
   }
-  return { component: createIframe(name, menu.component), link: true };
+  return {
+    component: defineComponent({
+      name,
+      setup() {
+        var _a;
+        const src = menu.component;
+        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
+        const layoutProvide = useLayoutState();
+        const keepAlive = computed(() => {
+          var _a2;
+          return (_a2 = unref(layoutProvide)) == null ? void 0 : _a2.keepAlive;
+        });
+        return () => {
+          if (!isAlive || !keepAlive.value) {
+            return h("iframe", { src, class: "ele-admin-iframe" });
+          }
+          return h("div", { class: "ele-none", style: { display: "none" } });
+        };
+      }
+    }),
+    link: true
+  };
 }
 function menuToRoutes(menus, getComponent, added) {
   if (!(menus == null ? void 0 : menus.length)) {

package/es/utils/message.js

@@ -32,7 +32,7 @@ const normalizeOptions = function(options, loading) {
     classes.push(opt.customClass);
   }
   opt.customClass = classes.join(" ");
-  return omit(opt, "original", "plain", "mask", "centered");
+  return omit(opt, ["original", "plain", "mask", "centered"]);
 };
 const EleMessage = function(options, context) {
   return ElMessage(normalizeOptions(options), context);

package/es/utils/theme-util.d.ts

@@ -3,4 +3,4 @@
  * @param color 颜色值
  * @param dark 是否暗黑模式
  */
-export declare function changeColor(color?: string | null, dark?: boolean, darkClass?: string): void;
+export declare function changeColor(color?: string | null, dark?: boolean): void;

package/es/utils/theme-util.js

@@ -1,22 +1,22 @@
 import { generate } from "@ant-design/colors";
-function changeColor(color, dark, darkClass = "dark") {
-  const root = document.querySelector("html");
-  if (!root) {
+function changeColor(color, dark) {
+  const $html = document.querySelector("html");
+  if (!$html) {
     return;
   }
-  const id = `ele-admin-theme-var`;
+  const id = "ele-theme-var";
   const elem = document.getElementById(id);
   if (elem == null ? void 0 : elem.parentNode) {
     elem.parentNode.removeChild(elem);
   }
   if (color) {
     const colors = generate(color, dark ? { theme: "dark" } : {});
-    const clazz = dark ? `html.${darkClass}` : ":root";
+    const selector = dark ? "html.dark" : ":root";
     const elem2 = document.createElement("style");
     elem2.id = id;
     elem2.setAttribute("type", "text/css");
     elem2.innerHTML = [
-      `${clazz}{`,
+      `${selector}{`,
       `--el-color-primary:${color};`,
       `--el-color-primary-light-3:${colors[4]};`,
       `--el-color-primary-light-5:${colors[3]};`,
@@ -27,14 +27,14 @@ function changeColor(color, dark, darkClass = "dark") {
       "}"
     ].join("");
     document.head.appendChild(elem2);
-    root.dataset.theme = color;
+    $html.dataset.color = color;
   } else {
-    root.removeAttribute("data-theme");
+    $html.removeAttribute("data-color");
   }
   if (dark) {
-    root.classList.add(darkClass);
+    $html.classList.add("dark");
   } else {
-    root.classList.remove(darkClass);
+    $html.classList.remove("dark");
   }
 }
 export {

package/lib/components.d.ts

@@ -1,3 +1,4 @@
+export { default as EleAlert } from "./ele-alert/index";
 export { default as EleApp } from './ele-app/index';
 export { default as EleAvatarGroup } from "./ele-avatar-group/index";
 export { default as EleBarCode } from "./ele-bar-code/index";
@@ -23,10 +24,12 @@ export { default as EleMenus } from './ele-menus/index';
 export { default as EleModal } from "./ele-modal/index";
 export { default as ElePage } from "./ele-page/index";
 export { default as ElePagination } from "./ele-pagination/index";
+export { default as ElePrinter } from "./ele-printer/index";
 export { default as EleProLayout } from "./ele-pro-layout/index";
 export { default as EleProTable } from "./ele-pro-table/index";
 export { default as EleQrCode } from "./ele-qr-code/index";
 export { default as EleQrCodeSvg } from "./ele-qr-code-svg/index";
+export { default as EleSegmented } from "./ele-segmented/index";
 export { default as EleSplitPanel } from "./ele-split-panel/index";
 export { default as EleSteps } from "./ele-steps/index";
 export { default as EleTabs } from "./ele-tabs/index";

package/lib/components.js

@@ -1,88 +1,94 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./ele-app/index");
-const index$1 = require("./ele-avatar-group/index");
-const index$2 = require("./ele-bar-code/index");
-const index$3 = require("./ele-basic-select/index");
-const index$4 = require("./ele-bottom-bar/index");
-const index$5 = require("./ele-breadcrumb/index");
-const index$6 = require("./ele-card/index");
-const index$7 = require("./ele-config-provider/index");
-const index$8 = require("./ele-count-up/index");
-const index$9 = require("./ele-cropper/index");
-const index$a = require("./ele-cropper-modal/index");
-const index$b = require("./ele-dashboard/index");
-const index$c = require("./ele-dot/index");
-const index$d = require("./ele-drawer/index");
-const index$e = require("./ele-edit-tag/index");
-const index$f = require("./ele-ellipsis/index");
-const index$g = require("./ele-file-list/index");
-const index$h = require("./ele-file-list-tool/index");
-const index$i = require("./ele-icon-select/index");
-const index$j = require("./ele-loading/index");
-const index$k = require("./ele-map-picker/index");
-const index$l = require("./ele-menus/index");
-const index$m = require("./ele-modal/index");
-const index$n = require("./ele-page/index");
-const index$o = require("./ele-pagination/index");
-const index$p = require("./ele-pro-layout/index");
-const index$q = require("./ele-pro-table/index");
-const index$r = require("./ele-qr-code/index");
-const index$s = require("./ele-qr-code-svg/index");
-const index$t = require("./ele-split-panel/index");
-const index$u = require("./ele-steps/index");
-const index$v = require("./ele-tabs/index");
-const index$w = require("./ele-tab-tool/index");
-const index$x = require("./ele-tab-wrap/index");
-const index$y = require("./ele-table/index");
-const index$z = require("./ele-table-select/index");
-const index$A = require("./ele-text/index");
-const index$B = require("./ele-tool/index");
-const index$C = require("./ele-toolbar/index");
-const index$D = require("./ele-tour/index");
-const index$E = require("./ele-upload-list/index");
-const index$F = require("./ele-watermark/index");
-const index$G = require("./ele-xg-player/index");
-exports.EleApp = index;
-exports.EleAvatarGroup = index$1;
-exports.EleBarCode = index$2;
-exports.EleBasicSelect = index$3;
-exports.EleBottomBar = index$4;
-exports.EleBreadcrumb = index$5;
-exports.EleCard = index$6;
-exports.EleConfigProvider = index$7;
-exports.EleCountUp = index$8;
-exports.EleCropper = index$9;
-exports.EleCropperModal = index$a;
-exports.EleDashboard = index$b;
-exports.EleDot = index$c;
-exports.EleDrawer = index$d;
-exports.EleEditTag = index$e;
-exports.EleEllipsis = index$f;
-exports.EleFileList = index$g;
-exports.EleFileListTool = index$h;
-exports.EleIconSelect = index$i;
-exports.EleLoading = index$j;
-exports.EleMapPicker = index$k;
-exports.EleMenus = index$l;
-exports.EleModal = index$m;
-exports.ElePage = index$n;
-exports.ElePagination = index$o;
-exports.EleProLayout = index$p;
-exports.EleProTable = index$q;
-exports.EleQrCode = index$r;
-exports.EleQrCodeSvg = index$s;
-exports.EleSplitPanel = index$t;
-exports.EleSteps = index$u;
-exports.EleTabs = index$v;
-exports.EleTabTool = index$w;
-exports.EleTabWrap = index$x;
-exports.EleTable = index$y;
-exports.EleTableSelect = index$z;
-exports.EleText = index$A;
-exports.EleTool = index$B;
-exports.EleToolbar = index$C;
-exports.EleTour = index$D;
-exports.EleUploadList = index$E;
-exports.EleWatermark = index$F;
-exports.EleXgPlayer = index$G;
+const index = require("./ele-alert/index");
+const index$1 = require("./ele-app/index");
+const index$2 = require("./ele-avatar-group/index");
+const index$3 = require("./ele-bar-code/index");
+const index$4 = require("./ele-basic-select/index");
+const index$5 = require("./ele-bottom-bar/index");
+const index$6 = require("./ele-breadcrumb/index");
+const index$7 = require("./ele-card/index");
+const index$8 = require("./ele-config-provider/index");
+const index$9 = require("./ele-count-up/index");
+const index$a = require("./ele-cropper/index");
+const index$b = require("./ele-cropper-modal/index");
+const index$c = require("./ele-dashboard/index");
+const index$d = require("./ele-dot/index");
+const index$e = require("./ele-drawer/index");
+const index$f = require("./ele-edit-tag/index");
+const index$g = require("./ele-ellipsis/index");
+const index$h = require("./ele-file-list/index");
+const index$i = require("./ele-file-list-tool/index");
+const index$j = require("./ele-icon-select/index");
+const index$k = require("./ele-loading/index");
+const index$l = require("./ele-map-picker/index");
+const index$m = require("./ele-menus/index");
+const index$n = require("./ele-modal/index");
+const index$o = require("./ele-page/index");
+const index$p = require("./ele-pagination/index");
+const index$q = require("./ele-printer/index");
+const index$r = require("./ele-pro-layout/index");
+const index$s = require("./ele-pro-table/index");
+const index$t = require("./ele-qr-code/index");
+const index$u = require("./ele-qr-code-svg/index");
+const index$v = require("./ele-segmented/index");
+const index$w = require("./ele-split-panel/index");
+const index$x = require("./ele-steps/index");
+const index$y = require("./ele-tabs/index");
+const index$z = require("./ele-tab-tool/index");
+const index$A = require("./ele-tab-wrap/index");
+const index$B = require("./ele-table/index");
+const index$C = require("./ele-table-select/index");
+const index$D = require("./ele-text/index");
+const index$E = require("./ele-tool/index");
+const index$F = require("./ele-toolbar/index");
+const index$G = require("./ele-tour/index");
+const index$H = require("./ele-upload-list/index");
+const index$I = require("./ele-watermark/index");
+const index$J = require("./ele-xg-player/index");
+exports.EleAlert = index;
+exports.EleApp = index$1;
+exports.EleAvatarGroup = index$2;
+exports.EleBarCode = index$3;
+exports.EleBasicSelect = index$4;
+exports.EleBottomBar = index$5;
+exports.EleBreadcrumb = index$6;
+exports.EleCard = index$7;
+exports.EleConfigProvider = index$8;
+exports.EleCountUp = index$9;
+exports.EleCropper = index$a;
+exports.EleCropperModal = index$b;
+exports.EleDashboard = index$c;
+exports.EleDot = index$d;
+exports.EleDrawer = index$e;
+exports.EleEditTag = index$f;
+exports.EleEllipsis = index$g;
+exports.EleFileList = index$h;
+exports.EleFileListTool = index$i;
+exports.EleIconSelect = index$j;
+exports.EleLoading = index$k;
+exports.EleMapPicker = index$l;
+exports.EleMenus = index$m;
+exports.EleModal = index$n;
+exports.ElePage = index$o;
+exports.ElePagination = index$p;
+exports.ElePrinter = index$q;
+exports.EleProLayout = index$r;
+exports.EleProTable = index$s;
+exports.EleQrCode = index$t;
+exports.EleQrCodeSvg = index$u;
+exports.EleSegmented = index$v;
+exports.EleSplitPanel = index$w;
+exports.EleSteps = index$x;
+exports.EleTabs = index$y;
+exports.EleTabTool = index$z;
+exports.EleTabWrap = index$A;
+exports.EleTable = index$B;
+exports.EleTableSelect = index$C;
+exports.EleText = index$D;
+exports.EleTool = index$E;
+exports.EleToolbar = index$F;
+exports.EleTour = index$G;
+exports.EleUploadList = index$H;
+exports.EleWatermark = index$I;
+exports.EleXgPlayer = index$J;