@wfrog/vc/es/components/cropper/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));

// vue-script:D:\project\_my\vc\src\components\cropper\index.vue?type=script
import { defineComponent as _defineComponent5 } from "vue";
import { unref as _unref3, normalizeClass as _normalizeClass6, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode3, withDirectives as _withDirectives2, createTextVNode as _createTextVNode2, withCtx as _withCtx4, createVNode as _createVNode3, isRef as _isRef2, openBlock as _openBlock7, createBlock as _createBlock5, createElementBlock as _createElementBlock5 } from "vue";
import { computed as computed4, nextTick as nextTick2, onMounted as onMounted3, onUnmounted as onUnmounted2, ref as ref3, shallowRef as shallowRef2, watch as watch3 } from "vue";
import { ElButton as ElButton3, ElLink, ElSpace, vLoading } from "element-plus";
import { defaultWindow as defaultWindow2, file, loader as loader2 } from "@wfrog/utils";
import { debounce } from "lodash-es";

// vue-script:D:\project\_my\vc\src\components\dialog\index.vue?type=script
import { defineComponent as _defineComponent4 } from "vue";
import { unref as _unref2, renderSlot as _renderSlot2, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass5, createElementVNode as _createElementVNode2, vShow as _vShow, createVNode as _createVNode2, withDirectives as _withDirectives, withCtx as _withCtx3, openBlock as _openBlock6, createBlock as _createBlock4, createCommentVNode as _createCommentVNode2, isRef as _isRef, mergeProps as _mergeProps2, createSlots as _createSlots, pushScopeId as _pushScopeId3, popScopeId as _popScopeId3 } from "vue";
import { computed as computed3, ref as ref2, useCssModule, watch as watch2 } from "vue";
import { ElButton as ElButton2, ElDialog, ElScrollbar } from "element-plus";
import { Close, CopyDocument, FullScreen } from "@element-plus/icons-vue";

