@cmstops/pro-compo 0.1.20 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/index.css +55 -0
  2. package/dist/index.min.css +1 -1
  3. package/es/contentModal/component.js +0 -1
  4. package/es/contentModal/components/ViewAllColumn/index.js +1 -0
  5. package/es/editMetaInfo/component.d.ts +0 -0
  6. package/es/editMetaInfo/component.js +87 -0
  7. package/es/editMetaInfo/components/metaInfoForm.d.ts +0 -0
  8. package/es/editMetaInfo/components/metaInfoForm.js +621 -0
  9. package/es/editMetaInfo/index.d.ts +2 -0
  10. package/es/editMetaInfo/index.js +7 -0
  11. package/es/editMetaInfo/script/api.d.ts +6 -0
  12. package/es/editMetaInfo/script/api.js +17 -0
  13. package/es/editMetaInfo/script/restaurants.d.ts +4 -0
  14. package/es/editMetaInfo/script/restaurants.js +127 -0
  15. package/es/editMetaInfo/style/css.js +1 -0
  16. package/es/editMetaInfo/style/index.css +20 -0
  17. package/es/editMetaInfo/style/index.d.ts +1 -0
  18. package/es/editMetaInfo/style/index.js +1 -0
  19. package/es/editMetaInfo/style/index.less +30 -0
  20. package/es/hooks/dialogVisible.d.ts +8 -0
  21. package/es/hooks/dialogVisible.js +19 -0
  22. package/es/index.css +55 -0
  23. package/es/index.d.ts +1 -0
  24. package/es/index.js +1 -0
  25. package/es/index.less +1 -0
  26. package/es/selectThumb/component.js +3 -1
  27. package/es/selectThumb/components/colorPalette.js +32 -26
  28. package/es/selectThumb/components/colorPicker.d.ts +0 -0
  29. package/es/selectThumb/components/colorPicker.js +54 -0
  30. package/es/selectThumb/style/colorPalette.less +31 -0
  31. package/es/selectThumb/style/index.css +35 -0
  32. package/es/selectThumb/style/index.less +7 -0
  33. package/es/utils/index.d.ts +1 -0
  34. package/es/utils/index.js +16 -1
  35. package/lib/contentModal/component.js +0 -1
  36. package/lib/contentModal/components/ViewAllColumn/index.js +1 -0
  37. package/lib/editMetaInfo/component.js +88 -0
  38. package/lib/editMetaInfo/components/metaInfoForm.js +622 -0
  39. package/lib/editMetaInfo/index.js +8 -0
  40. package/lib/editMetaInfo/script/api.js +20 -0
  41. package/lib/editMetaInfo/script/restaurants.js +128 -0
  42. package/lib/editMetaInfo/style/css.js +2 -0
  43. package/lib/editMetaInfo/style/index.css +20 -0
  44. package/lib/editMetaInfo/style/index.js +2 -0
  45. package/lib/editMetaInfo/style/index.less +30 -0
  46. package/lib/hooks/dialogVisible.js +20 -0
  47. package/lib/index.css +55 -0
  48. package/lib/index.js +2 -0
  49. package/lib/index.less +1 -0
  50. package/lib/selectThumb/component.js +3 -1
  51. package/lib/selectThumb/components/colorPalette.js +32 -26
  52. package/lib/selectThumb/components/colorPicker.js +55 -0
  53. package/lib/selectThumb/style/colorPalette.less +31 -0
  54. package/lib/selectThumb/style/index.css +35 -0
  55. package/lib/selectThumb/style/index.less +7 -0
  56. package/lib/utils/index.js +16 -0
  57. package/package.json +1 -1
