@cmstops/pro-compo 0.1.43 → 0.1.45

package/es/imageCrop/component.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, resolveDirective, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, withDirectives, vShow, createElementBlock, normalizeClass, createCommentVNode, Fragment, renderList } from "vue";
-import { Modal, Tooltip, Button, Space } from "@arco-design/web-vue";
+import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, withDirectives, vShow, normalizeClass, createElementBlock, createCommentVNode, Fragment, renderList } from "vue";
+import { Modal, Tooltip, Button, Space, Spin } from "@arco-design/web-vue";
 import { IconZoomIn, IconZoomOut, IconRotateLeft, IconRotateRight, IconSync } from "@arco-design/web-vue/es/icon";
 import Cropper from "cropperjs";
 import ColorThief from "colorthief";
@@ -10,22 +10,21 @@ import { DEFAULT_BASE_API } from "../config.js";
 import { replaceSuffix } from "../utils/index.js";
 import { getFileRealUrl } from "./script/api.js";
 import { useGenerateAssets } from "../hooks/assets.js";
-const _hoisted_1 = { class: "image-cropper" };
-const _hoisted_2 = { class: "edit-cropper" };
-const _hoisted_3 = ["src"];
-const _hoisted_4 = {
+const _hoisted_1 = { class: "edit-cropper" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
   key: 0,
   class: "tool"
 };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = {
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: 1,
   class: "tool"
 };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "image-crop-modal-footer" };
