ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,116 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@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 {
+    width: 100%;
+
+    &.el-input__wrapper {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .el-range-input {
+      flex: 1;
+      width: 100%;
+    }
+
+    .el-range-separator {
+      flex: 0;
+    }
+
+    .el-range__icon {
+      padding-right: 5px;
+    }
+  }
+
+  // 数字输入框
+  &.el-input-number .el-input__inner {
+    text-align: left;
+  }
+}
+
+/* 下拉菜单 */
+.el-dropdown-menu__item:not(.is-disabled).is-active {
+  color: elVar('dropdown', 'menuItem-hover-color');
+  background-color: elVar('dropdown', 'menuItem-hover-fill');
+}
+
+/* 文字提示 */
+div.el-popper {
+  font-size: eleVar('tooltip', '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::before {
+      background: eleVar('tooltip-dark', 'bg');
+      border: eleVar('tooltip-dark', 'border');
+    }
+  }
+
+  &.is-danger,
+  &.is-warning,
+  &.is-success {
+    color: #fff;
+  }
+
+  &.is-danger,
+  &.is-danger .el-popper__arrow::before {
+    background: elVar('color-danger');
+  }
+
+  &.is-warning,
+  &.is-warning .el-popper__arrow::before {
+    background: elVar('color-warning');
+  }
+
+  &.is-success,
+  &.is-success .el-popper__arrow::before {
+    background: elVar('color-success');
+  }
+}
+
+/* 图片预览 */
+.el-image-viewer__wrapper {
+  #{elVarName('text-color', 'regular')}: eleVar('image-viewer', 'tool-bg');
+}
+
+/* 下拉选择 */
+.el-select .el-select__tags .el-tag {
+  #{elVarName('tag', 'text-color')}: elVar('text-color', 'regular');
+  border-color: elVar('border-color', 'light');
+
+  .el-tag__close {
+    #{elVarName('tag', 'text-color')}: elVar('text-color', 'secondary');
+  }
+}
+
+/* echarts */
+.echarts > div {
+  max-width: 100%;
+  overflow: hidden;
+}

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

@@ -0,0 +1,29 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-common-var($var) {
+  .el-popper {
+    @include set-ele-var('tooltip', $var);
+  }
+
+  .el-popper.is-dark {
+    @include set-ele-var('tooltip-dark', $var);
+  }
+
+  .el-image-viewer__wrapper {
+    @include set-ele-var('image-viewer', $var);
+  }
+}
+
+@mixin set-message-var($var) {
+  .ele-message {
+    @include set-ele-var('message-plain', $var);
+  }
+
+  .ele-message-mask {
+    @include set-ele-var('message-mask', $var);
+  }
+}
+
+@mixin set-scrollbar-var($var) {
+  @include set-ele-var('scrollbar', $var);
+}

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

@@ -0,0 +1,6 @@
+"use strict";
+require("element-plus/es/components/message-box/style/index");
+require("element-plus/es/components/notification/style/index");
+require("./scrollbar");
+require("./common");
+require("./message");

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

@@ -0,0 +1,3 @@
+@use './scrollbar.scss';
+@use './common.scss';
+@use './message.scss';

package/lib/ele-app/style/message.js

@@ -0,0 +1,3 @@
+"use strict";
+require("element-plus/es/components/message/style/index");
+require("./message.scss");

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

