ele-admin-plus 1.0.0-beta.1

package/es/ele-tour/index.js

@@ -0,0 +1,243 @@
+import { defineComponent, ref, shallowRef, onMounted, watch, nextTick, unref, resolveComponent, openBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, mergeProps, withCtx, createElementBlock, Fragment, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { ElPopover, ElButton } from "element-plus";
+import { useLocale } from "../ele-config-provider/use-receiver";
+import { useLicense } from "../utils/license-util";
+import { getOffset, getPopProps } from "./util";
+import { tourProps, tourEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTour",
+  components: { ElPopover, ElButton },
+  props: tourProps,
+  emits: tourEmits,
+  setup(props, { emit }) {
+    const { authenticated } = useLicense();
+    const { lang } = useLocale("tour", props);
+    const rootRef = ref(null);
+    const triggerRef = ref(null);
+    const popoverRef = ref(null);
+    const visible = ref(false);
+    const step = shallowRef(null);
+    const isLast = ref(false);
+    const boxStyle = ref({});
+    const showMask = ref(false);
+    const popProps = shallowRef({});
+    const start = () => {
+      if (!authenticated.value || !props.steps || props.modelValue == null || props.modelValue < 0 || props.modelValue >= props.steps.length) {
+        close();
+        return;
+      }
+      step.value = props.steps[props.modelValue];
+      if (!step.value) {
+        return;
+      }
+      isLast.value = props.modelValue === props.steps.length - 1;
+      const { mask, popoverProps, target, padding } = step.value;
+      showMask.value = mask ?? props.mask;
+      const el = typeof target === "function" ? target() : target;
+      if (el) {
+        el.focus();
+        const { width, height } = el.getBoundingClientRect();
+        const { top, left } = getOffset(el);
+        const space = padding ?? props.padding ?? 0;
+        boxStyle.value = {
+          width: width + space + space + "px",
+          height: height + space + space + "px",
+          top: top - space + "px",
+          left: left - space + "px"
+        };
+      } else {
+        boxStyle.value = {
+          width: "0px",
+          height: "0px",
+          top: "50%",
+          left: "50%"
+        };
+      }
+      visible.value = true;
+      popProps.value = getPopProps(true, !el, popoverProps);
+      nextTick(() => {
+        updatePopper();
+      });
+    };
+    const close = () => {
+      visible.value = false;
+      boxStyle.value = {};
+      step.value = null;
+      showMask.value = false;
+      popProps.value = getPopProps();
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const onPrev = () => {
+      if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue > 0) {
+        updateModelValue(props.modelValue - 1);
+      }
+    };
+    const onNext = () => {
+      if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue < props.steps.length - 1) {
+        updateModelValue(props.modelValue + 1);
+      }
+    };
+    const onFinish = () => {
+      updateModelValue(null);
+    };
+    const updatePopper = () => {
+      var _a;
+      const popper = unref((_a = popoverRef.value) == null ? void 0 : _a.popperRef);
+      const ins = unref(popper == null ? void 0 : popper.popperInstanceRef);
+      if (ins && typeof ins.update === "function") {
+        ins.update();
+      }
+    };
+    onMounted(() => {
+      start();
+    });
+    watch(
+      () => props.modelValue,
+      () => {
+        start();
+      }
+    );
+    return {
+      lang,
+      rootRef,
+      triggerRef,
+      popoverRef,
+      visible,
+      step,
+      isLast,
+      boxStyle,
+      showMask,
+      popProps,
+      onPrev,
+      onNext,
+      onFinish
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-tour-title"
+};
+const _hoisted_2 = { class: "ele-tour-text" };
+const _hoisted_3 = { class: "ele-tour-footer" };
+const _hoisted_4 = { class: "ele-tour-counter" };
+const _hoisted_5 = { class: "ele-tour-action" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElPopover = resolveComponent("ElPopover");
+  return openBlock(), createBlock(Teleport, { to: "body" }, [
+    createElementVNode("div", {
+      ref: "rootRef",
+      class: normalizeClass([
+        "ele-tour",
+        { "ele-tour-mask": _ctx.showMask },
+        { "ele-tour-open": _ctx.visible }
+      ]),
+      style: normalizeStyle({ zIndex: _ctx.zIndex })
+    }, [
+      createElementVNode("div", {
+        class: "ele-tour-box",
+        style: normalizeStyle(_ctx.boxStyle)
+      }, null, 4),
+      createElementVNode("div", {
+        ref: "triggerRef",
+        class: "ele-tour-reference",
+        style: normalizeStyle(_ctx.boxStyle)
+      }, null, 4),
+      createVNode(_component_ElPopover, mergeProps(_ctx.popProps, {
+        ref: "popoverRef",
+        virtualRef: _ctx.triggerRef,
+        virtualTriggering: true,
+        disabled: !_ctx.visible,
+        hideAfter: 0
+      }), {
+        default: withCtx(() => [
+          _ctx.steps && _ctx.step ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            _ctx.step.title ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              renderSlot(_ctx.$slots, "title", {
+                step: _ctx.step,
+                current: _ctx.modelValue
+              }, () => [
+                createTextVNode(toDisplayString(_ctx.step.title), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "text", {
+                step: _ctx.step,
+                current: _ctx.modelValue
+              }, () => [
+                createTextVNode(toDisplayString(_ctx.step.description), 1)
+              ])
+            ]),
+            renderSlot(_ctx.$slots, "footer", {
+              step: _ctx.step,
+              current: _ctx.modelValue
+            }, () => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("div", _hoisted_4, toDisplayString((_ctx.modelValue || 0) + 1) + "/" + toDisplayString(_ctx.steps.length), 1),
+                createElementVNode("div", _hoisted_5, [
+                  !_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                    key: 0,
+                    size: "small",
+                    onClick: _ctx.onFinish
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.lang.skip), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])) : createCommentVNode("", true),
+                  _ctx.modelValue !== 0 ? (openBlock(), createBlock(_component_ElButton, {
+                    key: 1,
+                    size: "small",
+                    onClick: _ctx.onPrev
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.lang.prev), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])) : createCommentVNode("", true),
+                  !_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                    key: 2,
+                    size: "small",
+                    type: "primary",
+                    onClick: _ctx.onNext
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.lang.next), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])) : createCommentVNode("", true),
+                  _ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                    key: 3,
+                    size: "small",
+                    type: "primary",
+                    onClick: _ctx.onFinish
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.lang.finish), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])) : createCommentVNode("", true)
+                ])
+              ])
+            ])
+          ], 64)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["virtualRef", "disabled"])
+    ], 6)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,29 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { TourStep, TourLocale } from './types';
+/**
+ * 属性
+ */
+export declare const tourProps: {
+    modelValue: NumberConstructor;
+    steps: {
+        type: PropType<TourStep[]>;
+        required: boolean;
+    };
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    zIndex: NumberConstructor;
+    locale: PropType<TourLocale>;
+};
+export type TourProps = ExtractPropTypes<typeof tourProps>;
+/**
+ * 事件
+ */
+export declare const tourEmits: {
+    'update:modelValue': (_value?: number | null) => boolean;
+};

