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

package/es/ele-app/style/overwrite/input/index.scss

@@ -1,8 +1,6 @@
 @use '../../../../style/themes/default.scss' as *;
 @use '../../../../style/util.scss' as *;
 @use './css-var.scss' as *;
-$ele-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;
-$ele-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;
 
 @include set-el-input-var($ele);
 
@@ -18,7 +16,7 @@ $ele-validate-path: 'M512 43C768 43 981 256 981 512S768 981 512 981 43 768 43 51
   padding-bottom: 0;
   padding-left: eleVar('input', 'padding-left');
   padding-right: eleVar('input', 'padding-right');
-  transition: all $ele-transition;
+  transition: all $transition-base;
   box-sizing: border-box;
   position: relative;
   box-shadow: none;
@@ -92,7 +90,7 @@ body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
 .el-input .el-input__wrapper .el-input__prefix-icon {
   color: eleVar('input', 'icon-color');
   font-size: eleVar('input', 'icon-size');
-  transition: all $ele-transition;
+  transition: all $transition-base;
   height: 1em;
 }
 
@@ -157,7 +155,7 @@ body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
 }
 
 .el-input__validateIcon > svg > path {
-  #{'d'}: path($ele-validate-path);
+  #{'d'}: path($icon-validate-path);
 
   &:last-child {
     fill: none;
@@ -171,7 +169,7 @@ body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
 .el-input__icon.clear-icon > svg > path,
 .el-input__icon.el-range__close-icon > svg > path,
 .el-form-item.is-error .el-input__validateIcon > svg > path {
-  #{'d'}: path($ele-clear-path);
+  #{'d'}: path($icon-clear-path);
 
   &:last-child {
     fill: none;
@@ -187,7 +185,7 @@ body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
     stroke: currentColor;
     stroke-width: 84;
     stroke-linecap: round;
-    transition: (d $ele-transition, fill $ele-transition);
+    transition: (d $transition-base, fill $transition-base);
     #{'d'}: path('M216 362L512 662L808 362');
   }
 
@@ -207,7 +205,7 @@ body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
   & > svg > path[d^='m466'] {
     stroke: none;
     fill: eleVar('input', 'clear-color');
-    #{'d'}: path($ele-clear-path);
+    #{'d'}: path($icon-clear-path);
   }
 
   & > svg > path + path {
@@ -285,6 +283,8 @@ body .el-input.is-disabled .el-input__wrapper,
 body .el-textarea.is-disabled .el-textarea__inner,
 body .el-select.el-select--disabled .el-input.is-disabled .el-input__wrapper,
 .el-select .el-select__wrapper.is-disabled,
+.el-select .el-select__wrapper.is-disabled:hover,
+.el-select .el-select__wrapper.is-disabled.is-hovering,
 .el-date-editor.el-range-editor.is-disabled.el-input__wrapper {
   cursor: not-allowed;
   border: eleVar('input', 'disabled-border');
@@ -367,7 +367,7 @@ body .el-textarea .el-input__count {
   .el-input-number__increase,
   .el-input-number__decrease {
     width: elVar('component-size');
-    transition: color $ele-transition;
+    transition: color $transition-base;
     bottom: 0.8px;
     top: 0.8px;
   }

package/es/ele-app/style/overwrite/message-box/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/message-box/index.js

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/message-box/style/index';
-import './index.scss';
+import "element-plus/es/components/message-box/style/index";
+import "./index.scss";

package/es/ele-app/style/overwrite/message-box/index.scss

@@ -38,7 +38,7 @@
     color: eleVar('message-box', 'icon-color');
     font-size: eleVar('message-box', 'icon-font-size');
     border-radius: eleVar('message-box', 'icon-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     position: static;
     right: auto;
@@ -84,6 +84,10 @@
   }
 }
 
+.el-message-box .el-message-box__status.el-message-box-icon--info {
+  color: elVar('color-primary');
+}
+
 .el-message-box__message {
   word-break: break-all;
 }
@@ -96,3 +100,30 @@ body .el-overlay.is-message-box > .el-overlay-message-box {
     display: none;
   }
 }
+
+/* 容器 */
+.ele-message-box-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+
+  & > .el-overlay.is-message-box {
+    pointer-events: auto;
+    position: absolute;
+
+    & > .el-overlay-message-box {
+      position: absolute;
+    }
+  }
+
+  &.is-hide {
+    display: none;
+  }
+}

package/es/ele-app/style/overwrite/notification/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/notification/index.js

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/notification/style/index';
-import './index.scss';
+import "element-plus/es/components/notification/style/index";
+import "./index.scss";

package/es/ele-app/style/overwrite/notification/index.scss

@@ -38,7 +38,7 @@ body .el-notification {
     font-size: eleVar('notification', 'close-font-size');
     margin: eleVar('notification', 'close-margin');
     border-radius: eleVar('notification', 'close-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
 
     &:hover {
       color: eleVar('notification', 'close-hover-color');

package/es/ele-app/style/overwrite/popper/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/popper/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/radio/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/radio/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/radio/index.scss

@@ -13,13 +13,15 @@ body .el-radio {
   }
 
   .el-radio__inner {
-    $transit: (border-color $ele-transition, background-color $ele-transition);
     width: eleVar('radio', 'size');
     height: eleVar('radio', 'size');
     background: eleVar('radio', 'bg');
     border: eleVar('radio', 'border');
     border-radius: eleVar('radio', 'radius');
-    transition: $transit;
+    transition: (
+      border-color $transition-base,
+      background-color $transition-base
+    );
 
     &::after {
       $size: eleVar('radio', 'dot-size');

package/es/ele-app/style/overwrite/select/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/select/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/select/index.scss

@@ -21,7 +21,7 @@
     line-height: eleVar('select', 'item-height');
     padding: eleVar('select', 'item-padding');
     border-radius: eleVar('select', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     display: flex;
     align-items: center;

package/es/ele-app/style/overwrite/tag/css-var.scss

@@ -5,20 +5,4 @@
   .el-tag {
     @include set-ele-var('tag', $var);
   }
-
-  .el-tag--small {
-    @include set-ele-var('tag-sm', $var);
-  }
-
-  .el-tag--large {
-    @include set-ele-var('tag-lg', $var);
-  }
-
-  .el-tag--dark {
-    @include set-ele-var('tag-dark', $var);
-  }
-
-  .el-tag--plain {
-    @include set-ele-var('tag-plain', $var);
-  }
 }

package/es/ele-app/style/overwrite/tag/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/tag/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/tag/index.scss

@@ -5,9 +5,7 @@
 @include set-el-tag-var($ele);
 
 /* Tag */
-.el-tag.el-tag--light,
-.el-tag.el-tag--dark,
-.el-tag.el-tag--plain {
+span.el-tag {
   line-height: inherit;
   height: eleVar('tag', 'height');
   font-size: eleVar('tag', 'size');
@@ -21,18 +19,11 @@
     border-radius: 0;
     cursor: inherit;
   }
+}
 
-  &.is-closable {
-    padding: eleVar('tag', 'padding');
-  }
-
-  &.el-tag--small {
-    padding: eleVar('tag', 'sm-padding');
-  }
-
-  &.el-tag--large {
-    padding: eleVar('tag', 'lg-padding');
-  }
+span.el-tag,
+span.el-tag.is-closable {
+  padding: eleVar('tag', 'padding');
 }
 
 /* 关闭按钮 */
@@ -43,7 +34,7 @@
   margin: eleVar('tag', 'close-margin');
   padding: eleVar('tag', 'close-padding');
   border-radius: eleVar('tag', 'close-radius');
-  transition: (color $ele-transition, background-color $ele-transition);
+  transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -274,6 +265,35 @@
   }
 }
 
+/* 加深边框 */
+span.el-tag.is-hit {
+  &.el-tag--primary {
+    border-color: eleVar('tag', 'hit-border-color');
+  }
+
+  &.el-tag--info {
+    border-color: eleVar('tag', 'hit-info-border-color');
+  }
+
+  &.el-tag--success {
+    border-color: eleVar('tag', 'hit-success-border-color');
+  }
+
+  &.el-tag--warning {
+    border-color: eleVar('tag', 'hit-warning-border-color');
+  }
+
+  &.el-tag--danger {
+    border-color: eleVar('tag', 'hit-danger-border-color');
+  }
+}
+
+/* 椭圆风格 */
+span.el-tag.is-round {
+  padding: eleVar('tag', 'round-padding');
+  border-radius: eleVar('tag', 'round-radius');
+}
+
 /* 小尺寸 */
 .el-tag.el-tag--small {
   height: eleVar('tag', 'sm-height');
@@ -288,6 +308,15 @@
   }
 }
 
+span.el-tag.el-tag--small {
+  padding: eleVar('tag', 'sm-padding');
+}
+
+.el-tag.el-tag--small.is-round {
+  padding: eleVar('tag', 'sm-round-padding');
+  border-radius: eleVar('tag', 'sm-round-radius');
+}
+
 /* 大尺寸 */
 .el-tag.el-tag--large {
   height: eleVar('tag', 'lg-height');
@@ -301,3 +330,17 @@
     border-radius: eleVar('tag', 'lg-close-radius');
   }
 }
+
+span.el-tag.el-tag--large {
+  padding: eleVar('tag', 'lg-padding');
+}
+
+.el-tag.el-tag--large.is-round {
+  padding: eleVar('tag', 'lg-round-padding');
+  border-radius: eleVar('tag', 'lg-round-radius');
+}
+
+/* 椭圆风格关闭按钮圆角 */
+.el-tag.is-round .el-tag__close {
+  border-radius: 50%;
+}

package/es/ele-app/style/overwrite/tree/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/tree/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/tree/index.scss

@@ -23,7 +23,7 @@ body .el-tree {
     height: eleVar('tree', 'item-height');
     padding: eleVar('tree', 'item-padding');
     border-radius: eleVar('tree', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
 
     & > .el-tree-node__expand-icon {
@@ -36,7 +36,7 @@ body .el-tree {
       padding: eleVar('tree', 'expand-padding');
       border-radius: eleVar('tree', 'expand-radius');
       font-size: eleVar('tree', 'expand-size');
-      transition: background-color $ele-transition;
+      transition: background-color $transition-base;
       z-index: 4;
 
       & > svg {
@@ -63,7 +63,7 @@ body .el-tree {
     & > .el-tree-node__label {
       flex: 1;
       line-height: eleVar('tree', 'item-line-height');
-      transition: color $ele-transition;
+      transition: color $transition-base;
       text-overflow: ellipsis;
       word-break: break-all;
       white-space: nowrap;

package/es/ele-app/style/overwrite/tree-select/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/tree-select/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/tree-select/index.scss

@@ -29,7 +29,7 @@
       &::before {
         content: '';
         border-radius: eleVar('tree', 'item-radius');
-        transition: background-color $ele-transition;
+        transition: background-color $transition-base;
         position: absolute;
         top: 0;
         left: 0;

package/es/ele-app/style/scrollbar/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/scrollbar/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, SetupContext } from 'vue';
+import type { CSSProperties, Component, SetupContext } from 'vue';
 
 /**
  * 样式值
@@ -30,6 +30,11 @@ export type ComponentProps<T> = Partial<T> & {
   style?: StyleValues;
 };
 
+/**
+ * 组件名或组件
+ */
+export type UserComponent = string | Component;
+
 /**
  * 组件事件触发器
  */

package/es/ele-avatar-group/index.d.ts

@@ -7,7 +7,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     maxCount: NumberConstructor;
     shape: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "circle" | "square", unknown> | undefined>;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number> | undefined>;
+    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "small" | "default" | "large", number> | undefined>;
     itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     avatarStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     moreStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
@@ -46,7 +46,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     maxCount: NumberConstructor;
     shape: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "circle" | "square", unknown> | undefined>;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number> | undefined>;
+    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "small" | "default" | "large", number> | undefined>;
     itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     avatarStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     moreStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;

package/es/ele-avatar-group/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-avatar-group/style/index.js

@@ -1,3 +1,3 @@
-import 'element-plus/es/components/avatar/style/index';
-import '../../ele-tooltip/style/index';
-import './index.scss';
+import "element-plus/es/components/avatar/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";

package/es/ele-backtop/index.d.ts

@@ -0,0 +1,50 @@
+declare const _default: import('vue').DefineComponent<{
+    target: import('vue').PropType<string | HTMLElement>;
+    visibilityHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    bottom: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    right: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    transitionName: {
+        type: StringConstructor;
+        default: string; /** 目标元素 */
+    };
+}, {
+    visible: import('vue').Ref<boolean>;
+    handleClick: (e: MouseEvent) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_e: MouseEvent) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    target: import('vue').PropType<string | HTMLElement>;
+    visibilityHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    bottom: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    right: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    transitionName: {
+        type: StringConstructor;
+        default: string; /** 目标元素 */
+    };
+}>> & {
+    onClick?: ((_e: MouseEvent) => any) | undefined;
+}, {
+    visibilityHeight: number;
+    bottom: string | number;
+    right: string | number;
+    transitionName: string;
+}, {}>;
+export default _default;

package/es/ele-backtop/index.js

@@ -0,0 +1,104 @@
+import { defineComponent, ref, shallowRef, watch, onMounted, onBeforeUnmount, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeStyle, renderSlot, createVNode, createCommentVNode } from "vue";
+import { ArrowUp } from "../icons";
+import { throttle } from "../utils/core";
+import { backtopProps, backtopEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleBacktop",
+  components: { ArrowUp },
+  props: backtopProps,
+  emits: backtopEmits,
+  setup(props, { emit }) {
+    const visible = ref(false);
+    const targetEl = shallowRef(null);
+    const updateTarget = (el) => {
+      if (el !== targetEl.value && !(el == null && targetEl.value == null)) {
+        targetEl.value = !el || typeof el === "string" ? null : el;
+      }
+    };
+    const handleClick = (e) => {
+      if (targetEl.value) {
+        targetEl.value.scrollTo({ top: 0, behavior: "smooth" });
+      }
+      emit("click", e);
+    };
+    const handleScroll = () => {
+      if (targetEl.value != null && props.visibilityHeight != null) {
+        visible.value = targetEl.value.scrollTop >= props.visibilityHeight;
+      } else {
+        visible.value = false;
+      }
+    };
+    const scrollListener = throttle(handleScroll, 300, true);
+    const unbindEvent = () => {
+      if (targetEl.value != null) {
+        targetEl.value.removeEventListener("scroll", scrollListener);
+        targetEl.value = null;
+      }
+    };
+    const bindEvent = () => {
+      unbindEvent();
+      if (typeof props.target === "undefined") {
+        updateTarget(document.body);
+      } else if (typeof props.target === "string" && props.target) {
+        updateTarget(document.querySelector(props.target));
+      } else {
+        updateTarget(props.target);
+      }
+      handleScroll();
+      if (targetEl.value) {
+        targetEl.value.addEventListener("scroll", scrollListener);
+      }
+    };
+    watch(
+      () => props.target,
+      () => {
+        bindEvent();
+      }
+    );
+    onMounted(() => {
+      bindEvent();
+    });
+    onBeforeUnmount(() => {
+      unbindEvent();
+    });
+    return { visible, handleClick };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowUp = resolveComponent("ArrowUp");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  return openBlock(), createBlock(Transition, { name: _ctx.transitionName }, {
+    default: withCtx(() => [
+      _ctx.visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "ele-backtop",
+        style: normalizeStyle({
+          bottom: typeof _ctx.bottom === "number" ? `${_ctx.bottom}px` : _ctx.bottom,
+          right: typeof _ctx.right === "number" ? `${_ctx.right}px` : _ctx.right
+        }),
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createVNode(_component_ElIcon, null, {
+            default: withCtx(() => [
+              createVNode(_component_ArrowUp)
+            ]),
+            _: 1
+          })
+        ])
+      ], 4)) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["name"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-backtop/props.d.ts

@@ -0,0 +1,36 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export declare const backtopProps: {
+    /** 触发滚动的对象 */
+    target: PropType<string | HTMLElement>;
+    /** 滚动高度达到此参数值才出现 */
+    visibilityHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 距离页面底部距离 */
+    bottom: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** 距离页面右边距 */
+    right: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** 过渡动画名称 */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type BacktopProps = ExtractPropTypes<typeof backtopProps>;
+/**
+ * 事件
+ */
+export declare const backtopEmits: {
+    click: (_e: MouseEvent) => boolean;
+};