yuang-framework-ui-pc 1.1.44 → 1.1.46

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

@@ -0,0 +1,218 @@
+import { defineComponent, ref, shallowRef, watch, markRaw, resolveComponent, createElementBlock, openBlock, createVNode, Fragment, renderList, createBlock, withCtx, normalizeClass, createCommentVNode, createTextVNode, toDisplayString, mergeProps } from "vue";
+import { ElUpload, ElButton, ElButtonGroup } from "element-plus";
+import { CheckOutlined, UploadOutlined, SyncOutlined, SortOutlined, SwapOutlined, ReloadOutlined, UndoOutlined, ArrowDownOutlined, ArrowUpOutlined, ArrowRightOutlined, ArrowLeftOutlined, ZoomOutOutlined, ZoomInOutlined } from "../../icons";
+import { useTimer } from "../../utils/hook";
+import { useLocale } from "../../ele-config-provider/receiver";
+import EleTooltip from "../../ele-tooltip/index";
+const TOOL_ICONS = {
+  zoomIn: ZoomInOutlined,
+  zoomOut: ZoomOutOutlined,
+  moveLeft: ArrowLeftOutlined,
+  moveRight: ArrowRightOutlined,
+  moveUp: ArrowUpOutlined,
+  moveDown: ArrowDownOutlined,
+  rotateLeft: UndoOutlined,
+  rotateRight: ReloadOutlined,
+  flipX: SwapOutlined,
+  flipY: SortOutlined,
+  reset: SyncOutlined,
+  upload: UploadOutlined,
+  ok: CheckOutlined
+};
+const _sfc_main = defineComponent({
+  name: "CropperTools",
+  components: { ElButtonGroup, ElButton, ElUpload, EleTooltip },
+  props: {
+    /** 操作按钮布局 */
+    tools: String,
+    /** 允许上传的图片类型 */
+    accept: String,
+    /** 是否需要提示组件 */
+    tooltip: Boolean,
+    /** 提示组件属性 */
+    tooltipProps: Object,
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick: Function,
+    /** 国际化 */
+    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 [startHideTipTimer, stopHideTipTimer] = useTimer(200);
+    const tooltipRef = ref(null);
+    const groups = shallowRef([]);
+    const tooltipContent = ref("");
+    const virtualRef = ref();
+    const emitUpload = (data, type) => {
+      emit("upload", { data, type });
+    };
+    const handleUpload = (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        var _a;
+        const url = (_a = e.target) == null ? void 0 : _a.result;
+        if (url != null) {
+          emitUpload(url, file.type);
+        }
+      };
+      reader.readAsDataURL(file);
+      return false;
+    };
+    const hideTooltip = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const handleItemHover = (item, e) => {
+      const title = lang.value[item.name];
+      if (props.tooltip && item.name !== "ok" && title) {
+        stopHideTipTimer();
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = title;
+      }
+    };
+    const handleClick = (name) => {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
+      emit(name);
+    };
+    const handleUploadButtonClick = (e) => {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
+      if (props.beforeUploadClick && props.beforeUploadClick(e, emitUpload) === false) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    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: markRaw(TOOL_ICONS[name]),
+              className: `ele-cropper-${name}`
+            };
+          });
+          return { key: i + g, items };
+        });
+      },
+      { immediate: true }
+    );
+    return {
+      lang,
+      tooltipRef,
+      groups,
+      tooltipContent,
+      virtualRef,
+      handleUpload,
+      handleClick,
+      handleItemHover,
+      handleUploadButtonClick
+    };
+  }
+});
+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_EleTooltip = resolveComponent("EleTooltip");
+  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,
+                showFileList: false,
+                beforeUpload: _ctx.handleUpload,
+                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.handleItemHover(item, e),
+                    onClick: _ctx.handleUploadButtonClick
+                  }, null, 8, ["icon", "class", "onMouseover", "onClick"])
+                ]),
+                _: 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.handleItemHover(item, e),
+                onClick: ($event) => _ctx.handleClick(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_EleTooltip, mergeProps({
+      placement: "top",
+      offset: 6
+    }, _ctx.tooltipProps || {}, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true,
+      ref: "tooltipRef"
+    }), null, 16, ["content", "virtualRef"])
+  ]);
+}
+const cropperTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  cropperTools as default
+};

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

