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

package/lib/style/themes/default.scss

@@ -2,8 +2,10 @@
 @use 'sass:map';
 @use '../util.scss' as *;
 
-// 过渡动画
+// 过渡动画时间
 $transition-base: 0.2s !default;
+// 过渡动画慢速
+$transition-slow: 0.3s !default;
 // 美化滚动条样式选择器
 $scrollbar-selector: '' !default;
 // 输入框清空图标
@@ -242,16 +244,25 @@ $ele: map.deep-merge(
       'item-active-font-weight': bold,
       'item-danger-color': elVar('color-danger'),
       'item-danger-bg': elVar('color-danger', 'light-9'),
+      'item-danger-hover-bg': elVar('color-danger', 'light-8'),
+      'item-disabled-color': elVar('disabled', 'text-color'),
+      'item-disabled-bg': elVar('disabled', 'bg-color'),
       'icon-size': 16px,
       'icon-margin': 0 8px 0 -2px,
+      'divider': 1px solid elVar('border-color', 'light'),
+      'divider-margin': 6px 0,
       'sm-padding': 3px 0,
       'sm-item-height': 24px,
       'sm-item-padding': 0 12px,
       'sm-item-font-size': elVar('font-size', 'extra-small'),
+      'sm-icon-size': 14px,
+      'sm-divider-margin': 3px 0,
       'lg-padding': 8px 0,
       'lg-item-height': 36px,
       'lg-item-padding': 0 20px,
-      'lg-item-font-size': elVar('font-size', 'base')
+      'lg-item-font-size': elVar('font-size', 'base'),
+      'lg-icon-size': 16px,
+      'lg-divider-margin': 8px 0
     ),
     'file': (
       // 文件列表
@@ -505,7 +516,13 @@ $ele: map.deep-merge(
       'sm-radius': 24px,
       'sm-space': 4px,
       'sm-gap': 8px,
-      'sm-font-size': 14px
+      'sm-font-size': 14px,
+      'lg-height': 40px,
+      'lg-padding': 0 8px,
+      'lg-radius': 40px,
+      'lg-space': 8px,
+      'lg-gap': 8px 12px,
+      'lg-font-size': 14px
     ),
     'segmented': (
       // 分段器
@@ -600,7 +617,6 @@ $ele: map.deep-merge(
       'tool-hover-color': elVar('text-color', 'primary'),
       'hover-index': 2,
       'active-index': 3,
-      'transition': (color, background-color, border-color, box-shadow),
       'scroll-left-shadow': inset 10px 0 10px -10px rgba(0, 0, 0, 0.15),
       'scroll-right-shadow': inset -10px 0 10px -10px rgba(0, 0, 0, 0.15),
       'sm-height': 32px,
@@ -714,15 +730,16 @@ $ele: map.deep-merge(
       // 高级表格列配置
       'width': 220px,
       'max-height': 480px,
-      'header-padding': 6px 16px 4px 12px,
+      'header-padding': 6px 14px 4px 14px,
       'header-border': 1px solid elVar('border-color', 'light'),
       'body-padding': 6px 0,
-      'item-padding': 12px,
+      'item-padding': 14px,
       'item-height': 28px,
       'item-hover-bg': elVar('color-primary', 'light-9'),
       'item-radius': 0,
-      'btn-space': 0,
-      'btn-padding': 3px,
+      'btn-space': 1px,
+      'btn-size': 18px,
+      'btn-offset': -6px,
       'btn-radius': elVar('border-radius', 'small'),
       'btn-color': elVar('text-color', 'placeholder'),
       'btn-hover-color': elVar('text-color', 'primary'),
@@ -767,6 +784,63 @@ $ele: map.deep-merge(
       'padding': 6px 0,
       'item-disabled-color': elVar('disabled', 'text-color')
     ),
+    'upload-list': (
+      // 文件上传
+      'width': 108px,
+      'height': 108px,
+      'padding': 6px,
+      'gap': 8px,
+      'border': 1px solid elVar('border-color'),
+      'radius': elVar('border-radius', 'base'),
+      'bg': elVar('bg-color'),
+      'btn-color': elVar('text-color', 'secondary'),
+      'btn-font-size': 22px,
+      'btn-bg': elVar('fill-color', 'lighter'),
+      'btn-border': 1px dashed elVar('border-color'),
+      'btn-hover-border': 1px dashed elVar('color-primary'),
+      'btn-drag-bg': elVar('color-primary', 'light-9'),
+      'btn-disabled-color': elVar('disabled', 'text-color'),
+      'btn-disabled-bg': elVar('disabled', 'bg-color'),
+      'btn-disabled-border': 1px dashed elVar('disabled', 'border-color'),
+      'tool-color': #fff,
+      'tool-font-size': 12px,
+      'tool-padding': 4px 0,
+      'tool-bg': hsla(0, 0%, 40%, 0.8),
+      'tool-hover-bg': hsla(0, 0%, 60%, 0.8),
+      'del-size': 18px,
+      'del-icon-margin': -2px -3px 0 0,
+      'del-hover-bg': elVar('color-danger'),
+      'del-shadow': 0 0 2px 0 rgba(255, 255, 255, 0.6),
+      'thumbnail-color': elVar('text-color', 'regular'),
+      'thumbnail-font-size': 12px,
+      'thumbnail-icon-color': elVar('text-color', 'placeholder'),
+      'thumbnail-icon-font-size': 24px,
+      'thumbnail-gap': 4px,
+      'progress-padding': 0 6px,
+      'progress-bg': rgba(0, 0, 0, 0.6),
+      'progress-color': #fff,
+      'progress-font-size': 12px,
+      'progress-tool-font-size': 12px,
+      'progress-tool-padding': 4px,
+      'progress-tool-radius': elVar('border-radius', 'small'),
+      'progress-tool-gap': 4px,
+      'progress-tool-bg': hsla(0, 0%, 60%, 0.4),
+      'progress-tool-hover-bg': hsla(0, 0%, 60%, 0.8),
+      'file-height': 26px,
+      'file-padding': 8px,
+      'file-btn-font-size': 15px,
+      'file-tool-size': 20px,
+      'file-tool-color': elVar('text-color', 'secondary'),
+      'file-tool-radius': elVar('border-radius', 'small'),
+      'file-tool-gap': 2px,
+      'file-tool-hover-color': elVar('color-primary'),
+      'file-tool-hover-bg': transparent,
+      'file-del-margin': 0 -4px 0 2px,
+      'file-del-hover-color': elVar('color-danger'),
+      'file-thumbnail-font-size': 14px,
+      'file-thumbnail-icon-color': elVar('text-color', 'secondary'),
+      'file-thumbnail-icon-font-size': 14px
+    ),
     'popper': (
       // 底层气泡
       'bg': elVar('bg-color', 'overlay'),
@@ -1101,7 +1175,16 @@ $ele: map.deep-merge(
     ),
     'image-viewer': (
       // 图片预览
-      'tool-bg': hsla(0, 0%, 28%, 0.6)
+      'tool-bg': hsla(0, 0%, 40%, 0.6),
+      'tool-hover-bg': hsla(0, 0%, 36%, 0.8),
+      'tool-size': 42px,
+      'tool-font-size': 20px,
+      'tool-action-size': 42px,
+      'tool-action-font-size': 18px,
+      'tool-action-gap': 0,
+      'tool-action-hover-bg': hsla(0, 0%, 32%, 0.4),
+      'tool-shadow': 0 0 1px 0 rgba(255, 255, 255, 0.2),
+      'disabled-opacity': 0.4
     ),
     'descriptions': (
       // 描述列表

package/lib/style/themes/rounded.scss

@@ -109,7 +109,8 @@ $ele-rounded: map.deep-merge(
       'active-bg': none,
       'active-border': 1px solid elVar('color', 'primary'),
       'active-font-weight': bold,
-      'sm-radius': elVar('border-radius', 'base')
+      'sm-radius': elVar('border-radius', 'base'),
+      'lg-radius': $radius-large
     ),
     'segmented': (
       'radius': elVar('border-radius', 'small')
@@ -133,14 +134,13 @@ $ele-rounded: map.deep-merge(
       'close-hover-bg': hsla(0, 0%, 60%, 0.15),
       'active-close-hover-color': elVar('text-color', 'primary'),
       'active-close-hover-bg': hsla(0, 0%, 60%, 0.15),
-      'transition': (color, box-shadow),
       'sm-close-size': 14px,
       'lg-close-size': 20px,
-      'simple-radius': 8px 8px 0px 0px,
+      'simple-radius': 10px 10px 0px 0px,
       'simple-active-weight': bold,
       'simple-active-line': 0px,
       'simple-line-display': none,
-      'simple-angle-size': 10px,
+      'simple-angle-size': 12px,
       'simple-angle-display': block,
       'simple-tool-hover-bg': transparent,
       'button-radius': $radius-large,
@@ -164,7 +164,7 @@ $ele-rounded: map.deep-merge(
     ),
     'tool-column': (
       'body-padding': 6px 4px,
-      'item-padding': 8px,
+      'item-padding': 10px,
       'item-radius': elVar('border-radius', 'small'),
       'btn-hover-bg': elVar('color-primary', 'light-8'),
       'btn-active-bg': elVar('color-primary', 'light-7')
@@ -179,6 +179,10 @@ $ele-rounded: map.deep-merge(
       'item-radius': elVar('border-radius', 'small'),
       'expand-hover-bg': hsla(0, 0%, 60%, 0.15)
     ),
+    'upload-list': (
+      'file-tool-hover-color': elVar('text-color', 'primary'),
+      'file-tool-hover-bg': elVar('fill-color', 'light')
+    ),
     'popper': (
       'radius': $radius-large
     ),

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

@@ -11,6 +11,7 @@
 @use '../../ele-dropdown/style/css-var.scss' as *;
 @use '../../ele-file-list/style/css-var.scss' as *;
 @use '../../ele-icon-select/style/css-var.scss' as *;
+@use '../../ele-image-viewer/style/css-var.scss' as *;
 @use '../../ele-loading/style/css-var.scss' as *;
 @use '../../ele-map-picker/style/css-var.scss' as *;
 @use '../../ele-menus/style/css-var.scss' as *;
@@ -29,6 +30,7 @@
 @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-upload-list/style/css-var.scss' as *;
 @use '../../ele-virtual-table/style/css-var.scss' as *;
 
 /* 生成主题的 css 变量 */
@@ -47,6 +49,7 @@
     @include set-dropdown-var($var);
     @include set-file-var($var);
     @include set-icon-var($var);
+    @include set-image-viewer-var($var);
     @include set-loading-var($var);
     @include set-map-var($var);
     @include set-menus-var($var);
@@ -65,6 +68,7 @@
     @include set-toolbar-var($var);
     @include set-tooltip-var($var);
     @include set-tree-select-var($var);
+    @include set-upload-list-var($var);
     @include set-virtual-table-var($var);
   }
 }

package/lib/style/util.scss

@@ -27,11 +27,18 @@
   @return eleJoinVar($args);
 }
 
+/* 生成 css 变量 */
+@mixin set-ele-var-value($name, $attribute, $value) {
+  #{eleVarName($name, $attribute)}: #{$value};
+}
+
 /* 生成组件 css 变量 */
 @mixin set-ele-var($name, $variables) {
-  @if map.has-key($variables, $name) {
-    @each $attribute, $value in map.get($variables, $name) {
-      #{eleVarName($name, $attribute)}: #{$value};
+  & {
+    @if map.has-key($variables, $name) {
+      @each $attribute, $value in map.get($variables, $name) {
+        @include set-ele-var-value($name, $attribute, $value);
+      }
     }
   }
 }

package/lib/utils/core.d.ts

@@ -1,3 +1,5 @@
+import { Mutable } from '../ele-app/types';
+
 /**
  * toTree 方法参数
  */
@@ -157,10 +159,10 @@ export declare function throttle<T extends (...args: any) => any>(func: T, wait:
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Omit<T, K>;
+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[]): Pick<T, K>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;

package/lib/utils/hook.cjs

@@ -3,23 +3,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 function useTimer(ms, cb) {
   let timer = null;
+  const waiting = vue.ref(false);
   const stopTimer = () => {
     if (timer != null) {
       clearTimeout(timer);
       timer = null;
     }
+    waiting.value = false;
   };
   const startTimer = (callback, timeout) => {
     stopTimer();
-    timer = setTimeout(
-      callback ?? cb,
-      timeout ?? (typeof ms === "function" ? ms() : ms)
-    );
+    waiting.value = true;
+    const to = timeout ?? (typeof ms === "function" ? ms() : ms);
+    timer = setTimeout(() => {
+      const func = callback ?? cb;
+      func && func();
+      waiting.value = false;
+    }, to);
   };
   vue.onBeforeUnmount(() => {
     stopTimer();
   });
-  return [startTimer, stopTimer];
+  return [startTimer, stopTimer, waiting];
 }
 function useMediaQuery(query, onChange) {
   const mediaQuery = window.matchMedia(query);
@@ -105,7 +110,155 @@ function useCollapseAnim() {
     handleAfterLeave
   };
 }
+function useMousewheel(cb) {
+  const handleMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta > 0 ? "up" : "down" });
+  };
+  const handleFirefoxMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta < 0 ? "up" : "down" });
+  };
+  const bindMousewheel = (el) => {
+    el.addEventListener("mousewheel", handleMousewheel, { passive: false });
+    el.addEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  const unbindMousewheel = (el) => {
+    el.removeEventListener("mousewheel", handleMousewheel);
+    el.removeEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  return {
+    handleMousewheel,
+    handleFirefoxMousewheel,
+    bindMousewheel,
+    unbindMousewheel
+  };
+}
+function useTouchEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const handleTouchStart = (e) => {
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const handleTouchMove = (e) => {
+    if (startX != null && startY != null) {
+      const currentX = e.touches[0].clientX;
+      const currentY = e.touches[0].clientY;
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const handleTouchEnd = (e) => {
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const bindTouchEvent = (el) => {
+    el.addEventListener("touchstart", handleTouchStart);
+    el.addEventListener("touchmove", handleTouchMove);
+    el.addEventListener("touchend", handleTouchEnd);
+  };
+  const unbindTouchEvent = (el) => {
+    el.removeEventListener("touchstart", handleTouchStart);
+    el.removeEventListener("touchmove", handleTouchMove);
+    el.removeEventListener("touchend", handleTouchEnd);
+  };
+  return {
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    bindTouchEvent,
+    unbindTouchEvent
+  };
+}
+function useMoveEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const unbindEvent = () => {
+    document.removeEventListener("mousemove", mousemoveFn);
+    document.removeEventListener("mouseup", mouseupFn);
+    document.removeEventListener("touchmove", touchmoveFn);
+    document.removeEventListener("touchend", touchendFn);
+  };
+  const emitStart = (clientX, clientY, e) => {
+    startX = clientX;
+    startY = clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const emitMove = (currentX, currentY, e) => {
+    if (startX != null && startY != null) {
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const emitEnd = (e) => {
+    unbindEvent();
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const mousemoveFn = function(e) {
+    emitMove(e.clientX, e.clientY, e);
+  };
+  const touchmoveFn = function(e) {
+    emitMove(e.touches[0].clientX, e.touches[0].clientY, e);
+  };
+  const mouseupFn = (e) => {
+    emitEnd(e);
+  };
+  const touchendFn = (e) => {
+    emitEnd(e);
+  };
+  const handleMousedown = (e) => {
+    emitStart(e.clientX, e.clientY, e);
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", mouseupFn);
+  };
+  const handleTouchstart = (e) => {
+    emitStart(e.touches[0].clientX, e.touches[0].clientY, e);
+    document.addEventListener(
+      "touchmove",
+      touchmoveFn,
+      option == null ? void 0 : option.touchmoveOptions
+    );
+    document.addEventListener("touchend", touchendFn);
+  };
+  vue.onBeforeUnmount(() => {
+    unbindEvent();
+  });
+  return {
+    handleMousedown,
+    handleTouchstart
+  };
+}
 exports.useCollapseAnim = useCollapseAnim;
 exports.useMediaQuery = useMediaQuery;
+exports.useMousewheel = useMousewheel;
+exports.useMoveEvent = useMoveEvent;
 exports.useTimer = useTimer;
+exports.useTouchEvent = useTouchEvent;
 exports.useWindowListener = useWindowListener;

package/lib/utils/hook.d.ts

@@ -1,9 +1,12 @@
+import { Ref } from 'vue';
+
 /**
- * useTimer返回结果
+ * useTimer 返回结果
  */
 export type UseTimerResult = [
-    (callback: () => void, timeout?: number) => void,
-    () => void
+    (callback?: () => void, timeout?: number) => void,
+    () => void,
+    Ref<boolean>
 ];
 /**
  * 定时器
@@ -12,7 +15,7 @@ export type UseTimerResult = [
  */
 export declare function useTimer(ms?: number | (() => number), cb?: () => void): UseTimerResult;
 /**
- * useMediaQuery返回结果
+ * useMediaQuery 返回结果
  */
 export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
 /**
@@ -38,3 +41,73 @@ export declare function useCollapseAnim(): {
     handleLeave: (el: HTMLElement) => void;
     handleAfterLeave: (el: HTMLElement) => void;
 };
+/**
+ * 鼠标滚轮事件回调方法参数
+ */
+export interface UseMousewheelCallbackParam {
+    /** 事件对象 */
+    e: MouseEvent;
+    /** 方向 */
+    direction: 'up' | 'down';
+}
+/**
+ * 鼠标滚轮事件
+ * @param cb 回调
+ */
+export declare function useMousewheel(cb?: (p: UseMousewheelCallbackParam) => void): {
+    handleMousewheel: (e: MouseEvent) => void;
+    handleFirefoxMousewheel: (e: MouseEvent) => void;
+    bindMousewheel: (el: HTMLElement) => void;
+    unbindMousewheel: (el: HTMLElement) => void;
+};
+/**
+ * 触摸事件回调参数
+ */
+export interface UseTouchEventCallbackParam<T> {
+    /** 事件对象 */
+    e: T;
+    /** 开始横向位置 */
+    startX: number | null;
+    /** 开始纵向位置 */
+    startY: number | null;
+    /** 横向移动距离 */
+    distanceX?: number | null;
+    /** 纵向移动距离 */
+    distanceY?: number | null;
+}
+/**
+ * 触摸事件参数
+ */
+export interface UseTouchEventOption<T> {
+    /** 触摸开始的回调 */
+    start?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸移动的回调 */
+    move?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸结束的回调 */
+    end?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** touchmove 事件参数 */
+    touchmoveOptions?: any;
+}
+/**
+ * 触摸事件
+ * @param option 参数
+ */
+export declare function useTouchEvent(option?: UseTouchEventOption<TouchEvent>): {
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleTouchEnd: (e: TouchEvent) => void;
+    bindTouchEvent: (el: HTMLElement) => void;
+    unbindTouchEvent: (el: HTMLElement) => void;
+};
+/**
+ * 移动事件对象
+ */
+export type MoveEvent = MouseEvent | TouchEvent;
+/**
+ * 鼠标移动事件或触摸移动事件
+ * @param option 参数
+ */
+export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
+    handleMousedown: (e: MouseEvent) => void;
+    handleTouchstart: (e: TouchEvent) => void;
+};

package/lib/utils/menu-util.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
+const vueRouter = require("vue-router");
 const util = require("../ele-pro-layout/util");
 const core = require("./core");
 function camelCase(str) {
@@ -25,13 +26,18 @@ function getRouteComponent(menu, name, func) {
       name,
       setup() {
         var _a;
-        const src = menu.component;
-        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         const proLayoutState = util.useProLayoutState();
+        const route = vueRouter.useRoute();
+        const { fullPath } = route;
+        const iframeSrc = vue.ref(util.getIframeSrc(fullPath, menu.component));
+        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         const keepAlive = vue.computed(() => !!proLayoutState.keepAlive);
         return () => {
           if (!isAlive || !keepAlive.value) {
-            return vue.h("iframe", { src, class: "ele-admin-iframe" });
+            return vue.h("iframe", {
+              src: iframeSrc.value,
+              class: "ele-admin-iframe"
+            });
           }
           return vue.h("div", { class: "ele-none", style: { display: "none" } });
         };

package/lib/utils/message-box.cjs

@@ -50,8 +50,12 @@ function useMessageBox(globalOpt) {
           state.wrapEl = getWrapEl(layoutState.modalsEl);
         }
         opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = vue.unref(opt.appendTo);
       }
       opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = vue.unref(opt.appendTo);
     }
     const classes = ["ele-message-box"];
     if (opt.customClass) {

package/lib/utils/message.cjs

@@ -50,7 +50,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     opt.message = params;
   }
   opt.type = type ?? opt.type;
-  opt.appendTo = opt.appendTo ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  opt.appendTo = (opt.appendTo == null ? void 0 : vue.unref(opt.appendTo)) ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
   const classes = ["ele-message"];
   if (opt.original === "plain") {
     classes.push("is-plain-alert");