@templatical/editor 0.0.5 → 0.1.0

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