@cmstops/pro-compo 0.1.20 → 0.1.22

package/lib/editMetaInfo/script/restaurants.js

@@ -0,0 +1,128 @@
+"use strict";
+var restaurants = [
+  { value: "\u4EBA\u6C11\u89C6\u9891\u5BA2\u6237\u7AEF" },
+  { value: "\u4E2D\u56FD\u9752\u5E74\u62A5\u5BA2\u6237\u7AEF" },
+  { value: "\u592E\u89C6\u65B0\u95FB\u5BA2\u6237\u7AEF" },
+  { value: "\u592E\u89C6\u7F51" },
+  { value: "\u65B0\u534E\u793E" },
+  { value: "\u65B0\u534E\u7F51" },
+  { value: "\u4EBA\u6C11\u7F51" },
+  { value: "\u68A8\u89C6\u9891" },
+  { value: "\u5317\u9752\u7F51" },
+  { value: "21\u4E16\u7EAA\u7ECF\u6D4E\u62A5\u9053" },
+  { value: "\u4E0A\u89C2\u65B0\u95FB" },
+  { value: "\u4E1C\u5317\u65B0\u95FB\u7F51" },
+  { value: "\u4E1C\u5317\u7F51" },
+  { value: "\u4E1C\u5357\u7F51" },
+  { value: "\u4E1C\u65B9\u7F51" },
+  { value: "\u4E2D\u534E\u5973\u6027\u7F51" },
+  { value: "\u4E2D\u56FD\u53F0\u6E7E\u7F51" },
+  { value: "\u4E2D\u56FD\u5409\u6797\u7F51" },
+  { value: "\u4E2D\u56FD\u5546\u52A1\u65B0\u95FB\u7F51" },
+  { value: "\u4E2D\u56FD\u5C71\u4E1C\u7F51" },
+  { value: "\u4E2D\u56FD\u6444\u5F71\u62A5" },
+  { value: "\u4E2D\u56FD\u6559\u80B2\u5728\u7EBF" },
+  { value: "\u4E2D\u56FD\u6559\u80B2\u65B0\u95FB\u7F51" },
+  { value: "\u4E2D\u56FD\u65E5\u62A5\u7F51" },
+  { value: "\u4E2D\u56FD\u6C5F\u82CF\u7F51" },
+  { value: "\u4E2D\u56FD\u6C5F\u897F\u7F51" },
+  { value: "\u4E2D\u56FD\u7518\u8083\u7F51" },
+  { value: "\u4E2D\u56FD\u7ECF\u8425\u7F51" },
+  { value: "\u4E2D\u56FD\u7F51" },
+  { value: "\u4E2D\u56FD\u822A\u5929\u79D1\u6280\u96C6\u56E2\u6709\u9650\u516C\u53F8\u7F51\u7AD9" },
+  { value: "\u4E2D\u56FD\u897F\u85CF\u7F51" },
+  { value: "\u4E2D\u56FD\u8B66\u5BDF\u7F51" },
+  { value: "\u4E2D\u56FD\u8D28\u91CF\u65B0\u95FB\u7F51" },
+  { value: "\u4E2D\u592E\u53A8\u623F" },
+  { value: "\u4E2D\u5DE5\u7F51" },
+  { value: "\u4E2D\u65B0\u7ECF\u7EAC" },
+  { value: "\u4E2D\u65B0\u7F51" },
+  { value: "\u4E2D\u7ECF\u7F51" },
+  { value: "\u4E91\u5357\u7F51" },
+  { value: "\u4EA4\u6C47\u70B9" },
+  { value: "\u5149\u660E\u7F51" },
+  { value: "\u5317\u4EAC\u5546\u62A5" },
+  { value: "\u5317\u4EAC\u65F6\u95F4" },
+  { value: "\u5317\u4EAC\u6668\u62A5\u7F51" },
+  { value: "\u5317\u56FD\u7F51" },
+  { value: "\u5317\u65B9\u7F51" },
+  { value: "\u5343\u9F99\u65B0\u95FB\u7F51" },
+  { value: "\u534E\u58F0\u5728\u7EBF" },
+  { value: "\u534E\u9F99\u7F51" },
+  { value: "\u5357\u4EAC\u6668\u62A5\u7F51" },
+  { value: "\u5357\u65B9\u65E5\u62A5" },
+  { value: "\u5357\u6D77\u7F51" },
+  { value: "\u53F0\u6D77\u7F51" },
+  { value: "\u56DB\u5DDD\u65B0\u95FB\u7F51" },
+  { value: "\u56FD\u9645\u5728\u7EBF" },
+  { value: "\u591A\u5F69\u8D35\u5DDE\u7F51" },
+  { value: "\u5927\u4F17\u7F51" },
+  { value: "\u5927\u516C\u7F51" },
+  { value: "\u5927\u6CB3\u7F51" },
+  { value: "\u5B81\u590F\u65B0\u95FB\u7F51" },
+  { value: "\u5BA2\u5BB6\u65B0\u95FB\u7F51" },
+  { value: "\u5C01\u9762\u65B0\u95FB\u7F51" },
+  { value: "\u5E02\u573A\u77AD\u671B" },
+  { value: "\u5E02\u573A\u89C2\u5BDF\u7F51" },
+  { value: "\u5E7F\u897F\u65B0\u95FB\u7F51" },
+  { value: "\u626C\u5B50\u665A\u62A5\u7F51" },
+  { value: "\u6536\u85CF\u5FEB\u62A5" },
+  { value: "\u6587\u6C47\u62A5" },
+  { value: "\u65B0\u534E\u62A5\u4E1A\u7F51" },
+  { value: "\u65B0\u534E\u65E5\u62A5\u8D22\u7ECF\u7F51" },
+  { value: "\u65B0\u6C11\u665A\u62A5/\u65B0\u6C11\u7F51" },
+  { value: "\u65B0\u6D6A\u4E50\u5C45" },
+  { value: "\u65B0\u7586\u5929\u5C71\u7F51" },
+  { value: "\u664B\u6C5F\u7ECF\u6D4E\u62A5" },
+  { value: "\u6B63\u4E49\u7F51" },
+  { value: "\u6BCF\u5468\u6587\u6458" },
+  { value: "\u6C5F\u5357\u65F6\u62A5\u7F51" },
+  { value: "\u6C5F\u82CF\u7ECF\u6D4E\u7F51" },
+  { value: "\u6C5F\u82CF\u8206\u60C5\u89C2\u5BDF" },
+  { value: "\u6CB3\u5317\u5171\u4EA7\u515A\u5458\u7F51" },
+  { value: "\u6CB3\u5317\u65B0\u95FB\u7F51" },
+  { value: "\u6CB3\u5317\u7ECF\u6D4E\u7F51" },
+  { value: "\u6CB3\u9752\u7F51" },
+  { value: "\u6CD5\u5236\u7F51" },
+  { value: "\u6D59\u6C5F\u5728\u7EBF" },
+  { value: "\u6D77\u4E1D\u5546\u62A5" },
+  { value: "\u6D77\u5916\u7F51" },
+  { value: "\u6D77\u5CE1\u5BFC\u62A5" },
+  { value: "\u6D77\u5CE1\u6559\u80B2\u62A5" },
+  { value: "\u6D77\u5CE1\u6CD5\u6CBB\u5728\u7EBF" },
+  { value: "\u6D77\u5CE1\u6D88\u8D39\u62A5" },
+  { value: "\u6D77\u5CE1\u7F51" },
+  { value: "\u6D77\u5CE1\u90FD\u5E02\u62A5" },
+  { value: "\u6DF1\u5733\u65B0\u95FB\u7F51" },
+  { value: "\u6DF1\u5733\u65E5\u62A5" },
+  { value: "\u6F8E\u6E43\u65B0\u95FB" },
+  { value: "\u73AF\u7403\u7F51" },
+  { value: "\u7709\u5C71\u7F51" },
+  { value: "\u77F3\u5BB6\u5E84\u65B0\u95FB\u7F51" },
+  { value: "\u77F3\u72EE\u65E5\u62A5" },
+  { value: "\u798F\u5EFA\u65E5\u62A5" },
+  { value: "\u798F\u5EFA\u6CD5\u6CBB\u62A5" },
+  { value: "\u79D1\u6280\u65E5\u62A5" },
+  { value: "\u79D1\u666E\u4E2D\u56FD" },
+  { value: "\u79E6\u7687\u5C9B\u65B0\u95FB\u7F51" },
+  { value: "\u7B2C\u4E00\u751F\u6D3B\u7F51\uFF08\u77E5\u97F3\uFF09" },
+  { value: "\u7EA2\u7F51" },
+  { value: "\u7ECF\u6D4E\u89C2\u5BDF\u62A5" },
+  { value: "\u897F\u90E8\u7F51" },
+  { value: "\u89C2\u5BDF\u8005\u7F51" },
+  { value: "\u8D22\u7ECF\u7F51" },
+  { value: "\u90D1\u5DDE\u665A\u62A5" },
+  { value: "\u91CD\u5E86\u534E\u9F99\u7F51" },
+  { value: "\u91D1\u7F8A\u7F51" },
+  { value: "\u91D1\u878D\u754C" },
+  { value: "\u957F\u57CE\u7F51" },
+  { value: "\u957F\u6C5F\u4E91" },
+  { value: "\u957F\u6C5F\u7F51" },
+  { value: "\u95FD\u5357\u7F51" },
+  { value: "\u9655\u897F\u5934\u6761" },
+  { value: "\u9C81\u7F51" },
+  { value: "\u9EC4\u6CB3\u65B0\u95FB\u7F51" },
+  { value: "\u9F50\u9C81\u665A\u62A5" },
+  { value: "\u9F50\u9C81\u7F51" }
+];
+module.exports = restaurants;