-const _hoisted_9 = { class: "left" };
-const _hoisted_10 = { class: "right" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "image-crop-modal-footer" };
+const _hoisted_8 = { class: "left" };
+const _hoisted_9 = { class: "right" };
 const _sfc_main = defineComponent({
   __name: "component",
   props: {
@@ -44,7 +43,6 @@ const _sfc_main = defineComponent({
     const saveLoading = ref(false);
     const editImage = ref("");
     const setVisible = (bool) => {
-      console.log("--0-", bool);
       emit("update:visible", bool);
     };
     const cancelDialog = () => {
@@ -65,6 +63,13 @@ const _sfc_main = defineComponent({
     const cropperIndex = ref(0);
     const selectedData = ref([]);
     const loadImage = () => {
+      const cropperImg = document.getElementById("cropper_img");
+      const editCropper = document.querySelector(".edit-cropper");
+      cropperImg.classList.remove("position");
+      if (cropperImg && editCropper) {
+        editCropper.style.width = `${cropperImg.offsetWidth}px`;
+        editCropper.style.height = `${cropperImg.offsetHeight}px`;
+      }
     };
     const getBase64 = (imgUrl) => {
       window.URL = window.URL || window.webkitURL;
@@ -305,8 +310,10 @@ const _sfc_main = defineComponent({
       }
       getMediaRealUrl();
     };
+    onBeforeUnmount(() => {
+      cropperDestroy();
+    });
     return (_ctx, _cache) => {
-      const _directive_loading = resolveDirective("loading");
       return openBlock(), createBlock(unref(Modal), {
         visible: _ctx.visible,
         width: "986px",
@@ -321,8 +328,8 @@ const _sfc_main = defineComponent({
           createTextVNode(toDisplayString(_ctx.aspectRatioProp ? "\u88C1\u526A\u56FE\u7247" : "\u8BF7\u9009\u62E9\u88C1\u526A\u6BD4\u4F8B"), 1)
         ]),
         footer: withCtx(() => [
-          createElementVNode("span", _hoisted_8, [
-            createElementVNode("div", _hoisted_9, [
+          createElementVNode("span", _hoisted_7, [
+            createElementVNode("div", _hoisted_8, [
               createVNode(unref(Tooltip), { content: "\u653E\u5927" }, {
                 default: withCtx(() => [
                   createVNode(unref(Button), {
@@ -399,7 +406,7 @@ const _sfc_main = defineComponent({
                 _: 1
               })
             ]),
-            createElementVNode("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_9, [
               createVNode(unref(Space), null, {
                 default: withCtx(() => [
                   createVNode(unref(Button), {
@@ -431,47 +438,52 @@ const _sfc_main = defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            withDirectives((openBlock(), createElementBlock("div", {
-              class: normalizeClass(["edit", {
-                fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
-              }])
-            }, [
-              createElementVNode("div", _hoisted_2, [
-                editImage.value ? (openBlock(), createElementBlock("img", {
-                  key: 0,
-                  id: "cropper_img",
-                  class: "position",
-                  crossorigin: "anonymous",
-                  src: editImage.value,
-                  onLoad: loadImage
-                }, null, 40, _hoisted_3)) : createCommentVNode("v-if", true)
-              ])
-            ], 2)), [
-              [_directive_loading, croppering.value]
+          createVNode(unref(Spin), {
+            loading: croppering.value,
+            class: "image-cropper",
+            style: { "width": "100%" }
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(["edit", {
+                  fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
+                }])
+              }, [
+                createElementVNode("div", _hoisted_1, [
+                  editImage.value ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    id: "cropper_img",
+                    class: "position",
+                    crossorigin: "anonymous",
+                    src: editImage.value,
+                    onLoad: loadImage
+                  }, null, 40, _hoisted_2)) : createCommentVNode("v-if", true)
+                ])
+              ], 2),
+              !_ctx.aspectRatioProp ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(aspectRatioList, (item, i) => {
+                  return createElementVNode("div", {
+                    key: item.lable,
+                    class: normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
+                    onClick: ($event) => cropper(item.value, i)
+                  }, toDisplayString(item.label), 11, _hoisted_4);
+                }), 64))
+              ])) : createCommentVNode("v-if", true),
+              _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(customizedAspectRatioList.value, (item, i) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item.lable,
+                    class: normalizeClass([
+                      "btn btn" + (item.buttonIndex + 1),
+                      { active: aspectRatioActive.value === i }
+                    ]),
+                    onClick: ($event) => cropper(item.value, i)
+                  }, toDisplayString(item.label), 11, _hoisted_6);
+                }), 128))
+              ])) : createCommentVNode("v-if", true)
             ]),
-            !_ctx.aspectRatioProp ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              (openBlock(), createElementBlock(Fragment, null, renderList(aspectRatioList, (item, i) => {
-                return createElementVNode("div", {
-                  key: item.lable,
-                  class: normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
-                  onClick: ($event) => cropper(item.value, i)
-                }, toDisplayString(item.label), 11, _hoisted_5);
-              }), 64))
-            ])) : createCommentVNode("v-if", true),
-            _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(customizedAspectRatioList.value, (item, i) => {
-                return openBlock(), createElementBlock("div", {
-                  key: item.lable,
-                  class: normalizeClass([
-                    "btn btn" + (item.buttonIndex + 1),
-                    { active: aspectRatioActive.value === i }
-                  ]),
-                  onClick: ($event) => cropper(item.value, i)
-                }, toDisplayString(item.label), 11, _hoisted_7);
-              }), 128))
-            ])) : createCommentVNode("v-if", true)
-          ])
+            _: 1
+          }, 8, ["loading"])
         ]),
         _: 1
       }, 8, ["visible"]);

package/es/selectThumb/component.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, computed, watch, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, withCtx, createElementVNode, withDirectives, vShow } from "vue";
+import { defineComponent, ref, provide, computed, watch, nextTick, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, withCtx, createElementVNode, withDirectives, vShow } from "vue";
 import { RadioGroup, Radio, Switch } from "@arco-design/web-vue";
 import { docThumbObjMap, docThumbArrMap, docThumbRatioMap } from "../utils/doc.js";
 import _sfc_main$3 from "../resourceModal/component.js";
@@ -81,6 +81,16 @@ const _sfc_main = defineComponent({
         callback(styleData.value);
       }
     });
+    const refreshCrop = ref(true);
+    watch(
+      () => dialogCropperShow.value,
+      (n) => {
+        if (n)
+          return;
+        refreshCrop.value = false;
+        nextTick(() => refreshCrop.value = true);
+      }
+    );
     const loadData = (value) => {
       let data = null;
       if (!value) {
@@ -414,7 +424,8 @@ const _sfc_main = defineComponent({
           onSubmit: submitCallback,
           onUpload: _cache[3] || (_cache[3] = (cb) => _ctx.$emit("upload", cb))
         }, null, 8, ["dialogVisible", "ai_static_covers", "BASE_API"]),
-        createVNode(_sfc_main$4, {
+        refreshCrop.value ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 3,
           visible: dialogCropperShow.value,
           "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => dialogCropperShow.value = $event),
           "aspect-ratio-prop": aspectRatioProp.value,
@@ -422,7 +433,7 @@ const _sfc_main = defineComponent({
           "corp-data": cropperData.value,
           "generate-assets": false,
           onConfirm: cropConfirm
-        }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])
+        }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])) : createCommentVNode("v-if", true)
       ]);
     };
   }

