@cmstops/pro-compo 0.3.10 → 0.3.12

package/lib/selectThumb/component.js

@@ -7,60 +7,59 @@ var component$1 = require("../imageCrop/component.js");
 var card = require("./components/card.js");
 var colorPalette = require("./components/colorPalette.js");
 var config = require("../config.js");
-const _hoisted_1 = { class: "select-thumb-container" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "star"
 };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   style: { "margin-left": "10px" },
   class: "tip"
 };
-const _hoisted_4 = { class: "thumbbox" };
-const _hoisted_5 = {
+const _hoisted_3 = { class: "thumbbox" };
+const _hoisted_4 = {
   key: 0,
   class: "thumb-list-view"
 };
-const _hoisted_6 = { class: "thumb-list-view" };
-const _hoisted_7 = { style: { "margin-top": "-10px" } };
-const _hoisted_8 = {
+const _hoisted_5 = { class: "thumb-list-view" };
+const _hoisted_6 = { style: { "margin-top": "-10px" } };
+const _hoisted_7 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", { style: { "margin-right": "10px" } }, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
-const _hoisted_10 = { class: "thumbbox" };
-const _hoisted_11 = {
+const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("span", { style: { "margin-right": "10px" } }, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
+const _hoisted_9 = { class: "thumbbox" };
+const _hoisted_10 = {
   key: 2,
   class: "title"
 };
-const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
-const _hoisted_13 = [
-  _hoisted_12
+const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_12 = [
+  _hoisted_11
 ];
-const _hoisted_14 = { key: 0 };
-const _hoisted_15 = {
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = {
   key: 0,
   class: "star"
 };
-const _hoisted_16 = { key: 1 };
-const _hoisted_17 = {
+const _hoisted_15 = { key: 1 };
+const _hoisted_16 = {
   key: 2,
   class: "tip",
   style: { "margin-left": "10px" }
 };
-const _hoisted_18 = { class: "thumbbox" };
-const _hoisted_19 = {
+const _hoisted_17 = { class: "thumbbox" };
+const _hoisted_18 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 1,
   class: "title"
 };
-const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u56FE\u7247\u80CC\u666F\u989C\u8272", -1);
-const _hoisted_22 = [
-  _hoisted_21
+const _hoisted_20 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u56FE\u7247\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_21 = [
+  _hoisted_20
 ];
 const _sfc_main = vue.defineComponent({
   ...{ name: "selectThumb" },
@@ -88,6 +87,7 @@ const _sfc_main = vue.defineComponent({
     const emit = __emit;
     const props = __props;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const selectThumbRef = vue.ref();
     const oldData = vue.ref(null);
     const styleData = vue.ref({});
     const thumbBannerModel = vue.ref("banner");
@@ -96,6 +96,7 @@ const _sfc_main = vue.defineComponent({
     const thumbOptionIndex = vue.ref(0);
     const aspectRatioProp = vue.ref(16 / 9);
     const cropperData = vue.ref([]);
+    const tempThumbFiles = vue.ref([]);
     if (props.mediaUseType) {
       vue.provide("mediaUseType", props.mediaUseType);
     }
@@ -231,6 +232,15 @@ const _sfc_main = vue.defineComponent({
     const previewList = vue.computed(() => {
       return thumbList.value.map((item) => item.url);
     });
+    const fileForShowThumb = (data) => {
+      tempThumbFiles.value.push(data);
+      submitCallback(tempThumbFiles.value);
+    };
+    const changeThumbType = (type, index) => {
+      tempThumbFiles.value = [];
+      thumbBannerModel.value = type;
+      thumbOptionIndex.value = index;
+    };
     const openDialogMediaSelection = (type, index) => {
       thumbBannerModel.value = type || "thumb";
       thumbOptionIndex.value = index || 0;
@@ -256,8 +266,14 @@ const _sfc_main = vue.defineComponent({
       } else if (thumbBannerModel.value === "thumb") {
         let temp = [];
         if (model.value === "1") {
+          let idx = 0;
           temp = JSON.parse(JSON.stringify(styleData.value.data));
-          temp[thumbOptionIndex.value] = { url: data[0].url, thumb: data[0].url };
+          for (let i = thumbOptionIndex.value; i < thumbOptionIndex.value + data.length; i++) {
+            if (i >= 3)
+              return;
+            temp[i] = { url: data[idx].url, thumb: data[idx].url };
+            idx++;
+          }
         } else {
           temp = [{ url: data[0].url, thumb: data[0].url }];
         }
@@ -353,7 +369,11 @@ const _sfc_main = vue.defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e, _f;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "selectThumbRef",
+        ref: selectThumbRef,
+        class: "select-thumb-container"
+      }, [
         vue.createCommentVNode(" \u5C01\u9762\u6807\u9898"),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["banner-view", { flex: _ctx.flex }])
@@ -363,46 +383,54 @@ const _sfc_main = vue.defineComponent({
             class: "title",
             style: vue.normalizeStyle({ width: _ctx.offset })
           }, [
-            _ctx.titleValid ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, "*")) : vue.createCommentVNode("v-if", true),
+            _ctx.titleValid ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, "*")) : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title ? _ctx.title : "\u5C01\u9762"), 1),
             vue.createCommentVNode(" \u4E0A\u4E0B\u5E03\u5C40\u663E\u793A tip"),
-            ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" && !_ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, " (" + vue.toDisplayString((_b = curtemplate.value) == null ? void 0 : _b.alias) + "\u6BD4\u4F8B\uFF1A" + vue.toDisplayString((_c = curtemplate.value) == null ? void 0 : _c.ratioStr) + ") ", 1)) : vue.createCommentVNode("v-if", true)
+            ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" && !_ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, " (" + vue.toDisplayString((_b = curtemplate.value) == null ? void 0 : _b.alias) + "\u6BD4\u4F8B\uFF1A" + vue.toDisplayString((_c = curtemplate.value) == null ? void 0 : _c.ratioStr) + ") ", 1)) : vue.createCommentVNode("v-if", true)
           ], 4)) : vue.createCommentVNode("v-if", true),
-          vue.createElementVNode("div", _hoisted_4, [
-            ["thumbs"].includes(_ctx.mode) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.createElementVNode("div", _hoisted_3, [
+            ["thumbs"].includes(_ctx.mode) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(thumbsLengthList.value, (item, index) => {
                 return vue.openBlock(), vue.createBlock(card, {
                   key: index,
                   id: `thumb-card-${index}`,
                   data: thumbList.value[index],
                   "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                  parentRef: selectThumbRef.value,
+                  idx: index,
                   "preview-list": previewList.value,
                   "thumb-model": "thumb",
+                  onFileForShowThumb: fileForShowThumb,
+                  onChangeThumbType: changeThumbType,
                   onUploadLocal: _cache[0] || (_cache[0] = (cb) => _ctx.$emit("upload", cb)),
                   onOpen: ($event) => openDialogMediaSelection($event, index)
-                }, null, 8, ["id", "data", "onUpdate:data", "preview-list", "onOpen"]);
+                }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "idx", "preview-list", "onOpen"]);
               }), 128))
             ])) : currentModel.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createCommentVNode(" \u5C01\u9762\u56FEcard "),
-              vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("div", _hoisted_5, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentModel.value.maxLength, (item, index) => {
                   return vue.openBlock(), vue.createBlock(card, {
                     key: index,
                     id: `thumb-card-${index}`,
                     data: thumbList.value[index],
                     "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                    parentRef: selectThumbRef.value,
                     model: model.value,
+                    idx: index,
                     "preview-list": previewList.value,
                     "thumb-model": "thumb",
+                    onFileForShowThumb: fileForShowThumb,
+                    onChangeThumbType: changeThumbType,
                     onUploadLocal: _cache[1] || (_cache[1] = (cb) => _ctx.$emit("upload", cb)),
                     onOpen: ($event) => openDialogMediaSelection($event, index)
-                  }, null, 8, ["id", "data", "onUpdate:data", "model", "preview-list", "onOpen"]);
+                  }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "model", "idx", "preview-list", "onOpen"]);
                 }), 128))
               ])
             ], 2112)) : vue.createCommentVNode("v-if", true),
             vue.createCommentVNode(" \u5DE6\u53F3\u5E03\u5C40\u663E\u793Atip "),