@@ -0,0 +1,127 @@
1
+ var restaurants = [
2
+ { value: "\u4EBA\u6C11\u89C6\u9891\u5BA2\u6237\u7AEF" },
3
+ { value: "\u4E2D\u56FD\u9752\u5E74\u62A5\u5BA2\u6237\u7AEF" },
4
+ { value: "\u592E\u89C6\u65B0\u95FB\u5BA2\u6237\u7AEF" },
5
+ { value: "\u592E\u89C6\u7F51" },
6
+ { value: "\u65B0\u534E\u793E" },
7
+ { value: "\u65B0\u534E\u7F51" },
8
+ { value: "\u4EBA\u6C11\u7F51" },
9
+ { value: "\u68A8\u89C6\u9891" },
10
+ { value: "\u5317\u9752\u7F51" },
11
+ { value: "21\u4E16\u7EAA\u7ECF\u6D4E\u62A5\u9053" },
12
+ { value: "\u4E0A\u89C2\u65B0\u95FB" },
13
+ { value: "\u4E1C\u5317\u65B0\u95FB\u7F51" },
14
+ { value: "\u4E1C\u5317\u7F51" },
15
+ { value: "\u4E1C\u5357\u7F51" },
16
+ { value: "\u4E1C\u65B9\u7F51" },
17
+ { value: "\u4E2D\u534E\u5973\u6027\u7F51" },
18
+ { value: "\u4E2D\u56FD\u53F0\u6E7E\u7F51" },
19
+ { value: "\u4E2D\u56FD\u5409\u6797\u7F51" },
20
+ { value: "\u4E2D\u56FD\u5546\u52A1\u65B0\u95FB\u7F51" },
21
+ { value: "\u4E2D\u56FD\u5C71\u4E1C\u7F51" },
22
+ { value: "\u4E2D\u56FD\u6444\u5F71\u62A5" },
23
+ { value: "\u4E2D\u56FD\u6559\u80B2\u5728\u7EBF" },
24
+ { value: "\u4E2D\u56FD\u6559\u80B2\u65B0\u95FB\u7F51" },
25
+ { value: "\u4E2D\u56FD\u65E5\u62A5\u7F51" },
26
+ { value: "\u4E2D\u56FD\u6C5F\u82CF\u7F51" },
27
+ { value: "\u4E2D\u56FD\u6C5F\u897F\u7F51" },
28
+ { value: "\u4E2D\u56FD\u7518\u8083\u7F51" },
29
+ { value: "\u4E2D\u56FD\u7ECF\u8425\u7F51" },
30
+ { value: "\u4E2D\u56FD\u7F51" },
31
+ { value: "\u4E2D\u56FD\u822A\u5929\u79D1\u6280\u96C6\u56E2\u6709\u9650\u516C\u53F8\u7F51\u7AD9" },
32
+ { value: "\u4E2D\u56FD\u897F\u85CF\u7F51" },
33
+ { value: "\u4E2D\u56FD\u8B66\u5BDF\u7F51" },
34
+ { value: "\u4E2D\u56FD\u8D28\u91CF\u65B0\u95FB\u7F51" },
35
+ { value: "\u4E2D\u592E\u53A8\u623F" },
36
+ { value: "\u4E2D\u5DE5\u7F51" },
37
+ { value: "\u4E2D\u65B0\u7ECF\u7EAC" },
38
+ { value: "\u4E2D\u65B0\u7F51" },
39
+ { value: "\u4E2D\u7ECF\u7F51" },
40
+ { value: "\u4E91\u5357\u7F51" },
41
+ { value: "\u4EA4\u6C47\u70B9" },
42
+ { value: "\u5149\u660E\u7F51" },
43
+ { value: "\u5317\u4EAC\u5546\u62A5" },
44
+ { value: "\u5317\u4EAC\u65F6\u95F4" },
45
+ { value: "\u5317\u4EAC\u6668\u62A5\u7F51" },
46
+ { value: "\u5317\u56FD\u7F51" },
47
+ { value: "\u5317\u65B9\u7F51" },
48
+ { value: "\u5343\u9F99\u65B0\u95FB\u7F51" },
49
+ { value: "\u534E\u58F0\u5728\u7EBF" },
50
+ { value: "\u534E\u9F99\u7F51" },
51
+ { value: "\u5357\u4EAC\u6668\u62A5\u7F51" },
52
+ { value: "\u5357\u65B9\u65E5\u62A5" },
53
+ { value: "\u5357\u6D77\u7F51" },
54
+ { value: "\u53F0\u6D77\u7F51" },
55
+ { value: "\u56DB\u5DDD\u65B0\u95FB\u7F51" },
56
+ { value: "\u56FD\u9645\u5728\u7EBF" },
57
+ { value: "\u591A\u5F69\u8D35\u5DDE\u7F51" },
58
+ { value: "\u5927\u4F17\u7F51" },
59
+ { value: "\u5927\u516C\u7F51" },
60
+ { value: "\u5927\u6CB3\u7F51" },
61
+ { value: "\u5B81\u590F\u65B0\u95FB\u7F51" },
62
+ { value: "\u5BA2\u5BB6\u65B0\u95FB\u7F51" },
63
+ { value: "\u5C01\u9762\u65B0\u95FB\u7F51" },
64
+ { value: "\u5E02\u573A\u77AD\u671B" },
65
+ { value: "\u5E02\u573A\u89C2\u5BDF\u7F51" },
66
+ { value: "\u5E7F\u897F\u65B0\u95FB\u7F51" },
67
+ { value: "\u626C\u5B50\u665A\u62A5\u7F51" },
68
+ { value: "\u6536\u85CF\u5FEB\u62A5" },
69
+ { value: "\u6587\u6C47\u62A5" },
70
+ { value: "\u65B0\u534E\u62A5\u4E1A\u7F51" },
71
+ { value: "\u65B0\u534E\u65E5\u62A5\u8D22\u7ECF\u7F51" },
72
+ { value: "\u65B0\u6C11\u665A\u62A5/\u65B0\u6C11\u7F51" },
73
+ { value: "\u65B0\u6D6A\u4E50\u5C45" },
74
+ { value: "\u65B0\u7586\u5929\u5C71\u7F51" },
75
+ { value: "\u664B\u6C5F\u7ECF\u6D4E\u62A5" },
76
+ { value: "\u6B63\u4E49\u7F51" },
77
+ { value: "\u6BCF\u5468\u6587\u6458" },
78
+ { value: "\u6C5F\u5357\u65F6\u62A5\u7F51" },
79
+ { value: "\u6C5F\u82CF\u7ECF\u6D4E\u7F51" },
80
+ { value: "\u6C5F\u82CF\u8206\u60C5\u89C2\u5BDF" },
81
+ { value: "\u6CB3\u5317\u5171\u4EA7\u515A\u5458\u7F51" },
82
+ { value: "\u6CB3\u5317\u65B0\u95FB\u7F51" },
83
+ { value: "\u6CB3\u5317\u7ECF\u6D4E\u7F51" },
84
+ { value: "\u6CB3\u9752\u7F51" },
85
+ { value: "\u6CD5\u5236\u7F51" },
86
+ { value: "\u6D59\u6C5F\u5728\u7EBF" },
87
+ { value: "\u6D77\u4E1D\u5546\u62A5" },
88
+ { value: "\u6D77\u5916\u7F51" },
89
+ { value: "\u6D77\u5CE1\u5BFC\u62A5" },
90
+ { value: "\u6D77\u5CE1\u6559\u80B2\u62A5" },
91
+ { value: "\u6D77\u5CE1\u6CD5\u6CBB\u5728\u7EBF" },
92
+ { value: "\u6D77\u5CE1\u6D88\u8D39\u62A5" },
93
+ { value: "\u6D77\u5CE1\u7F51" },
94
+ { value: "\u6D77\u5CE1\u90FD\u5E02\u62A5" },
95
+ { value: "\u6DF1\u5733\u65B0\u95FB\u7F51" },
96
+ { value: "\u6DF1\u5733\u65E5\u62A5" },
97
+ { value: "\u6F8E\u6E43\u65B0\u95FB" },
98
+ { value: "\u73AF\u7403\u7F51" },
99
+ { value: "\u7709\u5C71\u7F51" },
100
+ { value: "\u77F3\u5BB6\u5E84\u65B0\u95FB\u7F51" },
101
+ { value: "\u77F3\u72EE\u65E5\u62A5" },
102
+ { value: "\u798F\u5EFA\u65E5\u62A5" },
103
+ { value: "\u798F\u5EFA\u6CD5\u6CBB\u62A5" },
104
+ { value: "\u79D1\u6280\u65E5\u62A5" },
105
+ { value: "\u79D1\u666E\u4E2D\u56FD" },
106
+ { value: "\u79E6\u7687\u5C9B\u65B0\u95FB\u7F51" },
107
+ { value: "\u7B2C\u4E00\u751F\u6D3B\u7F51\uFF08\u77E5\u97F3\uFF09" },
108
+ { value: "\u7EA2\u7F51" },
109
+ { value: "\u7ECF\u6D4E\u89C2\u5BDF\u62A5" },
110
+ { value: "\u897F\u90E8\u7F51" },
111
+ { value: "\u89C2\u5BDF\u8005\u7F51" },
112
+ { value: "\u8D22\u7ECF\u7F51" },
113
+ { value: "\u90D1\u5DDE\u665A\u62A5" },
114
+ { value: "\u91CD\u5E86\u534E\u9F99\u7F51" },
115
+ { value: "\u91D1\u7F8A\u7F51" },
116
+ { value: "\u91D1\u878D\u754C" },
117
+ { value: "\u957F\u57CE\u7F51" },
118
+ { value: "\u957F\u6C5F\u4E91" },
119
+ { value: "\u957F\u6C5F\u7F51" },
120
+ { value: "\u95FD\u5357\u7F51" },
121
+ { value: "\u9655\u897F\u5934\u6761" },
122
+ { value: "\u9C81\u7F51" },
123
+ { value: "\u9EC4\u6CB3\u65B0\u95FB\u7F51" },
124
+ { value: "\u9F50\u9C81\u665A\u62A5" },
125
+ { value: "\u9F50\u9C81\u7F51" }
126
+ ];
127
+ export { restaurants as default };
@@ -0,0 +1 @@
1
+ import "./index.css";
@@ -0,0 +1,20 @@
1
+ .edit-meta-info-dialog-body {
2
+ padding: 0;
3
+ }
4
+ .edit-meta-info-dialog-body .style-form-item {
5
+ position: relative;
6
+ top: -10px;
7
+ }
8
+ .edit-meta-info-dialog-body .style-form-item .title {
9
+ max-width: 100%;
10
+ color: var(--color-text-2);
11
+ font-size: 14px;
12
+ font-weight: 400;
13
+ white-space: normal;
14
+ }
15
+ .edit-meta-info-dialog-body .select-thumb-wrap {
16
+ margin-left: 20.8%;
17
+ }
18
+ .edit-meta-info-dialog-body .input-w {
19
+ width: 450px;
20
+ }
@@ -0,0 +1 @@
1
+ import './index.less';
@@ -0,0 +1 @@
1
+ import "./index.less";
@@ -0,0 +1,30 @@
1
+ .edit-meta-info-dialog-body {
2
+ padding: 0;
3
+ .style-form-item {
4
+ position: relative;
5
+ top: -10px;
6
+ .title {
7
+ max-width: 100%;
8
+ color: var(--color-text-2);
9
+ font-size: 14px;
10
+ font-weight: 400;
11
+ white-space: normal;
12
+ }
13
+ }
14
+ .select-thumb-wrap {
15
+ margin-left: 20.8%;
16
+ }
17
+ .horizontal {
18
+ // display: flex;
19
+ // align-items: center;
20
+ // flex-direction: row !important;
21
+ // .arco-form-item-label-col {
22
+ // margin-bottom: 0;
23
+ // padding-right: 16px;
24
+ // text-align: right;
25
+ // }
26
+ }
27
+ .input-w {
28
+ width: 450px;
29
+ }
30
+ }
@@ -0,0 +1,8 @@
1
+ declare type ComponentProps = {
2
+ visible: boolean;
3
+ };
4
+ export default function useDialogVisible(props: ComponentProps, emit: any): {
5
+ visible: import("vue").WritableComputedRef<unknown>;
6
+ setVisible: (bool: boolean) => void;
7
+ };
8
+ export {};
@@ -0,0 +1,19 @@
1
+ import { computed } from "vue";
2
+ function useDialogVisible(props, emit) {
3
+ const setVisible = (bool) => {
4
+ emit("update:visible", bool);
5
+ };
6
+ const visible = computed({
7
+ get() {
8
+ return props.visible;
9
+ },
10
+ set(value) {
11
+ setVisible(value);
12
+ }
13
+ });
14
+ return {
15
+ visible,
16
+ setVisible
17
+ };
18
+ }
19
+ export { useDialogVisible as default };
package/es/index.css CHANGED
@@ -2712,6 +2712,35 @@
2712
2712
  .select-thumb-container .thumb-card-container .img-v:hover .mask {
2713
2713
  display: flex;
2714
2714
  }
