npm - ll-plus - Versions diffs - 2.6.17 → 2.6.18 - Mend

ll-plus 2.6.17 → 2.6.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/lib/components/number-range/index.d.ts CHANGED Viewed

@@ -71,6 +71,7 @@ export declare const LlNumberRange: import("ll-plus/es/utils").SFCWithInstall<im
             [x: string]: unknown;
         };
         innerValue: import("vue").Ref<string>;
+        inputRef: import("vue").Ref<any>;
         integerCongfig: import("vue").ComputedRef<import("../input-number/src/config").Integer>;
         getBindValue: import("vue").ComputedRef<Partial<import("vue").ExtractPropTypes<{
             size: {
@@ -198,6 +199,7 @@ export declare const LlNumberRange: import("ll-plus/es/utils").SFCWithInstall<im
         getChineseName: import("vue").ComputedRef<string>;
         setValue: (value: any) => void;
         onChange: (value: any) => void;
+        focus: () => void;
         readonly InputNumber: {
             new (...args: any[]): import("@vue/runtime-core").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
                 size: {

package/lib/components/number-range/src/number-range.vue.d.ts CHANGED Viewed

@@ -70,6 +70,7 @@ declare const _default: import("vue").DefineComponent<{
             [x: string]: unknown;
         };
         innerValue: import("vue").Ref<string>;
+        inputRef: import("vue").Ref<any>;
         integerCongfig: import("vue").ComputedRef<import("../../input-number/src/config").Integer>;
         getBindValue: import("vue").ComputedRef<Partial<import("vue").ExtractPropTypes<{
             size: {
@@ -197,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
         getChineseName: import("vue").ComputedRef<string>;
         setValue: (value: any) => void;
         onChange: (value: any) => void;
+        focus: () => void;
         readonly InputNumber: {
             new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
                 size: {

package/lib/packages/components/cropper/src/cropper-image.js CHANGED Viewed

@@ -38,6 +38,10 @@ const cropperImageProps = runtime.buildProps({
     type: Boolean,
     default: false
   },
+  loading: {
+    type: Boolean,
+    default: false
+  },
   realTimePreview: {
     type: Boolean,
     default: true
@@ -75,6 +79,10 @@ const cropperModalProps = runtime.buildProps({
     type: Boolean,
     default: false
   },
+  loading: {
+    type: Boolean,
+    default: false
+  },
   avatar: {
     type: String,
     default: ""

package/lib/packages/components/cropper/src/cropper-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cropper-image.js","sources":["../../../../../../packages/components/cropper/src/cropper-image.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\nimport type Cropper from 'cropperjs'\nimport type CropperImage from './cropper-image.vue'\nimport type CropperModal from './cropper-modal.vue'\n\nexport interface CropendResult {\n imgBase64: string\n imgInfo: Cropper.Data\n}\n\nexport const defaultCropperOptions: Cropper.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\nexport const cropperImageProps = buildProps({\n src: {\n type: String,\n required: true\n },\n alt: {\n type: String\n },\n circled: {\n type: Boolean,\n default: false\n },\n realTimePreview: {\n type: Boolean,\n default: true\n },\n height: {\n type: [String, Number],\n default: '360px'\n },\n crossorigin: {\n type: definePropType<'' \| 'anonymous' \| 'use-credentials' \| undefined>(\n String\n ),\n default: undefined\n },\n imageStyle: {\n type: definePropType<CSSProperties>(Object),\n default: () => ({})\n },\n options: {\n type: definePropType<Cropper.Options>(Object),\n default: () => ({})\n }\n} as const)\n\nexport const cropperImageEmits = {\n cropend: (params: CropendResult) => !!params,\n onReady: (cropper: Cropper) => !!cropper,\n cropendError: () => true\n} as const\n\nexport const cropperModalProps = buildProps({\n circled: {\n type: Boolean,\n default: true\n },\n disabled: {\n type: Boolean,\n default: false\n },\n avatar: {\n type: String,\n default: ''\n },\n avatarSize: {\n type: [String, Number],\n default: 64\n },\n avatarType: {\n type: definePropType<'square' \| 'circle'>(String),\n default: () => 'circle'\n },\n title: {\n type: String,\n default: '图片裁剪'\n },\n width: {\n type: [String, Number],\n default: '800px'\n }\n} as const)\n\nexport const cropperModalEmits = {\n confirm: (params: { blob: Blob; previewSource: string }) => !!params\n} as const\n\n// props\nexport type CropperImageProps = ExtractPropTypes<typeof cropperImageProps>\nexport type CropperModalProps = ExtractPropTypes<typeof cropperModalProps>\n\n// emits\nexport type CropperImageEmits = typeof cropperImageEmits\nexport type CropperModalEmits = typeof cropperModalEmits\n\n// instance\nexport type CropperImageInstance = InstanceType<typeof CropperImage>\nexport type CropperModalInstance = InstanceType<typeof CropperModal>\n"],"names":["buildProps","definePropType"],"mappings":"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"}
1	+ {"version":3,"file":"cropper-image.js","sources":["../../../../../../packages/components/cropper/src/cropper-image.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\nimport type Cropper from 'cropperjs'\nimport type CropperImage from './cropper-image.vue'\nimport type CropperModal from './cropper-modal.vue'\n\nexport interface CropendResult {\n imgBase64: string\n imgInfo: Cropper.Data\n}\n\nexport const defaultCropperOptions: Cropper.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\nexport const cropperImageProps = buildProps({\n src: {\n type: String,\n required: true\n },\n alt: {\n type: String\n },\n circled: {\n type: Boolean,\n default: false\n },\n loading: {\n type: Boolean,\n default: false\n },\n realTimePreview: {\n type: Boolean,\n default: true\n },\n height: {\n type: [String, Number],\n default: '360px'\n },\n crossorigin: {\n type: definePropType<'' \| 'anonymous' \| 'use-credentials' \| undefined>(\n String\n ),\n default: undefined\n },\n imageStyle: {\n type: definePropType<CSSProperties>(Object),\n default: () => ({})\n },\n options: {\n type: definePropType<Cropper.Options>(Object),\n default: () => ({})\n }\n} as const)\n\nexport const cropperImageEmits = {\n cropend: (params: CropendResult) => !!params,\n onReady: (cropper: Cropper) => !!cropper,\n cropendError: () => true\n} as const\n\nexport const cropperModalProps = buildProps({\n circled: {\n type: Boolean,\n default: true\n },\n disabled: {\n type: Boolean,\n default: false\n },\n loading: {\n type: Boolean,\n default: false\n },\n avatar: {\n type: String,\n default: ''\n },\n avatarSize: {\n type: [String, Number],\n default: 64\n },\n avatarType: {\n type: definePropType<'square' \| 'circle'>(String),\n default: () => 'circle'\n },\n title: {\n type: String,\n default: '图片裁剪'\n },\n width: {\n type: [String, Number],\n default: '800px'\n }\n} as const)\n\nexport const cropperModalEmits = {\n confirm: (params: { blob: Blob; previewSource: string }) => !!params\n} as const\n\n// props\nexport type CropperImageProps = ExtractPropTypes<typeof cropperImageProps>\nexport type CropperModalProps = ExtractPropTypes<typeof cropperModalProps>\n\n// emits\nexport type CropperImageEmits = typeof cropperImageEmits\nexport type CropperModalEmits = typeof cropperModalEmits\n\n// instance\nexport type CropperImageInstance = InstanceType<typeof CropperImage>\nexport type CropperModalInstance = InstanceType<typeof CropperModal>\n"],"names":["buildProps","definePropType"],"mappings":"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"}

package/lib/packages/components/cropper/src/cropper-image.vue2.js CHANGED Viewed

@@ -23,6 +23,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const imgElRef = vue.ref();
     const cropper = vue.ref();
     const isReady = vue.ref(false);
+    const loading = vue.ref(props.loading);
     const getImageStyle = vue.computed(() => {
       return {
         height: props.height,
@@ -38,10 +39,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (!imgEl) {
         return;
       }
+      loading.value = true;
       cropper.value = new Cropper(imgEl, {
         ...cropperImage.defaultCropperOptions,
         ready() {
           isReady.value = true;
+          loading.value = false;
           realTimeCroppered();
           emits("onReady", cropper.value);
         },
@@ -107,32 +110,50 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       context.fill();
       return canvas;
     };
+    const handleLoading = () => {
+      loading.value = true;
+      console.log("loading");
+    };
     vue.onMounted(init);
     vue.onUnmounted(() => {
       cropper.value?.destroy();
     });
+    vue.watch(
+      () => props.loading,
+      (val) => {
+        loading.value = val;
+      }
+    );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(
-        "div",
-        {
-          class: vue.normalizeClass([vue.unref(bem).b(), props.circled ? vue.unref(bem).is("circled") : ""]),
-          style: vue.normalizeStyle(getWrapperStyle.value)
-        },
-        [
-          vue.withDirectives(vue.createElementVNode("img", {
-            ref_key: "imgElRef",
-            ref: imgElRef,
-            src: _ctx.src,
-            alt: _ctx.alt,
-            crossorigin: _ctx.crossorigin,
-            style: vue.normalizeStyle(getImageStyle.value)
-          }, null, 12, _hoisted_1), [
-            [vue.vShow, isReady.value]
-          ])
-        ],
-        6
-        /* CLASS, STYLE */
-      );
+      const _component_a_spin = vue.resolveComponent("a-spin");
+      return vue.openBlock(), vue.createBlock(_component_a_spin, { spinning: loading.value }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass([vue.unref(bem).b(), props.circled ? vue.unref(bem).is("circled") : ""]),
+              style: vue.normalizeStyle(getWrapperStyle.value)
+            },
+            [
+              vue.withDirectives(vue.createElementVNode("img", {
+                ref_key: "imgElRef",
+                ref: imgElRef,
+                src: _ctx.src,
+                alt: _ctx.alt,
+                crossorigin: _ctx.crossorigin,
+                style: vue.normalizeStyle(getImageStyle.value),
+                onLoad: handleLoading
+              }, null, 44, _hoisted_1), [
+                [vue.vShow, isReady.value]
+              ])
+            ],
+            6
+            /* CLASS, STYLE */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["spinning"]);
     };
   }
 });

package/lib/packages/components/cropper/src/cropper-image.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cropper-image.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-image.vue"],"sourcesContent":["<template>\n <div\n :class=\"[bem.b(), props.circled ? bem.is('circled') : '']\"\n :style=\"getWrapperStyle\"\n >\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\" setup>\nimport { onMounted, ref, computed, onUnmounted, type CSSProperties } from 'vue'\nimport { createNamespace } from '@ll-plus/utils'\n//@ts-ignore\nimport Cropper from 'cropperjs'\n// import 'cropperjs/dist/cropper.css'\nimport { useDebounceFn } from '@vueuse/shared'\nimport {\n cropperImageProps,\n cropperImageEmits,\n defaultCropperOptions,\n type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'CropperImage' })\nconst props = defineProps(cropperImageProps)\nconst emits = defineEmits(cropperImageEmits)\n\nconst bem = createNamespace('cropper-image')\n\nconst imgElRef = ref<HTMLImageElement>()\nconst cropper = ref<Cropper>()\nconst isReady = ref(false)\nconst getImageStyle = computed((): CSSProperties => {\n return {\n height: props.height,\n maxWidth: '100%',\n ...props.imageStyle\n }\n})\nconst getWrapperStyle = computed((): CSSProperties => {\n return { height: `${props.height}`.replace(/px/, '') + 'px' }\n})\n\nconst init = async () => {\n const imgEl = imgElRef.value\n if (!imgEl) {\n return\n }\n cropper.value = new Cropper(imgEl, {\n ...defaultCropperOptions,\n ready() {\n isReady.value = true\n realTimeCroppered()\n //@ts-ignore\n emits('onReady', 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\nconst realTimeCroppered = () => {\n props.realTimePreview && croppered()\n}\n\nconst debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)\n\n// event: return base64 and width and height information after cropping\nconst croppered = () => {\n if (!cropper.value) {\n return\n }\n const imgInfo = cropper.value.getData()\n const canvas = props.circled\n ? getRoundedCanvas()\n : 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 emits('cropend', {\n imgBase64: e.target?.result ?? '',\n imgInfo\n } as CropendResult)\n }\n fileReader.onerror = () => {\n emits('cropendError')\n }\n }, 'image/png')\n}\n\n// Get a circular picture canvas\nconst 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(\n width / 2,\n height / 2,\n Math.min(width, height) / 2,\n 0,\n 2 * Math.PI,\n true\n )\n context.fill()\n return canvas\n}\n\nonMounted(init)\n\nonUnmounted(() => {\n cropper.value?.destroy()\n})\n</script>\n"],"names":["createNamespace","ref","computed","defaultCropperOptions","useDebounceFn","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;~~AA8BA~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"cropper-image.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-image.vue"],"sourcesContent":["<template>\n <a-spin :spinning=\"loading\">\n <div\n :class=\"[bem.b(), props.circled ? bem.is('circled') : '']\"\n :style=\"getWrapperStyle\"\n >\n <img\n v-show=\"isReady\"\n ref=\"imgElRef\"\n :src=\"src\"\n :alt=\"alt\"\n :crossorigin=\"crossorigin\"\n :style=\"getImageStyle\"\n @load=\"handleLoading\"\n />\n </div>\n </a-spin>\n</template>\n<script lang=\"ts\" setup>\nimport {\n onMounted,\n ref,\n computed,\n onUnmounted,\n type CSSProperties,\n watch\n} from 'vue'\nimport { createNamespace } from '@ll-plus/utils'\n//@ts-ignore\nimport Cropper from 'cropperjs'\n// import 'cropperjs/dist/cropper.css'\nimport { useDebounceFn } from '@vueuse/shared'\nimport {\n cropperImageProps,\n cropperImageEmits,\n defaultCropperOptions,\n type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'CropperImage' })\nconst props = defineProps(cropperImageProps)\nconst emits = defineEmits(cropperImageEmits)\n\nconst bem = createNamespace('cropper-image')\n\nconst imgElRef = ref<HTMLImageElement>()\nconst cropper = ref<Cropper>()\nconst isReady = ref(false)\nconst loading = ref(props.loading)\nconst getImageStyle = computed((): CSSProperties => {\n return {\n height: props.height,\n maxWidth: '100%',\n ...props.imageStyle\n }\n})\nconst getWrapperStyle = computed((): CSSProperties => {\n return { height: `${props.height}`.replace(/px/, '') + 'px' }\n})\n\nconst init = async () => {\n const imgEl = imgElRef.value\n if (!imgEl) {\n return\n }\n loading.value = true\n cropper.value = new Cropper(imgEl, {\n ...defaultCropperOptions,\n ready() {\n isReady.value = true\n loading.value = false\n realTimeCroppered()\n //@ts-ignore\n emits('onReady', 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\nconst realTimeCroppered = () => {\n props.realTimePreview && croppered()\n}\n\nconst debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)\n\n// event: return base64 and width and height information after cropping\nconst croppered = () => {\n if (!cropper.value) {\n return\n }\n const imgInfo = cropper.value.getData()\n const canvas = props.circled\n ? getRoundedCanvas()\n : 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 emits('cropend', {\n imgBase64: e.target?.result ?? '',\n imgInfo\n } as CropendResult)\n }\n fileReader.onerror = () => {\n emits('cropendError')\n }\n }, 'image/png')\n}\n\n// Get a circular picture canvas\nconst 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(\n width / 2,\n height / 2,\n Math.min(width, height) / 2,\n 0,\n 2 * Math.PI,\n true\n )\n context.fill()\n return canvas\n}\n//获取图片加载中\nconst handleLoading = () => {\n loading.value = true\n console.log('loading')\n}\n\nonMounted(init)\n\nonUnmounted(() => {\n cropper.value?.destroy()\n})\n\nwatch(\n () => props.loading,\n val => {\n loading.value = val\n }\n)\n</script>\n"],"names":["createNamespace","ref","computed","defaultCropperOptions","useDebounceFn","onMounted","onUnmounted","watch"],"mappings":"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"}

package/lib/packages/components/cropper/src/cropper-modal.vue2.js CHANGED Viewed

@@ -16,7 +16,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "cropper-modal",
   props: cropperImage.cropperModalProps,
   emits: cropperImage.cropperModalEmits,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const bem = createNamespace.createNamespace("cropper-modal");
@@ -24,16 +24,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const avatar = vue.ref(props.avatar || "");
     const open = vue.ref(false);
     const previewSource = vue.ref("");
+    const loading = vue.ref(props.loading);
+    const uploadLoading = vue.ref(false);
     const cropper = vue.ref();
     let scaleX = 1;
     let scaleY = 1;
     function handleBeforeUpload(file) {
       const reader = new FileReader();
       reader.readAsDataURL(file);
+      uploadLoading.value = true;
       src.value = "";
       previewSource.value = "";
       reader.onload = function(e) {
         src.value = e.target?.result ?? "";
+        uploadLoading.value = false;
+      };
+      reader.onerror = () => {
+        uploadLoading.value = false;
       };
       return false;
     }
@@ -63,10 +70,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       avatar.value = previewSource.value;
       open.value = false;
     }
+    const cleanValue = () => {
+      src.value = "";
+      avatar.value = "";
+    };
     vue.watch(
       () => props.avatar,
       (val) => {
-        console.log({ val });
         src.value = val;
         avatar.value = val;
       },
@@ -74,6 +84,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         immediate: true
       }
     );
+    vue.watchEffect(() => {
+      loading.value = props.loading;
+    });
+    __expose({
+      cleanValue
+    });
     return (_ctx, _cache) => {
       const _component_ll_icon = vue.resolveComponent("ll-icon");
       const _component_ll_button = vue.resolveComponent("ll-button");
@@ -81,6 +97,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const _component_a_upload = vue.resolveComponent("a-upload");
       const _component_ll_space = vue.resolveComponent("ll-space");
       const _component_ll_image = vue.resolveComponent("ll-image");
+      const _component_a_spin = vue.resolveComponent("a-spin");
       const _component_ll_modal = vue.resolveComponent("ll-modal");
       return vue.openBlock(), vue.createElementBlock(
         vue.Fragment,
@@ -93,6 +110,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             keyboard: false,
             "mask-closable": false,
             "ok-text": "\u786E\u5B9A",
+            loading: uploadLoading.value,
             onCancel: _cache[8] || (_cache[8] = ($event) => open.value = false),
             onOk: handleOk
           }, {
@@ -120,9 +138,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             src: src.value,
                             height: "300px",
                             circled: _ctx.circled,
+                            loading: uploadLoading.value,
                             onCropend: handleCropend,
                             onOnReady: handleReady
-                          }, null, 8, ["src", "circled"])) : vue.createCommentVNode("v-if", true)
+                          }, null, 8, ["src", "circled", "loading"])) : vue.createCommentVNode("v-if", true)
                         ],
                         2
                         /* CLASS */
@@ -147,6 +166,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
+                                    disabled: uploadLoading.value,
                                     onClick: _cache[0] || (_cache[0] = ($event) => handlerToolbar("reset"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -154,7 +174,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     ]),
                                     _: 1
                                     /* STABLE */
-                                  })
+                                  }, 8, ["disabled"])
                                 ]),
                                 _: 1
                                 /* STABLE */