// node_modules/@vueuse/shared/node_modules/vue-demi/lib/index.mjs
var lib_exports = {};
__export(lib_exports, {
  Vue: () => Vue,
  Vue2: () => Vue2,
  del: () => del,
  install: () => install,
  isVue2: () => isVue2,
  isVue3: () => isVue3,
  set: () => set
});
__reExport(lib_exports, vue_star);
import * as Vue from "vue";
import * as vue_star from "vue";
var isVue2 = false;
var isVue3 = true;
var Vue2 = void 0;
function install() {
}
function set(target, key, val) {
  if (Array.isArray(target)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  target[key] = val;
  return val;
}
function del(target, key) {
  if (Array.isArray(target)) {
    target.splice(key, 1);
    return;
  }
  delete target[key];
}

// node_modules/@vueuse/shared/index.mjs
var _a;
var isClient = typeof window !== "undefined";
var isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function resolveUnref(r) {
  return typeof r === "function" ? r() : (0, lib_exports.unref)(r);
}
function createFilterWrapper(filter, fn) {
  function wrapper(...args) {
    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
  }
  return wrapper;
}
function throttleFilter(ms, trailing = true, leading = true) {
  let lastExec = 0;
  let timer;
  let isLeading = true;
  const clear = () => {
    if (timer) {
      clearTimeout(timer);
      timer = void 0;
    }
  };
  const filter = (invoke) => {
    const duration = resolveUnref(ms);
    const elapsed = Date.now() - lastExec;
    clear();
    if (duration <= 0) {
      lastExec = Date.now();
      return invoke();
    }
    if (elapsed > duration && (leading || !isLeading)) {
      lastExec = Date.now();
      invoke();
    } else if (trailing) {
      timer = setTimeout(() => {
        lastExec = Date.now();
        isLeading = true;
        clear();
        invoke();
      }, duration);
    }
    if (!leading && !timer)
      timer = setTimeout(() => isLeading = true, duration);
    isLeading = false;
  };
  return filter;
}
function useThrottleFn(fn, ms = 200, trailing = false, leading = true) {
  return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
}
function useToggle(initialValue = false, options = {}) {
  const {
    truthyValue = true,
    falsyValue = false
  } = options;
  const valueIsRef = (0, lib_exports.isRef)(initialValue);
  const _value = (0, lib_exports.ref)(initialValue);
  function toggle(value) {
    if (arguments.length) {
      _value.value = value;
      return _value.value;
    } else {
      const truthy = resolveUnref(truthyValue);
      _value.value = _value.value === truthy ? resolveUnref(falsyValue) : truthy;
      return _value.value;
    }
  }
  if (valueIsRef)
    return toggle;
  else
    return [_value, toggle];
}

// vue-script:D:\project\_my\vc\src\components\button\index.vue?type=script
import { defineComponent as _defineComponent3 } from "vue";
import { unref as _unref, openBlock as _openBlock5, createBlock as _createBlock3, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementBlock as _createElementBlock4, mergeProps as _mergeProps, withCtx as _withCtx2, createVNode as _createVNode, pushScopeId as _pushScopeId2, popScopeId as _popScopeId2 } from "vue";
import { computed as computed2 } from "vue";
import { ElButton, ElMessageBox, ElPopconfirm } from "element-plus";

// src/use/useStore.ts
import { inject as inject2, provide as provide2 } from "vue";
function useInject(keyName) {
  const keys = inject2(keyName, {});
  const result = {};
  Object.keys(keys).forEach((key) => {
    result[key] = inject2(keys[key]);
  });
  return result;
}

// src/components/config-provider/config.ts
var KEY_NAME = Symbol("VCConfig");
var injectConfig = () => useInject(KEY_NAME);

// vue-script:D:\project\_my\vc\src\components\icon\index.vue?type=script
import { defineComponent as defineComponent2 } from "vue";

// vue-script:D:\project\_my\vc\src\components\el-icon\index.vue?type=script
import { defineComponent } from "vue";
import { ElIcon } from "element-plus";
import * as Icons from "@element-plus/icons-vue";
var el_icon_default = defineComponent({
  components: { ...Icons, ElIcon },
  props: {
    name: { type: String, required: true },
    color: { type: String, default: "" },
    size: { type: [Number, String], default: "" }
  }
});

// vue-template:D:\project\_my\vc\src\components\el-icon\index.vue?type=template
import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx } from "vue";
function render(_ctx, _cache) {
  const _component_ElIcon = _resolveComponent("ElIcon");
  return _openBlock(), _createBlock(_component_ElIcon, {
    size: _ctx.size,
    color: _ctx.color,
    class: _normalizeClass(_ctx.$style.icon)
  }, {
    default: _withCtx(() => [
      (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.name)))
    ]),
    _: 1
  }, 8, ["size", "color", "class"]);
}

// vue-style:D:\project\_my\vc\src\components\el-icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var el_icon_default2 = { icon: "_icon_1iurh_1" };

// src/components/el-icon/index.vue
el_icon_default.render = render;
var cssModules = {};
el_icon_default.__cssModules = cssModules = {};
cssModules["$style"] = el_icon_default2;
var el_icon_default3 = el_icon_default;

// vue-script:D:\project\_my\vc\src\components\svg-icon\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass2, openBlock as _openBlock2, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
var _hoisted_1 = ["xlink:href"];
var svg_icon_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    name: { type: String, required: true }
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return _openBlock2(), _createElementBlock("svg", {
        class: _normalizeClass2(["svg-icon", [_ctx.$style.icon]]),
        "aria-hidden": "true"
      }, [
        _createElementVNode("use", {
          "xlink:href": `#icon-${props.name}`
        }, null, 8, _hoisted_1)
      ], 2);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\svg-icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var svg_icon_default2 = { icon: "_icon_15t6e_1" };