-            vue.createElementVNode("div", _hoisted_7, [
-              ((_d = curtemplate.value) == null ? void 0 : _d.value) !== "4" && _ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, " (" + vue.toDisplayString((_e = curtemplate.value) == null ? void 0 : _e.alias) + "\u6BD4\u4F8B\uFF1A" + vue.toDisplayString((_f = curtemplate.value) == null ? void 0 : _f.ratioStr) + ") ", 1)) : vue.createCommentVNode("v-if", true)
+            vue.createElementVNode("div", _hoisted_6, [
+              ((_d = curtemplate.value) == null ? void 0 : _d.value) !== "4" && _ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, " (" + vue.toDisplayString((_e = curtemplate.value) == null ? void 0 : _e.alias) + "\u6BD4\u4F8B\uFF1A" + vue.toDisplayString((_f = curtemplate.value) == null ? void 0 : _f.ratioStr) + ") ", 1)) : vue.createCommentVNode("v-if", true)
             ]),
             ["doc"].includes(_ctx.mode) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
               vue.createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
@@ -441,7 +469,7 @@ const _sfc_main = vue.defineComponent({
               class: "title",
               style: vue.normalizeStyle({ width: _ctx.offset })
             }, [
-              _hoisted_9,
+              _hoisted_8,
               vue.createCommentVNode(" \u4E0A\u4E0B\u5E03\u5C40\u5F00\u5173\u5728\u6807\u9898\u540E "),
               !_ctx.flex ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Switch), {
                 key: 0,
@@ -450,7 +478,7 @@ const _sfc_main = vue.defineComponent({
                 size: "small"
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("v-if", true)
             ], 4),
-            vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("div", _hoisted_9, [
               vue.createCommentVNode(" \u5DE6\u53F3\u5E03\u5C40\u5F00\u5173\u663E\u793A "),
               _ctx.flex ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Switch), {
                 key: 0,
@@ -464,12 +492,15 @@ const _sfc_main = vue.defineComponent({
                 id: `banner-card`,
                 data: banner.value,
                 "onUpdate:data": _cache[5] || (_cache[5] = ($event) => banner.value = $event),
+                parentRef: selectThumbRef.value,
                 "preview-list": previewList.value,
                 "thumb-model": "banner",
+                onFileForShowThumb: fileForShowThumb,
+                onChangeThumbType: changeThumbType,
                 onUploadLocal: _cache[6] || (_cache[6] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
-              }, null, 8, ["data", "preview-list"])) : vue.createCommentVNode("v-if", true),
-              hasBanner.value && styleData.value.banner_theme_color ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, _hoisted_13)) : vue.createCommentVNode("v-if", true),
+              }, null, 8, ["data", "parentRef", "preview-list"])) : vue.createCommentVNode("v-if", true),
+              hasBanner.value && styleData.value.banner_theme_color ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, _hoisted_12)) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" banner\u8C03\u8272\u677F "),
               hasBanner.value ? (vue.openBlock(), vue.createBlock(colorPalette, {
                 key: 3,
@@ -487,24 +518,27 @@ const _sfc_main = vue.defineComponent({
               class: "title",
               style: vue.normalizeStyle({ width: _ctx.offset })
             }, [
-              docSeriesShowTopThemeColor.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, [
-                _ctx.topImageTitleValid ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, "*")) : vue.createCommentVNode("v-if", true),
+              docSeriesShowTopThemeColor.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, [
+                _ctx.topImageTitleValid ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, "*")) : vue.createCommentVNode("v-if", true),
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.topImageTitle || "\u5C01\u9762\u5934\u56FE"), 1)
-              ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_16, "PC\u5C01\u9762\u56FE")),
-              !_ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_17, " (\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px) ")) : vue.createCommentVNode("v-if", true)
+              ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, "PC\u5C01\u9762\u56FE")),
+              !_ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_16, " (\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px) ")) : vue.createCommentVNode("v-if", true)
             ], 4),