package/es/ele-tour/props.js

@@ -0,0 +1,30 @@
+const tourProps = {
+  // 当前处于第几步
+  modelValue: Number,
+  // 步骤
+  steps: {
+    type: Array,
+    required: true
+  },
+  // 是否开启遮罩层
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  // 高亮区内间距
+  padding: {
+    type: Number,
+    default: 6
+  },
+  // 层级
+  zIndex: Number,
+  // 国际化
+  locale: Object
+};
+const tourEmits = {
+  "update:modelValue": (_value) => true
+};
+export {
+  tourEmits,
+  tourProps
+};

package/es/ele-tour/style/index.js

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/popover/style/index';
+import 'element-plus/es/components/button/style/index';
+import './index.scss';

package/es/ele-tour/style/index.scss

@@ -0,0 +1,90 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-tour {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: elVar('index', 'popper');
+  display: none;
+}
+
+.ele-tour-open {
+  display: block;
+}
+
+/* 带高亮的遮罩 */
+.ele-tour-box {
+  position: absolute;
+  border: 2px solid elVar('color-primary');
+  border-radius: elVar('border-radius', 'base');
+  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
+}
+
+.ele-tour-mask .ele-tour-box {
+  border: none;
+  box-shadow: 0 0 0 1000vw elVar('overlay-color', 'lighter');
+}
+
+/* 气泡定位元素 */
+.ele-tour-reference {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+/* 标题 */
+.ele-tour-title {
+  font-weight: bold;
+  color: elVar('text-color', 'primary');
+  margin-bottom: 8px;
+}
+
+/* 内容 */
+.ele-tour-text {
+  font-size: elVar('font-size', 'small');
+}
+
+/* 底部 */
+.ele-tour-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+}
+
+/* 指示器 */
+.ele-tour-counter {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'extra-small');
+}
+
+/* 操作按钮 */
+.ele-tour-action {
+  flex: 1;
+  text-align: right;
+
+  .el-button {
+    padding-left: 8px;
+    padding-right: 8px;
+
+    & + .el-button {
+      margin-left: 8px;
+    }
+  }
+}
+
+/* 气泡弹窗效果 */
+.ele-tour-popover.ele-tour-modal {
+  margin: 0 auto;
+  left: 0 !important;
+  top: 50% !important;
+  right: 0 !important;
+  bottom: auto !important;
+  transform: translateY(-50%);
+  transform-origin: center !important;
+  box-sizing: border-box;
+
+  .el-popper__arrow {
+    display: none;
+  }
+}

