@usethink/shared-frontend 0.1.2 → 0.1.3

package/dist/src/components/basic/cropper/src/CopperModal2.vue.js

@@ -0,0 +1,90 @@
+import { defineComponent as L, ref as l } from "vue";
+import M from "./Cropper.vue.js";
+import { Spin as S, Tooltip as U, Avatar as b, Upload as B, Space as I } from "ant-design-vue";
+import w from "../../../core/Modal/src/BasicModal.vue.js";
+import { useModalInner as F } from "../../../core/Modal/src/hooks/useModal.js";
+import { dataURLtoBlob as x } from "../../../../utils/file/base64Conver.js";
+import { isFunction as T } from "lodash-es";
+import { useI18n as X } from "../../../../hooks/useI18n.js";
+import { ZoomOutOutlined as Y, ZoomInOutlined as Z, ColumnHeightOutlined as _, ColumnWidthOutlined as k, RotateRightOutlined as D, RotateLeftOutlined as H, ReloadOutlined as P, UploadOutlined as W } from "@ant-design/icons-vue";
+const j = {
+  circled: { type: Boolean, default: !0 },
+  uploadApi: {
+    type: Function
+    // as PropType<(params: apiFunParams) => Promise<any>>
+  }
+}, $ = L({
+  name: "CropperModal",
+  components: {
+    BasicModal: w,
+    Space: I,
+    CropperImage: M,
+    Upload: B,
+    Avatar: b,
+    Tooltip: U,
+    Spin: S,
+    UploadOutlined: W,
+    ReloadOutlined: P,
+    RotateLeftOutlined: H,
+    RotateRightOutlined: D,
+    ColumnWidthOutlined: k,
+    ColumnHeightOutlined: _,
+    ZoomInOutlined: Z,
+    ZoomOutOutlined: Y
+  },
+  props: j,
+  emits: ["uploadSuccess", "register"],
+  setup(p, { emit: f }) {
+    let i = "";
+    const n = l(""), t = l(""), u = l(), a = l(!1);
+    let s = 1, c = 1;
+    const m = "mom-cropper-am", [v, { closeModal: O, setModalProps: d }] = F(), { t: h } = X();
+    function R(e) {
+      const o = new FileReader();
+      return o.readAsDataURL(e), n.value = "", t.value = "", o.onload = function(r) {
+        n.value = r.target?.result ?? "", i = e.name;
+      }, !1;
+    }
+    function g({ imgBase64: e }) {
+      t.value = e;
+    }
+    function C(e) {
+      u.value = e;
+    }
+    function y(e, o) {
+      e === "scaleX" && (s = o = s === -1 ? 1 : -1), e === "scaleY" && (c = o = c === -1 ? 1 : -1), u?.value?.[e]?.(o);
+    }
+    async function A() {
+      a.value = !0;
+      const e = p.uploadApi;
+      if (e && T(e)) {
+        const o = x(t.value);
+        try {
+          d({ confirmLoading: !0 });
+          const { data: r } = await e({ name: "file", file: o, filename: i });
+          f("uploadSuccess", { source: t.value, data: r }), O();
+        } finally {
+          d({ confirmLoading: !1 }), a.value = !1;
+        }
+      }
+      a.value = !1;
+    }
+    return {
+      t: h,
+      loading: a,
+      prefixCls: m,
+      src: n,
+      register: v,
+      previewSource: t,
+      handleBeforeUpload: R,
+      handleCropend: g,
+      handleReady: C,
+      handlerToolbar: y,
+      handleOk: A
+    };
+  }
+});
+export {
+  $ as default
+};
+//# sourceMappingURL=CopperModal2.vue.js.map