@@ -173,7 +193,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("reset"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -194,7 +214,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[2] || (_cache[2] = ($event) => handlerToolbar("rotate", -45))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -215,7 +235,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("rotate", 45))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -236,7 +256,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[4] || (_cache[4] = ($event) => handlerToolbar("scaleX"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -257,7 +277,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("scaleY"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -278,7 +298,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[6] || (_cache[6] = ($event) => handlerToolbar("zoom", 0.1))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -299,7 +319,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("zoom", -0.1))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -330,56 +350,62 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(vue.unref(bem).e("right"))
                     },
                     [
-                      vue.createElementVNode(
-                        "div",
-                        {
-                          class: vue.normalizeClass(vue.unref(bem).e("preview"))
-                        },
-                        [
-                          previewSource.value ? (vue.openBlock(), vue.createElementBlock("img", {
-                            key: 0,
-                            src: previewSource.value,
-                            alt: "\u9884\u89C8"
-                          }, null, 8, _hoisted_1)) : vue.createCommentVNode("v-if", true)
-                        ],
-                        2
-                        /* CLASS */
-                      ),
-                      previewSource.value ? (vue.openBlock(), vue.createElementBlock(
-                        "div",
-                        {
-                          key: 0,
-                          class: vue.normalizeClass(vue.unref(bem).e("group"))
-                        },
-                        [
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 32,
-                            height: 32
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 48,
-                            height: 48
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 64,
-                            height: 64
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 80,
-                            height: 80
-                          }, null, 8, ["src"])
-                        ],
-                        2
-                        /* CLASS */
-                      )) : vue.createCommentVNode("v-if", true)
+                      vue.createVNode(_component_a_spin, { spinning: uploadLoading.value }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(bem).e("preview"))
+                            },
+                            [
+                              previewSource.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                                key: 0,
+                                src: previewSource.value,
+                                alt: "\u9884\u89C8"
+                              }, null, 8, _hoisted_1)) : vue.createCommentVNode("v-if", true)
+                            ],
+                            2
+                            /* CLASS */
+                          ),
+                          previewSource.value ? (vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: 0,
+                              class: vue.normalizeClass(vue.unref(bem).e("group"))
+                            },
+                            [
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 32,
+                                height: 32
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 48,
+                                height: 48
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 64,
+                                height: 64
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 80,
+                                height: 80
+                              }, null, 8, ["src"])
+                            ],
+                            2
+                            /* CLASS */
+                          )) : vue.createCommentVNode("v-if", true)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["spinning"])
                     ],
                     2
                     /* CLASS */
