ele-admin-plus 1.0.0-beta.1

package/lib/ele-upload-list/index.js

@@ -0,0 +1,194 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const licenseUtil = require("../utils/license-util");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const core = require("../utils/core");
+const ListItem = require("./components/list-item");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleUploadList",
+  components: {
+    VueDraggable,
+    ElUpload: elementPlus.ElUpload,
+    ElImage: elementPlus.ElImage,
+    ElIcon: elementPlus.ElIcon,
+    Plus: iconsVue.Plus,
+    ListItem
+  },
+  props: props.uploadListProps,
+  emits: props.uploadListEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const { lang } = useReceiver.useLocale("upload", props2);
+    const previewRef = vue.ref(null);
+    const previewOption = vue.reactive({
+      // 是否打开
+      visible: false,
+      // 当前图片地址
+      current: "",
+      // 当前为第几个图片
+      currentIndex: 0,
+      // 图片列表
+      images: []
+    });
+    const uploadEnable = vue.computed(() => {
+      return !props2.readonly && !(typeof props2.limit === "number" && props2.limit > 0 && props2.modelValue != null && props2.modelValue.length >= props2.limit);
+    });
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const onUpload = (file) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return false;
+      }
+      if (!uploadEnable.value) {
+        return false;
+      }
+      const item = {
+        key: core.uuid(),
+        name: file.name,
+        status: void 0,
+        progress: 0,
+        file
+      };
+      if (file.type.startsWith("image")) {
+        item.url = window.URL.createObjectURL(file);
+      }
+      emit("upload", item);
+      return false;
+    };
+    const onItemRemove = (item) => {
+      emit("remove", item);
+    };
+    const onItemClick = (item) => {
+      if (props2.preview && item.url && props2.modelValue != null) {
+        const temp = props2.modelValue.filter((d) => !!d.url);
+        const i = temp.findIndex((t) => t.key === item.key);
+        if (i !== -1) {
+          previewOption.images = temp.map((d) => d.url);
+          previewOption.current = item.url;
+          previewOption.currentIndex = i;
+          previewOption.visible = true;
+          vue.nextTick(() => {
+            var _a;
+            const el = (_a = previewRef.value) == null ? void 0 : _a.$el;
+            if (el) {
+              const imgEl = el.querySelector("img");
+              imgEl && imgEl.click();
+            }
+          });
+        }
+      }
+      emit("itemClick", item);
+    };
+    const onItemRetry = (item) => {
+      emit("retry", item);
+    };
+    vue.onDeactivated(() => {
+      previewOption.visible = false;
+    });
+    return {
+      lang,
+      previewRef,
+      previewOption,
+      uploadEnable,
+      updateModelValue,
+      onUpload,
+      onItemRemove,
+      onItemClick,
+      onItemRetry
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { style: { "display": "none" } };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ListItem = vue.resolveComponent("ListItem");
+  const _component_Plus = vue.resolveComponent("Plus");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElUpload = vue.resolveComponent("ElUpload");
+  const _component_ElImage = vue.resolveComponent("ElImage");
+  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
+  return vue.openBlock(), vue.createBlock(_component_VueDraggable, {
+    itemKey: "key",
+    animation: 300,
+    setData: () => void 0,
+    modelValue: _ctx.modelValue,
+    draggable: ".ele-draggable",
+    class: "ele-upload-list",
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }, {
+    item: vue.withCtx(({ element }) => [
+      vue.createVNode(_component_ListItem, {
+        item: element,
+        readonly: _ctx.readonly,
+        locale: _ctx.lang,
+        style: vue.normalizeStyle(_ctx.itemStyle),
+        onItemClick: ($event) => _ctx.onItemClick(element),
+        onRemove: ($event) => _ctx.onItemRemove(element),
+        onRetry: ($event) => _ctx.onItemRetry(element)
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["item", "readonly", "locale", "style", "onItemClick", "onRemove", "onRetry"])
+    ]),
+    footer: vue.withCtx(() => [
+      _ctx.uploadEnable ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        style: vue.normalizeStyle(_ctx.buttonStyle),
+        class: "ele-upload-item ele-upload-button"
+      }, [
+        vue.createVNode(_component_ElUpload, {
+          action: "",
+          drag: _ctx.drag,
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          showUploadList: false,
+          beforeUpload: _ctx.onUpload
+        }, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              vue.createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Plus)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 3
+        }, 8, ["drag", "accept", "multiple", "beforeUpload"])
+      ], 4)) : vue.createCommentVNode("", true),
+      vue.createElementVNode("div", _hoisted_1, [
+        _ctx.previewOption.visible ? (vue.openBlock(), vue.createBlock(_component_ElImage, {
+          key: 0,
+          ref: "previewRef",
+          hideOnClickModal: true,
+          previewTeleported: true,
+          src: _ctx.previewOption.current,
+          previewSrcList: _ctx.previewOption.images,
+          initialIndex: _ctx.previewOption.currentIndex
+        }, null, 8, ["src", "previewSrcList", "initialIndex"])) : vue.createCommentVNode("", true)
+      ])
+    ]),
+    _: 3
+  }, 8, ["modelValue", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-upload-list/props.d.ts

@@ -0,0 +1,37 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { UploadItem, UploadLocale } from './types';
+/**
+ * 属性
+ */
+export declare const uploadListProps: {
+    modelValue: {
+        type: PropType<UploadItem[]>;
+        required: boolean;
+    };
+    readonly: BooleanConstructor;
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limit: NumberConstructor;
+    multiple: BooleanConstructor;
+    drag: BooleanConstructor;
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemStyle: PropType<CSSProperties>;
+    buttonStyle: PropType<CSSProperties>;
+    locale: PropType<UploadLocale>;
+};
+export type UploadListProps = ExtractPropTypes<typeof uploadListProps>;
+/**
+ * 事件
+ */
+export declare const uploadListEmits: {
+    'update:modelValue': (_value: UploadItem[]) => boolean;
+    itemClick: (_item: UploadItem) => boolean;
+    upload: (_item: UploadItem) => boolean;
+    remove: (_item: UploadItem) => boolean;
+    retry: (_item: UploadItem) => boolean;
+};

package/lib/ele-upload-list/props.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uploadListProps = {
+  // 已上传列表
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  // 是否只读
+  readonly: Boolean,
+  // 是否支持预览
+  preview: {
+    type: Boolean,
+    default: true
+  },
+  // 最大上传数量
+  limit: Number,
+  // 是否支持多选文件
+  multiple: Boolean,
+  // 是否启用拖拽上传
+  drag: Boolean,
+  // 接受上传的文件类型
+  accept: {
+    type: String,
+    default: "image/png,image/jpeg"
+  },
+  // 自定义条目样式
+  itemStyle: Object,
+  // 自定义上传按钮样式
+  buttonStyle: Object,
+  // 国际化
+  locale: Object
+};
+const uploadListEmits = {
+  // 更新绑定值
+  "update:modelValue": (_value) => true,
+  // item 点击事件
+  itemClick: (_item) => true,
+  // 上传事件
+  upload: (_item) => true,
+  // item 移除事件
+  remove: (_item) => true,
+  // item 上传失败重试事件
+  retry: (_item) => true
+};
+exports.uploadListEmits = uploadListEmits;
+exports.uploadListProps = uploadListProps;

package/lib/ele-upload-list/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+require("element-plus/es/components/image/style/index");
+require("element-plus/es/components/upload/style/index");
+require("element-plus/es/components/progress/style/index");
+require("element-plus/es/components/tooltip/style/index");
+require("element-plus/es/components/icon/style/index");
+require("./index.scss");

package/lib/ele-upload-list/style/index.scss

@@ -0,0 +1,161 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-upload-list {
+  font-size: 0;
+
+  .ele-upload-item {
+    width: 100px;
+    height: 100px;
+    font-size: 14px;
+    display: inline-block;
+    margin: 0 12px 12px 0;
+    background: elVar('fill-color', 'light');
+    border: 1px dashed elVar('border-color');
+    border-radius: elVar('border-radius', 'base');
+    box-sizing: border-box;
+    vertical-align: top;
+    position: relative;
+    overflow: visible;
+    cursor: pointer;
+
+    &.ele-draggable {
+      cursor: move;
+    }
+
+    .ele-upload-remove {
+      width: 18px;
+      height: 18px;
+      color: #fff;
+      font-size: 12px;
+      border-bottom-left-radius: 18px;
+      border-top-right-radius: elVar('border-radius', 'base');
+      background: rgba(0, 0, 0, 0.6);
+      position: absolute;
+      top: 0;
+      right: 0;
+      line-height: 1;
+      padding: 2px 0 0 4px;
+      box-sizing: border-box;
+      transition: background-color 0.2s ease-in-out;
+      cursor: pointer;
+      z-index: 2;
+
+      &:hover {
+        background: elVar('color-danger');
+      }
+    }
+
+    & > .el-image {
+      width: 100%;
+      height: 100%;
+      display: block;
+      border-radius: elVar('border-radius', 'base');
+    }
+
+    .ele-upload-thumbnail {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: elVar('text-color', 'secondary');
+      text-align: center;
+      font-size: 22px;
+    }
+
+    .ele-upload-mask,
+    .ele-upload-progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: elVar('border-radius', 'base');
+      z-index: 1;
+    }
+
+    &:not(.sortable-chosen) .ele-upload-mask {
+      display: none;
+    }
+
+    .ele-upload-progress {
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.6);
+      box-sizing: border-box;
+      padding: 0 6px;
+      line-height: 1;
+
+      .ele-upload-text {
+        margin-bottom: 8px;
+        text-align: center;
+      }
+
+      .ele-upload-tools {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .ele-upload-retry {
+        flex-shrink: 0;
+        font-size: 18px;
+        margin: 6px 3px 0 3px;
+        cursor: pointer;
+      }
+    }
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
+  }
+
+  .ele-upload-button {
+    text-align: center;
+    transition: border-color 0.2s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      border-color: elVar('color-primary');
+    }
+
+    & > div {
+      height: 100%;
+      display: block;
+
+      & > .el-upload {
+        height: 100%;
+        display: flex;
+
+        & > .el-upload-dragger {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: elVar('border-radius', 'base');
+          background: none;
+          border: none;
+          padding: 0;
+
+          &.is-dragover {
+            outline: 1px dashed elVar('color-primary');
+            background: elVar('color-primary', 'light-9');
+          }
+        }
+      }
+
+      & > .el-upload-list {
+        display: none;
+      }
+    }
+
+    .ele-upload-icon {
+      font-size: 22px;
+      color: elVar('text-color', 'secondary');
+    }
+  }
+}

