ele-admin-plus 1.0.0-beta.1

package/es/ele-cropper/components/cropper-tools.js

@@ -0,0 +1,186 @@
+import { defineComponent, shallowRef, ref, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
+import { ElButtonGroup, ElButton, ElUpload, ElTooltip } from "element-plus";
+import { ZoomIn, ZoomOut, Back, Right, Top, Bottom, RefreshLeft, RefreshRight, Switch, Sort, Refresh, Upload, Check } from "@element-plus/icons-vue";
+import { useLocale } from "../../ele-config-provider/use-receiver";
+const TOOL_ICONS = {
+  zoomIn: ZoomIn,
+  zoomOut: ZoomOut,
+  moveLeft: Back,
+  moveRight: Right,
+  moveUp: Top,
+  moveDown: Bottom,
+  rotateLeft: RefreshLeft,
+  rotateRight: RefreshRight,
+  flipX: Switch,
+  flipY: Sort,
+  reset: Refresh,
+  upload: Upload,
+  ok: Check
+};
+const _sfc_main = defineComponent({
+  name: "CropperTools",
+  components: { ElButtonGroup, ElButton, ElUpload, ElTooltip },
+  props: {
+    // 操作按钮布局
+    tools: String,
+    // 允许上传的图片类型
+    accept: String,
+    // 是否需要提示组件
+    tooltip: Boolean,
+    // 提示组件属性
+    tooltipProps: Object,
+    // 国际化
+    locale: Object
+  },
+  emits: {
+    zoomIn: () => true,
+    zoomOut: () => true,
+    moveLeft: () => true,
+    moveRight: () => true,
+    moveUp: () => true,
+    moveDown: () => true,
+    rotateLeft: () => true,
+    rotateRight: () => true,
+    flipX: () => true,
+    flipY: () => true,
+    reset: () => true,
+    upload: (_option) => true,
+    ok: () => true
+  },
+  setup(props, { emit }) {
+    const { lang } = useLocale("cropper", props);
+    const groups = shallowRef([]);
+    const tooltipContent = ref("");
+    const virtualRef = ref();
+    const onUpload = (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        var _a;
+        emit("upload", {
+          data: (_a = e.target) == null ? void 0 : _a.result,
+          type: file.type
+        });
+      };
+      reader.readAsDataURL(file);
+      return false;
+    };
+    const onClick = (name) => {
+      emit(name);
+    };
+    const onItemHover = (item, e) => {
+      const title = lang.value[item.name];
+      if (props.tooltip && item.name !== "ok" && title) {
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = title;
+      }
+    };
+    watch(
+      () => props.tools,
+      (tools) => {
+        if (!tools) {
+          groups.value = [];
+          return;
+        }
+        const names = Object.keys(TOOL_ICONS);
+        groups.value = tools.split("|").filter((g) => !!g.trim()).map((g, i) => {
+          const items = g.split(",").filter((t) => {
+            const name = t.trim();
+            return name && names.includes(name);
+          }).map((t, j) => {
+            const name = t.trim();
+            return {
+              key: i + "-" + j + name,
+              name,
+              icon: TOOL_ICONS[name],
+              className: `ele-cropper-${name}`
+            };
+          });
+          return { key: i + g, items };
+        });
+      },
+      { immediate: true }
+    );
+    return {
+      lang,
+      groups,
+      tooltipContent,
+      virtualRef,
+      onUpload,
+      onClick,
+      onItemHover
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-cropper-tools" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElUpload = resolveComponent("ElUpload");
+  const _component_ElButtonGroup = resolveComponent("ElButtonGroup");
+  const _component_ElTooltip = resolveComponent("ElTooltip");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.groups, (group) => {
+      return openBlock(), createBlock(_component_ElButtonGroup, {
+        key: group.key,
+        class: "ele-cropper-tool-item"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: item.key
+            }, [
+              item.name === "upload" ? (openBlock(), createBlock(_component_ElUpload, {
+                key: 0,
+                action: "",
+                accept: _ctx.accept,
+                showUploadList: false,
+                beforeUpload: _ctx.onUpload,
+                style: { "display": "inline-block", "line-height": "0" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_ElButton, {
+                    type: "primary",
+                    icon: item.icon,
+                    class: normalizeClass(["ele-cropper-tool", item.className]),
+                    onMouseover: (e) => _ctx.onItemHover(item, e)
+                  }, null, 8, ["icon", "class", "onMouseover"])
+                ]),
+                _: 2
+              }, 1032, ["accept", "beforeUpload"])) : (openBlock(), createBlock(_component_ElButton, {
+                key: 1,
+                type: "primary",
+                icon: item.icon,
+                class: normalizeClass(["ele-cropper-tool", item.className]),
+                onMouseover: (e) => _ctx.onItemHover(item, e),
+                onClick: ($event) => _ctx.onClick(item.name)
+              }, {
+                default: withCtx(() => [
+                  item.name === "ok" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createTextVNode(toDisplayString(_ctx.lang.ok), 1)
+                  ], 64)) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["icon", "class", "onMouseover", "onClick"]))
+            ], 64);
+          }), 128))
+        ]),
+        _: 2
+      }, 1024);
+    }), 128)),
+    createVNode(_component_ElTooltip, mergeProps({ placement: "top" }, _ctx.tooltipProps, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true
+    }), null, 16, ["content", "virtualRef"])
+  ]);
+}
+const cropperTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  cropperTools as default
+};

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