package/lib/imageCrop/component.js

@@ -17,22 +17,21 @@ function _interopDefaultLegacy(e) {
 var Cropper__default = /* @__PURE__ */ _interopDefaultLegacy(Cropper);
 var ColorThief__default = /* @__PURE__ */ _interopDefaultLegacy(ColorThief);
 var GIF__default = /* @__PURE__ */ _interopDefaultLegacy(GIF);
-const _hoisted_1 = { class: "image-cropper" };
-const _hoisted_2 = { class: "edit-cropper" };
-const _hoisted_3 = ["src"];
-const _hoisted_4 = {
+const _hoisted_1 = { class: "edit-cropper" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
   key: 0,
   class: "tool"
 };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = {
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: 1,
   class: "tool"
 };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "image-crop-modal-footer" };
-const _hoisted_9 = { class: "left" };
-const _hoisted_10 = { class: "right" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "image-crop-modal-footer" };
+const _hoisted_8 = { class: "left" };
+const _hoisted_9 = { class: "right" };
 const _sfc_main = vue.defineComponent({
   __name: "component",
   props: {
@@ -51,7 +50,6 @@ const _sfc_main = vue.defineComponent({
     const saveLoading = vue.ref(false);
     const editImage = vue.ref("");
     const setVisible = (bool) => {
-      console.log("--0-", bool);
       emit("update:visible", bool);
     };
     const cancelDialog = () => {
@@ -72,6 +70,13 @@ const _sfc_main = vue.defineComponent({
     const cropperIndex = vue.ref(0);
     const selectedData = vue.ref([]);
     const loadImage = () => {
+      const cropperImg = document.getElementById("cropper_img");
+      const editCropper = document.querySelector(".edit-cropper");
+      cropperImg.classList.remove("position");
+      if (cropperImg && editCropper) {
+        editCropper.style.width = `${cropperImg.offsetWidth}px`;
+        editCropper.style.height = `${cropperImg.offsetHeight}px`;
+      }
     };
     const getBase64 = (imgUrl) => {
       window.URL = window.URL || window.webkitURL;
@@ -312,8 +317,10 @@ const _sfc_main = vue.defineComponent({
       }
       getMediaRealUrl();
     };
+    vue.onBeforeUnmount(() => {
+      cropperDestroy();
+    });
     return (_ctx, _cache) => {
-      const _directive_loading = vue.resolveDirective("loading");
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
         visible: _ctx.visible,
         width: "986px",
@@ -328,8 +335,8 @@ const _sfc_main = vue.defineComponent({
           vue.createTextVNode(vue.toDisplayString(_ctx.aspectRatioProp ? "\u88C1\u526A\u56FE\u7247" : "\u8BF7\u9009\u62E9\u88C1\u526A\u6BD4\u4F8B"), 1)
         ]),
         footer: vue.withCtx(() => [
-          vue.createElementVNode("span", _hoisted_8, [
-            vue.createElementVNode("div", _hoisted_9, [
+          vue.createElementVNode("span", _hoisted_7, [
+            vue.createElementVNode("div", _hoisted_8, [
               vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u653E\u5927" }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(webVue.Button), {
@@ -406,7 +413,7 @@ const _sfc_main = vue.defineComponent({
                 _: 1
               })
             ]),
-            vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("div", _hoisted_9, [
               vue.createVNode(vue.unref(webVue.Space), null, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(webVue.Button), {
@@ -438,47 +445,52 @@ const _sfc_main = vue.defineComponent({
           ])
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1, [
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-              class: vue.normalizeClass(["edit", {
-                fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
-              }])
-            }, [
-              vue.createElementVNode("div", _hoisted_2, [
-                editImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
-                  key: 0,
-                  id: "cropper_img",
-                  class: "position",
-                  crossorigin: "anonymous",
-                  src: editImage.value,
-                  onLoad: loadImage
-                }, null, 40, _hoisted_3)) : vue.createCommentVNode("v-if", true)
-              ])
-            ], 2)), [
-              [_directive_loading, croppering.value]
+          vue.createVNode(vue.unref(webVue.Spin), {
+            loading: croppering.value,
+            class: "image-cropper",
+            style: { "width": "100%" }
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["edit", {
+                  fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
+                }])
+              }, [
+                vue.createElementVNode("div", _hoisted_1, [
+                  editImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                    key: 0,
+                    id: "cropper_img",
+                    class: "position",
+                    crossorigin: "anonymous",
+                    src: editImage.value,
+                    onLoad: loadImage
+                  }, null, 40, _hoisted_2)) : vue.createCommentVNode("v-if", true)
+                ])
+              ], 2),
+              !_ctx.aspectRatioProp ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(aspectRatioList, (item, i) => {
+                  return vue.createElementVNode("div", {
+                    key: item.lable,
+                    class: vue.normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
+                    onClick: ($event) => cropper(item.value, i)
+                  }, vue.toDisplayString(item.label), 11, _hoisted_4);
+                }), 64))
+              ])) : vue.createCommentVNode("v-if", true),
+              _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customizedAspectRatioList.value, (item, i) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: item.lable,
+                    class: vue.normalizeClass([
+                      "btn btn" + (item.buttonIndex + 1),
+                      { active: aspectRatioActive.value === i }
+                    ]),
+                    onClick: ($event) => cropper(item.value, i)
+                  }, vue.toDisplayString(item.label), 11, _hoisted_6);
+                }), 128))
+              ])) : vue.createCommentVNode("v-if", true)
             ]),