package/lib/ele-upload-list/types/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 数据类型
+ */
+export interface UploadItem extends Record<string | number | symbol, unknown> {
+    /** 唯一标识 */
+    key: string | number | symbol;
+    /** 显示的图片地址, 为空时显示文件图标 */
+    url?: string;
+    /** 文件名称 */
+    name?: string;
+    /** 上传状态 */
+    status?: UploadStatus;
+    /** 上传进度, 0 ~ 100 */
+    progress?: number;
+    /** 选择的文件 */
+    file?: File;
+}
+/**
+ * 上传状态
+ */
+export type UploadStatus = 'uploading' | 'done' | 'exception' | null;
+/**
+ * 图片预览配置
+ */
+export interface PreviewOption {
+    visible: boolean;
+    current?: string;
+    currentIndex: number;
+    images: string[];
+}
+/**
+ * 国际化
+ */
+export interface UploadLocale {
+    uploading: string;
+    exception: string;
+    retry: string;
+}

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

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    rotate: NumberConstructor;
+    zIndex: NumberConstructor;
+    image: StringConstructor;
+    content: import("vue").PropType<string | string[]>;
+    font: import("vue").PropType<import("./types").WatermarkFont>;
+    gap: import("vue").PropType<import("./types").WatermarkGap>;
+    offset: import("vue").PropType<import("./types").WatermarkOffset>;
+}, {
+    imgStyle: import("vue").ComputedRef<CSSProperties>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    rotate: NumberConstructor;
+    zIndex: NumberConstructor;
+    image: StringConstructor;
+    content: import("vue").PropType<string | string[]>;
+    font: import("vue").PropType<import("./types").WatermarkFont>;
+    gap: import("vue").PropType<import("./types").WatermarkGap>;
+    offset: import("vue").PropType<import("./types").WatermarkOffset>;
+}>>, {}, {}>;
+export default _sfc_main;

