@templatical/editor 0.7.2 → 0.7.3

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 (109) hide show
  1. package/dist/{AiChatSidebar-DWRONNm6.js → AiChatSidebar-H7SIsxeC.js} +49 -59
  2. package/dist/{AiFeatureMenu-U7b4Z8OV.js → AiFeatureMenu-CJGX-fP5.js} +1 -1
  3. package/dist/{CloudEditor-DgiUCNMn.js → CloudEditor-BBs3p-mW.js} +124 -120
  4. package/dist/{CollaboratorBar-BgeaMhrV.js → CollaboratorBar-CiEo25lb.js} +2 -2
  5. package/dist/{CommentsSidebar-BiRtaXYD.js → CommentsSidebar-DikjSLtH.js} +1 -1
  6. package/dist/{CountdownToolbar-CojjlZet.js → CountdownToolbar-Bn4RwJVN.js} +2 -2
  7. package/dist/{DesignReferenceSidebar-C1W02bYt.js → DesignReferenceSidebar-D08CLZPA.js} +1 -1
  8. package/dist/{ModuleBrowserModal-Bjh99_5c.js → ModuleBrowserModal-D6637s8j.js} +4 -4
  9. package/dist/{ModulePreviewCanvas-DDDQmUI_.js → ModulePreviewCanvas-DBFmwq-y.js} +1 -1
  10. package/dist/{NumberWithSuffix-CLTBb2Rj.js → NumberWithSuffix-CyFX9w1e.js} +1 -1
  11. package/dist/{ParagraphEditor-BSaEdasm.js → ParagraphEditor-DC2jOjNh.js} +16 -16
  12. package/dist/{RichTextEditorContent-C3QSg7gd.js → RichTextEditorContent-8NkjTIua.js} +1 -1
  13. package/dist/{SaveModuleDialog-9fX6oSxf.js → SaveModuleDialog-NKT7bWWs.js} +2 -2
  14. package/dist/{SnapshotHistory-gYW-IXkE.js → SnapshotHistory-XNqYxPBj.js} +2 -2
  15. package/dist/{TestEmailModal-B_Rmnngq.js → TestEmailModal-B_-Qo5Us.js} +2 -2
  16. package/dist/{TitleEditor-XbFuw1Vy.js → TitleEditor-DnH3yyTr.js} +7 -7
  17. package/dist/{TplModal-LY9rkDph.js → TplModal-BoEZFe3U.js} +2 -2
  18. package/dist/{blockTypeIcons-CLT2H0yU.js → blockTypeIcons-CUcYuWAO.js} +1 -1
  19. package/dist/bundle-stats.json +7 -7
  20. package/dist/cdn/chunks/{AccessibilityPanel-DaqF4Xzy.js → AccessibilityPanel-CQt87OMk.js} +5 -5
  21. package/dist/cdn/chunks/{AccessibilityPanel-DaqF4Xzy.js.map → AccessibilityPanel-CQt87OMk.js.map} +1 -1
  22. package/dist/cdn/chunks/{AiFeatureMenu-WhZ7G-Wr.js → AiFeatureMenu-SxIqfqA0.js} +8 -8
  23. package/dist/cdn/chunks/{AiFeatureMenu-WhZ7G-Wr.js.map → AiFeatureMenu-SxIqfqA0.js.map} +1 -1
  24. package/dist/cdn/chunks/{BlockA11yBadge-BLKyO0lH.js → BlockA11yBadge-QqW6nomn.js} +3 -3
  25. package/dist/cdn/chunks/{BlockA11yBadge-BLKyO0lH.js.map → BlockA11yBadge-QqW6nomn.js.map} +1 -1
  26. package/dist/cdn/chunks/{CloudEditor-BKEXPt3g.js → CloudEditor-ChWUIMw7.js} +165 -161
  27. package/dist/cdn/chunks/CloudEditor-ChWUIMw7.js.map +1 -0
  28. package/dist/cdn/chunks/{CollaboratorBar-ASDiTitQ.js → CollaboratorBar-73LfbzqF.js} +3 -3
  29. package/dist/cdn/chunks/{CollaboratorBar-ASDiTitQ.js.map → CollaboratorBar-73LfbzqF.js.map} +1 -1
  30. package/dist/cdn/chunks/{CountdownBlock-LAlYJYWL.js → CountdownBlock-WYz9b9Ex.js} +2 -2
  31. package/dist/cdn/chunks/{CountdownBlock-LAlYJYWL.js.map → CountdownBlock-WYz9b9Ex.js.map} +1 -1
  32. package/dist/cdn/chunks/{CountdownToolbar-CbIKGP7u.js → CountdownToolbar-B9fPfFqp.js} +3 -3
  33. package/dist/cdn/chunks/{CountdownToolbar-CbIKGP7u.js.map → CountdownToolbar-B9fPfFqp.js.map} +1 -1
  34. package/dist/cdn/chunks/{ModuleBrowserModal-BjmdleNq.js → ModuleBrowserModal-DfnJQBkM.js} +8 -8
  35. package/dist/cdn/chunks/{ModuleBrowserModal-BjmdleNq.js.map → ModuleBrowserModal-DfnJQBkM.js.map} +1 -1
  36. package/dist/cdn/chunks/{ModulePreviewCanvas-DsmACAdb.js → ModulePreviewCanvas-DE4_oHA_.js} +20 -20
  37. package/dist/cdn/chunks/{ModulePreviewCanvas-DsmACAdb.js.map → ModulePreviewCanvas-DE4_oHA_.js.map} +1 -1
  38. package/dist/cdn/chunks/{NumberWithSuffix-EEDNj1my.js → NumberWithSuffix-BST0yRor.js} +2 -2
  39. package/dist/cdn/chunks/{NumberWithSuffix-EEDNj1my.js.map → NumberWithSuffix-BST0yRor.js.map} +1 -1
  40. package/dist/cdn/chunks/{ParagraphEditor-D6Dw5RtX.js → ParagraphEditor-CQfijF3i.js} +36 -36
  41. package/dist/cdn/chunks/{ParagraphEditor-D6Dw5RtX.js.map → ParagraphEditor-CQfijF3i.js.map} +1 -1
  42. package/dist/cdn/chunks/{RichTextEditorContent-C2yj_yPM.js → RichTextEditorContent-CBds8dnm.js} +5 -5
  43. package/dist/cdn/chunks/{RichTextEditorContent-C2yj_yPM.js.map → RichTextEditorContent-CBds8dnm.js.map} +1 -1
  44. package/dist/cdn/chunks/{SaveModuleDialog-DCcvwYat.js → SaveModuleDialog-DXhuZgZ4.js} +13 -13
  45. package/dist/cdn/chunks/{SaveModuleDialog-DCcvwYat.js.map → SaveModuleDialog-DXhuZgZ4.js.map} +1 -1
  46. package/dist/cdn/chunks/{TitleEditor-isN_t0MJ.js → TitleEditor-BdQvH7eK.js} +7 -7
  47. package/dist/cdn/chunks/{TitleEditor-isN_t0MJ.js.map → TitleEditor-BdQvH7eK.js.map} +1 -1
  48. package/dist/cdn/chunks/{blockTypeIcons-Bgn69Q1-.js → blockTypeIcons-D3CGFW5P.js} +8 -8
  49. package/dist/cdn/chunks/{blockTypeIcons-Bgn69Q1-.js.map → blockTypeIcons-D3CGFW5P.js.map} +1 -1
  50. package/dist/cdn/chunks/{extensions-BPsjY5N8.js → extensions-BE81zpqP.js} +50 -48
  51. package/dist/cdn/chunks/{extensions-BPsjY5N8.js.map → extensions-BE81zpqP.js.map} +1 -1
  52. package/dist/cdn/chunks/{features-BouLRfOO.js → features-CXF_YKlL.js} +1258 -1113
  53. package/dist/cdn/chunks/features-CXF_YKlL.js.map +1 -0
  54. package/dist/cdn/chunks/{icons-BBuZkqC3.js → icons-KbmhF7rg.js} +2 -2
  55. package/dist/cdn/chunks/{icons-BBuZkqC3.js.map → icons-KbmhF7rg.js.map} +1 -1
  56. package/dist/cdn/chunks/{media-library-C-DcHE6w.js → media-library-BERe10wA.js} +103 -103
  57. package/dist/cdn/chunks/{media-library-C-DcHE6w.js.map → media-library-BERe10wA.js.map} +1 -1
  58. package/dist/cdn/chunks/{quality-ConWSEB6.js → quality-CmkY1kMU.js} +309 -309
  59. package/dist/cdn/chunks/{quality-ConWSEB6.js.map → quality-CmkY1kMU.js.map} +1 -1
  60. package/dist/cdn/chunks/{renderer-F8cxEe3t.js → renderer-OttGEYkY.js} +50 -50
  61. package/dist/cdn/chunks/{renderer-F8cxEe3t.js.map → renderer-OttGEYkY.js.map} +1 -1
  62. package/dist/cdn/chunks/{src-C9rMok-R.js → src-C21GI0p6.js} +6 -6
  63. package/dist/cdn/chunks/{src-C9rMok-R.js.map → src-C21GI0p6.js.map} +1 -1
  64. package/dist/cdn/chunks/styles-Cy-My9zK.js +2976 -0
  65. package/dist/cdn/chunks/styles-Cy-My9zK.js.map +1 -0
  66. package/dist/cdn/editor.css +1 -1
  67. package/dist/cdn/editor.js +109 -106
  68. package/dist/cdn/editor.js.map +1 -1
  69. package/dist/{dist-DDJIWTRY.js → dist-B2jcQhv8.js} +1 -1
  70. package/dist/{dist-wzMIGj-D.js → dist-BYt3jdCR.js} +1 -1
  71. package/dist/{dist-aRzjfSRN.js → dist-CISFttkF.js} +1 -1
  72. package/dist/{dist-D6uC2xhi.js → dist-CfQPBf15.js} +1 -1
  73. package/dist/{dist-DjviJBCi.js → dist-DD-9hatO.js} +1 -1
  74. package/dist/{dist-KoBJjK1G.js → dist-DUvhjQ2-.js} +1 -1
  75. package/dist/{dist-BaQIYPsn.js → dist-DVwOAodp.js} +1 -1
  76. package/dist/{dist-Cp0zXPAD.js → dist-DxD1kSdH.js} +1 -1
  77. package/dist/{dist-Pk4MhWMP.js → dist-U5guDm2w.js} +1 -1
  78. package/dist/{dist-D90y8dvT.js → dist-hfu7I2rO.js} +3 -3
  79. package/dist/{dist-us-RpCWN.js → dist-v8h02hhE.js} +1 -1
  80. package/dist/{extensions-D-J02CiP.js → extensions-p6UBqXfg.js} +30 -28
  81. package/dist/index.d.ts +8 -8
  82. package/dist/style.css +1 -1
  83. package/dist/{styles-j_3bu0Bo.js → styles-BP15QmP3.js} +1058 -1052
  84. package/dist/templatical-editor.js +108 -105
  85. package/dist/useAliveFlag-D8GoB4VE.js +10 -0
  86. package/dist/{useEditorCore-B1XrI6fY.js → useEditorCore-_rbu6iMu.js} +921 -778
  87. package/package.json +7 -7
  88. package/dist/cdn/chunks/CloudEditor-BKEXPt3g.js.map +0 -1
  89. package/dist/cdn/chunks/features-BouLRfOO.js.map +0 -1
  90. package/dist/cdn/chunks/styles-BRN0i_zg.js +0 -2971
  91. package/dist/cdn/chunks/styles-BRN0i_zg.js.map +0 -1
  92. /package/dist/{AccessibilityPanel-D-PqmHdH.js → AccessibilityPanel-BeUibrUb.js} +0 -0
  93. /package/dist/{BlockA11yBadge-BFIw0h1m.js → BlockA11yBadge-BhyoMZJ9.js} +0 -0
  94. /package/dist/{CountdownBlock-Cq8A8WrM.js → CountdownBlock-ByJ0_8Pk.js} +0 -0
  95. /package/dist/{TemplateScoringPanel-V79yrEPC.js → TemplateScoringPanel-kYOGtac3.js} +0 -0
  96. /package/dist/{cloud-CTmfCSqf.js → cloud-k0DgeCo2.js} +0 -0
  97. /package/dist/{de-BhIWu_bO.js → de-C9hp3n_a.js} +0 -0
  98. /package/dist/{de-Di4MEjjx.js → de-GOtR9DwW.js} +0 -0
  99. /package/dist/{dist-iLBdeBDR.js → dist-CQQS9SRN.js} +0 -0
  100. /package/dist/{emojiData-DX3E0XT-.js → emojiData-DrBuvEoP.js} +0 -0
  101. /package/dist/{en-D7HRbYah.js → en-Dv776AqL.js} +0 -0
  102. /package/dist/{en-BSuzi-Pd.js → en-dFFQVzNn.js} +0 -0
  103. /package/dist/{formatRelativeTime-BOEf47hq.js → formatRelativeTime-bvx5sFh5.js} +0 -0
  104. /package/dist/{liquid.browser-CdMv1BTn.js → liquid.browser-DX8ZHRdq.js} +0 -0
  105. /package/dist/{pt-BR-K32lt6YP.js → pt-BR-6n58Fl_q.js} +0 -0
  106. /package/dist/{pt-BR-CCVBRais.js → pt-BR-iOr79aDg.js} +0 -0
  107. /package/dist/{readableTextColor-CY3SiRnt.js → readableTextColor-CXzrEnNb.js} +0 -0
  108. /package/dist/{styleConstants-fWzlIIwN.js → styleConstants-DkfOPzGu.js} +0 -0
  109. /package/dist/{usePopoverRoot-BxJrqnMD.js → usePopoverRoot-BwzFSPLy.js} +0 -0