package/lib/editMetaInfo/style/css.js

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

package/lib/editMetaInfo/style/index.css

@@ -0,0 +1,20 @@
+.edit-meta-info-dialog-body {
+  padding: 0;
+}
+.edit-meta-info-dialog-body .style-form-item {
+  position: relative;
+  top: -10px;
+}
+.edit-meta-info-dialog-body .style-form-item .title {
+  max-width: 100%;
+  color: var(--color-text-2);
+  font-size: 14px;
+  font-weight: 400;
+  white-space: normal;
+}
+.edit-meta-info-dialog-body .select-thumb-wrap {
+  margin-left: 20.8%;
+}
+.edit-meta-info-dialog-body .input-w {
+  width: 450px;
+}

package/lib/editMetaInfo/style/index.js

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

package/lib/editMetaInfo/style/index.less

@@ -0,0 +1,30 @@
+.edit-meta-info-dialog-body {
+  padding: 0;
+  .style-form-item {
+    position: relative;
+    top: -10px;
+    .title {
+      max-width: 100%;
+      color: var(--color-text-2);
+      font-size: 14px;
+      font-weight: 400;
+      white-space: normal;
+    }
+  }
+  .select-thumb-wrap {
+    margin-left: 20.8%;
+  }
+  .horizontal {
+    // display: flex;
+    // align-items: center;
+    // flex-direction: row !important;
+    // .arco-form-item-label-col {
+    //   margin-bottom: 0;
+    //   padding-right: 16px;
+    //   text-align: right;
+    // }
+  }
+  .input-w {
+    width: 450px;
+  }
+}