package/dist/src/components/basic/cropper/src/CopperModal2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopperModal2.vue.js","sources":["../../../../../../src/components/basic/cropper/src/CopperModal.vue"],"sourcesContent":["<template>\n  <BasicModal\n    v-bind=\"$attrs\"\n    :title=\"t('component.cropper.modalTitle')\"\n    width=\"50%\"\n    :can-fullscreen=\"false\"\n    :ok-text=\"t('component.cropper.okText')\"\n    @register=\"register\"\n    @ok=\"handleOk\"\n  >\n    <Spin :spinning=\"loading\">\n      <div :class=\"prefixCls\">\n        <div :class=\"`${prefixCls}-left`\">\n          <div :class=\"`${prefixCls}-cropper`\">\n            <CropperImage\n              v-if=\"src\"\n              :src=\"src\"\n              height=\"300px\"\n              :circled=\"circled\"\n              @cropend=\"handleCropend\"\n              @ready=\"handleReady\"\n            />\n          </div>\n\n          <div :class=\"`${prefixCls}-toolbar`\">\n            <Upload :file-list=\"[]\" accept=\"image/*\" :before-upload=\"handleBeforeUpload\">\n              <Tooltip :title=\"t('component.cropper.selectImage')\" placement=\"bottom\">\n                <a-button size=\"small\" type=\"primary\">\n                  <template #icon><UploadOutlined /></template>\n                </a-button>\n              </Tooltip>\n            </Upload>\n            <Space>\n              <Tooltip :title=\"t('component.cropper.btn_reset')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('reset')\"\n                >\n                  <template #icon><ReloadOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_rotate_left')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('rotate', -45)\"\n                >\n                  <template #icon><RotateLeftOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_rotate_right')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('rotate', 45)\"\n                >\n                  <template #icon><RotateRightOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_scale_x')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('scaleX')\"\n                >\n                  <template #icon><ColumnWidthOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_scale_y')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('scaleY')\"\n                >\n                  <template #icon><ColumnHeightOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_zoom_in')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('zoom', 0.1)\"\n                >\n                  <template #icon><ZoomInOutlined /></template>\n                </a-button>\n              </Tooltip>\n              <Tooltip :title=\"t('component.cropper.btn_zoom_out')\" placement=\"bottom\">\n                <a-button\n                  type=\"primary\"\n                  size=\"small\"\n                  :disabled=\"!src\"\n                  @click=\"handlerToolbar('zoom', -0.1)\"\n                >\n                  <template #icon><ZoomOutOutlined /></template>\n                </a-button>\n              </Tooltip>\n            </Space>\n          </div>\n        </div>\n        <div :class=\"`${prefixCls}-right`\">\n          <div :class=\"`${prefixCls}-preview`\">\n            <img v-if=\"previewSource\" :src=\"previewSource\" :alt=\"t('component.cropper.preview')\" />\n          </div>\n          <template v-if=\"previewSource\">\n            <div :class=\"`${prefixCls}-group`\">\n              <Avatar :src=\"previewSource\" size=\"large\" />\n              <Avatar :src=\"previewSource\" :size=\"48\" />\n              <Avatar :src=\"previewSource\" :size=\"64\" />\n              <Avatar :src=\"previewSource\" :size=\"80\" />\n            </div>\n          </template>\n        </div>\n      </div>\n    </Spin>\n  </BasicModal>\n</template>\n<script lang=\"ts\">\n  import type { CropendResult, Cropper } from './typing'\n\n  import { defineComponent, ref } from 'vue'\n  import CropperImage from './Cropper.vue'\n  import { Space, Upload, Avatar, Tooltip, Spin } from 'ant-design-vue'\n  import { BasicModal, useModalInner } from '@/components/core/Modal'\n  import { dataURLtoBlob } from '@/utils/file/base64Conver'\n  import { isFunction } from '@/utils/is'\n  import { useI18n } from '@/hooks/useI18n'\n  import {\n    UploadOutlined,\n    ReloadOutlined,\n    RotateLeftOutlined,\n    RotateRightOutlined,\n    ColumnWidthOutlined,\n    ColumnHeightOutlined,\n    ZoomInOutlined,\n    ZoomOutOutlined,\n  } from '@ant-design/icons-vue'\n\n  type apiFunParams = { file: Blob; name: string; filename: string }\n\n  const props = {\n    circled: { type: Boolean, default: true },\n    uploadApi: {\n      type: Function, // as PropType<(params: apiFunParams) => Promise<any>>\n    },\n  }\n\n  export default defineComponent({\n    name: 'CropperModal',\n    components: {\n      BasicModal,\n      Space,\n      CropperImage,\n      Upload,\n      Avatar,\n      Tooltip,\n      Spin,\n      UploadOutlined,\n      ReloadOutlined,\n      RotateLeftOutlined,\n      RotateRightOutlined,\n      ColumnWidthOutlined,\n      ColumnHeightOutlined,\n      ZoomInOutlined,\n      ZoomOutOutlined,\n    },\n    props,\n    emits: ['uploadSuccess', 'register'],\n    setup(props, { emit }) {\n      let filename = ''\n      const src = ref('')\n      const previewSource = ref('')\n      const cropper = ref<Cropper>()\n      const loading = ref(false)\n      let scaleX = 1\n      let scaleY = 1\n\n      const prefixCls = 'mom-cropper-am'\n      const [register, { closeModal, setModalProps }] = useModalInner()\n      const { t } = useI18n()\n\n      // Block upload\n      function handleBeforeUpload(file: File) {\n        const reader = new FileReader()\n        reader.readAsDataURL(file)\n        src.value = ''\n        previewSource.value = ''\n        reader.onload = function (e) {\n          src.value = (e.target?.result as string) ?? ''\n          filename = file.name\n        }\n        return false\n      }\n\n      function handleCropend({ imgBase64 }: CropendResult) {\n        previewSource.value = imgBase64\n      }\n\n      function handleReady(cropperInstance: Cropper) {\n        cropper.value = cropperInstance\n      }\n\n      function handlerToolbar(event: string, arg?: number) {\n        if (event === 'scaleX') {\n          scaleX = arg = scaleX === -1 ? 1 : -1\n        }\n        if (event === 'scaleY') {\n          scaleY = arg = scaleY === -1 ? 1 : -1\n        }\n        cropper?.value?.[event]?.(arg)\n      }\n\n      async function handleOk() {\n        loading.value = true\n        const uploadApi = props.uploadApi\n        if (uploadApi && isFunction(uploadApi)) {\n          const blob = dataURLtoBlob(previewSource.value)\n          try {\n            setModalProps({ confirmLoading: true })\n            const { data } = await uploadApi({ name: 'file', file: blob, filename })\n            emit('uploadSuccess', { source: previewSource.value, data })\n            closeModal()\n          } finally {\n            setModalProps({ confirmLoading: false })\n            loading.value = false\n          }\n        }\n        loading.value = false\n      }\n\n      return {\n        t,\n        loading,\n        prefixCls,\n        src,\n        register,\n        previewSource,\n        handleBeforeUpload,\n        handleCropend,\n        handleReady,\n        handlerToolbar,\n        handleOk,\n      }\n    },\n  })\n</script>\n\n<style lang=\"less\" scoped>\n  @prefix-cls: ~'mom-cropper-am';\n\n  .@{prefix-cls} {\n    display: flex;\n\n    &-left,\n    &-right {\n      height: 340px;\n    }\n\n    &-left {\n      width: 55%;\n    }\n\n    &-right {\n      width: 45%;\n    }\n\n    &-cropper {\n      height: 300px;\n      background: #eee;\n      background-image: linear-gradient(\n          45deg,\n          rgb(0 0 0 / 25%) 25%,\n          transparent 0,\n          transparent 75%,\n          rgb(0 0 0 / 25%) 0\n        ),\n        linear-gradient(\n          45deg,\n          rgb(0 0 0 / 25%) 25%,\n          transparent 0,\n          transparent 75%,\n          rgb(0 0 0 / 25%) 0\n        );\n      background-position:\n        0 0,\n        12px 12px;\n      background-size: 24px 24px;\n    }\n\n    &-toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-top: 10px;\n    }\n\n    &-preview {\n      width: 220px;\n      height: 220px;\n      margin: 0 auto;\n      overflow: hidden;\n      // border: 1px solid @border-color-base;\n      border-width: 1px;\n      border-radius: 50%;\n\n      img {\n        width: 100%;\n        height: 100%;\n      }\n    }\n\n    &-group {\n      display: flex;\n      align-items: center;\n      justify-content: space-around;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid #d9d9d9;\n    }\n  }\n</style>\n"],"names":["props","_sfc_main","defineComponent","BasicModal","Space","CropperImage","Upload","Avatar","Tooltip","Spin","UploadOutlined","ReloadOutlined","RotateLeftOutlined","RotateRightOutlined","ColumnWidthOutlined","ColumnHeightOutlined","ZoomInOutlined","ZoomOutOutlined","emit","filename","src","ref","previewSource","cropper","loading","scaleX","scaleY","prefixCls","register","closeModal","setModalProps","useModalInner","t","useI18n","handleBeforeUpload","file","reader","e","handleCropend","imgBase64","handleReady","cropperInstance","handlerToolbar","event","arg","handleOk","uploadApi","isFunction","blob","dataURLtoBlob","data"],"mappings":";;;;;;;;;AAkJE,MAAMA,IAAQ;AAAA,EACZ,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EACnC,WAAW;AAAA,IACT,MAAM;AAAA;AAAA,EAAA;AAEV,GAEAC,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA;AAAA,EAEF,OAAAjB;AAAA,EACA,OAAO,CAAC,iBAAiB,UAAU;AAAA,EACnC,MAAMA,GAAO,EAAE,MAAAkB,KAAQ;AACrB,QAAIC,IAAW;AACf,UAAMC,IAAMC,EAAI,EAAE,GACZC,IAAgBD,EAAI,EAAE,GACtBE,IAAUF,EAAA,GACVG,IAAUH,EAAI,EAAK;AACzB,QAAII,IAAS,GACTC,IAAS;AAEb,UAAMC,IAAY,kBACZ,CAACC,GAAU,EAAE,YAAAC,GAAY,eAAAC,EAAA,CAAe,IAAIC,EAAA,GAC5C,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAGd,aAASC,EAAmBC,GAAY;AACtC,YAAMC,IAAS,IAAI,WAAA;AACnB,aAAAA,EAAO,cAAcD,CAAI,GACzBf,EAAI,QAAQ,IACZE,EAAc,QAAQ,IACtBc,EAAO,SAAS,SAAUC,GAAG;AAC3B,QAAAjB,EAAI,QAASiB,EAAE,QAAQ,UAAqB,IAC5ClB,IAAWgB,EAAK;AAAA,MAClB,GACO;AAAA,IACT;AAEA,aAASG,EAAc,EAAE,WAAAC,KAA4B;AACnD,MAAAjB,EAAc,QAAQiB;AAAA,IACxB;AAEA,aAASC,EAAYC,GAA0B;AAC7C,MAAAlB,EAAQ,QAAQkB;AAAA,IAClB;AAEA,aAASC,EAAeC,GAAeC,GAAc;AACnD,MAAID,MAAU,aACZlB,IAASmB,IAAMnB,MAAW,KAAK,IAAI,KAEjCkB,MAAU,aACZjB,IAASkB,IAAMlB,MAAW,KAAK,IAAI,KAErCH,GAAS,QAAQoB,CAAK,IAAIC,CAAG;AAAA,IAC/B;AAEA,mBAAeC,IAAW;AACxB,MAAArB,EAAQ,QAAQ;AAChB,YAAMsB,IAAY9C,EAAM;AACxB,UAAI8C,KAAaC,EAAWD,CAAS,GAAG;AACtC,cAAME,IAAOC,EAAc3B,EAAc,KAAK;AAC9C,YAAI;AACF,UAAAQ,EAAc,EAAE,gBAAgB,IAAM;AACtC,gBAAM,EAAE,MAAAoB,MAAS,MAAMJ,EAAU,EAAE,MAAM,QAAQ,MAAME,GAAM,UAAA7B,GAAU;AACvE,UAAAD,EAAK,iBAAiB,EAAE,QAAQI,EAAc,OAAO,MAAA4B,GAAM,GAC3DrB,EAAA;AAAA,QACF,UAAA;AACE,UAAAC,EAAc,EAAE,gBAAgB,IAAO,GACvCN,EAAQ,QAAQ;AAAA,QAClB;AAAA,MACF;AACA,MAAAA,EAAQ,QAAQ;AAAA,IAClB;AAEA,WAAO;AAAA,MACL,GAAAQ;AAAA,MACA,SAAAR;AAAA,MACA,WAAAG;AAAA,MACA,KAAAP;AAAA,MACA,UAAAQ;AAAA,MACA,eAAAN;AAAA,MACA,oBAAAY;AAAA,MACA,eAAAI;AAAA,MACA,aAAAE;AAAA,MACA,gBAAAE;AAAA,MACA,UAAAG;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/src/components/basic/cropper/src/Cropper.vue.js

@@ -0,0 +1,26 @@
+import o from "./Cropper2.vue.js";
+import { openBlock as s, createElementBlock as t, normalizeStyle as r, normalizeClass as a, withDirectives as i, createElementVNode as l, vShow as n } from "vue";
+/* empty css             */
+import m from "../../../../_virtual/_plugin-vue_export-helper.js";
+const p = ["src", "alt", "crossorigin"];
+function c(e, d, f, g, y, u) {
+  return s(), t("div", {
+    class: a(e.getClass),
+    style: r(e.getWrapperStyle)
+  }, [
+    i(l("img", {
+      ref: "imgElRef",
+      src: e.src,
+      alt: e.alt,
+      crossorigin: e.crossorigin,
+      style: r(e.getImageStyle)
+    }, null, 12, p), [
+      [n, e.isReady]
+    ])
+  ], 6);
+}
+const $ = /* @__PURE__ */ m(o, [["render", c], ["__scopeId", "data-v-262736ab"]]);
+export {
+  $ as default
+};
+//# sourceMappingURL=Cropper.vue.js.map

