@templatical/editor 0.0.3 → 0.0.5

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 (144) hide show
  1. package/dist/{AiChatSidebar-busJk9hm.js → AiChatSidebar-DwME3f-a.js} +84 -70
  2. package/dist/{AiFeatureMenu-DLGv_-pj.js → AiFeatureMenu-DJvWL1GZ.js} +23 -23
  3. package/dist/CloudEditor-Fe0ssRgi.js +1082 -0
  4. package/dist/{CollaboratorBar-Dv3l52vC.js → CollaboratorBar-DTT0EkZn.js} +25 -21
  5. package/dist/{CommentsSidebar-4tjp0VU5.js → CommentsSidebar-DrJhQRXK.js} +131 -131
  6. package/dist/{DesignReferenceSidebar-CmwXvltV.js → DesignReferenceSidebar-DdOht5zn.js} +49 -49
  7. package/dist/ModuleBrowserModal-CiV_jOEM.js +205 -0
  8. package/dist/{ModulePreviewCanvas-BcBJLnwL.js → ModulePreviewCanvas-Bmy6Y1WE.js} +2 -2
  9. package/dist/ParagraphEditor-CoQ3NlS7.js +688 -0
  10. package/dist/{RichTextEditorContent-CQqodi7p.js → RichTextEditorContent-CHJlh7HJ.js} +8 -4
  11. package/dist/{SaveModuleDialog-Bmzi72td.js → SaveModuleDialog-CD2ZYq1o.js} +25 -25
  12. package/dist/{SnapshotHistory-AEgi9Xsn.js → SnapshotHistory-DltsKvhP.js} +2 -2
  13. package/dist/TemplateScoringPanel-DmnmUE3y.js +254 -0
  14. package/dist/{TestEmailModal-Dpq1is9S.js → TestEmailModal-Dl633j9o.js} +3 -3
  15. package/dist/{TitleEditor-CLcDdcWI.js → TitleEditor-C7fds2Nc.js} +7 -7
  16. package/dist/{TplModal-CGzRjR96.js → TplModal-C5_CF-qn.js} +2 -2
  17. package/dist/{blockTypeIcons-BpPTqcok.js → blockTypeIcons-BrKZB10B.js} +1 -1
  18. package/dist/cdn/chunks/AiChatSidebar-X_Bv3Qys.js +2 -0
  19. package/dist/cdn/chunks/AiFeatureMenu-C5UQmEgV.js +59 -0
  20. package/dist/cdn/chunks/AiFeatureMenu-C5UQmEgV.js.map +1 -0
  21. package/dist/cdn/chunks/CloudEditor-DeTolKnf.js +1056 -0
  22. package/dist/cdn/chunks/CloudEditor-DeTolKnf.js.map +1 -0
  23. package/dist/cdn/chunks/CollaboratorBar-DO1nxSrr.js +51 -0
  24. package/dist/cdn/chunks/CollaboratorBar-DO1nxSrr.js.map +1 -0
  25. package/dist/cdn/chunks/CommentsSidebar-4MTw_hue.js +2 -0
  26. package/dist/cdn/chunks/DesignReferenceSidebar-Bswh4Yx4.js +2 -0
  27. package/dist/{ModuleBrowserModal-lrk3Fr0H.js → cdn/chunks/ModuleBrowserModal-ChBr3aXj.js} +52 -62
  28. package/dist/cdn/chunks/ModuleBrowserModal-ChBr3aXj.js.map +1 -0
  29. package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js +107 -0
  30. package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js.map +1 -0
  31. package/dist/cdn/chunks/ParagraphEditor-DU3oUKA7.js +539 -0
  32. package/dist/cdn/chunks/ParagraphEditor-DU3oUKA7.js.map +1 -0
  33. package/dist/cdn/chunks/RichTextEditorContent-BrsW1p9s.js +106 -0
  34. package/dist/cdn/chunks/RichTextEditorContent-BrsW1p9s.js.map +1 -0
  35. package/dist/cdn/chunks/SaveModuleDialog-CjqKkTEc.js +119 -0
  36. package/dist/cdn/chunks/SaveModuleDialog-CjqKkTEc.js.map +1 -0
  37. package/dist/cdn/chunks/SnapshotHistory-KME4xmn_.js +2 -0
  38. package/dist/cdn/chunks/TemplateScoringPanel-DgB3xDN6.js +2 -0
  39. package/dist/cdn/chunks/TestEmailModal-DdpvRbYf.js +2 -0
  40. package/dist/cdn/chunks/TitleEditor-C8FYbadT.js +166 -0
  41. package/dist/cdn/chunks/TitleEditor-C8FYbadT.js.map +1 -0
  42. package/dist/cdn/chunks/_rolldown_dynamic_import_helper-DMEI4TQ3.js +9 -0
  43. package/dist/cdn/chunks/blockTypeIcons-5QwYklNq.js +22 -0
  44. package/dist/cdn/chunks/blockTypeIcons-5QwYklNq.js.map +1 -0
  45. package/dist/cdn/chunks/de-BB3dgVOc.js +700 -0
  46. package/dist/cdn/chunks/de-BB3dgVOc.js.map +1 -0
  47. package/dist/cdn/chunks/de-BvYD17KT.js +89 -0
  48. package/dist/cdn/chunks/de-BvYD17KT.js.map +1 -0
  49. package/dist/cdn/chunks/dist-BF5c3Dr-.js +2 -0
  50. package/dist/cdn/chunks/dist-BGzvIxcJ.js +2 -0
  51. package/dist/cdn/chunks/dist-CFemF8rI.js +2 -0
  52. package/dist/cdn/chunks/dist-Co6uFhFK.js +2 -0
  53. package/dist/cdn/chunks/dist-DCikBY9K.js +2 -0
  54. package/dist/cdn/chunks/dist-DUILafAC.js +2 -0
  55. package/dist/cdn/chunks/dist-DghiKH0A.js +2 -0
  56. package/dist/cdn/chunks/dist-Dw8ckvfK.js +2 -0
  57. package/dist/cdn/chunks/dist-H07p0KAw.js +2 -0
  58. package/dist/cdn/chunks/dist-KYv9v_1z2.js +457 -0
  59. package/dist/cdn/chunks/dist-KYv9v_1z2.js.map +1 -0
  60. package/dist/cdn/chunks/dist-MjnKIc0W.js +2 -0
  61. package/dist/cdn/chunks/dist-odp0vGRv.js +2 -0
  62. package/dist/cdn/chunks/draggable-BQNU47zu.js +11544 -0
  63. package/dist/cdn/chunks/{draggable-ClUwYCFL.js.map → draggable-BQNU47zu.js.map} +1 -1
  64. package/dist/cdn/chunks/emojiData-BVEJHcNH.js +19 -0
  65. package/dist/cdn/chunks/{emojiData-6fVLNqeH.js.map → emojiData-BVEJHcNH.js.map} +1 -1
  66. package/dist/cdn/chunks/en-CpotcOPr.js +89 -0
  67. package/dist/cdn/chunks/en-CpotcOPr.js.map +1 -0
  68. package/dist/cdn/chunks/en-DeDcpnoS.js +700 -0
  69. package/dist/cdn/chunks/en-DeDcpnoS.js.map +1 -0
  70. package/dist/cdn/chunks/extensions-Bj7USRLr.js +419 -0
  71. package/dist/cdn/chunks/{extensions-ea_ewKUl.js.map → extensions-Bj7USRLr.js.map} +1 -1
  72. package/dist/cdn/chunks/features-Ds0XUfte.js +6737 -0
  73. package/dist/cdn/chunks/features-Ds0XUfte.js.map +1 -0
  74. package/dist/cdn/chunks/icons-fWsuSvgd.js +653 -0
  75. package/dist/cdn/chunks/icons-fWsuSvgd.js.map +1 -0
  76. package/dist/cdn/chunks/liquid.browser-C1VIYISn.js +3272 -0
  77. package/dist/cdn/chunks/liquid.browser-C1VIYISn.js.map +1 -0
  78. package/dist/cdn/chunks/media-library-BGQm_OyC.js +6005 -0
  79. package/dist/cdn/chunks/media-library-BGQm_OyC.js.map +1 -0
  80. package/dist/cdn/chunks/pusher-DJPhQnE8.js +2505 -0
  81. package/dist/cdn/chunks/pusher-DJPhQnE8.js.map +1 -0
  82. package/dist/cdn/chunks/readableTextColor-Cd_cgWO_.js +32 -0
  83. package/dist/cdn/chunks/readableTextColor-Cd_cgWO_.js.map +1 -0
  84. package/dist/cdn/chunks/rolldown-runtime-DPITmOBR.js +20 -0
  85. package/dist/cdn/chunks/src-3i8rPuqd.js +494 -0
  86. package/dist/cdn/chunks/src-3i8rPuqd.js.map +1 -0
  87. package/dist/cdn/chunks/styleConstants-DFe3I4Op.js +57 -0
  88. package/dist/cdn/chunks/{styleConstants-CNejCb-L.js.map → styleConstants-DFe3I4Op.js.map} +1 -1
  89. package/dist/cdn/chunks/styles-Dgijy53u.js +3350 -0
  90. package/dist/cdn/chunks/styles-Dgijy53u.js.map +1 -0
  91. package/dist/cdn/chunks/tiptap-BhxaWR8R.js +14208 -0
  92. package/dist/cdn/chunks/{tiptap-Cya4P9CN.js.map → tiptap-BhxaWR8R.js.map} +1 -1
  93. package/dist/cdn/editor.css +2 -1
  94. package/dist/cdn/editor.js +231 -1
  95. package/dist/cdn/editor.js.map +1 -1
  96. package/dist/{de-B4Ob4vCo.js → de-D7TLGIPA.js} +20 -4
  97. package/dist/{dist-DmpMJbmZ.js → dist-Ci5lFuUy.js} +1 -1
  98. package/dist/{en-YXsspZJG.js → en-DvtiEMwP.js} +20 -4
  99. package/dist/{extensions-CKM99njP.js → extensions-DWx_jj8v.js} +3 -3
  100. package/dist/{keys-Dwa2PmdD.js → keys-C0MQRs8d.js} +3 -3
  101. package/dist/readableTextColor-LDlmVEUv.js +30 -0
  102. package/dist/{styleConstants-D4SOZGBV.js → styleConstants-Cxw88naD.js} +5 -5
  103. package/dist/styles-fdXNRqI3.js +3556 -0
  104. package/dist/templatical-editor.css +1 -1
  105. package/dist/templatical-editor.js +122 -128
  106. package/dist/templatical-editor.umd.cjs +62 -71
  107. package/dist/{useEditorCore-Cc4RCwWq.js → useEditorCore-DUGD6pq_.js} +1247 -1088
  108. package/dist/{useI18n-DUirdXEX.js → useI18n-D6m7ZUgY.js} +1 -1
  109. package/dist/{useMergeTag-DVnlvPYJ.js → useMergeTag-BZ3X0bNr.js} +1 -1
  110. package/package.json +4 -2
  111. package/dist/CloudEditor-BDnHd6Um.js +0 -919
  112. package/dist/ParagraphEditor-DH8cSC6m.js +0 -625
  113. package/dist/TemplateScoringPanel-CTgMtc0-.js +0 -249
  114. package/dist/cdn/chunks/ParagraphEditor-CCtWbGDv.js +0 -3
  115. package/dist/cdn/chunks/ParagraphEditor-CCtWbGDv.js.map +0 -1
  116. package/dist/cdn/chunks/RichTextEditorContent-BUD9veXd.js +0 -2
  117. package/dist/cdn/chunks/RichTextEditorContent-BUD9veXd.js.map +0 -1
  118. package/dist/cdn/chunks/TitleEditor-e_UTyxjd.js +0 -3
  119. package/dist/cdn/chunks/TitleEditor-e_UTyxjd.js.map +0 -1
  120. package/dist/cdn/chunks/dist-0UheN8rK.js +0 -1
  121. package/dist/cdn/chunks/dist-55mmbGQ9.js +0 -1
  122. package/dist/cdn/chunks/dist-B31mxKyP.js +0 -1
  123. package/dist/cdn/chunks/dist-B5JI9nIg.js +0 -1
  124. package/dist/cdn/chunks/dist-B93vLKhU.js +0 -1
  125. package/dist/cdn/chunks/dist-BDt3FJvj.js +0 -1
  126. package/dist/cdn/chunks/dist-BJRuFHmi.js +0 -1
  127. package/dist/cdn/chunks/dist-BKSzrf0L.js +0 -1
  128. package/dist/cdn/chunks/dist-BL8c5gYQ.js +0 -1
  129. package/dist/cdn/chunks/dist-CYThWMP5.js +0 -1
  130. package/dist/cdn/chunks/dist-DxZbPJYt.js +0 -1
  131. package/dist/cdn/chunks/draggable-ClUwYCFL.js +0 -17
  132. package/dist/cdn/chunks/emojiData-6fVLNqeH.js +0 -2
  133. package/dist/cdn/chunks/extensions-ea_ewKUl.js +0 -2
  134. package/dist/cdn/chunks/icons-vmLJTaJk.js +0 -2
  135. package/dist/cdn/chunks/icons-vmLJTaJk.js.map +0 -1
  136. package/dist/cdn/chunks/rolldown-runtime-BakkzWXw.js +0 -1
  137. package/dist/cdn/chunks/styleConstants-CNejCb-L.js +0 -2
  138. package/dist/cdn/chunks/tiptap-Cya4P9CN.js +0 -145
  139. package/dist/cdn/chunks/useEditorCore-CwuxQuvh.js +0 -2
  140. package/dist/cdn/chunks/useEditorCore-CwuxQuvh.js.map +0 -1
  141. package/dist/cdn/chunks/useMergeTag-DVOz1v9p.js +0 -2
  142. package/dist/cdn/chunks/useMergeTag-DVOz1v9p.js.map +0 -1
  143. package/dist/i18n-CJsFtdbZ.js +0 -23
  144. package/dist/styles-DSw1VNU3.js +0 -3406