@@ -0,0 +1,108 @@
+import Cropper from 'cropperjs';
+declare const _sfc_main: import("vue").DefineComponent<{
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: import("vue").PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: import("vue").PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: import("vue").PropType<import("./types").CropperLocale>;
+}, {
+    imageRef: import("vue").Ref<HTMLImageElement | null>;
+    previewRef: any;
+    isResponsive: import("vue").ComputedRef<boolean>;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onMoveLeft: () => void;
+    onMoveRight: () => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onRotateLeft: () => void;
+    onRotateRight: () => void;
+    onFlipX: () => void;
+    onFlipY: () => void;
+    onReset: () => void;
+    onUpload: ({ data, type }: {
+        data: string;
+        type: string;
+    }) => void;
+    onOk: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (_result?: string | Blob | null | undefined) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: import("vue").PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: import("vue").PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: import("vue").PropType<import("./types").CropperLocale>;
+}>> & {
+    onDone?: ((_result?: string | Blob | null | undefined) => any) | undefined;
+}, {
+    tooltip: boolean;
+    imageType: string;
+    accept: string;
+    tools: string;
+    preview: boolean;
+    previewWidth: number;
+    toBlob: boolean;
+    responsive: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-cropper/index.js

@@ -0,0 +1,216 @@
+import { defineComponent, ref, watch, nextTick, onMounted, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, createCommentVNode, createVNode } from "vue";
+import Cropper from "cropperjs";
+import { useLicense, UNAUTHORIZED_TIP } from "../utils/license-util";
+import { useResponsive } from "../ele-config-provider/use-receiver";
+import CropperPreview from "./components/cropper-preview";
+import CropperTools from "./components/cropper-tools";
+import { cropperProps, cropperEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleCropper",
+  components: { CropperPreview, CropperTools },
+  props: cropperProps,
+  emits: cropperEmits,
+  setup(props, { emit }) {
+    const { authenticated } = useLicense();
+    const isResponsive = useResponsive(props);
+    const imageRef = ref(null);
+    const previewRef = ref(null);
+    const current = {
+      instance: null,
+      imageType: props.imageType,
+      scaleXValue: -1,
+      scaleYValue: -1
+    };
+    const render = () => {
+      destroy();
+      const options = { ...props.options };
+      if (props.preview && previewRef.value) {
+        options.preview = previewRef.value.getPreviews();
+      }
+      if (imageRef.value) {
+        current.instance = new Cropper(imageRef.value, options);
+      }
+    };
+    const destroy = () => {
+      current.instance && current.instance.destroy();
+      current.instance = null;
+    };
+    const onZoomIn = () => {
+      current.instance && current.instance.zoom(0.1);
+    };
+    const onZoomOut = () => {
+      current.instance && current.instance.zoom(-0.1);
+    };
+    const onMoveLeft = () => {
+      current.instance && current.instance.move(-10, 0);
+    };
+    const onMoveRight = () => {
+      current.instance && current.instance.move(10, 0);
+    };
+    const onMoveUp = () => {
+      current.instance && current.instance.move(0, -10);
+    };
+    const onMoveDown = () => {
+      current.instance && current.instance.move(0, 10);
+    };
+    const onRotateLeft = () => {
+      current.instance && current.instance.rotate(-45);
+    };
+    const onRotateRight = () => {
+      current.instance && current.instance.rotate(45);
+    };
+    const onFlipX = () => {
+      current.instance && current.instance.scaleX(current.scaleXValue);
+      current.scaleXValue = -current.scaleXValue;
+    };
+    const onFlipY = () => {
+      current.instance && current.instance.scaleY(current.scaleYValue);
+      current.scaleYValue = -current.scaleYValue;
+    };
+    const onReset = () => {
+      current.instance && current.instance.reset();
+    };
+    const onUpload = ({ data, type }) => {
+      current.imageType = type;
+      if (current.instance) {
+        current.instance.replace(data);
+      } else {
+        const elem = imageRef.value;
+        if (elem) {
+          elem.src = data;
+          elem.style.display = "block";
+        }
+        render();
+      }
+    };
+    const onOk = () => {
+      if (!authenticated.value) {
+        console.warn(UNAUTHORIZED_TIP);
+        return;
+      }
+      if (!current.instance) {
+        emit("done");
+        return;
+      }
+      const result = current.instance.getCroppedCanvas(props.croppedOptions);
+      if (!result) {
+        emit("done");
+        return;
+      }
+      if (props.toBlob) {
+        result.toBlob((blob) => {
+          emit("done", blob);
+        }, current.imageType);
+        return;
+      }
+      emit("done", result.toDataURL(current.imageType));
+    };
+    watch(
+      () => props.src,
+      (src) => {
+        if (src) {
+          if (current.instance) {
+            current.instance.replace(src);
+          } else {
+            nextTick(() => {
+              render();
+            });
+          }
+        } else {
+          destroy();
+        }
+      }
+    );
+    watch(
+      () => props.imageType,
+      (value) => {
+        if (value) {
+          current.imageType = value;
+        }
+      }
+    );
+    onMounted(() => {
+      props.src && render();
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    return {
+      imageRef,
+      previewRef,
+      isResponsive,
+      onZoomIn,
+      onZoomOut,
+      onMoveLeft,
+      onMoveRight,
+      onMoveUp,
+      onMoveDown,
+      onRotateLeft,
+      onRotateRight,
+      onFlipX,
+      onFlipY,
+      onReset,
+      onUpload,
+      onOk
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-cropper-main" };
+const _hoisted_2 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CropperPreview = resolveComponent("CropperPreview");
+  const _component_CropperTools = resolveComponent("CropperTools");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["ele-cropper", { "is-responsive": _ctx.isResponsive }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", {
+        class: "ele-cropper-image",
+        style: normalizeStyle({ height: _ctx.height })
+      }, [
+        createElementVNode("img", {
+          ref: "imageRef",
+          src: _ctx.src,
+          style: normalizeStyle(_ctx.src ? void 0 : { display: "none" })
+        }, null, 12, _hoisted_2)
+      ], 4),
+      _ctx.preview ? (openBlock(), createBlock(_component_CropperPreview, {
+        key: 0,
+        ref: "previewRef",
+        previewWidth: _ctx.previewWidth,
+        aspectRatio: _ctx.options ? _ctx.options.aspectRatio : void 0
+      }, null, 8, ["previewWidth", "aspectRatio"])) : createCommentVNode("", true)
+    ]),
+    createVNode(_component_CropperTools, {
+      tools: _ctx.tools,
+      accept: _ctx.accept,
+      locale: _ctx.locale,
+      tooltip: _ctx.tooltip,
+      tooltipProps: _ctx.tooltipProps,
+      onZoomIn: _ctx.onZoomIn,
+      onZoomOut: _ctx.onZoomOut,
+      onMoveLeft: _ctx.onMoveLeft,
+      onMoveRight: _ctx.onMoveRight,
+      onMoveUp: _ctx.onMoveUp,
+      onMoveDown: _ctx.onMoveDown,
+      onRotateLeft: _ctx.onRotateLeft,
+      onRotateRight: _ctx.onRotateRight,
+      onFlipX: _ctx.onFlipX,
+      onFlipY: _ctx.onFlipY,
+      onReset: _ctx.onReset,
+      onUpload: _ctx.onUpload,
+      onOk: _ctx.onOk
+    }, null, 8, ["tools", "accept", "locale", "tooltip", "tooltipProps", "onZoomIn", "onZoomOut", "onMoveLeft", "onMoveRight", "onMoveUp", "onMoveDown", "onRotateLeft", "onRotateRight", "onFlipX", "onFlipY", "onReset", "onUpload", "onOk"])
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,51 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { ElTooltipProps } from 'element-plus';
+import type Cropper from 'cropperjs';
+import type { CropperLocale } from './types';
+/**
+ * 属性
+ */
+export declare const cropperProps: {
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: PropType<CropperLocale>;
+};
+export type CropperProps = ExtractPropTypes<typeof cropperProps>;
+/**
+ * 事件
+ */
+export declare const cropperEmits: {
+    done: (_result?: Blob | string | null) => boolean;
+};

package/es/ele-cropper/props.js

@@ -0,0 +1,59 @@
+const cropperProps = {
+  // 图片高度
+  height: String,
+  // 图片地址
+  src: String,
+  // 图片地址对应的图片类型,如'image/jpeg'
+  imageType: {
+    type: String,
+    default: "image/png"
+  },
+  // 允许上传的图片类型
+  accept: {
+    type: String,
+    default: "image/*"
+  },
+  // 操作按钮布局
+  tools: {
+    type: String,
+    default: "zoomIn,zoomOut | moveLeft,moveRight,moveUp,moveDown | rotateLeft,rotateRight | flipX,flipY | reset,upload | ok"
+  },
+  // 是否需要预览组件
+  preview: {
+    type: Boolean,
+    default: true
+  },
+  // 预览组件宽度
+  previewWidth: {
+    type: Number,
+    default: 120
+  },
+  // 是否返回blob数据
+  toBlob: Boolean,
+  // cropperjs的参数
+  options: Object,
+  // cropperjs裁剪方法的参数
+  croppedOptions: Object,
+  // 是否需要tooltip
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  // tooltip属性
+  tooltipProps: Object,
+  // 是否开启响应式
+  responsive: {
+    type: Boolean,
+    default: null
+  },
+  // 国际化
+  locale: Object
+};
+const cropperEmits = {
+  // 裁剪完成事件
+  done: (_result) => true
+};
+export {
+  cropperEmits,
+  cropperProps
+};

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

@@ -0,0 +1,6 @@
+import 'element-plus/es/components/button-group/style/index';
+import 'element-plus/es/components/button/style/index';
+import 'element-plus/es/components/upload/style/index';
+import 'element-plus/es/components/tooltip/style/index';
+import 'cropperjs/dist/cropper.css';
+import './index.scss';