@@ -0,0 +1,108 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-cropper {
+  .ele-cropper-main {
+    display: flex;
+  }
+
+  .ele-cropper-image {
+    flex: 1;
+    height: 300px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+
+    & > img {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .ele-cropper-image,
+  .ele-cropper-image > .cropper-container,
+  .ele-cropper-image > .cropper-container > .cropper-wrap-box,
+  .ele-cropper-image > .cropper-container > .cropper-drag-box {
+    border-radius: elVar('border-radius', 'base');
+  }
+
+  .ele-cropper-previews {
+    flex-shrink: 0;
+    text-align: right;
+    font-size: 0;
+  }
+
+  .ele-cropper-preview {
+    margin-top: 16px;
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: elVar('border-radius', 'base');
+    border: 1px solid elVar('border-color', 'light');
+    vertical-align: top;
+    overflow: hidden;
+
+    &.is-circle {
+      border-radius: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .ele-cropper.is-responsive .ele-cropper-previews {
+    display: none;
+  }
+}
+
+/* 操作按钮 */
+.ele-cropper-tools {
+  margin-top: 6px;
+
+  .el-upload-list {
+    display: none;
+  }
+}
+
+.ele-cropper-tool-item {
+  margin: 10px 14px 0 0;
+  vertical-align: top;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.ele-cropper-tool {
+  padding: 0 10px;
+
+  &:not(.ele-cropper-ok) > i + span {
+    display: none;
+  }
+
+  &.ele-cropper-ok > .el-icon + span {
+    margin-left: 4px;
+  }
+}
+
+.ele-cropper-ok {
+  padding-left: 10px;
+  padding-right: 10px;
+  border-left: none;
+  border-right: none;
+}
+
+.ele-cropper-upload {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-right: none;
+}
+
+@media screen and (max-width: 768px) {
+  .ele-cropper.is-responsive .ele-cropper-tool-item:not(:last-child) {
+    margin-right: 6px;
+  }
+}

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

@@ -0,0 +1,114 @@
+import type { Component } from 'vue';
+import type Cropper from 'cropperjs';
+
+/**
+ * 上传事件参数
+ */
+export interface UploadOption {
+  /** 文件数据 */
+  data?: string | ArrayBuffer | null;
+  /** 文件类型 */
+  type: string;
+}
+
+/**
+ * 操作按钮名称
+ */
+export type ToolName =
+  | 'zoomIn'
+  | 'zoomOut'
+  | 'moveLeft'
+  | 'moveRight'
+  | 'moveUp'
+  | 'moveDown'
+  | 'rotateLeft'
+  | 'rotateRight'
+  | 'flipX'
+  | 'flipY'
+  | 'reset'
+  | 'upload'
+  | 'ok';
+
+/**
+ * 操作按钮
+ */
+export interface ToolItem {
+  /** 标识 */
+  key: string;
+  /** 名称 */
+  name: ToolName;
+  /** 图标 */
+  icon?: Component;
+  /** 类名 */
+  className?: string;
+}
+
+/**
+ * 操作按钮组
+ */
+export interface ToolGroup {
+  /** 标识 */
+  key: string;
+  /** 操作按钮 */
+  items: ToolItem[];
+}
+
+/**
+ * 裁剪组件参数
+ */
+export type CropperOptions = Partial<Cropper.Options<HTMLImageElement>> | null;
+
+/**
+ * 裁剪方法参数
+ */
+export type CroppedOptions = Partial<Cropper.GetCroppedCanvasOptions> | null;
+
+/**
+ * 实例状态
+ */
+export interface CurrentState {
+  /** 裁剪组件实例 */
+  instance?: Cropper | null;
+  /** 当前图片类型 */
+  imageType?: string;
+  /** 水平翻转值 */
+  scaleXValue: number;
+  /** 垂直翻转值 */
+  scaleYValue: number;
+}
+
+/**
+ * 上传按钮点击自定义处理的回调
+ */
+export type BeforeUploadOnResult = (
+  data: string | ArrayBuffer,
+  type?: string
+) => void;
+
+/**
+ * 上传按钮点击前的钩子
+ */
+export type BeforeUploadClick = (
+  e: MouseEvent,
+  onResult: BeforeUploadOnResult
+) => boolean | undefined | void;
+
+/**
+ * 国际化
+ */
+export interface CropperLocale {
+  zoomIn: string;
+  zoomOut: string;
+  rotateLeft: string;
+  rotateRight: string;
+  moveLeft: string;
+  moveRight: string;
+  moveUp: string;
+  moveDown: string;
+  flipX: string;
+  flipY: string;
+  reset: string;
+  upload: string;
+  ok: string;
+  title: string;
+}