@@ -1,2971 +0,0 @@
1
- import { F as e, H as t, L as n, M as r, O as i, P as a, T as o, V as s, Y as c, Z as l, b as u, c as d, ct as f, f as p, g as m, h, it as g, l as _, m as v, n as y, o as b, ot as x, p as S, s as C, st as w, t as T, u as E, v as D, x as O, y as k, z as A } from "./draggable-P6QWzy4g.js";
2
- import { $ as j, Bt as ee, Cn as M, Ct as te, Et as N, F as P, Ft as ne, G as re, Gt as F, H as ie, I, Jt as L, K as ae, Kt as oe, L as se, Lt as ce, M as le, N as ue, Nt as de, Ot as fe, P as pe, Pt as R, Q as me, R as he, St as ge, U as _e, V as ve, Vt as ye, W as be, Wt as xe, Xt as z, Yt as Se, _n as Ce, bn as we, bt as Te, dn as Ee, hn as De, it as Oe, j as ke, jt as Ae, lt as je, mn as Me, nt as B, pn as Ne, pt as Pe, q as Fe, qt as Ie, rt as Le, st as Re, tn as ze, un as Be, vt as Ve, wt as He, xn as V, xt as Ue, yn as We, yt as Ge, z as Ke, zt as qe } from "./features-BouLRfOO.js";
3
- import { E as H, F as U, G as Je, I as Ye, L as Xe, N as Ze, P as Qe, Q as $e, V as et, Y as tt, c as nt, d as rt, g as it, h as at, j as ot, k as st, l as ct, o as lt, s as ut, v as dt, x as ft, y as pt } from "./icons-BBuZkqC3.js";
4
- import { t as mt } from "./readableTextColor-DhoK4XiZ.js";
5
- import { t as ht } from "./CountdownBlock-LAlYJYWL.js";
6
- import { t as gt } from "./blockTypeIcons-Bgn69Q1-.js";
7
- import { _ as _t, c as vt, f as W, g as yt, h as G, l as bt, m as K, p as q, t as xt } from "./styleConstants-DP1VOca8.js";
8
- import { i as J, n as Y, r as X, t as St } from "./NumberWithSuffix-EEDNj1my.js";
9
- //#region src/utils/resolveAccessibilityOptions.ts
10
- function Ct(e) {
11
- return {
12
- ...e.accessibility,
13
- locale: e.locale
14
- };
15
- }
16
- //#endregion
17
- //#region src/components/Canvas.vue?vue&type=script&setup=true&lang.ts
18
- var wt = ["aria-label"], Tt = {
19
- key: 0,
20
- class: "tpl-canvas-empty-content tpl:flex tpl:flex-col tpl:items-center"
21
- }, Et = { class: "tpl-canvas-empty-icon tpl:mb-4 tpl:text-[var(--tpl-primary)]" }, Dt = { class: "tpl-canvas-empty-title tpl:m-0 tpl:mb-2 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-primary)]" }, Ot = { class: "tpl-canvas-empty-text tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-dim)]" }, kt = {
22
- key: 0,
23
- class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
24
- }, At = {
25
- key: 1,
26
- class: "tpl:m-0 tpl:mt-4 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
27
- }, jt = { class: "tpl:relative" }, Mt = {
28
- class: "tpl:inline-flex tpl:size-3 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[8px] tpl:font-bold",
29
- style: { "background-color": "color-mix(\n in srgb,\n var(--tpl-bg) 30%,\n transparent\n )" }
30
- }, Nt = /* @__PURE__ */ B(/* @__PURE__ */ O({
31
- __name: "Canvas",
32
- props: {
33
- viewport: {},
34
- content: {},
35
- selectedBlockId: {},
36
- darkMode: { type: Boolean },
37
- previewMode: { type: Boolean },
38
- lockedBlocks: {}
39
- },
40
- emits: [
41
- "select-block",
42
- "open-ai-chat",
43
- "open-design-reference"
44
- ],
45
- setup(e, { emit: i }) {
46
- let c = {
47
- section: se,
48
- title: he,
49
- paragraph: ie,
50
- image: be,
51
- button: Ae,
52
- divider: ae,
53
- spacer: ue,
54
- html: re,
55
- social: pe,
56
- menu: _e,
57
- table: le,
58
- video: ke,
59
- countdown: ht,
60
- custom: Fe
61
- }, u = e, d = i, { t: _ } = R(), { t: y } = j(), b = ze(Ie, "Canvas"), O = o(xe, null), A = o(ee, null), M = o(ye, {}), te = p(() => (M.plan?.hasFeature("ai_generation") ?? !1) && (M.ai?.isFeatureEnabled("chat") ?? !1)), N = p(() => (M.plan?.hasFeature("ai_generation") ?? !1) && (M.ai?.isFeatureEnabled("designToTemplate") ?? !1)), P = p({
62
- get: () => u.content.blocks,
63
- set: (e) => {
64
- b.setContent({
65
- ...u.content,
66
- blocks: e
67
- });
68
- }
69
- }), ne = p(() => {
70
- switch (u.viewport) {
71
- case "mobile": return 375;
72
- case "tablet": return 768;
73
- default: return u.content.settings.width;
74
- }
75
- }), F = p(() => ({ fontFamily: u.content.settings.fontFamily })), I = p(() => P.value.length === 0 && !u.previewMode), L = l(0), oe = p(() => I.value && L.value > 0);
76
- function ce() {
77
- I.value && (L.value += 1);
78
- }
79
- function de() {
80
- I.value && (L.value = Math.max(0, L.value - 1));
81
- }
82
- function fe() {
83
- L.value = 0;
84
- }
85
- function me(e) {
86
- u.previewMode || e.target === e.currentTarget && d("select-block", null);
87
- }
88
- function ge(e) {
89
- return ve(e, A, c);
90
- }
91
- function z(e) {
92
- return u.lockedBlocks?.get(e) ?? null;
93
- }
94
- function Se(e, t) {
95
- e.type === "custom" && b.updateBlock(e.id, {
96
- fieldValues: t.fieldValues,
97
- dataSourceFetched: t.dataSourceFetched
98
- });
99
- }
100
- return (i, o) => (r(), m("div", {
101
- "data-testid": "canvas-wrapper",
102
- role: "region",
103
- "aria-label": g(_).landmarks.canvas,
104
- class: "tpl-canvas-wrapper tpl:relative tpl:rounded-lg",
105
- style: w({
106
- width: `${ne.value}px`,
107
- boxShadow: e.darkMode ? "none" : "var(--tpl-shadow-xl)",
108
- transition: "width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
109
- })
110
- }, [S("div", {
111
- class: "tpl-canvas-bg tpl:absolute tpl:inset-0 tpl:rounded-lg tpl:pointer-events-none",
112
- style: w({
113
- backgroundColor: e.content.settings.backgroundColor,
114
- ...e.darkMode ? { filter: "invert(1) hue-rotate(180deg)" } : {},
115
- transition: "filter 300ms ease"
116
- })
117
- }, null, 4), S("div", {
118
- class: x(["tpl-canvas tpl:relative tpl:rounded-lg", {
119
- "tpl-canvas--dark-mode": e.darkMode,
120
- "tpl-preview-mode": e.previewMode
121
- }]),
122
- style: w(F.value),
123
- onClick: me
124
- }, [k(g(T), {
125
- modelValue: P.value,
126
- "onUpdate:modelValue": o[2] ||= (e) => P.value = e,
127
- group: "blocks",
128
- animation: 150,
129
- "ghost-class": "tpl-ghost",
130
- "drag-class": "tpl-dragging",
131
- handle: ".tpl-block-btn",
132
- "invert-swap": !0,
133
- "inverted-swap-threshold": .65,
134
- disabled: e.previewMode,
135
- draggable: ".tpl-block-item",
136
- "force-fallback": !0,
137
- class: x([
138
- "tpl-canvas-blocks",
139
- I.value ? "tpl-canvas-empty tpl:m-6 tpl:flex tpl:min-h-[400px] tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-xl tpl:border-2 tpl:border-dashed tpl:px-10 tpl:py-12 tpl:text-center tpl:bg-[var(--tpl-bg-elevated)] tpl:font-[var(--tpl-font-family)] tpl:transition-colors tpl:duration-150" : "",
140
- I.value && oe.value ? "tpl-canvas-empty--drag-over tpl:border-[var(--tpl-primary-hover)] tpl:bg-[var(--tpl-primary-light)]" : "",
141
- I.value && !oe.value ? "tpl:border-[var(--tpl-primary)]" : ""
142
- ]),
143
- onDragenter: ce,
144
- onDragleave: de,
145
- onDrop: fe
146
- }, {
147
- default: s(() => [I.value ? (r(), m("div", Tt, [
148
- S("div", Et, [k(g(it), {
149
- size: 48,
150
- "stroke-width": 1
151
- })]),
152
- S("p", Dt, f(g(_).canvas.noBlocks), 1),
153
- S("p", Ot, f(g(_).canvas.dragHint), 1),
154
- te.value && g(y) ? (r(), m("p", kt, [
155
- D(f(g(_).canvas.aiHintChat) + " ", 1),
156
- S("button", {
157
- class: "tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]",
158
- onClick: o[0] ||= (e) => d("open-ai-chat")
159
- }, [k(g(je), {
160
- size: 14,
161
- "stroke-width": 2
162
- }), D(" " + f(g(y).aiMenu.aiAssistant), 1)]),
163
- D(" " + f(g(_).canvas.aiHintChatSuffix), 1)
164
- ])) : h("", !0),
165
- N.value && g(y) ? (r(), m("p", At, [
166
- D(f(g(_).canvas.aiHintDesign) + " ", 1),
167
- S("button", {
168
- class: "tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]",
169
- onClick: o[1] ||= (e) => d("open-design-reference")
170
- }, [k(g(Te), {
171
- size: 14,
172
- "stroke-width": 2
173
- }), D(" " + f(g(y).aiMenu.designToTemplate), 1)]),
174
- D(" " + f(g(_).canvas.aiHintDesignSuffix), 1)
175
- ])) : h("", !0)
176
- ])) : h("", !0), (r(!0), m(E, null, a(P.value, (i) => t((r(), m("div", {
177
- key: i.id,
178
- class: "tpl-block-item"
179
- }, [S("div", jt, [z(i.id) ? (r(), m("div", {
180
- key: 0,
181
- class: "tpl-collab-lock tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-[4] tpl:rounded-sm",
182
- style: w({
183
- outline: `2px solid ${z(i.id).color}`,
184
- outlineOffset: "-1px"
185
- })
186
- }, [S("span", {
187
- class: "tpl:absolute tpl:-top-0.5 tpl:left-1/2 tpl:z-[5] tpl:flex tpl:-translate-x-1/2 tpl:-translate-y-full tpl:items-center tpl:gap-1 tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:whitespace-nowrap",
188
- style: w({
189
- backgroundColor: z(i.id).color,
190
- color: g(mt)(z(i.id).color)
191
- })
192
- }, [S("span", Mt, f(z(i.id).name.charAt(0)), 1), D(" " + f(z(i.id).name), 1)], 4)], 4)) : h("", !0), k(Ke, {
193
- block: i,
194
- "is-selected": !e.previewMode && e.selectedBlockId === i.id && !z(i.id),
195
- viewport: e.viewport,
196
- "preview-mode": e.previewMode,
197
- onSelect: (t) => e.previewMode || z(i.id) ? void 0 : d("select-block", i.id)
198
- }, {
199
- default: s(() => [(r(), v(n(ge(i)), {
200
- block: i,
201
- viewport: e.viewport,
202
- onFetchData: (e) => Se(i, e),
203
- onUpdate: (e) => g(b).updateBlock(i.id, e)
204
- }, null, 40, [
205
- "block",
206
- "viewport",
207
- "onFetchData",
208
- "onUpdate"
209
- ]))]),
210
- _: 2
211
- }, 1032, [
212
- "block",
213
- "is-selected",
214
- "viewport",
215
- "preview-mode",
216
- "onSelect"
217
- ])])])), [[C, !g(O)?.isHidden(i.id)]])), 128))]),
218
- _: 1
219
- }, 8, [
220
- "modelValue",
221
- "disabled",
222
- "class"
223
- ])], 6)], 12, wt));
224
- }
225
- }), [["__scopeId", "data-v-a4d3fa2d"]]), Pt = ["aria-label"], Ft = {
226
- key: 0,
227
- class: "tpl:border-b tpl:px-1 tpl:pb-1 tpl:border-[var(--tpl-border)]"
228
- }, It = ["aria-label"], Lt = {
229
- key: 0,
230
- class: "tpl:flex-1 tpl:truncate tpl:text-sm tpl:font-medium"
231
- }, Rt = {
232
- key: 1,
233
- class: "tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]"
234
- }, zt = [
235
- "data-palette-type",
236
- "aria-label",
237
- "onClick",
238
- "onKeydown"
239
- ], Bt = { class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:transition-transform tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:scale-105" }, Vt = {
240
- key: 0,
241
- class: "tpl:truncate tpl:text-sm tpl:font-medium"
242
- }, Ht = /* @__PURE__ */ O({
243
- __name: "Sidebar",
244
- setup(e) {
245
- let { t, format: i } = R(), { t: c } = j(), u = o(F, []), d = o(qe, void 0), _ = o(Ie, null), y = o(ye, {}), b = p(() => (y.savedModules?.moduleCount.value ?? 0) > 0), x = l(!1), C = l(!1);
246
- function D() {
247
- C.value || (x.value = !1);
248
- }
249
- function O() {
250
- C.value = !0;
251
- }
252
- function A() {
253
- C.value = !1;
254
- }
255
- let ee = [
256
- "section",
257
- "image",
258
- "title",
259
- "paragraph",
260
- "button",
261
- "divider",
262
- "video",
263
- "social",
264
- "menu",
265
- "table",
266
- "spacer",
267
- "html"
268
- ], M = p(() => {
269
- let e = ee.map((e) => ({
270
- type: e,
271
- label: de(e, t)
272
- }));
273
- return y.plan && e.splice(-1, 0, {
274
- type: "countdown",
275
- label: de("countdown", t)
276
- }), e;
277
- }), te = p(() => u.map((e) => ({
278
- type: `custom:${e.type}`,
279
- label: e.name,
280
- isCustom: !0,
281
- icon: e.icon
282
- }))), N = p(() => [...M.value, ...te.value]);
283
- function P(e) {
284
- if (e.isCustom) {
285
- let t = e.type.replace("custom:", ""), n = u.find((e) => e.type === t);
286
- if (n) return we(n);
287
- }
288
- return We(e.type, d);
289
- }
290
- function ne(e) {
291
- if (!_) return;
292
- let t = P(e);
293
- _.addBlock(t), _.selectBlock(t.id);
294
- }
295
- function re(e, t) {
296
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ne(t));
297
- }
298
- return (e, o) => (r(), m("aside", {
299
- "aria-label": g(t).sidebarNav.palette,
300
- class: "tpl-sidebar-rail tpl:absolute tpl:top-14 tpl:bottom-0 tpl:left-0 tpl:z-40 tpl:overflow-hidden",
301
- style: w({
302
- width: x.value ? "200px" : "48px",
303
- backgroundColor: "var(--tpl-bg-elevated)",
304
- borderRight: "1px solid var(--tpl-border)",
305
- boxShadow: x.value ? "var(--tpl-shadow-lg)" : "none",
306
- transition: "width 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1)"
307
- }),
308
- onMouseenter: o[1] ||= (e) => x.value = !0,
309
- onMouseleave: D,
310
- onFocusin: o[2] ||= (e) => x.value = !0,
311
- onFocusout: o[3] ||= (e) => x.value = !1
312
- }, [b.value && g(c) ? (r(), m("div", Ft, [S("button", {
313
- type: "button",
314
- "aria-label": g(t).sidebarNav.browseModules,
315
- class: "tpl:flex tpl:h-10 tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-3 tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)]",
316
- style: w({ justifyContent: x.value ? "flex-start" : "center" }),
317
- onClick: o[0] ||= (e) => g(y).savedModules?.openBrowser()
318
- }, [
319
- k(g(ot), {
320
- size: 20,
321
- "stroke-width": 1.5,
322
- class: "tpl:shrink-0"
323
- }),
324
- x.value ? (r(), m("span", Lt, f(g(c).modules.title), 1)) : h("", !0),
325
- x.value ? (r(), m("span", Rt, f(g(y).savedModules?.moduleCount.value ?? 0), 1)) : h("", !0)
326
- ], 12, It)])) : h("", !0), k(g(T), {
327
- "model-value": N.value,
328
- group: {
329
- name: "blocks",
330
- pull: "clone",
331
- put: !1
332
- },
333
- clone: P,
334
- sort: !1,
335
- animation: 150,
336
- "ghost-class": "tpl-ghost",
337
- "force-fallback": !0,
338
- class: "tpl:flex tpl:flex-col tpl:gap-0.5 tpl:p-1",
339
- onChoose: O,
340
- onEnd: A
341
- }, {
342
- default: s(() => [(r(!0), m(E, null, a(N.value, (e) => (r(), m("button", {
343
- key: e.type,
344
- type: "button",
345
- "data-palette-type": e.type,
346
- "aria-label": g(i)(g(t).sidebarNav.insertBlock, { block: e.label }),
347
- class: "tpl:flex tpl:h-10 tpl:w-full tpl:cursor-grab tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-3 tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)] active:tpl:cursor-grabbing",
348
- style: w({ justifyContent: x.value ? "flex-start" : "center" }),
349
- onClick: (t) => ne(e),
350
- onKeydown: (t) => re(t, e)
351
- }, [S("div", Bt, [g(gt)[e.type] ? (r(), v(n(g(gt)[e.type]), {
352
- key: 0,
353
- size: 20,
354
- "stroke-width": 1.5
355
- })) : e.isCustom ? (r(), v(Le, {
356
- key: 1,
357
- icon: e.icon,
358
- size: 20
359
- }, null, 8, ["icon"])) : h("", !0)]), x.value ? (r(), m("span", Vt, f(e.label), 1)) : h("", !0)], 44, zt))), 128))]),
360
- _: 1
361
- }, 8, ["model-value"])], 44, Pt));
362
- }
363
- });
364
- //#endregion
365
- //#region src/composables/useMergeTagField.ts
366
- function Ut(e) {
367
- let { modelValue: t, emit: n, elementRef: r } = e, { canRequestMergeTag: a, isRequesting: o, isMergeTagValue: s, getMergeTagLabel: c, requestMergeTag: u, syntax: d } = me(), f = l(!1), m = !1, h = p(() => {
368
- let e = t();
369
- if (!e) return [];
370
- let n = [], r = `(${d.value.source}|${d.logic.source})`, i = new RegExp(r, "g"), a = 0, o;
371
- for (; (o = i.exec(e)) !== null;) {
372
- o.index > a && n.push({
373
- type: "text",
374
- value: e.slice(a, o.index)
375
- });
376
- let t = o[0];
377
- s(t) ? n.push({
378
- type: "mergeTag",
379
- value: t,
380
- label: c(t)
381
- }) : Ce(t, d) ? n.push({
382
- type: "logicMergeTag",
383
- value: t,
384
- keyword: De(t, d)
385
- }) : n.push({
386
- type: "text",
387
- value: t
388
- }), a = o.index + t.length;
389
- }
390
- return a < e.length && n.push({
391
- type: "text",
392
- value: e.slice(a)
393
- }), n;
394
- }), g = p(() => h.value.some((e) => e.type === "mergeTag" || e.type === "logicMergeTag"));
395
- function _() {
396
- f.value = !0, i(() => {
397
- r.value?.focus();
398
- let e = t()?.length || 0;
399
- r.value?.setSelectionRange(e, e);
400
- });
401
- }
402
- function v() {
403
- m || (f.value = !1);
404
- }
405
- function y(e) {
406
- n(e.target.value);
407
- }
408
- function b() {
409
- n("");
410
- }
411
- async function x() {
412
- let e = f.value && r.value ? r.value.selectionStart ?? t().length : t().length;
413
- m = !0;
414
- let a;
415
- try {
416
- a = await u();
417
- } finally {
418
- m = !1;
419
- }
420
- if (a) {
421
- let o = t().slice(0, e), s = t().slice(e);
422
- n(o + a.value + s), f.value = !0, i(() => {
423
- let t = e + a.value.length;
424
- r.value?.focus(), r.value?.setSelectionRange(t, t);
425
- });
426
- }
427
- }
428
- return {
429
- segments: h,
430
- hasMergeTags: g,
431
- canRequestMergeTag: a,
432
- isRequestingMergeTag: o,
433
- isEditing: f,
434
- startEditing: _,
435
- stopEditing: v,
436
- handleInput: y,
437
- clearValue: b,
438
- insertMergeTag: x
439
- };
440
- }
441
- //#endregion
442
- //#region src/components/MergeTagSegments.vue?vue&type=script&setup=true&lang.ts
443
- var Wt = ["aria-label", "onKeydown"], Gt = ["data-tooltip"], Kt = ["data-tooltip"], qt = {
444
- key: 2,
445
- class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
446
- }, Jt = ["aria-label", "title"], Yt = /* @__PURE__ */ O({
447
- __name: "MergeTagSegments",
448
- props: {
449
- segments: {},
450
- displayClass: {},
451
- pulse: { type: Boolean }
452
- },
453
- emits: ["edit", "clear"],
454
- setup(e, { emit: t }) {
455
- let n = t, { t: i } = R();
456
- function o() {
457
- n("edit");
458
- }
459
- return (t, s) => (r(), m("div", {
460
- role: "button",
461
- tabindex: "0",
462
- "aria-label": g(i).mergeTag.clickToEdit,
463
- class: x([e.displayClass, { "tpl-pulse-fill": e.pulse }]),
464
- onClick: o,
465
- onKeydown: [d(o, ["enter"]), d(_(o, ["prevent"]), ["space"])]
466
- }, [(r(!0), m(E, null, a(e.segments, (e, t) => (r(), m(E, { key: `${e.type}-${t}-${e.value}` }, [e.type === "mergeTag" ? (r(), m("span", {
467
- key: 0,
468
- class: "tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium",
469
- "data-tooltip": e.value,
470
- style: {
471
- "background-color": "color-mix(\n in srgb,\n var(--tpl-primary) 20%,\n transparent\n )",
472
- color: "var(--tpl-primary)"
473
- }
474
- }, f(e.label), 9, Gt)) : e.type === "logicMergeTag" ? (r(), m("span", {
475
- key: 1,
476
- class: "tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase",
477
- "data-tooltip": e.value,
478
- style: {
479
- "background-color": "transparent",
480
- border: "1.5px solid\n color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
481
- color: "var(--tpl-primary)"
482
- }
483
- }, f(e.keyword), 9, Kt)) : (r(), m("span", qt, f(e.value), 1))], 64))), 128)), S("button", {
484
- type: "button",
485
- class: "tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all hover:tpl:text-[var(--tpl-danger)] hover:tpl:opacity-100",
486
- "aria-label": g(i).mergeTag.remove,
487
- title: g(i).mergeTag.remove,
488
- onClick: s[0] ||= _((e) => n("clear"), ["stop"])
489
- }, [k(g(Oe), {
490
- size: 12,
491
- "stroke-width": 2.5
492
- })], 8, Jt)], 42, Wt));
493
- }
494
- }), Xt = [
495
- "aria-label",
496
- "title",
497
- "disabled"
498
- ], Zt = "tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)] hover:tpl:border-[var(--tpl-primary)]", Qt = /* @__PURE__ */ O({
499
- __name: "MergeTagInsertButton",
500
- props: { disabled: { type: Boolean } },
501
- emits: ["insert"],
502
- setup(e) {
503
- let { t } = R();
504
- return (n, i) => (r(), m("button", {
505
- type: "button",
506
- class: x([Zt, "tpl:mt-1.5"]),
507
- "aria-label": g(t).mergeTag.insert,
508
- title: g(t).mergeTag.insert,
509
- disabled: e.disabled,
510
- onClick: i[0] ||= (e) => n.$emit("insert")
511
- }, [k(g(ft), {
512
- size: 12,
513
- "stroke-width": 2
514
- }), D(" " + f(g(t).mergeTag.insert), 1)], 10, Xt));
515
- }
516
- }), $t = { key: 0 }, en = { key: 1 }, tn = [
517
- "value",
518
- "placeholder",
519
- "rows"
520
- ], nn = "tpl:w-full tpl:resize-y tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]", rn = "tpl:flex tpl:w-full tpl:min-h-[5rem] tpl:cursor-pointer tpl:items-start tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", an = /* @__PURE__ */ O({
521
- __name: "MergeTagTextarea",
522
- props: {
523
- modelValue: {},
524
- placeholder: { default: "" },
525
- rows: { default: 3 }
526
- },
527
- emits: ["update:modelValue"],
528
- setup(e, { emit: t }) {
529
- let n = e, i = t, a = l(null), { segments: o, hasMergeTags: s, canRequestMergeTag: c, isRequestingMergeTag: u, isEditing: f, startEditing: p, stopEditing: _, handleInput: y, clearValue: b, insertMergeTag: C } = Ut({
530
- modelValue: () => n.modelValue,
531
- emit: (e) => i("update:modelValue", e),
532
- elementRef: a
533
- });
534
- return (t, n) => g(s) && !g(f) ? (r(), m("div", $t, [k(Yt, {
535
- segments: g(o),
536
- "display-class": rn,
537
- onEdit: g(p),
538
- onClear: g(b)
539
- }, null, 8, [
540
- "segments",
541
- "onEdit",
542
- "onClear"
543
- ]), g(c) ? (r(), v(Qt, {
544
- key: 0,
545
- disabled: g(u),
546
- onInsert: g(C)
547
- }, null, 8, ["disabled", "onInsert"])) : h("", !0)])) : (r(), m("div", en, [S("textarea", {
548
- ref_key: "textareaRef",
549
- ref: a,
550
- class: x(nn),
551
- value: e.modelValue,
552
- placeholder: e.placeholder,
553
- rows: e.rows,
554
- onInput: n[0] ||= (...e) => g(y) && g(y)(...e),
555
- onBlur: n[1] ||= (...e) => g(_) && g(_)(...e),
556
- onKeydown: n[2] ||= d((...e) => g(_) && g(_)(...e), ["escape"])
557
- }, null, 40, tn), g(c) ? (r(), v(Qt, {
558
- key: 0,
559
- disabled: g(u),
560
- onInsert: g(C)
561
- }, null, 8, ["disabled", "onInsert"])) : h("", !0)]));
562
- }
563
- }), on = { class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]" }, sn = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4" }, cn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, ln = { class: "tpl:mb-3.5" }, un = { class: "tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]" }, dn = ["onClick"], fn = { class: "tpl:flex tpl:items-stretch" }, pn = ["value"], mn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, hn = { class: "tpl:mb-3.5" }, gn = ["value"], _n = ["value"], vn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, yn = ["value"], bn = { class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, xn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Sn = { class: "tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Cn = { class: "tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, wn = { class: "tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]" }, Tn = { class: "tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3" }, En = { class: "tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]" }, Dn = { class: "tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, On = { class: "tpl:mb-1 tpl:last:mb-0" }, kn = { class: "tpl:mb-1 tpl:last:mb-0" }, An = { class: "tpl:mb-1 tpl:last:mb-0" }, jn = 150, Mn = /* @__PURE__ */ O({
564
- __name: "TemplateSettings",
565
- props: { settings: {} },
566
- emits: ["update"],
567
- setup(e, { emit: t }) {
568
- let n = e, i = t, { t: o } = R(), s = ze(L, "TemplateSettings"), c = p(() => s.fonts.value), l = p(() => c.value.some((e) => e.value === n.settings.fontFamily) ? n.settings.fontFamily : s.defaultFont.value), u = [
569
- {
570
- value: 480,
571
- label: "480px"
572
- },
573
- {
574
- value: 600,
575
- label: "600px"
576
- },
577
- {
578
- value: 700,
579
- label: "700px"
580
- },
581
- {
582
- value: 800,
583
- label: "800px"
584
- }
585
- ];
586
- return (t, n) => (r(), m("aside", on, [S("div", sn, [
587
- S("div", { class: x(g(bt)) }, [
588
- S("div", cn, [k(g(at), {
589
- class: "tpl:text-[var(--tpl-text-muted)]",
590
- size: 14,
591
- "stroke-width": 2
592
- }), S("span", null, f(g(o).templateSettings.layout), 1)]),
593
- S("div", ln, [S("label", { class: x(g(G)) }, f(g(o).templateSettings.widthPreset), 3), S("div", un, [(r(), m(E, null, a(u, (t) => S("button", {
594
- key: t.value,
595
- class: "tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
596
- style: w({
597
- backgroundColor: e.settings.width === t.value ? "var(--tpl-bg)" : "transparent",
598
- color: e.settings.width === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
599
- boxShadow: e.settings.width === t.value ? "var(--tpl-shadow)" : "none"
600
- }),
601
- onClick: (e) => i("update", { width: t.value })
602
- }, f(t.label), 13, dn)), 64))])]),
603
- S("div", null, [S("label", { class: x(g(G)) }, f(g(o).templateSettings.customWidth), 3), S("div", fn, [S("input", {
604
- type: "number",
605
- class: x(g(q)),
606
- value: e.settings.width,
607
- min: "300",
608
- max: "900",
609
- onInput: n[0] ||= (e) => i("update", { width: Number(e.target.value) })
610
- }, null, 42, pn), S("span", { class: x(g(K)) }, "px", 2)])])
611
- ], 2),
612
- S("div", { class: x(g(bt)) }, [
613
- S("div", mn, [k(g(tt), {
614
- class: "tpl:text-[var(--tpl-text-muted)]",
615
- size: 14,
616
- "stroke-width": 2
617
- }), S("span", null, f(g(o).templateSettings.appearance), 1)]),
618
- S("div", hn, [S("label", { class: x(g(G)) }, f(g(o).templateSettings.backgroundColor), 3), k(J, {
619
- "model-value": e.settings.backgroundColor,
620
- placeholder: g(xt),
621
- "onUpdate:modelValue": n[1] ||= (e) => i("update", { backgroundColor: e })
622
- }, null, 8, ["model-value", "placeholder"])]),
623
- S("div", null, [S("label", { class: x(g(G)) }, f(g(o).templateSettings.fontFamily), 3), S("select", {
624
- class: x(g(W)),
625
- value: l.value,
626
- onChange: n[2] ||= (e) => i("update", { fontFamily: e.target.value })
627
- }, [(r(!0), m(E, null, a(c.value, (e) => (r(), m("option", {
628
- key: e.value,
629
- value: e.value
630
- }, f(e.label), 9, _n))), 128))], 42, gn)])
631
- ], 2),
632
- S("div", { class: x(g(bt)) }, [S("div", vn, [k(g(Je), {
633
- class: "tpl:text-[var(--tpl-text-muted)]",
634
- size: 14,
635
- "stroke-width": 2
636
- }), S("span", null, f(g(o).templateSettings.language), 1)]), S("div", null, [
637
- S("label", { class: x(g(G)) }, f(g(o).templateSettings.contentLocale), 3),
638
- S("input", {
639
- type: "text",
640
- class: x(g(W)),
641
- value: e.settings.locale ?? "",
642
- placeholder: "en",
643
- spellcheck: "false",
644
- autocapitalize: "off",
645
- autocomplete: "off",
646
- onInput: n[3] ||= (e) => i("update", { locale: e.target.value.trim() || void 0 })
647
- }, null, 42, yn),
648
- S("p", bn, f(g(o).templateSettings.contentLocaleHint), 1)
649
- ])], 2),
650
- S("div", { class: x(g(bt)) }, [S("div", xn, [k(g(Ue), {
651
- class: "tpl:text-[var(--tpl-text-muted)]",
652
- size: 14,
653
- "stroke-width": 2
654
- }), S("span", null, f(g(o).templateSettings.preheaderText), 1)]), S("div", null, [k(an, {
655
- "model-value": e.settings.preheaderText ?? "",
656
- placeholder: g(o).templateSettings.preheaderTextPlaceholder,
657
- rows: 2,
658
- "onUpdate:modelValue": n[4] ||= (e) => i("update", { preheaderText: e.replace(/[\r\n]/g, " ") || void 0 })
659
- }, null, 8, ["model-value", "placeholder"]), S("div", Sn, [S("span", Cn, f(g(o).templateSettings.preheaderTextHint), 1), S("span", wn, f((e.settings.preheaderText ?? "").length) + "/" + f(jn), 1)])])], 2),
660
- S("div", Tn, [S("div", En, [k(g(Ve), {
661
- size: 14,
662
- "stroke-width": 2
663
- }), S("span", null, f(g(o).templateSettings.tips), 1)]), S("ul", Dn, [
664
- S("li", On, f(g(o).templateSettings.tip1), 1),
665
- S("li", kn, f(g(o).templateSettings.tip2), 1),
666
- S("li", An, f(g(o).templateSettings.tip3), 1)
667
- ])])
668
- ])]));
669
- }
670
- }), Nn = { key: 0 }, Pn = { key: 1 }, Fn = [
671
- "type",
672
- "value",
673
- "placeholder"
674
- ], In = "tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", Z = /* @__PURE__ */ B(/* @__PURE__ */ O({
675
- __name: "MergeTagInput",
676
- props: {
677
- modelValue: {},
678
- type: { default: "text" },
679
- placeholder: { default: "" },
680
- pulse: {
681
- type: Boolean,
682
- default: !1
683
- }
684
- },
685
- emits: ["update:modelValue"],
686
- setup(e, { emit: t }) {
687
- let n = e, i = t, a = l(null), { segments: o, hasMergeTags: s, canRequestMergeTag: c, isRequestingMergeTag: u, isEditing: f, startEditing: p, stopEditing: _, handleInput: y, clearValue: b, insertMergeTag: C } = Ut({
688
- modelValue: () => n.modelValue,
689
- emit: (e) => i("update:modelValue", e),
690
- elementRef: a
691
- });
692
- return (t, n) => g(s) && !g(f) ? (r(), m("div", Nn, [k(Yt, {
693
- segments: g(o),
694
- "display-class": In,
695
- pulse: e.pulse,
696
- onEdit: g(p),
697
- onClear: g(b)
698
- }, null, 8, [
699
- "segments",
700
- "pulse",
701
- "onEdit",
702
- "onClear"
703
- ]), g(c) ? (r(), v(Qt, {
704
- key: 0,
705
- disabled: g(u),
706
- onInsert: g(C)
707
- }, null, 8, ["disabled", "onInsert"])) : h("", !0)])) : (r(), m("div", Pn, [S("input", {
708
- ref_key: "inputRef",
709
- ref: a,
710
- type: e.type,
711
- class: x([g(W), { "tpl-pulse-fill": e.pulse }]),
712
- value: e.modelValue,
713
- placeholder: e.placeholder,
714
- onInput: n[0] ||= (...e) => g(y) && g(y)(...e),
715
- onBlur: n[1] ||= (...e) => g(_) && g(_)(...e),
716
- onKeydown: n[2] ||= d((...e) => g(_) && g(_)(...e), ["escape"])
717
- }, null, 42, Fn), g(c) ? (r(), v(Qt, {
718
- key: 0,
719
- disabled: g(u),
720
- onInsert: g(C)
721
- }, null, 8, ["disabled", "onInsert"])) : h("", !0)]));
722
- }
723
- }), [["__scopeId", "data-v-358207dd"]]), Ln = { class: "tpl:mb-3.5" }, Rn = ["value"], zn = { value: "" }, Bn = ["value"], Vn = { class: "tpl:mb-3.5" }, Hn = { class: "tpl:mb-3.5" }, Un = {
724
- key: 0,
725
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
726
- }, Wn = ["checked"], Gn = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Kn = { class: "tpl:mb-3.5" }, qn = { class: "tpl:mb-3.5" }, Jn = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Yn = { class: "tpl:mb-3.5" }, Xn = { class: "tpl:flex tpl:items-stretch" }, Zn = ["value"], Qn = { class: "tpl:mb-3.5" }, $n = { class: "tpl:flex tpl:items-stretch" }, er = ["value"], tr = /* @__PURE__ */ O({
727
- __name: "ButtonToolbar",
728
- props: {
729
- block: {},
730
- fontFamilies: {}
731
- },
732
- emits: ["update"],
733
- setup(e, { emit: t }) {
734
- let n = t, { t: i } = R();
735
- function o(e, t) {
736
- n("update", { [e]: t });
737
- }
738
- return (t, n) => (r(), m(E, null, [
739
- S("div", Ln, [S("label", { class: x(g(G)) }, f(g(i).button.fontFamily), 3), S("select", {
740
- class: x(g(W)),
741
- value: e.block.fontFamily || "",
742
- onChange: n[0] ||= (e) => o("fontFamily", e.target.value || void 0)
743
- }, [S("option", zn, f(g(i).button.inheritFont), 1), (r(!0), m(E, null, a(e.fontFamilies, (e) => (r(), m("option", {
744
- key: e.value,
745
- value: e.value
746
- }, f(e.label), 9, Bn))), 128))], 42, Rn)]),
747
- S("div", Vn, [S("label", { class: x(g(G)) }, f(g(i).button.text), 3), k(Z, {
748
- "model-value": e.block.text,
749
- type: "text",
750
- "onUpdate:modelValue": n[1] ||= (e) => o("text", e)
751
- }, null, 8, ["model-value"])]),
752
- S("div", Hn, [
753
- S("label", { class: x(g(G)) }, f(g(i).button.url), 3),
754
- k(Z, {
755
- "model-value": e.block.url,
756
- type: "url",
757
- placeholder: g(i).button.urlPlaceholder,
758
- "onUpdate:modelValue": n[2] ||= (e) => o("url", e)
759
- }, null, 8, ["model-value", "placeholder"]),
760
- e.block.url ? (r(), m("label", Un, [S("input", {
761
- type: "checkbox",
762
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
763
- checked: e.block.openInNewTab ?? !1,
764
- onChange: n[3] ||= (e) => o("openInNewTab", e.target.checked)
765
- }, null, 40, Wn), D(" " + f(g(i).button.openInNewTab), 1)])) : h("", !0)
766
- ]),
767
- S("div", Gn, [S("div", Kn, [S("label", { class: x(g(G)) }, f(g(i).button.background), 3), k(J, {
768
- "model-value": e.block.backgroundColor,
769
- "onUpdate:modelValue": n[4] ||= (e) => o("backgroundColor", e)
770
- }, null, 8, ["model-value"])]), S("div", qn, [S("label", { class: x(g(G)) }, f(g(i).button.textColor), 3), k(J, {
771
- "model-value": e.block.textColor,
772
- "onUpdate:modelValue": n[5] ||= (e) => o("textColor", e)
773
- }, null, 8, ["model-value"])])]),
774
- S("div", Jn, [S("div", Yn, [S("label", { class: x(g(G)) }, f(g(i).button.borderRadius), 3), S("div", Xn, [S("input", {
775
- type: "number",
776
- class: x(g(q)),
777
- value: e.block.borderRadius,
778
- min: "0",
779
- max: "50",
780
- onInput: n[6] ||= (e) => o("borderRadius", Number(e.target.value))
781
- }, null, 42, Zn), S("span", { class: x(g(K)) }, "px", 2)])]), S("div", Qn, [S("label", { class: x(g(G)) }, f(g(i).button.fontSize), 3), S("div", $n, [S("input", {
782
- type: "number",
783
- class: x(g(q)),
784
- value: e.block.fontSize,
785
- min: "10",
786
- max: "36",
787
- onInput: n[7] ||= (e) => o("fontSize", Number(e.target.value))
788
- }, null, 42, er), S("span", { class: x(g(K)) }, "px", 2)])])])
789
- ], 64));
790
- }
791
- }), nr = { class: "spacing-control" }, rr = { class: "tpl:mb-2 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, ir = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-1.5" }, ar = { class: "tpl:flex tpl:items-center" }, or = ["aria-label"], sr = ["value", "aria-label"], cr = ["aria-label"], lr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ur = { class: "tpl:flex tpl:items-center" }, dr = ["aria-label"], fr = ["value", "aria-label"], pr = ["aria-label"], mr = ["aria-label", "title"], hr = { class: "tpl:flex tpl:items-center" }, gr = ["aria-label"], _r = ["value", "aria-label"], vr = ["aria-label"], yr = { class: "tpl:flex tpl:items-center" }, br = ["aria-label"], xr = ["value", "aria-label"], Sr = ["aria-label"], Q = "tpl:flex tpl:items-center tpl:justify-center tpl:w-8 tpl:h-8 tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg)] tpl:border tpl:border-[var(--tpl-border)] tpl:cursor-pointer tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)] active:tpl:bg-[var(--tpl-bg-active)]", Cr = "tpl:w-10 tpl:h-8 tpl:text-center tpl:text-xs tpl:font-medium tpl:border-y tpl:border-x-0 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", wr = /* @__PURE__ */ B(/* @__PURE__ */ O({
792
- __name: "SpacingControl",
793
- props: {
794
- modelValue: {},
795
- label: {}
796
- },
797
- emits: ["update:modelValue"],
798
- setup(e, { emit: t }) {
799
- let n = e, i = t, { t: a } = R(), o = p(() => n.modelValue.top === n.modelValue.right && n.modelValue.right === n.modelValue.bottom && n.modelValue.bottom === n.modelValue.left), s = l(o.value);
800
- A(o, (e) => {
801
- !e && s.value && (s.value = !1);
802
- });
803
- function c(e, t) {
804
- let r = Math.max(0, n.modelValue[e] + t);
805
- s.value ? i("update:modelValue", {
806
- top: r,
807
- right: r,
808
- bottom: r,
809
- left: r
810
- }) : i("update:modelValue", {
811
- ...n.modelValue,
812
- [e]: r
813
- });
814
- }
815
- function u(e, t) {
816
- let r = Math.max(0, t);
817
- s.value ? i("update:modelValue", {
818
- top: r,
819
- right: r,
820
- bottom: r,
821
- left: r
822
- }) : i("update:modelValue", {
823
- ...n.modelValue,
824
- [e]: r
825
- });
826
- }
827
- function d() {
828
- if (s.value = !s.value, s.value) {
829
- let e = n.modelValue.top;
830
- i("update:modelValue", {
831
- top: e,
832
- right: e,
833
- bottom: e,
834
- left: e
835
- });
836
- }
837
- }
838
- return (t, n) => (r(), m("div", nr, [S("label", rr, f(e.label), 1), S("div", ir, [
839
- S("div", ar, [
840
- S("button", {
841
- "aria-label": g(a).spacingControl.decreaseTop,
842
- class: x([Q, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
843
- onClick: n[0] ||= (e) => c("top", -1)
844
- }, [k(g(U), {
845
- size: 12,
846
- "stroke-width": 2
847
- })], 10, or),
848
- S("input", {
849
- type: "number",
850
- class: x(Cr),
851
- value: e.modelValue.top,
852
- "aria-label": g(a).spacingControl.top,
853
- min: "0",
854
- onInput: n[1] ||= (e) => u("top", Number(e.target.value))
855
- }, null, 40, sr),
856
- S("button", {
857
- "aria-label": g(a).spacingControl.increaseTop,
858
- class: x([Q, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
859
- onClick: n[2] ||= (e) => c("top", 1)
860
- }, [k(g(H), {
861
- size: 12,
862
- "stroke-width": 2
863
- })], 10, cr)
864
- ]),
865
- S("div", lr, [
866
- S("div", ur, [
867
- S("button", {
868
- "aria-label": g(a).spacingControl.decreaseLeft,
869
- class: x([Q, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
870
- onClick: n[3] ||= (e) => c("left", -1)
871
- }, [k(g(U), {
872
- size: 12,
873
- "stroke-width": 2
874
- })], 10, dr),
875
- S("input", {
876
- type: "number",
877
- class: x(Cr),
878
- value: e.modelValue.left,
879
- "aria-label": g(a).spacingControl.left,
880
- min: "0",
881
- onInput: n[4] ||= (e) => u("left", Number(e.target.value))
882
- }, null, 40, fr),
883
- S("button", {
884
- "aria-label": g(a).spacingControl.increaseLeft,
885
- class: x([Q, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
886
- onClick: n[5] ||= (e) => c("left", 1)
887
- }, [k(g(H), {
888
- size: 12,
889
- "stroke-width": 2
890
- })], 10, pr)
891
- ]),
892
- S("button", {
893
- class: x(["tpl:flex tpl:h-8 tpl:w-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", s.value ? "tpl:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] hover:tpl:bg-[var(--tpl-bg-hover)]"]),
894
- "aria-label": s.value ? g(a).spacingControl.unlock : g(a).spacingControl.lockAll,
895
- title: s.value ? g(a).spacingControl.unlock : g(a).spacingControl.lockAll,
896
- onClick: d
897
- }, [s.value ? (r(), v(g(Ye), {
898
- key: 0,
899
- size: 14,
900
- "stroke-width": 2
901
- })) : (r(), v(g(Xe), {
902
- key: 1,
903
- size: 14,
904
- "stroke-width": 2
905
- }))], 10, mr),
906
- S("div", hr, [
907
- S("button", {
908
- "aria-label": g(a).spacingControl.decreaseRight,
909
- class: x([Q, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
910
- onClick: n[6] ||= (e) => c("right", -1)
911
- }, [k(g(U), {
912
- size: 12,
913
- "stroke-width": 2
914
- })], 10, gr),
915
- S("input", {
916
- type: "number",
917
- class: x(Cr),
918
- value: e.modelValue.right,
919
- "aria-label": g(a).spacingControl.right,
920
- min: "0",
921
- onInput: n[7] ||= (e) => u("right", Number(e.target.value))
922
- }, null, 40, _r),
923
- S("button", {
924
- "aria-label": g(a).spacingControl.increaseRight,
925
- class: x([Q, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
926
- onClick: n[8] ||= (e) => c("right", 1)
927
- }, [k(g(H), {
928
- size: 12,
929
- "stroke-width": 2
930
- })], 10, vr)
931
- ])
932
- ]),
933
- S("div", yr, [
934
- S("button", {
935
- "aria-label": g(a).spacingControl.decreaseBottom,
936
- class: x([Q, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
937
- onClick: n[9] ||= (e) => c("bottom", -1)
938
- }, [k(g(U), {
939
- size: 12,
940
- "stroke-width": 2
941
- })], 10, br),
942
- S("input", {
943
- type: "number",
944
- class: x(Cr),
945
- value: e.modelValue.bottom,
946
- "aria-label": g(a).spacingControl.bottom,
947
- min: "0",
948
- onInput: n[10] ||= (e) => u("bottom", Number(e.target.value))
949
- }, null, 40, xr),
950
- S("button", {
951
- "aria-label": g(a).spacingControl.increaseBottom,
952
- class: x([Q, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
953
- onClick: n[11] ||= (e) => c("bottom", 1)
954
- }, [k(g(H), {
955
- size: 12,
956
- "stroke-width": 2
957
- })], 10, Sr)
958
- ])
959
- ])]));
960
- }
961
- }), [["__scopeId", "data-v-9a9c8a07"]]), Tr = { class: "tpl:mt-3" }, Er = /* @__PURE__ */ O({
962
- __name: "CollapsibleSection",
963
- props: {
964
- title: {},
965
- open: { type: Boolean },
966
- noBorder: { type: Boolean }
967
- },
968
- emits: ["toggle"],
969
- setup(n) {
970
- return (i, a) => (r(), m("div", { class: x(["tpl:py-3", n.noBorder ? "" : "tpl:border-t tpl:border-[var(--tpl-border)]"]) }, [S("button", {
971
- type: "button",
972
- class: "tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-1.5 tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
973
- onClick: a[0] ||= (e) => i.$emit("toggle")
974
- }, [k(g(fe), {
975
- class: x(["tpl:transition-transform tpl:duration-200", n.open ? "tpl:rotate-0" : "tpl:-rotate-90"]),
976
- size: 12,
977
- "stroke-width": 2
978
- }, null, 8, ["class"]), S("span", null, f(n.title), 1)]), t(S("div", Tr, [e(i.$slots, "default")], 512), [[C, n.open]])], 2));
979
- }
980
- }), Dr = { class: "tpl:mt-4" }, Or = { class: "tpl:space-y-2" }, kr = ["checked", "onChange"], Ar = ["value", "placeholder"], jr = { class: "tpl:space-y-2" }, Mr = ["value"], Nr = { value: "" }, Pr = ["label"], Fr = ["value"], Ir = ["value"], Lr = {
981
- key: 0,
982
- value: "__custom__"
983
- }, Rr = {
984
- key: 0,
985
- class: "tpl:space-y-2"
986
- }, zr = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Br = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Vr = { class: "tpl:flex tpl:justify-end" }, Hr = ["disabled"], Ur = {
987
- key: 0,
988
- class: "tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]"
989
- }, Wr = { class: "tpl:space-y-1" }, Gr = { class: "tpl:m-0 tpl:overflow-x-auto tpl:rounded tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-muted)]" }, Kr = {
990
- key: 0,
991
- class: "tpl:m-0 tpl:overflow-x-auto tpl:rounded tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-muted)]"
992
- }, qr = /* @__PURE__ */ O({
993
- __name: "CommonBlockSettings",
994
- props: {
995
- block: {},
996
- isFirstSection: { type: Boolean }
997
- },
998
- emits: ["update"],
999
- setup(e, { emit: i }) {
1000
- let u = e, d = i, { t: _ } = R(), y = o(oe, []), C = o(ce, !1), w = c(/* @__PURE__ */ new Set()), T = l(!1), O = l(""), j = l(""), ee = [
1001
- {
1002
- key: "desktop",
1003
- icon: Qe,
1004
- labelKey: "showOnDesktop"
1005
- },
1006
- {
1007
- key: "tablet",
1008
- icon: ct,
1009
- labelKey: "showOnTablet"
1010
- },
1011
- {
1012
- key: "mobile",
1013
- icon: dt,
1014
- labelKey: "showOnMobile"
1015
- }
1016
- ];
1017
- function M(e) {
1018
- w.has(e) ? w.delete(e) : w.add(e);
1019
- }
1020
- let te = p(() => y.length > 0 || C), N = p(() => u.block.displayCondition ? !y.some((e) => e.label === u.block.displayCondition?.label) : !1);
1021
- function P() {
1022
- T.value = !0, N.value && u.block.displayCondition ? (O.value = u.block.displayCondition.before, j.value = u.block.displayCondition.after ?? "") : (O.value = "", j.value = "");
1023
- }
1024
- function ne() {
1025
- O.value.trim() && (d("update", { displayCondition: {
1026
- label: _.blockSettings.customCondition,
1027
- before: O.value.trim(),
1028
- after: j.value.trim()
1029
- } }), T.value = !1, O.value = "", j.value = "");
1030
- }
1031
- A(() => u.block.displayCondition, (e) => {
1032
- if (!e) {
1033
- T.value = !1, O.value = "", j.value = "";
1034
- return;
1035
- }
1036
- N.value && (O.value = e.before, j.value = e.after ?? "");
1037
- }, { immediate: !0 });
1038
- let re = p(() => {
1039
- let e = {};
1040
- for (let t of y) {
1041
- let n = t.group ?? "";
1042
- e[n] || (e[n] = []), e[n].push(t);
1043
- }
1044
- return e;
1045
- });
1046
- function F(e, t) {
1047
- d("update", { styles: {
1048
- ...u.block.styles,
1049
- [e]: t
1050
- } });
1051
- }
1052
- function ie(e) {
1053
- return u.block.visibility?.[e] !== !1;
1054
- }
1055
- function I(e) {
1056
- let t = {
1057
- desktop: ie("desktop"),
1058
- tablet: ie("tablet"),
1059
- mobile: ie("mobile")
1060
- };
1061
- t[e] = !t[e], d("update", { visibility: t });
1062
- }
1063
- return (i, o) => (r(), m("div", { class: x(["tpl:flex tpl:flex-col", e.isFirstSection ? "" : "tpl:mt-4"]) }, [
1064
- k(Er, {
1065
- title: g(_).blockSettings.spacing,
1066
- open: w.has("spacing"),
1067
- "no-border": e.isFirstSection,
1068
- onToggle: o[2] ||= (e) => M("spacing")
1069
- }, {
1070
- default: s(() => [k(wr, {
1071
- label: g(_).blockSettings.padding,
1072
- "model-value": e.block.styles.padding,
1073
- "onUpdate:modelValue": o[0] ||= (e) => F("padding", e)
1074
- }, null, 8, ["label", "model-value"]), S("div", Dr, [k(wr, {
1075
- label: g(_).blockSettings.margin,
1076
- "model-value": e.block.styles.margin,
1077
- "onUpdate:modelValue": o[1] ||= (e) => F("margin", e)
1078
- }, null, 8, ["label", "model-value"])])]),
1079
- _: 1
1080
- }, 8, [
1081
- "title",
1082
- "open",
1083
- "no-border"
1084
- ]),
1085
- k(Er, {
1086
- title: g(_).blockSettings.background,
1087
- open: w.has("bg"),
1088
- onToggle: o[4] ||= (e) => M("bg")
1089
- }, {
1090
- default: s(() => [S("label", { class: x(g(G)) }, f(g(_).blockSettings.color), 3), k(J, {
1091
- size: "large",
1092
- "model-value": e.block.styles.backgroundColor || g("#ffffff"),
1093
- "onUpdate:modelValue": o[3] ||= (e) => F("backgroundColor", e)
1094
- }, null, 8, ["model-value"])]),
1095
- _: 1
1096
- }, 8, ["title", "open"]),
1097
- k(Er, {
1098
- title: g(_).blockSettings.display,
1099
- open: w.has("display"),
1100
- onToggle: o[5] ||= (e) => M("display")
1101
- }, {
1102
- default: s(() => [S("div", Or, [(r(), m(E, null, a(ee, (e) => S("label", {
1103
- key: e.key,
1104
- class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]"
1105
- }, [
1106
- S("input", {
1107
- type: "checkbox",
1108
- class: "tpl:accent-[var(--tpl-primary)]",
1109
- checked: ie(e.key),
1110
- onChange: (t) => I(e.key)
1111
- }, null, 40, kr),
1112
- (r(), v(n(e.icon), {
1113
- size: 14,
1114
- "stroke-width": 1.5
1115
- })),
1116
- D(" " + f(g(_).blockSettings[e.labelKey]), 1)
1117
- ])), 64))])]),
1118
- _: 1
1119
- }, 8, ["title", "open"]),
1120
- k(Er, {
1121
- title: g(_).blockSettings.customCss,
1122
- open: w.has("css"),
1123
- onToggle: o[7] ||= (e) => M("css")
1124
- }, {
1125
- default: s(() => [S("label", { class: x(g(G)) }, f(g(_).blockSettings.css), 3), S("textarea", {
1126
- value: e.block.customCss || "",
1127
- placeholder: g(_).blockSettings.cssPlaceholder,
1128
- rows: "3",
1129
- class: x(g(yt)),
1130
- onInput: o[6] ||= (e) => d("update", { customCss: e.target.value })
1131
- }, null, 42, Ar)]),
1132
- _: 1
1133
- }, 8, ["title", "open"]),
1134
- te.value ? (r(), v(Er, {
1135
- key: 0,
1136
- title: g(_).blockSettings.displayCondition,
1137
- open: w.has("condition"),
1138
- onToggle: o[11] ||= (e) => M("condition")
1139
- }, {
1140
- default: s(() => [S("div", jr, [S("select", {
1141
- class: x(["tpl:w-full tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:outline-none tpl:transition-all tpl:duration-150 tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", e.block.displayCondition ? "tpl:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-text)]" : "tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"]),
1142
- value: T.value || N.value ? "__custom__" : e.block.displayCondition?.label ?? "",
1143
- onChange: o[8] ||= (e) => {
1144
- let t = e.target.value;
1145
- if (t === "__custom__") {
1146
- P();
1147
- return;
1148
- }
1149
- if (T.value = !1, !t) {
1150
- d("update", { displayCondition: void 0 });
1151
- return;
1152
- }
1153
- let n = g(y).find((e) => e.label === t);
1154
- n && d("update", { displayCondition: n });
1155
- }
1156
- }, [
1157
- S("option", Nr, f(g(_).blockSettings.noCondition), 1),
1158
- (r(!0), m(E, null, a(re.value, (e, t) => (r(), m(E, { key: t }, [t ? (r(), m("optgroup", {
1159
- key: 0,
1160
- label: String(t)
1161
- }, [(r(!0), m(E, null, a(e, (e) => (r(), m("option", {
1162
- key: e.label,
1163
- value: e.label
1164
- }, f(e.label), 9, Fr))), 128))], 8, Pr)) : (r(!0), m(E, { key: 1 }, a(e, (e) => (r(), m("option", {
1165
- key: e.label,
1166
- value: e.label
1167
- }, f(e.label), 9, Ir))), 128))], 64))), 128)),
1168
- g(C) ? (r(), m("option", Lr, f(g(_).blockSettings.customCondition), 1)) : h("", !0)
1169
- ], 42, Mr), T.value || N.value ? (r(), m("div", Rr, [
1170
- S("div", null, [S("label", zr, f(g(_).blockSettings.customConditionBefore), 1), t(S("textarea", {
1171
- "onUpdate:modelValue": o[9] ||= (e) => O.value = e,
1172
- rows: "2",
1173
- class: x(g(yt))
1174
- }, null, 2), [[b, O.value]])]),
1175
- S("div", null, [S("label", Br, f(g(_).blockSettings.customConditionAfter), 1), t(S("textarea", {
1176
- "onUpdate:modelValue": o[10] ||= (e) => j.value = e,
1177
- rows: "2",
1178
- class: x(g(yt))
1179
- }, null, 2), [[b, j.value]])]),
1180
- S("div", Vr, [S("button", {
1181
- type: "button",
1182
- class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)] tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:opacity-50",
1183
- disabled: !O.value.trim(),
1184
- onClick: ne
1185
- }, f(g(_).blockSettings.applyCondition), 9, Hr)])
1186
- ])) : e.block.displayCondition && !N.value ? (r(), m(E, { key: 1 }, [e.block.displayCondition.description ? (r(), m("p", Ur, f(e.block.displayCondition.description), 1)) : h("", !0), S("div", Wr, [S("pre", Gr, f(e.block.displayCondition.before), 1), e.block.displayCondition.after ? (r(), m("pre", Kr, f(e.block.displayCondition.after), 1)) : h("", !0)])], 64)) : h("", !0)])]),
1187
- _: 1
1188
- }, 8, ["title", "open"])) : h("", !0)
1189
- ], 2));
1190
- }
1191
- }), Jr = ["title"], Yr = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Xr = {
1192
- key: 1,
1193
- class: "tpl:text-[var(--tpl-danger)]"
1194
- }, Zr = [
1195
- "aria-checked",
1196
- "aria-label",
1197
- "disabled"
1198
- ], Qr = /* @__PURE__ */ O({
1199
- __name: "BooleanField",
1200
- props: {
1201
- field: {},
1202
- modelValue: { type: Boolean },
1203
- readOnly: { type: Boolean }
1204
- },
1205
- emits: ["update:modelValue"],
1206
- setup(e, { emit: t }) {
1207
- let n = t, { t: i } = R();
1208
- return (t, a) => (r(), m("div", {
1209
- class: "tpl:mb-3.5",
1210
- title: e.readOnly ? g(i).customBlocks.dataSource.readOnlyTooltip : void 0
1211
- }, [S("label", { class: x(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", e.readOnly ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [S("span", Yr, [
1212
- D(f(e.field.label) + " ", 1),
1213
- e.readOnly ? (r(), v(g(Ye), {
1214
- key: 0,
1215
- size: 12,
1216
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1217
- })) : h("", !0),
1218
- e.field.required ? (r(), m("span", Xr, " * ")) : h("", !0)
1219
- ]), S("button", {
1220
- type: "button",
1221
- role: "switch",
1222
- "aria-checked": e.modelValue,
1223
- "aria-label": e.field.label,
1224
- class: x([
1225
- "tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200",
1226
- e.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
1227
- e.readOnly ? "tpl:opacity-60 tpl:cursor-not-allowed" : "tpl:cursor-pointer"
1228
- ]),
1229
- disabled: e.readOnly,
1230
- onClick: a[0] ||= (t) => !e.readOnly && n("update:modelValue", !e.modelValue)
1231
- }, [S("span", { class: x(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow tpl:transition-transform tpl:duration-200", e.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, Zr)], 2)], 8, Jr));
1232
- }
1233
- }), $r = { class: "tpl:mb-3.5" }, ei = {
1234
- key: 1,
1235
- class: "tpl:text-[var(--tpl-danger)]"
1236
- }, $ = /* @__PURE__ */ O({
1237
- __name: "FieldWrapper",
1238
- props: {
1239
- label: {},
1240
- required: { type: Boolean },
1241
- readOnly: { type: Boolean }
1242
- },
1243
- setup(t) {
1244
- return (n, i) => (r(), m("div", $r, [S("label", { class: x(g(G)) }, [
1245
- D(f(t.label) + " ", 1),
1246
- t.readOnly ? (r(), v(g(Ye), {
1247
- key: 0,
1248
- size: 12,
1249
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1250
- })) : h("", !0),
1251
- t.required ? (r(), m("span", ei, "*")) : h("", !0)
1252
- ], 2), e(n.$slots, "default")]));
1253
- }
1254
- }), ti = /* @__PURE__ */ O({
1255
- __name: "ColorField",
1256
- props: {
1257
- field: {},
1258
- modelValue: {},
1259
- readOnly: { type: Boolean }
1260
- },
1261
- emits: ["update:modelValue"],
1262
- setup(e, { emit: t }) {
1263
- let n = t, { t: i } = R();
1264
- return (t, a) => (r(), v($, {
1265
- label: e.field.label,
1266
- required: e.field.required,
1267
- "read-only": e.readOnly
1268
- }, {
1269
- default: s(() => [k(J, {
1270
- "model-value": e.modelValue || g("#000000"),
1271
- placeholder: e.field.placeholder || g("#000000"),
1272
- disabled: e.readOnly,
1273
- title: e.readOnly ? g(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1274
- "onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
1275
- }, null, 8, [
1276
- "model-value",
1277
- "placeholder",
1278
- "disabled",
1279
- "title"
1280
- ])]),
1281
- _: 1
1282
- }, 8, [
1283
- "label",
1284
- "required",
1285
- "read-only"
1286
- ]));
1287
- }
1288
- }), ni = [
1289
- "value",
1290
- "placeholder",
1291
- "title"
1292
- ], ri = ["value", "placeholder"], ii = /* @__PURE__ */ O({
1293
- __name: "ImageField",
1294
- props: {
1295
- field: {},
1296
- modelValue: {},
1297
- readOnly: { type: Boolean }
1298
- },
1299
- emits: ["update:modelValue"],
1300
- setup(e, { emit: t }) {
1301
- let n = t, { t: i } = R(), a = o(z, null), c = p(() => !!a);
1302
- async function l() {
1303
- let e = await a?.({ accept: ["images"] });
1304
- e && n("update:modelValue", e.url);
1305
- }
1306
- return (t, a) => (r(), v($, {
1307
- label: e.field.label,
1308
- required: e.field.required,
1309
- "read-only": e.readOnly
1310
- }, {
1311
- default: s(() => [e.readOnly ? (r(), m("input", {
1312
- key: 0,
1313
- type: "url",
1314
- class: x([g(W), "tpl:opacity-60 tpl:cursor-not-allowed"]),
1315
- value: e.modelValue,
1316
- placeholder: e.field.placeholder || "https://...",
1317
- disabled: "",
1318
- title: g(i).customBlocks.dataSource.readOnlyTooltip
1319
- }, null, 10, ni)) : (r(), m("input", {
1320
- key: 1,
1321
- type: "url",
1322
- class: x(g(W)),
1323
- value: e.modelValue,
1324
- placeholder: e.field.placeholder || "https://...",
1325
- onInput: a[0] ||= (e) => n("update:modelValue", e.target.value)
1326
- }, null, 42, ri)), c.value && !e.readOnly ? (r(), m("button", {
1327
- key: 2,
1328
- class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg)]",
1329
- onClick: a[1] ||= (e) => l()
1330
- }, [k(g(Ge), {
1331
- size: 14,
1332
- "stroke-width": 1.5
1333
- }), D(" " + f(g(i).image.browseMedia), 1)])) : h("", !0)]),
1334
- _: 1
1335
- }, 8, [
1336
- "label",
1337
- "required",
1338
- "read-only"
1339
- ]));
1340
- }
1341
- }), ai = [
1342
- "value",
1343
- "placeholder",
1344
- "min",
1345
- "max",
1346
- "step",
1347
- "disabled",
1348
- "title"
1349
- ], oi = /* @__PURE__ */ O({
1350
- __name: "NumberField",
1351
- props: {
1352
- field: {},
1353
- modelValue: {},
1354
- readOnly: { type: Boolean }
1355
- },
1356
- emits: ["update:modelValue"],
1357
- setup(e, { emit: t }) {
1358
- let n = t, { t: i } = R();
1359
- return (t, a) => (r(), v($, {
1360
- label: e.field.label,
1361
- required: e.field.required,
1362
- "read-only": e.readOnly
1363
- }, {
1364
- default: s(() => [S("input", {
1365
- type: "number",
1366
- class: x([g(W), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
1367
- value: e.modelValue,
1368
- placeholder: e.field.placeholder,
1369
- min: e.field.min,
1370
- max: e.field.max,
1371
- step: e.field.step,
1372
- disabled: e.readOnly,
1373
- title: e.readOnly ? g(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1374
- onInput: a[0] ||= (t) => !e.readOnly && n("update:modelValue", Number(t.target.value))
1375
- }, null, 42, ai)]),
1376
- _: 1
1377
- }, 8, [
1378
- "label",
1379
- "required",
1380
- "read-only"
1381
- ]));
1382
- }
1383
- }), si = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ci = { class: "tpl:mb-2 tpl:flex tpl:items-center tpl:justify-between" }, li = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]" }, ui = ["title", "onClick"], di = {
1384
- key: 1,
1385
- class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
1386
- }, fi = /* @__PURE__ */ O({
1387
- __name: "RepeatableField",
1388
- props: {
1389
- field: {},
1390
- modelValue: {},
1391
- readOnly: { type: Boolean }
1392
- },
1393
- emits: ["update:modelValue"],
1394
- setup(e, { emit: t }) {
1395
- let i = e, o = t, { t: c } = R(), l = p(() => i.modelValue || []), u = p(() => !i.field.maxItems || l.value.length < i.field.maxItems), d = p(() => !i.field.minItems || l.value.length > i.field.minItems);
1396
- function _() {
1397
- if (!u.value || i.readOnly) return;
1398
- let e = {};
1399
- for (let t of i.field.fields) e[t.key] = t.default ?? "";
1400
- o("update:modelValue", [...l.value, e]);
1401
- }
1402
- function y(e) {
1403
- if (!d.value || i.readOnly) return;
1404
- let t = [...l.value];
1405
- t.splice(e, 1), o("update:modelValue", t);
1406
- }
1407
- function b(e, t, n) {
1408
- o("update:modelValue", l.value.map((r, i) => i === e ? {
1409
- ...r,
1410
- [t]: n
1411
- } : r));
1412
- }
1413
- return (t, i) => (r(), v($, {
1414
- label: e.field.label,
1415
- required: e.field.required,
1416
- "read-only": e.readOnly
1417
- }, {
1418
- default: s(() => [S("div", si, [
1419
- (r(!0), m(E, null, a(l.value, (t, i) => (r(), m("div", {
1420
- key: `${e.field.key}-${i}`,
1421
- class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-3"
1422
- }, [S("div", ci, [S("span", li, " #" + f(i + 1), 1), d.value && !e.readOnly ? (r(), m("button", {
1423
- key: 0,
1424
- type: "button",
1425
- class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
1426
- title: g(c).customBlocks.fields.removeItem,
1427
- onClick: (e) => y(i)
1428
- }, [k(g(Re), {
1429
- size: 12,
1430
- "stroke-width": 2
1431
- })], 8, ui)) : h("", !0)]), (r(!0), m(E, null, a(e.field.fields, (a) => (r(), v(n(g(xi)(a.type)), {
1432
- key: a.key,
1433
- field: a,
1434
- "model-value": t[a.key],
1435
- "read-only": e.readOnly,
1436
- "onUpdate:modelValue": (e) => b(i, a.key, e)
1437
- }, null, 8, [
1438
- "field",
1439
- "model-value",
1440
- "read-only",
1441
- "onUpdate:modelValue"
1442
- ]))), 128))]))), 128)),
1443
- u.value && !e.readOnly ? (r(), m("button", {
1444
- key: 0,
1445
- type: "button",
1446
- class: x(g(vt)),
1447
- onClick: _
1448
- }, [k(g(H), {
1449
- size: 14,
1450
- "stroke-width": 2
1451
- }), D(" " + f(g(c).customBlocks.fields.addItem), 1)], 2)) : h("", !0),
1452
- !u.value && !e.readOnly ? (r(), m("p", di, f(g(c).customBlocks.fields.maxItemsReached), 1)) : h("", !0)
1453
- ])]),
1454
- _: 1
1455
- }, 8, [
1456
- "label",
1457
- "required",
1458
- "read-only"
1459
- ]));
1460
- }
1461
- }), pi = [
1462
- "value",
1463
- "disabled",
1464
- "title"
1465
- ], mi = ["value"], hi = /* @__PURE__ */ O({
1466
- __name: "SelectField",
1467
- props: {
1468
- field: {},
1469
- modelValue: {},
1470
- readOnly: { type: Boolean }
1471
- },
1472
- emits: ["update:modelValue"],
1473
- setup(e, { emit: t }) {
1474
- let n = t, { t: i } = R();
1475
- return (t, o) => (r(), v($, {
1476
- label: e.field.label,
1477
- required: e.field.required,
1478
- "read-only": e.readOnly
1479
- }, {
1480
- default: s(() => [S("select", {
1481
- class: x([g(W), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
1482
- value: e.modelValue,
1483
- disabled: e.readOnly,
1484
- title: e.readOnly ? g(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1485
- onChange: o[0] ||= (t) => !e.readOnly && n("update:modelValue", t.target.value)
1486
- }, [(r(!0), m(E, null, a(e.field.options, (e) => (r(), m("option", {
1487
- key: e.value,
1488
- value: e.value
1489
- }, f(e.label), 9, mi))), 128))], 42, pi)]),
1490
- _: 1
1491
- }, 8, [
1492
- "label",
1493
- "required",
1494
- "read-only"
1495
- ]));
1496
- }
1497
- }), gi = [
1498
- "value",
1499
- "placeholder",
1500
- "title"
1501
- ], _i = /* @__PURE__ */ O({
1502
- __name: "TextField",
1503
- props: {
1504
- field: {},
1505
- modelValue: {},
1506
- readOnly: { type: Boolean }
1507
- },
1508
- emits: ["update:modelValue"],
1509
- setup(e, { emit: t }) {
1510
- let n = t, { t: i } = R();
1511
- return (t, a) => (r(), v($, {
1512
- label: e.field.label,
1513
- required: e.field.required,
1514
- "read-only": e.readOnly
1515
- }, {
1516
- default: s(() => [e.readOnly ? (r(), m("input", {
1517
- key: 0,
1518
- type: "text",
1519
- class: x([g(W), "tpl:opacity-60 tpl:cursor-not-allowed"]),
1520
- value: e.modelValue,
1521
- placeholder: e.field.placeholder,
1522
- disabled: "",
1523
- title: g(i).customBlocks.dataSource.readOnlyTooltip
1524
- }, null, 10, gi)) : (r(), v(Z, {
1525
- key: 1,
1526
- "model-value": e.modelValue,
1527
- placeholder: e.field.placeholder,
1528
- "onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
1529
- }, null, 8, ["model-value", "placeholder"]))]),
1530
- _: 1
1531
- }, 8, [
1532
- "label",
1533
- "required",
1534
- "read-only"
1535
- ]));
1536
- }
1537
- }), vi = [
1538
- "value",
1539
- "placeholder",
1540
- "title"
1541
- ], yi = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:opacity-60 tpl:cursor-not-allowed", bi = {
1542
- text: _i,
1543
- textarea: /* @__PURE__ */ O({
1544
- __name: "TextareaField",
1545
- props: {
1546
- field: {},
1547
- modelValue: {},
1548
- readOnly: { type: Boolean }
1549
- },
1550
- emits: ["update:modelValue"],
1551
- setup(e, { emit: t }) {
1552
- let n = t, { t: i } = R();
1553
- return (t, a) => (r(), v($, {
1554
- label: e.field.label,
1555
- required: e.field.required,
1556
- "read-only": e.readOnly
1557
- }, {
1558
- default: s(() => [e.readOnly ? (r(), m("textarea", {
1559
- key: 0,
1560
- value: e.modelValue,
1561
- placeholder: e.field.placeholder,
1562
- rows: "3",
1563
- disabled: "",
1564
- title: g(i).customBlocks.dataSource.readOnlyTooltip,
1565
- class: x(yi)
1566
- }, null, 8, vi)) : (r(), v(an, {
1567
- key: 1,
1568
- "model-value": e.modelValue,
1569
- placeholder: e.field.placeholder,
1570
- "onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
1571
- }, null, 8, ["model-value", "placeholder"]))]),
1572
- _: 1
1573
- }, 8, [
1574
- "label",
1575
- "required",
1576
- "read-only"
1577
- ]));
1578
- }
1579
- }),
1580
- image: ii,
1581
- color: ti,
1582
- number: oi,
1583
- select: hi,
1584
- boolean: Qr,
1585
- repeatable: fi
1586
- };
1587
- function xi(e) {
1588
- return bi[e] ?? _i;
1589
- }
1590
- //#endregion
1591
- //#region src/components/toolbar/CustomBlockToolbar.vue?vue&type=script&setup=true&lang.ts
1592
- var Si = {
1593
- key: 0,
1594
- class: "tpl:p-4"
1595
- }, Ci = { class: "tpl:m-0 tpl:text-center tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, wi = { key: 1 }, Ti = {
1596
- key: 0,
1597
- class: "tpl:m-0 tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
1598
- }, Ei = {
1599
- key: 1,
1600
- class: "tpl:mb-4"
1601
- }, Di = {
1602
- key: 1,
1603
- class: "tpl:flex tpl:h-[32px] tpl:items-center"
1604
- }, Oi = {
1605
- key: 0,
1606
- class: "tpl:w-full tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
1607
- }, ki = {
1608
- key: 2,
1609
- class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]"
1610
- }, Ai = /* @__PURE__ */ O({
1611
- __name: "CustomBlockToolbar",
1612
- props: { block: {} },
1613
- emits: ["updateFieldValues", "updateDataSourceFetched"],
1614
- setup(e, { emit: t }) {
1615
- let i = e, s = t, { t: c } = R(), l = o(F, []), u = p(() => l.find((e) => e.type === i.block.customType)), { isFetching: d, fetchError: _, fetch: y, hasDataSource: b, needsFetch: x } = Ee({
1616
- definition: u,
1617
- block: p(() => i.block),
1618
- onUpdate: (e, t) => {
1619
- s("updateFieldValues", e), s("updateDataSourceFetched", t);
1620
- }
1621
- });
1622
- function C(e) {
1623
- return e.readOnly === !0 && b.value && !!i.block.dataSourceFetched;
1624
- }
1625
- function w(e, t) {
1626
- s("updateFieldValues", {
1627
- ...i.block.fieldValues,
1628
- [e]: t
1629
- });
1630
- }
1631
- return (t, i) => u.value ? (r(), m("div", wi, [
1632
- u.value.description ? (r(), m("p", Ti, f(u.value.description), 1)) : h("", !0),
1633
- g(b) ? (r(), m("div", Ei, [g(x) && !g(d) ? (r(), m("button", {
1634
- key: 0,
1635
- type: "button",
1636
- class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-md tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-bg)] tpl:transition-all tpl:duration-150 tpl:bg-[var(--tpl-primary)]",
1637
- onClick: i[0] ||= (...e) => g(y) && g(y)(...e)
1638
- }, f(u.value?.dataSource?.label || g(c).customBlocks.dataSource.fetchButton), 1)) : (r(), m("div", Di, [g(d) ? (r(), m("div", Oi, f(g(c).customBlocks.dataSource.fetching), 1)) : (r(), m("button", {
1639
- key: 1,
1640
- type: "button",
1641
- class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]",
1642
- onClick: i[1] ||= (...e) => g(y) && g(y)(...e)
1643
- }, [k(g(Pe), { size: 12 }), D(" " + f(g(c).customBlocks.dataSource.changeButton), 1)]))])), g(_) ? (r(), m("p", ki, [k(g(N), {
1644
- size: 14,
1645
- class: "tpl:shrink-0"
1646
- }), D(" " + f(g(c).customBlocks.dataSource.fetchError), 1)])) : h("", !0)])) : h("", !0),
1647
- (r(!0), m(E, null, a(u.value.fields, (t) => (r(), v(n(g(xi)(t.type)), {
1648
- key: t.key,
1649
- field: t,
1650
- "model-value": e.block.fieldValues[t.key],
1651
- "read-only": C(t),
1652
- "onUpdate:modelValue": (e) => w(t.key, e)
1653
- }, null, 8, [
1654
- "field",
1655
- "model-value",
1656
- "read-only",
1657
- "onUpdate:modelValue"
1658
- ]))), 128))
1659
- ])) : (r(), m("div", Si, [S("p", Ci, f(g(c).customBlocks.toolbar.noDefinition), 1)]));
1660
- }
1661
- }), ji = { class: "tpl:mb-3.5" }, Mi = { class: "tpl:mb-3.5" }, Ni = { class: "tpl:mb-3.5" }, Pi = { class: "tpl:flex tpl:items-stretch" }, Fi = ["value"], Ii = /* @__PURE__ */ O({
1662
- __name: "DividerToolbar",
1663
- props: { block: {} },
1664
- emits: ["update"],
1665
- setup(e, { emit: t }) {
1666
- let n = t, { t: i } = R();
1667
- function a(e, t) {
1668
- n("update", { [e]: t });
1669
- }
1670
- return (t, n) => (r(), m(E, null, [
1671
- S("div", ji, [S("label", { class: x(g(G)) }, f(g(i).divider.style), 3), k(X, {
1672
- options: [
1673
- {
1674
- value: "solid",
1675
- label: g(i).divider.solid
1676
- },
1677
- {
1678
- value: "dashed",
1679
- label: g(i).divider.dashed
1680
- },
1681
- {
1682
- value: "dotted",
1683
- label: g(i).divider.dotted
1684
- }
1685
- ],
1686
- "model-value": e.block.lineStyle,
1687
- "onUpdate:modelValue": n[0] ||= (e) => a("lineStyle", e)
1688
- }, null, 8, ["options", "model-value"])]),
1689
- S("div", Mi, [S("label", { class: x(g(G)) }, f(g(i).divider.color), 3), k(J, {
1690
- "model-value": e.block.color,
1691
- "onUpdate:modelValue": n[1] ||= (e) => a("color", e)
1692
- }, null, 8, ["model-value"])]),
1693
- S("div", Ni, [S("label", { class: x(g(G)) }, f(g(i).divider.thickness), 3), S("div", Pi, [S("input", {
1694
- type: "number",
1695
- class: x(g(q)),
1696
- value: e.block.thickness,
1697
- min: "1",
1698
- max: "10",
1699
- onInput: n[2] ||= (e) => a("thickness", Number(e.target.value))
1700
- }, null, 42, Fi), S("span", { class: x(g(K)) }, "px", 2)])])
1701
- ], 64));
1702
- }
1703
- }), Li = { class: "tpl:mb-3.5" }, Ri = ["value"], zi = { class: "tpl:mt-1.5 tpl:flex tpl:items-start tpl:gap-1.5 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, Bi = /* @__PURE__ */ O({
1704
- __name: "HtmlToolbar",
1705
- props: { block: {} },
1706
- emits: ["update"],
1707
- setup(e, { emit: t }) {
1708
- let n = t, { t: i } = R();
1709
- return (t, a) => (r(), m("div", Li, [
1710
- S("label", { class: x(g(G)) }, f(g(i).html.content), 3),
1711
- S("textarea", {
1712
- value: e.block.content,
1713
- placeholder: "<div>...</div>",
1714
- rows: "10",
1715
- class: x(g(yt)),
1716
- onInput: a[0] ||= (e) => n("update", { content: e.target.value })
1717
- }, null, 42, Ri),
1718
- S("p", zi, [k(g(Ve), {
1719
- size: 12,
1720
- class: "tpl:mt-0.5 tpl:shrink-0"
1721
- }), D(" " + f(g(i).html.sanitizationHint), 1)])
1722
- ]));
1723
- }
1724
- }), Vi = { class: "tpl:mb-3.5" }, Hi = {
1725
- key: 0,
1726
- class: "tpl:mb-3.5"
1727
- }, Ui = ["value", "placeholder"], Wi = { class: "tpl:mb-3.5" }, Gi = { class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]" }, Ki = ["checked"], qi = { class: "tpl:block tpl:text-[var(--tpl-text-dim)]" }, Ji = { class: "tpl:mb-3.5" }, Yi = ["value"], Xi = { value: "full" }, Zi = { class: "tpl:mb-3.5" }, Qi = { class: "tpl:mb-3.5" }, $i = {
1728
- key: 0,
1729
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
1730
- }, ea = ["checked"], ta = /* @__PURE__ */ O({
1731
- __name: "ImageToolbar",
1732
- props: { block: {} },
1733
- emits: ["update"],
1734
- setup(e, { emit: t }) {
1735
- let n = t, { t: i } = R(), a = o(z, null), s = o(Se, Ne.liquid), c = p(() => !!a), u = l(!1), d = l(!1), { start: _ } = Be(() => {
1736
- u.value = !1;
1737
- }, 1e3, { immediate: !1 });
1738
- function v(e, t) {
1739
- n("update", { [e]: t });
1740
- }
1741
- async function y() {
1742
- let e = await a?.({ accept: ["images"] });
1743
- e && (v("src", e.url), e.alt && (v("alt", e.alt), d.value = !0), u.value = !0, _());
1744
- }
1745
- return (t, n) => (r(), m(E, null, [
1746
- S("div", Vi, [
1747
- S("label", { class: x(g(G)) }, f(g(i).image.imageUrl), 3),
1748
- k(Z, {
1749
- "model-value": e.block.src,
1750
- type: "url",
1751
- placeholder: g(i).image.imageUrlPlaceholder,
1752
- pulse: u.value,
1753
- "onUpdate:modelValue": n[0] ||= (e) => v("src", e)
1754
- }, null, 8, [
1755
- "model-value",
1756
- "placeholder",
1757
- "pulse"
1758
- ]),
1759
- c.value ? (r(), m("button", {
1760
- key: 0,
1761
- class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
1762
- style: {
1763
- "border-color": "var(--tpl-border)",
1764
- color: "var(--tpl-primary)",
1765
- "background-color": "var(--tpl-bg)"
1766
- },
1767
- onClick: y
1768
- }, [k(g(Ge), {
1769
- size: 14,
1770
- "stroke-width": 1.5
1771
- }), D(" " + f(g(i).image.browseMedia), 1)])) : h("", !0)
1772
- ]),
1773
- g(Me)(e.block.src, g(s)) ? (r(), m("div", Hi, [S("label", { class: x(g(G)) }, [D(f(g(i).image.placeholderUrl) + " ", 1), n[8] ||= S("span", { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, f("(optional)"), -1)], 2), S("input", {
1774
- type: "url",
1775
- class: x(g(W)),
1776
- value: e.block.placeholderUrl || "",
1777
- placeholder: g(i).image.placeholderUrlPlaceholder,
1778
- onInput: n[1] ||= (e) => v("placeholderUrl", e.target.value)
1779
- }, null, 42, Ui)])) : h("", !0),
1780
- S("div", Wi, [
1781
- S("label", { class: x(g(G)) }, f(g(i).image.altText), 3),
1782
- k(Z, {
1783
- "model-value": e.block.alt,
1784
- type: "text",
1785
- placeholder: g(i).image.altTextPlaceholder,
1786
- pulse: d.value,
1787
- disabled: e.block.decorative === !0,
1788
- "onUpdate:modelValue": n[2] ||= (e) => v("alt", e)
1789
- }, null, 8, [
1790
- "model-value",
1791
- "placeholder",
1792
- "pulse",
1793
- "disabled"
1794
- ]),
1795
- S("label", Gi, [S("input", {
1796
- type: "checkbox",
1797
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1798
- checked: e.block.decorative === !0,
1799
- onChange: n[3] ||= (e) => v("decorative", e.target.checked)
1800
- }, null, 40, Ki), S("span", null, [D(f(g(i).image.decorative) + " ", 1), S("span", qi, f(g(i).image.decorativeHint), 1)])])
1801
- ]),
1802
- S("div", Ji, [S("label", { class: x(g(G)) }, f(g(i).image.width), 3), S("select", {
1803
- class: x(g(W)),
1804
- value: e.block.width,
1805
- onChange: n[4] ||= (e) => v("width", e.target.value === "full" ? "full" : Number(e.target.value))
1806
- }, [
1807
- S("option", Xi, f(g(i).image.fullWidth), 1),
1808
- n[9] ||= S("option", { value: "300" }, "300px", -1),
1809
- n[10] ||= S("option", { value: "400" }, "400px", -1),
1810
- n[11] ||= S("option", { value: "500" }, "500px", -1)
1811
- ], 42, Yi)]),
1812
- S("div", Zi, [S("label", { class: x(g(G)) }, f(g(i).title.align), 3), k(X, {
1813
- options: [
1814
- {
1815
- value: "left",
1816
- label: g(i).title.alignLeft
1817
- },
1818
- {
1819
- value: "center",
1820
- label: g(i).title.alignCenter
1821
- },
1822
- {
1823
- value: "right",
1824
- label: g(i).title.alignRight
1825
- }
1826
- ],
1827
- "model-value": e.block.align,
1828
- "onUpdate:modelValue": n[5] ||= (e) => v("align", e)
1829
- }, null, 8, ["options", "model-value"])]),
1830
- S("div", Qi, [
1831
- S("label", { class: x(g(G)) }, f(g(i).image.linkUrl), 3),
1832
- k(Z, {
1833
- "model-value": e.block.linkUrl || "",
1834
- type: "url",
1835
- placeholder: g(i).image.imageUrlPlaceholder,
1836
- "onUpdate:modelValue": n[6] ||= (e) => v("linkUrl", e)
1837
- }, null, 8, ["model-value", "placeholder"]),
1838
- e.block.linkUrl ? (r(), m("label", $i, [S("input", {
1839
- type: "checkbox",
1840
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1841
- checked: e.block.linkOpenInNewTab ?? !1,
1842
- onChange: n[7] ||= (e) => v("linkOpenInNewTab", e.target.checked)
1843
- }, null, 40, ea), D(" " + f(g(i).image.openInNewTab), 1)])) : h("", !0)
1844
- ])
1845
- ], 64));
1846
- }
1847
- }), na = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ra = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ia = [
1848
- "value",
1849
- "placeholder",
1850
- "onInput"
1851
- ], aa = ["title", "onClick"], oa = { class: "tpl:flex tpl:items-center tpl:gap-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, sa = ["checked", "onChange"], ca = { class: "tpl:flex tpl:items-center tpl:gap-2" }, la = ["value"], ua = { value: "" }, da = ["value"], fa = ["value"], pa = /* @__PURE__ */ O({
1852
- __name: "MenuToolbar",
1853
- props: {
1854
- block: {},
1855
- fontFamilies: {}
1856
- },
1857
- emits: ["update"],
1858
- setup(e, { emit: t }) {
1859
- let n = e, i = t, { t: o } = R(), c = p(() => [
1860
- {
1861
- key: "openInNewTab",
1862
- label: o.menu.openInNewTab
1863
- },
1864
- {
1865
- key: "bold",
1866
- label: o.menu.bold
1867
- },
1868
- {
1869
- key: "underline",
1870
- label: o.menu.underline
1871
- }
1872
- ]), l = p(() => [
1873
- {
1874
- value: "left",
1875
- label: o.title.alignLeft,
1876
- icon: lt
1877
- },
1878
- {
1879
- value: "center",
1880
- label: o.title.alignCenter,
1881
- icon: nt
1882
- },
1883
- {
1884
- value: "right",
1885
- label: o.title.alignRight,
1886
- icon: ut
1887
- }
1888
- ]);
1889
- function u(e, t) {
1890
- i("update", { [e]: t });
1891
- }
1892
- function d() {
1893
- let e = {
1894
- id: V(),
1895
- text: "",
1896
- url: "",
1897
- openInNewTab: !1,
1898
- bold: !1,
1899
- underline: !1
1900
- };
1901
- i("update", { items: [...n.block.items, e] });
1902
- }
1903
- function h(e, t, r) {
1904
- i("update", { items: n.block.items.map((n) => n.id === e ? {
1905
- ...n,
1906
- [t]: r
1907
- } : n) });
1908
- }
1909
- function _(e) {
1910
- i("update", { items: n.block.items.filter((t) => t.id !== e) });
1911
- }
1912
- return (t, n) => (r(), m(E, null, [
1913
- k(Y, { label: g(o).menu.items }, {
1914
- default: s(() => [S("div", na, [(r(!0), m(E, null, a(e.block.items, (t) => (r(), m("div", {
1915
- key: t.id,
1916
- class: "tpl:flex tpl:flex-col tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-2"
1917
- }, [
1918
- S("div", ra, [S("input", {
1919
- type: "text",
1920
- class: x([g(W), "tpl:flex-1"]),
1921
- value: t.text,
1922
- placeholder: g(o).menu.text,
1923
- onInput: (e) => h(t.id, "text", e.target.value)
1924
- }, null, 42, ia), S("button", {
1925
- class: x(g(_t)),
1926
- title: g(o).menu.removeItem,
1927
- onClick: (e) => _(t.id)
1928
- }, [k(g(Oe), {
1929
- size: 14,
1930
- "stroke-width": 2
1931
- })], 10, aa)]),
1932
- k(Z, {
1933
- "model-value": t.url,
1934
- type: "url",
1935
- placeholder: g(o).menu.urlPlaceholder,
1936
- "onUpdate:modelValue": (e) => h(t.id, "url", e)
1937
- }, null, 8, [
1938
- "model-value",
1939
- "placeholder",
1940
- "onUpdate:modelValue"
1941
- ]),
1942
- S("div", oa, [(r(!0), m(E, null, a(c.value, (e) => (r(), m("label", {
1943
- key: e.key,
1944
- class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1"
1945
- }, [S("input", {
1946
- type: "checkbox",
1947
- checked: t[e.key],
1948
- class: "tpl:accent-[var(--tpl-primary)]",
1949
- onChange: (n) => h(t.id, e.key, n.target.checked)
1950
- }, null, 40, sa), D(" " + f(e.label), 1)]))), 128))]),
1951
- S("div", ca, [S("label", { class: x([g(G), "tpl:!mb-0"]) }, f(g(o).menu.color), 3), k(J, {
1952
- "swatch-only": "",
1953
- "model-value": t.color || e.block.linkColor || e.block.color,
1954
- "onUpdate:modelValue": (e) => h(t.id, "color", e)
1955
- }, null, 8, ["model-value", "onUpdate:modelValue"])])
1956
- ]))), 128)), S("button", {
1957
- class: x(g(vt)),
1958
- onClick: d
1959
- }, [k(g(H), {
1960
- size: 14,
1961
- "stroke-width": 2
1962
- }), D(" " + f(g(o).menu.addItem), 1)], 2)])]),
1963
- _: 1
1964
- }, 8, ["label"]),
1965
- k(Y, { label: g(o).menu.fontFamily }, {
1966
- default: s(() => [S("select", {
1967
- class: x(g(W)),
1968
- value: e.block.fontFamily || "",
1969
- onChange: n[0] ||= (e) => u("fontFamily", e.target.value || void 0)
1970
- }, [S("option", ua, f(g(o).title.inheritFont), 1), (r(!0), m(E, null, a(e.fontFamilies, (e) => (r(), m("option", {
1971
- key: e.value,
1972
- value: e.value
1973
- }, f(e.label), 9, da))), 128))], 42, la)]),
1974
- _: 1
1975
- }, 8, ["label"]),
1976
- k(Y, { label: g(o).menu.fontSize }, {
1977
- default: s(() => [k(St, {
1978
- "model-value": e.block.fontSize,
1979
- min: 8,
1980
- max: 48,
1981
- suffix: "px",
1982
- "onUpdate:modelValue": n[1] ||= (e) => u("fontSize", e)
1983
- }, null, 8, ["model-value"])]),
1984
- _: 1
1985
- }, 8, ["label"]),
1986
- k(Y, { label: g(o).menu.color }, {
1987
- default: s(() => [k(J, {
1988
- "model-value": e.block.color,
1989
- "onUpdate:modelValue": n[2] ||= (e) => u("color", e)
1990
- }, null, 8, ["model-value"])]),
1991
- _: 1
1992
- }, 8, ["label"]),
1993
- k(Y, { label: g(o).menu.linkColor }, {
1994
- default: s(() => [k(J, {
1995
- "model-value": e.block.linkColor || e.block.color,
1996
- "onUpdate:modelValue": n[3] ||= (e) => u("linkColor", e || void 0)
1997
- }, null, 8, ["model-value"])]),
1998
- _: 1
1999
- }, 8, ["label"]),
2000
- k(Y, { label: g(o).menu.textAlign }, {
2001
- default: s(() => [k(X, {
2002
- options: l.value,
2003
- "model-value": e.block.textAlign,
2004
- "onUpdate:modelValue": n[4] ||= (e) => u("textAlign", e)
2005
- }, null, 8, ["options", "model-value"])]),
2006
- _: 1
2007
- }, 8, ["label"]),
2008
- k(Y, { label: g(o).menu.separator }, {
2009
- default: s(() => [S("input", {
2010
- type: "text",
2011
- class: x(g(W)),
2012
- value: e.block.separator,
2013
- onInput: n[5] ||= (e) => u("separator", e.target.value)
2014
- }, null, 42, fa)]),
2015
- _: 1
2016
- }, 8, ["label"]),
2017
- k(Y, { label: g(o).menu.separatorColor }, {
2018
- default: s(() => [k(J, {
2019
- "model-value": e.block.separatorColor,
2020
- "onUpdate:modelValue": n[6] ||= (e) => u("separatorColor", e)
2021
- }, null, 8, ["model-value"])]),
2022
- _: 1
2023
- }, 8, ["label"]),
2024
- k(Y, { label: g(o).menu.spacing }, {
2025
- default: s(() => [k(St, {
2026
- "model-value": e.block.spacing,
2027
- min: 0,
2028
- max: 50,
2029
- suffix: "px",
2030
- "onUpdate:modelValue": n[7] ||= (e) => u("spacing", e)
2031
- }, null, 8, ["model-value"])]),
2032
- _: 1
2033
- }, 8, ["label"])
2034
- ], 64));
2035
- }
2036
- }), ma = { class: "tpl:mb-3.5" }, ha = ["value"], ga = ["value"], _a = /* @__PURE__ */ O({
2037
- __name: "SectionToolbar",
2038
- props: { block: {} },
2039
- emits: ["update"],
2040
- setup(e, { emit: t }) {
2041
- let n = t, { t: i } = R(), o = p(() => [
2042
- {
2043
- value: "1",
2044
- label: i.section.column1
2045
- },
2046
- {
2047
- value: "2",
2048
- label: i.section.column2
2049
- },
2050
- {
2051
- value: "3",
2052
- label: i.section.column3
2053
- },
2054
- {
2055
- value: "1-2",
2056
- label: i.section.ratio12
2057
- },
2058
- {
2059
- value: "2-1",
2060
- label: i.section.ratio21
2061
- }
2062
- ]);
2063
- return (t, s) => (r(), m("div", ma, [S("label", { class: x(g(G)) }, f(g(i).section.columns), 3), S("select", {
2064
- class: x(g(W)),
2065
- value: e.block.columns,
2066
- onChange: s[0] ||= (e) => n("update", { columns: e.target.value })
2067
- }, [(r(!0), m(E, null, a(o.value, (e) => (r(), m("option", {
2068
- key: e.value,
2069
- value: e.value
2070
- }, f(e.label), 9, ga))), 128))], 42, ha)]));
2071
- }
2072
- }), va = { class: "tpl:mb-3.5" }, ya = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ba = { class: "tpl:flex tpl:items-center tpl:gap-2" }, xa = ["value", "onChange"], Sa = ["value"], Ca = ["title", "onClick"], wa = { class: "tpl:mb-3.5" }, Ta = ["value"], Ea = { value: "solid" }, Da = { value: "outlined" }, Oa = { value: "rounded" }, ka = { value: "square" }, Aa = { value: "circle" }, ja = { class: "tpl:mb-3.5" }, Ma = { class: "tpl:mb-3.5" }, Na = { class: "tpl:flex tpl:items-stretch" }, Pa = ["value"], Fa = { class: "tpl:mb-3.5" }, Ia = /* @__PURE__ */ O({
2073
- __name: "SocialToolbar",
2074
- props: { block: {} },
2075
- emits: ["update"],
2076
- setup(e, { emit: t }) {
2077
- let n = e, i = t, { t: o } = R();
2078
- function s(e, t) {
2079
- i("update", { [e]: t });
2080
- }
2081
- function c() {
2082
- let e = {
2083
- id: V(),
2084
- platform: "facebook",
2085
- url: ""
2086
- };
2087
- i("update", { icons: [...n.block.icons, e] });
2088
- }
2089
- function l(e, t, r) {
2090
- i("update", { icons: n.block.icons.map((n) => n.id === e ? {
2091
- ...n,
2092
- [t]: r
2093
- } : n) });
2094
- }
2095
- function u(e) {
2096
- i("update", { icons: n.block.icons.filter((t) => t.id !== e) });
2097
- }
2098
- return (t, n) => (r(), m(E, null, [
2099
- S("div", va, [S("label", { class: x(g(G)) }, f(g(o).social.icons), 3), S("div", ya, [(r(!0), m(E, null, a(e.block.icons, (e) => (r(), m("div", {
2100
- key: e.id,
2101
- class: "tpl:flex tpl:flex-col tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-2"
2102
- }, [S("div", ba, [S("select", {
2103
- "data-testid": "social-platform-select",
2104
- class: x([g(W), "tpl:flex-1"]),
2105
- value: e.platform,
2106
- onChange: (t) => l(e.id, "platform", t.target.value)
2107
- }, [(r(!0), m(E, null, a(g(I), (e) => (r(), m("option", {
2108
- key: e,
2109
- value: e
2110
- }, f(g(P)[e].name), 9, Sa))), 128))], 42, xa), S("button", {
2111
- class: x(g(_t)),
2112
- title: g(o).social.removeIcon,
2113
- onClick: (t) => u(e.id)
2114
- }, [k(g(Oe), {
2115
- size: 14,
2116
- "stroke-width": 2
2117
- })], 10, Ca)]), k(Z, {
2118
- "model-value": e.url,
2119
- type: "url",
2120
- placeholder: g(o).social.urlPlaceholder,
2121
- "onUpdate:modelValue": (t) => l(e.id, "url", t)
2122
- }, null, 8, [
2123
- "model-value",
2124
- "placeholder",
2125
- "onUpdate:modelValue"
2126
- ])]))), 128)), S("button", {
2127
- class: x(g(vt)),
2128
- onClick: c
2129
- }, [k(g(H), {
2130
- size: 14,
2131
- "stroke-width": 2
2132
- }), D(" " + f(g(o).social.addIcon), 1)], 2)])]),
2133
- S("div", wa, [S("label", { class: x(g(G)) }, f(g(o).social.style), 3), S("select", {
2134
- class: x(g(W)),
2135
- value: e.block.iconStyle,
2136
- onChange: n[0] ||= (e) => s("iconStyle", e.target.value)
2137
- }, [
2138
- S("option", Ea, f(g(o).social.styleSolid), 1),
2139
- S("option", Da, f(g(o).social.styleOutlined), 1),
2140
- S("option", Oa, f(g(o).social.styleRounded), 1),
2141
- S("option", ka, f(g(o).social.styleSquare), 1),
2142
- S("option", Aa, f(g(o).social.styleCircle), 1)
2143
- ], 42, Ta)]),
2144
- S("div", ja, [S("label", { class: x(g(G)) }, f(g(o).social.size), 3), k(X, {
2145
- options: [
2146
- {
2147
- value: "small",
2148
- label: g(o).social.sizeSmall
2149
- },
2150
- {
2151
- value: "medium",
2152
- label: g(o).social.sizeMedium
2153
- },
2154
- {
2155
- value: "large",
2156
- label: g(o).social.sizeLarge
2157
- }
2158
- ],
2159
- "model-value": e.block.iconSize,
2160
- "onUpdate:modelValue": n[1] ||= (e) => s("iconSize", e)
2161
- }, null, 8, ["options", "model-value"])]),
2162
- S("div", Ma, [S("label", { class: x(g(G)) }, f(g(o).social.spacing), 3), S("div", Na, [S("input", {
2163
- type: "number",
2164
- class: x(g(q)),
2165
- value: e.block.spacing,
2166
- min: "0",
2167
- max: "50",
2168
- onInput: n[2] ||= (e) => s("spacing", Number(e.target.value))
2169
- }, null, 42, Pa), S("span", { class: x(g(K)) }, "px", 2)])]),
2170
- S("div", Fa, [S("label", { class: x(g(G)) }, f(g(o).social.align), 3), k(X, {
2171
- options: [
2172
- {
2173
- value: "left",
2174
- label: g(o).title.alignLeft,
2175
- icon: g(lt)
2176
- },
2177
- {
2178
- value: "center",
2179
- label: g(o).title.alignCenter,
2180
- icon: g(nt)
2181
- },
2182
- {
2183
- value: "right",
2184
- label: g(o).title.alignRight,
2185
- icon: g(ut)
2186
- }
2187
- ],
2188
- "model-value": e.block.align,
2189
- "onUpdate:modelValue": n[3] ||= (e) => s("align", e)
2190
- }, null, 8, ["options", "model-value"])])
2191
- ], 64));
2192
- }
2193
- }), La = { class: "tpl:mb-3.5" }, Ra = { class: "tpl:flex tpl:items-stretch" }, za = ["value"], Ba = ["value"], Va = /* @__PURE__ */ O({
2194
- __name: "SpacerToolbar",
2195
- props: { block: {} },
2196
- emits: ["update"],
2197
- setup(e, { emit: t }) {
2198
- let n = t, { t: i } = R();
2199
- return (t, a) => (r(), m("div", La, [
2200
- S("label", { class: x(g(G)) }, f(g(i).spacer.height), 3),
2201
- S("div", Ra, [S("input", {
2202
- type: "number",
2203
- class: x(g(q)),
2204
- value: e.block.height,
2205
- min: "10",
2206
- max: "100",
2207
- onInput: a[0] ||= (e) => n("update", { height: Number(e.target.value) })
2208
- }, null, 42, za), S("span", { class: x(g(K)) }, "px", 2)]),
2209
- S("input", {
2210
- type: "range",
2211
- class: "tpl:mt-2 tpl:w-full tpl:accent-[var(--tpl-primary)]",
2212
- value: e.block.height,
2213
- min: "10",
2214
- max: "100",
2215
- onInput: a[1] ||= (e) => n("update", { height: Number(e.target.value) })
2216
- }, null, 40, Ba)
2217
- ]));
2218
- }
2219
- }), Ha = { class: "tpl:mb-3.5" }, Ua = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Wa = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, Ga = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Ka = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, qa = ["disabled"], Ja = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, Ya = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, Xa = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Za = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, Qa = ["disabled"], $a = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, eo = { class: "tpl:mb-3.5" }, to = { class: "tpl:mb-1.5 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, no = ["checked"], ro = {
2220
- key: 0,
2221
- class: "tpl:mb-3.5"
2222
- }, io = { class: "tpl:mb-3.5" }, ao = { class: "tpl:mb-3.5" }, oo = { class: "tpl:flex tpl:items-stretch" }, so = ["value"], co = { class: "tpl:mb-3.5" }, lo = { class: "tpl:flex tpl:items-stretch" }, uo = ["value"], fo = { class: "tpl:mb-3.5" }, po = ["value"], mo = { value: "" }, ho = ["value"], go = { class: "tpl:mb-3.5" }, _o = { class: "tpl:flex tpl:items-stretch" }, vo = ["value"], yo = { class: "tpl:mb-3.5" }, bo = { class: "tpl:mb-3.5" }, xo = /* @__PURE__ */ O({
2223
- __name: "TableToolbar",
2224
- props: {
2225
- block: {},
2226
- fontFamilies: {}
2227
- },
2228
- emits: ["update"],
2229
- setup(e, { emit: t }) {
2230
- let n = e, i = t, { t: o } = R(), s = p(() => n.block.rows.length > 0 ? n.block.rows[0].cells.length : 0);
2231
- function c(e, t) {
2232
- i("update", { [e]: t });
2233
- }
2234
- function l() {
2235
- let e = n.block.rows.length > 0 ? n.block.rows[0].cells.length : 3, t = {
2236
- id: V(),
2237
- cells: Array.from({ length: e }, () => ({
2238
- id: V(),
2239
- content: ""
2240
- }))
2241
- };
2242
- i("update", { rows: [...n.block.rows, t] });
2243
- }
2244
- function u(e) {
2245
- i("update", { rows: n.block.rows.filter((t) => t.id !== e) });
2246
- }
2247
- function d() {
2248
- i("update", { rows: n.block.rows.map((e) => ({
2249
- ...e,
2250
- cells: [...e.cells, {
2251
- id: V(),
2252
- content: ""
2253
- }]
2254
- })) });
2255
- }
2256
- function _(e) {
2257
- i("update", { rows: n.block.rows.map((t) => ({
2258
- ...t,
2259
- cells: t.cells.filter((t, n) => n !== e)
2260
- })) });
2261
- }
2262
- return (t, n) => (r(), m(E, null, [
2263
- S("div", Ha, [S("label", { class: x(g(G)) }, f(g(o).table.dimensions), 3), S("div", Ua, [S("div", Wa, [S("span", Ga, f(g(o).table.rows), 1), S("div", Ka, [
2264
- S("button", {
2265
- class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:duration-150 tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
2266
- disabled: e.block.rows.length <= 1,
2267
- onClick: n[0] ||= (t) => u(e.block.rows[e.block.rows.length - 1].id)
2268
- }, [k(g(U), {
2269
- size: 12,
2270
- "stroke-width": 2
2271
- })], 8, qa),
2272
- S("span", Ja, f(e.block.rows.length), 1),
2273
- S("button", {
2274
- class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:duration-150 tpl:hover:text-[var(--tpl-primary)]",
2275
- onClick: l
2276
- }, [k(g(H), {
2277
- size: 12,
2278
- "stroke-width": 2
2279
- })])
2280
- ])]), S("div", Ya, [S("span", Xa, f(g(o).table.columns), 1), S("div", Za, [
2281
- S("button", {
2282
- class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:duration-150 tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
2283
- disabled: s.value <= 1,
2284
- onClick: n[1] ||= (e) => _(s.value - 1)
2285
- }, [k(g(U), {
2286
- size: 12,
2287
- "stroke-width": 2
2288
- })], 8, Qa),
2289
- S("span", $a, f(s.value), 1),
2290
- S("button", {
2291
- class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:duration-150 tpl:hover:text-[var(--tpl-primary)]",
2292
- onClick: d
2293
- }, [k(g(H), {
2294
- size: 12,
2295
- "stroke-width": 2
2296
- })])
2297
- ])])])]),
2298
- S("div", eo, [S("label", to, [S("input", {
2299
- type: "checkbox",
2300
- checked: e.block.hasHeaderRow,
2301
- class: "tpl:accent-[var(--tpl-primary)]",
2302
- onChange: n[2] ||= (e) => c("hasHeaderRow", e.target.checked)
2303
- }, null, 40, no), D(" " + f(g(o).table.hasHeaderRow), 1)])]),
2304
- e.block.hasHeaderRow ? (r(), m("div", ro, [S("label", { class: x(g(G)) }, f(g(o).table.headerBackgroundColor), 3), k(J, {
2305
- "model-value": e.block.headerBackgroundColor || g("#f2f2f2"),
2306
- placeholder: g(o).table.noHeaderBg,
2307
- "onUpdate:modelValue": n[3] ||= (e) => c("headerBackgroundColor", e || null)
2308
- }, null, 8, ["model-value", "placeholder"])])) : h("", !0),
2309
- S("div", io, [S("label", { class: x(g(G)) }, f(g(o).table.borderColor), 3), k(J, {
2310
- "model-value": e.block.borderColor,
2311
- "onUpdate:modelValue": n[4] ||= (e) => c("borderColor", e)
2312
- }, null, 8, ["model-value"])]),
2313
- S("div", ao, [S("label", { class: x(g(G)) }, f(g(o).table.borderWidth), 3), S("div", oo, [S("input", {
2314
- type: "number",
2315
- class: x(g(q)),
2316
- value: e.block.borderWidth,
2317
- min: "0",
2318
- max: "10",
2319
- onInput: n[5] ||= (e) => c("borderWidth", Number(e.target.value))
2320
- }, null, 42, so), S("span", { class: x(g(K)) }, "px", 2)])]),
2321
- S("div", co, [S("label", { class: x(g(G)) }, f(g(o).table.cellPadding), 3), S("div", lo, [S("input", {
2322
- type: "number",
2323
- class: x(g(q)),
2324
- value: e.block.cellPadding,
2325
- min: "0",
2326
- max: "30",
2327
- onInput: n[6] ||= (e) => c("cellPadding", Number(e.target.value))
2328
- }, null, 42, uo), S("span", { class: x(g(K)) }, "px", 2)])]),
2329
- S("div", fo, [S("label", { class: x(g(G)) }, f(g(o).table.fontFamily), 3), S("select", {
2330
- class: x(g(W)),
2331
- value: e.block.fontFamily || "",
2332
- onChange: n[7] ||= (e) => c("fontFamily", e.target.value || void 0)
2333
- }, [S("option", mo, f(g(o).title.inheritFont), 1), (r(!0), m(E, null, a(e.fontFamilies, (e) => (r(), m("option", {
2334
- key: e.value,
2335
- value: e.value
2336
- }, f(e.label), 9, ho))), 128))], 42, po)]),
2337
- S("div", go, [S("label", { class: x(g(G)) }, f(g(o).table.fontSize), 3), S("div", _o, [S("input", {
2338
- type: "number",
2339
- class: x(g(q)),
2340
- value: e.block.fontSize,
2341
- min: "10",
2342
- max: "32",
2343
- onInput: n[8] ||= (e) => c("fontSize", Number(e.target.value))
2344
- }, null, 42, vo), S("span", { class: x(g(K)) }, "px", 2)])]),
2345
- S("div", yo, [S("label", { class: x(g(G)) }, f(g(o).table.color), 3), k(J, {
2346
- "model-value": e.block.color,
2347
- "onUpdate:modelValue": n[9] ||= (e) => c("color", e)
2348
- }, null, 8, ["model-value"])]),
2349
- S("div", bo, [S("label", { class: x(g(G)) }, f(g(o).table.textAlign), 3), k(X, {
2350
- options: [
2351
- {
2352
- value: "left",
2353
- label: g(o).title.alignLeft,
2354
- icon: g(lt)
2355
- },
2356
- {
2357
- value: "center",
2358
- label: g(o).title.alignCenter,
2359
- icon: g(nt)
2360
- },
2361
- {
2362
- value: "right",
2363
- label: g(o).title.alignRight,
2364
- icon: g(ut)
2365
- }
2366
- ],
2367
- "model-value": e.block.textAlign,
2368
- "onUpdate:modelValue": n[10] ||= (e) => c("textAlign", e)
2369
- }, null, 8, ["options", "model-value"])])
2370
- ], 64));
2371
- }
2372
- }), So = { class: "tpl:mb-3.5" }, Co = ["value"], wo = { value: 1 }, To = { value: 2 }, Eo = { value: 3 }, Do = { value: 4 }, Oo = { class: "tpl:mb-3.5" }, ko = ["value"], Ao = { value: "" }, jo = ["value"], Mo = { class: "tpl:mb-3.5" }, No = { class: "tpl:mb-3.5" }, Po = /* @__PURE__ */ O({
2373
- __name: "TitleToolbar",
2374
- props: {
2375
- block: {},
2376
- fontFamilies: {}
2377
- },
2378
- emits: ["update"],
2379
- setup(e, { emit: t }) {
2380
- let n = t, { t: i } = R();
2381
- function o(e, t) {
2382
- n("update", { [e]: t });
2383
- }
2384
- return (t, n) => (r(), m(E, null, [
2385
- S("div", So, [S("label", { class: x(g(G)) }, f(g(i).title.level), 3), S("select", {
2386
- class: x(g(W)),
2387
- value: e.block.level,
2388
- onChange: n[0] ||= (e) => o("level", Number(e.target.value))
2389
- }, [
2390
- S("option", wo, f(g(i).title.heading1), 1),
2391
- S("option", To, f(g(i).title.heading2), 1),
2392
- S("option", Eo, f(g(i).title.heading3), 1),
2393
- S("option", Do, f(g(i).title.heading4), 1)
2394
- ], 42, Co)]),
2395
- S("div", Oo, [S("label", { class: x(g(G)) }, f(g(i).title.fontFamily), 3), S("select", {
2396
- class: x(g(W)),
2397
- value: e.block.fontFamily || "",
2398
- onChange: n[1] ||= (e) => o("fontFamily", e.target.value || void 0)
2399
- }, [S("option", Ao, f(g(i).title.inheritFont), 1), (r(!0), m(E, null, a(e.fontFamilies, (e) => (r(), m("option", {
2400
- key: e.value,
2401
- value: e.value
2402
- }, f(e.label), 9, jo))), 128))], 42, ko)]),
2403
- S("div", Mo, [S("label", { class: x(g(G)) }, f(g(i).title.color), 3), k(J, {
2404
- "model-value": e.block.color,
2405
- "onUpdate:modelValue": n[2] ||= (e) => o("color", e)
2406
- }, null, 8, ["model-value"])]),
2407
- S("div", No, [S("label", { class: x(g(G)) }, f(g(i).title.align), 3), k(X, {
2408
- options: [
2409
- {
2410
- value: "left",
2411
- label: g(i).title.alignLeft,
2412
- icon: g(lt)
2413
- },
2414
- {
2415
- value: "center",
2416
- label: g(i).title.alignCenter,
2417
- icon: g(nt)
2418
- },
2419
- {
2420
- value: "right",
2421
- label: g(i).title.alignRight,
2422
- icon: g(ut)
2423
- }
2424
- ],
2425
- "model-value": e.block.textAlign,
2426
- "onUpdate:modelValue": n[3] ||= (e) => o("textAlign", e)
2427
- }, null, 8, ["options", "model-value"])])
2428
- ], 64));
2429
- }
2430
- }), Fo = { class: "tpl:mb-3.5" }, Io = {
2431
- key: 0,
2432
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
2433
- }, Lo = ["checked"], Ro = {
2434
- key: 0,
2435
- class: "tpl:mb-3.5"
2436
- }, zo = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, Bo = [
2437
- "value",
2438
- "placeholder",
2439
- "title"
2440
- ], Vo = { class: "tpl:mb-3.5" }, Ho = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, Uo = { class: "tpl:mb-3.5" }, Wo = { class: "tpl:mb-3.5" }, Go = ["value"], Ko = { value: "full" }, qo = { class: "tpl:mb-3.5" }, Jo = /* @__PURE__ */ O({
2441
- __name: "VideoToolbar",
2442
- props: { block: {} },
2443
- emits: ["update"],
2444
- setup(e, { emit: t }) {
2445
- let n = e, i = t, { t: a } = R(), s = o(z, null), c = o(Se, Ne.liquid), u = p(() => !!s), d = p(() => Me(n.block.url, c)), _ = l(!1), { start: v } = Be(() => {
2446
- _.value = !1;
2447
- }, 1e3, { immediate: !1 });
2448
- function y(e, t) {
2449
- i("update", { [e]: t });
2450
- }
2451
- async function b() {
2452
- let e = await s?.({ accept: ["images"] });
2453
- e && (y("thumbnailUrl", e.url), _.value = !0, v());
2454
- }
2455
- return (t, n) => (r(), m(E, null, [
2456
- S("div", Fo, [
2457
- S("label", { class: x(g(G)) }, f(g(a).video.videoUrl), 3),
2458
- k(Z, {
2459
- "model-value": e.block.url,
2460
- type: "url",
2461
- placeholder: g(a).video.videoUrlPlaceholder,
2462
- "onUpdate:modelValue": n[0] ||= (e) => y("url", e)
2463
- }, null, 8, ["model-value", "placeholder"]),
2464
- e.block.url ? (r(), m("label", Io, [S("input", {
2465
- type: "checkbox",
2466
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
2467
- checked: e.block.openInNewTab ?? !1,
2468
- onChange: n[1] ||= (e) => y("openInNewTab", e.target.checked)
2469
- }, null, 40, Lo), D(" " + f(g(a).video.openInNewTab), 1)])) : h("", !0)
2470
- ]),
2471
- d.value ? (r(), m("div", Ro, [S("label", { class: x(g(G)) }, [D(f(g(a).video.placeholderUrl) + " ", 1), S("span", zo, f(g(a).video.optional), 1)], 2), S("input", {
2472
- type: "url",
2473
- class: x(g(W)),
2474
- value: e.block.placeholderUrl || "",
2475
- placeholder: g(a).video.placeholderUrlPlaceholder,
2476
- title: g(a).video.placeholderUrlTooltip,
2477
- onInput: n[2] ||= (e) => y("placeholderUrl", e.target.value)
2478
- }, null, 42, Bo)])) : h("", !0),
2479
- S("div", Vo, [
2480
- S("label", { class: x(g(G)) }, [D(f(g(a).video.customThumbnail) + " ", 1), S("span", Ho, f(g(a).video.optional), 1)], 2),
2481
- k(Z, {
2482
- "model-value": e.block.thumbnailUrl,
2483
- type: "url",
2484
- placeholder: g(a).video.thumbnailPlaceholder,
2485
- pulse: _.value,
2486
- "onUpdate:modelValue": n[3] ||= (e) => y("thumbnailUrl", e)
2487
- }, null, 8, [
2488
- "model-value",
2489
- "placeholder",
2490
- "pulse"
2491
- ]),
2492
- u.value ? (r(), m("button", {
2493
- key: 0,
2494
- class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
2495
- style: {
2496
- "border-color": "var(--tpl-border)",
2497
- color: "var(--tpl-primary)",
2498
- "background-color": "var(--tpl-bg)"
2499
- },
2500
- onClick: b
2501
- }, [k(g(Ge), {
2502
- size: 14,
2503
- "stroke-width": 1.5
2504
- }), D(" " + f(g(a).image.browseMedia), 1)])) : h("", !0)
2505
- ]),
2506
- S("div", Uo, [S("label", { class: x(g(G)) }, f(g(a).video.altText), 3), k(Z, {
2507
- "model-value": e.block.alt,
2508
- type: "text",
2509
- placeholder: g(a).video.altTextPlaceholder,
2510
- "onUpdate:modelValue": n[4] ||= (e) => y("alt", e)
2511
- }, null, 8, ["model-value", "placeholder"])]),
2512
- S("div", Wo, [S("label", { class: x(g(G)) }, f(g(a).video.width), 3), S("select", {
2513
- class: x(g(W)),
2514
- value: e.block.width,
2515
- onChange: n[5] ||= (e) => y("width", e.target.value === "full" ? "full" : Number(e.target.value))
2516
- }, [
2517
- S("option", Ko, f(g(a).video.fullWidth), 1),
2518
- n[7] ||= S("option", { value: "300" }, "300px", -1),
2519
- n[8] ||= S("option", { value: "400" }, "400px", -1),
2520
- n[9] ||= S("option", { value: "500" }, "500px", -1)
2521
- ], 42, Go)]),
2522
- S("div", qo, [S("label", { class: x(g(G)) }, f(g(a).title.align), 3), k(X, {
2523
- options: [
2524
- {
2525
- value: "left",
2526
- label: g(a).title.alignLeft
2527
- },
2528
- {
2529
- value: "center",
2530
- label: g(a).title.alignCenter
2531
- },
2532
- {
2533
- value: "right",
2534
- label: g(a).title.alignRight
2535
- }
2536
- ],
2537
- "model-value": e.block.align,
2538
- "onUpdate:modelValue": n[6] ||= (e) => y("align", e)
2539
- }, null, 8, ["options", "model-value"])])
2540
- ], 64));
2541
- }
2542
- }), Yo = ["aria-label"], Xo = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3.5" }, Zo = { class: "tpl:flex tpl:items-center tpl:gap-2 tpl:text-[var(--tpl-primary)]" }, Qo = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, $o = { class: "tpl:flex tpl:gap-1" }, es = ["title"], ts = ["title"], ns = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, rs = /* @__PURE__ */ B(/* @__PURE__ */ O({
2543
- __name: "Toolbar",
2544
- props: { block: {} },
2545
- emits: [
2546
- "update",
2547
- "delete",
2548
- "duplicate"
2549
- ],
2550
- setup(e, { emit: t }) {
2551
- let i = u(() => import("./CountdownToolbar-CbIKGP7u.js")), a = e, s = t, { t: c } = R(), l = ze(L, "Toolbar"), d = o(F, []), _ = p(() => a.block.type), y = p(() => M(a.block)), b = p(() => {
2552
- if (y.value) return d.find((e) => e.type === a.block.customType);
2553
- }), x = p(() => y.value ? b.value?.name ?? a.block.customType : de(_.value, c)), C = l.fonts;
2554
- function w(e) {
2555
- s("update", e);
2556
- }
2557
- return (t, a) => (r(), m("aside", {
2558
- "aria-label": g(c).landmarks.blockToolbar,
2559
- class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]"
2560
- }, [S("div", Xo, [S("div", Zo, [g(gt)[_.value] ? (r(), v(n(g(gt)[_.value]), {
2561
- key: 0,
2562
- size: 16,
2563
- "stroke-width": 1.5
2564
- })) : y.value ? (r(), v(g(He), {
2565
- key: 1,
2566
- size: 16,
2567
- "stroke-width": 1.5
2568
- })) : h("", !0), S("h3", Qo, f(x.value), 1)]), S("div", $o, [S("button", {
2569
- class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)] tpl:hover:text-[var(--tpl-text)]",
2570
- title: g(c).toolbar.duplicate,
2571
- onClick: a[0] ||= (e) => s("duplicate")
2572
- }, [k(g(te), {
2573
- size: 14,
2574
- "stroke-width": 2
2575
- })], 8, es), S("button", {
2576
- class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
2577
- title: g(c).toolbar.delete,
2578
- onClick: a[1] ||= (e) => s("delete")
2579
- }, [k(g(Re), {
2580
- size: 14,
2581
- "stroke-width": 2
2582
- })], 8, ts)])]), S("div", ns, [y.value ? (r(), v(Ai, {
2583
- key: 0,
2584
- block: e.block,
2585
- onUpdateFieldValues: a[2] ||= (e) => s("update", { fieldValues: e }),
2586
- onUpdateDataSourceFetched: a[3] ||= (e) => s("update", { dataSourceFetched: e })
2587
- }, null, 8, ["block"])) : _.value === "section" ? (r(), v(_a, {
2588
- key: 1,
2589
- block: e.block,
2590
- onUpdate: w
2591
- }, null, 8, ["block"])) : _.value === "title" ? (r(), v(Po, {
2592
- key: 2,
2593
- block: e.block,
2594
- "font-families": g(C),
2595
- onUpdate: w
2596
- }, null, 8, ["block", "font-families"])) : _.value === "paragraph" ? (r(), m(E, { key: 3 }, [], 64)) : _.value === "image" ? (r(), v(ta, {
2597
- key: 4,
2598
- block: e.block,
2599
- onUpdate: w
2600
- }, null, 8, ["block"])) : _.value === "video" ? (r(), v(Jo, {
2601
- key: 5,
2602
- block: e.block,
2603
- onUpdate: w
2604
- }, null, 8, ["block"])) : _.value === "button" ? (r(), v(tr, {
2605
- key: 6,
2606
- block: e.block,
2607
- "font-families": g(C),
2608
- onUpdate: w
2609
- }, null, 8, ["block", "font-families"])) : _.value === "divider" ? (r(), v(Ii, {
2610
- key: 7,
2611
- block: e.block,
2612
- onUpdate: w
2613
- }, null, 8, ["block"])) : _.value === "social" ? (r(), v(Ia, {
2614
- key: 8,
2615
- block: e.block,
2616
- onUpdate: w
2617
- }, null, 8, ["block"])) : _.value === "menu" ? (r(), v(pa, {
2618
- key: 9,
2619
- block: e.block,
2620
- "font-families": g(C),
2621
- onUpdate: w
2622
- }, null, 8, ["block", "font-families"])) : _.value === "table" ? (r(), v(xo, {
2623
- key: 10,
2624
- block: e.block,
2625
- "font-families": g(C),
2626
- onUpdate: w
2627
- }, null, 8, ["block", "font-families"])) : _.value === "spacer" ? (r(), v(Va, {
2628
- key: 11,
2629
- block: e.block,
2630
- onUpdate: w
2631
- }, null, 8, ["block"])) : _.value === "html" ? (r(), v(Bi, {
2632
- key: 12,
2633
- block: e.block,
2634
- onUpdate: w
2635
- }, null, 8, ["block"])) : _.value === "countdown" ? (r(), v(g(i), {
2636
- key: 13,
2637
- block: e.block,
2638
- "font-families": g(C),
2639
- onUpdate: w
2640
- }, null, 8, ["block", "font-families"])) : h("", !0), k(qr, {
2641
- block: e.block,
2642
- "is-first-section": _.value === "paragraph",
2643
- onUpdate: w
2644
- }, null, 8, ["block", "is-first-section"])])], 8, Yo));
2645
- }
2646
- }), [["__scopeId", "data-v-2ac88283"]]), is = ["aria-label"], as = {
2647
- role: "tablist",
2648
- class: "tpl:relative tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-active)] tpl:p-1.5"
2649
- }, os = [
2650
- "aria-selected",
2651
- "aria-label",
2652
- "title"
2653
- ], ss = { key: 0 }, cs = [
2654
- "aria-selected",
2655
- "aria-label",
2656
- "title"
2657
- ], ls = { key: 0 }, us = [
2658
- "aria-selected",
2659
- "aria-label",
2660
- "title"
2661
- ], ds = { key: 0 }, fs = {
2662
- key: 1,
2663
- class: "tpl:ml-1 tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-1.5 tpl:text-[10px]"
2664
- }, ps = {
2665
- key: 0,
2666
- id: "tpl-tabpanel-content",
2667
- role: "tabpanel",
2668
- "aria-labelledby": "tpl-tab-content",
2669
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
2670
- }, ms = {
2671
- key: 1,
2672
- class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:px-6 tpl:py-10 tpl:text-center tpl:text-[var(--tpl-text-muted)]"
2673
- }, hs = { class: "tpl:mb-4 tpl:text-[var(--tpl-text-dim)]" }, gs = { class: "tpl:m-0 tpl:mb-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, _s = { class: "tpl:m-0 tpl:text-sm tpl:leading-normal" }, vs = {
2674
- key: 1,
2675
- id: "tpl-tabpanel-settings",
2676
- role: "tabpanel",
2677
- "aria-labelledby": "tpl-tab-settings",
2678
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
2679
- }, ys = {
2680
- key: 2,
2681
- id: "tpl-tabpanel-accessibility",
2682
- role: "tabpanel",
2683
- "aria-labelledby": "tpl-tab-accessibility",
2684
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
2685
- }, bs = /* @__PURE__ */ O({
2686
- __name: "RightSidebar",
2687
- props: {
2688
- selectedBlock: {},
2689
- settings: {},
2690
- shiftedLeft: { type: Boolean }
2691
- },
2692
- emits: [
2693
- "update-block",
2694
- "delete-block",
2695
- "duplicate-block",
2696
- "update-settings"
2697
- ],
2698
- setup(e, { emit: t }) {
2699
- let n = u(() => import("./AccessibilityPanel-DaqF4Xzy.js")), i = e, a = t, { t: s } = R(), c = l("content"), d = o(ne, null), _ = p(() => d !== null), y = p(() => d?.issues.value.length ?? 0);
2700
- function b(e) {
2701
- return c.value === e ? "tpl:flex-1 tpl:text-[var(--tpl-primary)]" : "tpl:shrink-0 tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]";
2702
- }
2703
- function C(e) {
2704
- return c.value === e ? {
2705
- backgroundColor: "var(--tpl-bg)",
2706
- boxShadow: "var(--tpl-shadow-md)"
2707
- } : { backgroundColor: "transparent" };
2708
- }
2709
- return A(() => i.selectedBlock, (e) => {
2710
- e && (c.value = "content");
2711
- }), (t, i) => (r(), m("aside", {
2712
- "aria-label": g(s).landmarks.rightSidebar,
2713
- class: x(["tpl-right-sidebar tpl:absolute tpl:top-14 tpl:bottom-0 tpl:z-40 tpl:flex tpl:w-[320px] tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)] tpl:transition-all tpl:duration-200 tpl:border-l tpl:border-[var(--tpl-border)]", e.shiftedLeft ? "tpl:right-[360px]" : "tpl:right-0"])
2714
- }, [
2715
- S("div", as, [
2716
- S("button", {
2717
- id: "tpl-tab-content",
2718
- role: "tab",
2719
- "aria-selected": c.value === "content",
2720
- "aria-controls": "tpl-tabpanel-content",
2721
- "aria-label": g(s).sidebar.content,
2722
- title: g(s).sidebar.content,
2723
- class: x(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", b("content")]),
2724
- style: w(C("content")),
2725
- onClick: i[0] ||= (e) => c.value = "content"
2726
- }, [k(g(st), {
2727
- size: 14,
2728
- "stroke-width": 2
2729
- }), c.value === "content" ? (r(), m("span", ss, f(g(s).sidebar.content), 1)) : h("", !0)], 14, os),
2730
- S("button", {
2731
- id: "tpl-tab-settings",
2732
- role: "tab",
2733
- "aria-selected": c.value === "settings",
2734
- "aria-controls": "tpl-tabpanel-settings",
2735
- "aria-label": g(s).sidebar.settings,
2736
- title: g(s).sidebar.settings,
2737
- class: x(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", b("settings")]),
2738
- style: w(C("settings")),
2739
- onClick: i[1] ||= (e) => c.value = "settings"
2740
- }, [k(g(pt), {
2741
- size: 14,
2742
- "stroke-width": 1.5
2743
- }), c.value === "settings" ? (r(), m("span", ls, f(g(s).sidebar.settings), 1)) : h("", !0)], 14, cs),
2744
- _.value ? (r(), m("button", {
2745
- key: 0,
2746
- id: "tpl-tab-accessibility",
2747
- role: "tab",
2748
- "aria-selected": c.value === "accessibility",
2749
- "aria-controls": "tpl-tabpanel-accessibility",
2750
- "aria-label": g(s).accessibility.panelTabLabel,
2751
- title: g(s).accessibility.panelTabLabel,
2752
- class: x(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", b("accessibility")]),
2753
- style: w(C("accessibility")),
2754
- onClick: i[2] ||= (e) => c.value = "accessibility"
2755
- }, [
2756
- k(g($e), {
2757
- size: 14,
2758
- "stroke-width": 1.5
2759
- }),
2760
- c.value === "accessibility" ? (r(), m("span", ds, f(g(s).accessibility.panelTabLabel), 1)) : h("", !0),
2761
- y.value > 0 ? (r(), m("span", fs, f(y.value), 1)) : h("", !0)
2762
- ], 14, us)) : h("", !0)
2763
- ]),
2764
- c.value === "content" ? (r(), m("div", ps, [e.selectedBlock ? (r(), v(rs, {
2765
- key: 0,
2766
- block: e.selectedBlock,
2767
- onUpdate: i[3] ||= (e) => a("update-block", e),
2768
- onDelete: i[4] ||= (e) => a("delete-block"),
2769
- onDuplicate: i[5] ||= (e) => a("duplicate-block")
2770
- }, null, 8, ["block"])) : (r(), m("div", ms, [
2771
- S("div", hs, [k(g(et), {
2772
- size: 40,
2773
- "stroke-width": 1.5
2774
- })]),
2775
- S("h3", gs, f(g(s).sidebar.noSelection), 1),
2776
- S("p", _s, f(g(s).sidebar.noSelectionHint), 1)
2777
- ]))])) : h("", !0),
2778
- c.value === "settings" ? (r(), m("div", vs, [k(Mn, {
2779
- settings: e.settings,
2780
- onUpdate: i[6] ||= (e) => a("update-settings", e)
2781
- }, null, 8, ["settings"])])) : h("", !0),
2782
- c.value === "accessibility" && _.value ? (r(), m("div", ys, [k(g(n))])) : h("", !0)
2783
- ], 10, is));
2784
- }
2785
- }), xs = ["aria-label"], Ss = [
2786
- "aria-checked",
2787
- "aria-label",
2788
- "title",
2789
- "onClick"
2790
- ], Cs = /* @__PURE__ */ O({
2791
- __name: "ViewportToggle",
2792
- props: { viewport: {} },
2793
- emits: ["change"],
2794
- setup(e, { emit: t }) {
2795
- let n = e, i = t, { t: o } = R(), s = p(() => [
2796
- {
2797
- value: "desktop",
2798
- label: o.viewport.desktop
2799
- },
2800
- {
2801
- value: "tablet",
2802
- label: o.viewport.tablet
2803
- },
2804
- {
2805
- value: "mobile",
2806
- label: o.viewport.mobile
2807
- }
2808
- ]), c = p(() => `translateX(${s.value.findIndex((e) => e.value === n.viewport) * 100}%)`);
2809
- return (t, n) => (r(), m("div", {
2810
- role: "radiogroup",
2811
- "aria-label": g(o).viewport.label,
2812
- class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
2813
- style: w({
2814
- gridTemplateColumns: `repeat(${s.value.length}, 1fr)`,
2815
- backgroundColor: "var(--tpl-bg-hover)"
2816
- })
2817
- }, [S("div", {
2818
- class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
2819
- style: w({
2820
- left: "4px",
2821
- width: `calc((100% - 8px) / ${s.value.length})`,
2822
- transform: c.value,
2823
- backgroundColor: "var(--tpl-bg)",
2824
- boxShadow: "var(--tpl-shadow)",
2825
- transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
2826
- })
2827
- }, null, 4), (r(!0), m(E, null, a(s.value, (t) => (r(), m("button", {
2828
- key: t.value,
2829
- role: "radio",
2830
- "aria-checked": e.viewport === t.value,
2831
- "aria-label": t.label,
2832
- class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium",
2833
- style: w({
2834
- color: e.viewport === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
2835
- transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
2836
- }),
2837
- title: t.label,
2838
- onClick: (e) => i("change", t.value)
2839
- }, [t.value === "desktop" ? (r(), v(g(Qe), {
2840
- key: 0,
2841
- size: 18,
2842
- "stroke-width": 1.5
2843
- })) : t.value === "tablet" ? (r(), v(g(ct), {
2844
- key: 1,
2845
- size: 18,
2846
- "stroke-width": 1.5
2847
- })) : (r(), v(g(dt), {
2848
- key: 2,
2849
- size: 18,
2850
- "stroke-width": 1.5
2851
- })), S("span", null, f(t.label), 1)], 12, Ss))), 128))], 12, xs));
2852
- }
2853
- }), ws = [
2854
- "aria-label",
2855
- "title",
2856
- "aria-pressed"
2857
- ], Ts = /* @__PURE__ */ B(/* @__PURE__ */ O({
2858
- __name: "PreviewToggle",
2859
- props: { previewMode: { type: Boolean } },
2860
- emits: ["change"],
2861
- setup(e, { emit: t }) {
2862
- let n = t, { t: i } = R();
2863
- return (t, a) => (r(), m("button", {
2864
- class: "tpl-preview-toggle tpl:relative tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:p-2 tpl:transition-all tpl:duration-150",
2865
- style: w({
2866
- color: e.previewMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
2867
- backgroundColor: e.previewMode ? "var(--tpl-primary-light)" : "transparent"
2868
- }),
2869
- "aria-label": e.previewMode ? g(i).previewMode.disable : g(i).previewMode.enable,
2870
- title: e.previewMode ? g(i).previewMode.disable : g(i).previewMode.enable,
2871
- "aria-pressed": e.previewMode,
2872
- onClick: a[0] ||= (t) => n("change", !e.previewMode)
2873
- }, [k(y, {
2874
- "enter-active-class": "tpl-icon-enter-active",
2875
- "leave-active-class": "tpl-icon-leave-active",
2876
- "enter-from-class": "tpl-icon-enter-from",
2877
- "leave-to-class": "tpl-icon-leave-to",
2878
- mode: "out-in"
2879
- }, {
2880
- default: s(() => [e.previewMode ? (r(), v(g(Ue), {
2881
- key: "eye",
2882
- size: 18,
2883
- "stroke-width": 1.5
2884
- })) : (r(), v(g(ge), {
2885
- key: "eye-off",
2886
- size: 18,
2887
- "stroke-width": 1.5
2888
- }))]),
2889
- _: 1
2890
- })], 12, ws));
2891
- }
2892
- }), [["__scopeId", "data-v-af87d02a"]]), Es = [
2893
- "aria-label",
2894
- "title",
2895
- "aria-pressed"
2896
- ], Ds = /* @__PURE__ */ B(/* @__PURE__ */ O({
2897
- __name: "DarkModeToggle",
2898
- props: { darkMode: { type: Boolean } },
2899
- emits: ["change"],
2900
- setup(e, { emit: t }) {
2901
- let n = t, { t: i } = R();
2902
- return (t, a) => (r(), m("button", {
2903
- class: "tpl-dark-mode-toggle tpl:relative tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:p-2 tpl:transition-all tpl:duration-150",
2904
- style: w({
2905
- color: e.darkMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
2906
- backgroundColor: e.darkMode ? "var(--tpl-primary-light)" : "transparent"
2907
- }),
2908
- "aria-label": e.darkMode ? g(i).darkMode.disable : g(i).darkMode.enable,
2909
- title: e.darkMode ? g(i).darkMode.disable : g(i).darkMode.enable,
2910
- "aria-pressed": e.darkMode,
2911
- onClick: a[0] ||= (t) => n("change", !e.darkMode)
2912
- }, [k(y, {
2913
- "enter-active-class": "tpl-icon-enter-active",
2914
- "leave-active-class": "tpl-icon-leave-active",
2915
- "enter-from-class": "tpl-icon-enter-from",
2916
- "leave-to-class": "tpl-icon-leave-to",
2917
- mode: "out-in"
2918
- }, {
2919
- default: s(() => [e.darkMode ? (r(), v(g(Ze), {
2920
- key: "moon",
2921
- size: 18,
2922
- "stroke-width": 1.5
2923
- })) : (r(), v(g(rt), {
2924
- key: "sun",
2925
- size: 18,
2926
- "stroke-width": 1.5
2927
- }))]),
2928
- _: 1
2929
- })], 12, Es));
2930
- }
2931
- }), [["__scopeId", "data-v-f8694f76"]]), Os = {
2932
- class: "tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1",
2933
- style: {
2934
- "background-color": "color-mix(\n in srgb,\n var(--tpl-canvas-bg) 85%,\n transparent\n )",
2935
- "backdrop-filter": "blur(8px)",
2936
- "-webkit-backdrop-filter": "blur(8px)"
2937
- }
2938
- }, ks = {
2939
- href: "https://github.com/templatical/sdk",
2940
- target: "_blank",
2941
- rel: "noopener noreferrer",
2942
- class: "tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]",
2943
- style: { "text-decoration": "none" }
2944
- }, As = /* @__PURE__ */ O({
2945
- __name: "EditorFooter",
2946
- props: { positionClass: {} },
2947
- setup(e) {
2948
- let { t } = R();
2949
- return (n, i) => (r(), m("footer", { class: x(["tpl:pointer-events-none tpl:absolute tpl:bottom-0 tpl:z-50 tpl:flex tpl:h-8 tpl:items-center tpl:justify-end tpl:pr-4 tpl:text-[9px] tpl:opacity-90 tpl:transition-all tpl:duration-300 tpl:text-[var(--tpl-text-dim)]", e.positionClass]) }, [S("div", Os, [
2950
- S("span", null, f(g(t).footer.poweredBy), 1),
2951
- i[0] ||= S("a", {
2952
- href: "https://templatical.com",
2953
- target: "_blank",
2954
- rel: "noopener noreferrer",
2955
- class: "tpl:inline-flex tpl:items-center tpl:gap-1 tpl:font-medium tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-muted)]",
2956
- style: { "text-decoration": "none" }
2957
- }, [S("img", {
2958
- width: "14",
2959
- height: "14",
2960
- src: "https://templatical.com/logo.svg",
2961
- alt: ""
2962
- }), D(" Templatical ")], -1),
2963
- i[1] ||= S("span", { class: "tpl:text-[var(--tpl-border)]" }, "·", -1),
2964
- S("a", ks, f(g(t).footer.openSource), 1)
2965
- ])], 2));
2966
- }
2967
- });
2968
- //#endregion
2969
- export { bs as a, Ct as c, Cs as i, Ds as n, Ht as o, Ts as r, Nt as s, As as t };
2970
-
2971
- //# sourceMappingURL=styles-BRN0i_zg.js.map