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