-            vue.createElementVNode("div", _hoisted_18, [
+            vue.createElementVNode("div", _hoisted_17, [
               vue.createVNode(card, {
                 id: `pc-banner-card`,
                 data: pcBanner.value,
                 "onUpdate:data": _cache[7] || (_cache[7] = ($event) => pcBanner.value = $event),
+                parentRef: selectThumbRef.value,
                 previewList: previewList.value,
                 thumbModel: "pcBanner",
+                onFileForShowThumb: fileForShowThumb,
+                onChangeThumbType: changeThumbType,
                 onUploadLocal: _cache[8] || (_cache[8] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
-              }, null, 8, ["data", "previewList"]),
-              _ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_19, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)")) : vue.createCommentVNode("v-if", true),
-              docSeriesShowTopThemeColor.value && styleData.value.top_theme_color ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, _hoisted_22)) : vue.createCommentVNode("v-if", true),
+              }, null, 8, ["data", "parentRef", "previewList"]),
+              _ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)")) : vue.createCommentVNode("v-if", true),
+              docSeriesShowTopThemeColor.value && styleData.value.top_theme_color ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, _hoisted_21)) : vue.createCommentVNode("v-if", true),
               docSeriesShowTopThemeColor.value ? (vue.openBlock(), vue.createBlock(colorPalette, {
                 key: 2,
                 model: "top",
@@ -534,7 +568,7 @@ const _sfc_main = vue.defineComponent({
           "generate-assets": false,
           onConfirm: cropConfirm
         }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])) : vue.createCommentVNode("v-if", true)
-      ]);
+      ], 512);
     };
   }
 });