@@ -0,0 +1,101 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-message-var($ele);
+
+/* 消息提示 */
+.ele-message.el-message {
+  box-shadow: eleVar('message-plain', 'shadow');
+  border: none;
+
+  .el-message__content {
+    color: eleVar('message-plain', 'color');
+  }
+
+  .el-message__icon {
+    font-size: elVar('font-size', 'large');
+  }
+
+  .el-message__closeBtn {
+    right: 14px;
+  }
+
+  &.is-closable .el-message__content {
+    padding-right: 24px;
+  }
+
+  &.el-message--info {
+    #{elVarName('message', 'text-color')}: elVar('color-primary');
+    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
+    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
+  }
+
+  // 简约风格
+  &.is-plain {
+    #{elVarName('message', 'bg-color')}: eleVar('message-plain', 'bg');
+  }
+
+  // 加载框
+  &.ele-message-loading {
+    #{elVarName('message', 'text-color')}: elVar('color-primary');
+    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
+    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
+
+    // 简约风格
+    &.is-plain {
+      #{elVarName('message', 'bg-color')}: eleVar('message-plain', 'bg');
+    }
+  }
+}
+
+/* 加载框 */
+.ele-message-loading.el-message {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  transform: none;
+  transition: opacity elVar('transition-duration'), margin 0.4s, top 0.4s;
+
+  &.el-message-fade-enter-from,
+  &.el-message-fade-leave-to {
+    margin-top: -62px;
+  }
+
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  & > .el-message__content {
+    position: relative;
+  }
+
+  & > .el-message__icon,
+  & > .el-message__content,
+  & > .el-message__closeBtn {
+    z-index: 1;
+  }
+
+  & > .el-message__icon > .el-icon {
+    font-size: 16px;
+    animation: rotating 1s linear infinite;
+  }
+
+  // 遮罩
+  &.ele-message-mask {
+    box-shadow: eleVar('message-plain', 'shadow'),
+      0 0 0 eleVar('message-mask', 'size') eleVar('message-mask', 'color');
+  }
+
+  // 居中
+  &.is-centered {
+    top: 0 !important;
+    bottom: 0;
+    height: max-content;
+    margin: auto;
+  }
+}

package/lib/ele-app/style/scrollbar.js

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

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

@@ -0,0 +1,80 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+:root {
+  @include set-scrollbar-var($ele);
+}
+
+::-webkit-scrollbar {
+  width: eleVar('scrollbar', 'size');
+  height: eleVar('scrollbar', 'size');
+}
+
+::-webkit-scrollbar-thumb {
+  border: eleVar('scrollbar', 'padding') solid transparent;
+  border-radius: eleVar('scrollbar', 'radius');
+  background-color: eleVar('scrollbar', 'color');
+  background-clip: padding-box;
+
+  &:hover {
+    background-color: eleVar('scrollbar', 'hover-color');
+  }
+}
+
+::-webkit-scrollbar-track {
+  background: eleVar('scrollbar', 'bg');
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+// 小型滚动条
+.ele-scrollbar-mini {
+  &::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'mini-size');
+    height: eleVar('scrollbar', 'mini-size');
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: eleVar('scrollbar', 'mini-radius');
+  }
+}
+
+// 隐藏滚动条
+.ele-scrollbar-hide::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.ele-scrollbar-hide,
+.ele-scrollbar-hover {
+  overflow: auto;
+  overflow: overlay;
+}
+
+// 鼠标滑入才显示滚动条
+@media (hover: hover) and (pointer: fine) {
+  .ele-scrollbar-hover:not(:hover)::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+// 移动端小尺寸
+@media only screen and (max-width: 768px) {
+  ::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'mini-size');
+    height: eleVar('scrollbar', 'mini-size');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: eleVar('scrollbar', 'mini-radius');
+  }
+}
+
+// 火狐浏览器
+* {
+  scrollbar-width: thin;
+  scrollbar-color: eleVar('scrollbar', 'color') transparent;
+}

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

