@cmstops/pro-compo 3.9.0 → 3.9.1-beta.1

package/es/selectThumb/components/card.js

@@ -1,178 +0,0 @@
-import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, Transition, withModifiers, createCommentVNode, normalizeStyle } from "vue";
-import { Popover, Image } from "@arco-design/web-vue";
-import { IconEdit, IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
-import { DEFAULT_BASE_API } from "../../config.js";
-const _hoisted_1 = { class: "thumb-card-container-wrap" };
-const _hoisted_2 = {
-  key: 0,
-  class: "img-v"
-};
-const _hoisted_3 = {
-  key: 0,
-  class: "img-v"
-};
-const _sfc_main = defineComponent({
-  ...{ name: "thumbCard" },
-  __name: "card",
-  props: {
-    data: {},
-    previewList: {},
-    thumbModel: {},
-    parentRef: {},
-    idx: {},
-    along: { type: Boolean },
-    model: {},
-    isPopover: { type: Boolean }
-  },
-  emits: [
-    "open",
-    "remove",
-    "change",
-    "changeThumbType",
-    "fileForShowThumb",
-    "uploadLocal",
-    "update:data"
-  ],
-  setup(__props, { emit: __emit }) {
-    const waterBg = `${DEFAULT_BASE_API}/static/images/waterBg.png`;
-    const props = __props;
-    const emit = __emit;
-    const classObj = computed(() => {
-      var _a;
-      if (!props.model)
-        return {};
-      return {
-        [`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
-      };
-    });
-    const clickMask = () => {
-      props.along && openDialogMediaSelection();
-    };
-    const loaclUpload = () => {
-      emit("changeThumbType", props.thumbModel, props.idx || 0);
-      emit("uploadLocal", (file) => {
-        let { data } = props;
-        if (!file)
-          return;
-        if (!data) {
-          data = {};
-        }
-        data.url = file.url;
-        emit("fileForShowThumb", data);
-      });
-    };
-    const openDialogMediaSelection = () => {
-      emit("open", props.thumbModel);
-    };
-    const remove = () => {
-      emit("remove");
-    };
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.isPopover ? (openBlock(), createBlock(unref(Popover), {
-          key: 0,
-          trigger: "hover",
-          position: "bottom",
-          "popup-container": props.parentRef
-        }, {
-          content: withCtx(() => [
-            createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
-            createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
-          ]),
-          default: withCtx(() => {
-            var _a2;
-            return [
-              createElementVNode("div", {
-                class: normalizeClass(["thumb-card-container", classObj.value])
-              }, [
-                ((_a2 = props.data) == null ? void 0 : _a2.url) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                  createVNode(unref(Image), {
-                    class: "item",
-                    fit: "cover",
-                    src: props.data.url,
-                    "show-loader": ""
-                  }, null, 8, ["src"]),
-                  createVNode(Transition, { name: "fade" }, {
-                    default: withCtx(() => [
-                      createElementVNode("div", {
-                        class: "mask",
-                        onClick: clickMask
-                      }, [
-                        createElementVNode("span", {
-                          class: "half",
-                          onClick: withModifiers(openDialogMediaSelection, ["stop"])
-                        }, [
-                          createVNode(unref(IconEdit))
-                        ]),
-                        _ctx.along ? (openBlock(), createElementBlock("span", {
-                          key: 0,
-                          class: "half",
-                          onClick: withModifiers(remove, ["stop"])
-                        }, [
-                          createVNode(unref(IconDelete))
-                        ])) : createCommentVNode("v-if", true)
-                      ])
-                    ]),
-                    _: 1
-                  })
-                ])) : (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  class: "item add-thumb",
-                  style: normalizeStyle({ backgroundImage: `url(${waterBg})` }),
-                  onClick: openDialogMediaSelection
-                }, [
-                  createVNode(unref(IconPlus))
-                ], 4))
-              ], 2)
-            ];
-          }),
-          _: 1
-        }, 8, ["popup-container"])) : (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(["thumb-card-container", classObj.value])
-        }, [
-          ((_a = props.data) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createVNode(unref(Image), {
-              class: "item",
-              fit: "cover",
-              src: props.data.url,
-              "show-loader": ""
-            }, null, 8, ["src"]),
-            createVNode(Transition, { name: "fade" }, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  class: "mask",
-                  onClick: clickMask
-                }, [
-                  createElementVNode("span", {
-                    class: "half",
-                    onClick: withModifiers(openDialogMediaSelection, ["stop"])
-                  }, [
-                    createVNode(unref(IconEdit))
-                  ]),
-                  _ctx.along ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: "half",
-                    onClick: withModifiers(remove, ["stop"])
-                  }, [
-                    createVNode(unref(IconDelete))
-                  ])) : createCommentVNode("v-if", true)
-                ])
-              ]),
-              _: 1
-            })
-          ])) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: "item add-thumb",
-            style: normalizeStyle({ backgroundImage: `url(${waterBg})` }),
-            onClick: openDialogMediaSelection
-          }, [
-            createVNode(unref(IconPlus))
-          ], 4))
-        ], 2))
-      ]);
-    };
-  }
-});
-export { _sfc_main as default };

package/es/selectThumb/components/colorPalette.js

@@ -1,82 +0,0 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode } from "vue";
-import { RadioGroup, Radio } from "@arco-design/web-vue";
-import _sfc_main$1 from "./colorPicker.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "color-palette-container"
-};
-const _sfc_main = defineComponent({
-  __name: "colorPalette",
-  props: {
-    styleData: {},
-    model: {}
-  },
-  emits: ["change"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const color = ref("rgb(101,121,109)");
-    const colorList = ref([]);
-    const colorChange = (_color) => {
-      if (_color) {
-        color.value = _color.replace(/\s+/g, "");
-        const styleData = JSON.parse(JSON.stringify(props.styleData));
-        styleData[`${props.model}_theme_color`] = color.value;
-        emit("change", styleData);
-      }
-    };
-    const colorRgb = (_color) => {
-      if (_color.includes("rgb")) {
-        return _color;
-      }
-      const red = parseInt(_color.slice(1, 3), 16);
-      const green = parseInt(_color.slice(3, 5), 16);
-      const blue = parseInt(_color.slice(5, 7), 16);
-      return `rgb(${red},${green},${blue})`;
-    };
-    watch(
-      () => props.styleData,
-      () => {
-        if (props.styleData) {
-          const _color = props.styleData[`${props.model}_theme_color`] || "";
-          color.value = colorRgb(_color);
-          const _colorList = props.styleData[`${props.model}_colorList`];
-          if (_colorList == null ? void 0 : _colorList.length) {
-            colorList.value = _colorList.map((color2) => `rgb(${color2})`);
-          } else if (color.value) {
-            colorList.value = [color.value];
-          }
-        }
-      },
-      { immediate: true }
-    );
-    return (_ctx, _cache) => {
-      return colorList.value && colorList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(RadioGroup), {
-          modelValue: color.value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => color.value = $event),
-          class: "color-radio-group",
-          type: "button",
-          onChange: colorChange
-        }, {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (colr, index) => {
-              return openBlock(), createBlock(unref(Radio), {
-                key: index,
-                style: normalizeStyle({ background: `${colr} !important` }),
-                value: colr
-              }, null, 8, ["style", "value"]);
-            }), 128)),
-            createVNode(_sfc_main$1, {
-              modelValue: color.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
-              onChange: colorChange
-            }, null, 8, ["modelValue"])
-          ]),
-          _: 1
-        }, 8, ["modelValue"])
-      ])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-export { _sfc_main as default };

package/es/selectThumb/components/colorPicker.js

@@ -1,55 +0,0 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock } from "vue";
-const _hoisted_1 = ["value"];
-const _sfc_main = defineComponent({
-  __name: "colorPicker",
-  props: {
-    modelValue: String
-  },
-  emits: ["update:modelValue", "change"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const color = ref(props.modelValue || "#ffffff");
-    watch(
-      () => props.modelValue,
-      () => {
-        if (props.modelValue) {
-          color.value = rgbToHex(props.modelValue);
-        }
-      },
-      { immediate: true }
-    );
-    watch(color, (newColor) => {
-      emit("update:modelValue", newColor);
-      emit("change", newColor);
-    });
-    const updateColor = (event) => {
-      const hexColor = event.target.value;
-      const rgbColor = hexToRgb(hexColor);
-      color.value = rgbColor;
-    };
-    function hexToRgb(hex) {
-      const red = parseInt(hex.slice(1, 3), 16);
-      const green = parseInt(hex.slice(3, 5), 16);
-      const blue = parseInt(hex.slice(5, 7), 16);
-      return `rgb(${red}, ${green}, ${blue})`;
-    }
-    function rgbToHex(rgb) {
-      if (rgb.includes("NaN"))
-        return "";
-      if (rgb.includes("#"))
-        return rgb;
-      const [red, green, blue] = rgb.match(/\d+/g).map(Number);
-      return `#${((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1).toUpperCase()}`;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", {
-        class: "color-picker-input",
-        type: "color",
-        value: color.value,
-        onInput: updateColor
-      }, null, 40, _hoisted_1);
-    };
-  }
-});
-export { _sfc_main as default };

package/es/selectThumb/index.d.ts

@@ -1,2 +0,0 @@
-declare const selectThumb: any;
-export default selectThumb;

package/es/selectThumb/index.js

@@ -1,7 +0,0 @@
-import _sfc_main from "./component.js";
-const selectThumb = Object.assign(_sfc_main, {
-  install: (app) => {
-    app.component(_sfc_main.name, _sfc_main);
-  }
-});
-export { selectThumb as default };

package/es/selectThumb/style/card.less

@@ -1,95 +0,0 @@
-.thumb-card-container {
-  position: relative;
-  width: 100px;
-  height: 58px;
-  margin-right: 10px;
-  overflow: hidden;
-  border-radius: 4px;
-
-  &.model-5 {
-    width: 75px;
-    height: 100px;
-  }
-
-  &.model-7 {
-    width: 232px;
-    height: 58px;
-  }
-
-  .img-v {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .change-icon {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 25px;
-      height: 25px;
-      margin: auto;
-      color: #fff;
-      font-size: 25px;
-      cursor: pointer;
-    }
-  }
-
-  .item {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.add-thumb {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .mask {
-    position: absolute;
-    top: 0;
-    display: none;
-    // display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    color: #eaeaea;
-    font-size: 18px;
-    background: rgba(0, 0, 0, 0.3);
-
-    i {
-      display: inline-block;
-      cursor: pointer;
-
-      &:active {
-        opacity: 0.4;
-      }
-    }
-
-    .half {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 48%;
-      height: 100%;
-
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-  }
-
-  .img-v:hover .mask {
-    display: flex;
-  }
-}

package/es/selectThumb/style/colorPalette.less

@@ -1,31 +0,0 @@
-.color-radio-group {
-    overflow: hidden;
-    .arco-radio-button {
-        width: @radio-button-size;
-        height: @radio-button-size;
-        padding: 0;
-        font-size: 0 !important;
-        overflow: hidden !important;
-        background: transparent !important;
-        border-width: 0 !important;
-        box-shadow: none !important;
-        position: relative;
-        &.arco-radio-checked {
-            &::after {
-                box-sizing: content-box;
-                content: '';
-                border: 2px solid #fff;
-                border-left: 0;
-                border-top: 0;
-                height: 11px;
-                left: 12px;
-                position: absolute;
-                top: 7px;
-                transform: rotate(45deg) scaleY(1);
-                width: 5px;
-                transition: transform 0.15s ease-in 0.05s;
-                transform-origin: center;
-            }
-        }
-    }
-}

package/es/selectThumb/style/css.js

@@ -1 +0,0 @@
-import "./index.css";

package/es/selectThumb/style/index.css

@@ -1,155 +0,0 @@
-.select-thumb-container {
-  position: relative;
-}
-.select-thumb-container .thumb-card-container {
-  position: relative;
-  width: 100px;
-  height: 58px;
-  margin-right: 10px;
-  overflow: hidden;
-  border-radius: 4px;
-}
-.select-thumb-container .thumb-card-container.model-5 {
-  width: 75px;
-  height: 100px;
-}
-.select-thumb-container .thumb-card-container.model-7 {
-  width: 232px;
-  height: 58px;
-}
-.select-thumb-container .thumb-card-container .img-v {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.select-thumb-container .thumb-card-container .img-v .change-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 25px;
-  height: 25px;
-  margin: auto;
-  color: #fff;
-  font-size: 25px;
-  cursor: pointer;
-}
-.select-thumb-container .thumb-card-container .item {
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.select-thumb-container .thumb-card-container .item img {
-  width: 100%;
-  height: 100%;
-}
-.select-thumb-container .thumb-card-container .item.add-thumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.select-thumb-container .thumb-card-container .mask {
-  position: absolute;
-  top: 0;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #eaeaea;
-  font-size: 18px;
-  background: rgba(0, 0, 0, 0.3);
-}
-.select-thumb-container .thumb-card-container .mask i {
-  display: inline-block;
-  cursor: pointer;
-}
-.select-thumb-container .thumb-card-container .mask i:active {
-  opacity: 0.4;
-}
-.select-thumb-container .thumb-card-container .mask .half {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48%;
-  height: 100%;
-}
-.select-thumb-container .thumb-card-container .mask .half:hover {
-  opacity: 0.7;
-}
-.select-thumb-container .thumb-card-container .img-v:hover .mask {
-  display: flex;
-}
-.select-thumb-container .color-radio-group {
-  overflow: hidden;
-}
-.select-thumb-container .color-radio-group .arco-radio-button {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  font-size: 0 !important;
-  overflow: hidden !important;
-  background: transparent !important;
-  border-width: 0 !important;
-  box-shadow: none !important;
-  position: relative;
-}
-.select-thumb-container .color-radio-group .arco-radio-button.arco-radio-checked::after {
-  box-sizing: content-box;
-  content: '';
-  border: 2px solid #fff;
-  border-left: 0;
-  border-top: 0;
-  height: 11px;
-  left: 12px;
-  position: absolute;
-  top: 7px;
-  transform: rotate(45deg) scaleY(1);
-  width: 5px;
-  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;
-  font-weight: 700;
-  font-size: 14px;
-}
-.select-thumb-container .tip {
-  display: inline-block;
-  color: rgba(78, 89, 105, 0.4);
-  font-size: 12px;
-}
-.select-thumb-container .thumbbox {
-  margin-bottom: 10px;
-}
-.select-thumb-container .thumb-list-view {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.select-thumb-container .star {
-  margin-right: 2px !important;
-  color: red;
-}
-.select-thumb-container .flex {
-  display: flex;
-}
-.select-thumb-container .color-picker-input {
-  width: 32px;
-  height: 32px;
-  padding: 0 2px;
-  border: none;
-}

package/es/selectThumb/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/selectThumb/style/index.js

@@ -1 +0,0 @@
-import "./index.less";

package/es/selectThumb/style/index.less

@@ -1,62 +0,0 @@
-.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;
-    font-weight: 700;
-    font-size: 14px;
-  }
-
-  .tip {
-    display: inline-block;
-    color: rgba(78, 89, 105, 0.4);
-    font-size: 12px;
-  }
-
-  .thumbbox {
-    margin-bottom: 10px;
-  }
-
-  .thumb-list-view {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-
-  .star {
-    margin-right: 2px !important;
-    color: red;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .color-picker-input {
-    width: @radio-button-size;
-    height: @radio-button-size;
-    padding: 0 2px;
-    border: none;
-  }
-}

package/es/style/index.less

@@ -1 +0,0 @@
-// Global Style

package/es/style.css

@@ -1,6 +0,0 @@
-.type-icons-container {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 12px;
-  font-size: 18px;
-}