package/lib/hooks/dialogVisible.js

@@ -0,0 +1,20 @@
+"use strict";
+var vue = require("vue");
+function useDialogVisible(props, emit) {
+  const setVisible = (bool) => {
+    emit("update:visible", bool);
+  };
+  const visible = vue.computed({
+    get() {
+      return props.visible;
+    },
+    set(value) {
+      setVisible(value);
+    }
+  });
+  return {
+    visible,
+    setVisible
+  };
+}
+module.exports = useDialogVisible;

package/lib/index.css

@@ -1887,7 +1887,7 @@
 .medialist-component-item-view .info-view .abttrite-v .left .abttr.tags {
   display: flex;
   align-items: center;
-  width: 175px;
+  width: 190px;
 }
 .medialist-component-item-view .info-view .abttrite-v .right {
   margin-right: 20px;
@@ -2208,7 +2208,7 @@
 .medialist-ilive-item-view .info-view .abttrite-v .left .abttr.tags {
   display: flex;
   align-items: center;
-  width: 160px;
+  width: 190px;
 }
 .medialist-ilive-item-view .info-view .abttrite-v .left .abttr.type {
   display: inline-block;
@@ -2397,7 +2397,7 @@
 }
 .medialist-doc-item-view .info-view .abttrite-v .left .tags {
   display: inline-block;
-  width: 160px;
+  width: 190px;
 }
 .medialist-doc-item-view .info-view .abttrite-v .left .abttr {
   display: inline-block;
@@ -2429,6 +2429,121 @@
 .popper-categories {
   max-width: 600px;
 }
+.medialist-mpdoc-item-view {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.medialist-mpdoc-item-view:hover {
+  background: #fafafa;
+}
+.medialist-mpdoc-item-view .cover-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 110px;
+  height: 70px;
+  margin-right: 20px;
+  background: #edf3ff;
+}
+.medialist-mpdoc-item-view .cover-view .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-mpdoc-item-view .cover-view .batch-select {
+  position: absolute;
+  top: 3px;
+  left: 5px;
+}
+.medialist-mpdoc-item-view .cover-view .arco-image-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-mpdoc-item-view .cover-view .no-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 30px;
+}
+.medialist-mpdoc-item-view .info-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 2px 0;
+}
+.medialist-mpdoc-item-view .info-view .title {
+  width: calc(100% - 50px);
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  overflow: hidden;
+  color: #1d2129;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.medialist-mpdoc-item-view .info-view .title:hover {
+  color: #4886ff;
+  text-decoration: underline;
+}
+.medialist-mpdoc-item-view .info-view .title:hover .index {
+  text-decoration: unset;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  color: #4e5969;
+  font-size: 12px;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .icon {
+  margin-right: 8px;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .tags {
+  display: inline-block;
+  width: 190px;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr {
+  display: inline-block;
+  width: 20%;
+  margin-right: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr.btn {
+  padding: 0;
+  text-align: left;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr.btn:hover,
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr.btn:active {
+  background: transparent;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr .btn {
+  padding: 0;
+  text-align: left;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .left .abttr.time {
+  width: 30%;
+}
+.medialist-mpdoc-item-view .info-view .abttrite-v .right {
+  margin-right: 20px;
+}
 .gray-for-state-hide {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
@@ -2712,6 +2827,35 @@
 .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 .title {
   font-size: 14px;
   color: #4e5969;
@@ -2735,3 +2879,38 @@
   color: red;
   margin-right: 2px !important;
 }
+.select-thumb-container .color-picker-input {
+  width: 32px;
+  height: 32px;
+  border: none;
+  padding: 0px 2px;
+}
+.edit-meta-info-dialog-body {
+  padding: 0;
+}
+.edit-meta-info-dialog-body .style-form-item {
+  position: relative;
+  top: -10px;
+}
+.edit-meta-info-dialog-body .style-form-item .title {
+  max-width: 100%;
+  color: var(--color-text-2);
+  font-size: 14px;
+  font-weight: 400;
+  white-space: normal;
+}
+.edit-meta-info-dialog-body .select-thumb-wrap {
+  margin-left: 20.8%;
+}
+.edit-meta-info-dialog-body .input-w {
+  width: 450px;
+}
+.base-filter-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.base-filter-container .left {
+  display: flex;
+  align-items: center;
+}

package/lib/index.js

@@ -18,6 +18,8 @@ var index$d = require("./mediaFilter/index.js");
 var index$e = require("./selectAvatarList/index.js");
 var index$f = require("./userDirector/index.js");
 var index$g = require("./selectThumb/index.js");
+var index$h = require("./editMetaInfo/index.js");
+var index$i = require("./baseFilter/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -36,3 +38,5 @@ exports.mediaFilter = index$d;
 exports.selectAvatarList = index$e;
 exports.userDirector = index$f;
 exports.selectThumb = index$g;
+exports.editMetaInfo = index$h;
+exports.baseFilter = index$i;

package/lib/index.less

@@ -16,3 +16,5 @@
 @import './selectAvatarList/style/index.less';
 @import './userDirector/style/index.less';
 @import './selectThumb/style/index.less';
+@import './editMetaInfo/style/index.less';
+@import './baseFilter/style/index.less';

package/lib/selectThumb/component.js

@@ -36,7 +36,7 @@ const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode("span", { class: "sta
 const _hoisted_16 = { key: 2 };
 const _hoisted_17 = /* @__PURE__ */ vue.createElementVNode("span", { class: "tip" }, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", -1);
 const _hoisted_18 = { class: "title" };
-const _hoisted_19 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u4E13\u9898\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_19 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
 const _hoisted_20 = [
   _hoisted_19
 ];
@@ -230,6 +230,8 @@ const _sfc_main = vue.defineComponent({
     };
     const cropConfirm = (data) => {
       dialogMediaSelectionShow.value = false;
+      if (!styleData.value)
+        return;
       if (thumbBannerModel.value === "banner") {
         styleData.value.banner_url = data[0].url;
         styleData.value.banner_colorList = JSON.parse(

package/lib/selectThumb/components/colorPalette.js

@@ -1,6 +1,7 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
+var colorPicker = require("./colorPicker.js");
 const _hoisted_1 = {
   key: 0,
   class: "color-palette-container"
@@ -16,44 +17,44 @@ const _sfc_main = vue.defineComponent({
     const props = __props;
     const color = vue.ref("rgb(101,121,109)");
     const colorList = vue.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})`;
+    };
     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})`);
+          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) {
-            colorList2.value = [color.value];
+            colorList.value = [color.value];
           }
         }
-      }
+      },
+      { immediate: true }
     );
-    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),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => color.value = $event),
           class: "color-radio-group",
           type: "button",
           onChange: colorChange
@@ -62,10 +63,15 @@ const _sfc_main = vue.defineComponent({
             (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}` }),
+                style: vue.normalizeStyle({ background: `${colr} !important` }),
                 value: colr
               }, null, 8, ["style", "value"]);
-            }), 128))
+            }), 128)),
+            vue.createVNode(colorPicker, {
+              modelValue: color.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
+              onChange: colorChange
+            }, null, 8, ["modelValue"])
           ]),
           _: 1
         }, 8, ["modelValue"])

package/lib/selectThumb/components/colorPicker.js

@@ -0,0 +1,55 @@
+"use strict";
+var vue = require("vue");
+const _hoisted_1 = ["value"];
+const _sfc_main = vue.defineComponent({
+  __name: "colorPicker",
+  props: {
+    modelValue: String
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const color = vue.ref(props.modelValue || "#ffffff");
+    vue.watch(
+      () => props.modelValue,
+      () => {
+        if (props.modelValue) {
+          color.value = rgbToHex(props.modelValue);
+        }
+      },
+      { immediate: true }
+    );
+    vue.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 vue.openBlock(), vue.createElementBlock("input", {
+        class: "color-picker-input",
+        type: "color",
+        value: color.value,
+        onInput: updateColor
+      }, null, 40, _hoisted_1);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/selectThumb/style/colorPalette.less

@@ -0,0 +1,31 @@
+.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;
+            }
+        }
+    }
+}