sun-card-design 1.1.37 → 1.1.39

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 (162) hide show
  1. package/README.md +114 -112
  2. package/dist/mobile/sun-card-design-mobile.es11.js +3 -3
  3. package/dist/mobile/sun-card-design-mobile.es3.js +4 -4
  4. package/dist/mobile/sun-card-design-mobile.es4.js +5 -5
  5. package/dist/mobile/sun-card-design-mobile.es56.js +3 -4
  6. package/dist/mobile/sun-card-design-mobile.es6.js +2 -10
  7. package/dist/pc/sun-card-design-pc.es11.js +3 -3
  8. package/dist/pc/sun-card-design-pc.es3.js +4 -4
  9. package/dist/pc/sun-card-design-pc.es4.js +5 -5
  10. package/dist/pc/sun-card-design-pc.es56.js +3 -4
  11. package/dist/pc/sun-card-design-pc.es6.js +2 -10
  12. package/dist/public/sun-card-design.css +1 -1
  13. package/package.json +98 -96
  14. package/dist/public/sun-card-designer.css +0 -1
  15. package/dist/sun-card-designer.es.js +0 -25
  16. package/dist/sun-card-designer.es10.js +0 -167
  17. package/dist/sun-card-designer.es11.js +0 -197
  18. package/dist/sun-card-designer.es12.js +0 -203
  19. package/dist/sun-card-designer.es13.js +0 -130
  20. package/dist/sun-card-designer.es14.js +0 -120
  21. package/dist/sun-card-designer.es151.js +0 -4
  22. package/dist/sun-card-designer.es152.js +0 -4
  23. package/dist/sun-card-designer.es153.js +0 -4
  24. package/dist/sun-card-designer.es154.js +0 -4
  25. package/dist/sun-card-designer.es155.js +0 -82
  26. package/dist/sun-card-designer.es156.js +0 -91
  27. package/dist/sun-card-designer.es157.js +0 -92
  28. package/dist/sun-card-designer.es158.js +0 -191
  29. package/dist/sun-card-designer.es159.js +0 -86
  30. package/dist/sun-card-designer.es16.js +0 -10
  31. package/dist/sun-card-designer.es160.js +0 -238
  32. package/dist/sun-card-designer.es161.js +0 -113
  33. package/dist/sun-card-designer.es162.js +0 -49
  34. package/dist/sun-card-designer.es163.js +0 -43
  35. package/dist/sun-card-designer.es164.js +0 -39
  36. package/dist/sun-card-designer.es165.js +0 -46
  37. package/dist/sun-card-designer.es166.js +0 -58
  38. package/dist/sun-card-designer.es167.js +0 -56
  39. package/dist/sun-card-designer.es168.js +0 -58
  40. package/dist/sun-card-designer.es169.js +0 -73
  41. package/dist/sun-card-designer.es17.js +0 -333
  42. package/dist/sun-card-designer.es170.js +0 -59
  43. package/dist/sun-card-designer.es171.js +0 -69
  44. package/dist/sun-card-designer.es172.js +0 -182
  45. package/dist/sun-card-designer.es173.js +0 -176
  46. package/dist/sun-card-designer.es174.js +0 -184
  47. package/dist/sun-card-designer.es175.js +0 -409
  48. package/dist/sun-card-designer.es176.js +0 -365
  49. package/dist/sun-card-designer.es177.js +0 -70
  50. package/dist/sun-card-designer.es178.js +0 -68
  51. package/dist/sun-card-designer.es179.js +0 -184
  52. package/dist/sun-card-designer.es18.js +0 -68
  53. package/dist/sun-card-designer.es180.js +0 -193
  54. package/dist/sun-card-designer.es181.js +0 -193
  55. package/dist/sun-card-designer.es182.js +0 -193
  56. package/dist/sun-card-designer.es184.js +0 -228
  57. package/dist/sun-card-designer.es185.js +0 -71
  58. package/dist/sun-card-designer.es19.js +0 -611
  59. package/dist/sun-card-designer.es196.js +0 -4
  60. package/dist/sun-card-designer.es20.js +0 -225
  61. package/dist/sun-card-designer.es201.js +0 -125
  62. package/dist/sun-card-designer.es21.js +0 -69
  63. package/dist/sun-card-designer.es22.js +0 -719
  64. package/dist/sun-card-designer.es220.js +0 -63
  65. package/dist/sun-card-designer.es221.js +0 -80
  66. package/dist/sun-card-designer.es222.js +0 -82
  67. package/dist/sun-card-designer.es223.js +0 -94
  68. package/dist/sun-card-designer.es224.js +0 -87
  69. package/dist/sun-card-designer.es225.js +0 -226
  70. package/dist/sun-card-designer.es226.js +0 -105
  71. package/dist/sun-card-designer.es227.js +0 -45
  72. package/dist/sun-card-designer.es228.js +0 -31
  73. package/dist/sun-card-designer.es229.js +0 -29
  74. package/dist/sun-card-designer.es23.js +0 -211
  75. package/dist/sun-card-designer.es230.js +0 -32
  76. package/dist/sun-card-designer.es231.js +0 -46
  77. package/dist/sun-card-designer.es232.js +0 -42
  78. package/dist/sun-card-designer.es233.js +0 -44
  79. package/dist/sun-card-designer.es234.js +0 -61
  80. package/dist/sun-card-designer.es235.js +0 -46
  81. package/dist/sun-card-designer.es236.js +0 -54
  82. package/dist/sun-card-designer.es237.js +0 -130
  83. package/dist/sun-card-designer.es238.js +0 -127
  84. package/dist/sun-card-designer.es239.js +0 -132
  85. package/dist/sun-card-designer.es24.js +0 -265
  86. package/dist/sun-card-designer.es240.js +0 -375
  87. package/dist/sun-card-designer.es241.js +0 -348
  88. package/dist/sun-card-designer.es242.js +0 -69
  89. package/dist/sun-card-designer.es243.js +0 -65
  90. package/dist/sun-card-designer.es244.js +0 -87
  91. package/dist/sun-card-designer.es245.js +0 -98
  92. package/dist/sun-card-designer.es246.js +0 -98
  93. package/dist/sun-card-designer.es247.js +0 -98
  94. package/dist/sun-card-designer.es25.js +0 -857
  95. package/dist/sun-card-designer.es26.js +0 -768
  96. package/dist/sun-card-designer.es260.js +0 -125
  97. package/dist/sun-card-designer.es27.js +0 -264
  98. package/dist/sun-card-designer.es273.js +0 -192
  99. package/dist/sun-card-designer.es28.js +0 -809
  100. package/dist/sun-card-designer.es29.js +0 -220
  101. package/dist/sun-card-designer.es3.js +0 -506
  102. package/dist/sun-card-designer.es30.js +0 -809
  103. package/dist/sun-card-designer.es31.js +0 -220
  104. package/dist/sun-card-designer.es32.js +0 -820
  105. package/dist/sun-card-designer.es33.js +0 -225
  106. package/dist/sun-card-designer.es34.js +0 -69
  107. package/dist/sun-card-designer.es35.js +0 -375
  108. package/dist/sun-card-designer.es36.js +0 -186
  109. package/dist/sun-card-designer.es37.js +0 -119
  110. package/dist/sun-card-designer.es38.js +0 -354
  111. package/dist/sun-card-designer.es39.js +0 -127
  112. package/dist/sun-card-designer.es4.js +0 -365
  113. package/dist/sun-card-designer.es40.js +0 -100
  114. package/dist/sun-card-designer.es41.js +0 -214
  115. package/dist/sun-card-designer.es42.js +0 -119
  116. package/dist/sun-card-designer.es43.js +0 -250
  117. package/dist/sun-card-designer.es44.js +0 -118
  118. package/dist/sun-card-designer.es45.js +0 -64
  119. package/dist/sun-card-designer.es46.js +0 -223
  120. package/dist/sun-card-designer.es47.js +0 -196
  121. package/dist/sun-card-designer.es48.js +0 -77
  122. package/dist/sun-card-designer.es49.js +0 -85
  123. package/dist/sun-card-designer.es5.js +0 -317
  124. package/dist/sun-card-designer.es50.js +0 -85
  125. package/dist/sun-card-designer.es51.js +0 -64
  126. package/dist/sun-card-designer.es52.js +0 -283
  127. package/dist/sun-card-designer.es53.js +0 -64
  128. package/dist/sun-card-designer.es54.js +0 -142
  129. package/dist/sun-card-designer.es55.js +0 -52
  130. package/dist/sun-card-designer.es56.js +0 -85
  131. package/dist/sun-card-designer.es57.js +0 -258
  132. package/dist/sun-card-designer.es58.js +0 -226
  133. package/dist/sun-card-designer.es59.js +0 -169
  134. package/dist/sun-card-designer.es6.js +0 -190
  135. package/dist/sun-card-designer.es60.js +0 -280
  136. package/dist/sun-card-designer.es61.js +0 -168
  137. package/dist/sun-card-designer.es62.js +0 -219
  138. package/dist/sun-card-designer.es63.js +0 -168
  139. package/dist/sun-card-designer.es64.js +0 -275
  140. package/dist/sun-card-designer.es65.js +0 -760
  141. package/dist/sun-card-designer.es66.js +0 -272
  142. package/dist/sun-card-designer.es67.js +0 -559
  143. package/dist/sun-card-designer.es68.js +0 -124
  144. package/dist/sun-card-designer.es69.js +0 -528
  145. package/dist/sun-card-designer.es7.js +0 -65
  146. package/dist/sun-card-designer.es70.js +0 -185
  147. package/dist/sun-card-designer.es71.js +0 -107
  148. package/dist/sun-card-designer.es72.js +0 -153
  149. package/dist/sun-card-designer.es73.js +0 -315
  150. package/dist/sun-card-designer.es74.js +0 -114
  151. package/dist/sun-card-designer.es76.js +0 -4211
  152. package/dist/sun-card-designer.es79.js +0 -4
  153. package/dist/sun-card-designer.es8.js +0 -171
  154. package/dist/sun-card-designer.es80.js +0 -4
  155. package/dist/sun-card-designer.es81.js +0 -4
  156. package/dist/sun-card-designer.es84.js +0 -228
  157. package/dist/sun-card-designer.es87.js +0 -52
  158. package/dist/sun-card-designer.es88.js +0 -52
  159. package/dist/sun-card-designer.es9.js +0 -207
  160. package/dist/sun-card-designer.es91.js +0 -344
  161. package/dist/sun-card-designer.es92.js +0 -199
  162. package/dist/sun-card-designer.es95.js +0 -180