package/es/ele-tour/types/index.d.ts

@@ -0,0 +1,41 @@
+import type { PopoverProps } from 'element-plus';
+/**
+ * 气泡组件属性
+ */
+export type TourPopoverProps = Partial<PopoverProps>;
+/**
+ * 引导步骤指向元素
+ */
+export type TourStepTarget = HTMLElement | (() => HTMLElement);
+/**
+ * 引导步骤
+ */
+export interface TourStep {
+    /** 指向元素 */
+    target?: TourStepTarget;
+    /** 标题 */
+    title?: string;
+    /** 描述 */
+    description?: string;
+    padding?: number;
+    /** 是否开启遮罩层 */
+    mask?: boolean;
+    /** 气泡组件属性 */
+    popoverProps?: TourPopoverProps;
+}
+/**
+ * 元素距离
+ */
+export interface Offset {
+    top: number;
+    left: number;
+}
+/**
+ * 国际化
+ */
+export interface TourLocale {
+    skip: string;
+    prev: string;
+    next: string;
+    finish: string;
+}

package/es/ele-tour/util.d.ts

@@ -0,0 +1,13 @@
+import type { Offset, TourPopoverProps } from './types';
+/**
+ * 获取元素距浏览器窗口的距离
+ * @param el 元素
+ */
+export declare function getOffset(el: HTMLElement): Offset;
+/**
+ * 获取气泡组件属性
+ * @param visible 是否显示
+ * @param model 是否是弹窗
+ * @param props 自定义属性
+ */
+export declare function getPopProps(visible?: boolean, modal?: boolean, props?: TourPopoverProps): TourPopoverProps;

package/es/ele-tour/util.js

@@ -0,0 +1,30 @@
+function getOffset(el) {
+  const { top, left } = el.getBoundingClientRect();
+  const { pageYOffset, pageXOffset } = el.ownerDocument.defaultView ?? {};
+  return {
+    top: top + (pageYOffset ?? 0),
+    left: left + (pageXOffset ?? 0)
+  };
+}
+function getPopProps(visible, modal, props) {
+  const classes = ["ele-tour-popover"];
+  if (modal) {
+    classes.push("ele-tour-modal");
+  }
+  if (props && props.popperClass && typeof props.popperClass === "string") {
+    classes.push(props.popperClass);
+  }
+  return {
+    trigger: "click",
+    placement: "top",
+    width: modal ? 440 : 290,
+    transition: "ele-tour-fast",
+    ...props,
+    visible: visible ?? false,
+    popperClass: classes.join(" ")
+  };
+}
+export {
+  getOffset,
+  getPopProps
+};

package/es/ele-upload-list/components/list-item.d.ts