@@ -391,25 +417,35 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["open", "title", "width"]),
+          }, 8, ["open", "title", "width", "loading"]),
           vue.createElementVNode(
             "div",
             {
               class: vue.normalizeClass(vue.unref(bem).e("cropper-avatar")),
               style: vue.normalizeStyle({
-                cursor: props.disabled ? "not-allowed" : "pointer"
+                cursor: props.disabled ? "not-allowed" : "pointer",
+                display: "inline-block"
               }),
               onClick: handleOpen
             },
             [
-              vue.renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
-                vue.createVNode(_component_ll_image, {
-                  src: avatar.value,
-                  width: 64,
-                  height: 64,
-                  preview: false
-                }, null, 8, ["src"])
-              ])
+              vue.createVNode(_component_a_spin, {
+                spinning: loading.value,
+                style: { "display": "inline-block" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
+                    vue.createVNode(_component_ll_image, {
+                      src: avatar.value,
+                      width: 64,
+                      height: 64,
+                      preview: false
+                    }, null, 8, ["src"])
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["spinning"])
             ],
             6
             /* CLASS, STYLE */

package/lib/packages/components/cropper/src/cropper-modal.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cropper-modal.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-modal.vue"],"sourcesContent":["<template>\n <ll-modal\n :open=\"open\"\n :title=\"props.title\"\n :width=\"props.width\"\n :keyboard=\"false\"\n :mask-closable=\"false\"\n :ok-text=\"'确定'\"\n @cancel=\"open = false\"\n @ok=\"handleOk\"\n >\n <div :class=\"bem.b()\">\n <div :class=\"bem.e('left')\">\n <div :class=\"bem.e('cropper')\">\n <cropper-image\n v-if=\"src && open\"\n :src=\"src\"\n height=\"300px\"\n :circled=\"circled\"\n @cropend=\"handleCropend\"\n @on-ready=\"handleReady\"\n />\n </div>\n <div :class=\"bem.e('toolbar')\">\n <a-upload\n :file-list=\"[]\"\n accept=\"image/*\"\n :before-upload=\"handleBeforeUpload\"\n >\n <ll-tooltip :title=\"'选择图片'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n @click=\"handlerToolbar('reset')\"\n >\n <ll-icon icon-name=\"icon-upload\" />\n </ll-button>\n </ll-tooltip>\n </a-upload>\n <ll-space>\n <ll-tooltip :tip=\"'重置'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('reset')\"\n >\n <ll-icon icon-name=\"icon-refresh\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'逆时针旋转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('rotate', -45)\"\n >\n <ll-icon icon-name=\"icon-counter-clockwise\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'顺时针旋转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('rotate', 45)\"\n >\n <ll-icon icon-name=\"icon-flip-horizontal\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'水平翻转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('scaleX')\"\n >\n <ll-icon icon-name=\"icon-flip-horizontal\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'垂直翻转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('scaleY')\"\n >\n <ll-icon icon-name=\"icon-flip-vertical\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'放大'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('zoom', 0.1)\"\n >\n <ll-icon icon-name=\"icon-amplify1\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'缩小'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src\"\n @click=\"handlerToolbar('zoom', -0.1)\"\n >\n <ll-icon icon-name=\"icon-scale\" />\n </ll-button>\n </ll-tooltip>\n </ll-space>\n </div>\n </div>\n <div :class=\"bem.e('right')\">\n <div :class=\"bem.e('preview')\">\n <img v-if=\"previewSource\" :src=\"previewSource\" :alt=\"'预览'\" />\n </div>\n <template v-if=\"previewSource\">\n <div :class=\"bem.e('group')\">\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"32\"\n :height=\"32\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"48\"\n :height=\"48\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"64\"\n :height=\"64\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"80\"\n :height=\"80\"\n />\n </div>\n </template>\n </div>\n </div>\n </ll-modal>\n <div\n :class=\"bem.e('cropper-avatar')\"\n :style=\"{\n cursor: props.disabled ? 'not-allowed' : 'pointer'\n }\"\n @click=\"handleOpen\"\n >\n <slot :src=\"avatar\">\n <ll-image :src=\"avatar\" :width=\"64\" :height=\"64\" :preview=\"false\" />\n </slot>\n </div>\n</template>\n<script lang=\"ts\" setup>\n//@ts-ignore\nimport type Cropper from 'cropperjs'\n\nimport { ref, watch } from 'vue'\nimport { createNamespace, dataURLtoBlob, type Nullable } from '@ll-plus/utils'\nimport CropperImage from './cropper-image.vue'\nimport {\n cropperModalProps,\n cropperModalEmits,\n type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'LlCropperModal' })\nconst props = defineProps(cropperModalProps)\nconst emits = defineEmits(cropperModalEmits)\nconst bem = createNamespace('cropper-modal')\nconst src = ref(props.avatar \|\| '')\nconst avatar = ref(props.avatar \|\| '')\nconst open = ref(false)\nconst previewSource = ref('')\n\nconst cropper = ref<Nullable<Cropper>>()\nlet scaleX = 1\nlet scaleY = 1\n\n// Block upload\nfunction 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}\nfunction handleOpen() {\n if (props.disabled) return\n open.value = true\n}\nfunction handleCropend({ imgBase64 }: CropendResult) {\n previewSource.value = imgBase64\n}\n\nfunction handleReady(cropperInstance: Cropper) {\n cropper.value = cropperInstance\n}\nfunction 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\nasync function handleOk() {\n const blob = dataURLtoBlob(previewSource.value)\n emits('confirm', { blob, previewSource: previewSource.value })\n avatar.value = previewSource.value\n open.value = false\n}\n\nwatch(\n () => props.avatar,\n val => {\n console.log({ val })\n src.value = val\n avatar.value = val\n },\n {\n immediate: true\n }\n)\n</script>\n"],"names":["createNamespace","ref","dataURLtoBlob","watch"],"mappings":"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"}
1	+ {"version":3,"file":"cropper-modal.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-modal.vue"],"sourcesContent":["<template>\n <ll-modal\n :open=\"open\"\n :title=\"props.title\"\n :width=\"props.width\"\n :keyboard=\"false\"\n :mask-closable=\"false\"\n :ok-text=\"'确定'\"\n :loading=\"uploadLoading\"\n @cancel=\"open = false\"\n @ok=\"handleOk\"\n >\n <div :class=\"bem.b()\">\n <div :class=\"bem.e('left')\">\n <div :class=\"bem.e('cropper')\">\n <cropper-image\n v-if=\"src && open\"\n :src=\"src\"\n height=\"300px\"\n :circled=\"circled\"\n :loading=\"uploadLoading\"\n @cropend=\"handleCropend\"\n @on-ready=\"handleReady\"\n />\n </div>\n <div :class=\"bem.e('toolbar')\">\n <a-upload\n :file-list=\"[]\"\n accept=\"image/*\"\n :before-upload=\"handleBeforeUpload\"\n >\n <ll-tooltip :title=\"'选择图片'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"uploadLoading\"\n @click=\"handlerToolbar('reset')\"\n >\n <ll-icon icon-name=\"icon-upload\" />\n </ll-button>\n </ll-tooltip>\n </a-upload>\n <ll-space>\n <ll-tooltip :tip=\"'重置'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('reset')\"\n >\n <ll-icon icon-name=\"icon-refresh\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'逆时针旋转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('rotate', -45)\"\n >\n <ll-icon icon-name=\"icon-counter-clockwise\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'顺时针旋转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('rotate', 45)\"\n >\n <ll-icon icon-name=\"icon-flip-horizontal\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'水平翻转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('scaleX')\"\n >\n <ll-icon icon-name=\"icon-flip-horizontal\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'垂直翻转'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('scaleY')\"\n >\n <ll-icon icon-name=\"icon-flip-vertical\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'放大'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('zoom', 0.1)\"\n >\n <ll-icon icon-name=\"icon-amplify1\" />\n </ll-button>\n </ll-tooltip>\n <ll-tooltip :tip=\"'缩小'\" placement=\"bottom\">\n <ll-button\n type=\"primary\"\n size=\"small\"\n :disabled=\"!src \|\| uploadLoading\"\n @click=\"handlerToolbar('zoom', -0.1)\"\n >\n <ll-icon icon-name=\"icon-scale\" />\n </ll-button>\n </ll-tooltip>\n </ll-space>\n </div>\n </div>\n <div :class=\"bem.e('right')\">\n <a-spin :spinning=\"uploadLoading\">\n <div :class=\"bem.e('preview')\">\n <img v-if=\"previewSource\" :src=\"previewSource\" :alt=\"'预览'\" />\n </div>\n <template v-if=\"previewSource\">\n <div :class=\"bem.e('group')\">\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"32\"\n :height=\"32\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"48\"\n :height=\"48\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"64\"\n :height=\"64\"\n />\n <ll-image\n :preview=\"false\"\n :src=\"previewSource\"\n :width=\"80\"\n :height=\"80\"\n />\n </div>\n </template>\n </a-spin>\n </div>\n </div>\n </ll-modal>\n <div\n :class=\"bem.e('cropper-avatar')\"\n :style=\"{\n cursor: props.disabled ? 'not-allowed' : 'pointer',\n display: 'inline-block'\n }\"\n @click=\"handleOpen\"\n >\n <a-spin :spinning=\"loading\" style=\"display: inline-block\">\n <slot :src=\"avatar\">\n <ll-image :src=\"avatar\" :width=\"64\" :height=\"64\" :preview=\"false\" />\n </slot>\n </a-spin>\n </div>\n</template>\n<script lang=\"ts\" setup>\n//@ts-ignore\nimport type Cropper from 'cropperjs'\n\nimport { ref, watch, watchEffect } from 'vue'\nimport { createNamespace, dataURLtoBlob, type Nullable } from '@ll-plus/utils'\nimport CropperImage from './cropper-image.vue'\nimport {\n cropperModalProps,\n cropperModalEmits,\n type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'LlCropperModal' })\nconst props = defineProps(cropperModalProps)\nconst emits = defineEmits(cropperModalEmits)\nconst bem = createNamespace('cropper-modal')\nconst src = ref(props.avatar \|\| '')\nconst avatar = ref(props.avatar \|\| '')\nconst open = ref(false)\nconst previewSource = ref('')\nconst loading = ref<boolean>(props.loading)\nconst uploadLoading = ref(false)\n\nconst cropper = ref<Nullable<Cropper>>()\nlet scaleX = 1\nlet scaleY = 1\n\n// Block upload\nfunction handleBeforeUpload(file: File) {\n const reader = new FileReader()\n reader.readAsDataURL(file)\n uploadLoading.value = true\n src.value = ''\n previewSource.value = ''\n reader.onload = function (e) {\n src.value = (e.target?.result as string) ?? ''\n uploadLoading.value = false\n // filename = file.name\n }\n reader.onerror = () => {\n uploadLoading.value = false\n }\n return false\n}\nfunction handleOpen() {\n if (props.disabled) return\n open.value = true\n}\nfunction handleCropend({ imgBase64 }: CropendResult) {\n previewSource.value = imgBase64\n}\n\nfunction handleReady(cropperInstance: Cropper) {\n cropper.value = cropperInstance\n}\nfunction 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\nasync function handleOk() {\n const blob = dataURLtoBlob(previewSource.value)\n emits('confirm', { blob, previewSource: previewSource.value })\n avatar.value = previewSource.value\n open.value = false\n}\n\nconst cleanValue = () => {\n src.value = ''\n avatar.value = ''\n}\n\nwatch(\n () => props.avatar,\n val => {\n src.value = val\n avatar.value = val\n },\n {\n immediate: true\n }\n)\nwatchEffect(() => {\n loading.value = props.loading\n})\ndefineExpose({\n cleanValue\n})\n</script>\n"],"names":["createNamespace","ref","dataURLtoBlob","watch","watchEffect"],"mappings":"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"}