package/dist/src/components/basic/cropper/src/Cropper.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cropper.vue.js","sources":["../../../../../../src/components/basic/cropper/src/Cropper.vue"],"sourcesContent":["<template>\n  <div :class=\"getClass\" :style=\"getWrapperStyle\">\n    <img\n      v-show=\"isReady\"\n      ref=\"imgElRef\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :crossorigin=\"crossorigin\"\n      :style=\"getImageStyle\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\n  import type { CSSProperties, StyleValue } from 'vue'\n  import { defineComponent, onMounted, ref, unref, computed, onUnmounted } from 'vue'\n  import Cropper from 'cropperjs'\n  import 'cropperjs/dist/cropper.css'\n  // import { useDesign } from '/@/hooks/web/useDesign';\n  import { useDebounceFn } from '@vueuse/core'\n\n  type Options = Cropper.Options\n\n  const defaultOptions: Options = {\n    aspectRatio: 1,\n    zoomable: true,\n    zoomOnTouch: true,\n    zoomOnWheel: true,\n    cropBoxMovable: true,\n    cropBoxResizable: true,\n    toggleDragModeOnDblclick: true,\n    autoCrop: true,\n    background: true,\n    highlight: true,\n    center: true,\n    responsive: true,\n    restore: true,\n    checkCrossOrigin: true,\n    checkOrientation: true,\n    scalable: true,\n    modal: true,\n    guides: true,\n    movable: true,\n    rotatable: true,\n  }\n\n  const props = {\n    src: { type: String, required: true },\n    alt: { type: String },\n    circled: { type: Boolean, default: false },\n    realTimePreview: { type: Boolean, default: true },\n    height: { type: [String, Number], default: '360px' },\n    crossorigin: {\n      type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,\n      default: undefined,\n    },\n    imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },\n    options: { type: Object as PropType<Options>, default: () => ({}) },\n  }\n\n  export default defineComponent({\n    name: 'CropperImage',\n    props,\n    emits: ['cropend', 'ready', 'cropendError'],\n    setup(props, { attrs, emit }) {\n      const imgElRef = ref<ElRef<HTMLImageElement>>()\n      const cropper = ref<Nullable<Cropper>>()\n      const isReady = ref(false)\n\n      // const { prefixCls } = useDesign('cropper-image')\n      const prefixCls = 'mom-cropper-image'\n      const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)\n\n      const getImageStyle = computed((): StyleValue => {\n        return {\n          height: props.height,\n          maxWidth: '100%',\n          ...props.imageStyle,\n        }\n      })\n\n      const getClass = computed(() => {\n        return [\n          prefixCls,\n          attrs.class,\n          {\n            [`${prefixCls}--circled`]: props.circled,\n          },\n        ]\n      })\n\n      const getWrapperStyle = computed((): StyleValue => {\n        return { height: `${`${props.height}`.replace(/px/, '')}px` }\n      })\n\n      onMounted(init)\n\n      onUnmounted(() => {\n        cropper.value?.destroy()\n      })\n\n      async function init() {\n        const imgEl = unref(imgElRef)\n        if (!imgEl) {\n          return\n        }\n        cropper.value = new Cropper(imgEl, {\n          ...defaultOptions,\n          ready: () => {\n            isReady.value = true\n            realTimeCroppered()\n            emit('ready', cropper.value)\n          },\n          crop() {\n            debounceRealTimeCroppered()\n          },\n          zoom() {\n            debounceRealTimeCroppered()\n          },\n          cropmove() {\n            debounceRealTimeCroppered()\n          },\n          ...props.options,\n        })\n      }\n\n      // Real-time display preview\n      function realTimeCroppered() {\n        props.realTimePreview && croppered()\n      }\n\n      // event: return base64 and width and height information after cropping\n      function croppered() {\n        if (!cropper.value) {\n          return\n        }\n        const imgInfo = cropper.value.getData()\n        const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()\n        canvas.toBlob(blob => {\n          if (!blob) {\n            return\n          }\n          const fileReader: FileReader = new FileReader()\n          fileReader.readAsDataURL(blob)\n          fileReader.onloadend = e => {\n            emit('cropend', {\n              imgBase64: e.target?.result ?? '',\n              imgInfo,\n            })\n          }\n          fileReader.onerror = () => {\n            emit('cropendError')\n          }\n        }, 'image/png')\n      }\n\n      // Get a circular picture canvas\n      function getRoundedCanvas() {\n        const sourceCanvas = cropper.value!.getCroppedCanvas()\n        const canvas = document.createElement('canvas')\n        const context = canvas.getContext('2d')!\n        const width = sourceCanvas.width\n        const height = sourceCanvas.height\n        canvas.width = width\n        canvas.height = height\n        context.imageSmoothingEnabled = true\n        context.drawImage(sourceCanvas, 0, 0, width, height)\n        context.globalCompositeOperation = 'destination-in'\n        context.beginPath()\n        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true)\n        context.fill()\n        return canvas\n      }\n\n      return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered }\n    },\n  })\n</script>\n<style lang=\"less\" scoped>\n  @prefix-cls: ~'mom-cropper-image';\n\n  .@{prefix-cls} {\n    &--circled {\n      .cropper-view-box,\n      .cropper-face {\n        border-radius: 50%;\n      }\n    }\n  }\n</style>\n"],"names":["_sfc_render","_ctx","getClass","$setup","$data","$options","_openBlock","_createElementBlock","getWrapperStyle","_normalizeClass","_withDirectives","_createElementVNode","alt","_normalizeStyle","_hoisted_1"],"mappings":";;;;;AACa,SAAAA,EAAAC,GAAEC,GAAAA,GAAQC,GAAAC,GAAAC,GAAA;AAAQ,SAAAC,EAAA,GAAAC,EAAEC,OAAe;AAAA,IAAA,OAAAC,EAAAR,EAAA,QAAA;AAAA,aAC5CA,EAAA,eAOE;AAAA,EAAA,GAAA;AAAA,IAJSS,EAAAC,EAAA,OAAA;AAAA,MACR,KAAKC;AAAAA,MACL,KAAAX,EAAA;AAAA,MACA,KAAKA,EAAA;AAAA,MAAA,aAAAA,EAAA;AAAA,MALS,OAAAY,EAAAZ,EAAA,aAAA;AAAA,IAAA,GAAA,MAAA,IAAAa,CAAA,GAAA;AAAA;;;;;"}

package/dist/src/components/basic/cropper/src/Cropper2.vue.js

@@ -0,0 +1,107 @@
+import { defineComponent as O, ref as l, computed as s, onMounted as R, onUnmounted as S, unref as w } from "vue";
+import B from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import { useDebounceFn as E } from "@vueuse/core";
+const z = {
+  aspectRatio: 1,
+  zoomable: !0,
+  zoomOnTouch: !0,
+  zoomOnWheel: !0,
+  cropBoxMovable: !0,
+  cropBoxResizable: !0,
+  toggleDragModeOnDblclick: !0,
+  autoCrop: !0,
+  background: !0,
+  highlight: !0,
+  center: !0,
+  responsive: !0,
+  restore: !0,
+  checkCrossOrigin: !0,
+  checkOrientation: !0,
+  scalable: !0,
+  modal: !0,
+  guides: !0,
+  movable: !0,
+  rotatable: !0
+}, D = {
+  src: { type: String, required: !0 },
+  alt: { type: String },
+  circled: { type: Boolean, default: !1 },
+  realTimePreview: { type: Boolean, default: !0 },
+  height: { type: [String, Number], default: "360px" },
+  crossorigin: {
+    type: String,
+    default: void 0
+  },
+  imageStyle: { type: Object, default: () => ({}) },
+  options: { type: Object, default: () => ({}) }
+}, P = O({
+  name: "CropperImage",
+  props: D,
+  emits: ["cropend", "ready", "cropendError"],
+  setup(o, { attrs: f, emit: c }) {
+    const d = l(), n = l(), p = l(!1), g = "mom-cropper-image", u = E(m, 80), v = s(() => ({
+      height: o.height,
+      maxWidth: "100%",
+      ...o.imageStyle
+    })), y = s(() => [
+      g,
+      f.class,
+      {
+        [`${g}--circled`]: o.circled
+      }
+    ]), C = s(() => ({ height: `${`${o.height}`.replace(/px/, "")}px` }));
+    R(b), S(() => {
+      n.value?.destroy();
+    });
+    async function b() {
+      const t = w(d);
+      t && (n.value = new B(t, {
+        ...z,
+        ready: () => {
+          p.value = !0, m(), c("ready", n.value);
+        },
+        crop() {
+          u();
+        },
+        zoom() {
+          u();
+        },
+        cropmove() {
+          u();
+        },
+        ...o.options
+      }));
+    }
+    function m() {
+      o.realTimePreview && h();
+    }
+    function h() {
+      if (!n.value)
+        return;
+      const t = n.value.getData();
+      (o.circled ? x() : n.value.getCroppedCanvas()).toBlob((e) => {
+        if (!e)
+          return;
+        const r = new FileReader();
+        r.readAsDataURL(e), r.onloadend = (a) => {
+          c("cropend", {
+            imgBase64: a.target?.result ?? "",
+            imgInfo: t
+          });
+        }, r.onerror = () => {
+          c("cropendError");
+        };
+      }, "image/png");
+    }
+    function x() {
+      const t = n.value.getCroppedCanvas(), i = document.createElement("canvas"), e = i.getContext("2d"), r = t.width, a = t.height;
+      return i.width = r, i.height = a, e.imageSmoothingEnabled = !0, e.drawImage(t, 0, 0, r, a), e.globalCompositeOperation = "destination-in", e.beginPath(), e.arc(r / 2, a / 2, Math.min(r, a) / 2, 0, 2 * Math.PI, !0), e.fill(), i;
+    }
+    return { getClass: y, imgElRef: d, getWrapperStyle: C, getImageStyle: v, isReady: p, croppered: h };
+  }
+});
+export {
+  P as default
+};
+//# sourceMappingURL=Cropper2.vue.js.map