@@ -1,3406 +0,0 @@
1
- import { A as e, I as t, M as n, N as r, P as i, T as a, _ as o, a as s, c, d as l, g as u, h as d, i as f, j as p, k as m, l as h, m as ee, n as te, o as ne, p as re, r as ie, s as ae, u as oe, v as se, y as ce } from "./useEditorCore-Cc4RCwWq.js";
2
- import { s as le, t as ue } from "./dist-CG-vEqSU.js";
3
- import { _ as de, a as fe, d as pe, f as me, g as he, l as ge, n as _e, o as ve, p as ye, s as be, u as g, w as xe } from "./keys-Dwa2PmdD.js";
4
- import { t as _ } from "./useI18n-DUirdXEX.js";
5
- import { n as v, t as y } from "./_plugin-vue_export-helper-B1-bu7yR.js";
6
- import { t as Se } from "./chevron-down-DJLW2Q9Z.js";
7
- import { t as Ce } from "./circle-alert-E2vYPs5r.js";
8
- import { n as we, r as b, t as Te } from "./blockTypeIcons-BpPTqcok.js";
9
- import { n as Ee, r as De, t as Oe } from "./refresh-cw-Bb4PEeW1.js";
10
- import { t as ke } from "./image-up-X4xIq4ea.js";
11
- import { t as Ae } from "./scan-line-7lZPfOdm.js";
12
- import { t as je } from "./sparkles-KhBCGlqB.js";
13
- import { _ as Me, c as Ne, d as x, f as S, g as Pe, h as Fe, i as Ie, l as Le, m as C, p as w, t as Re } from "./styleConstants-D4SOZGBV.js";
14
- import { t as ze } from "./trash-2-OwjZ-guZ.js";
15
- import { t as Be } from "./x-CGlq2XQe.js";
16
- import { t as Ve } from "./useMergeTag-DVnlvPYJ.js";
17
- import { Fragment as T, Transition as He, computed as E, createBlock as D, createCommentVNode as O, createElementBlock as k, createElementVNode as A, createStaticVNode as Ue, createTextVNode as j, createVNode as M, defineComponent as N, inject as P, nextTick as We, normalizeClass as F, normalizeStyle as I, openBlock as L, reactive as Ge, ref as R, renderList as z, renderSlot as Ke, resolveDynamicComponent as B, toDisplayString as V, unref as H, vModelText as qe, vShow as U, watch as Je, withCtx as W, withDirectives as G, withKeys as K, withModifiers as Ye } from "vue";
18
- import { useDataSourceFetch as Xe } from "@templatical/core";
19
- import { SYNTAX_PRESETS as Ze, containsMergeTag as Qe, createBlock as $e, createCustomBlock as et, generateId as tt, getLogicMergeTagKeyword as nt, isCustomBlock as rt, isLogicMergeTagValue as it } from "@templatical/types";
20
- var at = v("circle", [["circle", {
21
- cx: "12",
22
- cy: "12",
23
- r: "10",
24
- key: "1mglay"
25
- }]]), ot = v("layout-template", [
26
- ["rect", {
27
- width: "18",
28
- height: "7",
29
- x: "3",
30
- y: "3",
31
- rx: "1",
32
- key: "f1a2em"
33
- }],
34
- ["rect", {
35
- width: "9",
36
- height: "7",
37
- x: "3",
38
- y: "14",
39
- rx: "1",
40
- key: "jqznyg"
41
- }],
42
- ["rect", {
43
- width: "5",
44
- height: "7",
45
- x: "16",
46
- y: "14",
47
- rx: "1",
48
- key: "q5h2i8"
49
- }]
50
- ]), st = v("lock-open", [["rect", {
51
- width: "18",
52
- height: "11",
53
- x: "3",
54
- y: "11",
55
- rx: "2",
56
- ry: "2",
57
- key: "1w4ew1"
58
- }], ["path", {
59
- d: "M7 11V7a5 5 0 0 1 9.9-1",
60
- key: "1mm8w8"
61
- }]]), ct = v("lock", [["rect", {
62
- width: "18",
63
- height: "11",
64
- x: "3",
65
- y: "11",
66
- rx: "2",
67
- ry: "2",
68
- key: "1w4ew1"
69
- }], ["path", {
70
- d: "M7 11V7a5 5 0 0 1 10 0v4",
71
- key: "fwvmzm"
72
- }]]), lt = v("monitor", [
73
- ["rect", {
74
- width: "20",
75
- height: "14",
76
- x: "2",
77
- y: "3",
78
- rx: "2",
79
- key: "48i651"
80
- }],
81
- ["line", {
82
- x1: "8",
83
- x2: "16",
84
- y1: "21",
85
- y2: "21",
86
- key: "1svkeh"
87
- }],
88
- ["line", {
89
- x1: "12",
90
- x2: "12",
91
- y1: "17",
92
- y2: "21",
93
- key: "vw1qmm"
94
- }]
95
- ]), ut = v("moon", [["path", {
96
- d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
97
- key: "kfwtm"
98
- }]]), dt = v("panel-top", [["rect", {
99
- width: "18",
100
- height: "18",
101
- x: "3",
102
- y: "3",
103
- rx: "2",
104
- key: "afitv7"
105
- }], ["path", {
106
- d: "M3 9h18",
107
- key: "1pudct"
108
- }]]), q = v("plus", [["path", {
109
- d: "M5 12h14",
110
- key: "1ays0h"
111
- }], ["path", {
112
- d: "M12 5v14",
113
- key: "s699le"
114
- }]]), ft = v("rotate-ccw", [["path", {
115
- d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
116
- key: "1357e3"
117
- }], ["path", {
118
- d: "M3 3v5h5",
119
- key: "1xhq8a"
120
- }]]), pt = v("settings", [["path", {
121
- d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
122
- key: "1i5ecw"
123
- }], ["circle", {
124
- cx: "12",
125
- cy: "12",
126
- r: "3",
127
- key: "1v7zrd"
128
- }]]), mt = v("smartphone", [["rect", {
129
- width: "14",
130
- height: "20",
131
- x: "5",
132
- y: "2",
133
- rx: "2",
134
- ry: "2",
135
- key: "1yt0o3"
136
- }], ["path", {
137
- d: "M12 18h.01",
138
- key: "mhygvu"
139
- }]]), ht = v("square-plus", [
140
- ["rect", {
141
- width: "18",
142
- height: "18",
143
- x: "3",
144
- y: "3",
145
- rx: "2",
146
- key: "afitv7"
147
- }],
148
- ["path", {
149
- d: "M8 12h8",
150
- key: "1wcyev"
151
- }],
152
- ["path", {
153
- d: "M12 8v8",
154
- key: "napkw2"
155
- }]
156
- ]), gt = v("square", [["rect", {
157
- width: "18",
158
- height: "18",
159
- x: "3",
160
- y: "3",
161
- rx: "2",
162
- key: "afitv7"
163
- }]]), _t = v("sun", [
164
- ["circle", {
165
- cx: "12",
166
- cy: "12",
167
- r: "4",
168
- key: "4exip2"
169
- }],
170
- ["path", {
171
- d: "M12 2v2",
172
- key: "tus03m"
173
- }],
174
- ["path", {
175
- d: "M12 20v2",
176
- key: "1lh1kg"
177
- }],
178
- ["path", {
179
- d: "m4.93 4.93 1.41 1.41",
180
- key: "149t6j"
181
- }],
182
- ["path", {
183
- d: "m17.66 17.66 1.41 1.41",
184
- key: "ptbguv"
185
- }],
186
- ["path", {
187
- d: "M2 12h2",
188
- key: "1t8f8n"
189
- }],
190
- ["path", {
191
- d: "M20 12h2",
192
- key: "1q8mjw"
193
- }],
194
- ["path", {
195
- d: "m6.34 17.66-1.41 1.41",
196
- key: "1m8zz5"
197
- }],
198
- ["path", {
199
- d: "m19.07 4.93-1.41 1.41",
200
- key: "1shlcs"
201
- }]
202
- ]), vt = v("tablet", [["rect", {
203
- width: "16",
204
- height: "20",
205
- x: "4",
206
- y: "2",
207
- rx: "2",
208
- ry: "2",
209
- key: "76otgf"
210
- }], ["line", {
211
- x1: "12",
212
- x2: "12.01",
213
- y1: "18",
214
- y2: "18",
215
- key: "1dp563"
216
- }]]), yt = /* @__PURE__ */ t(h(), 1), bt = { class: "tpl:relative" }, xt = {
217
- class: "tpl:inline-flex tpl:size-3 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[8px] tpl:font-bold",
218
- style: { "background-color": "color-mix(\n in srgb,\n var(--tpl-bg) 30%,\n transparent\n )" }
219
- }, St = {
220
- key: 0,
221
- class: "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:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg-elevated)] tpl:font-[var(--tpl-font-family)]"
222
- }, Ct = { class: "tpl-canvas-empty-icon tpl:mb-4 tpl:text-[var(--tpl-primary)]" }, wt = { class: "tpl-canvas-empty-title tpl:m-0 tpl:mb-2 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-primary)]" }, Tt = { class: "tpl-canvas-empty-text tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-dim)]" }, Et = {
223
- key: 0,
224
- 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)]"
225
- }, Dt = {
226
- key: 1,
227
- 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)]"
228
- }, Ot = /* @__PURE__ */ y(/* @__PURE__ */ N({
229
- __name: "Canvas",
230
- props: {
231
- viewport: {},
232
- content: {},
233
- selectedBlockId: {},
234
- darkMode: { type: Boolean },
235
- previewMode: { type: Boolean },
236
- lockedBlocks: {}
237
- },
238
- emits: [
239
- "select-block",
240
- "open-ai-chat",
241
- "open-design-reference"
242
- ],
243
- setup(e, { emit: t }) {
244
- let n = {
245
- section: c,
246
- title: oe,
247
- paragraph: ee,
248
- image: u,
249
- button: i,
250
- divider: se,
251
- spacer: f,
252
- html: o,
253
- social: s,
254
- menu: d,
255
- table: ie,
256
- video: te,
257
- countdown: r,
258
- custom: ce
259
- }, a = e, p = t, { t: m } = _(), h = xe(me, "Canvas"), ne = P(ge, null), ae = P(ve, null), le = P(be, {}), ue = E(() => (le.plan?.hasFeature("ai_generation") ?? !1) && (le.ai?.isFeatureEnabled("chat") ?? !1)), de = E(() => (le.plan?.hasFeature("ai_generation") ?? !1) && (le.ai?.isFeatureEnabled("designToTemplate") ?? !1)), fe = E({
260
- get: () => a.content.blocks,
261
- set: (e) => {
262
- h.setContent({
263
- ...a.content,
264
- blocks: e
265
- });
266
- }
267
- }), pe = E(() => {
268
- switch (a.viewport) {
269
- case "mobile": return 375;
270
- case "tablet": return 768;
271
- default: return a.content.settings.width;
272
- }
273
- }), he = E(() => ({
274
- backgroundColor: a.content.settings.backgroundColor,
275
- fontFamily: a.content.settings.fontFamily
276
- }));
277
- function _e(e) {
278
- a.previewMode || e.target === e.currentTarget && p("select-block", null);
279
- }
280
- function ye(e) {
281
- return re(e, ae, n);
282
- }
283
- function g(e) {
284
- return a.lockedBlocks?.get(e) ?? null;
285
- }
286
- function v(e, t) {
287
- e.type === "custom" && h.updateBlock(e.id, {
288
- fieldValues: t.fieldValues,
289
- dataSourceFetched: t.dataSourceFetched
290
- });
291
- }
292
- return (t, n) => (L(), k("div", {
293
- class: "tpl-canvas-wrapper tpl:rounded-lg tpl:transition-[width] tpl:duration-300",
294
- style: I([{ "transition-timing-function": "cubic-bezier(0.34, 1.56, 0.64, 1)" }, {
295
- width: `${pe.value}px`,
296
- backgroundColor: e.content.settings.backgroundColor,
297
- boxShadow: e.darkMode ? "none" : "var(--tpl-shadow-xl)",
298
- filter: e.darkMode ? "invert(1) hue-rotate(180deg)" : "none",
299
- transition: "filter 300ms ease"
300
- }])
301
- }, [A("div", {
302
- class: F(["tpl-canvas tpl:rounded-lg", {
303
- "tpl-canvas--dark-mode": e.darkMode,
304
- "tpl-preview-mode": e.previewMode
305
- }]),
306
- style: I(he.value),
307
- onClick: _e
308
- }, [M(H(yt.default), {
309
- modelValue: fe.value,
310
- "onUpdate:modelValue": n[2] ||= (e) => fe.value = e,
311
- group: "blocks",
312
- "item-key": "id",
313
- animation: 150,
314
- "ghost-class": "tpl-ghost",
315
- "drag-class": "tpl-dragging",
316
- handle: ".tpl-block-btn",
317
- "invert-swap": !0,
318
- "inverted-swap-threshold": .65,
319
- disabled: e.previewMode,
320
- class: "tpl-canvas-blocks"
321
- }, {
322
- item: W(({ element: t }) => [G(A("div", null, [A("div", bt, [g(t.id) ? (L(), k("div", {
323
- key: 0,
324
- class: "tpl-collab-lock tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-[4] tpl:rounded-sm",
325
- style: I({
326
- outline: `2px solid ${g(t.id).color}`,
327
- outlineOffset: "-1px"
328
- })
329
- }, [A("span", {
330
- 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:text-white tpl:whitespace-nowrap",
331
- style: I({ backgroundColor: g(t.id).color })
332
- }, [A("span", xt, V(g(t.id).name.charAt(0)), 1), j(" " + V(g(t.id).name), 1)], 4)], 4)) : O("", !0), M(l, {
333
- block: t,
334
- "is-selected": !e.previewMode && e.selectedBlockId === t.id && !g(t.id),
335
- viewport: e.viewport,
336
- "preview-mode": e.previewMode,
337
- onSelect: (n) => e.previewMode || g(t.id) ? void 0 : p("select-block", t.id)
338
- }, {
339
- default: W(() => [(L(), D(B(ye(t)), {
340
- block: t,
341
- viewport: e.viewport,
342
- onFetchData: (e) => v(t, e),
343
- onUpdate: (e) => H(h).updateBlock(t.id, e)
344
- }, null, 40, [
345
- "block",
346
- "viewport",
347
- "onFetchData",
348
- "onUpdate"
349
- ]))]),
350
- _: 2
351
- }, 1032, [
352
- "block",
353
- "is-selected",
354
- "viewport",
355
- "preview-mode",
356
- "onSelect"
357
- ])])], 512), [[U, !H(ne)?.isHidden(t.id)]])]),
358
- footer: W(() => [fe.value.length === 0 && !e.previewMode ? (L(), k("div", St, [
359
- A("div", Ct, [M(H(ht), {
360
- size: 48,
361
- "stroke-width": 1
362
- })]),
363
- A("p", wt, V(H(m).canvas.noBlocks), 1),
364
- A("p", Tt, V(H(m).canvas.dragHint), 1),
365
- ue.value ? (L(), k("p", Et, [
366
- j(V(H(m).canvas.aiHintChat) + " ", 1),
367
- A("button", {
368
- 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)]",
369
- onClick: n[0] ||= (e) => p("open-ai-chat")
370
- }, [M(H(je), {
371
- size: 14,
372
- "stroke-width": 2
373
- }), j(" " + V(H(m).aiMenu.aiAssistant), 1)]),
374
- j(" " + V(H(m).canvas.aiHintChatSuffix), 1)
375
- ])) : O("", !0),
376
- de.value ? (L(), k("p", Dt, [
377
- j(V(H(m).canvas.aiHintDesign) + " ", 1),
378
- A("button", {
379
- 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)]",
380
- onClick: n[1] ||= (e) => p("open-design-reference")
381
- }, [M(H(ke), {
382
- size: 14,
383
- "stroke-width": 2
384
- }), j(" " + V(H(m).aiMenu.designToTemplate), 1)]),
385
- j(" " + V(H(m).canvas.aiHintDesignSuffix), 1)
386
- ])) : O("", !0)
387
- ])) : O("", !0)]),
388
- _: 1
389
- }, 8, ["modelValue", "disabled"])], 6)], 4));
390
- }
391
- }), [["__scopeId", "data-v-d5f65819"]]);
392
- //#endregion
393
- //#region src/utils/blockTypeLabels.ts
394
- function kt(e, t) {
395
- return t.blocks[e] ?? e;
396
- }
397
- //#endregion
398
- //#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
399
- var At = ["aria-expanded", "aria-label"], jt = {
400
- key: 0,
401
- class: "tpl:border-b tpl:px-1 tpl:pb-1 tpl:border-[var(--tpl-border)]"
402
- }, Mt = ["aria-label"], Nt = {
403
- key: 0,
404
- class: "tpl:flex-1 tpl:truncate tpl:text-sm tpl:font-medium"
405
- }, Pt = {
406
- key: 1,
407
- 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)]"
408
- }, Ft = { 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" }, It = {
409
- key: 0,
410
- class: "tpl:truncate tpl:text-sm tpl:font-medium"
411
- }, Lt = /* @__PURE__ */ N({
412
- __name: "Sidebar",
413
- setup(e) {
414
- let { t } = _(), n = P(g, []), r = P(fe, void 0), i = P(be, {}), o = E(() => (i.savedModules?.moduleCount.value ?? 0) > 0), s = R(!1), c = [
415
- "section",
416
- "image",
417
- "title",
418
- "paragraph",
419
- "button",
420
- "divider",
421
- "video",
422
- "social",
423
- "menu",
424
- "table",
425
- "spacer",
426
- "html"
427
- ], l = E(() => {
428
- let e = c.map((e) => ({
429
- type: e,
430
- label: kt(e, t)
431
- }));
432
- return i.plan && e.splice(-1, 0, {
433
- type: "countdown",
434
- label: kt("countdown", t)
435
- }), e;
436
- }), u = E(() => n.map((e) => ({
437
- type: `custom:${e.type}`,
438
- label: e.name,
439
- isCustom: !0,
440
- icon: e.icon
441
- }))), d = E(() => [...l.value, ...u.value]);
442
- function f(e) {
443
- if (e.isCustom) {
444
- let t = e.type.replace("custom:", ""), r = n.find((e) => e.type === t);
445
- if (r) return et(r);
446
- }
447
- return $e(e.type, r);
448
- }
449
- return (e, n) => (L(), k("aside", {
450
- "aria-expanded": s.value,
451
- "aria-label": H(t).sidebarNav.expandSidebar,
452
- class: "tpl-sidebar-rail tpl:absolute tpl:top-14 tpl:bottom-0 tpl:left-0 tpl:z-40 tpl:overflow-hidden",
453
- style: I({
454
- width: s.value ? "200px" : "48px",
455
- backgroundColor: "var(--tpl-bg-elevated)",
456
- borderRight: "1px solid var(--tpl-border)",
457
- boxShadow: s.value ? "var(--tpl-shadow-lg)" : "none",
458
- transition: "width 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1)"
459
- }),
460
- onMouseenter: n[1] ||= (e) => s.value = !0,
461
- onMouseleave: n[2] ||= (e) => s.value = !1,
462
- onFocusin: n[3] ||= (e) => s.value = !0,
463
- onFocusout: n[4] ||= (e) => s.value = !1
464
- }, [o.value ? (L(), k("div", jt, [A("button", {
465
- type: "button",
466
- "aria-label": H(t).sidebarNav.browseModules,
467
- 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)]",
468
- style: I({ justifyContent: s.value ? "flex-start" : "center" }),
469
- onClick: n[0] ||= (e) => H(i).savedModules?.openBrowser()
470
- }, [
471
- M(H(we), {
472
- size: 20,
473
- "stroke-width": 1.5,
474
- class: "tpl:shrink-0"
475
- }),
476
- s.value ? (L(), k("span", Nt, V(H(t).modules.title), 1)) : O("", !0),
477
- s.value ? (L(), k("span", Pt, V(H(i).savedModules?.moduleCount.value ?? 0), 1)) : O("", !0)
478
- ], 12, Mt)])) : O("", !0), M(H(yt.default), {
479
- list: d.value,
480
- group: {
481
- name: "blocks",
482
- pull: "clone",
483
- put: !1
484
- },
485
- clone: f,
486
- sort: !1,
487
- "item-key": "type",
488
- animation: 150,
489
- "ghost-class": "tpl-ghost",
490
- class: "tpl:flex tpl:flex-col tpl:gap-0.5 tpl:p-1"
491
- }, {
492
- item: W(({ element: e }) => [A("div", {
493
- class: "tpl:flex tpl:h-10 tpl:cursor-grab tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-sm)] 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",
494
- style: I({ justifyContent: s.value ? "flex-start" : "center" })
495
- }, [A("div", Ft, [H(Te)[e.type] ? (L(), D(B(H(Te)[e.type]), {
496
- key: 0,
497
- size: 20,
498
- "stroke-width": 1.5
499
- })) : e.isCustom ? (L(), D(a, {
500
- key: 1,
501
- icon: e.icon,
502
- size: 20
503
- }, null, 8, ["icon"])) : O("", !0)]), s.value ? (L(), k("span", It, V(e.label), 1)) : O("", !0)], 4)]),
504
- _: 1
505
- }, 8, ["list"])], 44, At));
506
- }
507
- }), Rt = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, J = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
508
- 360 / (Math.PI * 2);
509
- var zt = (e) => qt(Bt(e)), Bt = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
510
- r: parseInt(e[0] + e[0], 16),
511
- g: parseInt(e[1] + e[1], 16),
512
- b: parseInt(e[2] + e[2], 16),
513
- a: e.length === 4 ? J(parseInt(e[3] + e[3], 16) / 255, 2) : 1
514
- } : {
515
- r: parseInt(e.substring(0, 2), 16),
516
- g: parseInt(e.substring(2, 4), 16),
517
- b: parseInt(e.substring(4, 6), 16),
518
- a: e.length === 8 ? J(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
519
- }), Vt = (e) => Kt(Wt(e)), Ht = ({ h: e, s: t, v: n, a: r }) => {
520
- let i = (200 - t) * n / 100;
521
- return {
522
- h: J(e),
523
- s: J(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
524
- l: J(i / 2),
525
- a: J(r, 2)
526
- };
527
- }, Ut = (e) => {
528
- let { h: t, s: n, l: r } = Ht(e);
529
- return `hsl(${t}, ${n}%, ${r}%)`;
530
- }, Wt = ({ h: e, s: t, v: n, a: r }) => {
531
- e = e / 360 * 6, t /= 100, n /= 100;
532
- let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
533
- return {
534
- r: J([
535
- n,
536
- o,
537
- a,
538
- a,
539
- s,
540
- n
541
- ][c] * 255),
542
- g: J([
543
- s,
544
- n,
545
- n,
546
- o,
547
- a,
548
- a
549
- ][c] * 255),
550
- b: J([
551
- a,
552
- a,
553
- s,
554
- n,
555
- n,
556
- o
557
- ][c] * 255),
558
- a: J(r, 2)
559
- };
560
- }, Gt = (e) => {
561
- let t = e.toString(16);
562
- return t.length < 2 ? "0" + t : t;
563
- }, Kt = ({ r: e, g: t, b: n, a: r }) => {
564
- let i = r < 1 ? Gt(J(r * 255)) : "";
565
- return "#" + Gt(e) + Gt(t) + Gt(n) + i;
566
- }, qt = ({ r: e, g: t, b: n, a: r }) => {
567
- let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
568
- return {
569
- h: J(60 * (o < 0 ? o + 6 : o)),
570
- s: J(i ? a / i * 100 : 0),
571
- v: J(i / 255 * 100),
572
- a: r
573
- };
574
- }, Jt = (e, t) => {
575
- if (e === t) return !0;
576
- for (let n in e) if (e[n] !== t[n]) return !1;
577
- return !0;
578
- }, Yt = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : Jt(Bt(e), Bt(t)), Xt = {}, Zt = (e) => {
579
- let t = Xt[e];
580
- return t || (t = document.createElement("template"), t.innerHTML = e, Xt[e] = t), t;
581
- }, Qt = (e, t, n) => {
582
- e.dispatchEvent(new CustomEvent(t, {
583
- bubbles: !0,
584
- detail: n
585
- }));
586
- }, $t = !1, en = (e) => "touches" in e, tn = (e) => $t && !en(e) ? !1 : ($t ||= en(e), !0), nn = (e, t) => {
587
- let n = en(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
588
- Qt(e.el, "move", e.getMove({
589
- x: Rt((n.pageX - (r.left + window.pageXOffset)) / r.width),
590
- y: Rt((n.pageY - (r.top + window.pageYOffset)) / r.height)
591
- }));
592
- }, rn = (e, t) => {
593
- let n = t.keyCode;
594
- n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), Qt(e.el, "move", e.getMove({
595
- x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
596
- y: n === 40 ? .01 : n === 38 ? -.01 : 0
597
- }, !0)));
598
- }, an = class {
599
- constructor(e, t, n, r) {
600
- let i = Zt(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
601
- e.appendChild(i.content.cloneNode(!0));
602
- let a = e.querySelector(`[part=${t}]`);
603
- a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
604
- }
605
- set dragging(e) {
606
- let t = e ? document.addEventListener : document.removeEventListener;
607
- t($t ? "touchmove" : "mousemove", this), t($t ? "touchend" : "mouseup", this);
608
- }
609
- handleEvent(e) {
610
- switch (e.type) {
611
- case "mousedown":
612
- case "touchstart":
613
- if (e.preventDefault(), !tn(e) || !$t && e.button != 0) return;
614
- this.el.focus(), nn(this, e), this.dragging = !0;
615
- break;
616
- case "mousemove":
617
- case "touchmove":
618
- e.preventDefault(), nn(this, e);
619
- break;
620
- case "mouseup":
621
- case "touchend":
622
- this.dragging = !1;
623
- break;
624
- case "keydown":
625
- rn(this, e);
626
- break;
627
- }
628
- }
629
- style(e) {
630
- e.forEach((e, t) => {
631
- for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
632
- });
633
- }
634
- }, on = class extends an {
635
- constructor(e) {
636
- super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
637
- }
638
- update({ h: e }) {
639
- this.h = e, this.style([{
640
- left: `${e / 360 * 100}%`,
641
- color: Ut({
642
- h: e,
643
- s: 100,
644
- v: 100,
645
- a: 1
646
- })
647
- }]), this.el.setAttribute("aria-valuenow", `${J(e)}`);
648
- }
649
- getMove(e, t) {
650
- return { h: t ? Rt(this.h + e.x * 360, 0, 360) : 360 * e.x };
651
- }
652
- }, sn = class extends an {
653
- constructor(e) {
654
- super(e, "saturation", "aria-label=\"Color\"", !0);
655
- }
656
- update(e) {
657
- this.hsva = e, this.style([{
658
- top: `${100 - e.v}%`,
659
- left: `${e.s}%`,
660
- color: Ut(e)
661
- }, { "background-color": Ut({
662
- h: e.h,
663
- s: 100,
664
- v: 100,
665
- a: 1
666
- }) }]), this.el.setAttribute("aria-valuetext", `Saturation ${J(e.s)}%, Brightness ${J(e.v)}%`);
667
- }
668
- getMove(e, t) {
669
- return {
670
- s: t ? Rt(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
671
- v: t ? Rt(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
672
- };
673
- }
674
- }, cn = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", ln = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", un = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", dn = Symbol("same"), fn = Symbol("color"), pn = Symbol("hsva"), mn = Symbol("update"), hn = Symbol("parts"), gn = Symbol("css"), _n = Symbol("sliders"), vn = class extends HTMLElement {
675
- static get observedAttributes() {
676
- return ["color"];
677
- }
678
- get [gn]() {
679
- return [
680
- cn,
681
- ln,
682
- un
683
- ];
684
- }
685
- get [_n]() {
686
- return [sn, on];
687
- }
688
- get color() {
689
- return this[fn];
690
- }
691
- set color(e) {
692
- if (!this[dn](e)) {
693
- let t = this.colorModel.toHsva(e);
694
- this[mn](t), this[fn] = e;
695
- }
696
- }
697
- constructor() {
698
- super();
699
- let e = Zt(`<style>${this[gn].join("")}</style>`), t = this.attachShadow({ mode: "open" });
700
- t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[hn] = this[_n].map((e) => new e(t));
701
- }
702
- connectedCallback() {
703
- if (this.hasOwnProperty("color")) {
704
- let e = this.color;
705
- delete this.color, this.color = e;
706
- } else this.color ||= this.colorModel.defaultColor;
707
- }
708
- attributeChangedCallback(e, t, n) {
709
- let r = this.colorModel.fromAttr(n);
710
- this[dn](r) || (this.color = r);
711
- }
712
- handleEvent(e) {
713
- let t = this[pn], n = {
714
- ...t,
715
- ...e.detail
716
- };
717
- this[mn](n);
718
- let r;
719
- !Jt(n, t) && !this[dn](r = this.colorModel.fromHsva(n)) && (this[fn] = r, Qt(this, "color-changed", { value: r }));
720
- }
721
- [dn](e) {
722
- return this.color && this.colorModel.equal(e, this.color);
723
- }
724
- [mn](e) {
725
- this[pn] = e, this[hn].forEach((t) => t.update(e));
726
- }
727
- }, yn = {
728
- defaultColor: "#000",
729
- toHsva: zt,
730
- fromHsva: ({ h: e, s: t, v: n }) => Vt({
731
- h: e,
732
- s: t,
733
- v: n,
734
- a: 1
735
- }),
736
- equal: Yt,
737
- fromAttr: (e) => e
738
- }, bn = class extends vn {
739
- get colorModel() {
740
- return yn;
741
- }
742
- }, xn = class extends bn {};
743
- customElements.define("hex-color-picker", xn);
744
- //#endregion
745
- //#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
746
- var Sn = [
747
- "disabled",
748
- "aria-label",
749
- "aria-expanded"
750
- ], Cn = [
751
- "value",
752
- "placeholder",
753
- "disabled",
754
- "aria-label"
755
- ], wn = ["color", "aria-label"], Y = /* @__PURE__ */ N({
756
- __name: "ColorPicker",
757
- props: {
758
- modelValue: {},
759
- placeholder: { default: Ie },
760
- size: { default: "default" },
761
- swatchOnly: {
762
- type: Boolean,
763
- default: !1
764
- },
765
- disabled: {
766
- type: Boolean,
767
- default: !1
768
- }
769
- },
770
- emits: ["update:modelValue"],
771
- setup(e, { emit: t }) {
772
- let n = e, r = t, { t: i } = _(), a = R(!1), o = R(), s = R();
773
- ue(o, () => {
774
- a.value = !1;
775
- }, { ignore: [s] });
776
- let c = E({
777
- get: () => n.modelValue || "#000000",
778
- set: (e) => r("update:modelValue", e)
779
- });
780
- function l(e) {
781
- c.value = e.detail.value;
782
- }
783
- function u(e) {
784
- c.value = e.target.value;
785
- }
786
- return (t, n) => (L(), k("div", { class: F(["tpl:flex tpl:gap-2 tpl:relative", e.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
787
- A("button", {
788
- ref_key: "swatchRef",
789
- ref: s,
790
- type: "button",
791
- disabled: e.disabled,
792
- "aria-label": H(i).colorPicker.pickColor,
793
- "aria-expanded": a.value,
794
- class: F([
795
- "tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
796
- e.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
797
- a.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !e.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
798
- e.size === "large" ? "tpl:size-12" : "tpl:size-10"
799
- ]),
800
- onClick: n[0] ||= (t) => !e.disabled && (a.value = !a.value)
801
- }, [A("span", {
802
- class: "tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]",
803
- style: I({ backgroundColor: c.value })
804
- }, null, 4)], 10, Sn),
805
- e.swatchOnly ? O("", !0) : (L(), k("input", {
806
- key: 0,
807
- type: "text",
808
- class: F(H(Le)),
809
- value: e.modelValue,
810
- placeholder: e.placeholder,
811
- disabled: e.disabled,
812
- "aria-label": H(i).colorPicker.hexValue,
813
- onInput: u
814
- }, null, 42, Cn)),
815
- M(He, {
816
- "enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
817
- "enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
818
- "enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
819
- "leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
820
- "leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
821
- "leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
822
- }, {
823
- default: W(() => [a.value ? (L(), k("div", {
824
- key: 0,
825
- ref_key: "popoverRef",
826
- ref: o,
827
- class: "tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg"
828
- }, [A("hex-color-picker", {
829
- color: c.value,
830
- "aria-label": H(i).colorPicker.pickColor,
831
- onColorChanged: l,
832
- onKeydown: n[1] ||= K((e) => a.value = !1, ["escape"])
833
- }, null, 40, wn)], 512)) : O("", !0)]),
834
- _: 1
835
- })
836
- ], 2));
837
- }
838
- });
839
- //#endregion
840
- //#region src/composables/useMergeTagField.ts
841
- function Tn(e) {
842
- let { modelValue: t, emit: n, elementRef: r } = e, { isEnabled: i, isRequesting: a, isMergeTagValue: o, getMergeTagLabel: s, requestMergeTag: c, syntax: l } = Ve(), u = R(!1), d = !1, f = E(() => {
843
- let e = t();
844
- if (!e) return [];
845
- let n = [], r = `(${l.value.source}|${l.logic.source})`, i = new RegExp(r, "g"), a = 0, c;
846
- for (; (c = i.exec(e)) !== null;) {
847
- c.index > a && n.push({
848
- type: "text",
849
- value: e.slice(a, c.index)
850
- });
851
- let t = c[0];
852
- o(t) ? n.push({
853
- type: "mergeTag",
854
- value: t,
855
- label: s(t)
856
- }) : it(t, l) ? n.push({
857
- type: "logicMergeTag",
858
- value: t,
859
- keyword: nt(t, l)
860
- }) : n.push({
861
- type: "text",
862
- value: t
863
- }), a = c.index + t.length;
864
- }
865
- return a < e.length && n.push({
866
- type: "text",
867
- value: e.slice(a)
868
- }), n;
869
- }), p = E(() => f.value.some((e) => e.type === "mergeTag" || e.type === "logicMergeTag"));
870
- function m() {
871
- u.value = !0, We(() => {
872
- r.value?.focus();
873
- let e = t()?.length || 0;
874
- r.value?.setSelectionRange(e, e);
875
- });
876
- }
877
- function h() {
878
- d || (u.value = !1);
879
- }
880
- function ee(e) {
881
- n(e.target.value);
882
- }
883
- function te() {
884
- n("");
885
- }
886
- async function ne() {
887
- let e = u.value && r.value ? r.value.selectionStart ?? t().length : t().length;
888
- d = !0;
889
- let i = await c();
890
- if (d = !1, i) {
891
- let a = t().slice(0, e), o = t().slice(e);
892
- n(a + i.value + o), u.value = !0, We(() => {
893
- let t = e + i.value.length;
894
- r.value?.focus(), r.value?.setSelectionRange(t, t);
895
- });
896
- }
897
- }
898
- return {
899
- segments: f,
900
- hasMergeTags: p,
901
- mergeTagEnabled: i,
902
- isRequestingMergeTag: a,
903
- isEditing: u,
904
- startEditing: m,
905
- stopEditing: h,
906
- handleInput: ee,
907
- clearValue: te,
908
- insertMergeTag: ne
909
- };
910
- }
911
- //#endregion
912
- //#region src/components/MergeTagTextarea.vue?vue&type=script&setup=true&lang.ts
913
- var En = { key: 0 }, Dn = ["aria-label"], On = ["data-tooltip"], kn = ["data-tooltip"], An = {
914
- key: 2,
915
- class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
916
- }, jn = ["aria-label", "title"], Mn = [
917
- "aria-label",
918
- "title",
919
- "disabled"
920
- ], Nn = { key: 1 }, Pn = [
921
- "value",
922
- "placeholder",
923
- "rows"
924
- ], Fn = [
925
- "aria-label",
926
- "title",
927
- "disabled"
928
- ], In = "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)]", Ln = "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)]", Rn = "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)]", zn = /* @__PURE__ */ N({
929
- __name: "MergeTagTextarea",
930
- props: {
931
- modelValue: {},
932
- placeholder: { default: "" },
933
- rows: { default: 3 }
934
- },
935
- emits: ["update:modelValue"],
936
- setup(e, { emit: t }) {
937
- let n = e, r = t, { t: i } = _(), a = R(null), { segments: o, hasMergeTags: s, mergeTagEnabled: c, isRequestingMergeTag: l, isEditing: u, startEditing: d, stopEditing: f, handleInput: p, clearValue: m, insertMergeTag: h } = Tn({
938
- modelValue: () => n.modelValue,
939
- emit: (e) => r("update:modelValue", e),
940
- elementRef: a
941
- });
942
- return (t, n) => H(s) && !H(u) ? (L(), k("div", En, [A("div", {
943
- role: "button",
944
- tabindex: "0",
945
- "aria-label": H(i).mergeTag.clickToEdit,
946
- class: F(Ln),
947
- onClick: n[1] ||= (...e) => H(d) && H(d)(...e),
948
- onKeydown: [n[2] ||= K((...e) => H(d) && H(d)(...e), ["enter"]), n[3] ||= K(Ye((...e) => H(d) && H(d)(...e), ["prevent"]), ["space"])]
949
- }, [(L(!0), k(T, null, z(H(o), (e, t) => (L(), k(T, { key: `${e.type}-${t}-${e.value}` }, [e.type === "mergeTag" ? (L(), k("span", {
950
- key: 0,
951
- 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",
952
- "data-tooltip": e.value,
953
- style: {
954
- "background-color": "color-mix(\n in srgb,\n var(--tpl-primary) 20%,\n transparent\n )",
955
- color: "var(--tpl-primary)"
956
- }
957
- }, V(e.label), 9, On)) : e.type === "logicMergeTag" ? (L(), k("span", {
958
- key: 1,
959
- 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",
960
- "data-tooltip": e.value,
961
- style: {
962
- "background-color": "transparent",
963
- border: "1.5px solid\n color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
964
- color: "var(--tpl-primary)"
965
- }
966
- }, V(e.keyword), 9, kn)) : (L(), k("span", An, V(e.value), 1))], 64))), 128)), A("button", {
967
- type: "button",
968
- class: "tpl:ml-auto tpl:flex tpl:size-4 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",
969
- "aria-label": H(i).mergeTag.remove,
970
- title: H(i).mergeTag.remove,
971
- onClick: n[0] ||= Ye((...e) => H(m) && H(m)(...e), ["stop"])
972
- }, [M(H(Be), {
973
- size: 10,
974
- "stroke-width": 3
975
- })], 8, jn)], 40, Dn), H(c) ? (L(), k("button", {
976
- key: 0,
977
- type: "button",
978
- class: F([Rn, "tpl:mt-1.5"]),
979
- "aria-label": H(i).mergeTag.insert,
980
- title: H(i).mergeTag.insert,
981
- disabled: H(l),
982
- onClick: n[4] ||= (...e) => H(h) && H(h)(...e)
983
- }, [M(H(Ae), {
984
- size: 12,
985
- "stroke-width": 2
986
- }), j(" " + V(H(i).mergeTag.insert), 1)], 8, Mn)) : O("", !0)])) : (L(), k("div", Nn, [A("textarea", {
987
- ref_key: "textareaRef",
988
- ref: a,
989
- class: F(In),
990
- value: e.modelValue,
991
- placeholder: e.placeholder,
992
- rows: e.rows,
993
- onInput: n[5] ||= (...e) => H(p) && H(p)(...e),
994
- onBlur: n[6] ||= (...e) => H(f) && H(f)(...e),
995
- onKeydown: n[7] ||= K((...e) => H(f) && H(f)(...e), ["escape"])
996
- }, null, 40, Pn), H(c) ? (L(), k("button", {
997
- key: 0,
998
- type: "button",
999
- class: F([Rn, "tpl:mt-1.5"]),
1000
- "aria-label": H(i).mergeTag.insert,
1001
- title: H(i).mergeTag.insert,
1002
- disabled: H(l),
1003
- onClick: n[8] ||= (...e) => H(h) && H(h)(...e)
1004
- }, [M(H(Ae), {
1005
- size: 12,
1006
- "stroke-width": 2
1007
- }), j(" " + V(H(i).mergeTag.insert), 1)], 8, Fn)) : O("", !0)]));
1008
- }
1009
- }), Bn = { class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]" }, Vn = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4" }, Hn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Un = { class: "tpl:mb-3.5" }, Wn = { 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)]" }, Gn = ["onClick"], Kn = { class: "tpl:flex tpl:items-stretch" }, qn = ["value"], Jn = { 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 = { class: "tpl:mb-3.5" }, Xn = ["value"], Zn = ["value"], Qn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, $n = { class: "tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, er = { class: "tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, tr = { class: "tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]" }, nr = { class: "tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3" }, rr = { 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)]" }, ir = { class: "tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, ar = { class: "tpl:mb-1 tpl:last:mb-0" }, or = { class: "tpl:mb-1 tpl:last:mb-0" }, sr = { class: "tpl:mb-1 tpl:last:mb-0" }, cr = 150, lr = /* @__PURE__ */ N({
1010
- __name: "TemplateSettings",
1011
- props: { settings: {} },
1012
- emits: ["update"],
1013
- setup(e, { emit: t }) {
1014
- let n = e, r = t, { t: i } = _(), a = xe(ye, "TemplateSettings"), o = E(() => a.fonts.value), s = E(() => o.value.some((e) => e.value === n.settings.fontFamily) ? n.settings.fontFamily : a.defaultFont.value), c = [
1015
- {
1016
- value: 480,
1017
- label: "480px"
1018
- },
1019
- {
1020
- value: 600,
1021
- label: "600px"
1022
- },
1023
- {
1024
- value: 700,
1025
- label: "700px"
1026
- },
1027
- {
1028
- value: 800,
1029
- label: "800px"
1030
- }
1031
- ];
1032
- return (t, n) => (L(), k("aside", Bn, [A("div", Vn, [
1033
- A("div", { class: F(H(Ne)) }, [
1034
- A("div", Hn, [M(H(gt), {
1035
- class: "tpl:text-[var(--tpl-text-muted)]",
1036
- size: 14,
1037
- "stroke-width": 2
1038
- }), A("span", null, V(H(i).templateSettings.layout), 1)]),
1039
- A("div", Un, [A("label", { class: F(H(C)) }, V(H(i).templateSettings.widthPreset), 3), A("div", Wn, [(L(), k(T, null, z(c, (t) => A("button", {
1040
- key: t.value,
1041
- 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)]",
1042
- style: I({
1043
- backgroundColor: e.settings.width === t.value ? "var(--tpl-bg)" : "transparent",
1044
- color: e.settings.width === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
1045
- boxShadow: e.settings.width === t.value ? "var(--tpl-shadow)" : "none"
1046
- }),
1047
- onClick: (e) => r("update", { width: t.value })
1048
- }, V(t.label), 13, Gn)), 64))])]),
1049
- A("div", null, [A("label", { class: F(H(C)) }, V(H(i).templateSettings.customWidth), 3), A("div", Kn, [A("input", {
1050
- type: "number",
1051
- class: F(H(S)),
1052
- value: e.settings.width,
1053
- min: "300",
1054
- max: "900",
1055
- onInput: n[0] ||= (e) => r("update", { width: Number(e.target.value) })
1056
- }, null, 42, qn), A("span", { class: F(H(w)) }, "px", 2)])])
1057
- ], 2),
1058
- A("div", { class: F(H(Ne)) }, [
1059
- A("div", Jn, [M(H(at), {
1060
- class: "tpl:text-[var(--tpl-text-muted)]",
1061
- size: 14,
1062
- "stroke-width": 2
1063
- }), A("span", null, V(H(i).templateSettings.appearance), 1)]),
1064
- A("div", Yn, [A("label", { class: F(H(C)) }, V(H(i).templateSettings.backgroundColor), 3), M(Y, {
1065
- "model-value": e.settings.backgroundColor,
1066
- placeholder: H(Re),
1067
- "onUpdate:modelValue": n[1] ||= (e) => r("update", { backgroundColor: e })
1068
- }, null, 8, ["model-value", "placeholder"])]),
1069
- A("div", null, [A("label", { class: F(H(C)) }, V(H(i).templateSettings.fontFamily), 3), A("select", {
1070
- class: F(H(x)),
1071
- value: s.value,
1072
- onChange: n[2] ||= (e) => r("update", { fontFamily: e.target.value })
1073
- }, [(L(!0), k(T, null, z(o.value, (e) => (L(), k("option", {
1074
- key: e.value,
1075
- value: e.value
1076
- }, V(e.label), 9, Zn))), 128))], 42, Xn)])
1077
- ], 2),
1078
- A("div", { class: F(H(Ne)) }, [A("div", Qn, [M(H(De), {
1079
- class: "tpl:text-[var(--tpl-text-muted)]",
1080
- size: 14,
1081
- "stroke-width": 2
1082
- }), A("span", null, V(H(i).templateSettings.preheaderText), 1)]), A("div", null, [M(zn, {
1083
- "model-value": e.settings.preheaderText ?? "",
1084
- placeholder: H(i).templateSettings.preheaderTextPlaceholder,
1085
- rows: 2,
1086
- "onUpdate:modelValue": n[3] ||= (e) => r("update", { preheaderText: e.replace(/[\r\n]/g, " ") || void 0 })
1087
- }, null, 8, ["model-value", "placeholder"]), A("div", $n, [A("span", er, V(H(i).templateSettings.preheaderTextHint), 1), A("span", tr, V((e.settings.preheaderText ?? "").length) + "/" + V(cr), 1)])])], 2),
1088
- A("div", nr, [A("div", rr, [M(H(Ee), {
1089
- size: 14,
1090
- "stroke-width": 2
1091
- }), A("span", null, V(H(i).templateSettings.tips), 1)]), A("ul", ir, [
1092
- A("li", ar, V(H(i).templateSettings.tip1), 1),
1093
- A("li", or, V(H(i).templateSettings.tip2), 1),
1094
- A("li", sr, V(H(i).templateSettings.tip3), 1)
1095
- ])])
1096
- ])]));
1097
- }
1098
- }), ur = { key: 0 }, dr = ["aria-label"], fr = ["data-tooltip"], pr = ["data-tooltip"], mr = {
1099
- key: 2,
1100
- class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
1101
- }, hr = ["aria-label", "title"], gr = [
1102
- "aria-label",
1103
- "title",
1104
- "disabled"
1105
- ], _r = { key: 1 }, vr = [
1106
- "type",
1107
- "value",
1108
- "placeholder"
1109
- ], yr = [
1110
- "aria-label",
1111
- "title",
1112
- "disabled"
1113
- ], br = "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)]", xr = "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)]", X = /* @__PURE__ */ y(/* @__PURE__ */ N({
1114
- __name: "MergeTagInput",
1115
- props: {
1116
- modelValue: {},
1117
- type: { default: "text" },
1118
- placeholder: { default: "" },
1119
- pulse: {
1120
- type: Boolean,
1121
- default: !1
1122
- }
1123
- },
1124
- emits: ["update:modelValue"],
1125
- setup(e, { emit: t }) {
1126
- let n = e, r = t, { t: i } = _(), a = R(null), { segments: o, hasMergeTags: s, mergeTagEnabled: c, isRequestingMergeTag: l, isEditing: u, startEditing: d, stopEditing: f, handleInput: p, clearValue: m, insertMergeTag: h } = Tn({
1127
- modelValue: () => n.modelValue,
1128
- emit: (e) => r("update:modelValue", e),
1129
- elementRef: a
1130
- });
1131
- return (t, n) => H(s) && !H(u) ? (L(), k("div", ur, [A("div", {
1132
- role: "button",
1133
- tabindex: "0",
1134
- "aria-label": H(i).mergeTag.clickToEdit,
1135
- class: F([br, { "tpl-pulse-fill": e.pulse }]),
1136
- onClick: n[1] ||= (...e) => H(d) && H(d)(...e),
1137
- onKeydown: [n[2] ||= K((...e) => H(d) && H(d)(...e), ["enter"]), n[3] ||= K(Ye((...e) => H(d) && H(d)(...e), ["prevent"]), ["space"])]
1138
- }, [(L(!0), k(T, null, z(H(o), (e, t) => (L(), k(T, { key: `${e.type}-${t}-${e.value}` }, [e.type === "mergeTag" ? (L(), k("span", {
1139
- key: 0,
1140
- 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",
1141
- "data-tooltip": e.value,
1142
- style: {
1143
- "background-color": "color-mix(\n in srgb,\n var(--tpl-primary) 20%,\n transparent\n )",
1144
- color: "var(--tpl-primary)"
1145
- }
1146
- }, V(e.label), 9, fr)) : e.type === "logicMergeTag" ? (L(), k("span", {
1147
- key: 1,
1148
- 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",
1149
- "data-tooltip": e.value,
1150
- style: {
1151
- "background-color": "transparent",
1152
- border: "1.5px solid\n color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
1153
- color: "var(--tpl-primary)"
1154
- }
1155
- }, V(e.keyword), 9, pr)) : (L(), k("span", mr, V(e.value), 1))], 64))), 128)), A("button", {
1156
- type: "button",
1157
- class: "tpl:ml-auto tpl:flex tpl:size-4 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",
1158
- "aria-label": H(i).mergeTag.remove,
1159
- title: H(i).mergeTag.remove,
1160
- onClick: n[0] ||= Ye((...e) => H(m) && H(m)(...e), ["stop"])
1161
- }, [M(H(Be), {
1162
- size: 10,
1163
- "stroke-width": 3
1164
- })], 8, hr)], 42, dr), H(c) ? (L(), k("button", {
1165
- key: 0,
1166
- type: "button",
1167
- class: F([xr, "tpl:mt-1.5"]),
1168
- "aria-label": H(i).mergeTag.insert,
1169
- title: H(i).mergeTag.insert,
1170
- disabled: H(l),
1171
- onClick: n[4] ||= (...e) => H(h) && H(h)(...e)
1172
- }, [M(H(Ae), {
1173
- size: 12,
1174
- "stroke-width": 2
1175
- }), j(" " + V(H(i).mergeTag.insert), 1)], 8, gr)) : O("", !0)])) : (L(), k("div", _r, [A("input", {
1176
- ref_key: "inputRef",
1177
- ref: a,
1178
- type: e.type,
1179
- class: F([H(x), { "tpl-pulse-fill": e.pulse }]),
1180
- value: e.modelValue,
1181
- placeholder: e.placeholder,
1182
- onInput: n[5] ||= (...e) => H(p) && H(p)(...e),
1183
- onBlur: n[6] ||= (...e) => H(f) && H(f)(...e),
1184
- onKeydown: n[7] ||= K((...e) => H(f) && H(f)(...e), ["escape"])
1185
- }, null, 42, vr), H(c) ? (L(), k("button", {
1186
- key: 0,
1187
- type: "button",
1188
- class: F([xr, "tpl:mt-1.5"]),
1189
- "aria-label": H(i).mergeTag.insert,
1190
- title: H(i).mergeTag.insert,
1191
- disabled: H(l),
1192
- onClick: n[8] ||= (...e) => H(h) && H(h)(...e)
1193
- }, [M(H(Ae), {
1194
- size: 12,
1195
- "stroke-width": 2
1196
- }), j(" " + V(H(i).mergeTag.insert), 1)], 8, yr)) : O("", !0)]));
1197
- }
1198
- }), [["__scopeId", "data-v-981812d9"]]), Sr = { class: "tpl:mb-3.5" }, Cr = ["value"], wr = { value: "" }, Tr = ["value"], Er = { class: "tpl:mb-3.5" }, Dr = { class: "tpl:mb-3.5" }, Or = {
1199
- key: 0,
1200
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
1201
- }, kr = ["checked"], Ar = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, jr = { class: "tpl:mb-3.5" }, Mr = { class: "tpl:mb-3.5" }, Nr = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Pr = { class: "tpl:mb-3.5" }, Fr = { class: "tpl:flex tpl:items-stretch" }, Ir = ["value"], Lr = { class: "tpl:mb-3.5" }, Rr = { class: "tpl:flex tpl:items-stretch" }, zr = ["value"], Br = /* @__PURE__ */ N({
1202
- __name: "ButtonToolbar",
1203
- props: {
1204
- block: {},
1205
- fontFamilies: {}
1206
- },
1207
- emits: ["update"],
1208
- setup(e, { emit: t }) {
1209
- let n = t, { t: r } = _();
1210
- function i(e, t) {
1211
- n("update", { [e]: t });
1212
- }
1213
- return (t, n) => (L(), k(T, null, [
1214
- A("div", Sr, [A("label", { class: F(H(C)) }, V(H(r).button.fontFamily), 3), A("select", {
1215
- class: F(H(x)),
1216
- value: e.block.fontFamily || "",
1217
- onChange: n[0] ||= (e) => i("fontFamily", e.target.value || void 0)
1218
- }, [A("option", wr, V(H(r).button.inheritFont), 1), (L(!0), k(T, null, z(e.fontFamilies, (e) => (L(), k("option", {
1219
- key: e.value,
1220
- value: e.value
1221
- }, V(e.label), 9, Tr))), 128))], 42, Cr)]),
1222
- A("div", Er, [A("label", { class: F(H(C)) }, V(H(r).button.text), 3), M(X, {
1223
- "model-value": e.block.text,
1224
- type: "text",
1225
- "onUpdate:modelValue": n[1] ||= (e) => i("text", e)
1226
- }, null, 8, ["model-value"])]),
1227
- A("div", Dr, [
1228
- A("label", { class: F(H(C)) }, V(H(r).button.url), 3),
1229
- M(X, {
1230
- "model-value": e.block.url,
1231
- type: "url",
1232
- placeholder: H(r).button.urlPlaceholder,
1233
- "onUpdate:modelValue": n[2] ||= (e) => i("url", e)
1234
- }, null, 8, ["model-value", "placeholder"]),
1235
- e.block.url ? (L(), k("label", Or, [A("input", {
1236
- type: "checkbox",
1237
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1238
- checked: e.block.openInNewTab ?? !1,
1239
- onChange: n[3] ||= (e) => i("openInNewTab", e.target.checked)
1240
- }, null, 40, kr), j(" " + V(H(r).button.openInNewTab), 1)])) : O("", !0)
1241
- ]),
1242
- A("div", Ar, [A("div", jr, [A("label", { class: F(H(C)) }, V(H(r).button.background), 3), M(Y, {
1243
- "model-value": e.block.backgroundColor,
1244
- "onUpdate:modelValue": n[4] ||= (e) => i("backgroundColor", e)
1245
- }, null, 8, ["model-value"])]), A("div", Mr, [A("label", { class: F(H(C)) }, V(H(r).button.textColor), 3), M(Y, {
1246
- "model-value": e.block.textColor,
1247
- "onUpdate:modelValue": n[5] ||= (e) => i("textColor", e)
1248
- }, null, 8, ["model-value"])])]),
1249
- A("div", Nr, [A("div", Pr, [A("label", { class: F(H(C)) }, V(H(r).button.borderRadius), 3), A("div", Fr, [A("input", {
1250
- type: "number",
1251
- class: F(H(S)),
1252
- value: e.block.borderRadius,
1253
- min: "0",
1254
- max: "50",
1255
- onInput: n[6] ||= (e) => i("borderRadius", Number(e.target.value))
1256
- }, null, 42, Ir), A("span", { class: F(H(w)) }, "px", 2)])]), A("div", Lr, [A("label", { class: F(H(C)) }, V(H(r).button.fontSize), 3), A("div", Rr, [A("input", {
1257
- type: "number",
1258
- class: F(H(S)),
1259
- value: e.block.fontSize,
1260
- min: "10",
1261
- max: "36",
1262
- onInput: n[7] ||= (e) => i("fontSize", Number(e.target.value))
1263
- }, null, 42, zr), A("span", { class: F(H(w)) }, "px", 2)])])])
1264
- ], 64));
1265
- }
1266
- }), Vr = { class: "spacing-control" }, Hr = { class: "tpl:mb-2 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ur = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-1.5" }, Wr = { class: "tpl:flex tpl:items-center" }, Gr = ["aria-label"], Kr = ["value", "aria-label"], qr = ["aria-label"], Jr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Yr = { class: "tpl:flex tpl:items-center" }, Xr = ["aria-label"], Zr = ["value", "aria-label"], Qr = ["aria-label"], $r = ["aria-label", "title"], ei = { class: "tpl:flex tpl:items-center" }, ti = ["aria-label"], ni = ["value", "aria-label"], ri = ["aria-label"], ii = { class: "tpl:flex tpl:items-center" }, ai = ["aria-label"], oi = ["value", "aria-label"], si = ["aria-label"], Z = "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)]", ci = "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)]", li = /* @__PURE__ */ y(/* @__PURE__ */ N({
1267
- __name: "SpacingControl",
1268
- props: {
1269
- modelValue: {},
1270
- label: {}
1271
- },
1272
- emits: ["update:modelValue"],
1273
- setup(e, { emit: t }) {
1274
- let n = e, r = t, { t: i } = _(), a = E(() => n.modelValue.top === n.modelValue.right && n.modelValue.right === n.modelValue.bottom && n.modelValue.bottom === n.modelValue.left), o = R(a.value);
1275
- Je(a, (e) => {
1276
- !e && o.value && (o.value = !1);
1277
- });
1278
- function s(e, t) {
1279
- let i = n.modelValue[e], a = Math.max(0, i + t);
1280
- o.value ? r("update:modelValue", {
1281
- top: a,
1282
- right: a,
1283
- bottom: a,
1284
- left: a
1285
- }) : r("update:modelValue", {
1286
- ...n.modelValue,
1287
- [e]: a
1288
- });
1289
- }
1290
- function c(e, t) {
1291
- let i = Math.max(0, t);
1292
- o.value ? r("update:modelValue", {
1293
- top: i,
1294
- right: i,
1295
- bottom: i,
1296
- left: i
1297
- }) : r("update:modelValue", {
1298
- ...n.modelValue,
1299
- [e]: i
1300
- });
1301
- }
1302
- function l() {
1303
- if (o.value = !o.value, o.value) {
1304
- let e = n.modelValue.top;
1305
- r("update:modelValue", {
1306
- top: e,
1307
- right: e,
1308
- bottom: e,
1309
- left: e
1310
- });
1311
- }
1312
- }
1313
- return (t, n) => (L(), k("div", Vr, [A("label", Hr, V(e.label), 1), A("div", Ur, [
1314
- A("div", Wr, [
1315
- A("button", {
1316
- "aria-label": H(i).spacingControl.decreaseTop,
1317
- class: F([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1318
- onClick: n[0] ||= (e) => s("top", -1)
1319
- }, [M(H(b), {
1320
- size: 12,
1321
- "stroke-width": 2
1322
- })], 10, Gr),
1323
- A("input", {
1324
- type: "number",
1325
- class: F(ci),
1326
- value: e.modelValue.top,
1327
- "aria-label": H(i).spacingControl.top,
1328
- min: "0",
1329
- onInput: n[1] ||= (e) => c("top", Number(e.target.value))
1330
- }, null, 40, Kr),
1331
- A("button", {
1332
- "aria-label": H(i).spacingControl.increaseTop,
1333
- class: F([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1334
- onClick: n[2] ||= (e) => s("top", 1)
1335
- }, [M(H(q), {
1336
- size: 12,
1337
- "stroke-width": 2
1338
- })], 10, qr)
1339
- ]),
1340
- A("div", Jr, [
1341
- A("div", Yr, [
1342
- A("button", {
1343
- "aria-label": H(i).spacingControl.decreaseLeft,
1344
- class: F([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1345
- onClick: n[3] ||= (e) => s("left", -1)
1346
- }, [M(H(b), {
1347
- size: 12,
1348
- "stroke-width": 2
1349
- })], 10, Xr),
1350
- A("input", {
1351
- type: "number",
1352
- class: F(ci),
1353
- value: e.modelValue.left,
1354
- "aria-label": H(i).spacingControl.left,
1355
- min: "0",
1356
- onInput: n[4] ||= (e) => c("left", Number(e.target.value))
1357
- }, null, 40, Zr),
1358
- A("button", {
1359
- "aria-label": H(i).spacingControl.increaseLeft,
1360
- class: F([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1361
- onClick: n[5] ||= (e) => s("left", 1)
1362
- }, [M(H(q), {
1363
- size: 12,
1364
- "stroke-width": 2
1365
- })], 10, Qr)
1366
- ]),
1367
- A("button", {
1368
- class: F(["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)]", o.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)]"]),
1369
- "aria-label": o.value ? H(i).spacingControl.unlock : H(i).spacingControl.lockAll,
1370
- title: o.value ? H(i).spacingControl.unlock : H(i).spacingControl.lockAll,
1371
- onClick: l
1372
- }, [o.value ? (L(), D(H(ct), {
1373
- key: 0,
1374
- size: 14,
1375
- "stroke-width": 2
1376
- })) : (L(), D(H(st), {
1377
- key: 1,
1378
- size: 14,
1379
- "stroke-width": 2
1380
- }))], 10, $r),
1381
- A("div", ei, [
1382
- A("button", {
1383
- "aria-label": H(i).spacingControl.decreaseRight,
1384
- class: F([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1385
- onClick: n[6] ||= (e) => s("right", -1)
1386
- }, [M(H(b), {
1387
- size: 12,
1388
- "stroke-width": 2
1389
- })], 10, ti),
1390
- A("input", {
1391
- type: "number",
1392
- class: F(ci),
1393
- value: e.modelValue.right,
1394
- "aria-label": H(i).spacingControl.right,
1395
- min: "0",
1396
- onInput: n[7] ||= (e) => c("right", Number(e.target.value))
1397
- }, null, 40, ni),
1398
- A("button", {
1399
- "aria-label": H(i).spacingControl.increaseRight,
1400
- class: F([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1401
- onClick: n[8] ||= (e) => s("right", 1)
1402
- }, [M(H(q), {
1403
- size: 12,
1404
- "stroke-width": 2
1405
- })], 10, ri)
1406
- ])
1407
- ]),
1408
- A("div", ii, [
1409
- A("button", {
1410
- "aria-label": H(i).spacingControl.decreaseBottom,
1411
- class: F([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1412
- onClick: n[9] ||= (e) => s("bottom", -1)
1413
- }, [M(H(b), {
1414
- size: 12,
1415
- "stroke-width": 2
1416
- })], 10, ai),
1417
- A("input", {
1418
- type: "number",
1419
- class: F(ci),
1420
- value: e.modelValue.bottom,
1421
- "aria-label": H(i).spacingControl.bottom,
1422
- min: "0",
1423
- onInput: n[10] ||= (e) => c("bottom", Number(e.target.value))
1424
- }, null, 40, oi),
1425
- A("button", {
1426
- "aria-label": H(i).spacingControl.increaseBottom,
1427
- class: F([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1428
- onClick: n[11] ||= (e) => s("bottom", 1)
1429
- }, [M(H(q), {
1430
- size: 12,
1431
- "stroke-width": 2
1432
- })], 10, si)
1433
- ])
1434
- ])]));
1435
- }
1436
- }), [["__scopeId", "data-v-9a9c8a07"]]), ui = { class: "tpl:mt-3" }, di = { class: "tpl:mt-4" }, fi = { class: "tpl:border-t tpl:border-[var(--tpl-border)] tpl:py-3" }, pi = { class: "tpl:mt-3" }, mi = { class: "tpl:border-t tpl:border-[var(--tpl-border)] tpl:py-3" }, hi = { class: "tpl:mt-3 tpl:space-y-2" }, gi = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, _i = ["checked"], vi = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, yi = ["checked"], bi = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, xi = ["checked"], Si = { class: "tpl:border-t tpl:border-[var(--tpl-border)] tpl:py-3" }, Ci = { class: "tpl:mt-3" }, wi = ["value", "placeholder"], Ti = {
1437
- key: 0,
1438
- class: "tpl:border-t tpl:border-[var(--tpl-border)] tpl:py-3"
1439
- }, Ei = { class: "tpl:mt-3 tpl:space-y-2" }, Di = ["value"], Oi = { value: "" }, ki = ["label"], Ai = ["value"], ji = ["value"], Mi = {
1440
- key: 0,
1441
- value: "__custom__"
1442
- }, Ni = {
1443
- key: 0,
1444
- class: "tpl:space-y-2"
1445
- }, Pi = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Fi = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ii = { class: "tpl:flex tpl:justify-end" }, Li = ["disabled"], Ri = {
1446
- key: 0,
1447
- class: "tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]"
1448
- }, zi = { class: "tpl:space-y-1" }, Bi = { 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)]" }, Vi = {
1449
- key: 0,
1450
- 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)]"
1451
- }, Hi = /* @__PURE__ */ N({
1452
- __name: "CommonBlockSettings",
1453
- props: {
1454
- block: {},
1455
- isFirstSection: { type: Boolean }
1456
- },
1457
- emits: ["update"],
1458
- setup(e, { emit: t }) {
1459
- let n = e, r = t, { t: i } = _(), a = P(pe, []), o = P(_e, !1), s = Ge(/* @__PURE__ */ new Set());
1460
- function c(e) {
1461
- s.has(e) ? s.delete(e) : s.add(e);
1462
- }
1463
- let l = E(() => a.length > 0 || o), u = R(!1), d = R(""), f = R(""), p = E(() => n.block.displayCondition ? !a.some((e) => e.label === n.block.displayCondition?.label) : !1);
1464
- function m() {
1465
- u.value = !0, p.value && n.block.displayCondition ? (d.value = n.block.displayCondition.before, f.value = n.block.displayCondition.after ?? "") : (d.value = "", f.value = "");
1466
- }
1467
- function h() {
1468
- d.value.trim() && (r("update", { displayCondition: {
1469
- label: i.blockSettings.customCondition,
1470
- before: d.value.trim(),
1471
- after: f.value.trim()
1472
- } }), u.value = !1, d.value = "", f.value = "");
1473
- }
1474
- Je(() => n.block.displayCondition, (e) => {
1475
- if (!e) {
1476
- u.value = !1, d.value = "", f.value = "";
1477
- return;
1478
- }
1479
- p.value && (d.value = e.before, f.value = e.after ?? "");
1480
- }, { immediate: !0 });
1481
- let ee = E(() => {
1482
- let e = {};
1483
- for (let t of a) {
1484
- let n = t.group ?? "";
1485
- e[n] || (e[n] = []), e[n].push(t);
1486
- }
1487
- return e;
1488
- });
1489
- function te(e, t) {
1490
- r("update", { styles: {
1491
- ...n.block.styles,
1492
- [e]: t
1493
- } });
1494
- }
1495
- return (t, n) => (L(), k("div", { class: F(["tpl:flex tpl:flex-col", e.isFirstSection ? "" : "tpl:mt-4"]) }, [
1496
- A("div", { class: F(["tpl:py-3", e.isFirstSection ? "" : "tpl:border-t tpl:border-[var(--tpl-border)]"]) }, [A("button", {
1497
- type: "button",
1498
- 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)]",
1499
- onClick: n[0] ||= (e) => c("spacing")
1500
- }, [M(H(Se), {
1501
- class: F(["tpl:transition-transform tpl:duration-200", s.has("spacing") ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1502
- size: 12,
1503
- "stroke-width": 2
1504
- }, null, 8, ["class"]), A("span", null, V(H(i).blockSettings.spacing), 1)]), G(A("div", ui, [M(li, {
1505
- label: H(i).blockSettings.padding,
1506
- "model-value": e.block.styles.padding,
1507
- "onUpdate:modelValue": n[1] ||= (e) => te("padding", e)
1508
- }, null, 8, ["label", "model-value"]), A("div", di, [M(li, {
1509
- label: H(i).blockSettings.margin,
1510
- "model-value": e.block.styles.margin,
1511
- "onUpdate:modelValue": n[2] ||= (e) => te("margin", e)
1512
- }, null, 8, ["label", "model-value"])])], 512), [[U, s.has("spacing")]])], 2),
1513
- A("div", fi, [A("button", {
1514
- type: "button",
1515
- 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)]",
1516
- onClick: n[3] ||= (e) => c("bg")
1517
- }, [M(H(Se), {
1518
- class: F(["tpl:transition-transform tpl:duration-200", s.has("bg") ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1519
- size: 12,
1520
- "stroke-width": 2
1521
- }, null, 8, ["class"]), A("span", null, V(H(i).blockSettings.background), 1)]), G(A("div", pi, [A("label", { class: F(H(C)) }, V(H(i).blockSettings.color), 3), M(Y, {
1522
- size: "large",
1523
- "model-value": e.block.styles.backgroundColor || H("#ffffff"),
1524
- "onUpdate:modelValue": n[4] ||= (e) => te("backgroundColor", e)
1525
- }, null, 8, ["model-value"])], 512), [[U, s.has("bg")]])]),
1526
- A("div", mi, [A("button", {
1527
- type: "button",
1528
- 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)]",
1529
- onClick: n[5] ||= (e) => c("display")
1530
- }, [M(H(Se), {
1531
- class: F(["tpl:transition-transform tpl:duration-200", s.has("display") ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1532
- size: 12,
1533
- "stroke-width": 2
1534
- }, null, 8, ["class"]), A("span", null, V(H(i).blockSettings.display), 1)]), G(A("div", hi, [
1535
- A("label", gi, [
1536
- A("input", {
1537
- type: "checkbox",
1538
- class: "tpl:accent-[var(--tpl-primary)]",
1539
- checked: e.block.visibility?.desktop !== !1,
1540
- onChange: n[6] ||= (t) => r("update", { visibility: {
1541
- desktop: e.block.visibility?.desktop === !1,
1542
- tablet: e.block.visibility?.tablet !== !1,
1543
- mobile: e.block.visibility?.mobile !== !1
1544
- } })
1545
- }, null, 40, _i),
1546
- M(H(lt), {
1547
- size: 14,
1548
- "stroke-width": 1.5
1549
- }),
1550
- j(" " + V(H(i).blockSettings.showOnDesktop), 1)
1551
- ]),
1552
- A("label", vi, [
1553
- A("input", {
1554
- type: "checkbox",
1555
- class: "tpl:accent-[var(--tpl-primary)]",
1556
- checked: e.block.visibility?.tablet !== !1,
1557
- onChange: n[7] ||= (t) => r("update", { visibility: {
1558
- desktop: e.block.visibility?.desktop !== !1,
1559
- tablet: e.block.visibility?.tablet === !1,
1560
- mobile: e.block.visibility?.mobile !== !1
1561
- } })
1562
- }, null, 40, yi),
1563
- M(H(vt), {
1564
- size: 14,
1565
- "stroke-width": 1.5
1566
- }),
1567
- j(" " + V(H(i).blockSettings.showOnTablet), 1)
1568
- ]),
1569
- A("label", bi, [
1570
- A("input", {
1571
- type: "checkbox",
1572
- class: "tpl:accent-[var(--tpl-primary)]",
1573
- checked: e.block.visibility?.mobile !== !1,
1574
- onChange: n[8] ||= (t) => r("update", { visibility: {
1575
- desktop: e.block.visibility?.desktop !== !1,
1576
- tablet: e.block.visibility?.tablet !== !1,
1577
- mobile: e.block.visibility?.mobile === !1
1578
- } })
1579
- }, null, 40, xi),
1580
- M(H(mt), {
1581
- size: 14,
1582
- "stroke-width": 1.5
1583
- }),
1584
- j(" " + V(H(i).blockSettings.showOnMobile), 1)
1585
- ])
1586
- ], 512), [[U, s.has("display")]])]),
1587
- A("div", Si, [A("button", {
1588
- type: "button",
1589
- 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)]",
1590
- onClick: n[9] ||= (e) => c("css")
1591
- }, [M(H(Se), {
1592
- class: F(["tpl:transition-transform tpl:duration-200", s.has("css") ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1593
- size: 12,
1594
- "stroke-width": 2
1595
- }, null, 8, ["class"]), A("span", null, V(H(i).blockSettings.customCss), 1)]), G(A("div", Ci, [A("label", { class: F(H(C)) }, V(H(i).blockSettings.css), 3), A("textarea", {
1596
- value: e.block.customCss || "",
1597
- placeholder: H(i).blockSettings.cssPlaceholder,
1598
- rows: "3",
1599
- class: "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]",
1600
- onInput: n[10] ||= (e) => r("update", { customCss: e.target.value })
1601
- }, null, 40, wi)], 512), [[U, s.has("css")]])]),
1602
- l.value ? (L(), k("div", Ti, [A("button", {
1603
- type: "button",
1604
- 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)]",
1605
- onClick: n[11] ||= (e) => c("condition")
1606
- }, [M(H(Se), {
1607
- class: F(["tpl:transition-transform tpl:duration-200", s.has("condition") ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1608
- size: 12,
1609
- "stroke-width": 2
1610
- }, null, 8, ["class"]), A("span", null, V(H(i).blockSettings.displayCondition), 1)]), G(A("div", Ei, [A("select", {
1611
- class: F(["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)]"]),
1612
- value: u.value || p.value ? "__custom__" : e.block.displayCondition?.label ?? "",
1613
- onChange: n[12] ||= (e) => {
1614
- let t = e.target.value;
1615
- if (t === "__custom__") {
1616
- m();
1617
- return;
1618
- }
1619
- if (u.value = !1, !t) {
1620
- r("update", { displayCondition: void 0 });
1621
- return;
1622
- }
1623
- let n = H(a).find((e) => e.label === t);
1624
- n && r("update", { displayCondition: n });
1625
- }
1626
- }, [
1627
- A("option", Oi, V(H(i).blockSettings.noCondition), 1),
1628
- (L(!0), k(T, null, z(ee.value, (e, t) => (L(), k(T, { key: t }, [t ? (L(), k("optgroup", {
1629
- key: 0,
1630
- label: String(t)
1631
- }, [(L(!0), k(T, null, z(e, (e) => (L(), k("option", {
1632
- key: e.label,
1633
- value: e.label
1634
- }, V(e.label), 9, Ai))), 128))], 8, ki)) : (L(!0), k(T, { key: 1 }, z(e, (e) => (L(), k("option", {
1635
- key: e.label,
1636
- value: e.label
1637
- }, V(e.label), 9, ji))), 128))], 64))), 128)),
1638
- H(o) ? (L(), k("option", Mi, V(H(i).blockSettings.customCondition), 1)) : O("", !0)
1639
- ], 42, Di), u.value || p.value ? (L(), k("div", Ni, [
1640
- A("div", null, [A("label", Pi, V(H(i).blockSettings.customConditionBefore), 1), G(A("textarea", {
1641
- "onUpdate:modelValue": n[13] ||= (e) => d.value = e,
1642
- rows: "2",
1643
- class: "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]"
1644
- }, null, 512), [[qe, d.value]])]),
1645
- A("div", null, [A("label", Fi, V(H(i).blockSettings.customConditionAfter), 1), G(A("textarea", {
1646
- "onUpdate:modelValue": n[14] ||= (e) => f.value = e,
1647
- rows: "2",
1648
- class: "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]"
1649
- }, null, 512), [[qe, f.value]])]),
1650
- A("div", Ii, [A("button", {
1651
- type: "button",
1652
- 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",
1653
- disabled: !d.value.trim(),
1654
- onClick: h
1655
- }, V(H(i).blockSettings.applyCondition), 9, Li)])
1656
- ])) : e.block.displayCondition && !p.value ? (L(), k(T, { key: 1 }, [e.block.displayCondition.description ? (L(), k("p", Ri, V(e.block.displayCondition.description), 1)) : O("", !0), A("div", zi, [A("pre", Bi, V(e.block.displayCondition.before), 1), e.block.displayCondition.after ? (L(), k("pre", Vi, V(e.block.displayCondition.after), 1)) : O("", !0)])], 64)) : O("", !0)], 512), [[U, s.has("condition")]])])) : O("", !0)
1657
- ], 2));
1658
- }
1659
- }), Ui = [
1660
- "aria-checked",
1661
- "aria-label",
1662
- "title",
1663
- "onClick"
1664
- ], Wi = { key: 1 }, Q = /* @__PURE__ */ N({
1665
- __name: "SlidingPillSelect",
1666
- props: {
1667
- options: {},
1668
- modelValue: {}
1669
- },
1670
- emits: ["update:modelValue"],
1671
- setup(e, { emit: t }) {
1672
- let n = e, r = t, i = E(() => {
1673
- let e = n.options.findIndex((e) => e.value === n.modelValue);
1674
- return `translateX(${Math.max(e, 0) * 100}%)`;
1675
- });
1676
- return (t, n) => (L(), k("div", {
1677
- role: "radiogroup",
1678
- class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
1679
- style: I({
1680
- gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
1681
- backgroundColor: "var(--tpl-bg-hover)"
1682
- })
1683
- }, [A("div", {
1684
- class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
1685
- style: I({
1686
- left: "4px",
1687
- width: `calc((100% - 8px) / ${e.options.length})`,
1688
- transform: i.value,
1689
- backgroundColor: "var(--tpl-bg)",
1690
- boxShadow: "var(--tpl-shadow)",
1691
- transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
1692
- })
1693
- }, null, 4), (L(!0), k(T, null, z(e.options, (t) => (L(), k("button", {
1694
- key: t.value,
1695
- role: "radio",
1696
- "aria-checked": e.modelValue === t.value,
1697
- "aria-label": t.label,
1698
- class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
1699
- style: I({
1700
- color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
1701
- transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
1702
- }),
1703
- title: t.label,
1704
- onClick: (e) => r("update:modelValue", t.value)
1705
- }, [t.icon ? (L(), D(B(t.icon), {
1706
- key: 0,
1707
- size: 14,
1708
- "stroke-width": 2
1709
- })) : (L(), k("span", Wi, V(t.label), 1))], 12, Ui))), 128))], 4));
1710
- }
1711
- }), Gi = { class: "tpl:mb-3.5" }, Ki = ["value"], qi = { class: "tpl:mb-3.5" }, Ji = ["value"], Yi = { class: "tpl:mb-3.5" }, Xi = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, Zi = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, Qi = ["checked"], $i = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, ea = ["checked"], ta = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, na = ["checked"], ra = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, ia = ["checked"], aa = { class: "tpl:mb-3.5" }, oa = { class: "tpl:mb-3.5" }, sa = ["value"], ca = { value: "" }, la = ["value"], ua = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, da = { class: "tpl:mb-3.5" }, fa = { class: "tpl:flex tpl:items-stretch" }, pa = ["value"], ma = { class: "tpl:mb-3.5" }, ha = { class: "tpl:flex tpl:items-stretch" }, ga = ["value"], _a = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, va = { class: "tpl:mb-3.5" }, ya = { class: "tpl:mb-3.5" }, ba = { class: "tpl:mb-3.5" }, xa = { class: "tpl:mb-3.5" }, Sa = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, Ca = ["value", "placeholder"], wa = ["value", "placeholder"], Ta = ["value", "placeholder"], Ea = ["value", "placeholder"], Da = { class: "tpl:mb-3.5" }, Oa = ["value", "placeholder"], ka = { class: "tpl:mb-3.5" }, Aa = ["value"], ja = { class: "tpl:mb-3.5 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, Ma = ["checked"], Na = /* @__PURE__ */ N({
1712
- __name: "CountdownToolbar",
1713
- props: {
1714
- block: {},
1715
- fontFamilies: {}
1716
- },
1717
- emits: ["update"],
1718
- setup(e, { emit: t }) {
1719
- let n = t, { t: r } = _();
1720
- function i(e, t) {
1721
- n("update", { [e]: t });
1722
- }
1723
- return (t, n) => (L(), k(T, null, [
1724
- A("div", Gi, [A("label", { class: F(H(C)) }, V(H(r).countdown.targetDate), 3), A("input", {
1725
- type: "datetime-local",
1726
- class: F(H(x)),
1727
- value: e.block.targetDate,
1728
- onInput: n[0] ||= (e) => i("targetDate", e.target.value)
1729
- }, null, 42, Ki)]),
1730
- A("div", qi, [A("label", { class: F(H(C)) }, V(H(r).countdown.timezone), 3), A("select", {
1731
- class: F(H(x)),
1732
- value: e.block.timezone,
1733
- onChange: n[1] ||= (e) => i("timezone", e.target.value)
1734
- }, [...n[20] ||= [Ue("<option value=\"UTC\">UTC</option><option value=\"America/New_York\">America/New_York</option><option value=\"America/Chicago\">America/Chicago</option><option value=\"America/Denver\">America/Denver</option><option value=\"America/Los_Angeles\">America/Los_Angeles</option><option value=\"Europe/London\">Europe/London</option><option value=\"Europe/Berlin\">Europe/Berlin</option><option value=\"Europe/Paris\">Europe/Paris</option><option value=\"Europe/Moscow\">Europe/Moscow</option><option value=\"Asia/Dubai\">Asia/Dubai</option><option value=\"Asia/Kolkata\">Asia/Kolkata</option><option value=\"Asia/Shanghai\">Asia/Shanghai</option><option value=\"Asia/Tokyo\">Asia/Tokyo</option><option value=\"Australia/Sydney\">Australia/Sydney</option><option value=\"Pacific/Auckland\">Pacific/Auckland</option>", 15)]], 42, Ji)]),
1735
- A("div", Yi, [A("label", { class: F(H(C)) }, V(H(r).countdown.display), 3), A("div", Xi, [
1736
- A("label", Zi, [A("input", {
1737
- type: "checkbox",
1738
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1739
- checked: e.block.showDays,
1740
- onChange: n[2] ||= (e) => i("showDays", e.target.checked)
1741
- }, null, 40, Qi), j(" " + V(H(r).countdown.days), 1)]),
1742
- A("label", $i, [A("input", {
1743
- type: "checkbox",
1744
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1745
- checked: e.block.showHours,
1746
- onChange: n[3] ||= (e) => i("showHours", e.target.checked)
1747
- }, null, 40, ea), j(" " + V(H(r).countdown.hours), 1)]),
1748
- A("label", ta, [A("input", {
1749
- type: "checkbox",
1750
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1751
- checked: e.block.showMinutes,
1752
- onChange: n[4] ||= (e) => i("showMinutes", e.target.checked)
1753
- }, null, 40, na), j(" " + V(H(r).countdown.minutes), 1)]),
1754
- A("label", ra, [A("input", {
1755
- type: "checkbox",
1756
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1757
- checked: e.block.showSeconds,
1758
- onChange: n[5] ||= (e) => i("showSeconds", e.target.checked)
1759
- }, null, 40, ia), j(" " + V(H(r).countdown.seconds), 1)])
1760
- ])]),
1761
- A("div", aa, [A("label", { class: F(H(C)) }, V(H(r).countdown.separator), 3), M(Q, {
1762
- options: [
1763
- {
1764
- value: ":",
1765
- label: ":"
1766
- },
1767
- {
1768
- value: "-",
1769
- label: "-"
1770
- },
1771
- {
1772
- value: " ",
1773
- label: "␣"
1774
- }
1775
- ],
1776
- "model-value": e.block.separator,
1777
- "onUpdate:modelValue": n[6] ||= (e) => i("separator", e)
1778
- }, null, 8, ["model-value"])]),
1779
- A("div", oa, [A("label", { class: F(H(C)) }, V(H(r).countdown.fontFamily), 3), A("select", {
1780
- class: F(H(x)),
1781
- value: e.block.fontFamily || "",
1782
- onChange: n[7] ||= (e) => i("fontFamily", e.target.value || void 0)
1783
- }, [A("option", ca, V(H(r).countdown.inheritFont), 1), (L(!0), k(T, null, z(e.fontFamilies, (e) => (L(), k("option", {
1784
- key: e.value,
1785
- value: e.value
1786
- }, V(e.label), 9, la))), 128))], 42, sa)]),
1787
- A("div", ua, [A("div", da, [A("label", { class: F(H(C)) }, V(H(r).countdown.digitFontSize), 3), A("div", fa, [A("input", {
1788
- type: "number",
1789
- class: F(H(S)),
1790
- value: e.block.digitFontSize,
1791
- min: "12",
1792
- max: "72",
1793
- onInput: n[8] ||= (e) => i("digitFontSize", Number(e.target.value))
1794
- }, null, 42, pa), A("span", { class: F(H(w)) }, "px", 2)])]), A("div", ma, [A("label", { class: F(H(C)) }, V(H(r).countdown.labelFontSize), 3), A("div", ha, [A("input", {
1795
- type: "number",
1796
- class: F(H(S)),
1797
- value: e.block.labelFontSize,
1798
- min: "8",
1799
- max: "24",
1800
- onInput: n[9] ||= (e) => i("labelFontSize", Number(e.target.value))
1801
- }, null, 42, ga), A("span", { class: F(H(w)) }, "px", 2)])])]),
1802
- A("div", _a, [A("div", va, [A("label", { class: F(H(C)) }, V(H(r).countdown.digitColor), 3), M(Y, {
1803
- "model-value": e.block.digitColor,
1804
- "onUpdate:modelValue": n[10] ||= (e) => i("digitColor", e)
1805
- }, null, 8, ["model-value"])]), A("div", ya, [A("label", { class: F(H(C)) }, V(H(r).countdown.labelColor), 3), M(Y, {
1806
- "model-value": e.block.labelColor,
1807
- "onUpdate:modelValue": n[11] ||= (e) => i("labelColor", e)
1808
- }, null, 8, ["model-value"])])]),
1809
- A("div", ba, [A("label", { class: F(H(C)) }, V(H(r).countdown.background), 3), M(Y, {
1810
- "model-value": e.block.backgroundColor,
1811
- "onUpdate:modelValue": n[12] ||= (e) => i("backgroundColor", e)
1812
- }, null, 8, ["model-value"])]),
1813
- A("div", xa, [A("label", { class: F(H(C)) }, V(H(r).countdown.labels), 3), A("div", Sa, [
1814
- A("input", {
1815
- type: "text",
1816
- class: F(H(x)),
1817
- value: e.block.labelDays,
1818
- placeholder: H(r).countdown.days,
1819
- onInput: n[13] ||= (e) => i("labelDays", e.target.value)
1820
- }, null, 42, Ca),
1821
- A("input", {
1822
- type: "text",
1823
- class: F(H(x)),
1824
- value: e.block.labelHours,
1825
- placeholder: H(r).countdown.hours,
1826
- onInput: n[14] ||= (e) => i("labelHours", e.target.value)
1827
- }, null, 42, wa),
1828
- A("input", {
1829
- type: "text",
1830
- class: F(H(x)),
1831
- value: e.block.labelMinutes,
1832
- placeholder: H(r).countdown.minutes,
1833
- onInput: n[15] ||= (e) => i("labelMinutes", e.target.value)
1834
- }, null, 42, Ta),
1835
- A("input", {
1836
- type: "text",
1837
- class: F(H(x)),
1838
- value: e.block.labelSeconds,
1839
- placeholder: H(r).countdown.seconds,
1840
- onInput: n[16] ||= (e) => i("labelSeconds", e.target.value)
1841
- }, null, 42, Ea)
1842
- ])]),
1843
- A("div", Da, [A("label", { class: F(H(C)) }, V(H(r).countdown.expiry), 3), A("input", {
1844
- type: "text",
1845
- class: F(H(x)),
1846
- value: e.block.expiredMessage,
1847
- placeholder: H(r).countdown.expiredMessagePlaceholder,
1848
- onInput: n[17] ||= (e) => i("expiredMessage", e.target.value)
1849
- }, null, 42, Oa)]),
1850
- A("div", ka, [A("label", { class: F(H(C)) }, V(H(r).countdown.expiredImageUrl), 3), A("input", {
1851
- type: "url",
1852
- class: F(H(x)),
1853
- value: e.block.expiredImageUrl,
1854
- placeholder: "https://...",
1855
- onInput: n[18] ||= (e) => i("expiredImageUrl", e.target.value)
1856
- }, null, 42, Aa)]),
1857
- A("label", ja, [A("input", {
1858
- type: "checkbox",
1859
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1860
- checked: e.block.hideOnExpiry,
1861
- onChange: n[19] ||= (e) => i("hideOnExpiry", e.target.checked)
1862
- }, null, 40, Ma), j(" " + V(H(r).countdown.hideOnExpiry), 1)])
1863
- ], 64));
1864
- }
1865
- }), Pa = ["title"], Fa = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ia = {
1866
- key: 1,
1867
- class: "tpl:text-[var(--tpl-danger)]"
1868
- }, La = [
1869
- "aria-checked",
1870
- "aria-label",
1871
- "disabled"
1872
- ], Ra = /* @__PURE__ */ N({
1873
- __name: "BooleanField",
1874
- props: {
1875
- field: {},
1876
- modelValue: { type: Boolean },
1877
- readOnly: { type: Boolean }
1878
- },
1879
- emits: ["update:modelValue"],
1880
- setup(e, { emit: t }) {
1881
- let n = t, { t: r } = _();
1882
- return (t, i) => (L(), k("div", {
1883
- class: "tpl:mb-3.5",
1884
- title: e.readOnly ? H(r).customBlocks.dataSource.readOnlyTooltip : void 0
1885
- }, [A("label", { class: F(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", e.readOnly ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [A("span", Fa, [
1886
- j(V(e.field.label) + " ", 1),
1887
- e.readOnly ? (L(), D(H(ct), {
1888
- key: 0,
1889
- size: 12,
1890
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1891
- })) : O("", !0),
1892
- e.field.required ? (L(), k("span", Ia, " * ")) : O("", !0)
1893
- ]), A("button", {
1894
- type: "button",
1895
- role: "switch",
1896
- "aria-checked": e.modelValue,
1897
- "aria-label": e.field.label,
1898
- class: F([
1899
- "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",
1900
- e.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
1901
- e.readOnly ? "tpl:opacity-60 tpl:cursor-not-allowed" : "tpl:cursor-pointer"
1902
- ]),
1903
- disabled: e.readOnly,
1904
- onClick: i[0] ||= (t) => !e.readOnly && n("update:modelValue", !e.modelValue)
1905
- }, [A("span", { class: F(["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, La)], 2)], 8, Pa));
1906
- }
1907
- }), za = { class: "tpl:mb-3.5" }, Ba = {
1908
- key: 1,
1909
- class: "tpl:text-[var(--tpl-danger)]"
1910
- }, $ = /* @__PURE__ */ N({
1911
- __name: "FieldWrapper",
1912
- props: {
1913
- label: {},
1914
- required: { type: Boolean },
1915
- readOnly: { type: Boolean }
1916
- },
1917
- setup(e) {
1918
- return (t, n) => (L(), k("div", za, [A("label", { class: F(H(C)) }, [
1919
- j(V(e.label) + " ", 1),
1920
- e.readOnly ? (L(), D(H(ct), {
1921
- key: 0,
1922
- size: 12,
1923
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1924
- })) : O("", !0),
1925
- e.required ? (L(), k("span", Ba, "*")) : O("", !0)
1926
- ], 2), Ke(t.$slots, "default")]));
1927
- }
1928
- }), Va = /* @__PURE__ */ N({
1929
- __name: "ColorField",
1930
- props: {
1931
- field: {},
1932
- modelValue: {},
1933
- readOnly: { type: Boolean }
1934
- },
1935
- emits: ["update:modelValue"],
1936
- setup(e, { emit: t }) {
1937
- let n = t, { t: r } = _();
1938
- return (t, i) => (L(), D($, {
1939
- label: e.field.label,
1940
- required: e.field.required,
1941
- "read-only": e.readOnly
1942
- }, {
1943
- default: W(() => [M(Y, {
1944
- "model-value": e.modelValue || H("#000000"),
1945
- placeholder: e.field.placeholder || H("#000000"),
1946
- disabled: e.readOnly,
1947
- title: e.readOnly ? H(r).customBlocks.dataSource.readOnlyTooltip : void 0,
1948
- "onUpdate:modelValue": i[0] ||= (e) => n("update:modelValue", e)
1949
- }, null, 8, [
1950
- "model-value",
1951
- "placeholder",
1952
- "disabled",
1953
- "title"
1954
- ])]),
1955
- _: 1
1956
- }, 8, [
1957
- "label",
1958
- "required",
1959
- "read-only"
1960
- ]));
1961
- }
1962
- }), Ha = [
1963
- "value",
1964
- "placeholder",
1965
- "title"
1966
- ], Ua = ["value", "placeholder"], Wa = /* @__PURE__ */ N({
1967
- __name: "ImageField",
1968
- props: {
1969
- field: {},
1970
- modelValue: {},
1971
- readOnly: { type: Boolean }
1972
- },
1973
- emits: ["update:modelValue"],
1974
- setup(e, { emit: t }) {
1975
- let n = t, { t: r } = _(), i = P(de, null), a = E(() => !!i);
1976
- async function o() {
1977
- let e = await i?.({ accept: ["images"] });
1978
- e && n("update:modelValue", e.url);
1979
- }
1980
- return (t, i) => (L(), D($, {
1981
- label: e.field.label,
1982
- required: e.field.required,
1983
- "read-only": e.readOnly
1984
- }, {
1985
- default: W(() => [e.readOnly ? (L(), k("input", {
1986
- key: 0,
1987
- type: "url",
1988
- class: F([H(x), "tpl:opacity-60 tpl:cursor-not-allowed"]),
1989
- value: e.modelValue,
1990
- placeholder: e.field.placeholder || "https://...",
1991
- disabled: "",
1992
- title: H(r).customBlocks.dataSource.readOnlyTooltip
1993
- }, null, 10, Ha)) : (L(), k("input", {
1994
- key: 1,
1995
- type: "url",
1996
- class: F(H(x)),
1997
- value: e.modelValue,
1998
- placeholder: e.field.placeholder || "https://...",
1999
- onInput: i[0] ||= (e) => n("update:modelValue", e.target.value)
2000
- }, null, 42, Ua)), a.value && !e.readOnly ? (L(), k("button", {
2001
- key: 2,
2002
- 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)]",
2003
- onClick: i[1] ||= (e) => o()
2004
- }, [M(H(m), {
2005
- size: 14,
2006
- "stroke-width": 1.5
2007
- }), j(" " + V(H(r).image.browseMedia), 1)])) : O("", !0)]),
2008
- _: 1
2009
- }, 8, [
2010
- "label",
2011
- "required",
2012
- "read-only"
2013
- ]));
2014
- }
2015
- }), Ga = [
2016
- "value",
2017
- "placeholder",
2018
- "min",
2019
- "max",
2020
- "step",
2021
- "disabled",
2022
- "title"
2023
- ], Ka = /* @__PURE__ */ N({
2024
- __name: "NumberField",
2025
- props: {
2026
- field: {},
2027
- modelValue: {},
2028
- readOnly: { type: Boolean }
2029
- },
2030
- emits: ["update:modelValue"],
2031
- setup(e, { emit: t }) {
2032
- let n = t, { t: r } = _();
2033
- return (t, i) => (L(), D($, {
2034
- label: e.field.label,
2035
- required: e.field.required,
2036
- "read-only": e.readOnly
2037
- }, {
2038
- default: W(() => [A("input", {
2039
- type: "number",
2040
- class: F([H(x), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
2041
- value: e.modelValue,
2042
- placeholder: e.field.placeholder,
2043
- min: e.field.min,
2044
- max: e.field.max,
2045
- step: e.field.step,
2046
- disabled: e.readOnly,
2047
- title: e.readOnly ? H(r).customBlocks.dataSource.readOnlyTooltip : void 0,
2048
- onInput: i[0] ||= (t) => !e.readOnly && n("update:modelValue", Number(t.target.value))
2049
- }, null, 42, Ga)]),
2050
- _: 1
2051
- }, 8, [
2052
- "label",
2053
- "required",
2054
- "read-only"
2055
- ]));
2056
- }
2057
- }), qa = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Ja = { class: "tpl:mb-2 tpl:flex tpl:items-center tpl:justify-between" }, Ya = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]" }, Xa = ["title", "onClick"], Za = {
2058
- key: 1,
2059
- class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
2060
- }, Qa = /* @__PURE__ */ N({
2061
- __name: "RepeatableField",
2062
- props: {
2063
- field: {},
2064
- modelValue: {},
2065
- readOnly: { type: Boolean }
2066
- },
2067
- emits: ["update:modelValue"],
2068
- setup(e, { emit: t }) {
2069
- let n = e, r = t, { t: i } = _(), a = E(() => n.modelValue || []), o = E(() => !n.field.maxItems || a.value.length < n.field.maxItems), s = E(() => !n.field.minItems || a.value.length > n.field.minItems);
2070
- function c() {
2071
- if (!o.value || n.readOnly) return;
2072
- let e = {};
2073
- for (let t of n.field.fields) e[t.key] = t.default ?? "";
2074
- r("update:modelValue", [...a.value, e]);
2075
- }
2076
- function l(e) {
2077
- if (!s.value || n.readOnly) return;
2078
- let t = [...a.value];
2079
- t.splice(e, 1), r("update:modelValue", t);
2080
- }
2081
- function u(e, t, n) {
2082
- r("update:modelValue", a.value.map((r, i) => i === e ? {
2083
- ...r,
2084
- [t]: n
2085
- } : r));
2086
- }
2087
- return (t, n) => (L(), D($, {
2088
- label: e.field.label,
2089
- required: e.field.required,
2090
- "read-only": e.readOnly
2091
- }, {
2092
- default: W(() => [A("div", qa, [
2093
- (L(!0), k(T, null, z(a.value, (t, n) => (L(), k("div", {
2094
- key: `${e.field.key}-${n}`,
2095
- class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-3"
2096
- }, [A("div", Ja, [A("span", Ya, " #" + V(n + 1), 1), s.value && !e.readOnly ? (L(), k("button", {
2097
- key: 0,
2098
- type: "button",
2099
- 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)]",
2100
- title: H(i).customBlocks.fields.removeItem,
2101
- onClick: (e) => l(n)
2102
- }, [M(H(ze), {
2103
- size: 12,
2104
- "stroke-width": 2
2105
- })], 8, Xa)) : O("", !0)]), (L(!0), k(T, null, z(e.field.fields, (r) => (L(), D(B(H(so)(r.type)), {
2106
- key: r.key,
2107
- field: r,
2108
- "model-value": t[r.key],
2109
- "read-only": e.readOnly,
2110
- "onUpdate:modelValue": (e) => u(n, r.key, e)
2111
- }, null, 8, [
2112
- "field",
2113
- "model-value",
2114
- "read-only",
2115
- "onUpdate:modelValue"
2116
- ]))), 128))]))), 128)),
2117
- o.value && !e.readOnly ? (L(), k("button", {
2118
- key: 0,
2119
- type: "button",
2120
- class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 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)]",
2121
- onClick: c
2122
- }, [M(H(q), {
2123
- size: 14,
2124
- "stroke-width": 2
2125
- }), j(" " + V(H(i).customBlocks.fields.addItem), 1)])) : O("", !0),
2126
- !o.value && !e.readOnly ? (L(), k("p", Za, V(H(i).customBlocks.fields.maxItemsReached), 1)) : O("", !0)
2127
- ])]),
2128
- _: 1
2129
- }, 8, [
2130
- "label",
2131
- "required",
2132
- "read-only"
2133
- ]));
2134
- }
2135
- }), $a = [
2136
- "value",
2137
- "disabled",
2138
- "title"
2139
- ], eo = ["value"], to = /* @__PURE__ */ N({
2140
- __name: "SelectField",
2141
- props: {
2142
- field: {},
2143
- modelValue: {},
2144
- readOnly: { type: Boolean }
2145
- },
2146
- emits: ["update:modelValue"],
2147
- setup(e, { emit: t }) {
2148
- let n = t, { t: r } = _();
2149
- return (t, i) => (L(), D($, {
2150
- label: e.field.label,
2151
- required: e.field.required,
2152
- "read-only": e.readOnly
2153
- }, {
2154
- default: W(() => [A("select", {
2155
- class: F([H(x), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
2156
- value: e.modelValue,
2157
- disabled: e.readOnly,
2158
- title: e.readOnly ? H(r).customBlocks.dataSource.readOnlyTooltip : void 0,
2159
- onChange: i[0] ||= (t) => !e.readOnly && n("update:modelValue", t.target.value)
2160
- }, [(L(!0), k(T, null, z(e.field.options, (e) => (L(), k("option", {
2161
- key: e.value,
2162
- value: e.value
2163
- }, V(e.label), 9, eo))), 128))], 42, $a)]),
2164
- _: 1
2165
- }, 8, [
2166
- "label",
2167
- "required",
2168
- "read-only"
2169
- ]));
2170
- }
2171
- }), no = [
2172
- "value",
2173
- "placeholder",
2174
- "title"
2175
- ], ro = /* @__PURE__ */ N({
2176
- __name: "TextField",
2177
- props: {
2178
- field: {},
2179
- modelValue: {},
2180
- readOnly: { type: Boolean }
2181
- },
2182
- emits: ["update:modelValue"],
2183
- setup(e, { emit: t }) {
2184
- let n = t, { t: r } = _();
2185
- return (t, i) => (L(), D($, {
2186
- label: e.field.label,
2187
- required: e.field.required,
2188
- "read-only": e.readOnly
2189
- }, {
2190
- default: W(() => [e.readOnly ? (L(), k("input", {
2191
- key: 0,
2192
- type: "text",
2193
- class: F([H(x), "tpl:opacity-60 tpl:cursor-not-allowed"]),
2194
- value: e.modelValue,
2195
- placeholder: e.field.placeholder,
2196
- disabled: "",
2197
- title: H(r).customBlocks.dataSource.readOnlyTooltip
2198
- }, null, 10, no)) : (L(), D(X, {
2199
- key: 1,
2200
- "model-value": e.modelValue,
2201
- placeholder: e.field.placeholder,
2202
- "onUpdate:modelValue": i[0] ||= (e) => n("update:modelValue", e)
2203
- }, null, 8, ["model-value", "placeholder"]))]),
2204
- _: 1
2205
- }, 8, [
2206
- "label",
2207
- "required",
2208
- "read-only"
2209
- ]));
2210
- }
2211
- }), io = [
2212
- "value",
2213
- "placeholder",
2214
- "title"
2215
- ], ao = "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", oo = {
2216
- text: ro,
2217
- textarea: /* @__PURE__ */ N({
2218
- __name: "TextareaField",
2219
- props: {
2220
- field: {},
2221
- modelValue: {},
2222
- readOnly: { type: Boolean }
2223
- },
2224
- emits: ["update:modelValue"],
2225
- setup(e, { emit: t }) {
2226
- let n = t, { t: r } = _();
2227
- return (t, i) => (L(), D($, {
2228
- label: e.field.label,
2229
- required: e.field.required,
2230
- "read-only": e.readOnly
2231
- }, {
2232
- default: W(() => [e.readOnly ? (L(), k("textarea", {
2233
- key: 0,
2234
- value: e.modelValue,
2235
- placeholder: e.field.placeholder,
2236
- rows: "3",
2237
- disabled: "",
2238
- title: H(r).customBlocks.dataSource.readOnlyTooltip,
2239
- class: F(ao)
2240
- }, null, 8, io)) : (L(), D(zn, {
2241
- key: 1,
2242
- "model-value": e.modelValue,
2243
- placeholder: e.field.placeholder,
2244
- "onUpdate:modelValue": i[0] ||= (e) => n("update:modelValue", e)
2245
- }, null, 8, ["model-value", "placeholder"]))]),
2246
- _: 1
2247
- }, 8, [
2248
- "label",
2249
- "required",
2250
- "read-only"
2251
- ]));
2252
- }
2253
- }),
2254
- image: Wa,
2255
- color: Va,
2256
- number: Ka,
2257
- select: to,
2258
- boolean: Ra,
2259
- repeatable: Qa
2260
- };
2261
- function so(e) {
2262
- return oo[e] ?? ro;
2263
- }
2264
- //#endregion
2265
- //#region src/components/toolbar/CustomBlockToolbar.vue?vue&type=script&setup=true&lang.ts
2266
- var co = {
2267
- key: 0,
2268
- class: "tpl:p-4"
2269
- }, lo = { class: "tpl:m-0 tpl:text-center tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, uo = { key: 1 }, fo = {
2270
- key: 0,
2271
- class: "tpl:m-0 tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
2272
- }, po = {
2273
- key: 1,
2274
- class: "tpl:mb-4"
2275
- }, mo = {
2276
- key: 1,
2277
- class: "tpl:flex tpl:h-[32px] tpl:items-center"
2278
- }, ho = {
2279
- key: 0,
2280
- class: "tpl:w-full tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
2281
- }, go = {
2282
- key: 2,
2283
- class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]"
2284
- }, _o = /* @__PURE__ */ N({
2285
- __name: "CustomBlockToolbar",
2286
- props: { block: {} },
2287
- emits: ["updateFieldValues", "updateDataSourceFetched"],
2288
- setup(e, { emit: t }) {
2289
- let n = e, r = t, { t: i } = _(), a = P(g, []), o = E(() => a.find((e) => e.type === n.block.customType)), { isFetching: s, fetchError: c, fetch: l, hasDataSource: u, needsFetch: d } = Xe({
2290
- definition: o,
2291
- block: E(() => n.block),
2292
- onUpdate: (e, t) => {
2293
- r("updateFieldValues", e), r("updateDataSourceFetched", t);
2294
- }
2295
- });
2296
- function f(e) {
2297
- return e.readOnly === !0 && u.value && !!n.block.dataSourceFetched;
2298
- }
2299
- function p(e, t) {
2300
- r("updateFieldValues", {
2301
- ...n.block.fieldValues,
2302
- [e]: t
2303
- });
2304
- }
2305
- return (t, n) => o.value ? (L(), k("div", uo, [
2306
- o.value.description ? (L(), k("p", fo, V(o.value.description), 1)) : O("", !0),
2307
- H(u) ? (L(), k("div", po, [H(d) && !H(s) ? (L(), k("button", {
2308
- key: 0,
2309
- type: "button",
2310
- 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)]",
2311
- onClick: n[0] ||= (...e) => H(l) && H(l)(...e)
2312
- }, V(o.value?.dataSource?.label || H(i).customBlocks.dataSource.fetchButton), 1)) : (L(), k("div", mo, [H(s) ? (L(), k("div", ho, V(H(i).customBlocks.dataSource.fetching), 1)) : (L(), k("button", {
2313
- key: 1,
2314
- type: "button",
2315
- 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)]",
2316
- onClick: n[1] ||= (...e) => H(l) && H(l)(...e)
2317
- }, [M(H(Oe), { size: 12 }), j(" " + V(H(i).customBlocks.dataSource.changeButton), 1)]))])), H(c) ? (L(), k("p", go, [M(H(Ce), {
2318
- size: 14,
2319
- class: "tpl:shrink-0"
2320
- }), j(" " + V(H(i).customBlocks.dataSource.fetchError), 1)])) : O("", !0)])) : O("", !0),
2321
- (L(!0), k(T, null, z(o.value.fields, (t) => (L(), D(B(H(so)(t.type)), {
2322
- key: t.key,
2323
- field: t,
2324
- "model-value": e.block.fieldValues[t.key],
2325
- "read-only": f(t),
2326
- "onUpdate:modelValue": (e) => p(t.key, e)
2327
- }, null, 8, [
2328
- "field",
2329
- "model-value",
2330
- "read-only",
2331
- "onUpdate:modelValue"
2332
- ]))), 128))
2333
- ])) : (L(), k("div", co, [A("p", lo, V(H(i).customBlocks.toolbar.noDefinition), 1)]));
2334
- }
2335
- }), vo = { class: "tpl:mb-3.5" }, yo = { class: "tpl:mb-3.5" }, bo = { class: "tpl:mb-3.5" }, xo = { class: "tpl:flex tpl:items-stretch" }, So = ["value"], Co = /* @__PURE__ */ N({
2336
- __name: "DividerToolbar",
2337
- props: { block: {} },
2338
- emits: ["update"],
2339
- setup(e, { emit: t }) {
2340
- let n = t, { t: r } = _();
2341
- function i(e, t) {
2342
- n("update", { [e]: t });
2343
- }
2344
- return (t, n) => (L(), k(T, null, [
2345
- A("div", vo, [A("label", { class: F(H(C)) }, V(H(r).divider.style), 3), M(Q, {
2346
- options: [
2347
- {
2348
- value: "solid",
2349
- label: H(r).divider.solid
2350
- },
2351
- {
2352
- value: "dashed",
2353
- label: H(r).divider.dashed
2354
- },
2355
- {
2356
- value: "dotted",
2357
- label: H(r).divider.dotted
2358
- }
2359
- ],
2360
- "model-value": e.block.lineStyle,
2361
- "onUpdate:modelValue": n[0] ||= (e) => i("lineStyle", e)
2362
- }, null, 8, ["options", "model-value"])]),
2363
- A("div", yo, [A("label", { class: F(H(C)) }, V(H(r).divider.color), 3), M(Y, {
2364
- "model-value": e.block.color,
2365
- "onUpdate:modelValue": n[1] ||= (e) => i("color", e)
2366
- }, null, 8, ["model-value"])]),
2367
- A("div", bo, [A("label", { class: F(H(C)) }, V(H(r).divider.thickness), 3), A("div", xo, [A("input", {
2368
- type: "number",
2369
- class: F(H(S)),
2370
- value: e.block.thickness,
2371
- min: "1",
2372
- max: "10",
2373
- onInput: n[2] ||= (e) => i("thickness", Number(e.target.value))
2374
- }, null, 42, So), A("span", { class: F(H(w)) }, "px", 2)])])
2375
- ], 64));
2376
- }
2377
- }), wo = { class: "tpl:mb-3.5" }, To = ["value"], Eo = { class: "tpl:mt-1.5 tpl:flex tpl:items-start tpl:gap-1.5 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, Do = /* @__PURE__ */ N({
2378
- __name: "HtmlToolbar",
2379
- props: { block: {} },
2380
- emits: ["update"],
2381
- setup(e, { emit: t }) {
2382
- let n = t, { t: r } = _();
2383
- return (t, i) => (L(), k("div", wo, [
2384
- A("label", { class: F(H(C)) }, V(H(r).html.content), 3),
2385
- A("textarea", {
2386
- value: e.block.content,
2387
- placeholder: "<div>...</div>",
2388
- rows: "10",
2389
- class: "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]",
2390
- onInput: i[0] ||= (e) => n("update", { content: e.target.value })
2391
- }, null, 40, To),
2392
- A("p", Eo, [M(H(Ee), {
2393
- size: 12,
2394
- class: "tpl:mt-0.5 tpl:shrink-0"
2395
- }), j(" " + V(H(r).html.sanitizationHint), 1)])
2396
- ]));
2397
- }
2398
- }), Oo = { class: "tpl:mb-3.5" }, ko = {
2399
- key: 0,
2400
- class: "tpl:mb-3.5"
2401
- }, Ao = ["value", "placeholder"], jo = { class: "tpl:mb-3.5" }, Mo = { class: "tpl:mb-3.5" }, No = ["value"], Po = { value: "full" }, Fo = { class: "tpl:mb-3.5" }, Io = { class: "tpl:mb-3.5" }, Lo = {
2402
- key: 0,
2403
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
2404
- }, Ro = ["checked"], zo = /* @__PURE__ */ N({
2405
- __name: "ImageToolbar",
2406
- props: { block: {} },
2407
- emits: ["update"],
2408
- setup(e, { emit: t }) {
2409
- let n = t, { t: r } = _(), i = P(de, null), a = P(he, Ze.liquid), o = E(() => !!i), s = R(!1), c = R(!1), { start: l } = le(() => {
2410
- s.value = !1;
2411
- }, 1e3, { immediate: !1 });
2412
- function u(e, t) {
2413
- n("update", { [e]: t });
2414
- }
2415
- async function d() {
2416
- let e = await i?.({ accept: ["images"] });
2417
- e && (u("src", e.url), e.alt && (u("alt", e.alt), c.value = !0), s.value = !0, l());
2418
- }
2419
- return (t, n) => (L(), k(T, null, [
2420
- A("div", Oo, [
2421
- A("label", { class: F(H(C)) }, V(H(r).image.imageUrl), 3),
2422
- M(X, {
2423
- "model-value": e.block.src,
2424
- type: "url",
2425
- placeholder: H(r).image.imageUrlPlaceholder,
2426
- pulse: s.value,
2427
- "onUpdate:modelValue": n[0] ||= (e) => u("src", e)
2428
- }, null, 8, [
2429
- "model-value",
2430
- "placeholder",
2431
- "pulse"
2432
- ]),
2433
- o.value ? (L(), k("button", {
2434
- key: 0,
2435
- 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",
2436
- style: {
2437
- "border-color": "var(--tpl-border)",
2438
- color: "var(--tpl-primary)",
2439
- "background-color": "var(--tpl-bg)"
2440
- },
2441
- onClick: d
2442
- }, [M(H(m), {
2443
- size: 14,
2444
- "stroke-width": 1.5
2445
- }), j(" " + V(H(r).image.browseMedia), 1)])) : O("", !0)
2446
- ]),
2447
- H(Qe)(e.block.src, H(a)) ? (L(), k("div", ko, [A("label", { class: F(H(C)) }, [j(V(H(r).image.placeholderUrl) + " ", 1), n[7] ||= A("span", { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, V("(optional)"), -1)], 2), A("input", {
2448
- type: "url",
2449
- class: F(H(x)),
2450
- value: e.block.placeholderUrl || "",
2451
- placeholder: H(r).image.placeholderUrlPlaceholder,
2452
- onInput: n[1] ||= (e) => u("placeholderUrl", e.target.value)
2453
- }, null, 42, Ao)])) : O("", !0),
2454
- A("div", jo, [A("label", { class: F(H(C)) }, V(H(r).image.altText), 3), M(X, {
2455
- "model-value": e.block.alt,
2456
- type: "text",
2457
- placeholder: H(r).image.altTextPlaceholder,
2458
- pulse: c.value,
2459
- "onUpdate:modelValue": n[2] ||= (e) => u("alt", e)
2460
- }, null, 8, [
2461
- "model-value",
2462
- "placeholder",
2463
- "pulse"
2464
- ])]),
2465
- A("div", Mo, [A("label", { class: F(H(C)) }, V(H(r).image.width), 3), A("select", {
2466
- class: F(H(x)),
2467
- value: e.block.width,
2468
- onChange: n[3] ||= (e) => u("width", e.target.value === "full" ? "full" : Number(e.target.value))
2469
- }, [
2470
- A("option", Po, V(H(r).image.fullWidth), 1),
2471
- n[8] ||= A("option", { value: "300" }, "300px", -1),
2472
- n[9] ||= A("option", { value: "400" }, "400px", -1),
2473
- n[10] ||= A("option", { value: "500" }, "500px", -1)
2474
- ], 42, No)]),
2475
- A("div", Fo, [A("label", { class: F(H(C)) }, V(H(r).title.align), 3), M(Q, {
2476
- options: [
2477
- {
2478
- value: "left",
2479
- label: H(r).title.alignLeft
2480
- },
2481
- {
2482
- value: "center",
2483
- label: H(r).title.alignCenter
2484
- },
2485
- {
2486
- value: "right",
2487
- label: H(r).title.alignRight
2488
- }
2489
- ],
2490
- "model-value": e.block.align,
2491
- "onUpdate:modelValue": n[4] ||= (e) => u("align", e)
2492
- }, null, 8, ["options", "model-value"])]),
2493
- A("div", Io, [
2494
- A("label", { class: F(H(C)) }, V(H(r).image.linkUrl), 3),
2495
- M(X, {
2496
- "model-value": e.block.linkUrl || "",
2497
- type: "url",
2498
- placeholder: H(r).image.imageUrlPlaceholder,
2499
- "onUpdate:modelValue": n[5] ||= (e) => u("linkUrl", e)
2500
- }, null, 8, ["model-value", "placeholder"]),
2501
- e.block.linkUrl ? (L(), k("label", Lo, [A("input", {
2502
- type: "checkbox",
2503
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
2504
- checked: e.block.linkOpenInNewTab ?? !1,
2505
- onChange: n[6] ||= (e) => u("linkOpenInNewTab", e.target.checked)
2506
- }, null, 40, Ro), j(" " + V(H(r).image.openInNewTab), 1)])) : O("", !0)
2507
- ])
2508
- ], 64));
2509
- }
2510
- }), Bo = { class: "tpl:mb-3.5" }, Vo = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Ho = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Uo = [
2511
- "value",
2512
- "placeholder",
2513
- "onInput"
2514
- ], Wo = ["title", "onClick"], Go = { class: "tpl:flex tpl:items-center tpl:gap-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Ko = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1" }, qo = ["checked", "onChange"], Jo = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1" }, Yo = ["checked", "onChange"], Xo = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1" }, Zo = ["checked", "onChange"], Qo = { class: "tpl:flex tpl:items-center tpl:gap-2" }, $o = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, es = { class: "tpl:mb-3.5" }, ts = ["value"], ns = { value: "" }, rs = ["value"], is = { class: "tpl:mb-3.5" }, as = { class: "tpl:flex tpl:items-stretch" }, os = ["value"], ss = { class: "tpl:mb-3.5" }, cs = { class: "tpl:mb-3.5" }, ls = { class: "tpl:mb-3.5" }, us = { class: "tpl:mb-3.5" }, ds = ["value"], fs = { class: "tpl:mb-3.5" }, ps = { class: "tpl:mb-3.5" }, ms = { class: "tpl:flex tpl:items-stretch" }, hs = ["value"], gs = /* @__PURE__ */ N({
2515
- __name: "MenuToolbar",
2516
- props: {
2517
- block: {},
2518
- fontFamilies: {}
2519
- },
2520
- emits: ["update"],
2521
- setup(e, { emit: t }) {
2522
- let n = e, r = t, { t: i } = _();
2523
- function a(e, t) {
2524
- r("update", { [e]: t });
2525
- }
2526
- function o() {
2527
- let e = {
2528
- id: tt(),
2529
- text: "",
2530
- url: "",
2531
- openInNewTab: !1,
2532
- bold: !1,
2533
- underline: !1
2534
- };
2535
- r("update", { items: [...n.block.items, e] });
2536
- }
2537
- function s(e, t, i) {
2538
- r("update", { items: n.block.items.map((n) => n.id === e ? {
2539
- ...n,
2540
- [t]: i
2541
- } : n) });
2542
- }
2543
- function c(e) {
2544
- r("update", { items: n.block.items.filter((t) => t.id !== e) });
2545
- }
2546
- return (t, n) => (L(), k(T, null, [
2547
- A("div", Bo, [A("label", { class: F(H(C)) }, V(H(i).menu.items), 3), A("div", Vo, [(L(!0), k(T, null, z(e.block.items, (t) => (L(), k("div", {
2548
- key: t.id,
2549
- 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"
2550
- }, [
2551
- A("div", Ho, [A("input", {
2552
- type: "text",
2553
- class: F([H(x), "tpl:flex-1"]),
2554
- value: t.text,
2555
- placeholder: H(i).menu.text,
2556
- onInput: (e) => s(t.id, "text", e.target.value)
2557
- }, null, 42, Uo), A("button", {
2558
- class: "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md 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)]",
2559
- title: H(i).menu.removeItem,
2560
- onClick: (e) => c(t.id)
2561
- }, [M(H(Be), {
2562
- size: 14,
2563
- "stroke-width": 2
2564
- })], 8, Wo)]),
2565
- M(X, {
2566
- "model-value": t.url,
2567
- type: "url",
2568
- placeholder: H(i).menu.urlPlaceholder,
2569
- "onUpdate:modelValue": (e) => s(t.id, "url", e)
2570
- }, null, 8, [
2571
- "model-value",
2572
- "placeholder",
2573
- "onUpdate:modelValue"
2574
- ]),
2575
- A("div", Go, [
2576
- A("label", Ko, [A("input", {
2577
- type: "checkbox",
2578
- checked: t.openInNewTab,
2579
- class: "tpl:accent-[var(--tpl-primary)]",
2580
- onChange: (e) => s(t.id, "openInNewTab", e.target.checked)
2581
- }, null, 40, qo), j(" " + V(H(i).menu.openInNewTab), 1)]),
2582
- A("label", Jo, [A("input", {
2583
- type: "checkbox",
2584
- checked: t.bold,
2585
- class: "tpl:accent-[var(--tpl-primary)]",
2586
- onChange: (e) => s(t.id, "bold", e.target.checked)
2587
- }, null, 40, Yo), j(" " + V(H(i).menu.bold), 1)]),
2588
- A("label", Xo, [A("input", {
2589
- type: "checkbox",
2590
- checked: t.underline,
2591
- class: "tpl:accent-[var(--tpl-primary)]",
2592
- onChange: (e) => s(t.id, "underline", e.target.checked)
2593
- }, null, 40, Zo), j(" " + V(H(i).menu.underline), 1)])
2594
- ]),
2595
- A("div", Qo, [A("label", $o, V(H(i).menu.color), 1), M(Y, {
2596
- "swatch-only": "",
2597
- "model-value": t.color || e.block.linkColor || e.block.color,
2598
- "onUpdate:modelValue": (e) => s(t.id, "color", e)
2599
- }, null, 8, ["model-value", "onUpdate:modelValue"])])
2600
- ]))), 128)), A("button", {
2601
- class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 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)]",
2602
- onClick: o
2603
- }, [M(H(q), {
2604
- size: 14,
2605
- "stroke-width": 2
2606
- }), j(" " + V(H(i).menu.addItem), 1)])])]),
2607
- A("div", es, [A("label", { class: F(H(C)) }, V(H(i).menu.fontFamily), 3), A("select", {
2608
- class: F(H(x)),
2609
- value: e.block.fontFamily || "",
2610
- onChange: n[0] ||= (e) => a("fontFamily", e.target.value || void 0)
2611
- }, [A("option", ns, V(H(i).title.inheritFont), 1), (L(!0), k(T, null, z(e.fontFamilies, (e) => (L(), k("option", {
2612
- key: e.value,
2613
- value: e.value
2614
- }, V(e.label), 9, rs))), 128))], 42, ts)]),
2615
- A("div", is, [A("label", { class: F(H(C)) }, V(H(i).menu.fontSize), 3), A("div", as, [A("input", {
2616
- type: "number",
2617
- class: F(H(S)),
2618
- value: e.block.fontSize,
2619
- min: "8",
2620
- max: "48",
2621
- onInput: n[1] ||= (e) => a("fontSize", Number(e.target.value))
2622
- }, null, 42, os), A("span", { class: F(H(w)) }, "px", 2)])]),
2623
- A("div", ss, [A("label", { class: F(H(C)) }, V(H(i).menu.color), 3), M(Y, {
2624
- "model-value": e.block.color,
2625
- "onUpdate:modelValue": n[2] ||= (e) => a("color", e)
2626
- }, null, 8, ["model-value"])]),
2627
- A("div", cs, [A("label", { class: F(H(C)) }, V(H(i).menu.linkColor), 3), M(Y, {
2628
- "model-value": e.block.linkColor || e.block.color,
2629
- "onUpdate:modelValue": n[3] ||= (e) => a("linkColor", e || void 0)
2630
- }, null, 8, ["model-value"])]),
2631
- A("div", ls, [A("label", { class: F(H(C)) }, V(H(i).menu.textAlign), 3), M(Q, {
2632
- options: [
2633
- {
2634
- value: "left",
2635
- label: H(i).title.alignLeft,
2636
- icon: H(Fe)
2637
- },
2638
- {
2639
- value: "center",
2640
- label: H(i).title.alignCenter,
2641
- icon: H(Me)
2642
- },
2643
- {
2644
- value: "right",
2645
- label: H(i).title.alignRight,
2646
- icon: H(Pe)
2647
- }
2648
- ],
2649
- "model-value": e.block.textAlign,
2650
- "onUpdate:modelValue": n[4] ||= (e) => a("textAlign", e)
2651
- }, null, 8, ["options", "model-value"])]),
2652
- A("div", us, [A("label", { class: F(H(C)) }, V(H(i).menu.separator), 3), A("input", {
2653
- type: "text",
2654
- class: F(H(x)),
2655
- value: e.block.separator,
2656
- onInput: n[5] ||= (e) => a("separator", e.target.value)
2657
- }, null, 42, ds)]),
2658
- A("div", fs, [A("label", { class: F(H(C)) }, V(H(i).menu.separatorColor), 3), M(Y, {
2659
- "model-value": e.block.separatorColor,
2660
- "onUpdate:modelValue": n[6] ||= (e) => a("separatorColor", e)
2661
- }, null, 8, ["model-value"])]),
2662
- A("div", ps, [A("label", { class: F(H(C)) }, V(H(i).menu.spacing), 3), A("div", ms, [A("input", {
2663
- type: "number",
2664
- class: F(H(S)),
2665
- value: e.block.spacing,
2666
- min: "0",
2667
- max: "50",
2668
- onInput: n[7] ||= (e) => a("spacing", Number(e.target.value))
2669
- }, null, 42, hs), A("span", { class: F(H(w)) }, "px", 2)])])
2670
- ], 64));
2671
- }
2672
- }), _s = { class: "tpl:mb-3.5" }, vs = ["value"], ys = ["value"], bs = /* @__PURE__ */ N({
2673
- __name: "SectionToolbar",
2674
- props: { block: {} },
2675
- emits: ["update"],
2676
- setup(e, { emit: t }) {
2677
- let n = t, { t: r } = _(), i = E(() => [
2678
- {
2679
- value: "1",
2680
- label: r.section.column1
2681
- },
2682
- {
2683
- value: "2",
2684
- label: r.section.column2
2685
- },
2686
- {
2687
- value: "3",
2688
- label: r.section.column3
2689
- },
2690
- {
2691
- value: "1-2",
2692
- label: r.section.ratio12
2693
- },
2694
- {
2695
- value: "2-1",
2696
- label: r.section.ratio21
2697
- }
2698
- ]);
2699
- return (t, a) => (L(), k("div", _s, [A("label", { class: F(H(C)) }, V(H(r).section.columns), 3), A("select", {
2700
- class: F(H(x)),
2701
- value: e.block.columns,
2702
- onChange: a[0] ||= (e) => n("update", { columns: e.target.value })
2703
- }, [(L(!0), k(T, null, z(i.value, (e) => (L(), k("option", {
2704
- key: e.value,
2705
- value: e.value
2706
- }, V(e.label), 9, ys))), 128))], 42, vs)]));
2707
- }
2708
- }), xs = { class: "tpl:mb-3.5" }, Ss = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Cs = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ws = ["value", "onChange"], Ts = ["value"], Es = ["title", "onClick"], Ds = { class: "tpl:mb-3.5" }, Os = { class: "tpl:mb-3.5" }, ks = { class: "tpl:mb-3.5" }, As = { class: "tpl:flex tpl:items-stretch" }, js = ["value"], Ms = { class: "tpl:mb-3.5" }, Ns = /* @__PURE__ */ N({
2709
- __name: "SocialToolbar",
2710
- props: { block: {} },
2711
- emits: ["update"],
2712
- setup(e, { emit: t }) {
2713
- let n = e, r = t, { t: i } = _();
2714
- function a(e, t) {
2715
- r("update", { [e]: t });
2716
- }
2717
- function o() {
2718
- let e = {
2719
- id: tt(),
2720
- platform: "facebook",
2721
- url: ""
2722
- };
2723
- r("update", { icons: [...n.block.icons, e] });
2724
- }
2725
- function s(e, t, i) {
2726
- r("update", { icons: n.block.icons.map((n) => n.id === e ? {
2727
- ...n,
2728
- [t]: i
2729
- } : n) });
2730
- }
2731
- function c(e) {
2732
- r("update", { icons: n.block.icons.filter((t) => t.id !== e) });
2733
- }
2734
- return (t, n) => (L(), k(T, null, [
2735
- A("div", xs, [A("label", { class: F(H(C)) }, V(H(i).social.icons), 3), A("div", Ss, [(L(!0), k(T, null, z(e.block.icons, (e) => (L(), k("div", {
2736
- key: e.id,
2737
- 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"
2738
- }, [A("div", Cs, [A("select", {
2739
- class: F([H(x), "tpl:flex-1"]),
2740
- value: e.platform,
2741
- onChange: (t) => s(e.id, "platform", t.target.value)
2742
- }, [(L(!0), k(T, null, z(H(ae), (e) => (L(), k("option", {
2743
- key: e,
2744
- value: e
2745
- }, V(H(ne)[e].name), 9, Ts))), 128))], 42, ws), A("button", {
2746
- class: "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md 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)]",
2747
- title: H(i).social.removeIcon,
2748
- onClick: (t) => c(e.id)
2749
- }, [M(H(Be), {
2750
- size: 14,
2751
- "stroke-width": 2
2752
- })], 8, Es)]), M(X, {
2753
- "model-value": e.url,
2754
- type: "url",
2755
- placeholder: H(i).social.urlPlaceholder,
2756
- "onUpdate:modelValue": (t) => s(e.id, "url", t)
2757
- }, null, 8, [
2758
- "model-value",
2759
- "placeholder",
2760
- "onUpdate:modelValue"
2761
- ])]))), 128)), A("button", {
2762
- class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 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)]",
2763
- onClick: o
2764
- }, [M(H(q), {
2765
- size: 14,
2766
- "stroke-width": 2
2767
- }), j(" " + V(H(i).social.addIcon), 1)])])]),
2768
- A("div", Ds, [A("label", { class: F(H(C)) }, V(H(i).social.style), 3), M(Q, {
2769
- options: [
2770
- {
2771
- value: "solid",
2772
- label: H(i).social.styleSolid
2773
- },
2774
- {
2775
- value: "outlined",
2776
- label: H(i).social.styleOutlined
2777
- },
2778
- {
2779
- value: "rounded",
2780
- label: H(i).social.styleRounded
2781
- },
2782
- {
2783
- value: "square",
2784
- label: H(i).social.styleSquare
2785
- },
2786
- {
2787
- value: "circle",
2788
- label: H(i).social.styleCircle
2789
- }
2790
- ],
2791
- "model-value": e.block.iconStyle,
2792
- "onUpdate:modelValue": n[0] ||= (e) => a("iconStyle", e)
2793
- }, null, 8, ["options", "model-value"])]),
2794
- A("div", Os, [A("label", { class: F(H(C)) }, V(H(i).social.size), 3), M(Q, {
2795
- options: [
2796
- {
2797
- value: "small",
2798
- label: H(i).social.sizeSmall
2799
- },
2800
- {
2801
- value: "medium",
2802
- label: H(i).social.sizeMedium
2803
- },
2804
- {
2805
- value: "large",
2806
- label: H(i).social.sizeLarge
2807
- }
2808
- ],
2809
- "model-value": e.block.iconSize,
2810
- "onUpdate:modelValue": n[1] ||= (e) => a("iconSize", e)
2811
- }, null, 8, ["options", "model-value"])]),
2812
- A("div", ks, [A("label", { class: F(H(C)) }, V(H(i).social.spacing), 3), A("div", As, [A("input", {
2813
- type: "number",
2814
- class: F(H(S)),
2815
- value: e.block.spacing,
2816
- min: "0",
2817
- max: "50",
2818
- onInput: n[2] ||= (e) => a("spacing", Number(e.target.value))
2819
- }, null, 42, js), A("span", { class: F(H(w)) }, "px", 2)])]),
2820
- A("div", Ms, [A("label", { class: F(H(C)) }, V(H(i).social.align), 3), M(Q, {
2821
- options: [
2822
- {
2823
- value: "left",
2824
- label: H(i).title.alignLeft,
2825
- icon: H(Fe)
2826
- },
2827
- {
2828
- value: "center",
2829
- label: H(i).title.alignCenter,
2830
- icon: H(Me)
2831
- },
2832
- {
2833
- value: "right",
2834
- label: H(i).title.alignRight,
2835
- icon: H(Pe)
2836
- }
2837
- ],
2838
- "model-value": e.block.align,
2839
- "onUpdate:modelValue": n[3] ||= (e) => a("align", e)
2840
- }, null, 8, ["options", "model-value"])])
2841
- ], 64));
2842
- }
2843
- }), Ps = { class: "tpl:mb-3.5" }, Fs = { class: "tpl:flex tpl:items-stretch" }, Is = ["value"], Ls = ["value"], Rs = /* @__PURE__ */ N({
2844
- __name: "SpacerToolbar",
2845
- props: { block: {} },
2846
- emits: ["update"],
2847
- setup(e, { emit: t }) {
2848
- let n = t, { t: r } = _();
2849
- return (t, i) => (L(), k("div", Ps, [
2850
- A("label", { class: F(H(C)) }, V(H(r).spacer.height), 3),
2851
- A("div", Fs, [A("input", {
2852
- type: "number",
2853
- class: F(H(S)),
2854
- value: e.block.height,
2855
- min: "10",
2856
- max: "100",
2857
- onInput: i[0] ||= (e) => n("update", { height: Number(e.target.value) })
2858
- }, null, 42, Is), A("span", { class: F(H(w)) }, "px", 2)]),
2859
- A("input", {
2860
- type: "range",
2861
- class: "tpl:mt-2 tpl:w-full tpl:accent-[var(--tpl-primary)]",
2862
- value: e.block.height,
2863
- min: "10",
2864
- max: "100",
2865
- onInput: i[1] ||= (e) => n("update", { height: Number(e.target.value) })
2866
- }, null, 40, Ls)
2867
- ]));
2868
- }
2869
- }), zs = { class: "tpl:mb-3.5" }, Bs = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Vs = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, Hs = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Us = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, Ws = ["disabled"], Gs = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, Ks = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, qs = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Js = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, Ys = ["disabled"], Xs = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, Zs = { class: "tpl:mb-3.5" }, Qs = { 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)]" }, $s = ["checked"], ec = {
2870
- key: 0,
2871
- class: "tpl:mb-3.5"
2872
- }, tc = { class: "tpl:mb-3.5" }, nc = { class: "tpl:mb-3.5" }, rc = { class: "tpl:flex tpl:items-stretch" }, ic = ["value"], ac = { class: "tpl:mb-3.5" }, oc = { class: "tpl:flex tpl:items-stretch" }, sc = ["value"], cc = { class: "tpl:mb-3.5" }, lc = ["value"], uc = { value: "" }, dc = ["value"], fc = { class: "tpl:mb-3.5" }, pc = { class: "tpl:flex tpl:items-stretch" }, mc = ["value"], hc = { class: "tpl:mb-3.5" }, gc = { class: "tpl:mb-3.5" }, _c = /* @__PURE__ */ N({
2873
- __name: "TableToolbar",
2874
- props: {
2875
- block: {},
2876
- fontFamilies: {}
2877
- },
2878
- emits: ["update"],
2879
- setup(e, { emit: t }) {
2880
- let n = e, r = t, { t: i } = _(), a = E(() => n.block.rows.length > 0 ? n.block.rows[0].cells.length : 0);
2881
- function o(e, t) {
2882
- r("update", { [e]: t });
2883
- }
2884
- function s() {
2885
- let e = n.block.rows.length > 0 ? n.block.rows[0].cells.length : 3, t = {
2886
- id: tt(),
2887
- cells: Array.from({ length: e }, () => ({
2888
- id: tt(),
2889
- content: ""
2890
- }))
2891
- };
2892
- r("update", { rows: [...n.block.rows, t] });
2893
- }
2894
- function c(e) {
2895
- r("update", { rows: n.block.rows.filter((t) => t.id !== e) });
2896
- }
2897
- function l() {
2898
- r("update", { rows: n.block.rows.map((e) => ({
2899
- ...e,
2900
- cells: [...e.cells, {
2901
- id: tt(),
2902
- content: ""
2903
- }]
2904
- })) });
2905
- }
2906
- function u(e) {
2907
- r("update", { rows: n.block.rows.map((t) => ({
2908
- ...t,
2909
- cells: t.cells.filter((t, n) => n !== e)
2910
- })) });
2911
- }
2912
- return (t, n) => (L(), k(T, null, [
2913
- A("div", zs, [A("label", { class: F(H(C)) }, V(H(i).table.dimensions), 3), A("div", Bs, [A("div", Vs, [A("span", Hs, V(H(i).table.rows), 1), A("div", Us, [
2914
- A("button", {
2915
- 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",
2916
- disabled: e.block.rows.length <= 1,
2917
- onClick: n[0] ||= (t) => c(e.block.rows[e.block.rows.length - 1].id)
2918
- }, [M(H(b), {
2919
- size: 12,
2920
- "stroke-width": 2
2921
- })], 8, Ws),
2922
- A("span", Gs, V(e.block.rows.length), 1),
2923
- A("button", {
2924
- 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)]",
2925
- onClick: s
2926
- }, [M(H(q), {
2927
- size: 12,
2928
- "stroke-width": 2
2929
- })])
2930
- ])]), A("div", Ks, [A("span", qs, V(H(i).table.columns), 1), A("div", Js, [
2931
- A("button", {
2932
- 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",
2933
- disabled: a.value <= 1,
2934
- onClick: n[1] ||= (e) => u(a.value - 1)
2935
- }, [M(H(b), {
2936
- size: 12,
2937
- "stroke-width": 2
2938
- })], 8, Ys),
2939
- A("span", Xs, V(a.value), 1),
2940
- A("button", {
2941
- 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)]",
2942
- onClick: l
2943
- }, [M(H(q), {
2944
- size: 12,
2945
- "stroke-width": 2
2946
- })])
2947
- ])])])]),
2948
- A("div", Zs, [A("label", Qs, [A("input", {
2949
- type: "checkbox",
2950
- checked: e.block.hasHeaderRow,
2951
- class: "tpl:accent-[var(--tpl-primary)]",
2952
- onChange: n[2] ||= (e) => o("hasHeaderRow", e.target.checked)
2953
- }, null, 40, $s), j(" " + V(H(i).table.hasHeaderRow), 1)])]),
2954
- e.block.hasHeaderRow ? (L(), k("div", ec, [A("label", { class: F(H(C)) }, V(H(i).table.headerBackgroundColor), 3), M(Y, {
2955
- "model-value": e.block.headerBackgroundColor || H("#f2f2f2"),
2956
- placeholder: H(i).table.noHeaderBg,
2957
- "onUpdate:modelValue": n[3] ||= (e) => o("headerBackgroundColor", e || null)
2958
- }, null, 8, ["model-value", "placeholder"])])) : O("", !0),
2959
- A("div", tc, [A("label", { class: F(H(C)) }, V(H(i).table.borderColor), 3), M(Y, {
2960
- "model-value": e.block.borderColor,
2961
- "onUpdate:modelValue": n[4] ||= (e) => o("borderColor", e)
2962
- }, null, 8, ["model-value"])]),
2963
- A("div", nc, [A("label", { class: F(H(C)) }, V(H(i).table.borderWidth), 3), A("div", rc, [A("input", {
2964
- type: "number",
2965
- class: F(H(S)),
2966
- value: e.block.borderWidth,
2967
- min: "0",
2968
- max: "10",
2969
- onInput: n[5] ||= (e) => o("borderWidth", Number(e.target.value))
2970
- }, null, 42, ic), A("span", { class: F(H(w)) }, "px", 2)])]),
2971
- A("div", ac, [A("label", { class: F(H(C)) }, V(H(i).table.cellPadding), 3), A("div", oc, [A("input", {
2972
- type: "number",
2973
- class: F(H(S)),
2974
- value: e.block.cellPadding,
2975
- min: "0",
2976
- max: "30",
2977
- onInput: n[6] ||= (e) => o("cellPadding", Number(e.target.value))
2978
- }, null, 42, sc), A("span", { class: F(H(w)) }, "px", 2)])]),
2979
- A("div", cc, [A("label", { class: F(H(C)) }, V(H(i).table.fontFamily), 3), A("select", {
2980
- class: F(H(x)),
2981
- value: e.block.fontFamily || "",
2982
- onChange: n[7] ||= (e) => o("fontFamily", e.target.value || void 0)
2983
- }, [A("option", uc, V(H(i).title.inheritFont), 1), (L(!0), k(T, null, z(e.fontFamilies, (e) => (L(), k("option", {
2984
- key: e.value,
2985
- value: e.value
2986
- }, V(e.label), 9, dc))), 128))], 42, lc)]),
2987
- A("div", fc, [A("label", { class: F(H(C)) }, V(H(i).table.fontSize), 3), A("div", pc, [A("input", {
2988
- type: "number",
2989
- class: F(H(S)),
2990
- value: e.block.fontSize,
2991
- min: "10",
2992
- max: "32",
2993
- onInput: n[8] ||= (e) => o("fontSize", Number(e.target.value))
2994
- }, null, 42, mc), A("span", { class: F(H(w)) }, "px", 2)])]),
2995
- A("div", hc, [A("label", { class: F(H(C)) }, V(H(i).table.color), 3), M(Y, {
2996
- "model-value": e.block.color,
2997
- "onUpdate:modelValue": n[9] ||= (e) => o("color", e)
2998
- }, null, 8, ["model-value"])]),
2999
- A("div", gc, [A("label", { class: F(H(C)) }, V(H(i).table.textAlign), 3), M(Q, {
3000
- options: [
3001
- {
3002
- value: "left",
3003
- label: H(i).title.alignLeft,
3004
- icon: H(Fe)
3005
- },
3006
- {
3007
- value: "center",
3008
- label: H(i).title.alignCenter,
3009
- icon: H(Me)
3010
- },
3011
- {
3012
- value: "right",
3013
- label: H(i).title.alignRight,
3014
- icon: H(Pe)
3015
- }
3016
- ],
3017
- "model-value": e.block.textAlign,
3018
- "onUpdate:modelValue": n[10] ||= (e) => o("textAlign", e)
3019
- }, null, 8, ["options", "model-value"])])
3020
- ], 64));
3021
- }
3022
- }), vc = { class: "tpl:mb-3.5" }, yc = ["value"], bc = { value: 1 }, xc = { value: 2 }, Sc = { value: 3 }, Cc = { value: 4 }, wc = { class: "tpl:mb-3.5" }, Tc = ["value"], Ec = { value: "" }, Dc = ["value"], Oc = { class: "tpl:mb-3.5" }, kc = { class: "tpl:mb-3.5" }, Ac = /* @__PURE__ */ N({
3023
- __name: "TitleToolbar",
3024
- props: {
3025
- block: {},
3026
- fontFamilies: {}
3027
- },
3028
- emits: ["update"],
3029
- setup(e, { emit: t }) {
3030
- let n = t, { t: r } = _();
3031
- function i(e, t) {
3032
- n("update", { [e]: t });
3033
- }
3034
- return (t, n) => (L(), k(T, null, [
3035
- A("div", vc, [A("label", { class: F(H(C)) }, V(H(r).title.level), 3), A("select", {
3036
- class: F(H(x)),
3037
- value: e.block.level,
3038
- onChange: n[0] ||= (e) => i("level", Number(e.target.value))
3039
- }, [
3040
- A("option", bc, V(H(r).title.heading1), 1),
3041
- A("option", xc, V(H(r).title.heading2), 1),
3042
- A("option", Sc, V(H(r).title.heading3), 1),
3043
- A("option", Cc, V(H(r).title.heading4), 1)
3044
- ], 42, yc)]),
3045
- A("div", wc, [A("label", { class: F(H(C)) }, V(H(r).title.fontFamily), 3), A("select", {
3046
- class: F(H(x)),
3047
- value: e.block.fontFamily || "",
3048
- onChange: n[1] ||= (e) => i("fontFamily", e.target.value || void 0)
3049
- }, [A("option", Ec, V(H(r).title.inheritFont), 1), (L(!0), k(T, null, z(e.fontFamilies, (e) => (L(), k("option", {
3050
- key: e.value,
3051
- value: e.value
3052
- }, V(e.label), 9, Dc))), 128))], 42, Tc)]),
3053
- A("div", Oc, [A("label", { class: F(H(C)) }, V(H(r).title.color), 3), M(Y, {
3054
- "model-value": e.block.color,
3055
- "onUpdate:modelValue": n[2] ||= (e) => i("color", e)
3056
- }, null, 8, ["model-value"])]),
3057
- A("div", kc, [A("label", { class: F(H(C)) }, V(H(r).title.align), 3), M(Q, {
3058
- options: [
3059
- {
3060
- value: "left",
3061
- label: H(r).title.alignLeft,
3062
- icon: H(Fe)
3063
- },
3064
- {
3065
- value: "center",
3066
- label: H(r).title.alignCenter,
3067
- icon: H(Me)
3068
- },
3069
- {
3070
- value: "right",
3071
- label: H(r).title.alignRight,
3072
- icon: H(Pe)
3073
- }
3074
- ],
3075
- "model-value": e.block.textAlign,
3076
- "onUpdate:modelValue": n[3] ||= (e) => i("textAlign", e)
3077
- }, null, 8, ["options", "model-value"])])
3078
- ], 64));
3079
- }
3080
- }), jc = { class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]" }, Mc = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3.5" }, Nc = { class: "tpl:flex tpl:items-center tpl:gap-2 tpl:text-[var(--tpl-primary)]" }, Pc = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Fc = { class: "tpl:flex tpl:gap-1" }, Ic = ["title"], Lc = ["title"], Rc = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, zc = /* @__PURE__ */ y(/* @__PURE__ */ N({
3081
- __name: "Toolbar",
3082
- props: { block: {} },
3083
- emits: [
3084
- "update",
3085
- "delete",
3086
- "duplicate"
3087
- ],
3088
- setup(e, { emit: t }) {
3089
- let r = e, i = t, { t: a } = _(), o = xe(ye, "Toolbar"), s = P(g, []), c = E(() => r.block.type), l = E(() => rt(r.block)), u = E(() => {
3090
- if (l.value) return s.find((e) => e.type === r.block.customType);
3091
- }), d = E(() => l.value ? u.value?.name ?? r.block.customType : kt(c.value, a)), f = o.fonts;
3092
- function m(e) {
3093
- i("update", e);
3094
- }
3095
- return (t, r) => (L(), k("aside", jc, [A("div", Mc, [A("div", Nc, [H(Te)[c.value] ? (L(), D(B(H(Te)[c.value]), {
3096
- key: 0,
3097
- size: 16,
3098
- "stroke-width": 1.5
3099
- })) : l.value ? (L(), D(H(n), {
3100
- key: 1,
3101
- size: 16,
3102
- "stroke-width": 1.5
3103
- })) : O("", !0), A("h3", Pc, V(d.value), 1)]), A("div", Fc, [A("button", {
3104
- 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)]",
3105
- title: H(a).toolbar.duplicate,
3106
- onClick: r[0] ||= (e) => i("duplicate")
3107
- }, [M(H(p), {
3108
- size: 14,
3109
- "stroke-width": 2
3110
- })], 8, Ic), A("button", {
3111
- 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)]",
3112
- title: H(a).toolbar.delete,
3113
- onClick: r[1] ||= (e) => i("delete")
3114
- }, [M(H(ze), {
3115
- size: 14,
3116
- "stroke-width": 2
3117
- })], 8, Lc)])]), A("div", Rc, [l.value ? (L(), D(_o, {
3118
- key: 0,
3119
- block: e.block,
3120
- onUpdateFieldValues: r[2] ||= (e) => i("update", { fieldValues: e }),
3121
- onUpdateDataSourceFetched: r[3] ||= (e) => i("update", { dataSourceFetched: e })
3122
- }, null, 8, ["block"])) : c.value === "section" ? (L(), D(bs, {
3123
- key: 1,
3124
- block: e.block,
3125
- onUpdate: m
3126
- }, null, 8, ["block"])) : c.value === "title" ? (L(), D(Ac, {
3127
- key: 2,
3128
- block: e.block,
3129
- "font-families": H(f),
3130
- onUpdate: m
3131
- }, null, 8, ["block", "font-families"])) : c.value === "paragraph" ? (L(), k(T, { key: 3 }, [], 64)) : c.value === "image" ? (L(), D(zo, {
3132
- key: 4,
3133
- block: e.block,
3134
- onUpdate: m
3135
- }, null, 8, ["block"])) : c.value === "button" ? (L(), D(Br, {
3136
- key: 5,
3137
- block: e.block,
3138
- "font-families": H(f),
3139
- onUpdate: m
3140
- }, null, 8, ["block", "font-families"])) : c.value === "divider" ? (L(), D(Co, {
3141
- key: 6,
3142
- block: e.block,
3143
- onUpdate: m
3144
- }, null, 8, ["block"])) : c.value === "social" ? (L(), D(Ns, {
3145
- key: 7,
3146
- block: e.block,
3147
- onUpdate: m
3148
- }, null, 8, ["block"])) : c.value === "menu" ? (L(), D(gs, {
3149
- key: 8,
3150
- block: e.block,
3151
- "font-families": H(f),
3152
- onUpdate: m
3153
- }, null, 8, ["block", "font-families"])) : c.value === "table" ? (L(), D(_c, {
3154
- key: 9,
3155
- block: e.block,
3156
- "font-families": H(f),
3157
- onUpdate: m
3158
- }, null, 8, ["block", "font-families"])) : c.value === "spacer" ? (L(), D(Rs, {
3159
- key: 10,
3160
- block: e.block,
3161
- onUpdate: m
3162
- }, null, 8, ["block"])) : c.value === "html" ? (L(), D(Do, {
3163
- key: 11,
3164
- block: e.block,
3165
- onUpdate: m
3166
- }, null, 8, ["block"])) : c.value === "countdown" ? (L(), D(Na, {
3167
- key: 12,
3168
- block: e.block,
3169
- "font-families": H(f),
3170
- onUpdate: m
3171
- }, null, 8, ["block", "font-families"])) : O("", !0), M(Hi, {
3172
- block: e.block,
3173
- "is-first-section": c.value === "paragraph",
3174
- onUpdate: m
3175
- }, null, 8, ["block", "is-first-section"])])]));
3176
- }
3177
- }), [["__scopeId", "data-v-5b0a61e5"]]), Bc = {
3178
- role: "tablist",
3179
- class: "tpl:relative tpl:flex tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)]"
3180
- }, Vc = ["aria-selected"], Hc = ["aria-selected"], Uc = {
3181
- key: 0,
3182
- id: "tpl-tabpanel-content",
3183
- role: "tabpanel",
3184
- "aria-labelledby": "tpl-tab-content",
3185
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
3186
- }, Wc = {
3187
- key: 1,
3188
- 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)]"
3189
- }, Gc = { class: "tpl:mb-4 tpl:text-[var(--tpl-text-dim)]" }, Kc = { class: "tpl:m-0 tpl:mb-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, qc = { class: "tpl:m-0 tpl:text-sm tpl:leading-normal" }, Jc = {
3190
- key: 1,
3191
- id: "tpl-tabpanel-settings",
3192
- role: "tabpanel",
3193
- "aria-labelledby": "tpl-tab-settings",
3194
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
3195
- }, Yc = /* @__PURE__ */ N({
3196
- __name: "RightSidebar",
3197
- props: {
3198
- selectedBlock: {},
3199
- settings: {},
3200
- shiftedLeft: { type: Boolean }
3201
- },
3202
- emits: [
3203
- "update-block",
3204
- "delete-block",
3205
- "duplicate-block",
3206
- "update-settings"
3207
- ],
3208
- setup(e, { emit: t }) {
3209
- let n = e, r = t, { t: i } = _(), a = R("content"), o = E(() => a.value === "content" ? "tpl:translate-x-0" : "tpl:translate-x-full");
3210
- return Je(() => n.selectedBlock, (e) => {
3211
- e && (a.value = "content");
3212
- }), (t, n) => (L(), k("aside", { class: F(["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"]) }, [
3213
- A("div", Bc, [
3214
- A("div", { class: F(["tpl:absolute tpl:bottom-0 tpl:left-0 tpl:h-full tpl:w-1/2 tpl:p-1.5 tpl:transition-transform tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", o.value]) }, [...n[6] ||= [A("div", { class: "tpl:h-full tpl:w-full tpl:rounded-[var(--tpl-radius-sm)] tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)]" }, null, -1)]], 2),
3215
- A("button", {
3216
- id: "tpl-tab-content",
3217
- role: "tab",
3218
- "aria-selected": a.value === "content",
3219
- "aria-controls": "tpl-tabpanel-content",
3220
- class: F(["tpl:relative tpl:z-10 tpl:flex tpl:flex-1 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:border-none tpl:bg-transparent tpl:px-4 tpl:py-3 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-[120ms]", a.value === "content" ? "tpl:text-[var(--tpl-primary)]" : "tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]"]),
3221
- onClick: n[0] ||= (e) => a.value = "content"
3222
- }, [M(H(dt), {
3223
- size: 14,
3224
- "stroke-width": 2
3225
- }), j(" " + V(H(i).sidebar.content), 1)], 10, Vc),
3226
- A("button", {
3227
- id: "tpl-tab-settings",
3228
- role: "tab",
3229
- "aria-selected": a.value === "settings",
3230
- "aria-controls": "tpl-tabpanel-settings",
3231
- class: F(["tpl:relative tpl:z-10 tpl:flex tpl:flex-1 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:border-none tpl:bg-transparent tpl:px-4 tpl:py-3 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-[120ms]", a.value === "settings" ? "tpl:text-[var(--tpl-primary)]" : "tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]"]),
3232
- onClick: n[1] ||= (e) => a.value = "settings"
3233
- }, [M(H(pt), {
3234
- size: 14,
3235
- "stroke-width": 1.5
3236
- }), j(" " + V(H(i).sidebar.settings), 1)], 10, Hc)
3237
- ]),
3238
- a.value === "content" ? (L(), k("div", Uc, [e.selectedBlock ? (L(), D(zc, {
3239
- key: 0,
3240
- block: e.selectedBlock,
3241
- onUpdate: n[2] ||= (e) => r("update-block", e),
3242
- onDelete: n[3] ||= (e) => r("delete-block"),
3243
- onDuplicate: n[4] ||= (e) => r("duplicate-block")
3244
- }, null, 8, ["block"])) : (L(), k("div", Wc, [
3245
- A("div", Gc, [M(H(ot), {
3246
- size: 40,
3247
- "stroke-width": 1.5
3248
- })]),
3249
- A("h4", Kc, V(H(i).sidebar.noSelection), 1),
3250
- A("p", qc, V(H(i).sidebar.noSelectionHint), 1)
3251
- ]))])) : O("", !0),
3252
- a.value === "settings" ? (L(), k("div", Jc, [M(lr, {
3253
- settings: e.settings,
3254
- onUpdate: n[5] ||= (e) => r("update-settings", e)
3255
- }, null, 8, ["settings"])])) : O("", !0)
3256
- ], 2));
3257
- }
3258
- }), Xc = [
3259
- "aria-checked",
3260
- "aria-label",
3261
- "title",
3262
- "onClick"
3263
- ], Zc = /* @__PURE__ */ N({
3264
- __name: "ViewportToggle",
3265
- props: { viewport: {} },
3266
- emits: ["change"],
3267
- setup(e, { emit: t }) {
3268
- let n = e, r = t, { t: i } = _(), a = E(() => [
3269
- {
3270
- value: "desktop",
3271
- label: i.viewport.desktop
3272
- },
3273
- {
3274
- value: "tablet",
3275
- label: i.viewport.tablet
3276
- },
3277
- {
3278
- value: "mobile",
3279
- label: i.viewport.mobile
3280
- }
3281
- ]), o = E(() => `translateX(${a.value.findIndex((e) => e.value === n.viewport) * 100}%)`);
3282
- return (t, n) => (L(), k("div", {
3283
- role: "radiogroup",
3284
- "aria-label": "Viewport",
3285
- class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
3286
- style: I({
3287
- gridTemplateColumns: `repeat(${a.value.length}, 1fr)`,
3288
- backgroundColor: "var(--tpl-bg-hover)"
3289
- })
3290
- }, [A("div", {
3291
- class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
3292
- style: I({
3293
- left: "4px",
3294
- width: `calc((100% - 8px) / ${a.value.length})`,
3295
- transform: o.value,
3296
- backgroundColor: "var(--tpl-bg)",
3297
- boxShadow: "var(--tpl-shadow)",
3298
- transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
3299
- })
3300
- }, null, 4), (L(!0), k(T, null, z(a.value, (t) => (L(), k("button", {
3301
- key: t.value,
3302
- role: "radio",
3303
- "aria-checked": e.viewport === t.value,
3304
- "aria-label": t.label,
3305
- 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",
3306
- style: I({
3307
- color: e.viewport === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3308
- transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
3309
- }),
3310
- title: t.label,
3311
- onClick: (e) => r("change", t.value)
3312
- }, [t.value === "desktop" ? (L(), D(H(lt), {
3313
- key: 0,
3314
- size: 18,
3315
- "stroke-width": 1.5
3316
- })) : t.value === "tablet" ? (L(), D(H(vt), {
3317
- key: 1,
3318
- size: 18,
3319
- "stroke-width": 1.5
3320
- })) : (L(), D(H(mt), {
3321
- key: 2,
3322
- size: 18,
3323
- "stroke-width": 1.5
3324
- })), A("span", null, V(t.label), 1)], 12, Xc))), 128))], 4));
3325
- }
3326
- }), Qc = [
3327
- "aria-label",
3328
- "title",
3329
- "aria-pressed"
3330
- ], $c = /* @__PURE__ */ y(/* @__PURE__ */ N({
3331
- __name: "PreviewToggle",
3332
- props: { previewMode: { type: Boolean } },
3333
- emits: ["change"],
3334
- setup(t, { emit: n }) {
3335
- let r = n, { t: i } = _();
3336
- return (n, a) => (L(), k("button", {
3337
- 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",
3338
- style: I({
3339
- color: t.previewMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3340
- backgroundColor: t.previewMode ? "var(--tpl-primary-light)" : "transparent"
3341
- }),
3342
- "aria-label": t.previewMode ? H(i).previewMode.disable : H(i).previewMode.enable,
3343
- title: t.previewMode ? H(i).previewMode.disable : H(i).previewMode.enable,
3344
- "aria-pressed": t.previewMode,
3345
- onClick: a[0] ||= (e) => r("change", !t.previewMode)
3346
- }, [M(He, {
3347
- "enter-active-class": "tpl-icon-enter-active",
3348
- "leave-active-class": "tpl-icon-leave-active",
3349
- "enter-from-class": "tpl-icon-enter-from",
3350
- "leave-to-class": "tpl-icon-leave-to",
3351
- mode: "out-in"
3352
- }, {
3353
- default: W(() => [t.previewMode ? (L(), D(H(De), {
3354
- key: "eye",
3355
- size: 18,
3356
- "stroke-width": 1.5
3357
- })) : (L(), D(H(e), {
3358
- key: "eye-off",
3359
- size: 18,
3360
- "stroke-width": 1.5
3361
- }))]),
3362
- _: 1
3363
- })], 12, Qc));
3364
- }
3365
- }), [["__scopeId", "data-v-af87d02a"]]), el = [
3366
- "aria-label",
3367
- "title",
3368
- "aria-pressed"
3369
- ], tl = /* @__PURE__ */ y(/* @__PURE__ */ N({
3370
- __name: "DarkModeToggle",
3371
- props: { darkMode: { type: Boolean } },
3372
- emits: ["change"],
3373
- setup(e, { emit: t }) {
3374
- let n = t, { t: r } = _();
3375
- return (t, i) => (L(), k("button", {
3376
- 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",
3377
- style: I({
3378
- color: e.darkMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3379
- backgroundColor: e.darkMode ? "var(--tpl-primary-light)" : "transparent"
3380
- }),
3381
- "aria-label": e.darkMode ? H(r).darkMode.disable : H(r).darkMode.enable,
3382
- title: e.darkMode ? H(r).darkMode.disable : H(r).darkMode.enable,
3383
- "aria-pressed": e.darkMode,
3384
- onClick: i[0] ||= (t) => n("change", !e.darkMode)
3385
- }, [M(He, {
3386
- "enter-active-class": "tpl-icon-enter-active",
3387
- "leave-active-class": "tpl-icon-leave-active",
3388
- "enter-from-class": "tpl-icon-enter-from",
3389
- "leave-to-class": "tpl-icon-leave-to",
3390
- mode: "out-in"
3391
- }, {
3392
- default: W(() => [e.darkMode ? (L(), D(H(ut), {
3393
- key: "moon",
3394
- size: 18,
3395
- "stroke-width": 1.5
3396
- })) : (L(), D(H(_t), {
3397
- key: "sun",
3398
- size: 18,
3399
- "stroke-width": 1.5
3400
- }))]),
3401
- _: 1
3402
- })], 12, el));
3403
- }
3404
- }), [["__scopeId", "data-v-f8694f76"]]);
3405
- //#endregion
3406
- export { Lt as a, Yc as i, $c as n, Ot as o, Zc as r, ft as s, tl as t };