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

package/lib/ele-alert/index.d.ts

@@ -0,0 +1,62 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: StringConstructor;
+    type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown>>;
+    description: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    center: BooleanConstructor;
+    closeText: StringConstructor;
+    showIcon: BooleanConstructor;
+    effect: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    iconStyle: import("vue").PropType<import("vue").CSSProperties>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+    closeIconStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeIconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    titleStyle: import("vue").PropType<import("vue").CSSProperties>;
+    descriptionStyle: import("vue").PropType<import("vue").CSSProperties>;
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    visible: import("vue").Ref<boolean>;
+    isRich: import("vue").ComputedRef<boolean>;
+    onClose: (e: MouseEvent) => void;
+    open: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (_e: MouseEvent) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown>>;
+    description: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    center: BooleanConstructor;
+    closeText: StringConstructor;
+    showIcon: BooleanConstructor;
+    effect: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    iconStyle: import("vue").PropType<import("vue").CSSProperties>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+    closeIconStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeIconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    titleStyle: import("vue").PropType<import("vue").CSSProperties>;
+    descriptionStyle: import("vue").PropType<import("vue").CSSProperties>;
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onClose?: ((_e: MouseEvent) => any) | undefined;
+}, {
+    closable: boolean;
+    showIcon: boolean;
+    center: boolean;
+    transitionName: string;
+}, {}>;
+export default _sfc_main;

package/lib/ele-alert/index.js