package/dist/src/components/basic/cropper/src/Cropper2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cropper2.vue.js","sources":["../../../../../../src/components/basic/cropper/src/Cropper.vue"],"sourcesContent":["<template>\n  <div :class=\"getClass\" :style=\"getWrapperStyle\">\n    <img\n      v-show=\"isReady\"\n      ref=\"imgElRef\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :crossorigin=\"crossorigin\"\n      :style=\"getImageStyle\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\n  import type { CSSProperties, StyleValue } from 'vue'\n  import { defineComponent, onMounted, ref, unref, computed, onUnmounted } from 'vue'\n  import Cropper from 'cropperjs'\n  import 'cropperjs/dist/cropper.css'\n  // import { useDesign } from '/@/hooks/web/useDesign';\n  import { useDebounceFn } from '@vueuse/core'\n\n  type Options = Cropper.Options\n\n  const defaultOptions: Options = {\n    aspectRatio: 1,\n    zoomable: true,\n    zoomOnTouch: true,\n    zoomOnWheel: true,\n    cropBoxMovable: true,\n    cropBoxResizable: true,\n    toggleDragModeOnDblclick: true,\n    autoCrop: true,\n    background: true,\n    highlight: true,\n    center: true,\n    responsive: true,\n    restore: true,\n    checkCrossOrigin: true,\n    checkOrientation: true,\n    scalable: true,\n    modal: true,\n    guides: true,\n    movable: true,\n    rotatable: true,\n  }\n\n  const props = {\n    src: { type: String, required: true },\n    alt: { type: String },\n    circled: { type: Boolean, default: false },\n    realTimePreview: { type: Boolean, default: true },\n    height: { type: [String, Number], default: '360px' },\n    crossorigin: {\n      type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,\n      default: undefined,\n    },\n    imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },\n    options: { type: Object as PropType<Options>, default: () => ({}) },\n  }\n\n  export default defineComponent({\n    name: 'CropperImage',\n    props,\n    emits: ['cropend', 'ready', 'cropendError'],\n    setup(props, { attrs, emit }) {\n      const imgElRef = ref<ElRef<HTMLImageElement>>()\n      const cropper = ref<Nullable<Cropper>>()\n      const isReady = ref(false)\n\n      // const { prefixCls } = useDesign('cropper-image')\n      const prefixCls = 'mom-cropper-image'\n      const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)\n\n      const getImageStyle = computed((): StyleValue => {\n        return {\n          height: props.height,\n          maxWidth: '100%',\n          ...props.imageStyle,\n        }\n      })\n\n      const getClass = computed(() => {\n        return [\n          prefixCls,\n          attrs.class,\n          {\n            [`${prefixCls}--circled`]: props.circled,\n          },\n        ]\n      })\n\n      const getWrapperStyle = computed((): StyleValue => {\n        return { height: `${`${props.height}`.replace(/px/, '')}px` }\n      })\n\n      onMounted(init)\n\n      onUnmounted(() => {\n        cropper.value?.destroy()\n      })\n\n      async function init() {\n        const imgEl = unref(imgElRef)\n        if (!imgEl) {\n          return\n        }\n        cropper.value = new Cropper(imgEl, {\n          ...defaultOptions,\n          ready: () => {\n            isReady.value = true\n            realTimeCroppered()\n            emit('ready', cropper.value)\n          },\n          crop() {\n            debounceRealTimeCroppered()\n          },\n          zoom() {\n            debounceRealTimeCroppered()\n          },\n          cropmove() {\n            debounceRealTimeCroppered()\n          },\n          ...props.options,\n        })\n      }\n\n      // Real-time display preview\n      function realTimeCroppered() {\n        props.realTimePreview && croppered()\n      }\n\n      // event: return base64 and width and height information after cropping\n      function croppered() {\n        if (!cropper.value) {\n          return\n        }\n        const imgInfo = cropper.value.getData()\n        const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()\n        canvas.toBlob(blob => {\n          if (!blob) {\n            return\n          }\n          const fileReader: FileReader = new FileReader()\n          fileReader.readAsDataURL(blob)\n          fileReader.onloadend = e => {\n            emit('cropend', {\n              imgBase64: e.target?.result ?? '',\n              imgInfo,\n            })\n          }\n          fileReader.onerror = () => {\n            emit('cropendError')\n          }\n        }, 'image/png')\n      }\n\n      // Get a circular picture canvas\n      function getRoundedCanvas() {\n        const sourceCanvas = cropper.value!.getCroppedCanvas()\n        const canvas = document.createElement('canvas')\n        const context = canvas.getContext('2d')!\n        const width = sourceCanvas.width\n        const height = sourceCanvas.height\n        canvas.width = width\n        canvas.height = height\n        context.imageSmoothingEnabled = true\n        context.drawImage(sourceCanvas, 0, 0, width, height)\n        context.globalCompositeOperation = 'destination-in'\n        context.beginPath()\n        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true)\n        context.fill()\n        return canvas\n      }\n\n      return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered }\n    },\n  })\n</script>\n<style lang=\"less\" scoped>\n  @prefix-cls: ~'mom-cropper-image';\n\n  .@{prefix-cls} {\n    &--circled {\n      .cropper-view-box,\n      .cropper-face {\n        border-radius: 50%;\n      }\n    }\n  }\n</style>\n"],"names":["defaultOptions","props","_sfc_main","defineComponent","attrs","emit","imgElRef","ref","cropper","isReady","prefixCls","debounceRealTimeCroppered","useDebounceFn","realTimeCroppered","getImageStyle","computed","getClass","getWrapperStyle","onMounted","init","onUnmounted","imgEl","unref","Cropper","croppered","imgInfo","getRoundedCanvas","blob","fileReader","e","sourceCanvas","canvas","context","width","height"],"mappings":"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"}

package/dist/src/components/basic/cropper/src/CropperAvatar.vue.js

@@ -0,0 +1,52 @@
+import g from "./CropperAvatar2.vue.js";
+import { resolveComponent as l, openBlock as r, createElementBlock as n, normalizeStyle as o, normalizeClass as s, createElementVNode as i, createVNode as a, createCommentVNode as d, createBlock as C, mergeProps as f, withCtx as y, createTextVNode as k, toDisplayString as S } from "vue";
+/* empty css                   */
+import b from "../../../../_virtual/_plugin-vue_export-helper.js";
+const V = ["src"];
+function $(e, t, v, I, M, U) {
+  const p = l("CloudUploadOutlined"), u = l("a-button"), m = l("CopperModal");
+  return r(), n("div", {
+    class: s(e.getClass),
+    style: o(e.getStyle)
+  }, [
+    i("div", {
+      class: s(`${e.prefixCls}-image-wrapper`),
+      style: o(e.getImageWrapperStyle),
+      onClick: t[0] || (t[0] = (...c) => e.openModal && e.openModal(...c))
+    }, [
+      i("div", {
+        class: s(`${e.prefixCls}-image-mask`),
+        style: o(e.getImageWrapperStyle)
+      }, [
+        a(p, {
+          style: o([{ color: "aliceblue", "font-size": "100px" }, e.getImageWrapperStyle])
+        }, null, 8, ["style"])
+      ], 6),
+      e.sourceValue ? (r(), n("img", {
+        key: 0,
+        src: e.sourceValue
+      }, null, 8, V)) : d("", !0)
+    ], 6),
+    e.showBtn ? (r(), C(u, f({
+      key: 0,
+      class: `${e.prefixCls}-upload-btn mt-4`
+    }, e.btnProps, { onClick: e.openModal }), {
+      default: y(() => [
+        a(p),
+        k(" " + S(e.btnText ? e.btnText : e.t("component.cropper.selectImage")), 1)
+      ]),
+      _: 1
+    }, 16, ["class", "onClick"])) : d("", !0),
+    a(m, {
+      "upload-api": e.uploadApi,
+      src: e.sourceValue,
+      onRegister: e.register,
+      onUploadSuccess: e.handleUploadSuccess
+    }, null, 8, ["upload-api", "src", "onRegister", "onUploadSuccess"])
+  ], 6);
+}
+const z = /* @__PURE__ */ b(g, [["render", $], ["__scopeId", "data-v-529ecc3c"]]);
+export {
+  z as default
+};
+//# sourceMappingURL=CropperAvatar.vue.js.map

