@oneclick.dev/cms-core-modules 0.0.54 → 0.0.56

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 (20) hide show
  1. package/dist/{ContentEditor-DzTi8fSZ.js → ContentEditor-BBdzuTJJ.js} +34 -34
  2. package/dist/{ContentEditor-DRJFQKCv.mjs → ContentEditor-HwHspQO1.mjs} +7396 -7009
  3. package/dist/GlobalStyling-BLQ_1W2y.mjs +1588 -0
  4. package/dist/GlobalStyling-CnSlXkZc.js +25 -0
  5. package/dist/cms-core-modules.css +1 -1
  6. package/dist/index.cjs.js +1 -1
  7. package/dist/index.mjs +2 -2
  8. package/dist/src/content-manager/components/content-editor/ContentLayout.vue.d.ts +8 -0
  9. package/dist/src/content-manager/components/content-editor/NewSectionDialog.vue.d.ts +5 -1
  10. package/dist/src/content-manager/components/content-editor/tiptap-extensions/Card.d.ts +6 -0
  11. package/dist/src/content-manager/components/content-editor/tiptap-extensions/ScopedSelectAll.d.ts +7 -0
  12. package/dist/src/content-manager/components/content-editor/tiptap-menus/NewNodeView.vue.d.ts +16 -2
  13. package/dist/src/content-manager/components/content-editor/tiptap-menus/element-editor-views/CardMenu.vue.d.ts +13 -0
  14. package/dist/src/content-manager/components/content-editor/tiptap-menus/element-editor-views/index.d.ts +14 -0
  15. package/dist/src/content-manager/components/styling/ButtonStyleDialog.vue.d.ts +7 -7
  16. package/dist/src/content-manager/components/styling/CardStyleDialog.vue.d.ts +24 -0
  17. package/dist/src/content-manager/pages/GlobalStyling.vue.d.ts +46 -8
  18. package/package.json +3 -3
  19. package/dist/GlobalStyling-CMzPRd18.js +0 -17
  20. package/dist/GlobalStyling-DoLHUJeV.mjs +0 -988