@@ -0,0 +1,128 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const receiver = require("../ele-config-provider/receiver");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleAlert",
+  components: {
+    ElIcon: elementPlus.ElIcon,
+    Close: iconsVue.Close,
+    CircleCheckFilled: iconsVue.CircleCheckFilled,
+    InfoFilled: iconsVue.InfoFilled,
+    WarningFilled: iconsVue.WarningFilled,
+    CircleCloseFilled: iconsVue.CircleCloseFilled
+  },
+  props: props.alertProps,
+  emits: props.alertEmits,
+  setup(props2, { emit, slots }) {
+    const { authenticated } = receiver.useLicense();
+    const visible = vue.ref(true);
+    const isRich = vue.computed(() => {
+      return !!props2.description || !!slots.default;
+    });
+    const onClose = (e) => {
+      if (!visible.value || !props2.closable || !authenticated.value) {
+        return;
+      }
+      visible.value = false;
+      emit("close", e);
+    };
+    const open = () => {
+      if (!visible.value && authenticated.value) {
+        visible.value = true;
+      }
+    };
+    return { visible, isRich, onClose, open };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CircleCheckFilled = vue.resolveComponent("CircleCheckFilled");
+  const _component_WarningFilled = vue.resolveComponent("WarningFilled");
+  const _component_CircleCloseFilled = vue.resolveComponent("CircleCloseFilled");
+  const _component_InfoFilled = vue.resolveComponent("InfoFilled");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_Close = vue.resolveComponent("Close");
+  return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
+    default: vue.withCtx(() => [
+      _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass([
+          "ele-alert",
+          { "is-success": _ctx.type === "success" },
+          { "is-warning": _ctx.type === "warning" },
+          { "is-error": _ctx.type === "error" },
+          { "is-dark": _ctx.effect === "dark" },
+          { "is-center": _ctx.center },
+          { "is-rich": _ctx.isRich }
+        ])
+      }, [
+        _ctx.showIcon ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-alert-icon",
+          style: vue.normalizeStyle(_ctx.iconStyle)
+        }, [
+          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+            vue.createVNode(_component_ElIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.iconProps)), {
+              default: vue.withCtx(() => [
+                _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(_component_CircleCheckFilled, { key: 0 })) : _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(_component_WarningFilled, { key: 1 })) : _ctx.type === "error" ? (vue.openBlock(), vue.createBlock(_component_CircleCloseFilled, { key: 2 })) : (vue.openBlock(), vue.createBlock(_component_InfoFilled, { key: 3 }))
+              ]),
+              _: 1
+            }, 16)
+          ])
+        ], 4)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", {
+          class: "ele-alert-body",
+          style: vue.normalizeStyle(_ctx.bodyStyle)
+        }, [
+          _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "ele-alert-title",
+            style: vue.normalizeStyle(_ctx.titleStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "title", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+            ])
+          ], 4)) : vue.createCommentVNode("", true),
+          _ctx.isRich ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "ele-alert-text",
+            style: vue.normalizeStyle(_ctx.descriptionStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
+            ])
+          ], 4)) : vue.createCommentVNode("", true)
+        ], 4),
+        vue.renderSlot(_ctx.$slots, "action"),
+        _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: "ele-alert-close",
+          style: vue.normalizeStyle(_ctx.closeIconStyle),
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+        }, [
+          vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
+            _ctx.closeText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.closeText), 1)) : (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.closeIconProps)), {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_Close)
+              ]),
+              _: 1
+            }, 16))
+          ])
+        ], 4)) : vue.createCommentVNode("", true)
+      ], 2)) : vue.createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["name"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-alert/props.d.ts

@@ -0,0 +1,36 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { IconProps } from 'element-plus';
+/**
+ * 属性
+ */
+export declare const alertProps: {
+    title: StringConstructor;
+    type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown>>;
+    description: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    center: BooleanConstructor;
+    closeText: StringConstructor;
+    showIcon: BooleanConstructor;
+    effect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    iconStyle: PropType<CSSProperties>;
+    iconProps: PropType<Partial<IconProps>>;
+    closeIconStyle: PropType<CSSProperties>;
+    closeIconProps: PropType<Partial<IconProps>>;
+    bodyStyle: PropType<CSSProperties>;
+    titleStyle: PropType<CSSProperties>;
+    descriptionStyle: PropType<CSSProperties>;
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type AlertProps = ExtractPropTypes<typeof alertProps>;
+/**
+ * 事件
+ */
+export declare const alertEmits: {
+    close: (_e: MouseEvent) => boolean;
+};

package/lib/ele-alert/props.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const alertProps = {
+  // 标题
+  title: String,
+  // 类型
+  type: String,
+  // 描述
+  description: String,
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否居中
+  center: Boolean,
+  // 自定义关闭按钮文字
+  closeText: String,
+  // 是否显示图标
+  showIcon: Boolean,
+  // 主题
+  effect: String,
+  // 图标样式
+  iconStyle: Object,
+  // 图标组件属性
+  iconProps: Object,
+  // 关闭图标样式
+  closeIconStyle: Object,
+  // 关闭图标组件属性
+  closeIconProps: Object,
+  // 内容区样式
+  bodyStyle: Object,
+  // 标题样式
+  titleStyle: Object,
+  // 描述样式
+  descriptionStyle: Object,
+  // 过度动画名称
+  transitionName: {
+    type: String,
+    default: "ele-alert-fade"
+  }
+};
+const alertEmits = {
+  // 关闭的事件
+  close: (_e) => true
+};
+exports.alertEmits = alertEmits;
+exports.alertProps = alertProps;

package/lib/ele-alert/style/css-var.scss

@@ -0,0 +1,11 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-alert-var($var) {
+  .ele-alert {
+    @include set-ele-var('alert', $var);
+  }
+
+  .ele-alert.is-dark {
+    @include set-ele-var('alert-dark', $var);
+  }
+}

package/lib/ele-alert/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-alert/style/index.scss

@@ -0,0 +1,148 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-alert-var($ele);
+
+.ele-alert {
+  display: flex;
+  align-items: center;
+  padding: eleVar('alert', 'padding');
+  border-radius: eleVar('alert', 'radius');
+  background: elVar('color-primary', 'light-9');
+  border: 1px solid elVar('color-primary', 'light-7');
+  transition: opacity 0.2s;
+  box-sizing: border-box;
+  position: relative;
+
+  .ele-alert-icon {
+    flex-shrink: 0;
+    color: elVar('color-primary');
+    font-size: eleVar('alert', 'icon-size');
+    margin-right: 8px;
+    display: flex;
+  }
+
+  .ele-alert-body {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .ele-alert-title {
+    color: eleVar('alert', 'color');
+    font-size: eleVar('alert', 'title-size');
+    line-height: eleVar('alert', 'title-line-height');
+
+    & + .ele-alert-text {
+      margin-top: 4px;
+    }
+  }
+
+  .ele-alert-text {
+    color: eleVar('alert', 'color');
+    font-size: eleVar('alert', 'size');
+  }
+
+  .ele-alert-close {
+    flex-shrink: 0;
+    color: eleVar('alert', 'close-color');
+    font-size: eleVar('alert', 'close-size');
+    transition: color 0.2s;
+    margin-left: 8px;
+    cursor: pointer;
+    display: flex;
+
+    &:hover {
+      color: eleVar('alert', 'close-hover-color');
+    }
+  }
+
+  // 含有描述
+  &.is-rich {
+    align-items: flex-start;
+    padding: eleVar('alert', 'rich-padding');
+
+    .ele-alert-icon {
+      font-size: eleVar('alert', 'rich-icon-size');
+    }
+
+    .ele-alert-title {
+      color: eleVar('alert', 'title-color');
+    }
+  }
+
+  // 类型
+  &.is-success {
+    background: elVar('color-success', 'light-9');
+    border-color: elVar('color-success', 'light-7');
+
+    .ele-alert-icon {
+      color: elVar('color-success');
+    }
+  }
+
+  &.is-warning {
+    background: elVar('color-warning', 'light-9');
+    border-color: elVar('color-warning', 'light-7');
+
+    .ele-alert-icon {
+      color: elVar('color-warning');
+    }
+  }
+
+  &.is-error {
+    background: elVar('color-error', 'light-9');
+    border-color: elVar('color-error', 'light-7');
+
+    .ele-alert-icon {
+      color: elVar('color-error');
+    }
+  }
+
+  // 居中
+  &.is-center {
+    justify-content: center;
+
+    .ele-alert-body {
+      flex: initial;
+    }
+
+    .ele-alert-close {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  // 主题
+  &.is-dark {
+    $hover-color: eleVar('alert-dark', 'close-hover-color');
+    #{eleVarName('alert', 'color')}: eleVar('alert-dark', 'color');
+    #{eleVarName('alert', 'title-color')}: eleVar('alert-dark', 'title-color');
+    #{eleVarName('alert', 'close-color')}: eleVar('alert-dark', 'close-color');
+    #{eleVarName('alert', 'close-hover-color')}: #{$hover-color};
+    background: elVar('color-primary');
+    border: none;
+
+    .ele-alert-icon {
+      color: eleVar('alert-dark', 'title-color');
+    }
+
+    &.is-success {
+      background: elVar('color-success');
+    }
+
+    &.is-warning {
+      background: elVar('color-warning');
+    }
+
+    &.is-error {
+      background: elVar('color-error');
+    }
+  }
+}
+
+.ele-alert-fade-enter-from,
+.ele-alert-fade-leave-active {
+  opacity: 0;
+}

package/lib/ele-app/index.d.ts

@@ -1,3 +1,4 @@
+export type { ClassValue } from './types';
 declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/lib/ele-app/style/common.scss

@@ -3,25 +3,23 @@
 
 @include set-common-var($ele);
 
-body {
-  margin: 0;
-  color: elVar('text-color', 'regular');
-  font-size: elVar('font-size', 'base');
-  font-family: elVar('font-family');
-  line-height: 1.58;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  overflow-x: hidden;
-}
-
 /* 表单组件宽度撑满 */
 .ele-fluid {
   width: 100%;
   box-sizing: border-box;
 
-  // 日期选择
-  &.el-date-editor {
+  &.el-select,
+  &.el-input-number,
+  &.el-date-editor,
+  &.el-date-editor.el-input,
+  &.el-date-editor.el-input__wrapper,
+  &.el-date-editor > .el-input__wrapper {
     width: 100%;
+    box-sizing: border-box;
+  }
 
+  // 日期选择
+  &.el-date-editor {
     &.el-input__wrapper {
       width: 100%;
       box-sizing: border-box;
@@ -54,43 +52,90 @@ body {
 }
 
 /* 文字提示 */
-div.el-popper {
-  font-size: eleVar('tooltip', 'size');
+body .el-popper,
+body .el-popper.is-dark {
+  color: eleVar('tooltip', 'color');
+  border: eleVar('tooltip', 'border');
+  background: eleVar('tooltip', 'bg');
+
+  .el-popper__arrow::before {
+    background: eleVar('tooltip', 'arrow-bg');
+    border: eleVar('tooltip', 'border');
+  }
+}
+
+body .el-popper {
+  font-size: eleVar('tooltip', 'font-size');
   line-height: eleVar('tooltip', 'line-height');
   border-radius: eleVar('tooltip', 'radius');
-  padding: eleVar('tooltip', 'padding');
-  box-sizing: border-box;
 
-  &.is-dark {
-    color: eleVar('tooltip-dark', 'color');
-    background: eleVar('tooltip-dark', 'bg');
-    border: eleVar('tooltip-dark', 'border');
+  .el-popper__arrow,
+  .el-popper__arrow::before {
+    width: eleVar('tooltip', 'arrow-size');
+    height: eleVar('tooltip', 'arrow-size');
+  }
 
-    .el-popper__arrow::before {
-      background: eleVar('tooltip-dark', 'bg');
-      border: eleVar('tooltip-dark', 'border');
-    }
+  &[data-popper-placement^='top'] > .el-popper__arrow {
+    bottom: eleVar('tooltip', 'arrow-offset');
   }
 
-  &.is-danger,
-  &.is-warning,
-  &.is-success {
-    color: #fff;
+  &[data-popper-placement^='bottom'] > .el-popper__arrow {
+    top: eleVar('tooltip', 'arrow-offset');
+  }
+
+  &[data-popper-placement^='left'] > .el-popper__arrow {
+    right: eleVar('tooltip', 'arrow-offset');
+  }
+
+  &[data-popper-placement^='right'] > .el-popper__arrow {
+    left: eleVar('tooltip', 'arrow-offset');
+  }
+
+  &.is-light {
+    color: eleVar('tooltip-light', 'color');
+    background: eleVar('tooltip-light', 'bg');
+    border: eleVar('tooltip-light', 'border');
+
+    & > span:not(.el-popper__arrow) {
+      background: eleVar('tooltip-light', 'bg');
+    }
+
+    .el-popper__arrow::before {
+      background: eleVar('tooltip-light', 'arrow-bg');
+      border: eleVar('tooltip-light', 'border');
+    }
   }
 
   &.is-danger,
   &.is-danger .el-popper__arrow::before {
     background: elVar('color-danger');
+    border-color: elVar('color-danger');
   }
 
   &.is-warning,
   &.is-warning .el-popper__arrow::before {
     background: elVar('color-warning');
+    border-color: elVar('color-warning');
   }
 
   &.is-success,
   &.is-success .el-popper__arrow::before {
     background: elVar('color-success');
+    border-color: elVar('color-success');
+  }
+
+  &.is-custom {
+    padding: 0;
+
+    & > span:not(.el-popper__arrow) {
+      display: block;
+      padding: eleVar('tooltip', 'padding');
+      border-radius: eleVar('tooltip', 'radius');
+      background: eleVar('tooltip', 'bg');
+      box-sizing: border-box;
+      position: relative;
+      z-index: 2;
+    }
   }
 }
 
@@ -109,8 +154,65 @@ div.el-popper {
   }
 }
 
-/* echarts */
-.echarts > div {
-  max-width: 100%;
-  overflow: hidden;
+/* radio */
+.el-radio .el-radio__inner::after {
+  width: elVar('radio', 'input-width');
+  height: elVar('radio', 'input-height');
+  margin-top: calc(0px - (elVar('radio', 'input-width') / 2));
+  margin-left: calc(0px - (elVar('radio', 'input-width') / 2));
+  transform: scale(0);
+}
+
+.el-radio .el-radio__input.is-checked .el-radio__inner::after {
+  transform: scale(0.375);
+}
+
+/* checkbox */
+.el-checkbox {
+  .el-checkbox__label {
+    line-height: 1.03;
+  }
+
+  .el-checkbox__inner::after {
+    top: 50%;
+    left: 23.5%;
+    border-width: 2px;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+    margin-top: -0.5px;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  }
+
+  &.el-checkbox--large .el-checkbox__inner {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.el-checkbox--small .el-checkbox__inner {
+    width: 13px;
+    height: 13px;
+  }
+
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    width: 60%;
+    height: 2px;
+    right: auto;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translateX(-50%);
+    margin-top: -1px;
+  }
+
+  .el-checkbox__input,
+  .el-checkbox__inner {
+    display: block;
+  }
+
+  .el-checkbox__original {
+    display: none;
+  }
 }

package/lib/ele-app/style/css-var.scss

@@ -5,8 +5,8 @@
     @include set-ele-var('tooltip', $var);
   }
 
-  .el-popper.is-dark {
-    @include set-ele-var('tooltip-dark', $var);
+  .el-popper.is-light {
+    @include set-ele-var('tooltip-light', $var);
   }
 
   .el-image-viewer__wrapper {