@@ -0,0 +1,70 @@
+import type { CSSProperties } from 'vue';
+import type { AvatarItem, AvatarErrorOption } from './types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    data: {
+        type: import("vue").PropType<AvatarItem[]>;
+        required: boolean;
+    };
+    maxCount: NumberConstructor;
+    shape: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "circle" | "square", unknown>>;
+    size: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>>;
+    itemStyle: import("vue").PropType<CSSProperties>;
+    avatarStyle: import("vue").PropType<CSSProperties>;
+    moreStyle: import("vue").PropType<CSSProperties>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    overflowPopover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowPopoverProps: import("vue").PropType<Partial<import("element-plus").PopoverProps>>;
+}, {
+    tooltipContent: import("vue").Ref<string>;
+    virtualRef: import("vue").Ref<any>;
+    overflowVisible: import("vue").Ref<boolean>;
+    commonStyle: import("vue").ComputedRef<CSSProperties>;
+    isOverflow: import("vue").ComputedRef<boolean>;
+    avatarData: import("vue").ComputedRef<AvatarItem[]>;
+    overflowCount: import("vue").ComputedRef<number>;
+    overflowData: import("vue").ComputedRef<AvatarItem[]>;
+    onItemHover: (item: AvatarItem, e: MouseEvent) => void;
+    onItemClick: (item: AvatarItem) => void;
+    onMoreClick: () => void;
+    onError: (option: AvatarErrorOption) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    itemClick: (_item: AvatarItem) => boolean;
+    moreClick: () => boolean;
+    error: (_option: AvatarErrorOption) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: import("vue").PropType<AvatarItem[]>;
+        required: boolean;
+    };
+    maxCount: NumberConstructor;
+    shape: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "circle" | "square", unknown>>;
+    size: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>>;
+    itemStyle: import("vue").PropType<CSSProperties>;
+    avatarStyle: import("vue").PropType<CSSProperties>;
+    moreStyle: import("vue").PropType<CSSProperties>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    overflowPopover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowPopoverProps: import("vue").PropType<Partial<import("element-plus").PopoverProps>>;
+}>> & {
+    onItemClick?: ((_item: AvatarItem) => any) | undefined;
+    onMoreClick?: (() => any) | undefined;
+    onError?: ((_option: AvatarErrorOption) => any) | undefined;
+}, {
+    tooltip: boolean;
+    overflowPopover: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-avatar-group/index.js

@@ -0,0 +1,177 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const licenseUtil = require("../utils/license-util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleAvatarGroup",
+  components: { ElAvatar: elementPlus.ElAvatar, ElTooltip: elementPlus.ElTooltip, ElPopover: elementPlus.ElPopover },
+  props: props.avatarGroupProps,
+  emits: props.avatarGroupEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const tooltipContent = vue.ref("");
+    const virtualRef = vue.ref();
+    const overflowVisible = vue.ref(false);
+    const commonStyle = vue.computed(() => {
+      if (props2.size == null || typeof props2.size === "string") {
+        const obj = { large: "-12px", default: "-10px", small: "-8px" };
+        return { marginLeft: props2.size ? obj[props2.size] : "-10px" };
+      }
+      if (typeof props2.size === "number" && props2.size >= 0) {
+        return { marginLeft: `${-Math.round(props2.size / 3)}px` };
+      }
+      return {};
+    });
+    const isOverflow = vue.computed(() => {
+      return props2.maxCount != null && props2.maxCount > 0 && props2.data != null && props2.data.length > props2.maxCount;
+    });
+    const avatarData = vue.computed(() => {
+      if (!authenticated.value || props2.data == null) {
+        return [];
+      }
+      return isOverflow.value ? props2.data.slice(0, props2.maxCount) : props2.data;
+    });
+    const overflowCount = vue.computed(() => {
+      if (!isOverflow.value || !props2.data || props2.maxCount == null) {
+        return 0;
+      }
+      return props2.data.length - props2.maxCount;
+    });
+    const overflowData = vue.computed(() => {
+      if (props2.data == null || !isOverflow.value) {
+        return [];
+      }
+      return props2.data.slice(props2.maxCount);
+    });
+    const onItemHover = (item, e) => {
+      if (props2.tooltip && item.label) {
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = item.label;
+      }
+    };
+    const onItemClick = (item) => {
+      emit("itemClick", item);
+    };
+    const onMoreClick = () => {
+      emit("moreClick");
+    };
+    const onError = (option) => {
+      emit("error", option);
+    };
+    return {
+      tooltipContent,
+      virtualRef,
+      overflowVisible,
+      commonStyle,
+      isOverflow,
+      avatarData,
+      overflowCount,
+      overflowData,
+      onItemHover,
+      onItemClick,
+      onMoreClick,
+      onError
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-avatar-group" };
+const _hoisted_2 = { class: "ele-avatar-more-inner" };
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-avatar-group"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElAvatar = vue.resolveComponent("ElAvatar");
+  const _component_ElPopover = vue.resolveComponent("ElPopover");
+  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.avatarData, (item, index2) => {
+      return vue.openBlock(), vue.createBlock(_component_ElAvatar, {
+        key: index2 + "-" + item.value,
+        size: _ctx.size,
+        shape: _ctx.shape,
+        src: item.value,
+        style: vue.normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
+        onClick: ($event) => _ctx.onItemClick(item),
+        onError: (e) => _ctx.onError({ item, e }),
+        onMouseover: (e) => _ctx.onItemHover(item, e)
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "item", { item })
+        ]),
+        _: 2
+      }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
+    }), 128)),
+    _ctx.isOverflow ? (vue.openBlock(), vue.createBlock(_component_ElPopover, vue.mergeProps({
+      key: 0,
+      placement: "top",
+      popperClass: "ele-avatar-popover"
+    }, _ctx.overflowPopoverProps, {
+      width: "auto",
+      disabled: !_ctx.overflowPopover,
+      visible: _ctx.overflowVisible,
+      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.overflowVisible = $event)
+    }), {
+      reference: vue.withCtx(() => [
+        vue.createVNode(_component_ElAvatar, {
+          size: _ctx.size,
+          shape: _ctx.shape,
+          style: vue.normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.moreStyle]),
+          class: "ele-avatar-more",
+          onClick: _ctx.onMoreClick
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("span", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "more", {
+                overflowCount: _ctx.overflowCount,
+                overflowData: _ctx.overflowData
+              }, () => [
+                vue.createElementVNode("span", null, "+" + vue.toDisplayString(_ctx.overflowCount), 1)
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["size", "shape", "style", "onClick"])
+      ]),
+      default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "overflow", { overflowData: _ctx.overflowData }, () => [
+          _ctx.overflowPopover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.overflowData, (item, index2) => {
+              return vue.openBlock(), vue.createBlock(_component_ElAvatar, {
+                key: index2 + "-" + item.value,
+                size: _ctx.size,
+                shape: _ctx.shape,
+                src: item.value,
+                style: vue.normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
+                onClick: ($event) => _ctx.onItemClick(item),
+                onError: (e) => _ctx.onError({ item, e }),
+                onMouseover: (e) => _ctx.onItemHover(item, e)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "item", { item })
+                ]),
+                _: 2
+              }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
+            }), 128))
+          ])) : vue.createCommentVNode("", true)
+        ])
+      ]),
+      _: 3
+    }, 16, ["disabled", "visible"])) : vue.createCommentVNode("", true),
+    vue.createVNode(_component_ElTooltip, vue.mergeProps({ placement: "top" }, _ctx.tooltipProps, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true
+    }), null, 16, ["content", "virtualRef"])
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-avatar-group/props.d.ts