package/dist/src/components/basic/cropper/src/CropperAvatar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropperAvatar.vue.js","sources":["../../../../../../src/components/basic/cropper/src/CropperAvatar.vue"],"sourcesContent":["<template>\n  <div :class=\"getClass\" :style=\"getStyle\">\n    <div :class=\"`${prefixCls}-image-wrapper`\" :style=\"getImageWrapperStyle\" @click=\"openModal\">\n      <div :class=\"`${prefixCls}-image-mask`\" :style=\"getImageWrapperStyle\">\n        <CloudUploadOutlined\n          style=\"color: aliceblue; font-size: 100px\"\n          :style=\"getImageWrapperStyle\"\n        />\n      </div>\n      <img v-if=\"sourceValue\" :src=\"sourceValue\" />\n    </div>\n    <a-button\n      v-if=\"showBtn\"\n      :class=\"`${prefixCls}-upload-btn mt-4`\"\n      v-bind=\"btnProps\"\n      @click=\"openModal\"\n    >\n      <CloudUploadOutlined />\n      {{ btnText ? btnText : t('component.cropper.selectImage') }}\n    </a-button>\n\n    <CopperModal\n      :upload-api=\"uploadApi\"\n      :src=\"sourceValue\"\n      @register=\"register\"\n      @upload-success=\"handleUploadSuccess\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\n  import {\n    defineComponent,\n    computed,\n    type CSSProperties,\n    type StyleValue,\n    unref,\n    ref,\n    watchEffect,\n    watch,\n    type PropType,\n  } from 'vue'\n  import { message } from 'ant-design-vue'\n  import CopperModal from './CopperModal.vue'\n  import { useModal } from '@/components/core/Modal'\n  import { useI18n } from '@/hooks/useI18n'\n  import type { ButtonProps } from '@/components/basic/button'\n  import { CloudUploadOutlined } from '@ant-design/icons-vue'\n\n  const props = {\n    width: { type: [String, Number], default: '200px' },\n    value: { type: String },\n    showBtn: { type: Boolean, default: true },\n    btnProps: { type: Object as PropType<ButtonProps> },\n    btnText: { type: String, default: '' },\n    uploadApi: { type: Function },\n    // uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }\n  }\n\n  export default defineComponent({\n    name: 'CropperAvatar',\n    components: { CopperModal, CloudUploadOutlined },\n    props,\n    emits: ['update:value', 'change'],\n    setup(props, { emit, expose }) {\n      const sourceValue = ref(props.value || '')\n      const prefixCls = 'mom-cropper-avatar'\n      const [register, { openModal, closeModal }] = useModal()\n      const { t } = useI18n()\n\n      const getClass = computed(() => [prefixCls])\n\n      const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`)\n\n      const getIconWidth = computed(() => `${parseInt(`${props.width}`.replace(/px/, '')) / 2}px`)\n\n      const getStyle = computed((): StyleValue => ({ width: unref(getWidth) }))\n\n      const getImageWrapperStyle = computed(\n        (): StyleValue => ({ width: unref(getWidth), height: unref(getWidth) }),\n      )\n\n      watchEffect(() => {\n        sourceValue.value = props.value || ''\n      })\n\n      watch(\n        () => sourceValue.value,\n        (v: string) => {\n          emit('update:value', v)\n        },\n      )\n\n      /**\n       * 上传成功后事件\n       * @param param0 source: base64图片, data: 接口返回的data\n       */\n      function handleUploadSuccess({ source, data }) {\n        sourceValue.value = source\n        emit('change', source, data)\n        message.success(t('component.cropper.uploadSuccess'))\n      }\n\n      expose({ openModal: openModal.bind(null, true), closeModal })\n\n      return {\n        t,\n        prefixCls,\n        register,\n        openModal: openModal as any,\n        getIconWidth,\n        sourceValue,\n        getClass,\n        getImageWrapperStyle,\n        getStyle,\n        handleUploadSuccess,\n      }\n    },\n  })\n</script>\n\n<style lang=\"less\" scoped>\n  @prefix-cls: ~'mom-cropper-avatar';\n\n  .@{prefix-cls} {\n    display: inline-block;\n    text-align: center;\n\n    &-image-wrapper {\n      overflow: hidden;\n      // background: @component-background;\n      border: 1px solid #d9d9d9;\n      border-radius: 50%;\n      cursor: pointer;\n\n      img {\n        width: 100%;\n      }\n    }\n\n    &-image-mask {\n      position: absolute;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.4s;\n      border-radius: inherit;\n      opacity: 0;\n      background: rgb(0 0 0 / 40%);\n      cursor: pointer;\n\n      ::v-deep(svg) {\n        margin: auto;\n        margin-top: 22%;\n      }\n    }\n\n    &-image-mask:hover {\n      opacity: 40;\n    }\n\n    &-upload-btn {\n      margin: 10px auto;\n    }\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_normalizeStyle","getImageWrapperStyle","_cache","args","sourceValue","showBtn","prefixCls","_component_a_button","_mergeProps","btnProps","_withCtx","_createVNode","_component_CloudUploadOutlined","_createCommentVNode","uploadApi","register"],"mappings":";;;;;;6DACEA,EA0BM,aAAA;SA1BuBC,EAAA,GAAAC,EAAU,OAAA;AAAA,IAAA,OAAAC,EAAAC,EAAA,QAAA;AAAA,IACrC,OAAAC,EAQMD,EAAA,QAAA;AAAA,EAAA,GAAA;AAAA,MAR2C,OAAEE;AAAAA,MAAuB,OAAKH,EAAA,GAAAC,EAAA,SAAA,gBAAE;AAAA,MAAA,OAAAC,EAAAD,EAAA,oBAAA;AAAA,MAC/E,SAAAG,EAAA,CAAA,MAKMA,EAAA,CAAA,IAAA,IAAAC,MAAAJ,EAAA,aAAAA,EAAA,UAAA,GAAAI,CAAA;AAAA,IAAA,GAAA;AAAA,QALwC,OAAEF;AAAAA,QAAAA,OAAAA,EAAAA,GAAAA,EAAAA,SAAAA,aAAAA;AAAAA,QAC9C,OAAAD,EAGED,EAAA,oBAAA;AAAA,MAAA,GAAA;AAAA;;WAEOK,MAAAA,GAAAA,CAAAA,OAAW,CAAA;AAAA,MAAA,GAAA,CAAA;AAAA,4BAAQA,EAAW,OAAA;AAAA,QAAA,KAAA;AAAA;wBAGnCC,EAAO,IAAA,EAAA;AAAA,IAAA,GAAA,CAAA;AAAA,sBACFC,EAASC,GAAAC,EAAA;AAAA,MAAA,KACZC;AAAAA,MAAAA,OAAAA,GAAAA,EAAAA,SAGe;AAAA,IAAA,GAAAV,EAAvB,UAAuB,EAAA,SAAAA,EAAA,UAAA,CAAA,GAAA;AAAA,MAAA,SAAAW,EAAA,MACvB;AAAA,QAAAC,EAAAC,CAAA;AAAA;;;OAGF,IAAA,CAAA,SAKE,SAAA,CAAA,KAJCC,EAAYC,IAAAA,EAAS;AAAA,IAAAH,EAChBP,GAAW;AAAA,MAChB,cAAUW,EAAAA;AAAAA,MACV,KAAAhB,EAAA;AAAA,MAAA,YAAAA,EAAA;AAAA;;;;;"}

package/dist/src/components/basic/cropper/src/CropperAvatar2.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as x, ref as y, computed as e, unref as n, watchEffect as S, watch as C } from "vue";
+import { message as b } from "ant-design-vue";
+import M from "./CopperModal.vue.js";
+import "../../../core/Modal/src/BasicModal2.vue.js";
+/* empty css                                      */
+import { useModal as I } from "../../../core/Modal/src/hooks/useModal.js";
+import { useI18n as $ } from "../../../../hooks/useI18n.js";
+import { CloudUploadOutlined as W } from "@ant-design/icons-vue";
+const A = {
+  width: { type: [String, Number], default: "200px" },
+  value: { type: String },
+  showBtn: { type: Boolean, default: !0 },
+  btnProps: { type: Object },
+  btnText: { type: String, default: "" },
+  uploadApi: { type: Function }
+  // uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }
+}, P = x({
+  name: "CropperAvatar",
+  components: { CopperModal: M, CloudUploadOutlined: W },
+  props: A,
+  emits: ["update:value", "change"],
+  setup(t, { emit: r, expose: s }) {
+    const o = y(t.value || ""), c = "mom-cropper-avatar", [d, { openModal: l, closeModal: i }] = I(), { t: u } = $(), m = e(() => [c]), p = e(() => `${`${t.width}`.replace(/px/, "")}px`), f = e(() => `${parseInt(`${t.width}`.replace(/px/, "")) / 2}px`), h = e(() => ({ width: n(p) })), g = e(
+      () => ({ width: n(p), height: n(p) })
+    );
+    S(() => {
+      o.value = t.value || "";
+    }), C(
+      () => o.value,
+      (a) => {
+        r("update:value", a);
+      }
+    );
+    function v({ source: a, data: w }) {
+      o.value = a, r("change", a, w), b.success(u("component.cropper.uploadSuccess"));
+    }
+    return s({ openModal: l.bind(null, !0), closeModal: i }), {
+      t: u,
+      prefixCls: c,
+      register: d,
+      openModal: l,
+      getIconWidth: f,
+      sourceValue: o,
+      getClass: m,
+      getImageWrapperStyle: g,
+      getStyle: h,
+      handleUploadSuccess: v
+    };
+  }
+});
+export {
+  P as default
+};
+//# sourceMappingURL=CropperAvatar2.vue.js.map