// src/components/svg-icon/index.vue
var cssModules2 = {};
svg_icon_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = svg_icon_default2;
var svg_icon_default3 = svg_icon_default;

// vue-script:D:\project\_my\vc\src\components\awesome-icon\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { normalizeClass as _normalizeClass3, openBlock as _openBlock3, createElementBlock as _createElementBlock2 } from "vue";
import { onMounted as onMounted2 } from "vue";
import { defaultWindow, loader } from "@wfrog/utils";
var awesome_icon_default = /* @__PURE__ */ _defineComponent2({
  __name: "index",
  props: {
    name: { type: String, default: "" },
    mode: { type: String, default: "css" }
  },
  setup(__props) {
    const props = __props;
    const loaderSource = async () => {
      const cdn = props.mode === "svg" ? "fontawesomeJs" : "fontawesomeCss";
      await loader.loadCdnSingle(cdn);
    };
    onMounted2(() => {
      if (defaultWindow) {
        if (!defaultWindow.ElementPlusComponents?.isAwesomeIconLock) {
          defaultWindow.ElementPlusComponents = { ...defaultWindow.ElementPlusComponents, isAwesomeIconLock: true };
          loaderSource();
        }
      }
    });
    return (_ctx, _cache) => {
      return _openBlock3(), _createElementBlock2("i", {
        class: _normalizeClass3(["awesome-icon", props.name])
      }, null, 2);
    };
  }
});

// src/components/awesome-icon/index.vue
var awesome_icon_default2 = awesome_icon_default;

// vue-script:D:\project\_my\vc\src\components\icon\index.vue?type=script
var icon_default = defineComponent2({
  components: { HEl: el_icon_default3, HSvg: svg_icon_default3, HAwesome: awesome_icon_default2 },
  props: {
    name: { type: String, required: true },
    type: { type: String, required: true }
  }
});

// vue-template:D:\project\_my\vc\src\components\icon\index.vue?type=template
import { resolveDynamicComponent as _resolveDynamicComponent2, openBlock as _openBlock4, createBlock as _createBlock2, normalizeClass as _normalizeClass4, createElementBlock as _createElementBlock3 } from "vue";
function render2(_ctx, _cache) {
  return _openBlock4(), _createElementBlock3("i", {
    class: _normalizeClass4(["svg-icon-box", [_ctx.$style.box]])
  }, [
    (_openBlock4(), _createBlock2(_resolveDynamicComponent2(`h-${_ctx.type}`), {
      name: _ctx.name,
      class: "site-icon"
    }, null, 8, ["name"]))
  ], 2);
}

// vue-style:D:\project\_my\vc\src\components\icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var icon_default2 = { box: "_box_1wvpk_1" };

// src/components/icon/index.vue
icon_default.render = render2;
var cssModules3 = {};
icon_default.__cssModules = cssModules3 = {};
cssModules3["$style"] = icon_default2;
var icon_default3 = icon_default;