@@ -0,0 +1,38 @@
+import type { PropType } from 'vue';
+import type { UploadItem, UploadLocale } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    item: {
+        type: PropType<UploadItem>;
+        required: true;
+    };
+    readonly: BooleanConstructor;
+    locale: {
+        type: PropType<UploadLocale>;
+        required: true;
+    };
+}, {
+    onRemove: () => void;
+    onItemClick: () => void;
+    onRetry: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => true;
+    itemClick: () => true;
+    retry: () => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<UploadItem>;
+        required: true;
+    };
+    readonly: BooleanConstructor;
+    locale: {
+        type: PropType<UploadLocale>;
+        required: true;
+    };
+}>> & {
+    onRemove?: (() => any) | undefined;
+    onItemClick?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}, {
+    readonly: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-upload-list/components/list-item.js

@@ -0,0 +1,151 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createVNode, withCtx, withModifiers, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { ElImage, ElProgress, ElTooltip, ElIcon } from "element-plus";
+import { Close, Refresh, Document } from "@element-plus/icons-vue";
+const _sfc_main = defineComponent({
+  name: "ListItem",
+  components: {
+    ElImage,
+    ElProgress,
+    ElTooltip,
+    ElIcon,
+    Close,
+    Refresh,
+    Document
+  },
+  props: {
+    // 数据
+    item: {
+      type: Object,
+      required: true
+    },
+    // 是否只读
+    readonly: Boolean,
+    // 国际化
+    locale: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    remove: () => true,
+    itemClick: () => true,
+    retry: () => true
+  },
+  setup(_props, { emit }) {
+    const onRemove = () => {
+      emit("remove");
+    };
+    const onItemClick = () => {
+      emit("itemClick");
+    };
+    const onRetry = () => {
+      emit("retry");
+    };
+    return {
+      onRemove,
+      onItemClick,
+      onRetry
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["title"];
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-upload-thumbnail"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "ele-upload-progress"
+};
+const _hoisted_4 = { class: "ele-upload-text" };
+const _hoisted_5 = { class: "ele-upload-tools" };
+const _hoisted_6 = {
+  key: 2,
+  class: "ele-upload-mask"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElImage = resolveComponent("ElImage");
+  const _component_Document = resolveComponent("Document");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_Close = resolveComponent("Close");
+  const _component_ElProgress = resolveComponent("ElProgress");
+  const _component_Refresh = resolveComponent("Refresh");
+  const _component_ElTooltip = resolveComponent("ElTooltip");
+  return openBlock(), createElementBlock("div", {
+    title: _ctx.item.name,
+    class: normalizeClass(["ele-upload-item", { "ele-draggable": !_ctx.readonly }]),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onItemClick && _ctx.onItemClick(...args))
+  }, [
+    renderSlot(_ctx.$slots, "thumbnail", { item: _ctx.item }, () => [
+      _ctx.item.url ? (openBlock(), createBlock(_component_ElImage, {
+        key: 0,
+        fit: "cover",
+        src: _ctx.item.url
+      }, null, 8, ["src"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+        createVNode(_component_ElIcon, null, {
+          default: withCtx(() => [
+            createVNode(_component_Document)
+          ]),
+          _: 1
+        })
+      ]))
+    ]),
+    !_ctx.readonly ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "ele-upload-remove",
+      onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onRemove && _ctx.onRemove(...args), ["stop"]))
+    }, [
+      renderSlot(_ctx.$slots, "remove", { item: _ctx.item }, () => [
+        createVNode(_component_ElIcon, null, {
+          default: withCtx(() => [
+            createVNode(_component_Close)
+          ]),
+          _: 1
+        })
+      ])
+    ])) : createCommentVNode("", true),
+    _ctx.item.status === "uploading" || _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
+        createElementVNode("div", _hoisted_4, toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
+        createVNode(_component_ElProgress, {
+          showText: false,
+          percentage: _ctx.item.progress,
+          status: _ctx.item.status == "exception" ? "exception" : void 0
+        }, null, 8, ["percentage", "status"]),
+        createElementVNode("div", _hoisted_5, [
+          _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-upload-retry",
+            onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onRetry && _ctx.onRetry(...args), ["stop"]))
+          }, [
+            createVNode(_component_ElTooltip, {
+              content: _ctx.locale.retry,
+              placement: "top"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_ElIcon, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_Refresh)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["content"])
+          ])) : createCommentVNode("", true)
+        ])
+      ])
+    ])) : (openBlock(), createElementBlock("div", _hoisted_6))
+  ], 10, _hoisted_1);
+}
+const listItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  listItem as default
+};