2715
+ .select-thumb-container .color-radio-group {
2716
+ overflow: hidden;
2717
+ }
2718
+ .select-thumb-container .color-radio-group .arco-radio-button {
2719
+ width: 32px;
2720
+ height: 32px;
2721
+ padding: 0;
2722
+ font-size: 0 !important;
2723
+ overflow: hidden !important;
2724
+ background: transparent !important;
2725
+ border-width: 0 !important;
2726
+ box-shadow: none !important;
2727
+ position: relative;
2728
+ }
2729
+ .select-thumb-container .color-radio-group .arco-radio-button.arco-radio-checked::after {
2730
+ box-sizing: content-box;
2731
+ content: '';
2732
+ border: 2px solid #fff;
2733
+ border-left: 0;
2734
+ border-top: 0;
2735
+ height: 11px;
2736
+ left: 12px;
2737
+ position: absolute;
2738
+ top: 7px;
2739
+ transform: rotate(45deg) scaleY(1);
2740
+ width: 5px;
2741
+ transition: transform 0.15s ease-in 0.05s;
2742
+ transform-origin: center;
2743
+ }
2715
2744
  .select-thumb-container .title {
2716
2745
  font-size: 14px;
2717
2746
  color: #4e5969;
@@ -2735,3 +2764,29 @@
2735
2764
  color: red;
2736
2765
  margin-right: 2px !important;
2737
2766
  }
