@cmstops/pro-compo 0.1.14 → 0.1.15

package/lib/selectThumb/components/colorPalette.js

@@ -0,0 +1,76 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+const _hoisted_1 = {
+  key: 0,
+  class: "color-palette-container"
+};
+const _sfc_main = vue.defineComponent({
+  __name: "colorPalette",
+  props: {
+    styleData: {},
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const color = vue.ref("rgb(101,121,109)");
+    const colorList = vue.ref([]);
+    vue.watch(
+      () => props.styleData,
+      () => {
+        if (props.styleData) {
+          const _color = props.styleData[`${props.model}_theme_color`] || "";
+          color.value = colorRgb(_color);
+          const colorList2 = props.styleData.value[`${props.model}_colorList`];
+          if (colorList2 == null ? void 0 : colorList2.length) {
+            colorList2.value = colorList2.map((color2) => `rgb(${color2})`);
+          } else if (color.value) {
+            colorList2.value = [color.value];
+          }
+        }
+      }
+    );
+    const colorChange = (color2) => {
+      if (color2) {
+        color2.value = color2.replace(/\s+/g, "");
+        const styleData = JSON.parse(JSON.stringify(props.styleData));
+        styleData[`${props.model}_theme_color`] = color2.value;
+        emit("change", styleData);
+      }
+    };
+    const colorRgb = (_color) => {
+      if (_color.includes("rgb")) {
+        return _color;
+      }
+      const colorChange2 = [];
+      for (let i = 1; i < 7; i += 2) {
+        colorChange2.push(parseInt(`0x${_color.slice(i, i + 2)}`, 10) || 0);
+      }
+      return `rgb(${colorChange2.join(",")})`;
+    };
+    return (_ctx, _cache) => {
+      return colorList.value && colorList.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.RadioGroup), {
+          modelValue: color.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
+          class: "color-radio-group",
+          type: "button",
+          onChange: colorChange
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(colorList.value, (colr, index) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(webVue.Radio), {
+                key: index,
+                style: vue.normalizeStyle({ background: `${colr}` }),
+                value: colr
+              }, null, 8, ["style", "value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : vue.createCommentVNode("v-if", true);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/selectThumb/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const selectThumb = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = selectThumb;

package/lib/selectThumb/style/card.less

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

package/lib/selectThumb/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/selectThumb/style/index.css

@@ -0,0 +1,101 @@
+.select-thumb-container .thumb-card-container {
+  width: 100px;
+  height: 58px;
+  margin-right: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.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 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.select-thumb-container .thumb-card-container .img-v .change-icon {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+  color: #ffffff;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item.add-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+}
+.select-thumb-container .thumb-card-container .mask {
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  color: #eaeaea;
+  font-size: 18px;
+}
+.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 {
+  height: 100%;
+  width: 48%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.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 .title {
+  font-size: 14px;
+  color: #4e5969;
+  font-weight: 700;
+  line-height: 40px;
+  margin: 5px 0px;
+}
+.select-thumb-container .title span {
+  margin-right: 10px;
+}
+.select-thumb-container .title .tip {
+  font-size: 12px;
+  color: rgba(78, 89, 105, 0.4);
+}
+.select-thumb-container .thumb-list-view {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.select-thumb-container .star {
+  color: red;
+  margin-right: 2px !important;
+}

package/lib/selectThumb/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");

package/lib/selectThumb/style/index.less

@@ -0,0 +1,27 @@
+.select-thumb-container {
+  @import './card.less';
+  @import './colorPalette.less';
+  .title {
+    font-size: 14px;
+    color: #4e5969;
+    font-weight: 700;
+    line-height: 40px;
+    margin: 5px 0px;
+    span {
+      margin-right: 10px;
+    }
+    .tip {
+      font-size: 12px;
+      color: rgba(78, 89, 105, 0.4);
+    }
+  }
+  .thumb-list-view {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .star {
+    color: red;
+    margin-right: 2px !important;
+  }
+}

package/lib/uploadBefore/component.js

@@ -16,11 +16,10 @@ const _sfc_main = vue.defineComponent({
     uploadMethod: {}
   },
   emits: ["onProgress", "onListReady"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
+    const props = __props;
     const { state: visBeforeUpload, open: openBeforePannel } = toggle.useToggle();
     const { state: visUploadList, open: openListPannel } = toggle.useToggle();
-    const props = __props;
-    const emits = __emit;
     const baseApi = vue.ref(props.BASE_API || config.DEFAULT_BASE_API);
     const { preOptionsList, uploadFileToShowFileTrans } = uploadHooks.usePreUploadOptions();
     const { fileList, uploadFileAdd } = uploadHooks.useUplaodList();

package/lib/uploadBefore/components/UploadBefore.js

@@ -14,9 +14,8 @@ const _sfc_main = vue.defineComponent({
     BASE_API: {}
   },
   emits: ["confirm", "update:visable", "update:file-list"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
     const props = __props;
-    const emits = __emit;
     const modalVis = vue.toRef(props, "visable");
     const fileList = vue.toRef(props, "fileList");
     const column = [

package/lib/uploadBefore/components/UploadForClick.js

@@ -7,8 +7,7 @@ const _sfc_main = vue.defineComponent({
     uploadMethod: {}
   },
   emits: ["after-choose"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
+  setup(__props, { emit: emits }) {
     const tusUpload = (option) => {
       const { fileItem } = option;
       emits("after-choose", fileItem);

package/lib/uploadStep/component.js

@@ -27,7 +27,8 @@ const _sfc_main = vue.defineComponent({
     global: { type: Boolean }
   },
   emits: ["update:visable"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
+    const props = __props;
     const progressEnum = {
       UPLOADING: "normal",
       WATING: "normal",
@@ -40,8 +41,6 @@ const _sfc_main = vue.defineComponent({
       SUCCESS: "\u4E0A\u4F20\u5B8C\u6210",
       ERROR: "\u4E0A\u4F20\u5931\u8D25"
     };
-    const emits = __emit;
-    const props = __props;
     const showList = vue.toRef(props, "fileList");
     const { state: expend, toggle: toggleExp } = toggle.useToggle(true);
     const { state: scale, toggle: toggleSca } = toggle.useToggle();

package/lib/userDirector/component.js

@@ -23,10 +23,9 @@ const _sfc_main = vue.defineComponent({
     title: {}
   },
   emits: ["update:visible", "submit"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
-    const emit = __emit;
     const RoleTreeData = vue.ref([]);
     const DepartTreeData = vue.ref([]);
     const userSelectedList = vue.ref([]);

package/lib/userDirector/components/userTree.js

@@ -10,7 +10,7 @@ const _sfc_main = vue.defineComponent({
     list: {}
   },
   emits: ["select", "expand", "add"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const loadMore = () => {
     };
@@ -19,7 +19,6 @@ const _sfc_main = vue.defineComponent({
       title: "alias",
       key: "node_key"
     };
-    const emit = __emit;
     const select = (selectedKeys, data) => {
       emit("select", selectedKeys, data);
     };

package/lib/userDirector/style/index.css

@@ -1,4 +1,5 @@
 .user-director-modal-body {
+  background: var(--color-bg-1);
   padding: 0;
 }
 .user-director-modal-body .arco-collapse {
@@ -7,7 +8,7 @@
 .user-director-modal-body .arco-collapse-item-content {
   padding-left: 10px;
   padding-right: 0;
-  background: white;
+  background: var(--color-bg-1);
 }
 .user-select-content {
   height: 50vh;

package/lib/userDirector/style/index.less

@@ -1,4 +1,5 @@
 .user-director-modal-body {
+  background: var(--color-bg-1);
   padding: 0;
   .arco-collapse {
     height: calc(100% - 36px);
@@ -7,7 +8,7 @@
   .arco-collapse-item-content {
     padding-left: 10px;
     padding-right: 0;
-    background: white;
+    background: var(--color-bg-1);
   }
 }
 .user-select-content {

package/lib/utils/doc.js

@@ -15,12 +15,35 @@ const stateOptions = () => {
   return [{ value: "", label: "\u5168\u90E8" }, ...arr];
 };
 const docThumbObjMap = {
-  1: { alias: "\u4E09\u56FE", maxLength: 3, value: "1", ratio: 4 / 3 },
-  2: { alias: "\u5927\u56FE", maxLength: 1, value: "2", ratio: 16 / 9 },
-  3: { alias: "\u5355\u56FE", maxLength: 1, value: "3", ratio: 4 / 3 },
-  4: { alias: "\u65E0\u56FE", maxLength: 0, value: "4", ratio: 1 },
-  5: { alias: "\u7AD6\u56FE", maxLength: 1, value: "5", ratio: 3 / 4 },
-  7: { alias: "\u7A84\u56FE", maxLength: 1, value: "7", ratio: 4 / 1 }
+  1: { alias: "\u4E09\u56FE", maxLength: 3, value: "1", ratioStr: "4:3", ratio: 4 / 3 },
+  2: {
+    alias: "\u5927\u56FE",
+    maxLength: 1,
+    value: "2",
+    ratioStr: "16:9",
+    ratio: 16 / 9
+  },
+  3: {
+    alias: "\u5355\u56FE",
+    maxLength: 1,
+    value: "3",
+    ratioStr: "4:3 ",
+    ratio: 4 / 3
+  },
+  4: { alias: "\u65E0\u56FE", maxLength: 0, value: "4", ratioStr: "", ratio: 1 },
+  5: { alias: "\u7AD6\u56FE", maxLength: 1, value: "5", ratioStr: "3:4", ratio: 3 / 4 },
+  7: { alias: "\u7A84\u56FE", maxLength: 1, value: "7", ratioStr: "4:1", ratio: 4 / 1 }
+};
+const docThumbRatioMap = () => {
+  const obj = {};
+  Object.keys(docThumbObjMap).map((key) => {
+    obj[key] = docThumbObjMap[key].ratio;
+    return {};
+  });
+  return obj;
+};
+const docThumbArrMap = () => {
+  return Object.values(docThumbObjMap);
 };
 const docThumbTypeMap = () => {
   const arr = Object.keys(docThumbObjMap).map((key) => {
@@ -53,7 +76,9 @@ const typeOptions = () => {
 };
 exports.docPubStateMap = docPubStateMap;
 exports.docSeries = docSeries;
+exports.docThumbArrMap = docThumbArrMap;
 exports.docThumbObjMap = docThumbObjMap;
+exports.docThumbRatioMap = docThumbRatioMap;
 exports.docThumbTypeMap = docThumbTypeMap;
 exports.stateOptions = stateOptions;
 exports.typeOptions = typeOptions;

package/lib/utils/index.js

@@ -31,6 +31,12 @@ const to = (promise, errorExt) => {
     return [err, void 0];
   });
 };
+function replaceSuffix(str, insert) {
+  const reg = /\.[^\.]+$/;
+  const match = str.match(reg);
+  return match ? str.replace(reg, insert + match) : str + insert;
+}
 exports.dateYYYYDDMMHHmm = dateYYYYDDMMHHmm;
 exports.generateUUID = generateUUID;
+exports.replaceSuffix = replaceSuffix;
 exports.to = to;

package/lib/utils/tusUpload.js

@@ -36,7 +36,7 @@ function uploadByTUS(file, progressCallback) {
         reject(error);
       },
       onProgress: (bytesSent, bytesTotal) => {
-        progressCallback(bytesSent, bytesTotal);
+        progressCallback && progressCallback(bytesSent, bytesTotal);
       },
       onSuccess: () => {
         resolve(upload);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "",
   "keywords": [
     "vue",
@@ -49,7 +49,12 @@
     "tus-js-client": "^3.1.1",
     "dayjs": "^1.11.9",
     "@arco-design/web-vue": "~2",
-    "@arco-iconbox/vue-cmstop-icons": "^0.0.4"
+    "@arco-iconbox/vue-cmstop-icons": "^0.0.4",
+    "@popperjs/core": "^2.11.8",
+    "gif-to-canvas": "^1.0.0",
+    "gif.js": "^0.2.0",
+    "colorthief": "^2.4.0",
+    "cropperjs": "^1.6.1"
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
@@ -78,6 +83,8 @@
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/test-utils": "^2.0.0-beta.14",
     "babel-loader": "^8.2.2",
+    "colorthief": "^2.4.0",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.11.9",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -88,6 +95,8 @@
     "eslint-plugin-vue": "^7.7.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.1.0",
+    "gif-to-canvas": "^1.0.0",
+    "gif.js": "^0.2.0",
     "husky": "^4.3.7",
     "jest": "^29.7.0",
     "less": "^4.1.1",