@@ -0,0 +1,37 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { ElTooltipProps, PopoverProps } from 'element-plus';
+import type { AvatarItem, AvatarErrorOption } from './types';
+/**
+ * 属性
+ */
+export declare const avatarGroupProps: {
+    data: {
+        type: PropType<AvatarItem[]>;
+        required: boolean;
+    };
+    maxCount: NumberConstructor;
+    shape: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "circle" | "square", unknown>>;
+    size: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>>;
+    itemStyle: PropType<CSSProperties>;
+    avatarStyle: PropType<CSSProperties>;
+    moreStyle: PropType<CSSProperties>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    overflowPopover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowPopoverProps: PropType<Partial<PopoverProps>>;
+};
+export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>;
+/**
+ * 事件
+ */
+export declare const avatarGroupEmits: {
+    itemClick: (_item: AvatarItem) => boolean;
+    moreClick: () => boolean;
+    error: (_option: AvatarErrorOption) => boolean;
+};

package/lib/ele-avatar-group/props.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const avatarGroupProps = {
+  // 数据
+  data: {
+    type: Array,
+    required: true
+  },
+  // 最大显示个数
+  maxCount: Number,
+  // 形状
+  shape: String,
+  // 大小
+  size: [Number, String],
+  // 自定义样式
+  itemStyle: Object,
+  // 自定义头像样式
+  avatarStyle: Object,
+  // 自定义溢出样式
+  moreStyle: Object,
+  // 是否显示提示
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  // 提示属性
+  tooltipProps: Object,
+  // 是否显示溢出气泡
+  overflowPopover: {
+    type: Boolean,
+    default: true
+  },
+  // 溢出气泡属性
+  overflowPopoverProps: Object
+};
+const avatarGroupEmits = {
+  // item 点击事件
+  itemClick: (_item) => true,
+  // 更多点击事件
+  moreClick: () => true,
+  // 图片加载失败事件
+  error: (_option) => true
+};
+exports.avatarGroupEmits = avatarGroupEmits;
+exports.avatarGroupProps = avatarGroupProps;

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

@@ -0,0 +1,5 @@
+"use strict";
+require("element-plus/es/components/avatar/style/index");
+require("element-plus/es/components/tooltip/style/index");
+require("element-plus/es/components/popover/style/index");
+require("./index.scss");