2767
+ .select-thumb-container .color-picker-input {
2768
+ width: 32px;
2769
+ height: 32px;
2770
+ border: none;
2771
+ padding: 0px 2px;
2772
+ }
2773
+ .edit-meta-info-dialog-body {
2774
+ padding: 0;
2775
+ }
2776
+ .edit-meta-info-dialog-body .style-form-item {
2777
+ position: relative;
2778
+ top: -10px;
2779
+ }
2780
+ .edit-meta-info-dialog-body .style-form-item .title {
2781
+ max-width: 100%;
2782
+ color: var(--color-text-2);
2783
+ font-size: 14px;
2784
+ font-weight: 400;
2785
+ white-space: normal;
2786
+ }
2787
+ .edit-meta-info-dialog-body .select-thumb-wrap {
2788
+ margin-left: 20.8%;
2789
+ }
2790
+ .edit-meta-info-dialog-body .input-w {
2791
+ width: 450px;
2792
+ }
package/es/index.d.ts CHANGED
@@ -16,3 +16,4 @@ export { default as mediaFilter } from './mediaFilter';
16
16
  export { default as selectAvatarList } from './selectAvatarList';
17
17
  export { default as userDirector } from './userDirector';
18
18
  export { default as selectThumb } from './selectThumb';
19
+ export { default as editMetaInfo } from './editMetaInfo';
package/es/index.js CHANGED
@@ -16,3 +16,4 @@ export { default as mediaFilter } from "./mediaFilter/index.js";
16
16
  export { default as selectAvatarList } from "./selectAvatarList/index.js";