package/dist/src/components/basic/cropper/src/CropperAvatar2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropperAvatar2.vue.js","sources":["../../../../../../src/components/basic/cropper/src/CropperAvatar.vue"],"sourcesContent":["<template>\n  <div :class=\"getClass\" :style=\"getStyle\">\n    <div :class=\"`${prefixCls}-image-wrapper`\" :style=\"getImageWrapperStyle\" @click=\"openModal\">\n      <div :class=\"`${prefixCls}-image-mask`\" :style=\"getImageWrapperStyle\">\n        <CloudUploadOutlined\n          style=\"color: aliceblue; font-size: 100px\"\n          :style=\"getImageWrapperStyle\"\n        />\n      </div>\n      <img v-if=\"sourceValue\" :src=\"sourceValue\" />\n    </div>\n    <a-button\n      v-if=\"showBtn\"\n      :class=\"`${prefixCls}-upload-btn mt-4`\"\n      v-bind=\"btnProps\"\n      @click=\"openModal\"\n    >\n      <CloudUploadOutlined />\n      {{ btnText ? btnText : t('component.cropper.selectImage') }}\n    </a-button>\n\n    <CopperModal\n      :upload-api=\"uploadApi\"\n      :src=\"sourceValue\"\n      @register=\"register\"\n      @upload-success=\"handleUploadSuccess\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\n  import {\n    defineComponent,\n    computed,\n    type CSSProperties,\n    type StyleValue,\n    unref,\n    ref,\n    watchEffect,\n    watch,\n    type PropType,\n  } from 'vue'\n  import { message } from 'ant-design-vue'\n  import CopperModal from './CopperModal.vue'\n  import { useModal } from '@/components/core/Modal'\n  import { useI18n } from '@/hooks/useI18n'\n  import type { ButtonProps } from '@/components/basic/button'\n  import { CloudUploadOutlined } from '@ant-design/icons-vue'\n\n  const props = {\n    width: { type: [String, Number], default: '200px' },\n    value: { type: String },\n    showBtn: { type: Boolean, default: true },\n    btnProps: { type: Object as PropType<ButtonProps> },\n    btnText: { type: String, default: '' },\n    uploadApi: { type: Function },\n    // uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }\n  }\n\n  export default defineComponent({\n    name: 'CropperAvatar',\n    components: { CopperModal, CloudUploadOutlined },\n    props,\n    emits: ['update:value', 'change'],\n    setup(props, { emit, expose }) {\n      const sourceValue = ref(props.value || '')\n      const prefixCls = 'mom-cropper-avatar'\n      const [register, { openModal, closeModal }] = useModal()\n      const { t } = useI18n()\n\n      const getClass = computed(() => [prefixCls])\n\n      const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`)\n\n      const getIconWidth = computed(() => `${parseInt(`${props.width}`.replace(/px/, '')) / 2}px`)\n\n      const getStyle = computed((): StyleValue => ({ width: unref(getWidth) }))\n\n      const getImageWrapperStyle = computed(\n        (): StyleValue => ({ width: unref(getWidth), height: unref(getWidth) }),\n      )\n\n      watchEffect(() => {\n        sourceValue.value = props.value || ''\n      })\n\n      watch(\n        () => sourceValue.value,\n        (v: string) => {\n          emit('update:value', v)\n        },\n      )\n\n      /**\n       * 上传成功后事件\n       * @param param0 source: base64图片, data: 接口返回的data\n       */\n      function handleUploadSuccess({ source, data }) {\n        sourceValue.value = source\n        emit('change', source, data)\n        message.success(t('component.cropper.uploadSuccess'))\n      }\n\n      expose({ openModal: openModal.bind(null, true), closeModal })\n\n      return {\n        t,\n        prefixCls,\n        register,\n        openModal: openModal as any,\n        getIconWidth,\n        sourceValue,\n        getClass,\n        getImageWrapperStyle,\n        getStyle,\n        handleUploadSuccess,\n      }\n    },\n  })\n</script>\n\n<style lang=\"less\" scoped>\n  @prefix-cls: ~'mom-cropper-avatar';\n\n  .@{prefix-cls} {\n    display: inline-block;\n    text-align: center;\n\n    &-image-wrapper {\n      overflow: hidden;\n      // background: @component-background;\n      border: 1px solid #d9d9d9;\n      border-radius: 50%;\n      cursor: pointer;\n\n      img {\n        width: 100%;\n      }\n    }\n\n    &-image-mask {\n      position: absolute;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.4s;\n      border-radius: inherit;\n      opacity: 0;\n      background: rgb(0 0 0 / 40%);\n      cursor: pointer;\n\n      ::v-deep(svg) {\n        margin: auto;\n        margin-top: 22%;\n      }\n    }\n\n    &-image-mask:hover {\n      opacity: 40;\n    }\n\n    &-upload-btn {\n      margin: 10px auto;\n    }\n  }\n</style>\n"],"names":["props","_sfc_main","defineComponent","CopperModal","CloudUploadOutlined","emit","expose","sourceValue","ref","prefixCls","register","openModal","closeModal","useModal","t","useI18n","getClass","computed","getWidth","getIconWidth","getStyle","unref","getImageWrapperStyle","watchEffect","watch","v","handleUploadSuccess","source","data","message"],"mappings":";;;;;;;;AAgDE,MAAMA,IAAQ;AAAA,EACZ,OAAO,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,SAAS,QAAA;AAAA,EAC1C,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EACnC,UAAU,EAAE,MAAM,OAAA;AAAA,EAClB,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAA;AAAA,EAClC,WAAW,EAAE,MAAM,SAAA;AAAA;AAErB,GAEAC,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE,aAAAC,GAAa,qBAAAC,EAAA;AAAA,EAC3B,OAAAJ;AAAA,EACA,OAAO,CAAC,gBAAgB,QAAQ;AAAA,EAChC,MAAMA,GAAO,EAAE,MAAAK,GAAM,QAAAC,KAAU;AAC7B,UAAMC,IAAcC,EAAIR,EAAM,SAAS,EAAE,GACnCS,IAAY,sBACZ,CAACC,GAAU,EAAE,WAAAC,GAAW,YAAAC,EAAA,CAAY,IAAIC,EAAA,GACxC,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAERC,IAAWC,EAAS,MAAM,CAACR,CAAS,CAAC,GAErCS,IAAWD,EAAS,MAAM,GAAG,GAAGjB,EAAM,KAAK,GAAG,QAAQ,MAAM,EAAE,CAAC,IAAI,GAEnEmB,IAAeF,EAAS,MAAM,GAAG,SAAS,GAAGjB,EAAM,KAAK,GAAG,QAAQ,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,GAErFoB,IAAWH,EAAS,OAAmB,EAAE,OAAOI,EAAMH,CAAQ,IAAI,GAElEI,IAAuBL;AAAA,MAC3B,OAAmB,EAAE,OAAOI,EAAMH,CAAQ,GAAG,QAAQG,EAAMH,CAAQ,EAAA;AAAA,IAAE;AAGvE,IAAAK,EAAY,MAAM;AAChB,MAAAhB,EAAY,QAAQP,EAAM,SAAS;AAAA,IACrC,CAAC,GAEDwB;AAAA,MACE,MAAMjB,EAAY;AAAA,MAClB,CAACkB,MAAc;AACb,QAAApB,EAAK,gBAAgBoB,CAAC;AAAA,MACxB;AAAA,IAAA;AAOF,aAASC,EAAoB,EAAE,QAAAC,GAAQ,MAAAC,KAAQ;AAC7C,MAAArB,EAAY,QAAQoB,GACpBtB,EAAK,UAAUsB,GAAQC,CAAI,GAC3BC,EAAQ,QAAQf,EAAE,iCAAiC,CAAC;AAAA,IACtD;AAEA,WAAAR,EAAO,EAAE,WAAWK,EAAU,KAAK,MAAM,EAAI,GAAG,YAAAC,GAAY,GAErD;AAAA,MACL,GAAAE;AAAA,MACA,WAAAL;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAQ;AAAA,MACA,aAAAZ;AAAA,MACA,UAAAS;AAAA,MACA,sBAAAM;AAAA,MACA,UAAAF;AAAA,MACA,qBAAAM;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/src/components/basic/customUpload/index.js

@@ -0,0 +1,7 @@
+import "./src/BasicUpload2.vue.js";
+import "vue";
+const t = !0;
+export {
+  t as __customUploadIndexMarker
+};
+//# sourceMappingURL=index.js.map