package/dist/GlobalStyling-DoLHUJeV.mjs DELETED
@@ -1,988 +0,0 @@
1
- import { defineComponent as K, ref as $, reactive as Y, resolveComponent as v, createBlock as y, openBlock as r, withCtx as i, createVNode as s, createElementVNode as o, createTextVNode as u, toDisplayString as w, createElementBlock as S, createCommentVNode as z, withDirectives as E, vModelText as L, computed as q, normalizeStyle as B, unref as g, onMounted as te, Fragment as h, renderList as W } from "vue";
2
- import { useConfirmation as Z, useModuleRoute as oe, useModuleStorage as le, useModuleBreadcrumbs as se } from "@oneclick.dev/cms-kit";
3
- import { Circle as _, CircleCheckBig as U, ChevronLeft as ne, Plus as X } from "lucide-vue-next";
4
- const ae = { class: "grid py-4" }, ie = { class: "grid grid-cols-2 gap-2 mb-6" }, re = { class: "relative" }, de = { class: "grid grid-cols-3 gap-2 mb-6" }, ue = { class: "relative" }, ce = { class: "relative" }, me = { class: "relative" }, pe = { class: "grid grid-cols-1 gap-2 mb-6" }, ye = { class: "relative" }, be = { class: "flex items-center space-x-2" }, ve = { class: "flex items-center space-x-2" }, fe = { class: "grid grid-cols-2 gap-2 mb-6" }, ge = { key: 0 }, xe = { class: "relative" }, Ce = { key: 1 }, ke = { class: "relative" }, De = {
5
- key: 0,
6
- class: "bg-muted px-4 py-2 rounded-md text-sm"
7
- }, Se = /* @__PURE__ */ K({
8
- __name: "SectionStyleDialog",
9
- props: {
10
- buttons: {
11
- type: Array,
12
- default: () => []
13
- }
14
- },
15
- emits: ["add", "edit", "delete"],
16
- setup(Q, { expose: I, emit: F }) {
17
- const { confirm: T } = Z(), V = F, C = $(!1), a = $("create"), d = $(null), x = $(!1), t = Y({
18
- name: "",
19
- rendering: "class",
20
- className: "",
21
- componentName: "",
22
- styles: {
23
- backgroundColor: "#FFFFFF",
24
- titleColor: "#000000",
25
- textColor: "#000000"
26
- }
27
- }), G = (k) => {
28
- k ? (a.value = "edit", d.value = k.id, x.value = k.id === "DEFAULT", t.name = k.name || "", t.rendering = k.rendering || "class", t.className = k.className || "", t.componentName = k.componentName || "", t.styles.backgroundColor = k.styles.backgroundColor || "#FFFFFF", t.styles.titleColor = k.styles.titleColor || "#000000", t.styles.textColor = k.styles.textColor || "#000000") : (a.value = "create", d.value = null, x.value = !1, t.name = "", t.rendering = "class", t.className = "", t.componentName = "", t.styles.backgroundColor = "#FFFFFF", t.styles.titleColor = "#000000", t.styles.textColor = "#000000"), C.value = !0;
29
- }, O = () => {
30
- V("add", t), C.value = !1;
31
- }, M = () => {
32
- x.value && (t.name = "Default"), V("edit", { id: d.value, ...t }), C.value = !1;
33
- }, J = async () => {
34
- if (x.value) return;
35
- await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (V("delete", d.value), C.value = !1);
36
- }, P = () => {
37
- t.styles.backgroundColor = "#FFFFFF", t.styles.titleColor = "#000000", t.styles.textColor = "#000000";
38
- };
39
- return I({
40
- openDialog: G
41
- }), (k, n) => {
42
- const l = v("DialogTitle"), e = v("DialogDescription"), m = v("DialogHeader"), b = v("Label"), p = v("Input"), D = v("RadioGroupItem"), N = v("RadioGroup"), R = v("Button"), H = v("DialogFooter"), A = v("DialogScrollContent"), j = v("Dialog");
43
- return r(), y(j, {
44
- open: C.value,
45
- "onUpdate:open": n[10] || (n[10] = (f) => C.value = f)
46
- }, {
47
- default: i(() => [
48
- s(A, { class: "sm:max-w-2xl" }, {
49
- default: i(() => [
50
- s(m, null, {
51
- default: i(() => [
52
- s(l, null, {
53
- default: i(() => [
54
- u(w(a.value === "create" ? "Add New Section Style" : "Edit Section Style"), 1)
55
- ]),
56
- _: 1
57
- }),
58
- s(e, null, {
59
- default: i(() => [...n[11] || (n[11] = [
60
- u(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)
61
- ])]),
62
- _: 1
63
- })
64
- ]),
65
- _: 1
66
- }),
67
- o("div", ae, [
68
- o("div", ie, [
69
- o("div", null, [
70
- s(b, {
71
- class: "mb-2",
72
- for: "collection-theme-dialog-theme-name"
73
- }, {
74
- default: i(() => [...n[12] || (n[12] = [
75
- u("Display name", -1)
76
- ])]),
77
- _: 1
78
- }),
79
- o("div", re, [
80
- s(p, {
81
- modelValue: t.name,
82
- "onUpdate:modelValue": n[0] || (n[0] = (f) => t.name = f),
83
- id: "collection-theme-dialog-theme-name",
84
- disabled: x.value
85
- }, null, 8, ["modelValue", "disabled"])
86
- ])
87
- ])
88
- ]),
89
- n[21] || (n[21] = o("h2", { class: "font-semibold mb-4" }, "Style Settings", -1)),
90
- o("div", de, [
91
- o("div", null, [
92
- s(b, {
93
- class: "mb-2",
94
- for: "collection-theme-dialog-background-color"
95
- }, {
96
- default: i(() => [...n[13] || (n[13] = [
97
- u("Background color", -1)
98
- ])]),
99
- _: 1
100
- }),
101
- o("div", ue, [
102
- E(o("input", {
103
- "onUpdate:modelValue": n[1] || (n[1] = (f) => t.styles.backgroundColor = f),
104
- type: "color",
105
- label: "Primary Color",
106
- class: "absolute top-0.5 left-1 size-8"
107
- }, null, 512), [
108
- [L, t.styles.backgroundColor]
109
- ]),
110
- s(p, {
111
- modelValue: t.styles.backgroundColor,
112
- "onUpdate:modelValue": n[2] || (n[2] = (f) => t.styles.backgroundColor = f),
113
- class: "pl-12",
114
- id: "collection-theme-dialog-background-color"
115
- }, null, 8, ["modelValue"])
116
- ])
117
- ]),
118
- o("div", null, [
119
- s(b, {
120
- class: "mb-2",
121
- for: "collection-theme-dialog-title-color"
122
- }, {
123
- default: i(() => [...n[14] || (n[14] = [
124
- u("Heading color", -1)
125
- ])]),
126
- _: 1
127
- }),
128
- o("div", ce, [
129
- E(o("input", {
130
- "onUpdate:modelValue": n[3] || (n[3] = (f) => t.styles.titleColor = f),
131
- type: "color",
132
- label: "Primary Color",
133
- class: "absolute top-0.5 left-1 size-8"
134
- }, null, 512), [
135
- [L, t.styles.titleColor]
136
- ]),
137
- s(p, {
138
- modelValue: t.styles.titleColor,
139
- "onUpdate:modelValue": n[4] || (n[4] = (f) => t.styles.titleColor = f),
140
- class: "pl-12",
141
- id: "collection-theme-dialog-title-color"
142
- }, null, 8, ["modelValue"])
143
- ])
144
- ]),
145
- o("div", null, [
146
- s(b, {
147
- class: "mb-2",
148
- for: "collection-theme-dialog-text-color"
149
- }, {
150
- default: i(() => [...n[15] || (n[15] = [
151
- u("Body text color", -1)
152
- ])]),
153
- _: 1
154
- }),
155
- o("div", me, [
156
- E(o("input", {
157
- "onUpdate:modelValue": n[5] || (n[5] = (f) => t.styles.textColor = f),
158
- type: "color",
159
- label: "Primary Color",
160
- class: "absolute top-0.5 left-1 size-8"
161
- }, null, 512), [
162
- [L, t.styles.textColor]
163
- ]),
164
- s(p, {
165
- modelValue: t.styles.textColor,
166
- "onUpdate:modelValue": n[6] || (n[6] = (f) => t.styles.textColor = f),
167
- class: "pl-12",
168
- id: "collection-theme-dialog-text-color"
169
- }, null, 8, ["modelValue"])
170
- ])
171
- ])
172
- ]),
173
- n[22] || (n[22] = o("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1)),
174
- o("div", pe, [
175
- o("div", null, [
176
- o("div", ye, [
177
- s(b, { class: "mb-4 text-muted-foreground" }, {
178
- default: i(() => [...n[16] || (n[16] = [
179
- u("Choose how this section should be styled on your site:", -1)
180
- ])]),
181
- _: 1
182
- }),
183
- s(N, {
184
- modelValue: t.rendering,
185
- "onUpdate:modelValue": n[7] || (n[7] = (f) => t.rendering = f),
186
- "default-value": "class"
187
- }, {
188
- default: i(() => [
189
- o("div", be, [
190
- s(D, {
191
- id: "collection-theme-dialog-render-class",
192
- value: "class"
193
- }),
194
- s(b, { for: "collection-theme-dialog-render-class" }, {
195
- default: i(() => [...n[17] || (n[17] = [
196
- u("Use a CSS class", -1)
197
- ])]),
198
- _: 1
199
- })
200
- ]),
201
- o("div", ve, [
202
- s(D, {
203
- id: "collection-theme-dialog-render-component",
204
- value: "component"
205
- }),
206
- s(b, { for: "collection-theme-dialog-render-component" }, {
207
- default: i(() => [...n[18] || (n[18] = [
208
- u("Custom component", -1)
209
- ])]),
210
- _: 1
211
- })
212
- ])
213
- ]),
214
- _: 1
215
- }, 8, ["modelValue"])
216
- ])
217
- ])
218
- ]),
219
- o("div", fe, [
220
- t.rendering === "class" ? (r(), S("div", ge, [
221
- s(b, {
222
- class: "mb-2",
223
- for: "collection-theme-dialog-class-name"
224
- }, {
225
- default: i(() => [...n[19] || (n[19] = [
226
- u("Class name", -1)
227
- ])]),
228
- _: 1
229
- }),
230
- o("div", xe, [
231
- s(p, {
232
- modelValue: t.className,
233
- "onUpdate:modelValue": n[8] || (n[8] = (f) => t.className = f),
234
- id: "collection-theme-dialog-class-name"
235
- }, null, 8, ["modelValue"])
236
- ])
237
- ])) : (r(), S("div", Ce, [
238
- s(b, {
239
- class: "mb-2",
240
- for: "collection-theme-dialog-component-name"
241
- }, {
242
- default: i(() => [...n[20] || (n[20] = [
243
- u("Component name", -1)
244
- ])]),
245
- _: 1
246
- }),
247
- o("div", ke, [
248
- s(p, {
249
- modelValue: t.componentName,
250
- "onUpdate:modelValue": n[9] || (n[9] = (f) => t.componentName = f),
251
- id: "collection-theme-dialog-component-name"
252
- }, null, 8, ["modelValue"])
253
- ])
254
- ]))
255
- ]),
256
- t.rendering === "class" ? (r(), S("pre", De, "." + w(t.className) + ` {
257
- background-color: ` + w(t.styles.backgroundColor) + `;
258
- color: ` + w(t.styles.textColor) + `;
259
-
260
- h1, h2, h3, h4, h5, h6 {
261
- color: ` + w(t.styles.titleColor) + `;
262
- }
263
- }
264
- `, 1)) : z("", !0)
265
- ]),
266
- s(H, null, {
267
- default: i(() => [
268
- a.value === "edit" && !x.value ? (r(), y(R, {
269
- key: 0,
270
- variant: "destructive",
271
- class: "mr-auto",
272
- onClick: J
273
- }, {
274
- default: i(() => [...n[23] || (n[23] = [
275
- u(" Delete Style ", -1)
276
- ])]),
277
- _: 1
278
- })) : z("", !0),
279
- a.value === "edit" && x.value ? (r(), y(R, {
280
- key: 1,
281
- variant: "outline",
282
- class: "mr-auto",
283
- onClick: P
284
- }, {
285
- default: i(() => [...n[24] || (n[24] = [
286
- u(" Reset to Default ", -1)
287
- ])]),
288
- _: 1
289
- })) : z("", !0),
290
- a.value === "create" ? (r(), y(R, {
291
- key: 2,
292
- type: "submit",
293
- onClick: O
294
- }, {
295
- default: i(() => [...n[25] || (n[25] = [
296
- u(" Add Style ", -1)
297
- ])]),
298
- _: 1
299
- })) : (r(), y(R, {
300
- key: 3,
301
- type: "submit",
302
- onClick: M
303
- }, {
304
- default: i(() => [...n[26] || (n[26] = [
305
- u(" Save Changes ", -1)
306
- ])]),
307
- _: 1
308
- }))
309
- ]),
310
- _: 1
311
- })
312
- ]),
313
- _: 1
314
- })
315
- ]),
316
- _: 1
317
- }, 8, ["open"]);
318
- };
319
- }
320
- }), Fe = { class: "grid py-4" }, Te = { class: "grid grid-cols-2 gap-2 mb-6" }, $e = { class: "relative" }, Ve = { class: "grid grid-cols-3 gap-2 mb-6" }, we = { class: "relative" }, Ne = { class: "relative" }, _e = { class: "relative" }, Ue = { class: "grid grid-cols-4 gap-4 mb-6 bg-white/90 p-2 rounded" }, Be = { class: "grid grid-cols-1 gap-2 mb-6" }, Re = { class: "relative" }, ze = { class: "flex items-center space-x-2" }, Ae = { class: "flex items-center space-x-2" }, Ee = { class: "grid grid-cols-2 gap-2 mb-6" }, Le = { key: 0 }, Ie = { class: "relative" }, Ge = { key: 1 }, Oe = { class: "relative" }, Me = {
321
- key: 0,
322
- class: "bg-muted px-4 py-2 rounded-md text-sm"
323
- }, Je = /* @__PURE__ */ K({
324
- __name: "ButtonStyleDialog",
325
- props: {
326
- buttons: {
327
- type: Array,
328
- default: () => []
329
- }
330
- },
331
- emits: ["add", "edit", "delete"],
332
- setup(Q, { expose: I, emit: F }) {
333
- const { confirm: T } = Z(), V = F, C = $(!1), a = $("create"), d = $(null), x = $(!1), t = Y({
334
- name: "",
335
- rendering: "class",
336
- className: "",
337
- componentName: "",
338
- styles: {
339
- backgroundColor: "#FFFFFF",
340
- textColor: "#000000",
341
- borderColor: "#000000",
342
- buttonRoundness: "none",
343
- buttonStyle: "default"
344
- }
345
- }), G = (l) => {
346
- l ? (a.value = "edit", d.value = l.id, x.value = l.id === "DEFAULT", t.name = l.name || "", t.rendering = l.rendering || "class", t.className = l.className || "", t.componentName = l.componentName || "", t.styles.backgroundColor = l.styles.backgroundColor || "#FFFFFF", t.styles.textColor = l.styles.textColor || "#000000", t.styles.borderColor = l.styles.borderColor || "#000000", t.styles.buttonRoundness = l.styles.buttonRoundness || "none", t.styles.buttonStyle = l.styles.buttonStyle || "default") : (a.value = "create", d.value = null, x.value = !1, t.name = "", t.rendering = "class", t.className = "", t.componentName = "", t.styles.backgroundColor = "#FFFFFF", t.styles.textColor = "#000000", t.styles.borderColor = "#000000", t.styles.buttonRoundness = "none", t.styles.buttonStyle = "default"), C.value = !0;
347
- }, O = () => {
348
- V("add", t), C.value = !1;
349
- }, M = () => {
350
- x.value && (t.name = "Default"), V("edit", { id: d.value, ...t }), C.value = !1;
351
- }, J = async () => {
352
- if (x.value) return;
353
- await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (V("delete", d.value), C.value = !1);
354
- }, P = () => {
355
- t.styles.backgroundColor = "#FFFFFF", t.styles.textColor = "#000000", t.styles.borderColor = "#000000", t.styles.buttonRoundness = "none", t.styles.buttonStyle = "default";
356
- }, k = (l) => {
357
- switch (l) {
358
- case "none":
359
- return 0;
360
- case "small":
361
- return 8;
362
- case "medium":
363
- return 12;
364
- case "pill":
365
- return 99;
366
- default:
367
- return 0;
368
- }
369
- }, n = q(() => {
370
- let l = "." + t.className + ` {
371
- `;
372
- return l += ` background-color: ${t.styles.backgroundColor};
373
- `, l += ` color: ${t.styles.textColor};
374
- `, t.styles.buttonStyle === "outline" ? l += ` border: 1px solid ${t.styles.borderColor};
375
- ` : t.styles.buttonStyle === "shadow" ? l += ` box-shadow: 0 3px 6px #ccc;
376
- ` : t.styles.buttonStyle === "retro" && (l += ` box-shadow: inset 0 0 0 2px ${t.styles.borderColor}, 2px 2px 0 ${t.styles.borderColor};
377
- `), t.styles.buttonRoundness !== "none" && (l += ` border-radius: ${k(t.styles.buttonRoundness)}px;
378
- `), l += `}
379
- `, l;
380
- });
381
- return I({
382
- openDialog: G
383
- }), (l, e) => {
384
- const m = v("DialogTitle"), b = v("DialogDescription"), p = v("DialogHeader"), D = v("Label"), N = v("Input"), R = v("RadioGroupItem"), H = v("RadioGroup"), A = v("Button"), j = v("DialogFooter"), f = v("DialogScrollContent"), ee = v("Dialog");
385
- return r(), y(ee, {
386
- open: C.value,
387
- "onUpdate:open": e[18] || (e[18] = (c) => C.value = c)
388
- }, {
389
- default: i(() => [
390
- s(f, { class: "sm:max-w-2xl" }, {
391
- default: i(() => [
392
- s(p, null, {
393
- default: i(() => [
394
- s(m, null, {
395
- default: i(() => [
396
- u(w(a.value === "create" ? "Add New Button Style" : "Edit Button Style"), 1)
397
- ]),
398
- _: 1
399
- }),
400
- s(b, null, {
401
- default: i(() => [...e[19] || (e[19] = [
402
- u(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)
403
- ])]),
404
- _: 1
405
- })
406
- ]),
407
- _: 1
408
- }),
409
- o("div", Fe, [
410
- o("div", Te, [
411
- o("div", null, [
412
- s(D, {
413
- class: "mb-2",
414
- for: "collection-theme-dialog-theme-name"
415
- }, {
416
- default: i(() => [...e[20] || (e[20] = [
417
- u("Display name", -1)
418
- ])]),
419
- _: 1
420
- }),
421
- o("div", $e, [
422
- s(N, {
423
- modelValue: t.name,
424
- "onUpdate:modelValue": e[0] || (e[0] = (c) => t.name = c),
425
- id: "collection-theme-dialog-theme-name",
426
- disabled: x.value
427
- }, null, 8, ["modelValue", "disabled"])
428
- ])
429
- ])
430
- ]),
431
- e[38] || (e[38] = o("h2", { class: "font-semibold mb-4" }, "Style Settings", -1)),
432
- o("div", Ve, [
433
- o("div", null, [
434
- s(D, {
435
- class: "mb-2",
436
- for: "collection-theme-dialog-background-color"
437
- }, {
438
- default: i(() => [...e[21] || (e[21] = [
439
- u("Background color", -1)
440
- ])]),
441
- _: 1
442
- }),
443
- o("div", we, [
444
- E(o("input", {
445
- "onUpdate:modelValue": e[1] || (e[1] = (c) => t.styles.backgroundColor = c),
446
- type: "color",
447
- label: "Primary Color",
448
- class: "absolute top-0.5 left-1 size-8"
449
- }, null, 512), [
450
- [L, t.styles.backgroundColor]
451
- ]),
452
- s(N, {
453
- modelValue: t.styles.backgroundColor,
454
- "onUpdate:modelValue": e[2] || (e[2] = (c) => t.styles.backgroundColor = c),
455
- class: "pl-12",
456
- id: "collection-theme-dialog-background-color"
457
- }, null, 8, ["modelValue"])
458
- ])
459
- ]),
460
- o("div", null, [
461
- s(D, {
462
- class: "mb-2",
463
- for: "collection-theme-dialog-text-color"
464
- }, {
465
- default: i(() => [...e[22] || (e[22] = [
466
- u("Text color", -1)
467
- ])]),
468
- _: 1
469
- }),
470
- o("div", Ne, [
471
- E(o("input", {
472
- "onUpdate:modelValue": e[3] || (e[3] = (c) => t.styles.textColor = c),
473
- type: "color",
474
- label: "Primary Color",
475
- class: "absolute top-0.5 left-1 size-8"
476
- }, null, 512), [
477
- [L, t.styles.textColor]
478
- ]),
479
- s(N, {
480
- modelValue: t.styles.textColor,
481
- "onUpdate:modelValue": e[4] || (e[4] = (c) => t.styles.textColor = c),
482
- class: "pl-12",
483
- id: "collection-theme-dialog-text-color"
484
- }, null, 8, ["modelValue"])
485
- ])
486
- ]),
487
- o("div", null, [
488
- s(D, {
489
- class: "mb-2",
490
- for: "collection-theme-dialog-border-color"
491
- }, {
492
- default: i(() => [...e[23] || (e[23] = [
493
- u("Border color", -1)
494
- ])]),
495
- _: 1
496
- }),
497
- o("div", _e, [
498
- E(o("input", {
499
- "onUpdate:modelValue": e[5] || (e[5] = (c) => t.styles.borderColor = c),
500
- type: "color",
501
- label: "Primary Color",
502
- class: "absolute top-0.5 left-1 size-8"
503
- }, null, 512), [
504
- [L, t.styles.borderColor]
505
- ]),
506
- s(N, {
507
- modelValue: t.styles.borderColor,
508
- "onUpdate:modelValue": e[6] || (e[6] = (c) => t.styles.borderColor = c),
509
- class: "pl-12",
510
- id: "collection-theme-dialog-border-color"
511
- }, null, 8, ["modelValue"])
512
- ])
513
- ])
514
- ]),
515
- o("div", {
516
- style: B(`--button-background-color: ${t.styles.backgroundColor}; --button-text-color: ${t.styles.textColor}`)
517
- }, [
518
- s(D, { class: "mb-4" }, {
519
- default: i(() => [...e[24] || (e[24] = [
520
- u("Shape", -1)
521
- ])]),
522
- _: 1
523
- }),
524
- o("div", Ue, [
525
- o("div", {
526
- class: "flex flex-col gap-2 items-center cursor-pointer",
527
- onClick: e[7] || (e[7] = (c) => t.styles.buttonRoundness = "none")
528
- }, [
529
- e[25] || (e[25] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)]" }, "Button", -1)),
530
- t.styles.buttonRoundness !== "none" ? (r(), y(g(_), {
531
- key: 0,
532
- class: "size-4 text-black/30"
533
- })) : (r(), y(g(U), {
534
- key: 1,
535
- class: "size-4 text-black"
536
- }))
537
- ]),
538
- o("div", {
539
- class: "flex flex-col gap-2 items-center cursor-pointer",
540
- onClick: e[8] || (e[8] = (c) => t.styles.buttonRoundness = "small")
541
- }, [
542
- e[26] || (e[26] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[8px]" }, "Button", -1)),
543
- t.styles.buttonRoundness !== "small" ? (r(), y(g(_), {
544
- key: 0,
545
- class: "size-4 text-black/30"
546
- })) : (r(), y(g(U), {
547
- key: 1,
548
- class: "size-4 text-black"
549
- }))
550
- ]),
551
- o("div", {
552
- class: "flex flex-col gap-2 items-center cursor-pointer",
553
- onClick: e[9] || (e[9] = (c) => t.styles.buttonRoundness = "medium")
554
- }, [
555
- e[27] || (e[27] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[12px]" }, "Button", -1)),
556
- t.styles.buttonRoundness !== "medium" ? (r(), y(g(_), {
557
- key: 0,
558
- class: "size-4 text-black/30"
559
- })) : (r(), y(g(U), {
560
- key: 1,
561
- class: "size-4 text-black"
562
- }))
563
- ]),
564
- o("div", {
565
- class: "flex flex-col gap-2 items-center cursor-pointer",
566
- onClick: e[10] || (e[10] = (c) => t.styles.buttonRoundness = "pill")
567
- }, [
568
- e[28] || (e[28] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[99px]" }, "Button", -1)),
569
- t.styles.buttonRoundness !== "pill" ? (r(), y(g(_), {
570
- key: 0,
571
- class: "size-4 text-black/30"
572
- })) : (r(), y(g(U), {
573
- key: 1,
574
- class: "size-4 text-black"
575
- }))
576
- ])
577
- ]),
578
- s(D, { class: "mb-4" }, {
579
- default: i(() => [...e[29] || (e[29] = [
580
- u("Style", -1)
581
- ])]),
582
- _: 1
583
- }),
584
- o("div", {
585
- class: "grid grid-cols-4 gap-4 mb-6 bg-white/90 p-2 rounded",
586
- style: B(`--button-border-radius: ${k(t.styles.buttonRoundness)}px; --button-border-color: ${t.styles.borderColor}`)
587
- }, [
588
- o("div", {
589
- class: "flex flex-col gap-2 items-center cursor-pointer",
590
- onClick: e[11] || (e[11] = (c) => t.styles.buttonStyle = "default")
591
- }, [
592
- e[30] || (e[30] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]" }, "Button", -1)),
593
- t.styles.buttonStyle !== "default" ? (r(), y(g(_), {
594
- key: 0,
595
- class: "size-4 text-black/30"
596
- })) : (r(), y(g(U), {
597
- key: 1,
598
- class: "size-4 text-black"
599
- }))
600
- ]),
601
- o("div", {
602
- class: "flex flex-col gap-2 items-center cursor-pointer",
603
- onClick: e[12] || (e[12] = (c) => t.styles.buttonStyle = "outline")
604
- }, [
605
- e[31] || (e[31] = o("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)] border border-[var(--button-border-color)]" }, " Button ", -1)),
606
- t.styles.buttonStyle !== "outline" ? (r(), y(g(_), {
607
- key: 0,
608
- class: "size-4 text-black/30"
609
- })) : (r(), y(g(U), {
610
- key: 1,
611
- class: "size-4 text-black"
612
- }))
613
- ]),
614
- o("div", {
615
- class: "flex flex-col gap-2 items-center cursor-pointer",
616
- onClick: e[13] || (e[13] = (c) => t.styles.buttonStyle = "shadow")
617
- }, [
618
- e[32] || (e[32] = o("div", {
619
- class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
620
- style: { "box-shadow": "0 3px 6px #ccc" }
621
- }, " Button ", -1)),
622
- t.styles.buttonStyle !== "shadow" ? (r(), y(g(_), {
623
- key: 0,
624
- class: "size-4 text-black/30"
625
- })) : (r(), y(g(U), {
626
- key: 1,
627
- class: "size-4 text-black"
628
- }))
629
- ]),
630
- o("div", {
631
- class: "flex flex-col gap-2 items-center cursor-pointer",
632
- onClick: e[14] || (e[14] = (c) => t.styles.buttonStyle = "retro")
633
- }, [
634
- o("div", {
635
- class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
636
- style: B(`box-shadow: inset 0 0 0 2px ${t.styles.borderColor}, 2px 2px 0 ${t.styles.borderColor};`)
637
- }, " Button ", 4),
638
- t.styles.buttonStyle !== "retro" ? (r(), y(g(_), {
639
- key: 0,
640
- class: "size-4 text-black/30"
641
- })) : (r(), y(g(U), {
642
- key: 1,
643
- class: "size-4 text-black"
644
- }))
645
- ])
646
- ], 4)
647
- ], 4),
648
- e[39] || (e[39] = o("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1)),
649
- o("div", Be, [
650
- o("div", null, [
651
- o("div", Re, [
652
- s(D, { class: "mb-4 text-muted-foreground" }, {
653
- default: i(() => [...e[33] || (e[33] = [
654
- u("Choose how this section should be styled on your site:", -1)
655
- ])]),
656
- _: 1
657
- }),
658
- s(H, {
659
- modelValue: t.rendering,
660
- "onUpdate:modelValue": e[15] || (e[15] = (c) => t.rendering = c),
661
- "default-value": "class"
662
- }, {
663
- default: i(() => [
664
- o("div", ze, [
665
- s(R, {
666
- id: "collection-theme-dialog-render-class",
667
- value: "class"
668
- }),
669
- s(D, { for: "collection-theme-dialog-render-class" }, {
670
- default: i(() => [...e[34] || (e[34] = [
671
- u("Use a CSS class", -1)
672
- ])]),
673
- _: 1
674
- })
675
- ]),
676
- o("div", Ae, [
677
- s(R, {
678
- id: "collection-theme-dialog-render-component",
679
- value: "component"
680
- }),
681
- s(D, { for: "collection-theme-dialog-render-component" }, {
682
- default: i(() => [...e[35] || (e[35] = [
683
- u("Custom component", -1)
684
- ])]),
685
- _: 1
686
- })
687
- ])
688
- ]),
689
- _: 1
690
- }, 8, ["modelValue"])
691
- ])
692
- ])
693
- ]),
694
- o("div", Ee, [
695
- t.rendering === "class" ? (r(), S("div", Le, [
696
- s(D, {
697
- class: "mb-2",
698
- for: "collection-theme-dialog-class-name"
699
- }, {
700
- default: i(() => [...e[36] || (e[36] = [
701
- u("Class name", -1)
702
- ])]),
703
- _: 1
704
- }),
705
- o("div", Ie, [
706
- s(N, {
707
- modelValue: t.className,
708
- "onUpdate:modelValue": e[16] || (e[16] = (c) => t.className = c),
709
- id: "collection-theme-dialog-class-name"
710
- }, null, 8, ["modelValue"])
711
- ])
712
- ])) : (r(), S("div", Ge, [
713
- s(D, {
714
- class: "mb-2",
715
- for: "collection-theme-dialog-component-name"
716
- }, {
717
- default: i(() => [...e[37] || (e[37] = [
718
- u("Component name", -1)
719
- ])]),
720
- _: 1
721
- }),
722
- o("div", Oe, [
723
- s(N, {
724
- modelValue: t.componentName,
725
- "onUpdate:modelValue": e[17] || (e[17] = (c) => t.componentName = c),
726
- id: "collection-theme-dialog-component-name"
727
- }, null, 8, ["modelValue"])
728
- ])
729
- ]))
730
- ]),
731
- t.rendering === "class" ? (r(), S("pre", Me, w(n.value), 1)) : z("", !0)
732
- ]),
733
- s(j, null, {
734
- default: i(() => [
735
- a.value === "edit" && !x.value ? (r(), y(A, {
736
- key: 0,
737
- variant: "destructive",
738
- class: "mr-auto",
739
- onClick: J
740
- }, {
741
- default: i(() => [...e[40] || (e[40] = [
742
- u(" Delete Style ", -1)
743
- ])]),
744
- _: 1
745
- })) : z("", !0),
746
- a.value === "edit" && x.value ? (r(), y(A, {
747
- key: 1,
748
- variant: "outline",
749
- class: "mr-auto",
750
- onClick: P
751
- }, {
752
- default: i(() => [...e[41] || (e[41] = [
753
- u(" Reset to Default ", -1)
754
- ])]),
755
- _: 1
756
- })) : z("", !0),
757
- a.value === "create" ? (r(), y(A, {
758
- key: 2,
759
- type: "submit",
760
- onClick: O
761
- }, {
762
- default: i(() => [...e[42] || (e[42] = [
763
- u(" Add Style ", -1)
764
- ])]),
765
- _: 1
766
- })) : (r(), y(A, {
767
- key: 3,
768
- type: "submit",
769
- onClick: M
770
- }, {
771
- default: i(() => [...e[43] || (e[43] = [
772
- u(" Save Changes ", -1)
773
- ])]),
774
- _: 1
775
- }))
776
- ]),
777
- _: 1
778
- })
779
- ]),
780
- _: 1
781
- })
782
- ]),
783
- _: 1
784
- }, 8, ["open"]);
785
- };
786
- }
787
- }), Pe = { class: "w-full" }, He = { class: "flex items-center justify-between gap-4 w-full my-4" }, je = {
788
- key: 0,
789
- class: "flex gap-4 flex-wrap mb-8"
790
- }, he = ["onClick"], qe = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Ke = {
791
- key: 1,
792
- class: "flex gap-4 flex-wrap mb-8"
793
- }, Qe = {
794
- key: 2,
795
- class: "flex gap-4 flex-wrap mb-8"
796
- }, We = ["onClick"], Xe = { class: "flex flex-col items-center justify-center rounded-md p-4 size-44 bg-white" }, Ye = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Ze = {
797
- key: 3,
798
- class: "flex gap-4 flex-wrap mb-8"
799
- }, lt = /* @__PURE__ */ K({
800
- __name: "GlobalStyling",
801
- setup(Q) {
802
- const { navigateTo: I } = oe(), { getModuleData: F, setModuleData: T } = le();
803
- se(() => [
804
- { text: "Global Styling" }
805
- ]);
806
- const V = $(""), C = $(""), a = $(null), d = $(null), x = q(() => a.value === null ? null : a.value && a.value.find((l) => l.id === "DEFAULT") ? a.value : [
807
- { id: "DEFAULT", name: "Default", className: "", styles: { backgroundColor: "#FFFFFF", textColor: "#000000" } },
808
- ...a.value
809
- ]), t = q(() => d.value === null ? null : d.value && d.value.find((l) => l.id === "DEFAULT") ? d.value : [
810
- { id: "DEFAULT", name: "Default", className: "", styles: { backgroundColor: "#FFFFFF", textColor: "#000000" } },
811
- ...d.value
812
- ]);
813
- async function G(l) {
814
- let e = JSON.parse(JSON.stringify(l)), m = crypto.randomUUID();
815
- e.id = m, a.value.push(e), a.value = await F("sectionThemes") || [], a.value.push(e), T("sectionThemes", a.value);
816
- }
817
- async function O(l) {
818
- let e = JSON.parse(JSON.stringify(l)), m = a.value.findIndex((b) => b.id === e.id);
819
- m !== -1 ? a.value[m] = e : e.id === "DEFAULT" && (Array.isArray(a.value) || (a.value = []), a.value = [
820
- { id: "DEFAULT", name: "Default", styles: e.styles },
821
- ...a.value
822
- ]), a.value = await F("sectionThemes") || [], m = a.value.findIndex((b) => b.id === e.id), m !== -1 ? (a.value[m] = e, T("sectionThemes", a.value)) : e.id === "DEFAULT" && (Array.isArray(a.value) || (a.value = []), a.value = [
823
- { id: "DEFAULT", name: "Default", styles: e.styles },
824
- ...a.value
825
- ], T("sectionThemes", a.value));
826
- }
827
- async function M(l) {
828
- a.value = a.value.filter((e) => e.id !== l), a.value = await F("sectionThemes") || [], a.value = a.value.filter((e) => e.id !== l), T("sectionThemes", a.value);
829
- }
830
- async function J(l) {
831
- let e = JSON.parse(JSON.stringify(l)), m = crypto.randomUUID();
832
- e.id = m, d.value.push(e), d.value = await F("buttonThemes") || [], d.value.push(e), T("buttonThemes", d.value);
833
- }
834
- async function P(l) {
835
- let e = JSON.parse(JSON.stringify(l)), m = d.value.findIndex((b) => b.id === e.id);
836
- m !== -1 ? d.value[m] = e : e.id === "DEFAULT" && (Array.isArray(d.value) || (d.value = []), d.value = [
837
- { id: "DEFAULT", name: "Default", styles: e.styles },
838
- ...d.value
839
- ]), d.value = await F("buttonThemes") || [], m = d.value.findIndex((b) => b.id === e.id), m !== -1 ? (d.value[m] = e, T("buttonThemes", d.value)) : e.id === "DEFAULT" && (Array.isArray(d.value) || (d.value = []), d.value = [
840
- { id: "DEFAULT", name: "Default", styles: e.styles },
841
- ...d.value
842
- ], T("buttonThemes", d.value));
843
- }
844
- async function k(l) {
845
- d.value = d.value.filter((e) => e.id !== l), d.value = await F("buttonThemes") || [], d.value = d.value.filter((e) => e.id !== l), T("buttonThemes", d.value);
846
- }
847
- const n = function(l) {
848
- let e = {};
849
- if (e.backgroundColor = l.styles.backgroundColor, e.color = l.styles.textColor, l.styles.buttonStyle === "outline" ? e.border = `1px solid ${l.styles.borderColor}` : l.styles.buttonStyle === "shadow" ? e.boxShadow = "0 3px 6px #ccc" : l.styles.buttonStyle === "retro" && (e.boxShadow = `inset 0 0 0 2px ${l.styles.borderColor}, 2px 2px 0 ${l.styles.borderColor}`), l.styles.buttonRoundness !== "none") {
850
- let m = 0;
851
- l.styles.buttonRoundness === "small" ? m = 4 : l.styles.buttonRoundness === "medium" ? m = 8 : l.styles.buttonRoundness === "pill" && (m = 9999), e.borderRadius = `${m}px`;
852
- }
853
- return e;
854
- };
855
- return te(() => {
856
- F("sectionThemes").then((l) => {
857
- a.value = l || [];
858
- }), F("buttonThemes").then((l) => {
859
- d.value = l || [];
860
- });
861
- }), (l, e) => {
862
- const m = v("Button"), b = v("Skeleton");
863
- return r(), S(h, null, [
864
- o("div", Pe, [
865
- o("div", He, [
866
- s(m, {
867
- onClick: e[0] || (e[0] = (p) => g(I)("/")),
868
- variant: "link",
869
- class: "!pl-0"
870
- }, {
871
- default: i(() => [
872
- s(g(ne), { class: "size-4" }),
873
- e[3] || (e[3] = u(" Collections ", -1))
874
- ]),
875
- _: 1
876
- })
877
- ]),
878
- e[7] || (e[7] = o("h1", { class: "text-3xl mb-8" }, "Global Styling", -1)),
879
- e[8] || (e[8] = o("h3", { class: "text-2xl mb-2" }, "Section Variants", -1)),
880
- e[9] || (e[9] = o("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Set up the default design variants for your sections. These styles will be available across all collections by default, but you can choose to disable them within individual collections if needed. ", -1)),
881
- x.value !== null ? (r(), S("div", je, [
882
- o("div", {
883
- class: "group/item flex flex-col gap-2 items-center",
884
- onClick: e[1] || (e[1] = (p) => V.value.openDialog())
885
- }, [
886
- s(m, {
887
- variant: "outline",
888
- class: "size-44 border-dotted",
889
- tabindex: "-1"
890
- }, {
891
- default: i(() => [
892
- s(g(X), { class: "size-14" })
893
- ]),
894
- _: 1
895
- }),
896
- e[4] || (e[4] = o("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
897
- ]),
898
- (r(!0), S(h, null, W(x.value, (p) => (r(), S("div", {
899
- class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
900
- key: p.id,
901
- onClick: (D) => V.value.openDialog(p)
902
- }, [
903
- o("div", {
904
- class: "flex flex-col items-start rounded-md p-4 size-44",
905
- style: B({ backgroundColor: p.styles.backgroundColor, border: "1px solid #E5E7EB" })
906
- }, [
907
- o("strong", {
908
- class: "text-2xl",
909
- style: B({ color: p.styles.titleColor })
910
- }, "Title", 4),
911
- o("p", {
912
- class: "mb-1",
913
- style: B({ color: p.styles.textColor })
914
- }, [...e[5] || (e[5] = [
915
- u("Lorem ipsum dolor", -1),
916
- o("br", null, null, -1),
917
- u("sit amet.", -1)
918
- ])], 4),
919
- p.className ? (r(), S("p", {
920
- key: 0,
921
- class: "px-3 py-1.5 rounded-[99px]",
922
- style: B({ backgroundColor: p.styles.textColor, color: p.styles.backgroundColor })
923
- }, "." + w(p.className), 5)) : z("", !0)
924
- ], 4),
925
- o("p", qe, w(p.name), 1)
926
- ], 8, he))), 128))
927
- ])) : (r(), S("div", Ke, [
928
- s(b, { class: "size-44 rounded-md" }),
929
- s(b, { class: "size-44 rounded-md" })
930
- ])),
931
- e[10] || (e[10] = o("h3", { class: "text-2xl mb-2" }, "Button Variants", -1)),
932
- e[11] || (e[11] = o("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard button styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1)),
933
- t.value !== null ? (r(), S("div", Qe, [
934
- o("div", {
935
- class: "group/item flex flex-col gap-2 items-center",
936
- onClick: e[2] || (e[2] = (p) => C.value.openDialog())
937
- }, [
938
- s(m, {
939
- variant: "outline",
940
- class: "size-44 border-dotted",
941
- tabindex: "-1"
942
- }, {
943
- default: i(() => [
944
- s(g(X), { class: "size-14" })
945
- ]),
946
- _: 1
947
- }),
948
- e[6] || (e[6] = o("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
949
- ]),
950
- (r(!0), S(h, null, W(t.value, (p) => (r(), S("div", {
951
- class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
952
- key: p.id,
953
- onClick: (D) => C.value.openDialog(p)
954
- }, [
955
- o("div", Xe, [
956
- o("div", {
957
- style: B(n(p)),
958
- class: "px-4 py-2"
959
- }, " Button ", 4)
960
- ]),
961
- o("p", Ye, w(p.name), 1)
962
- ], 8, We))), 128))
963
- ])) : (r(), S("div", Ze, [
964
- s(b, { class: "size-44 rounded-md" }),
965
- s(b, { class: "size-44 rounded-md" })
966
- ]))
967
- ]),
968
- s(Se, {
969
- ref_key: "sectionStyleDialog",
970
- ref: V,
971
- onAdd: G,
972
- onEdit: O,
973
- onDelete: M
974
- }, null, 512),
975
- s(Je, {
976
- ref_key: "buttonStyleDialog",
977
- ref: C,
978
- onAdd: J,
979
- onEdit: P,
980
- onDelete: k
981
- }, null, 512)
982
- ], 64);
983
- };
984
- }
985
- });
986
- export {
987
- lt as default
988
- };