package/lib/selectThumb/components/card.js

@@ -14,14 +14,17 @@ const _sfc_main = vue.defineComponent({
     data: {},
     previewList: {},
     thumbModel: {},
+    parentRef: {},
+    idx: {},
     along: { type: Boolean },
-    model: {},
-    changeThumbModel: { type: Function }
+    model: {}
   },
   emits: [
     "open",
     "remove",
     "change",
+    "changeThumbType",
+    "fileForShowThumb",
     "uploadLocal",
     "update:data"
   ],
@@ -37,16 +40,11 @@ const _sfc_main = vue.defineComponent({
         [`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
       };
     });
-    const btnStyle = vue.computed(() => {
-      return {
-        padding: "5px 10px",
-        cursor: "pointer"
-      };
-    });
     const clickMask = () => {
       props.along && openDialogMediaSelection();
     };
     const loaclUpload = () => {
+      emit("changeThumbType", props.thumbModel, props.idx || 0);
       emit("uploadLocal", (file) => {
         let { data } = props;
         if (!file)
@@ -55,7 +53,7 @@ const _sfc_main = vue.defineComponent({
           data = {};
         }
         data.url = file.url;
-        emit("update:data", data);
+        emit("fileForShowThumb", data);
       });
     };
     const openDialogMediaSelection = () => {
@@ -67,17 +65,12 @@ const _sfc_main = vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.Popover), {
         trigger: "hover",
-        "content-style": { padding: 0 }
+        position: "bottom",
+        "popup-container": props.parentRef
       }, {
         content: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            style: vue.normalizeStyle(btnStyle.value),
-            onClick: openDialogMediaSelection
-          }, "\u7D20\u6750\u5E93\u9009\u62E9", 4),
-          vue.createElementVNode("div", {
-            style: vue.normalizeStyle(btnStyle.value),
-            onClick: loaclUpload
-          }, "\u672C\u5730\u4E0A\u4F20", 4)
+          vue.createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
+          vue.createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
         ]),
         default: vue.withCtx(() => {
           var _a;
@@ -126,7 +119,7 @@ const _sfc_main = vue.defineComponent({
           ];
         }),
         _: 1
-      });
+      }, 8, ["popup-container"]);
     };
   }
 });

package/lib/selectThumb/style/index.css

@@ -1,3 +1,6 @@
+.select-thumb-container {
+  position: relative;
+}
 .select-thumb-container .thumb-card-container {
   position: relative;
   width: 100px;
@@ -108,6 +111,16 @@
   transition: transform 0.15s ease-in 0.05s;
   transform-origin: center;
 }
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content {
+  padding: 0;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div {
+  padding: 5px 10px;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div:hover {
+  background-color: #f3f6f9;
+  cursor: pointer;
+}
 .select-thumb-container .title {
   margin-bottom: 10px;
   color: #4e5969;

package/lib/selectThumb/style/index.less

@@ -1,8 +1,26 @@
 .select-thumb-container {
+  position: relative;
   @radio-button-size: 32px;
   @import './card.less';
   @import './colorPalette.less';
 
+  .arco-trigger-popup {
+    .arco-popover-popup-content {
+      padding: 0;
+
+      .arco-popover-content {
+        div {
+          padding: 5px 10px;
+
+          &:hover {
+            background-color: #f3f6f9;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
   .title {
     margin-bottom: 10px;
     color: #4e5969;

package/package.json

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