package/dist/src/components/basic/customUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/customUpload/index.ts"],"sourcesContent":["import CustomUpload from './src/BasicUpload.vue'\n\nexport { CustomUpload }\n\n// 兼容 preserveModules 目录导入：确保该模块作为目录时有 index.js 落盘\nexport const __customUploadIndexMarker = true\n"],"names":["__customUploadIndexMarker"],"mappings":";;AAKO,MAAMA,IAA4B;"}

package/dist/src/components/basic/customUpload/src/BasicUpload.vue.js

@@ -1 +1,65 @@
-"use strict";const s=require("./BasicUpload2.vue.js"),e=require("vue"),d=require("../../../../../_virtual/_plugin-vue_export-helper.js");function c(o,m,C,v,g,h){const n=e.resolveComponent("CloudUploadOutlined"),t=e.resolveComponent("a-button"),l=e.resolveComponent("EyeOutlined"),r=e.resolveComponent("Tooltip"),a=e.resolveComponent("Space"),i=e.resolveComponent("UploadModal"),p=e.resolveComponent("UploadPreviewModal");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,null,{default:e.withCtx(()=>[e.createVNode(t,{type:"primary",onClick:o.openUploadModal},{default:e.withCtx(()=>[e.createVNode(n),e.createTextVNode(" "+e.toDisplayString(o.props.btnName??o.t("component.upload.upload")),1)]),_:1},8,["onClick"]),o.showPreview?(e.openBlock(),e.createBlock(r,{key:0,placement:"bottom"},{title:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.t("component.upload.uploaded"))+" ",1),o.fileList.length?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.fileList.length),1)],64)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createVNode(t,{onClick:o.openPreviewModal},{default:e.withCtx(()=>[e.createVNode(l),o.fileList.length&&o.showPreviewNumber?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.fileList.length),1)],64)):e.createCommentVNode("",!0)]),_:1},8,["onClick"])]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(i,e.mergeProps(o.bindValue,{"preview-file-list":o.fileList,onRegister:o.registerUploadModal,onDelete:o.handleDelete,onSuccess:o.handleSuccess}),null,16,["preview-file-list","onRegister","onDelete","onSuccess"]),e.createVNode(p,{value:o.fileList,onRegister:o.registerPreviewModal,onListChange:o.handlePreviewChange,onDelete:o.handlePreviewDelete},null,8,["value","onRegister","onListChange","onDelete"])])}const u=d(s,[["render",c]]);module.exports=u;
+import v from "./BasicUpload2.vue.js";
+import { resolveComponent as o, openBlock as t, createElementBlock as r, createVNode as n, withCtx as l, createTextVNode as i, toDisplayString as a, createBlock as w, Fragment as s, createCommentVNode as p, mergeProps as C } from "vue";
+import k from "../../../../_virtual/_plugin-vue_export-helper.js";
+function P(e, U, y, L, M, D) {
+  const u = o("CloudUploadOutlined"), d = o("a-button"), m = o("EyeOutlined"), c = o("Tooltip"), f = o("Space"), g = o("UploadModal"), h = o("UploadPreviewModal");
+  return t(), r("div", null, [
+    n(f, null, {
+      default: l(() => [
+        n(d, {
+          type: "primary",
+          onClick: e.openUploadModal
+        }, {
+          default: l(() => [
+            n(u),
+            i(" " + a(e.props.btnName ?? e.t("component.upload.upload")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        e.showPreview ? (t(), w(c, {
+          key: 0,
+          placement: "bottom"
+        }, {
+          title: l(() => [
+            i(a(e.t("component.upload.uploaded")) + " ", 1),
+            e.fileList.length ? (t(), r(s, { key: 0 }, [
+              i(a(e.fileList.length), 1)
+            ], 64)) : p("", !0)
+          ]),
+          default: l(() => [
+            n(d, {
+              onClick: e.openPreviewModal
+            }, {
+              default: l(() => [
+                n(m),
+                e.fileList.length && e.showPreviewNumber ? (t(), r(s, { key: 0 }, [
+                  i(a(e.fileList.length), 1)
+                ], 64)) : p("", !0)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ]),
+          _: 1
+        })) : p("", !0)
+      ]),
+      _: 1
+    }),
+    n(g, C(e.bindValue, {
+      "preview-file-list": e.fileList,
+      onRegister: e.registerUploadModal,
+      onDelete: e.handleDelete,
+      onSuccess: e.handleSuccess
+    }), null, 16, ["preview-file-list", "onRegister", "onDelete", "onSuccess"]),
+    n(h, {
+      value: e.fileList,
+      onRegister: e.registerPreviewModal,
+      onListChange: e.handlePreviewChange,
+      onDelete: e.handlePreviewDelete
+    }, null, 8, ["value", "onRegister", "onListChange", "onDelete"])
+  ]);
+}
+const N = /* @__PURE__ */ k(v, [["render", P]]);
+export {
+  N as default
+};
+//# sourceMappingURL=BasicUpload.vue.js.map

package/dist/src/components/basic/customUpload/src/BasicUpload.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicUpload.vue.js","sources":["../../../../../../src/components/basic/customUpload/src/BasicUpload.vue"],"sourcesContent":["<template>\n  <div>\n    <Space>\n      <a-button type=\"primary\" @click=\"openUploadModal as any\">\n        <CloudUploadOutlined />\n        {{ props.btnName ?? t('component.upload.upload') }}\n      </a-button>\n      <Tooltip v-if=\"showPreview\" placement=\"bottom\">\n        <template #title>\n          {{ t('component.upload.uploaded') }}\n          <template v-if=\"fileList.length\">\n            {{ fileList.length }}\n          </template>\n        </template>\n        <a-button @click=\"openPreviewModal as any\">\n          <EyeOutlined />\n          <template v-if=\"fileList.length && showPreviewNumber\">\n            {{ fileList.length }}\n          </template>\n        </a-button>\n      </Tooltip>\n    </Space>\n    <UploadModal\n      v-bind=\"bindValue\"\n      :preview-file-list=\"fileList\"\n      @register=\"registerUploadModal\"\n      @delete=\"handleDelete\"\n      @success=\"handleSuccess\"\n    />\n\n    <UploadPreviewModal\n      :value=\"fileList\"\n      @register=\"registerPreviewModal\"\n      @list-change=\"handlePreviewChange\"\n      @delete=\"handlePreviewDelete\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, ref, watch, unref, computed } from 'vue'\n  import { CloudUploadOutlined, EyeOutlined } from '@ant-design/icons-vue'\n  import { Tooltip, Space, message } from 'ant-design-vue'\n  import { useModal } from '@/components/core/Modal'\n  import { uploadContainerProps } from './props'\n  import { omit } from 'lodash-es'\n  import { useI18n } from '@/hooks/useI18n'\n  import { isArray } from '@/utils/is'\n  import UploadModal from './UploadModal.vue'\n  import UploadPreviewModal from './UploadPreviewModal.vue'\n\n  export default defineComponent({\n    name: 'BasicUpload',\n    components: {\n      UploadModal,\n      Space,\n      UploadPreviewModal,\n      EyeOutlined,\n      Tooltip,\n      CloudUploadOutlined,\n    },\n    props: uploadContainerProps,\n    emits: ['change', 'delete', 'preview-delete', 'update:value', 'success'],\n\n    setup(props, { emit, attrs }) {\n      const { t } = useI18n()\n      // 上传modal\n      const [registerUploadModal, { openModal: openUploadModal }] = useModal()\n\n      // 预览modal\n      const [registerPreviewModal, { openModal: openPreviewModal }] = useModal()\n\n      const fileList = ref<string[]>([])\n\n      const showPreview = computed(() => {\n        const { emptyHidePreview, hidePreviewBtn } = props\n        if (hidePreviewBtn) return false\n        if (!emptyHidePreview) return true\n        return emptyHidePreview ? fileList.value.length > 0 : true\n      })\n\n      const bindValue = computed(() => {\n        const value = { ...attrs, ...props }\n        return omit(value, 'onChange')\n      })\n\n      watch(\n        () => props.value,\n        (value = []) => {\n          fileList.value = toUrlList(value)\n        },\n        { immediate: true },\n      )\n\n      function toUrlList(value: unknown): string[] {\n        return isArray(value) ? value.filter((item): item is string => typeof item === 'string') : []\n      }\n\n      // 上传modal保存操作\n      function handleChange(urls: string[]) {\n        fileList.value = [...unref(fileList), ...toUrlList(urls)]\n        emit('update:value', fileList.value)\n        emit('change', fileList.value)\n        emit('success', fileList.value)\n        message.success(t('component.upload.saveSuccess'))\n      }\n\n      // 预览modal保存操作\n      function handlePreviewChange(urls: string[]) {\n        fileList.value = toUrlList(urls)\n        emit('update:value', fileList.value)\n        emit('change', fileList.value)\n      }\n\n      // 上传成功回调\n      function handleSuccess(urls: string[] | null) {\n        const successUrls = toUrlList(urls)\n        if (props.maxNumber === 1) {\n          fileList.value = successUrls\n        } else {\n          fileList.value = [...unref(fileList), ...successUrls]\n        }\n        emit('update:value', fileList.value)\n        emit('success', fileList.value)\n        message.success('操作成功')\n      }\n\n      function handleDelete(record: Recordable) {\n        emit('delete', record)\n      }\n\n      function handlePreviewDelete(url: string) {\n        emit('preview-delete', url)\n      }\n\n      return {\n        props,\n        registerUploadModal,\n        openUploadModal,\n        handleChange,\n        handlePreviewChange,\n        registerPreviewModal,\n        openPreviewModal,\n        fileList,\n        showPreview,\n        bindValue,\n        handleDelete,\n        handlePreviewDelete,\n        handleSuccess,\n        t,\n      }\n    },\n  })\n</script>\n"],"names":["_resolveComponent","_createElementBlock","_createVNode","_component_Space","_withCtx","openUploadModal","_component_CloudUploadOutlined","showPreview","_ctx","_openBlock","_createBlock","_component_Tooltip","fileList","_createTextVNode","_toDisplayString","_Fragment","_createCommentVNode","openPreviewModal","_component_EyeOutlined","_component_UploadModal","registerUploadModal","handleDelete","handleSuccess","_component_UploadPreviewModal","handlePreviewDelete"],"mappings":";;;;2IACEA,EAmCM,oBAAA;cAjCFC,EAGW,OAAA,MAAA;AAAA,IAAAC,EAHXC,GAGW,MAAA;AAAA,MAAA,SAHGC,EAAC,MAAS;AAAA,QAAAF,EAASG,GAAe;AAAA,UAAA,MAAA;AAAA;;UAE9C,SAAAD,EAAA,MAAA;AAAA,YAAAF,EAAAI,CAAA;AAAA;;UAEaC,GAAAA;AAAAA,QAAAA,GAAAA,GAAAA,CAAAA,SAAAA,CAAAA;AAAAA,QAAsBC,EAAA,eAAAC,KAACC,EAAQC,GAAA;AAAA,UAAA,KAAA;AAAA,UACjC,WAAK;AAAA,QAAA,GAAA;AAAA,UAEEC,OAAAA,EAAQ,MAAC;AAAA,YAAAC,EAAAC,EAAzBN,EAEW,EAAA,2BAAA,CAAA,IAAA,KAAA,CAAA;AAAA,YAAAA,EAAA,SAAA,UAAAC,EAAA,GAAAR,EAAAc,GAAA,EAAA,KAAA,KAAA;AAAA;YAOF,GAAA,EAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,UAAA,CAAA;AAAA,mBALAZ,EAAOa,MAAAA;AAAAA,YAAAA,EAAAA,GAAAA;AAAAA;;cAEAL,SAAAA,EAAS,MAAM;AAAA,gBAAAV,EAAAgB,CAA/B;AAAA,gBAAAV,EAAA,SAAA,UAAAA,EAAA,qBAAAC,KAAAR,EAAAc,GAAA,EAAA,KAAA,EAAA,GAAA;AAAA;;;;;;;;;MAMN,GAAA;AAAA,IAAA,CAAA;AAAA,IAGWb,EAAAiB,GAAEC,EAAmBZ,EAAA,WAAA;AAAA,MAC7B,qBAAQa,EAAAA;AAAAA,MACR,YAASC,EAAAA;AAAAA,MAAAA,UAAAA,EAAAA;AAAAA,MAGZ,WAKEd,EAAA;AAAA,IAAA,CAAA,GAJC,MAAOI,IAAAA,CAAAA,qBAAQ,cAAA,YAAA,WAAA,CAAA;AAAA,IAAAV,EACPqB,GAAsB;AAAA,MAC9B,OAAAf,EAAW;AAAA,MACX,YAAQgB,EAAAA;AAAAA,MAAAA,cAAAA,EAAAA;AAAAA;;;;;"}

package/dist/src/components/basic/customUpload/src/BasicUpload2.vue.js

@@ -1 +1,79 @@
-"use strict";const s=require("vue"),c=require("@ant-design/icons-vue"),l=require("ant-design-vue");require("../../../core/Modal/src/BasicModal.vue.js");;/* empty css                                       */const i=require("../../../core/Modal/src/hooks/useModal.js"),y=require("./props.js"),d=require("lodash-es"),O=require("../../../../hooks/useI18n.js"),S=require("./UploadModal.vue.js"),D=require("./UploadPreviewModal.vue.js"),E=s.defineComponent({name:"BasicUpload",components:{UploadModal:S,Space:l.Space,UploadPreviewModal:D,EyeOutlined:c.EyeOutlined,Tooltip:l.Tooltip,CloudUploadOutlined:c.CloudUploadOutlined},props:y.uploadContainerProps,emits:["change","delete","preview-delete","update:value","success"],setup(a,{emit:n,attrs:v}){const{t:r}=O.useI18n(),[p,{openModal:f}]=i.useModal(),[h,{openModal:g}]=i.useModal(),u=s.ref([]),w=s.computed(()=>{const{emptyHidePreview:e,hidePreviewBtn:o}=a;return o?!1:e&&e?u.value.length>0:!0}),q=s.computed(()=>{const e={...v,...a};return d.omit(e,"onChange")});s.watch(()=>a.value,(e=[])=>{u.value=t(e)},{immediate:!0});function t(e){return d.isArray(e)?e.filter(o=>typeof o=="string"):[]}function M(e){u.value=[...s.unref(u),...t(e)],n("update:value",u.value),n("change",u.value),n("success",u.value),l.message.success(r("component.upload.saveSuccess"))}function P(e){u.value=t(e),n("update:value",u.value),n("change",u.value)}function U(e){const o=t(e);a.maxNumber===1?u.value=o:u.value=[...s.unref(u),...o],n("update:value",u.value),n("success",u.value),l.message.success("操作成功")}function m(e){n("delete",e)}function C(e){n("preview-delete",e)}return{props:a,registerUploadModal:p,openUploadModal:f,handleChange:M,handlePreviewChange:P,registerPreviewModal:h,openPreviewModal:g,fileList:u,showPreview:w,bindValue:q,handleDelete:m,handlePreviewDelete:C,handleSuccess:U,t:r}}});module.exports=E;
+import { defineComponent as y, ref as S, computed as u, watch as b, unref as s } from "vue";
+import { CloudUploadOutlined as x, EyeOutlined as B } from "@ant-design/icons-vue";
+import { Tooltip as D, Space as L, message as i } from "ant-design-vue";
+import "../../../core/Modal/src/BasicModal2.vue.js";
+/* empty css                                      */
+import { useModal as c } from "../../../core/Modal/src/hooks/useModal.js";
+import { uploadContainerProps as O } from "./props.js";
+import { omit as _, isArray as A } from "lodash-es";
+import { useI18n as E } from "../../../../hooks/useI18n.js";
+import H from "./UploadModal.vue.js";
+import I from "./UploadPreviewModal.vue.js";
+const Q = y({
+  name: "BasicUpload",
+  components: {
+    UploadModal: H,
+    Space: L,
+    UploadPreviewModal: I,
+    EyeOutlined: B,
+    Tooltip: D,
+    CloudUploadOutlined: x
+  },
+  props: O,
+  emits: ["change", "delete", "preview-delete", "update:value", "success"],
+  setup(n, { emit: a, attrs: d }) {
+    const { t: r } = E(), [p, { openModal: v }] = c(), [f, { openModal: m }] = c(), o = S([]), h = u(() => {
+      const { emptyHidePreview: e, hidePreviewBtn: t } = n;
+      return t ? !1 : e && e ? o.value.length > 0 : !0;
+    }), w = u(() => {
+      const e = { ...d, ...n };
+      return _(e, "onChange");
+    });
+    b(
+      () => n.value,
+      (e = []) => {
+        o.value = l(e);
+      },
+      { immediate: !0 }
+    );
+    function l(e) {
+      return A(e) ? e.filter((t) => typeof t == "string") : [];
+    }
+    function g(e) {
+      o.value = [...s(o), ...l(e)], a("update:value", o.value), a("change", o.value), a("success", o.value), i.success(r("component.upload.saveSuccess"));
+    }
+    function M(e) {
+      o.value = l(e), a("update:value", o.value), a("change", o.value);
+    }
+    function P(e) {
+      const t = l(e);
+      n.maxNumber === 1 ? o.value = t : o.value = [...s(o), ...t], a("update:value", o.value), a("success", o.value), i.success("操作成功");
+    }
+    function U(e) {
+      a("delete", e);
+    }
+    function C(e) {
+      a("preview-delete", e);
+    }
+    return {
+      props: n,
+      registerUploadModal: p,
+      openUploadModal: v,
+      handleChange: g,
+      handlePreviewChange: M,
+      registerPreviewModal: f,
+      openPreviewModal: m,
+      fileList: o,
+      showPreview: h,
+      bindValue: w,
+      handleDelete: U,
+      handlePreviewDelete: C,
+      handleSuccess: P,
+      t: r
+    };
+  }
+});
+export {
+  Q as default
+};
+//# sourceMappingURL=BasicUpload2.vue.js.map