package/lib/ele-watermark/index.js

@@ -0,0 +1,168 @@
+"use strict";
+const vue = require("vue");
+const licenseUtil = require("../utils/license-util");
+const util = require("./util");
+const props = require("./props");
+const SIZE = 2;
+const GAP = 3;
+const _sfc_main = vue.defineComponent({
+  name: "EleWatermark",
+  props: props.watermarkProps,
+  setup(props2) {
+    const { authenticated } = licenseUtil.useLicense();
+    const base64 = vue.ref(null);
+    const imgSize = vue.ref(null);
+    const imgStyle = vue.computed(() => {
+      const style = {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundRepeat: "repeat"
+      };
+      if (!authenticated || !base64.value) {
+        style.display = "none";
+      } else {
+        style.backgroundImage = `url('${base64.value}')`;
+        if (imgSize.value) {
+          style.backgroundSize = imgSize.value;
+        }
+        style.zIndex = props2.zIndex ?? 9;
+      }
+      return style;
+    });
+    const getDefaultWidth = (ctx) => {
+      if (props2.image || !ctx.measureText) {
+        return 120;
+      }
+      const content = props2.content;
+      const contents = Array.isArray(content) ? content : [content];
+      const widths = contents.map((item) => ctx.measureText(item).width);
+      return Math.ceil(Math.max(...widths));
+    };
+    const getDefaultHeight = (ctx) => {
+      if (props2.image || !ctx.measureText) {
+        return 64;
+      }
+      const content = props2.content;
+      const contents = Array.isArray(content) ? content : [content];
+      const { fontSize } = util.getFont(props2.font);
+      return fontSize * contents.length + (contents.length - 1) * GAP;
+    };
+    const getMarkSize = (ctx) => {
+      const width = props2.width;
+      const height = props2.height;
+      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
+    };
+    const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
+      const ratio = util.getPixelRatio();
+      const { color, fontSize, fontStyle, fontWeight, fontFamily } = util.getFont(
+        props2.font
+      );
+      const mergedFontSize = fontSize * ratio;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.translate(drawWidth / 2, 0);
+      const content = props2.content;
+      const contents = Array.isArray(content) ? content : [content];
+      contents.forEach((item, index2) => {
+        ctx.fillText(
+          item ?? "",
+          drawX,
+          drawY + index2 * (mergedFontSize + GAP * ratio)
+        );
+      });
+    };
+    const render = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      const rotate = props2.rotate ?? -22;
+      if (!props2.image && ctx.measureText != null) {
+        const { fontSize, fontFamily } = util.getFont(props2.font);
+        ctx.font = `${fontSize}px ${fontFamily}`;
+      }
+      const [markWidth, markHeight] = getMarkSize(ctx);
+      const ratio = util.getPixelRatio();
+      const [gapX, gapY] = util.getGap(props2.gap);
+      const canvasWidth = (gapX + markWidth) * ratio;
+      const canvasHeight = (gapY + markHeight) * ratio;
+      canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
+      canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
+      const drawWidth = markWidth * ratio;
+      const drawHeight = markHeight * ratio;
+      const rotateX = (drawWidth + gapX * ratio) / 2;
+      const rotateY = (drawHeight + gapY * ratio) / 2;
+      ctx.save();
+      util.rotateWatermark(ctx, rotateX, rotateY, rotate);
+      const drawX = gapX * ratio / 2;
+      const drawY = gapY * ratio / 2;
+      const alternateDrawX = drawX + canvasWidth;
+      const alternateDrawY = drawY + canvasHeight;
+      const alternateRotateX = rotateX + canvasWidth;
+      const alternateRotateY = rotateY + canvasHeight;
+      if (props2.image) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+          ctx.restore();
+          util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+          ctx.drawImage(
+            img,
+            alternateDrawX,
+            alternateDrawY,
+            drawWidth,
+            drawHeight
+          );
+          base64.value = canvas.toDataURL();
+          imgSize.value = `${(gapX + markWidth) * SIZE}px`;
+        };
+        img.crossOrigin = "anonymous";
+        img.referrerPolicy = "no-referrer";
+        img.src = props2.image;
+      } else {
+        fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
+        ctx.restore();
+        util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+        fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
+        base64.value = canvas.toDataURL();
+        imgSize.value = `${(gapX + markWidth) * SIZE}px`;
+      }
+    };
+    vue.onMounted(() => {
+      render();
+    });
+    vue.watch(
+      () => props2,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    return { imgStyle };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { style: { position: "relative" } };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "default"),
+    vue.createElementVNode("div", {
+      style: vue.normalizeStyle(_ctx.imgStyle)
+    }, null, 4)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,14 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { WatermarkGap, WatermarkOffset, WatermarkFont } from './types';
+export declare const watermarkProps: {
+    width: NumberConstructor;
+    height: NumberConstructor;
+    rotate: NumberConstructor;
+    zIndex: NumberConstructor;
+    image: StringConstructor;
+    content: PropType<string | string[]>;
+    font: PropType<WatermarkFont>;
+    gap: PropType<WatermarkGap>;
+    offset: PropType<WatermarkOffset>;
+};
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;