// vue-script:D:\project\_my\vc\src\components\button\index.vue?type=script
var _hoisted_12 = { key: 1 };
var _hoisted_2 = { key: 1 };
var button_default = /* @__PURE__ */ _defineComponent3({
  __name: "index",
  props: {
    icon: { type: null, required: false },
    time: { type: Number, required: false, default: 800 },
    type: { type: null, required: false, default: "" },
    confirm: { type: String, required: false, default: void 0 },
    confirmInfo: { type: Object, required: false }
  },
  emits: ["click"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const { button: buttonConfig } = injectConfig();
    const defaultConfirmInfo = { title: "\u63D0\u793A", confirmButtonText: "\u786E\u5B9A", cancelButtonText: "\u53D6\u6D88", msg: "\u786E\u8BA4\u8981\u5220\u9664\u8FD9\u6761\u6570\u636E\u5417\uFF1F" };
    const myConfirm = computed2(() => buttonConfig?.confirm !== void 0 ? buttonConfig?.confirm : props.confirm !== void 0 ? props.confirm : ["danger", "warning"].includes(props.type) ? "messagebox" : void 0);
    const { name, type: iconType = "el", position = "left" } = props.icon || {};
    const { msg, title, confirmButtonText, cancelButtonText } = { ...defaultConfirmInfo, ...buttonConfig?.confirmInfo, ...props.confirmInfo };
    const handleComfirm = async () => {
      try {
        const result = await ElMessageBox.confirm(msg, title, { confirmButtonText, cancelButtonText, type: "warning", dangerouslyUseHTMLString: true });
        return result;
      } catch {
        return false;
      }
    };
    const handleClick = useThrottleFn(async (e) => {
      if (myConfirm.value === "messagebox") {
        const result = await handleComfirm();
        result && emits("click", e);
        return;
      }
      if (myConfirm.value === "popconfirm") {
        return;
      }
      emits("click", e);
    }, props.time);
    const handleConfirm = useThrottleFn(async (e) => {
      emits("click", e);
    }, props.time);
    return (_ctx, _cache) => {
      return _unref(myConfirm) === "popconfirm" ? (_openBlock5(), _createBlock3(_unref(ElPopconfirm), {
        key: 0,
        title: _unref(msg),
        "confirm-button-text": _unref(confirmButtonText),
        "cancel-button-text": _unref(cancelButtonText),
        "popper-class": `${_ctx.$style.popper} el-popover`,
        onConfirm: _unref(handleConfirm)
      }, {
        reference: _withCtx2(() => [
          _createVNode(_unref(ElButton), _mergeProps(_ctx.$attrs, {
            type: __props.type,
            class: _ctx.$style.button,
            onClick: _unref(handleClick)
          }), {
            default: _withCtx2(() => [
              _unref(position) === "left" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
                key: 0,
                type: _unref(iconType),
                name: _unref(name)
              }, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true),
              _ctx.$slots.default ? (_openBlock5(), _createElementBlock4("span", _hoisted_12, [
                _renderSlot(_ctx.$slots, "default")
              ])) : _createCommentVNode("v-if", true),
              _unref(position) === "right" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
                key: 2,
                type: _unref(iconType),
                name: _unref(name)
              }, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true)
            ]),
            _: 3
          }, 16, ["type", "class", "onClick"])
        ]),
        _: 3
      }, 8, ["title", "confirm-button-text", "cancel-button-text", "popper-class", "onConfirm"])) : (_openBlock5(), _createBlock3(_unref(ElButton), _mergeProps({ key: 1 }, _ctx.$attrs, {
        type: __props.type,
        class: _ctx.$style.button,
        onClick: _unref(handleClick)
      }), {
        default: _withCtx2(() => [
          _unref(position) === "left" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
            key: 0,
            type: _unref(iconType),
            name: _unref(name)
          }, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true),
          _ctx.$slots.default ? (_openBlock5(), _createElementBlock4("span", _hoisted_2, [
            _renderSlot(_ctx.$slots, "default")
          ])) : _createCommentVNode("v-if", true),
          _unref(position) === "right" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
            key: 2,
            type: _unref(iconType),
            name: _unref(name)
          }, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true)
        ]),
        _: 3
      }, 16, ["type", "class", "onClick"]));
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\button\index.vue?type=style&index=0&isModule=true&isNameImport=true
var button_default2 = { button: "_button_1dzv7_1", popper: "_popper_1dzv7_5" };

// src/components/button/index.vue
var cssModules4 = {};
button_default.__cssModules = cssModules4 = {};
cssModules4["$style"] = button_default2;
var button_default3 = button_default;