@@ -1,768 +0,0 @@
1
- import { ref, computed, onMounted, onBeforeUnmount, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, withCtx, createBlock, createCommentVNode, withModifiers, normalizeStyle, toDisplayString, unref, Fragment, renderList, createTextVNode } from "vue";
2
- import { DownOutlined } from "@ant-design/icons-vue";
3
- import { ColorList, ColorNameMap } from "./sun-card-designer.es76.js";
4
- /* empty css */
5
- import _export_sfc from "./sun-card-designer.es16.js";
6
- const _hoisted_1 = { class: "grid-style" };
7
- const _hoisted_2 = { class: "style-block" };
8
- const _hoisted_3 = {
9
- class: "sub-title",
10
- style: { "display": "flex", "justify-content": "space-between", "align-items": "center", "gap": "8px" }
11
- };
12
- const _hoisted_4 = { class: "label" };
13
- const _hoisted_5 = { class: "arrow" };
14
- const _hoisted_6 = {
15
- key: 0,
16
- class: "color-picker"
17
- };
18
- const _hoisted_7 = { class: "color-grid" };
19
- const _hoisted_8 = ["onClick"];
20
- const _hoisted_9 = { class: "label" };
21
- const _hoisted_10 = { class: "arrow" };
22
- const _hoisted_11 = {
23
- key: 0,
24
- class: "color-picker"
25
- };
26
- const _hoisted_12 = { class: "color-grid" };
27
- const _hoisted_13 = ["onClick"];
28
- const _hoisted_14 = { class: "label" };
29
- const _hoisted_15 = { class: "arrow" };
30
- const _hoisted_16 = {
31
- key: 0,
32
- class: "color-picker"
33
- };
34
- const _hoisted_17 = { class: "color-grid" };
35
- const _hoisted_18 = ["onClick"];
36
- const _hoisted_19 = { class: "slider-row" };
37
- const _hoisted_20 = {
38
- class: "sub-title",
39
- style: { "display": "flex", "justify-content": "space-between", "align-items": "center", "gap": "8px", "margin-top": "8px" }
40
- };
41
- const _hoisted_21 = { class: "label" };
42
- const _hoisted_22 = { class: "arrow" };
43
- const _hoisted_23 = {
44
- key: 0,
45
- class: "color-picker"
46
- };
47
- const _hoisted_24 = { class: "color-grid" };
48
- const _hoisted_25 = ["onClick"];
49
- const _hoisted_26 = { class: "slider-row" };
50
- const _hoisted_27 = { class: "slider-row" };
51
- const _hoisted_28 = { class: "slider-row" };
52
- const _hoisted_29 = { class: "slider-row" };
53
- const _hoisted_30 = { class: "slider-row" };
54
- const _hoisted_31 = { class: "slider-row" };
55
- const _hoisted_32 = { class: "slider-row" };
56
- const _sfc_main = {
57
- __name: "singleColumnStylePes",
58
- props: ["record"],
59
- setup(__props) {
60
- const props = __props;
61
- ref("vertical");
62
- const bgMode = ref("纯色");
63
- const enableBg = ref(true);
64
- const activePicker = ref(null);
65
- const colorList = ref(ColorList);
66
- const nameMap = ColorNameMap;
67
- const colorName = (hex) => hex === "none" ? "无色" : nameMap[hex] || "自定义";
68
- const backgroundColor = ref("#ffffff");
69
- const startColor = ref("#ffffff");
70
- const endColor = ref("#f5f5f5");
71
- const angle = ref(90);
72
- const gradientCss = computed(
73
- () => `linear-gradient(${angle.value}deg, ${startColor.value}, ${endColor.value})`
74
- );
75
- const borderColor = ref("#d9d9d9");
76
- const enableBorder = ref(true);
77
- const borderRadius = ref(0);
78
- const tbPadding = ref(0);
79
- const lrPadding = ref(0);
80
- const alignItems = ref("start");
81
- const boxShadow = ref(null);
82
- const shadowPreset = ref("none");
83
- const shadowBlur = ref(10);
84
- const shadowSpread = ref(2);
85
- const shadowOpacityPct = ref(12);
86
- const buildShadow = () => {
87
- const a = Math.max(0, Math.min(100, Number(shadowOpacityPct.value))) / 100;
88
- const blur = Math.max(0, Number(shadowBlur.value));
89
- const spread = Math.max(0, Number(shadowSpread.value));
90
- return `0 0 ${blur}px ${spread}px rgba(0, 0, 0, ${a})`;
91
- };
92
- const presetToShadow = (preset) => {
93
- if (preset === "none") {
94
- shadowBlur.value = 0;
95
- shadowSpread.value = 0;
96
- shadowOpacityPct.value = 0;
97
- return null;
98
- }
99
- if (preset === "hairline") {
100
- shadowBlur.value = 6;
101
- shadowSpread.value = 1;
102
- shadowOpacityPct.value = 8;
103
- return buildShadow();
104
- }
105
- if (preset === "soft") {
106
- shadowBlur.value = 10;
107
- shadowSpread.value = 2;
108
- shadowOpacityPct.value = 12;
109
- return buildShadow();
110
- }
111
- if (preset === "medium") {
112
- shadowBlur.value = 14;
113
- shadowSpread.value = 3;
114
- shadowOpacityPct.value = 16;
115
- return buildShadow();
116
- }
117
- if (preset === "deep") {
118
- shadowBlur.value = 20;
119
- shadowSpread.value = 4;
120
- shadowOpacityPct.value = 20;
121
- return buildShadow();
122
- }
123
- if (preset === "float") {
124
- shadowBlur.value = 28;
125
- shadowSpread.value = 6;
126
- shadowOpacityPct.value = 22;
127
- return buildShadow();
128
- }
129
- return buildShadow();
130
- };
131
- const onShadowPresetChange = (val) => {
132
- boxShadow.value = presetToShadow(val);
133
- };
134
- const togglePicker = (type) => {
135
- activePicker.value = activePicker.value === type ? null : type;
136
- };
137
- const pickBg = (hex) => {
138
- backgroundColor.value = hex;
139
- activePicker.value = null;
140
- };
141
- const pickStart = (hex) => {
142
- startColor.value = hex;
143
- activePicker.value = null;
144
- };
145
- const pickEnd = (hex) => {
146
- endColor.value = hex;
147
- activePicker.value = null;
148
- };
149
- const pickBorder = (hex) => {
150
- borderColor.value = hex;
151
- activePicker.value = null;
152
- };
153
- const onClickOutside = () => {
154
- activePicker.value = null;
155
- };
156
- onMounted(() => {
157
- document.addEventListener("click", onClickOutside);
158
- const cfg = props.record.options.style || {};
159
- const bg = cfg.background ?? "#ffffff";
160
- if (bg === "none") enableBg.value = false;
161
- if (typeof bg === "string" && bg.includes("gradient")) {
162
- bgMode.value = "渐变";
163
- try {
164
- const match = bg.match(/linear-gradient\(([^)]+)\)/);
165
- if (match && match[1]) {
166
- const parts = match[1].split(",").map((s) => s.trim());
167
- const ang = parseInt(parts[0]);
168
- if (!Number.isNaN(ang)) angle.value = ang;
169
- if (parts[1]) startColor.value = parts[1];
170
- if (parts[2]) endColor.value = parts[2];
171
- }
172
- } catch (e) {
173
- return e;
174
- }
175
- } else {
176
- bgMode.value = "纯色";
177
- backgroundColor.value = bg;
178
- }
179
- borderColor.value = cfg.borderColor || "#d9d9d9";
180
- if (cfg.borderColor === "none") enableBorder.value = false;
181
- borderRadius.value = cfg.borderRadius ?? 0;
182
- tbPadding.value = cfg.tbPadding ?? 0;
183
- lrPadding.value = cfg.lrPadding ?? 0;
184
- alignItems.value = cfg.alignItems || "start";
185
- boxShadow.value = cfg.boxShadow ?? null;
186
- if (!boxShadow.value) {
187
- shadowPreset.value = "none";
188
- shadowBlur.value = 0;
189
- shadowSpread.value = 0;
190
- shadowOpacityPct.value = 0;
191
- } else {
192
- shadowPreset.value = "medium";
193
- }
194
- });
195
- onBeforeUnmount(() => {
196
- document.removeEventListener("click", onClickOutside);
197
- });
198
- const ensureCfg = () => {
199
- props.record.config = props.record.config || {};
200
- };
201
- watch(bgMode, (val) => {
202
- ensureCfg();
203
- if (val === "纯色") props.record.config.background = backgroundColor.value;
204
- else props.record.config.background = gradientCss.value;
205
- });
206
- watch(enableBg, (val) => {
207
- ensureCfg();
208
- if (!val) props.record.options.style.background = "none";
209
- else {
210
- if (bgMode.value === "纯色") props.record.options.style.background = backgroundColor.value || "#ffffff";
211
- else props.record.options.style.background = gradientCss.value;
212
- }
213
- });
214
- watch(enableBorder, (val) => {
215
- ensureCfg();
216
- props.record.options.style.borderColor = val ? borderColor.value || "#d9d9d9" : "none";
217
- });
218
- watch([startColor, endColor, angle], () => {
219
- if (bgMode.value === "渐变") {
220
- ensureCfg();
221
- props.record.options.style.background = gradientCss.value;
222
- }
223
- });
224
- watch(backgroundColor, (val) => {
225
- if (bgMode.value === "纯色") {
226
- ensureCfg();
227
- props.record.options.style.background = val;
228
- }
229
- });
230
- watch(borderColor, (val) => {
231
- ensureCfg();
232
- props.record.options.style.borderColor = val;
233
- });
234
- watch(borderRadius, (val) => {
235
- ensureCfg();
236
- props.record.options.style.borderRadius = val;
237
- });
238
- watch(tbPadding, (val) => {
239
- ensureCfg();
240
- props.record.options.style.tbPadding = val;
241
- });
242
- watch(lrPadding, (val) => {
243
- ensureCfg();
244
- props.record.options.style.lrPadding = val;
245
- });
246
- watch(alignItems, (val) => {
247
- ensureCfg();
248
- props.record.options.style.alignItems = val;
249
- });
250
- watch(boxShadow, (val) => {
251
- ensureCfg();
252
- props.record.options.style.boxShadow = val;
253
- });
254
- watch([shadowBlur, shadowSpread, shadowOpacityPct], () => {
255
- const shadow = buildShadow();
256
- boxShadow.value = shadowOpacityPct.value === 0 ? null : shadow;
257
- });
258
- return (_ctx, _cache) => {
259
- const _component_a_divider = resolveComponent("a-divider");
260
- const _component_a_switch = resolveComponent("a-switch");
261
- const _component_a_segmented = resolveComponent("a-segmented");
262
- const _component_a_form_item = resolveComponent("a-form-item");
263
- const _component_a_col = resolveComponent("a-col");
264
- const _component_a_row = resolveComponent("a-row");
265
- const _component_a_slider = resolveComponent("a-slider");
266
- const _component_a_input_number = resolveComponent("a-input-number");
267
- const _component_a_select_option = resolveComponent("a-select-option");
268
- const _component_a_select = resolveComponent("a-select");
269
- const _component_a_form = resolveComponent("a-form");
270
- return openBlock(), createElementBlock("div", _hoisted_1, [
271
- createVNode(_component_a_divider),
272
- _cache[38] || (_cache[38] = createElementVNode("div", { class: "title" }, "样式", -1)),
273
- createElementVNode("div", _hoisted_2, [
274
- createElementVNode("div", _hoisted_3, [
275
- _cache[25] || (_cache[25] = createElementVNode("span", null, "背景", -1)),
276
- createVNode(_component_a_switch, {
277
- checked: enableBg.value,
278
- "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => enableBg.value = $event),
279
- "checked-children": "开",
280
- "un-checked-children": "关"
281
- }, null, 8, ["checked"])
282
- ]),
283
- createVNode(_component_a_form, { layout: "vertical" }, {
284
- default: withCtx(() => [
285
- enableBg.value ? (openBlock(), createBlock(_component_a_form_item, {
286
- key: 0,
287
- label: ""
288
- }, {
289
- default: withCtx(() => [
290
- createVNode(_component_a_segmented, {
291
- value: bgMode.value,
292
- "onUpdate:value": _cache[1] || (_cache[1] = ($event) => bgMode.value = $event),
293
- options: ["纯色", "渐变"]
294
- }, null, 8, ["value"])
295
- ]),
296
- _: 1
297
- })) : createCommentVNode("", true),
298
- enableBg.value && bgMode.value === "纯色" ? (openBlock(), createBlock(_component_a_form_item, {
299
- key: 1,
300
- label: "背景颜色"
301
- }, {
302
- default: withCtx(() => [
303
- createElementVNode("div", {
304
- class: "color-select",
305
- onClick: _cache[2] || (_cache[2] = withModifiers(($event) => togglePicker("bg"), ["stop"]))
306
- }, [
307
- createElementVNode("span", {
308
- class: "swatch",
309
- style: normalizeStyle({ background: backgroundColor.value })
310
- }, null, 4),
311
- createElementVNode("span", _hoisted_4, toDisplayString(colorName(backgroundColor.value)), 1),
312
- createElementVNode("span", _hoisted_5, [
313
- createVNode(unref(DownOutlined))
314
- ]),
315
- activePicker.value === "bg" ? (openBlock(), createElementBlock("div", _hoisted_6, [
316
- createElementVNode("div", _hoisted_7, [
317
- (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (c) => {
318
- return openBlock(), createElementBlock("span", {
319
- class: "chip",
320
- key: "bg-" + c,
321
- style: normalizeStyle({ backgroundColor: c }),
322
- onClick: withModifiers(($event) => pickBg(c), ["stop"])
323
- }, null, 12, _hoisted_8);
324
- }), 128))
325
- ])
326
- ])) : createCommentVNode("", true)
327
- ])
328
- ]),
329
- _: 1
330
- })) : enableBg.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
331
- createVNode(_component_a_form_item, { label: "渐变预览" }, {
332
- default: withCtx(() => [
333
- createElementVNode("div", {
334
- class: "gradient-preview",
335
- style: normalizeStyle({ background: gradientCss.value })
336
- }, null, 4)
337
- ]),
338
- _: 1
339
- }),
340
- createVNode(_component_a_row, { gutter: [8, 8] }, {
341
- default: withCtx(() => [
342
- createVNode(_component_a_col, { span: 24 }, {
343
- default: withCtx(() => [
344
- createVNode(_component_a_form_item, { label: "起始颜色" }, {
345
- default: withCtx(() => [
346
- createElementVNode("div", {
347
- class: "color-select",
348
- onClick: _cache[3] || (_cache[3] = withModifiers(($event) => togglePicker("start"), ["stop"]))
349
- }, [
350
- createElementVNode("span", {
351
- class: "swatch",
352
- style: normalizeStyle({ background: startColor.value })
353
- }, null, 4),
354
- createElementVNode("span", _hoisted_9, toDisplayString(unref(nameMap)[startColor.value] || "自定义"), 1),
355
- createElementVNode("span", _hoisted_10, [
356
- createVNode(unref(DownOutlined))
357
- ]),
358
- activePicker.value === "start" ? (openBlock(), createElementBlock("div", _hoisted_11, [
359
- createElementVNode("div", _hoisted_12, [
360
- (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (c) => {
361
- return openBlock(), createElementBlock("span", {
362
- class: "chip",
363
- key: "s-" + c,
364
- style: normalizeStyle({ backgroundColor: c }),
365
- onClick: withModifiers(($event) => pickStart(c), ["stop"])
366
- }, null, 12, _hoisted_13);
367
- }), 128))
368
- ])
369
- ])) : createCommentVNode("", true)
370
- ])
371
- ]),
372
- _: 1
373
- })
374
- ]),
375
- _: 1
376
- }),
377
- createVNode(_component_a_col, { span: 24 }, {
378
- default: withCtx(() => [
379
- createVNode(_component_a_form_item, { label: "结束颜色" }, {
380
- default: withCtx(() => [
381
- createElementVNode("div", {
382
- class: "color-select",
383
- onClick: _cache[4] || (_cache[4] = withModifiers(($event) => togglePicker("end"), ["stop"]))
384
- }, [
385
- createElementVNode("span", {
386
- class: "swatch",
387
- style: normalizeStyle({ background: endColor.value })
388
- }, null, 4),
389
- createElementVNode("span", _hoisted_14, toDisplayString(unref(nameMap)[endColor.value] || "自定义"), 1),
390
- createElementVNode("span", _hoisted_15, [
391
- createVNode(unref(DownOutlined))
392
- ]),
393
- activePicker.value === "end" ? (openBlock(), createElementBlock("div", _hoisted_16, [
394
- createElementVNode("div", _hoisted_17, [
395
- (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (c) => {
396
- return openBlock(), createElementBlock("span", {
397
- class: "chip",
398
- key: "e-" + c,
399
- style: normalizeStyle({ backgroundColor: c }),
400
- onClick: withModifiers(($event) => pickEnd(c), ["stop"])
401
- }, null, 12, _hoisted_18);
402
- }), 128))
403
- ])
404
- ])) : createCommentVNode("", true)
405
- ])
406
- ]),
407
- _: 1
408
- })
409
- ]),
410
- _: 1
411
- })
412
- ]),
413
- _: 1
414
- }),
415
- createVNode(_component_a_form_item, { label: "角度" }, {
416
- default: withCtx(() => [
417
- createElementVNode("div", _hoisted_19, [
418
- createVNode(_component_a_slider, {
419
- min: 0,
420
- max: 360,
421
- value: angle.value,
422
- "onUpdate:value": _cache[5] || (_cache[5] = ($event) => angle.value = $event),
423
- style: { "flex": "1", "margin-right": "12px" }
424
- }, null, 8, ["value"]),
425
- createVNode(_component_a_input_number, {
426
- min: 0,
427
- max: 360,
428
- value: angle.value,
429
- "onUpdate:value": _cache[6] || (_cache[6] = ($event) => angle.value = $event)
430
- }, null, 8, ["value"])
431
- ])
432
- ]),
433
- _: 1
434
- })
435
- ], 64)) : (openBlock(), createBlock(_component_a_form_item, {
436
- key: 3,
437
- label: "背景颜色"
438
- }, {
439
- default: withCtx(() => [..._cache[26] || (_cache[26] = [
440
- createElementVNode("div", {
441
- class: "color-select",
442
- style: { "cursor": "not-allowed", "opacity": ".6" }
443
- }, [
444
- createElementVNode("span", {
445
- class: "swatch",
446
- style: { background: "#ffffff" }
447
- }),
448
- createElementVNode("span", { class: "label" }, "无色")
449
- ], -1)
450
- ])]),
451
- _: 1
452
- })),
453
- createElementVNode("div", _hoisted_20, [
454
- _cache[27] || (_cache[27] = createElementVNode("span", null, "边框", -1)),
455
- createVNode(_component_a_switch, {
456
- checked: enableBorder.value,
457
- "onUpdate:checked": _cache[7] || (_cache[7] = ($event) => enableBorder.value = $event),
458
- "checked-children": "开",
459
- "un-checked-children": "关"
460
- }, null, 8, ["checked"])
461
- ]),
462
- enableBorder.value ? (openBlock(), createBlock(_component_a_form_item, {
463
- key: 4,
464
- label: "边框颜色"
465
- }, {
466
- default: withCtx(() => [
467
- createElementVNode("div", {
468
- class: "color-select",
469
- onClick: _cache[8] || (_cache[8] = withModifiers(($event) => togglePicker("border"), ["stop"]))
470
- }, [
471
- createElementVNode("span", {
472
- class: "swatch",
473
- style: normalizeStyle({ background: borderColor.value })
474
- }, null, 4),
475
- createElementVNode("span", _hoisted_21, toDisplayString(colorName(borderColor.value)), 1),
476
- createElementVNode("span", _hoisted_22, [
477
- createVNode(unref(DownOutlined))
478
- ]),
479
- activePicker.value === "border" ? (openBlock(), createElementBlock("div", _hoisted_23, [
480
- createElementVNode("div", _hoisted_24, [
481
- (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (c) => {
482
- return openBlock(), createElementBlock("span", {
483
- class: "chip",
484
- key: "bd-" + c,
485
- style: normalizeStyle({ backgroundColor: c }),
486
- onClick: withModifiers(($event) => pickBorder(c), ["stop"])
487
- }, null, 12, _hoisted_25);
488
- }), 128))
489
- ])
490
- ])) : createCommentVNode("", true)
491
- ])
492
- ]),
493
- _: 1
494
- })) : (openBlock(), createBlock(_component_a_form_item, {
495
- key: 5,
496
- label: "边框颜色"
497
- }, {
498
- default: withCtx(() => [..._cache[28] || (_cache[28] = [
499
- createElementVNode("div", {
500
- class: "color-select",
501
- style: { "cursor": "not-allowed", "opacity": ".6" }
502
- }, [
503
- createElementVNode("span", {
504
- class: "swatch",
505
- style: { background: "#ffffff" }
506
- }),
507
- createElementVNode("span", { class: "label" }, "无色")
508
- ], -1)
509
- ])]),
510
- _: 1
511
- })),
512
- createVNode(_component_a_form_item, { label: "圆角" }, {
513
- default: withCtx(() => [
514
- createElementVNode("div", _hoisted_26, [
515
- createVNode(_component_a_slider, {
516
- min: 0,
517
- max: 20,
518
- value: borderRadius.value,
519
- "onUpdate:value": _cache[9] || (_cache[9] = ($event) => borderRadius.value = $event),
520
- style: { "flex": "1", "margin-right": "12px" }
521
- }, null, 8, ["value"]),
522
- createVNode(_component_a_input_number, {
523
- min: 0,
524
- max: 20,
525
- value: borderRadius.value,
526
- "onUpdate:value": _cache[10] || (_cache[10] = ($event) => borderRadius.value = $event)
527
- }, null, 8, ["value"])
528
- ])
529
- ]),
530
- _: 1
531
- }),
532
- createVNode(_component_a_form_item, { label: "阴影" }, {
533
- default: withCtx(() => [
534
- createVNode(_component_a_select, {
535
- value: shadowPreset.value,
536
- "onUpdate:value": _cache[11] || (_cache[11] = ($event) => shadowPreset.value = $event),
537
- onChange: onShadowPresetChange
538
- }, {
539
- default: withCtx(() => [
540
- createVNode(_component_a_select_option, { value: "none" }, {
541
- default: withCtx(() => [..._cache[29] || (_cache[29] = [
542
- createTextVNode("无", -1)
543
- ])]),
544
- _: 1
545
- }),
546
- createVNode(_component_a_select_option, { value: "hairline" }, {
547
- default: withCtx(() => [..._cache[30] || (_cache[30] = [
548
- createTextVNode("极浅", -1)
549
- ])]),
550
- _: 1
551
- }),
552
- createVNode(_component_a_select_option, { value: "soft" }, {
553
- default: withCtx(() => [..._cache[31] || (_cache[31] = [
554
- createTextVNode("柔和", -1)
555
- ])]),
556
- _: 1
557
- }),
558
- createVNode(_component_a_select_option, { value: "medium" }, {
559
- default: withCtx(() => [..._cache[32] || (_cache[32] = [
560
- createTextVNode("中", -1)
561
- ])]),
562
- _: 1
563
- }),
564
- createVNode(_component_a_select_option, { value: "deep" }, {
565
- default: withCtx(() => [..._cache[33] || (_cache[33] = [
566
- createTextVNode("深", -1)
567
- ])]),
568
- _: 1
569
- }),
570
- createVNode(_component_a_select_option, { value: "float" }, {
571
- default: withCtx(() => [..._cache[34] || (_cache[34] = [
572
- createTextVNode("悬浮", -1)
573
- ])]),
574
- _: 1
575
- })
576
- ]),
577
- _: 1
578
- }, 8, ["value"])
579
- ]),
580
- _: 1
581
- }),
582
- shadowPreset.value !== "none" ? (openBlock(), createBlock(_component_a_row, {
583
- key: 6,
584
- gutter: [8, 8]
585
- }, {
586
- default: withCtx(() => [
587
- createVNode(_component_a_col, { span: 24 }, {
588
- default: withCtx(() => [
589
- createVNode(_component_a_form_item, { label: "模糊(blur)" }, {
590
- default: withCtx(() => [
591
- createElementVNode("div", _hoisted_27, [
592
- createVNode(_component_a_slider, {
593
- min: 0,
594
- max: 40,
595
- value: shadowBlur.value,
596
- "onUpdate:value": _cache[12] || (_cache[12] = ($event) => shadowBlur.value = $event),
597
- style: { "flex": "1", "margin-right": "12px" }
598
- }, null, 8, ["value"]),
599
- createVNode(_component_a_input_number, {
600
- min: 0,
601
- max: 40,
602
- value: shadowBlur.value,
603
- "onUpdate:value": _cache[13] || (_cache[13] = ($event) => shadowBlur.value = $event)
604
- }, null, 8, ["value"])
605
- ])
606
- ]),
607
- _: 1
608
- })
609
- ]),
610
- _: 1
611
- }),
612
- createVNode(_component_a_col, { span: 24 }, {
613
- default: withCtx(() => [
614
- createVNode(_component_a_form_item, { label: "扩散(spread)" }, {
615
- default: withCtx(() => [
616
- createElementVNode("div", _hoisted_28, [
617
- createVNode(_component_a_slider, {
618
- min: 0,
619
- max: 20,
620
- value: shadowSpread.value,
621
- "onUpdate:value": _cache[14] || (_cache[14] = ($event) => shadowSpread.value = $event),
622
- style: { "flex": "1", "margin-right": "12px" }
623
- }, null, 8, ["value"]),
624
- createVNode(_component_a_input_number, {
625
- min: 0,
626
- max: 20,
627
- value: shadowSpread.value,
628
- "onUpdate:value": _cache[15] || (_cache[15] = ($event) => shadowSpread.value = $event)
629
- }, null, 8, ["value"])
630
- ])
631
- ]),
632
- _: 1
633
- })
634
- ]),
635
- _: 1
636
- }),
637
- createVNode(_component_a_col, { span: 24 }, {
638
- default: withCtx(() => [
639
- createVNode(_component_a_form_item, { label: "透明度(opacity)" }, {
640
- default: withCtx(() => [
641
- createElementVNode("div", _hoisted_29, [
642
- createVNode(_component_a_slider, {
643
- min: 0,
644
- max: 100,
645
- value: shadowOpacityPct.value,
646
- "onUpdate:value": _cache[16] || (_cache[16] = ($event) => shadowOpacityPct.value = $event),
647
- style: { "flex": "1", "margin-right": "12px" }
648
- }, null, 8, ["value"]),
649
- createVNode(_component_a_input_number, {
650
- min: 0,
651
- max: 100,
652
- value: shadowOpacityPct.value,
653
- "onUpdate:value": _cache[17] || (_cache[17] = ($event) => shadowOpacityPct.value = $event)
654
- }, null, 8, ["value"])
655
- ])
656
- ]),
657
- _: 1
658
- })
659
- ]),
660
- _: 1
661
- })
662
- ]),
663
- _: 1
664
- })) : createCommentVNode("", true),
665
- createVNode(_component_a_form_item, { label: "上下边距" }, {
666
- default: withCtx(() => [
667
- createElementVNode("div", _hoisted_30, [
668
- createVNode(_component_a_slider, {
669
- min: 0,
670
- max: 48,
671
- value: tbPadding.value,
672
- "onUpdate:value": _cache[18] || (_cache[18] = ($event) => tbPadding.value = $event),
673
- style: { "flex": "1", "margin-right": "12px" }
674
- }, null, 8, ["value"]),
675
- createVNode(_component_a_input_number, {
676
- min: 0,
677
- max: 48,
678
- value: tbPadding.value,
679
- "onUpdate:value": _cache[19] || (_cache[19] = ($event) => tbPadding.value = $event)
680
- }, null, 8, ["value"])
681
- ])
682
- ]),
683
- _: 1
684
- }),
685
- createVNode(_component_a_form_item, { label: "左右边距" }, {
686
- default: withCtx(() => [
687
- createElementVNode("div", _hoisted_31, [
688
- createVNode(_component_a_slider, {
689
- min: 0,
690
- max: 48,
691
- value: lrPadding.value,
692
- "onUpdate:value": _cache[20] || (_cache[20] = ($event) => lrPadding.value = $event),
693
- style: { "flex": "1", "margin-right": "12px" }
694
- }, null, 8, ["value"]),
695
- createVNode(_component_a_input_number, {
696
- min: 0,
697
- max: 48,
698
- value: lrPadding.value,
699
- "onUpdate:value": _cache[21] || (_cache[21] = ($event) => lrPadding.value = $event)
700
- }, null, 8, ["value"])
701
- ])
702
- ]),
703
- _: 1
704
- }),
705
- createVNode(_component_a_form_item, { label: "高度" }, {
706
- default: withCtx(() => [
707
- createElementVNode("div", _hoisted_32, [
708
- createVNode(_component_a_slider, {
709
- min: 20,
710
- max: 100,
711
- value: props.record.options.style.minHeight,
712
- "onUpdate:value": _cache[22] || (_cache[22] = ($event) => props.record.options.style.minHeight = $event),
713
- style: { "flex": "1", "margin-right": "12px" }
714
- }, null, 8, ["value"]),
715
- createVNode(_component_a_input_number, {
716
- min: 20,
717
- max: 100,
718
- value: props.record.options.style.minHeight,
719
- "onUpdate:value": _cache[23] || (_cache[23] = ($event) => props.record.options.style.minHeight = $event)
720
- }, null, 8, ["value"])
721
- ])
722
- ]),
723
- _: 1
724
- }),
725
- createVNode(_component_a_form_item, { label: "垂直对齐" }, {
726
- default: withCtx(() => [
727
- createVNode(_component_a_select, {
728
- value: alignItems.value,
729
- "onUpdate:value": _cache[24] || (_cache[24] = ($event) => alignItems.value = $event),
730
- placeholder: "选择对齐方式"
731
- }, {
732
- default: withCtx(() => [
733
- createVNode(_component_a_select_option, { value: "start" }, {
734
- default: withCtx(() => [..._cache[35] || (_cache[35] = [
735
- createTextVNode("顶部", -1)
736
- ])]),
737
- _: 1
738
- }),
739
- createVNode(_component_a_select_option, { value: "center" }, {
740
- default: withCtx(() => [..._cache[36] || (_cache[36] = [
741
- createTextVNode("居中", -1)
742
- ])]),
743
- _: 1
744
- }),
745
- createVNode(_component_a_select_option, { value: "end" }, {
746
- default: withCtx(() => [..._cache[37] || (_cache[37] = [
747
- createTextVNode("底部", -1)
748
- ])]),
749
- _: 1
750
- })
751
- ]),
752
- _: 1
753
- }, 8, ["value"])
754
- ]),
755
- _: 1
756
- })
757
- ]),
758
- _: 1
759
- })
760
- ])
761
- ]);
762
- };
763
- }
764
- };
765
- const SingleColumnStylePes = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67982909"]]);
766
- export {
767
- SingleColumnStylePes as default
768
- };