-            !_ctx.aspectRatioProp ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-              (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(aspectRatioList, (item, i) => {
-                return vue.createElementVNode("div", {
-                  key: item.lable,
-                  class: vue.normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
-                  onClick: ($event) => cropper(item.value, i)
-                }, vue.toDisplayString(item.label), 11, _hoisted_5);
-              }), 64))
-            ])) : vue.createCommentVNode("v-if", true),
-            _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customizedAspectRatioList.value, (item, i) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
-                  key: item.lable,
-                  class: vue.normalizeClass([
-                    "btn btn" + (item.buttonIndex + 1),
-                    { active: aspectRatioActive.value === i }
-                  ]),
-                  onClick: ($event) => cropper(item.value, i)
-                }, vue.toDisplayString(item.label), 11, _hoisted_7);
-              }), 128))
-            ])) : vue.createCommentVNode("v-if", true)
-          ])
+            _: 1
+          }, 8, ["loading"])
         ]),
         _: 1
       }, 8, ["visible"]);

package/lib/selectThumb/component.js

@@ -82,6 +82,16 @@ const _sfc_main = vue.defineComponent({
         callback(styleData.value);
       }
     });
+    const refreshCrop = vue.ref(true);
+    vue.watch(
+      () => dialogCropperShow.value,
+      (n) => {
+        if (n)
+          return;
+        refreshCrop.value = false;
+        vue.nextTick(() => refreshCrop.value = true);
+      }
+    );
     const loadData = (value) => {
       let data = null;
       if (!value) {
@@ -415,7 +425,8 @@ const _sfc_main = vue.defineComponent({
           onSubmit: submitCallback,
           onUpload: _cache[3] || (_cache[3] = (cb) => _ctx.$emit("upload", cb))
         }, null, 8, ["dialogVisible", "ai_static_covers", "BASE_API"]),
-        vue.createVNode(component$1, {
+        refreshCrop.value ? (vue.openBlock(), vue.createBlock(component$1, {
+          key: 3,
           visible: dialogCropperShow.value,
           "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => dialogCropperShow.value = $event),
           "aspect-ratio-prop": aspectRatioProp.value,
@@ -423,7 +434,7 @@ const _sfc_main = vue.defineComponent({
           "corp-data": cropperData.value,
           "generate-assets": false,
           onConfirm: cropConfirm
-        }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])
+        }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])) : vue.createCommentVNode("v-if", true)
       ]);
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "",
   "keywords": [
     "vue",