// vue-script:D:\project\_my\vc\src\components\dialog\index.vue?type=script
var _hoisted_13 = ["id"];
var dialog_default = /* @__PURE__ */ _defineComponent4({
  __name: "index",
  props: {
    modelValue: { type: Boolean, required: true, default: false },
    title: { type: String, required: false, default: "\u5BF9\u8BDD\u6846" },
    showFullscreen: { type: Boolean, required: false, default: true },
    showDefaultFooter: { type: Boolean, required: false, default: false },
    lazy: { type: Boolean, required: false, default: true },
    height: { type: [String, Number], required: false },
    maxHeight: { type: [String, Number], required: false },
    fullscreenHeight: { type: [String, Number], required: false, default: "calc(100vh - 146px)" },
    flex: { type: Boolean, required: false, default: false }
  },
  emits: ["update:modelValue", "closed"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const $style = useCssModule();
    const dialogVisible = computed3({
      get: () => props.modelValue,
      set: (val) => emits("update:modelValue", val)
    });
    const visible = ref2(false);
    const isFullscreen = ref2(false);
    const toggleFullscreen = useToggle(isFullscreen);
    const Icon = computed3(() => isFullscreen.value ? CopyDocument : FullScreen);
    const scrollbarClassName = computed3(() => ({
      [$style.scrollbar]: true,
      [$style.flex]: props.flex
    }));
    watch2(dialogVisible, (val) => {
      if (val) {
        visible.value = true;
      }
    });
    const handleClosed = () => {
      visible.value = false;
      emits("closed");
    };
    return (_ctx, _cache) => {
      return visible.value || !__props.lazy ? (_openBlock6(), _createBlock4(_unref2(ElDialog), _mergeProps2({
        key: 0,
        modelValue: _unref2(dialogVisible),
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _isRef(dialogVisible) ? dialogVisible.value = $event : null)
      }, _ctx.$attrs, {
        "align-center": "",
        "show-close": false,
        fullscreen: isFullscreen.value,
        class: _unref2($style).main,
        onClosed: handleClosed
      }), _createSlots({
        header: _withCtx3(({ close, titleId, titleClass }) => [
          _createElementVNode2("div", {
            class: _normalizeClass5(_unref2($style).header)
          }, [
            _createElementVNode2("span", {
              id: titleId,
              class: _normalizeClass5([titleClass, _unref2($style).title])
            }, [
              _renderSlot2(_ctx.$slots, "header", { close }, () => [
                _createTextVNode(_toDisplayString(__props.title), 1)
              ])
            ], 10, _hoisted_13),
            _createElementVNode2("span", {
              class: _normalizeClass5(_unref2($style).buttons)
            }, [
              _withDirectives(_createVNode2(_unref2(ElButton2), {
                icon: _unref2(Icon),
                plain: "",
                onClick: _cache[0] || (_cache[0] = () => _unref2(toggleFullscreen)())
              }, null, 8, ["icon"]), [
                [_vShow, __props.showFullscreen]
              ]),
              _createVNode2(_unref2(ElButton2), {
                icon: _unref2(Close),
                plain: "",
                onClick: close
              }, null, 8, ["icon", "onClick"])
            ], 2)
          ], 2)
        ]),
        default: _withCtx3(() => [
          !isFullscreen.value && (__props.height || __props.maxHeight) ? (_openBlock6(), _createBlock4(_unref2(ElScrollbar), {
            key: 0,
            class: _normalizeClass5(_unref2(scrollbarClassName)),
            height: __props.height,
            "max-height": __props.maxHeight
          }, {
            default: _withCtx3(() => [
              _renderSlot2(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["class", "height", "max-height"])) : (_openBlock6(), _createBlock4(_unref2(ElScrollbar), {
            key: 1,
            class: _normalizeClass5(_unref2(scrollbarClassName)),
            "max-height": __props.fullscreenHeight
          }, {
            default: _withCtx3(() => [
              _renderSlot2(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["class", "max-height"]))
        ]),
        _: 2
      }, [
        __props.showDefaultFooter || _ctx.$slots.footer ? {
          name: "footer",
          fn: _withCtx3(() => [
            _renderSlot2(_ctx.$slots, "footer", {}, () => [
              __props.showDefaultFooter ? (_openBlock6(), _createBlock4(button_default3, {
                key: 0,
                onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
              }, {
                default: _withCtx3(() => [
                  _createTextVNode("\u5173\u95ED")
                ]),
                _: 1
              })) : _createCommentVNode2("v-if", true)
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["modelValue", "fullscreen", "class"])) : _createCommentVNode2("v-if", true);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\dialog\index.vue?type=style&index=0&isModule=true&isNameImport=true
var dialog_default2 = { main: "_main_um8p3_1", header: "_header_um8p3_19", title: "_title_um8p3_29", scrollbar: "_scrollbar_um8p3_34", flex: "_flex_um8p3_42", buttons: "_buttons_um8p3_47" };

// src/components/dialog/index.vue
var cssModules5 = {};
dialog_default.__cssModules = cssModules5 = {};
cssModules5["$style"] = dialog_default2;
var dialog_default3 = dialog_default;

// vue-script:D:\project\_my\vc\src\components\cropper\index.vue?type=script
var cropper_default = /* @__PURE__ */ _defineComponent5({
  __name: "index",
  props: {
    dialog: { type: Boolean, default: false },
    visible: { type: Boolean, default: false },
    image: { type: [String, Object], required: true },
    option: { type: Object, default: () => {
    } },
    imageSmoothingQuality: { type: String, default: "high" },
    containerWidth: { type: String, default: "600px" },
    containerHeight: { type: String, default: "450px" },
    cropperWidth: { type: Number, default: 400 },
    cropperHeight: { type: Number, default: 300 }
  },
  emits: ["init", "update:visible", "cancel", "finished"],
  setup(__props, { expose, emit: emits }) {
    const props = __props;
    const loading = ref3(false);
    const workbench = ref3();
    const cropperRef = shallowRef2();
    const downloadLink = ref3("");
    const isNeedInit = ref3(false);
    const dialogVisible = computed4({
      get: () => props.visible,
      set: (val) => {
        emits("update:visible", val);
      }
    });
    const containerStyle = computed4(() => ({
      width: props.containerWidth,
      height: props.containerHeight
    }));
    const dialogWidth = computed4(() => `${parseInt(props.containerWidth) + 40}px`);
    const image = computed4(() => {
      if (typeof props.image === "string") {
        const img = new Image();
        img.src = props.image;
        return img;
      }
      const file2 = props.image;
      if (defaultWindow2 && file2?.size) {
        const img = new Image();
        const blob = defaultWindow2.URL.createObjectURL(file2);
        img.src = blob;
        return img;
      }
      return props.image;
    });
    const handleDownload = () => {
      if (!cropperRef.value || !props.dialog) {
        return;
      }
      const canvas = cropperRef.value.getCroppedCanvas();
      downloadLink.value = canvas?.toDataURL() || "";
    };
    const init = async () => {
      if (!workbench.value) {
        return;
      }
      cropperRef.value?.destroy();
      loading.value = true;
      isNeedInit.value = false;
      workbench.value.childNodes.forEach((item) => workbench.value?.removeChild(item));
      workbench.value.appendChild(image.value);
      const Cropper = await loader2.loadCdnSingle("cropper");
      cropperRef.value = new Cropper(image.value, {
        dragMode: "move",
        viewMode: 1,
        aspectRatio: props.cropperWidth / props.cropperHeight,
        toggleDragModeOnDblclick: false,
        guides: true,
        cropmove: props.dialog ? debounce(handleDownload, 1e3) : () => {
        },
        ...props.option,
        ready() {
          loading.value = false;
          handleDownload();
          nextTick2(() => emits("init"));
        }
      });
    };
    const handleCancle = () => {
      if (loading.value) {
        return;
      }
      dialogVisible.value = false;
      emits("cancel");
    };
    const getCroppedCanvas = () => {
      if (loading.value || !cropperRef.value) {
        return;
      }
      return cropperRef.value.getCroppedCanvas({
        width: props.cropperWidth,
        height: props.cropperHeight,
        imageSmoothingQuality: props.imageSmoothingQuality
      });
    };
    const getBlobData = () => {
      const canvas = getCroppedCanvas();
      if (!canvas) {
        return void 0;
      }
      return file.canvasToBlob(canvas);
    };
    const handleFinish = () => {
      const canvas = getCroppedCanvas();
      const blob = getBlobData();
      dialogVisible.value = false;
      emits("finished", canvas, blob);
    };
    watch3(() => props.option, () => {
      isNeedInit.value = true;
    });
    watch3(image, () => {
      isNeedInit.value = true;
    });
    watch3(dialogVisible, () => {
      props.visible && (!cropperRef.value || isNeedInit.value) && nextTick2(() => init());
    });
    expose({ instance: cropperRef, getCroppedCanvas, getBlobData });
    onMounted3(() => !props.dialog && init());
    onUnmounted2(() => cropperRef.value?.destroy());
    return (_ctx, _cache) => {
      return __props.dialog ? (_openBlock7(), _createBlock5(dialog_default3, {
        key: 0,
        modelValue: _unref3(dialogVisible),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef2(dialogVisible) ? dialogVisible.value = $event : null),
        title: "\u56FE\u7247\u88C1\u526A",
        width: _unref3(dialogWidth),
        "append-to-body": "",
        "close-on-click-modal": false,
        "before-close": handleCancle,
        "show-fullscreen": false,
        lazy: false
      }, {
        footer: _withCtx4(() => [
          _createVNode3(_unref3(ElSpace), null, {
            default: _withCtx4(() => [
              _createVNode3(_unref3(ElButton3), {
                loading: loading.value,
                onClick: handleCancle
              }, {
                default: _withCtx4(() => [
                  _createTextVNode2("\u53D6\u6D88")
                ]),
                _: 1
              }, 8, ["loading"]),
              _createVNode3(_unref3(ElLink), {
                href: downloadLink.value,
                download: "cropper.jpg",
                underline: false
              }, {
                default: _withCtx4(() => [
                  _createVNode3(_unref3(ElButton3), { type: "primary" }, {
                    default: _withCtx4(() => [
                      _createTextVNode2("\u4E0B\u8F7D\u5207\u7247")
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }, 8, ["href"]),
              _createVNode3(_unref3(ElButton3), {
                loading: loading.value,
                type: "primary",
                onClick: handleFinish
              }, {
                default: _withCtx4(() => [
                  _createTextVNode2("\u786E\u5B9A")
                ]),
                _: 1
              }, 8, ["loading"])
            ]),
            _: 1
          })
        ]),
        default: _withCtx4(() => [
          _withDirectives2(_createElementVNode3("div", {
            ref_key: "workbench",
            ref: workbench,
            class: _normalizeClass6(_ctx.$style.workbench),
            style: _normalizeStyle(_unref3(containerStyle))
          }, null, 6), [
            [_unref3(vLoading), loading.value]
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "width"])) : _withDirectives2((_openBlock7(), _createElementBlock5("div", {
        key: 1,
        ref_key: "workbench",
        ref: workbench,
        class: _normalizeClass6(_ctx.$style.workbench),
        style: _normalizeStyle(_unref3(containerStyle))
      }, null, 6)), [
        [_unref3(vLoading), loading.value]
      ]);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\cropper\index.vue?type=style&index=0&isModule=true&isNameImport=true
var cropper_default2 = { workbench: "_workbench_ja7q1_1" };

// src/components/cropper/index.vue
var cssModules6 = {};
cropper_default.__cssModules = cssModules6 = {};
cssModules6["$style"] = cropper_default2;
var cropper_default3 = cropper_default;
export {
  cropper_default3 as default
};