17
17
  export { default as userDirector } from "./userDirector/index.js";
18
18
  export { default as selectThumb } from "./selectThumb/index.js";
19
+ export { default as editMetaInfo } from "./editMetaInfo/index.js";
package/es/index.less CHANGED
@@ -16,3 +16,4 @@
16
16
  @import './selectAvatarList/style/index.less';
17
17
  @import './userDirector/style/index.less';
18
18
  @import './selectThumb/style/index.less';
19
+ @import './editMetaInfo/style/index.less';
@@ -35,7 +35,7 @@ const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", { class: "star" }
35
35
  const _hoisted_16 = { key: 2 };
36
36
  const _hoisted_17 = /* @__PURE__ */ createElementVNode("span", { class: "tip" }, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", -1);
37
37
  const _hoisted_18 = { class: "title" };
38
- const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u4E13\u9898\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
38
+ const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
39
39
  const _hoisted_20 = [
40
40
  _hoisted_19
41
41
  ];
@@ -229,6 +229,8 @@ const _sfc_main = defineComponent({
229
229
  };
230
230
  const cropConfirm = (data) => {
231
231
  dialogMediaSelectionShow.value = false;
232
+ if (!styleData.value)
233
+ return;
232
234
  if (thumbBannerModel.value === "banner") {
233
235
  styleData.value.banner_url = data[0].url;
234
236
  styleData.value.banner_colorList = JSON.parse(
@@ -1,5 +1,6 @@
1
1
  import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode } from "vue";
2
2
  import { RadioGroup, Radio } from "@arco-design/web-vue";
3
+ import _sfc_main$1 from "./colorPicker.js";
3
4
  const _hoisted_1 = {
4
5
  key: 0,
5
6
  class: "color-palette-container"
@@ -15,44 +16,44 @@ const _sfc_main = defineComponent({
15
16
  const props = __props;
16
17
  const color = ref("rgb(101,121,109)");
17
18
  const colorList = ref([]);
19
+ const colorChange = (_color) => {
20
+ if (_color) {
21
+ color.value = _color.replace(/\s+/g, "");
22
+ const styleData = JSON.parse(JSON.stringify(props.styleData));
23
+ styleData[`${props.model}_theme_color`] = color.value;
24
+ emit("change", styleData);
25
+ }
26
+ };
27
+ const colorRgb = (_color) => {
28
+ if (_color.includes("rgb")) {
29
+ return _color;
30
+ }
31
+ const red = parseInt(_color.slice(1, 3), 16);
32
+ const green = parseInt(_color.slice(3, 5), 16);
33
+ const blue = parseInt(_color.slice(5, 7), 16);
34
+ return `rgb(${red},${green},${blue})`;
35
+ };
18
36
  watch(
19
37
  () => props.styleData,
20
38
  () => {
21
39
  if (props.styleData) {
22
40
  const _color = props.styleData[`${props.model}_theme_color`] || "";
23
41
  color.value = colorRgb(_color);
24
- const colorList2 = props.styleData.value[`${props.model}_colorList`];
25
- if (colorList2 == null ? void 0 : colorList2.length) {
26
- colorList2.value = colorList2.map((color2) => `rgb(${color2})`);
42
+ const _colorList = props.styleData[`${props.model}_colorList`];
43
+ if (_colorList == null ? void 0 : _colorList.length) {
44
+ colorList.value = _colorList.map((color2) => `rgb(${color2})`);
27
45
  } else if (color.value) {
28
- colorList2.value = [color.value];
46
+ colorList.value = [color.value];
29
47
  }
30
48
  }
31
- }
49
+ },
50
+ { immediate: true }
32
51
  );
33
- const colorChange = (color2) => {
34
- if (color2) {
35
- color2.value = color2.replace(/\s+/g, "");
36
- const styleData = JSON.parse(JSON.stringify(props.styleData));
37
- styleData[`${props.model}_theme_color`] = color2.value;
38
- emit("change", styleData);
39
- }
40
- };
41
- const colorRgb = (_color) => {
42
- if (_color.includes("rgb")) {
43
- return _color;
44
- }
45
- const colorChange2 = [];
46
- for (let i = 1; i < 7; i += 2) {
47
- colorChange2.push(parseInt(`0x${_color.slice(i, i + 2)}`, 10) || 0);
48
- }
49
- return `rgb(${colorChange2.join(",")})`;
50
- };
51
52
  return (_ctx, _cache) => {
52
53
  return colorList.value && colorList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
53
54
  createVNode(unref(RadioGroup), {
54
55
  modelValue: color.value,
55
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
56
+ "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => color.value = $event),
56
57
  class: "color-radio-group",
57
58
  type: "button",
58
59
  onChange: colorChange
@@ -61,10 +62,15 @@ const _sfc_main = defineComponent({
61
62
  (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (colr, index) => {
62
63
  return openBlock(), createBlock(unref(Radio), {
63
64
  key: index,
64
- style: normalizeStyle({ background: `${colr}` }),
65
+ style: normalizeStyle({ background: `${colr} !important` }),
65
66
  value: colr
66
67
  }, null, 8, ["style", "value"]);
67
- }), 128))
68
+ }), 128)),
69
+ createVNode(_sfc_main$1, {
70
+ modelValue: color.value,
71
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
72
+ onChange: colorChange
73
+ }, null, 8, ["modelValue"])
68
74
  ]),
69
75
  _: 1
70
76
  }, 8, ["modelValue"])
File without changes
@@ -0,0 +1,54 @@
1
+ import { defineComponent, ref, watch, openBlock, createElementBlock } from "vue";
2
+ const _hoisted_1 = ["value"];
3
+ const _sfc_main = defineComponent({
4
+ __name: "colorPicker",
5
+ props: {
6
+ modelValue: String
7
+ },
8
+ emits: ["update:modelValue", "change"],
9
+ setup(__props, { emit }) {
10
+ const props = __props;
11
+ const color = ref(props.modelValue || "#ffffff");
12
+ watch(
13
+ () => props.modelValue,
14
+ () => {
15
+ if (props.modelValue) {
16
+ color.value = rgbToHex(props.modelValue);
17
+ }
18
+ },
19
+ { immediate: true }
20
+ );
21
+ watch(color, (newColor) => {
22
+ emit("update:modelValue", newColor);
23
+ emit("change", newColor);
24
+ });
25
+ const updateColor = (event) => {
26
+ const hexColor = event.target.value;
27
+ const rgbColor = hexToRgb(hexColor);
28
+ color.value = rgbColor;
29
+ };
30
+ function hexToRgb(hex) {
31
+ const red = parseInt(hex.slice(1, 3), 16);
32
+ const green = parseInt(hex.slice(3, 5), 16);
33
+ const blue = parseInt(hex.slice(5, 7), 16);
34
+ return `rgb(${red}, ${green}, ${blue})`;
35
+ }
36
+ function rgbToHex(rgb) {
37
+ if (rgb.includes("NaN"))
38
+ return "";
39
+ if (rgb.includes("#"))
40
+ return rgb;
41
+ const [red, green, blue] = rgb.match(/\d+/g).map(Number);
42
+ return `#${((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1).toUpperCase()}`;
43
+ }
44
+ return (_ctx, _cache) => {
45
+ return openBlock(), createElementBlock("input", {
46
+ class: "color-picker-input",
47
+ type: "color",
48
+ value: color.value,
49
+ onInput: updateColor
50
+ }, null, 40, _hoisted_1);
51
+ };
52
+ }
53
+ });
54
+ export { _sfc_main as default };
@@ -0,0 +1,31 @@
1
+ .color-radio-group {
2
+ overflow: hidden;
3
+ .arco-radio-button {
4
+ width: @radio-button-size;
5
+ height: @radio-button-size;
6
+ padding: 0;
7
+ font-size: 0 !important;
8
+ overflow: hidden !important;
9
+ background: transparent !important;
10
+ border-width: 0 !important;
11
+ box-shadow: none !important;
12
+ position: relative;
13
+ &.arco-radio-checked {
14
+ &::after {
15
+ box-sizing: content-box;
16
+ content: '';
17
+ border: 2px solid #fff;
18
+ border-left: 0;
19
+ border-top: 0;
20
+ height: 11px;
21
+ left: 12px;
22
+ position: absolute;
23
+ top: 7px;
24
+ transform: rotate(45deg) scaleY(1);
25
+ width: 5px;
26
+ transition: transform 0.15s ease-in 0.05s;
27
+ transform-origin: center;
28
+ }
29
+ }
30
+ }
31
+ }
@@ -80,6 +80,35 @@
80
80
  .select-thumb-container .thumb-card-container .img-v:hover .mask {
81
81
  display: flex;
82
82
  }
83
+ .select-thumb-container .color-radio-group {
84
+ overflow: hidden;
85
+ }
86
+ .select-thumb-container .color-radio-group .arco-radio-button {
87
+ width: 32px;
88
+ height: 32px;
89
+ padding: 0;
90
+ font-size: 0 !important;
91
+ overflow: hidden !important;
92
+ background: transparent !important;
93
+ border-width: 0 !important;
94
+ box-shadow: none !important;
95
+ position: relative;
96
+ }
97
+ .select-thumb-container .color-radio-group .arco-radio-button.arco-radio-checked::after {
98
+ box-sizing: content-box;
99
+ content: '';
100
+ border: 2px solid #fff;
101
+ border-left: 0;
102
+ border-top: 0;
103
+ height: 11px;
104
+ left: 12px;
105
+ position: absolute;
106
+ top: 7px;
107
+ transform: rotate(45deg) scaleY(1);
108
+ width: 5px;
109
+ transition: transform 0.15s ease-in 0.05s;
110
+ transform-origin: center;
111
+ }
83
112
  .select-thumb-container .title {
84
113
  font-size: 14px;
85
114
  color: #4e5969;
@@ -103,3 +132,9 @@
103
132
  color: red;
104
133
  margin-right: 2px !important;
105
134
  }
135
+ .select-thumb-container .color-picker-input {
136
+ width: 32px;
137
+ height: 32px;
138
+ border: none;
139
+ padding: 0px 2px;
140
+ }
@@ -1,4 +1,5 @@
1
1
  .select-thumb-container {
2
+ @radio-button-size: 32px;
2
3
  @import './card.less';
3
4
  @import './colorPalette.less';
4
5
  .title {
@@ -24,4 +25,10 @@
24
25
  color: red;
25
26
  margin-right: 2px !important;
26
27
  }
28
+ .color-picker-input {
29
+ width: @radio-button-size;
30
+ height: @radio-button-size;
31
+ border: none;
32
+ padding: 0px 2px;
33
+ }
27
34
  }
@@ -10,3 +10,4 @@ export declare const to: <T, U = Error>(promise: Promise<T>, errorExt?: any) =>
10
10
  export declare function replaceSuffix(str: string, insert: string): string;
11
11
  export declare const noCoverText: (item: any) => any;
12
12
  export declare const timeFormat: (value: any) => string;
13
+ export declare const validateForm: (formRef: any) => Promise<unknown>;
package/es/utils/index.js CHANGED
@@ -45,4 +45,19 @@ const timeFormat = (value) => {
45
45
  const date = new Date(value);
46
46
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
47
47
  };
48
- export { dateYYYYDDMMHHmm, generateUUID, noCoverText, replaceSuffix, timeFormat, to };
48
+ const validateForm = (formRef) => {
49
+ return new Promise((resolve, reject) => {
50
+ try {
51
+ formRef.value.validate((valid) => {
52
+ if (valid) {
53
+ resolve(false);
54
+ } else {
55
+ resolve(true);
56
+ }
57
+ });
58
+ } catch (error) {
59
+ resolve(false);
60
+ }
61
+ });
62
+ };
63
+ export { dateYYYYDDMMHHmm, generateUUID, noCoverText, replaceSuffix, timeFormat, to, validateForm };
@@ -54,7 +54,6 @@ const _sfc_main = vue.defineComponent({
54
54
  };
55
55
  const { userInfo, getUserInfoHandle } = user["default"](BASE_API);
56
56
  const HandleOpen = () => {
57
- console.log(props.outsideSelectData);
58
57
  selectedData.value = props.defaultSelectedData || [];
59
58
  };
60
59
  const HandleClose = () => {
@@ -64,6 +64,7 @@ const _sfc_main = vue.defineComponent({
64
64
  }
65
65
  }
66
66
  addDataToSelectedList(record);
67
+ return true;
67
68
  };
68
69
  const addDataToSelectedList = async (record) => {
69
70
  const index2 = selectedData.value.findIndex((v) => v.id === record.id);