@templatical/editor 0.14.0 → 0.15.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 (152) hide show
  1. package/dist/{AiChatSidebar-J8iO_sX7.js → AiChatSidebar-BIKvYREk.js} +57 -56
  2. package/dist/{AiFeatureMenu-F2diEDgV.js → AiFeatureMenu-QbD82crt.js} +20 -20
  3. package/dist/{BlockIssueBadge-a-qlByxF.js → BlockIssueBadge-B3xVgMTh.js} +11 -11
  4. package/dist/{CloudEditor-CDjtwb4i.js → CloudEditor-DptuSf7A.js} +470 -468
  5. package/dist/{CollaboratorBar-B_EnJLtW.js → CollaboratorBar-DrA_K69w.js} +20 -20
  6. package/dist/{CommentsSidebar-DaP9BA_r.js → CommentsSidebar-D_tSGvTX.js} +154 -153
  7. package/dist/CountdownBlock-apiYUhkQ.js +92 -0
  8. package/dist/CountdownToolbar-CS0axcjz.js +210 -0
  9. package/dist/{DesignReferenceSidebar-BHRlTqlT.js → DesignReferenceSidebar-DWYK9nTk.js} +58 -57
  10. package/dist/{IssuesPanel-u7ee3Wrl.js → IssuesPanel-CR1MPaDE.js} +40 -40
  11. package/dist/{LoadingTrack-CV3ID80N.js → LoadingTrack-DsecR8Rw.js} +1 -1
  12. package/dist/MergeTagSuggestion-CH2SUxBo.js +1327 -0
  13. package/dist/{ModuleBrowserModal-DOsdaS6s.js → ModuleBrowserModal-D45rBj5C.js} +60 -59
  14. package/dist/{ModulePreviewCanvas-Cx4MOJ0X.js → ModulePreviewCanvas-BiQ6B2-l.js} +29 -29
  15. package/dist/{NumberWithSuffix-D2mW_DhT.js → NumberWithSuffix-CrA6quxx.js} +143 -142
  16. package/dist/{ParagraphEditor-DMzkVnST.js → ParagraphEditor-1NaUJpZO.js} +247 -246
  17. package/dist/{RichTextEditorContent-CRCxCwKf.js → RichTextEditorContent-BqLHIZY7.js} +45 -44
  18. package/dist/{SaveModuleDialog-DuEKgumL.js → SaveModuleDialog-B0sPOTgO.js} +38 -37
  19. package/dist/{SnapshotHistory-CVgiNJtE.js → SnapshotHistory-DslVzmSb.js} +34 -33
  20. package/dist/{TemplateScoringPanel-lm0_9nYi.js → TemplateScoringPanel-CZ62rGHz.js} +83 -82
  21. package/dist/{TestEmailModal-WBMdiW5S.js → TestEmailModal-DWGniJVu.js} +22 -21
  22. package/dist/{TitleEditor-eyT0h-Sa.js → TitleEditor-D4t_gZZJ.js} +44 -44
  23. package/dist/{TplModal-tjQ7OB0g.js → TplModal-Br2VG6cn.js} +14 -13
  24. package/dist/{blockTypeIcons-DdB3uTKD.js → blockTypeIcons-CXhCS5WV.js} +2 -2
  25. package/dist/bundle-stats.json +8 -8
  26. package/dist/cdn/chunks/{AiFeatureMenu-D7rB2SBs.js → AiFeatureMenu-3Slo_LGA.js} +5 -5
  27. package/dist/cdn/chunks/{AiFeatureMenu-D7rB2SBs.js.map → AiFeatureMenu-3Slo_LGA.js.map} +1 -1
  28. package/dist/cdn/chunks/{BlockIssueBadge-DHOe0pgx.js → BlockIssueBadge-BxwEiiF3.js} +3 -3
  29. package/dist/cdn/chunks/{BlockIssueBadge-DHOe0pgx.js.map → BlockIssueBadge-BxwEiiF3.js.map} +1 -1
  30. package/dist/cdn/chunks/{CloudEditor-DNed_Ym0.js → CloudEditor-DFIFWD9G.js} +89 -89
  31. package/dist/cdn/chunks/{CloudEditor-DNed_Ym0.js.map → CloudEditor-DFIFWD9G.js.map} +1 -1
  32. package/dist/cdn/chunks/{CollaboratorBar-sj_9Lee3.js → CollaboratorBar-Cu3vuN66.js} +4 -4
  33. package/dist/cdn/chunks/{CollaboratorBar-sj_9Lee3.js.map → CollaboratorBar-Cu3vuN66.js.map} +1 -1
  34. package/dist/cdn/chunks/{CountdownBlock-C1Ikjpn4.js → CountdownBlock-BEVAJQtQ.js} +3 -3
  35. package/dist/cdn/chunks/{CountdownBlock-C1Ikjpn4.js.map → CountdownBlock-BEVAJQtQ.js.map} +1 -1
  36. package/dist/cdn/chunks/{CountdownToolbar-j1G_X8rB.js → CountdownToolbar-CI2sQZv5.js} +4 -4
  37. package/dist/cdn/chunks/{CountdownToolbar-j1G_X8rB.js.map → CountdownToolbar-CI2sQZv5.js.map} +1 -1
  38. package/dist/cdn/chunks/{IssuesPanel-CTOf3PsH.js → IssuesPanel-BdeDoTcn.js} +4 -4
  39. package/dist/cdn/chunks/{IssuesPanel-CTOf3PsH.js.map → IssuesPanel-BdeDoTcn.js.map} +1 -1
  40. package/dist/cdn/chunks/MergeTagSuggestion-BsCAo4Co.js +213 -0
  41. package/dist/cdn/chunks/MergeTagSuggestion-BsCAo4Co.js.map +1 -0
  42. package/dist/cdn/chunks/{ModuleBrowserModal-DCh88-rr.js → ModuleBrowserModal-Dz-I5zfj.js} +6 -6
  43. package/dist/cdn/chunks/{ModuleBrowserModal-DCh88-rr.js.map → ModuleBrowserModal-Dz-I5zfj.js.map} +1 -1
  44. package/dist/cdn/chunks/{ModulePreviewCanvas-DJqvTKmg.js → ModulePreviewCanvas-BfinyuAN.js} +3 -3
  45. package/dist/cdn/chunks/{ModulePreviewCanvas-DJqvTKmg.js.map → ModulePreviewCanvas-BfinyuAN.js.map} +1 -1
  46. package/dist/cdn/chunks/{NumberWithSuffix-Bu45XWSl.js → NumberWithSuffix-CDjEa08X.js} +6 -6
  47. package/dist/cdn/chunks/{NumberWithSuffix-Bu45XWSl.js.map → NumberWithSuffix-CDjEa08X.js.map} +1 -1
  48. package/dist/cdn/chunks/{ParagraphEditor-DwZqLJp2.js → ParagraphEditor-B3fG0vge.js} +22 -22
  49. package/dist/cdn/chunks/{ParagraphEditor-DwZqLJp2.js.map → ParagraphEditor-B3fG0vge.js.map} +1 -1
  50. package/dist/cdn/chunks/{RichTextEditorContent-CIuZ-2DV.js → RichTextEditorContent-C6YPCp9j.js} +4 -4
  51. package/dist/cdn/chunks/{RichTextEditorContent-CIuZ-2DV.js.map → RichTextEditorContent-C6YPCp9j.js.map} +1 -1
  52. package/dist/cdn/chunks/{SaveModuleDialog-Bep0X2s_.js → SaveModuleDialog-C6UIIVAM.js} +3 -3
  53. package/dist/cdn/chunks/{SaveModuleDialog-Bep0X2s_.js.map → SaveModuleDialog-C6UIIVAM.js.map} +1 -1
  54. package/dist/cdn/chunks/{TitleEditor-DO1-h3RY.js → TitleEditor-BiZbLYF1.js} +10 -10
  55. package/dist/cdn/chunks/{TitleEditor-DO1-h3RY.js.map → TitleEditor-BiZbLYF1.js.map} +1 -1
  56. package/dist/cdn/chunks/{blockTypeIcons-8o24HVJu.js → blockTypeIcons-BernVG06.js} +3 -3
  57. package/dist/cdn/chunks/{blockTypeIcons-8o24HVJu.js.map → blockTypeIcons-BernVG06.js.map} +1 -1
  58. package/dist/cdn/chunks/{draggable-kPCz_3zM.js → draggable-kG-D5Xsm.js} +6 -6
  59. package/dist/cdn/chunks/draggable-kG-D5Xsm.js.map +1 -0
  60. package/dist/cdn/chunks/extensions-Drp8UDc6.js +421 -0
  61. package/dist/cdn/chunks/extensions-Drp8UDc6.js.map +1 -0
  62. package/dist/cdn/chunks/{features-CkTMVylx.js → features-Dpczf9Su.js} +884 -835
  63. package/dist/cdn/chunks/features-Dpczf9Su.js.map +1 -0
  64. package/dist/cdn/chunks/{icons-9zjCuoJx.js → icons-CuxnJiGQ.js} +26 -26
  65. package/dist/cdn/chunks/{icons-9zjCuoJx.js.map → icons-CuxnJiGQ.js.map} +1 -1
  66. package/dist/cdn/chunks/{liquid.browser-DKKBzRQu.js → liquid.browser-BJOEu6Cg.js} +693 -678
  67. package/dist/cdn/chunks/liquid.browser-BJOEu6Cg.js.map +1 -0
  68. package/dist/cdn/chunks/{media-library-DMRIPx4g.js → media-library-CiYl_BO7.js} +33 -33
  69. package/dist/cdn/chunks/{media-library-DMRIPx4g.js.map → media-library-CiYl_BO7.js.map} +1 -1
  70. package/dist/cdn/chunks/{pusher-CdEqyLwF.js → pusher-CIwiKF8H.js} +4 -4
  71. package/dist/cdn/chunks/{pusher-CdEqyLwF.js.map → pusher-CIwiKF8H.js.map} +1 -1
  72. package/dist/cdn/chunks/{quality-CyeUgs_c.js → quality-CNjGxBG0.js} +112 -112
  73. package/dist/cdn/chunks/{quality-CyeUgs_c.js.map → quality-CNjGxBG0.js.map} +1 -1
  74. package/dist/cdn/chunks/{renderer-BIKUEKDD.js → renderer-CFkg8h-K.js} +20 -20
  75. package/dist/cdn/chunks/renderer-CFkg8h-K.js.map +1 -0
  76. package/dist/cdn/chunks/{src-pDy_imWG.js → src-DRpKu4Dy.js} +5 -5
  77. package/dist/cdn/chunks/{src-pDy_imWG.js.map → src-DRpKu4Dy.js.map} +1 -1
  78. package/dist/cdn/chunks/{styles-D4Bd3SCx.js → styles-B7wryV0l.js} +1484 -1344
  79. package/dist/cdn/chunks/styles-B7wryV0l.js.map +1 -0
  80. package/dist/cdn/chunks/{tiptap-BlLFFU3M.js → tiptap-DF9PEiqH.js} +6859 -6823
  81. package/dist/cdn/chunks/tiptap-DF9PEiqH.js.map +1 -0
  82. package/dist/cdn/editor.css +1 -1
  83. package/dist/cdn/editor.js +35 -35
  84. package/dist/cdn/editor.js.map +1 -1
  85. package/dist/{check-CYJwFmjy.js → check-rl7ok6uJ.js} +1 -1
  86. package/dist/{chevron-down-C5l-DzAA.js → chevron-down-BKe__NOD.js} +1 -1
  87. package/dist/{circle-alert-wf5HUFZY.js → circle-alert-C8xmpMsK.js} +1 -1
  88. package/dist/{clock-Bj0bQw-K.js → clock-BW4JuDCN.js} +1 -1
  89. package/dist/{cloud-CoFDm9YA.js → cloud-BQusL53H.js} +208 -208
  90. package/dist/createLucideIcon-Dx-EjR9r.js +43 -0
  91. package/dist/{dist-CLpPNKy9.js → dist-B5Sov3sS.js} +7 -7
  92. package/dist/dist-BEWiuOMi.js +251 -0
  93. package/dist/{dist-CrQZ_af9.js → dist-BFmE-7hB.js} +2 -2
  94. package/dist/{dist-U5vfDdYI.js → dist-BMoa33wT.js} +2 -2
  95. package/dist/{dist-BctFrpeA.js → dist-BibU4HNl.js} +74 -65
  96. package/dist/{dist-Dd3ibRZm.js → dist-BsCGIDSt.js} +103 -102
  97. package/dist/dist-CNLKj9wa.js +5 -0
  98. package/dist/{dist-BX3gGwL8.js → dist-CNXDNYQn.js} +728 -694
  99. package/dist/{dist-Bn703mnA.js → dist-COG3IdPK.js} +3 -3
  100. package/dist/{dist-B7w6xTU6.js → dist-CQZxDvFw.js} +3 -3
  101. package/dist/{dist-34OcyoK1.js → dist-CRsjOQM-.js} +2 -2
  102. package/dist/dist-CTT6WYJ6.js +134 -0
  103. package/dist/dist-Cqa6aeAJ.js +5 -0
  104. package/dist/{dist-ChMninLH.js → dist-SXJJ2v41.js} +2 -2
  105. package/dist/{dist-CyjyYg52.js → dist-itdjZraK.js} +28 -23
  106. package/dist/extensions-DwaZAqm6.js +423 -0
  107. package/dist/{image-up-x8-WXfsx.js → image-up-BwBCmQ4P.js} +1 -1
  108. package/dist/{info-RS_fGcGi.js → info-TCn7uWR5.js} +1 -1
  109. package/dist/{keys-DgYXDafq.js → keys-Cv8-8GsD.js} +1 -1
  110. package/dist/{liquid.browser-CVjP5Mex.js → liquid.browser-DZLtv26k.js} +692 -677
  111. package/dist/{list-checks-Bf7XdDyv.js → list-checks-CSrOWNgq.js} +1 -1
  112. package/dist/{loader-circle-CLZ0_FvW.js → loader-circle-BLmicnPG.js} +1 -1
  113. package/dist/{message-circle-B-1bN9ab.js → message-circle-C9hHMQCI.js} +1 -1
  114. package/dist/{refresh-cw-CWKWqJYG.js → refresh-cw-D1JQ1LNa.js} +1 -1
  115. package/dist/runtime-dom.esm-bundler-BzuoCyNp.js +523 -0
  116. package/dist/{scan-line-BtK5dEai.js → scan-line-DgijVq9y.js} +1 -1
  117. package/dist/{send-Cn1IUdzh.js → send-DjPdq69F.js} +1 -1
  118. package/dist/{shield-check-CrvMk4Ea.js → shield-check-Bqluu8FS.js} +1 -1
  119. package/dist/{sparkles-CgfjwvnG.js → sparkles-M4azPVSP.js} +1 -1
  120. package/dist/style.css +1 -1
  121. package/dist/styles-D7fQ7f_1.js +4164 -0
  122. package/dist/templatical-editor.js +127 -126
  123. package/dist/{text-align-start-C3r_Rnvy.js → text-align-start-CMya5pCQ.js} +11 -11
  124. package/dist/{trash-2-CjERg4x9.js → trash-2-C-81rkLS.js} +1 -1
  125. package/dist/{triangle-alert-Chkny574.js → triangle-alert-BuRWnynk.js} +1 -1
  126. package/dist/{upload-e5kDRkPb.js → upload-CWBIoLd4.js} +1 -1
  127. package/dist/{useAliveFlag-cUQj9rmB.js → useAliveFlag-CECL_OUb.js} +1 -1
  128. package/dist/{useCloudI18n-CYJKqXtI.js → useCloudI18n-AKCy98qD.js} +2 -2
  129. package/dist/{useEditorCore-8JxXDOA4.js → useEditorCore-vcWLdnjN.js} +1406 -1364
  130. package/dist/{useI18n-BWqM8i78.js → useI18n-C-TDeJBt.js} +2 -2
  131. package/dist/{useMergeTag-NHC4ylza.js → useMergeTag-DSrBY0-2.js} +5 -5
  132. package/dist/usePopoverRoot-DKUDnr55.js +8 -0
  133. package/dist/{vue.runtime.esm-bundler-BPa483TZ.js → vue.runtime.esm-bundler-l0XAqiyv.js} +626 -1147
  134. package/dist/{x-DiPIbccg.js → x-CQSvXnGR.js} +1 -1
  135. package/package.json +26 -26
  136. package/dist/CountdownBlock-DtAokAVw.js +0 -92
  137. package/dist/CountdownToolbar-Dtqgwy0g.js +0 -210
  138. package/dist/cdn/chunks/draggable-kPCz_3zM.js.map +0 -1
  139. package/dist/cdn/chunks/extensions-iwBXnEwq.js +0 -605
  140. package/dist/cdn/chunks/extensions-iwBXnEwq.js.map +0 -1
  141. package/dist/cdn/chunks/features-CkTMVylx.js.map +0 -1
  142. package/dist/cdn/chunks/liquid.browser-DKKBzRQu.js.map +0 -1
  143. package/dist/cdn/chunks/renderer-BIKUEKDD.js.map +0 -1
  144. package/dist/cdn/chunks/styles-D4Bd3SCx.js.map +0 -1
  145. package/dist/cdn/chunks/tiptap-BlLFFU3M.js.map +0 -1
  146. package/dist/createLucideIcon-Bad2kKE0.js +0 -43
  147. package/dist/dist-CADDCv0o.js +0 -5
  148. package/dist/dist-CGvz7vkq.js +0 -5
  149. package/dist/dist-DuCzdgDA.js +0 -382
  150. package/dist/extensions-J439b7y7.js +0 -1720
  151. package/dist/styles-BUwDOWd3.js +0 -4022
  152. package/dist/usePopoverRoot-B1sdY4es.js +0 -8
@@ -1,4022 +0,0 @@
1
- import { A as e, B as t, E as n, F as r, J as i, L as a, M as o, N as s, S as c, U as l, X as u, _ as d, a as f, at as p, b as m, c as h, d as g, f as _, h as v, l as y, m as b, o as x, ot as S, p as C, q as w, rt as T, s as E, st as D, t as O, v as k, w as A, y as j, z as M } from "./vue.runtime.esm-bundler-BPa483TZ.js";
2
- import { C as N, D as P, O as F, o as I, r as L, s as R, u as z, w as B } from "./dist-BctFrpeA.js";
3
- import { D as V, F as ee, I as te, L as H, M as ne, N as U, P as re, R as ie, S as ae, _ as oe, a as se, c as ce, f as le, g as ue, h as de, i as fe, j as pe, l as me, m as he, n as ge, o as _e, p as ve, r as ye, s as be, u as xe, v as Se, y as Ce } from "./useEditorCore-8JxXDOA4.js";
4
- import { l as we, o as Te } from "./dist-DuCzdgDA.js";
5
- import { D as Ee, I as De, L as Oe, N as ke, P as Ae, T as je, a as Me, d as Ne, f as Pe, g as Fe, k as Ie, m as Le, n as Re, o as ze, p as Be, s as Ve, u as He, w as Ue, x as We } from "./keys-DgYXDafq.js";
6
- import { t as W } from "./useI18n-BWqM8i78.js";
7
- import { t as G } from "./createLucideIcon-Bad2kKE0.js";
8
- import { n as Ge, t as Ke } from "./scan-line-BtK5dEai.js";
9
- import { t as qe } from "./chevron-down-C5l-DzAA.js";
10
- import { t as Je } from "./circle-alert-wf5HUFZY.js";
11
- import { i as Ye, n as Xe, r as Ze, t as Qe } from "./blockTypeIcons-DdB3uTKD.js";
12
- import { n as $e, t as et } from "./refresh-cw-CWKWqJYG.js";
13
- import { t as tt } from "./image-up-x8-WXfsx.js";
14
- import { t as nt } from "./info-RS_fGcGi.js";
15
- import { t as rt } from "./list-checks-Bf7XdDyv.js";
16
- import { t as it } from "./loader-circle-CLZ0_FvW.js";
17
- import { t as at } from "./sparkles-CgfjwvnG.js";
18
- import { n as ot, r as st, t as ct } from "./text-align-start-C3r_Rnvy.js";
19
- import { t as lt } from "./trash-2-CjERg4x9.js";
20
- import { t as ut } from "./upload-e5kDRkPb.js";
21
- import { t as dt } from "./x-DiPIbccg.js";
22
- import { t as ft } from "./_plugin-vue_export-helper-B3ysoDQm.js";
23
- import { t as pt } from "./useCloudI18n-CYJKqXtI.js";
24
- import { t as mt } from "./useMergeTag-NHC4ylza.js";
25
- import { t as ht } from "./useAliveFlag-cUQj9rmB.js";
26
- import { t as gt } from "./readableTextColor-f8Kykfnh.js";
27
- import { t as _t } from "./CountdownBlock-DtAokAVw.js";
28
- import { _ as vt, c as yt, f as K, g as bt, h as q, l as xt, m as J, p as Y, r as St, t as Ct } from "./styleConstants-lGobwiLH.js";
29
- import { i as X, n as Z, r as wt, t as Tt } from "./NumberWithSuffix-D2mW_DhT.js";
30
- import { t as Et } from "./TplModal-tjQ7OB0g.js";
31
- var Dt = G("circle", [["circle", {
32
- cx: "12",
33
- cy: "12",
34
- r: "10",
35
- key: "1mglay"
36
- }]]), Ot = G("globe", [
37
- ["circle", {
38
- cx: "12",
39
- cy: "12",
40
- r: "10",
41
- key: "1mglay"
42
- }],
43
- ["path", {
44
- d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",
45
- key: "13o1zl"
46
- }],
47
- ["path", {
48
- d: "M2 12h20",
49
- key: "9i4pu4"
50
- }]
51
- ]), kt = G("layout-template", [
52
- ["rect", {
53
- width: "18",
54
- height: "7",
55
- x: "3",
56
- y: "3",
57
- rx: "1",
58
- key: "f1a2em"
59
- }],
60
- ["rect", {
61
- width: "9",
62
- height: "7",
63
- x: "3",
64
- y: "14",
65
- rx: "1",
66
- key: "jqznyg"
67
- }],
68
- ["rect", {
69
- width: "5",
70
- height: "7",
71
- x: "16",
72
- y: "14",
73
- rx: "1",
74
- key: "q5h2i8"
75
- }]
76
- ]), At = G("lock-open", [["rect", {
77
- width: "18",
78
- height: "11",
79
- x: "3",
80
- y: "11",
81
- rx: "2",
82
- ry: "2",
83
- key: "1w4ew1"
84
- }], ["path", {
85
- d: "M7 11V7a5 5 0 0 1 9.9-1",
86
- key: "1mm8w8"
87
- }]]), jt = G("lock", [["rect", {
88
- width: "18",
89
- height: "11",
90
- x: "3",
91
- y: "11",
92
- rx: "2",
93
- ry: "2",
94
- key: "1w4ew1"
95
- }], ["path", {
96
- d: "M7 11V7a5 5 0 0 1 10 0v4",
97
- key: "fwvmzm"
98
- }]]), Mt = G("monitor", [
99
- ["rect", {
100
- width: "20",
101
- height: "14",
102
- x: "2",
103
- y: "3",
104
- rx: "2",
105
- key: "48i651"
106
- }],
107
- ["line", {
108
- x1: "8",
109
- x2: "16",
110
- y1: "21",
111
- y2: "21",
112
- key: "1svkeh"
113
- }],
114
- ["line", {
115
- x1: "12",
116
- x2: "12",
117
- y1: "17",
118
- y2: "21",
119
- key: "vw1qmm"
120
- }]
121
- ]), Nt = G("moon", [["path", {
122
- 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",
123
- key: "kfwtm"
124
- }]]), Pt = G("panel-top", [["rect", {
125
- width: "18",
126
- height: "18",
127
- x: "3",
128
- y: "3",
129
- rx: "2",
130
- key: "afitv7"
131
- }], ["path", {
132
- d: "M3 9h18",
133
- key: "1pudct"
134
- }]]), Q = G("plus", [["path", {
135
- d: "M5 12h14",
136
- key: "1ays0h"
137
- }], ["path", {
138
- d: "M12 5v14",
139
- key: "s699le"
140
- }]]), Ft = G("rotate-ccw", [["path", {
141
- d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
142
- key: "1357e3"
143
- }], ["path", {
144
- d: "M3 3v5h5",
145
- key: "1xhq8a"
146
- }]]), It = G("settings", [["path", {
147
- 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",
148
- key: "1i5ecw"
149
- }], ["circle", {
150
- cx: "12",
151
- cy: "12",
152
- r: "3",
153
- key: "1v7zrd"
154
- }]]), Lt = G("smartphone", [["rect", {
155
- width: "14",
156
- height: "20",
157
- x: "5",
158
- y: "2",
159
- rx: "2",
160
- ry: "2",
161
- key: "1yt0o3"
162
- }], ["path", {
163
- d: "M12 18h.01",
164
- key: "mhygvu"
165
- }]]), Rt = G("square-plus", [
166
- ["rect", {
167
- width: "18",
168
- height: "18",
169
- x: "3",
170
- y: "3",
171
- rx: "2",
172
- key: "afitv7"
173
- }],
174
- ["path", {
175
- d: "M8 12h8",
176
- key: "1wcyev"
177
- }],
178
- ["path", {
179
- d: "M12 8v8",
180
- key: "napkw2"
181
- }]
182
- ]), zt = G("square", [["rect", {
183
- width: "18",
184
- height: "18",
185
- x: "3",
186
- y: "3",
187
- rx: "2",
188
- key: "afitv7"
189
- }]]), Bt = G("sun", [
190
- ["circle", {
191
- cx: "12",
192
- cy: "12",
193
- r: "4",
194
- key: "4exip2"
195
- }],
196
- ["path", {
197
- d: "M12 2v2",
198
- key: "tus03m"
199
- }],
200
- ["path", {
201
- d: "M12 20v2",
202
- key: "1lh1kg"
203
- }],
204
- ["path", {
205
- d: "m4.93 4.93 1.41 1.41",
206
- key: "149t6j"
207
- }],
208
- ["path", {
209
- d: "m17.66 17.66 1.41 1.41",
210
- key: "ptbguv"
211
- }],
212
- ["path", {
213
- d: "M2 12h2",
214
- key: "1t8f8n"
215
- }],
216
- ["path", {
217
- d: "M20 12h2",
218
- key: "1q8mjw"
219
- }],
220
- ["path", {
221
- d: "m6.34 17.66-1.41 1.41",
222
- key: "1m8zz5"
223
- }],
224
- ["path", {
225
- d: "m19.07 4.93-1.41 1.41",
226
- key: "1shlcs"
227
- }]
228
- ]);
229
- //#endregion
230
- //#region src/utils/resolveLintOptions.ts
231
- function Vt(e) {
232
- return {
233
- ...e.lint,
234
- locale: e.locale
235
- };
236
- }
237
- //#endregion
238
- //#region src/components/Canvas.vue?vue&type=script&setup=true&lang.ts
239
- var Ht = ["aria-label"], Ut = {
240
- key: 0,
241
- class: "tpl-canvas-empty-content tpl:flex tpl:flex-col tpl:items-center"
242
- }, Wt = { class: "tpl-canvas-empty-icon tpl:mb-4 tpl:text-[var(--tpl-primary)]" }, Gt = { class: "tpl-canvas-empty-title tpl:m-0 tpl:mb-2 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-primary)]" }, Kt = { class: "tpl-canvas-empty-text tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-dim)]" }, qt = {
243
- key: 0,
244
- 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)]"
245
- }, Jt = {
246
- key: 1,
247
- 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)]"
248
- }, Yt = { class: "tpl:relative" }, Xt = {
249
- class: "tpl:inline-flex tpl:size-3 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[8px] tpl:font-bold",
250
- style: { "background-color": "color-mix(\n in srgb,\n var(--tpl-bg) 30%,\n transparent\n )" }
251
- }, Zt = 96, Qt = /*#__PURE__*/ ft(/* @__PURE__ */ m({
252
- __name: "Canvas",
253
- props: {
254
- viewport: {},
255
- content: {},
256
- selectedBlockId: {},
257
- darkMode: { type: Boolean },
258
- previewMode: { type: Boolean },
259
- lockedBlocks: {}
260
- },
261
- emits: [
262
- "select-block",
263
- "open-ai-chat",
264
- "open-design-reference"
265
- ],
266
- setup(n, { emit: i }) {
267
- let a = {
268
- section: be,
269
- title: me,
270
- paragraph: ve,
271
- image: de,
272
- button: ee,
273
- divider: Se,
274
- spacer: fe,
275
- html: oe,
276
- social: se,
277
- menu: he,
278
- table: ye,
279
- video: ge,
280
- countdown: _t,
281
- custom: Ce
282
- }, s = n, c = i, { t: l } = W(), { t: f } = pt(), m = Oe(Le, "Canvas"), h = A(He, null), w = A(ze, null), E = A(Ve, {}), O = g(() => (E.plan?.hasFeature("ai_generation") ?? !1) && (E.ai?.isFeatureEnabled("chat") ?? !1)), j = g(() => (E.plan?.hasFeature("ai_generation") ?? !1) && (E.ai?.isFeatureEnabled("designToTemplate") ?? !1)), N = g({
283
- get: () => s.content.blocks,
284
- set: (e) => {
285
- m.setContent({
286
- ...s.content,
287
- blocks: e
288
- });
289
- }
290
- }), P = g(() => {
291
- switch (s.viewport) {
292
- case "mobile": return 375;
293
- default: return s.content.settings.width;
294
- }
295
- }), F = g(() => P.value + Zt * 2), I = g(() => ({ fontFamily: s.content.settings.fontFamily })), L = g(() => N.value.length === 0 && !s.previewMode), R = u(0), z = g(() => L.value && R.value > 0);
296
- function B() {
297
- L.value && (R.value += 1);
298
- }
299
- function V() {
300
- L.value && (R.value = Math.max(0, R.value - 1));
301
- }
302
- function te() {
303
- R.value = 0;
304
- }
305
- function H(e) {
306
- s.previewMode || e.target === e.currentTarget && c("select-block", null);
307
- }
308
- function ne(e) {
309
- return le(e, w, a);
310
- }
311
- function U(e) {
312
- return s.lockedBlocks?.get(e) ?? null;
313
- }
314
- function re(e, t) {
315
- e.type === "custom" && m.updateBlock(e.id, {
316
- fieldValues: t.fieldValues,
317
- dataSourceFetched: t.dataSourceFetched
318
- });
319
- }
320
- return (i, a) => (e(), v("div", {
321
- class: "tpl-canvas-stage tpl:relative tpl:flex tpl:justify-center tpl:rounded-lg",
322
- style: S({
323
- width: `${F.value}px`,
324
- boxShadow: n.darkMode ? "none" : "var(--tpl-shadow-xl)",
325
- transition: "width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
326
- })
327
- }, [_("div", {
328
- class: "tpl-canvas-bg tpl:absolute tpl:inset-0 tpl:rounded-lg tpl:pointer-events-none",
329
- style: S({
330
- backgroundColor: n.content.settings.backgroundColor,
331
- ...n.darkMode ? { filter: "invert(1) hue-rotate(180deg)" } : {},
332
- transition: "filter 300ms ease"
333
- })
334
- }, null, 4), _("div", {
335
- "data-testid": "canvas-wrapper",
336
- role: "region",
337
- "aria-label": T(l).landmarks.canvas,
338
- class: "tpl-canvas-wrapper tpl:relative",
339
- style: S({
340
- width: `${P.value}px`,
341
- transition: "width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
342
- })
343
- }, [_("div", {
344
- class: p(["tpl-canvas tpl:relative tpl:rounded-lg", {
345
- "tpl-canvas--dark-mode": n.darkMode,
346
- "tpl-preview-mode": n.previewMode
347
- }]),
348
- style: S(I.value),
349
- onClick: H
350
- }, [k(T(ce), {
351
- modelValue: N.value,
352
- "onUpdate:modelValue": a[2] ||= (e) => N.value = e,
353
- group: "blocks",
354
- animation: 150,
355
- "ghost-class": "tpl-ghost",
356
- "drag-class": "tpl-dragging",
357
- handle: ".tpl-block-btn",
358
- "invert-swap": !0,
359
- "inverted-swap-threshold": .65,
360
- disabled: n.previewMode,
361
- draggable: ".tpl-block-item",
362
- "force-fallback": !0,
363
- class: p([
364
- "tpl-canvas-blocks",
365
- L.value ? "tpl-canvas-empty tpl:m-6 tpl:flex tpl:min-h-[400px] tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-xl tpl:border-2 tpl:border-dashed tpl:px-10 tpl:py-12 tpl:text-center tpl:bg-[var(--tpl-bg-elevated)] tpl:font-[var(--tpl-font-family)] tpl:transition-colors tpl:duration-150" : "",
366
- L.value && z.value ? "tpl-canvas-empty--drag-over tpl:border-[var(--tpl-primary-hover)] tpl:bg-[var(--tpl-primary-light)]" : "",
367
- L.value && !z.value ? "tpl:border-[var(--tpl-primary)]" : ""
368
- ]),
369
- onDragenter: B,
370
- onDragleave: V,
371
- onDrop: te
372
- }, {
373
- default: M(() => [L.value ? (e(), v("div", Ut, [
374
- _("div", Wt, [k(T(Rt), {
375
- size: 48,
376
- "stroke-width": 1
377
- })]),
378
- _("p", Gt, D(T(l).canvas.noBlocks), 1),
379
- _("p", Kt, D(T(l).canvas.dragHint), 1),
380
- O.value && T(f) ? (e(), v("p", qt, [
381
- d(D(T(l).canvas.aiHintChat) + " ", 1),
382
- _("button", {
383
- 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)]",
384
- onClick: a[0] ||= (e) => c("open-ai-chat")
385
- }, [k(T(at), {
386
- size: 14,
387
- "stroke-width": 2
388
- }), d(" " + D(T(f).aiMenu.aiAssistant), 1)]),
389
- d(" " + D(T(l).canvas.aiHintChatSuffix), 1)
390
- ])) : b("", !0),
391
- j.value && T(f) ? (e(), v("p", Jt, [
392
- d(D(T(l).canvas.aiHintDesign) + " ", 1),
393
- _("button", {
394
- 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)]",
395
- onClick: a[1] ||= (e) => c("open-design-reference")
396
- }, [k(T(tt), {
397
- size: 14,
398
- "stroke-width": 2
399
- }), d(" " + D(T(f).aiMenu.designToTemplate), 1)]),
400
- d(" " + D(T(l).canvas.aiHintDesignSuffix), 1)
401
- ])) : b("", !0)
402
- ])) : b("", !0), (e(!0), v(y, null, o(N.value, (i) => t((e(), v("div", {
403
- key: i.id,
404
- class: "tpl-block-item"
405
- }, [_("div", Yt, [U(i.id) ? (e(), v("div", {
406
- key: 0,
407
- class: "tpl-collab-lock tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-[4] tpl:rounded-sm",
408
- style: S({
409
- outline: `2px solid ${U(i.id).color}`,
410
- outlineOffset: "-1px"
411
- })
412
- }, [_("span", {
413
- 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",
414
- style: S({
415
- backgroundColor: U(i.id).color,
416
- color: T(gt)(U(i.id).color)
417
- })
418
- }, [_("span", Xt, D(U(i.id).name.charAt(0)), 1), d(" " + D(U(i.id).name), 1)], 4)], 4)) : b("", !0), k(xe, {
419
- block: i,
420
- "is-selected": !n.previewMode && n.selectedBlockId === i.id && !U(i.id),
421
- viewport: n.viewport,
422
- "preview-mode": n.previewMode,
423
- onSelect: (e) => n.previewMode || U(i.id) ? void 0 : c("select-block", i.id)
424
- }, {
425
- default: M(() => [(e(), C(r(ne(i)), {
426
- block: i,
427
- viewport: n.viewport,
428
- onFetchData: (e) => re(i, e),
429
- onUpdate: (e) => T(m).updateBlock(i.id, e)
430
- }, null, 40, [
431
- "block",
432
- "viewport",
433
- "onFetchData",
434
- "onUpdate"
435
- ]))]),
436
- _: 2
437
- }, 1032, [
438
- "block",
439
- "is-selected",
440
- "viewport",
441
- "preview-mode",
442
- "onSelect"
443
- ])])])), [[x, !T(h)?.isHidden(i.id)]])), 128))]),
444
- _: 1
445
- }, 8, [
446
- "modelValue",
447
- "disabled",
448
- "class"
449
- ])], 6)], 12, Ht)], 4));
450
- }
451
- }), [["__scopeId", "data-v-a9a1158b"]]), $t = m({
452
- name: "CustomBlockStylesheets",
453
- setup() {
454
- let e = A(Pe, null);
455
- return () => e ? e.value.map((e, t) => c("style", {
456
- key: t,
457
- "data-tpl-custom-block-stylesheet": "",
458
- innerHTML: e
459
- })) : null;
460
- }
461
- });
462
- //#endregion
463
- //#region src/utils/resolvePaletteBlocks.ts
464
- function en(e, t) {
465
- if (!t || t.length === 0) return {
466
- items: e,
467
- unknown: []
468
- };
469
- let n = new Map(e.map((e) => [e.type, e])), r = [], i = [], a = /* @__PURE__ */ new Set();
470
- for (let e of t) {
471
- if (a.has(e)) continue;
472
- a.add(e);
473
- let t = n.get(e);
474
- t ? r.push(t) : i.push(e);
475
- }
476
- return {
477
- items: r,
478
- unknown: i
479
- };
480
- }
481
- //#endregion
482
- //#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
483
- var tn = ["aria-label"], nn = {
484
- key: 0,
485
- class: "tpl:border-b tpl:px-1 tpl:pb-1 tpl:border-[var(--tpl-border)]"
486
- }, rn = ["aria-label"], an = {
487
- key: 0,
488
- class: "tpl:flex-1 tpl:truncate tpl:text-sm tpl:font-medium"
489
- }, on = {
490
- key: 1,
491
- 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)]"
492
- }, sn = [
493
- "data-palette-type",
494
- "aria-label",
495
- "onClick",
496
- "onKeydown"
497
- ], cn = { 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" }, ln = {
498
- key: 0,
499
- class: "tpl:truncate tpl:text-sm tpl:font-medium"
500
- }, un = /* @__PURE__ */ m({
501
- __name: "Sidebar",
502
- setup(t) {
503
- let { t: n, format: i } = W(), { t: s } = pt(), c = A(Ne, []), l = A(Ie, void 0), d = A(Me, void 0), f = A(Le, null), p = A(Ve, {}), m = g(() => (p.savedModules?.moduleCount.value ?? 0) > 0), h = u(!1), x = u(!1);
504
- function w() {
505
- x.value || (h.value = !1);
506
- }
507
- function E() {
508
- x.value = !0;
509
- }
510
- function O() {
511
- x.value = !1;
512
- }
513
- let j = [
514
- "section",
515
- "image",
516
- "title",
517
- "paragraph",
518
- "button",
519
- "divider",
520
- "video",
521
- "social",
522
- "menu",
523
- "table",
524
- "spacer",
525
- "html"
526
- ], N = g(() => {
527
- let e = j.map((e) => ({
528
- type: e,
529
- label: H(e, n)
530
- }));
531
- return p.plan && e.splice(-1, 0, {
532
- type: "countdown",
533
- label: H("countdown", n)
534
- }), e;
535
- }), P = g(() => c.map((e) => ({
536
- type: `custom:${e.type}`,
537
- label: e.name,
538
- isCustom: !0,
539
- icon: e.icon
540
- }))), F = g(() => [...N.value, ...P.value]), I = g(() => en(F.value, l)), L = g(() => I.value.items), B = /* @__PURE__ */ new Set();
541
- a(() => I.value.unknown, (e) => {
542
- for (let t of e) B.has(t) || (B.add(t), te.warn(`config.paletteBlocks: "${t}" is not a built-in or registered custom block (use the "custom:" prefix for custom blocks) — skipping it in the palette.`));
543
- }, { immediate: !0 });
544
- function ee(e) {
545
- if (e.isCustom) {
546
- let t = e.type.replace("custom:", ""), n = c.find((e) => e.type === t);
547
- if (n) return z(n);
548
- }
549
- return R(e.type, d);
550
- }
551
- function ne(e) {
552
- if (!f) return;
553
- let t = ee(e);
554
- f.addBlock(t), f.selectBlock(t.id);
555
- }
556
- function U(e, t) {
557
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ne(t));
558
- }
559
- return (t, a) => (e(), v("aside", {
560
- "aria-label": T(n).sidebarNav.palette,
561
- class: "tpl-sidebar-rail tpl:absolute tpl:top-14 tpl:bottom-0 tpl:left-0 tpl:z-40 tpl:flex tpl:flex-col tpl:overflow-hidden",
562
- style: S({
563
- width: h.value ? "200px" : "48px",
564
- backgroundColor: "var(--tpl-bg-elevated)",
565
- borderRight: "1px solid var(--tpl-border)",
566
- boxShadow: h.value ? "var(--tpl-shadow-lg)" : "none",
567
- transition: "width 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1)"
568
- }),
569
- onMouseenter: a[1] ||= (e) => h.value = !0,
570
- onMouseleave: w,
571
- onFocusin: a[2] ||= (e) => h.value = !0,
572
- onFocusout: a[3] ||= (e) => h.value = !1
573
- }, [m.value && T(s) ? (e(), v("div", nn, [_("button", {
574
- type: "button",
575
- "aria-label": T(n).sidebarNav.browseModules,
576
- 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)]",
577
- style: S({ justifyContent: h.value ? "flex-start" : "center" }),
578
- onClick: a[0] ||= (e) => T(p).savedModules?.openBrowser()
579
- }, [
580
- k(T(Ze), {
581
- size: 20,
582
- "stroke-width": 1.5,
583
- class: "tpl:shrink-0"
584
- }),
585
- h.value ? (e(), v("span", an, D(T(s).modules.title), 1)) : b("", !0),
586
- h.value ? (e(), v("span", on, D(T(p).savedModules?.moduleCount.value ?? 0), 1)) : b("", !0)
587
- ], 12, rn)])) : b("", !0), k(T(ce), {
588
- "model-value": L.value,
589
- group: {
590
- name: "blocks",
591
- pull: "clone",
592
- put: !1
593
- },
594
- clone: ee,
595
- sort: !1,
596
- animation: 150,
597
- "force-fallback": !0,
598
- class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col tpl:gap-0.5 tpl:overflow-y-auto tpl:p-1",
599
- onChoose: E,
600
- onEnd: O
601
- }, {
602
- default: M(() => [(e(!0), v(y, null, o(L.value, (t) => (e(), v("button", {
603
- key: t.type,
604
- type: "button",
605
- "data-palette-type": t.type,
606
- "aria-label": T(i)(T(n).sidebarNav.insertBlock, { block: t.label }),
607
- class: "tpl:flex tpl:h-10 tpl:w-full tpl:shrink-0 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",
608
- style: S({ justifyContent: h.value ? "flex-start" : "center" }),
609
- onClick: (e) => ne(t),
610
- onKeydown: (e) => U(e, t)
611
- }, [_("div", cn, [T(Qe)[t.type] ? (e(), C(r(T(Qe)[t.type]), {
612
- key: 0,
613
- size: 20,
614
- "stroke-width": 1.5
615
- })) : t.isCustom ? (e(), C(V, {
616
- key: 1,
617
- icon: t.icon,
618
- size: 20
619
- }, null, 8, ["icon"])) : b("", !0)]), h.value ? (e(), v("span", ln, D(t.label), 1)) : b("", !0)], 44, sn))), 128))]),
620
- _: 1
621
- }, 8, ["model-value"])], 44, tn));
622
- }
623
- });
624
- //#endregion
625
- //#region src/composables/useMergeTagField.ts
626
- function dn(e) {
627
- let { modelValue: t, emit: r, elementRef: i } = e, { canRequestMergeTag: a, isRequesting: o, isMergeTagValue: s, getMergeTagLabel: c, requestMergeTag: d, syntax: f } = mt(), { canInsertLogicTag: p, isRequesting: m, requestLogicTag: h } = ae(), _ = u(!1), v = !1, y = !1;
628
- l() && w(() => {
629
- y = !0;
630
- });
631
- let b = g(() => {
632
- let e = t();
633
- if (!e) return [];
634
- let n = [], r = `(${f.value.source}|${f.logic.source})`, i = new RegExp(r, "g"), a = 0, o;
635
- for (; (o = i.exec(e)) !== null;) {
636
- o.index > a && n.push({
637
- type: "text",
638
- value: e.slice(a, o.index)
639
- });
640
- let t = o[0];
641
- s(t) ? n.push({
642
- type: "mergeTag",
643
- value: t,
644
- label: c(t)
645
- }) : F(t, f) ? n.push({
646
- type: "logicMergeTag",
647
- value: t,
648
- keyword: B(t, f)
649
- }) : n.push({
650
- type: "text",
651
- value: t
652
- }), a = o.index + t.length;
653
- }
654
- return a < e.length && n.push({
655
- type: "text",
656
- value: e.slice(a)
657
- }), n;
658
- }), x = g(() => b.value.some((e) => e.type === "mergeTag" || e.type === "logicMergeTag"));
659
- function S() {
660
- _.value = !0, n(() => {
661
- i.value?.focus();
662
- let e = t()?.length || 0;
663
- i.value?.setSelectionRange(e, e);
664
- });
665
- }
666
- function C() {
667
- v || (_.value = !1);
668
- }
669
- function T(e) {
670
- r(e.target.value);
671
- }
672
- function E() {
673
- r("");
674
- }
675
- async function D() {
676
- let e = _.value && i.value ? i.value.selectionStart ?? t().length : t().length;
677
- v = !0;
678
- let a;
679
- try {
680
- a = await d();
681
- } finally {
682
- v = !1;
683
- }
684
- if (!y && a) {
685
- let o = t().slice(0, e), s = t().slice(e), c = o + a.value + s;
686
- r(c), _.value = !0, n(() => {
687
- if (y) return;
688
- let t = e + a.value.length;
689
- i.value?.focus(), i.value?.setSelectionRange(t, t);
690
- });
691
- }
692
- }
693
- async function O() {
694
- let e = i.value, a = e?.selectionStart ?? t().length, o = e?.selectionEnd ?? a;
695
- v = !0;
696
- let s;
697
- try {
698
- s = await h();
699
- } finally {
700
- v = !1;
701
- }
702
- if (y || !s) return;
703
- let c = t(), l, u;
704
- "before" in s ? (l = c.slice(0, a) + s.before + c.slice(a, o) + s.after + c.slice(o), u = a + s.before.length + (o - a)) : (l = c.slice(0, a) + s.value + c.slice(a), u = a + s.value.length), r(l), _.value = !0, n(() => {
705
- y || (i.value?.focus(), i.value?.setSelectionRange(u, u));
706
- });
707
- }
708
- return {
709
- segments: b,
710
- hasMergeTags: x,
711
- canRequestMergeTag: a,
712
- isRequestingMergeTag: o,
713
- canInsertLogicTag: p,
714
- isRequestingLogicTag: m,
715
- isEditing: _,
716
- startEditing: S,
717
- stopEditing: C,
718
- handleInput: T,
719
- clearValue: E,
720
- insertMergeTag: D,
721
- insertLogicTag: O
722
- };
723
- }
724
- //#endregion
725
- //#region src/components/MergeTagSegments.vue?vue&type=script&setup=true&lang.ts
726
- var fn = ["aria-label", "onKeydown"], pn = ["data-tooltip"], mn = ["data-tooltip"], hn = {
727
- key: 2,
728
- class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
729
- }, gn = ["aria-label", "title"], _n = /* @__PURE__ */ m({
730
- __name: "MergeTagSegments",
731
- props: {
732
- segments: {},
733
- displayClass: {},
734
- pulse: { type: Boolean }
735
- },
736
- emits: ["edit", "clear"],
737
- setup(t, { emit: n }) {
738
- let r = n, { t: i } = W();
739
- function a() {
740
- r("edit");
741
- }
742
- return (n, s) => (e(), v("div", {
743
- role: "button",
744
- tabindex: "0",
745
- "aria-label": T(i).mergeTag.clickToEdit,
746
- class: p([t.displayClass, { "tpl-pulse-fill": t.pulse }]),
747
- onClick: a,
748
- onKeydown: [E(a, ["enter"]), E(h(a, ["prevent"]), ["space"])]
749
- }, [(e(!0), v(y, null, o(t.segments, (t, n) => (e(), v(y, { key: `${t.type}-${n}-${t.value}` }, [t.type === "mergeTag" ? (e(), v("span", {
750
- key: 0,
751
- 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",
752
- "data-tooltip": t.value,
753
- style: {
754
- "background-color": "color-mix(\n in srgb,\n var(--tpl-primary) 20%,\n transparent\n )",
755
- color: "var(--tpl-primary)"
756
- }
757
- }, D(t.label), 9, pn)) : t.type === "logicMergeTag" ? (e(), v("span", {
758
- key: 1,
759
- 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",
760
- "data-tooltip": t.value,
761
- style: {
762
- "background-color": "transparent",
763
- border: "1.5px solid\n color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
764
- color: "var(--tpl-primary)"
765
- }
766
- }, D(t.keyword), 9, mn)) : (e(), v("span", hn, D(t.value), 1))], 64))), 128)), _("button", {
767
- type: "button",
768
- 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",
769
- "aria-label": T(i).mergeTag.remove,
770
- title: T(i).mergeTag.remove,
771
- onClick: s[0] ||= h((e) => r("clear"), ["stop"])
772
- }, [k(T(dt), {
773
- size: 12,
774
- "stroke-width": 2.5
775
- })], 8, gn)], 42, fn));
776
- }
777
- }), vn = [
778
- "aria-label",
779
- "title",
780
- "disabled"
781
- ], yn = "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__ */ m({
782
- __name: "MergeTagInsertButton",
783
- props: { disabled: { type: Boolean } },
784
- emits: ["insert"],
785
- setup(t) {
786
- let { t: n } = W();
787
- return (r, i) => (e(), v("button", {
788
- type: "button",
789
- class: p([yn, "tpl:mt-1.5"]),
790
- "aria-label": T(n).mergeTag.insert,
791
- title: T(n).mergeTag.insert,
792
- disabled: t.disabled,
793
- onMousedown: i[0] ||= h(() => {}, ["prevent"]),
794
- onClick: i[1] ||= (e) => r.$emit("insert")
795
- }, [k(T(Ke), {
796
- size: 12,
797
- "stroke-width": 2
798
- }), d(" " + D(T(n).mergeTag.insertShort), 1)], 42, vn));
799
- }
800
- }), xn = [
801
- "aria-label",
802
- "title",
803
- "disabled"
804
- ], Sn = "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)]", Cn = /* @__PURE__ */ m({
805
- __name: "LogicTagInsertButton",
806
- props: { disabled: { type: Boolean } },
807
- emits: ["insert"],
808
- setup(t) {
809
- let { t: n } = W();
810
- return (r, i) => (e(), v("button", {
811
- type: "button",
812
- class: p([Sn, "tpl:mt-1.5"]),
813
- "aria-label": T(n).logicTag.insert,
814
- title: T(n).logicTag.insert,
815
- disabled: t.disabled,
816
- "data-testid": "field-insert-logic-button",
817
- onMousedown: i[0] ||= h(() => {}, ["prevent"]),
818
- onClick: i[1] ||= (e) => r.$emit("insert")
819
- }, [k(T(Ge), {
820
- size: 12,
821
- "stroke-width": 2
822
- }), d(" " + D(T(n).logicTag.insertShort), 1)], 42, xn));
823
- }
824
- }), wn = { key: 0 }, Tn = {
825
- key: 0,
826
- class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
827
- }, En = { key: 1 }, Dn = [
828
- "value",
829
- "placeholder",
830
- "rows"
831
- ], On = {
832
- key: 0,
833
- class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
834
- }, kn = "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)]", An = "tpl:flex tpl:w-full tpl:min-h-20 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)]", jn = /* @__PURE__ */ m({
835
- __name: "MergeTagTextarea",
836
- props: {
837
- modelValue: {},
838
- placeholder: { default: "" },
839
- rows: { default: 3 }
840
- },
841
- emits: ["update:modelValue"],
842
- setup(t, { emit: n }) {
843
- let r = t, i = n, a = u(null), { segments: o, hasMergeTags: s, canRequestMergeTag: c, isRequestingMergeTag: l, canInsertLogicTag: d, isRequestingLogicTag: f, isEditing: m, startEditing: h, stopEditing: g, handleInput: y, clearValue: x, insertMergeTag: S, insertLogicTag: w } = dn({
844
- modelValue: () => r.modelValue,
845
- emit: (e) => i("update:modelValue", e),
846
- elementRef: a
847
- });
848
- return (n, r) => T(s) && !T(m) ? (e(), v("div", wn, [k(_n, {
849
- segments: T(o),
850
- "display-class": An,
851
- onEdit: T(h),
852
- onClear: T(x)
853
- }, null, 8, [
854
- "segments",
855
- "onEdit",
856
- "onClear"
857
- ]), T(c) || T(d) ? (e(), v("div", Tn, [T(c) ? (e(), C(bn, {
858
- key: 0,
859
- disabled: T(l),
860
- onInsert: T(S)
861
- }, null, 8, ["disabled", "onInsert"])) : b("", !0), T(d) ? (e(), C(Cn, {
862
- key: 1,
863
- disabled: T(f),
864
- onInsert: T(w)
865
- }, null, 8, ["disabled", "onInsert"])) : b("", !0)])) : b("", !0)])) : (e(), v("div", En, [_("textarea", {
866
- ref_key: "textareaRef",
867
- ref: a,
868
- class: p(kn),
869
- value: t.modelValue,
870
- placeholder: t.placeholder,
871
- rows: t.rows,
872
- onInput: r[0] ||= (...e) => T(y) && T(y)(...e),
873
- onBlur: r[1] ||= (...e) => T(g) && T(g)(...e),
874
- onKeydown: r[2] ||= E((...e) => T(g) && T(g)(...e), ["escape"])
875
- }, null, 40, Dn), T(c) || T(d) ? (e(), v("div", On, [T(c) ? (e(), C(bn, {
876
- key: 0,
877
- disabled: T(l),
878
- onInsert: T(S)
879
- }, null, 8, ["disabled", "onInsert"])) : b("", !0), T(d) ? (e(), C(Cn, {
880
- key: 1,
881
- disabled: T(f),
882
- onInsert: T(w)
883
- }, null, 8, ["disabled", "onInsert"])) : b("", !0)])) : b("", !0)]));
884
- }
885
- }), Mn = { class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]" }, Nn = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4" }, Pn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Fn = { class: "tpl:mb-3.5" }, In = { 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)]" }, Ln = ["onClick"], Rn = { class: "tpl:flex tpl:items-stretch" }, zn = ["value"], Bn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Vn = { class: "tpl:mb-3.5" }, Hn = ["value"], Un = ["value"], Wn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Gn = ["value"], Kn = { class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, qn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Jn = { class: "tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Yn = { class: "tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, Xn = { class: "tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]" }, Zn = { class: "tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3" }, Qn = { 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)]" }, $n = { class: "tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, er = { class: "tpl:mb-1 tpl:last:mb-0" }, tr = { class: "tpl:mb-1 tpl:last:mb-0" }, nr = { class: "tpl:mb-1 tpl:last:mb-0" }, rr = 150, ir = /* @__PURE__ */ m({
886
- __name: "TemplateSettings",
887
- props: { settings: {} },
888
- emits: ["update"],
889
- setup(t, { emit: n }) {
890
- let r = t, i = n, { t: a } = W(), s = Oe(Fe, "TemplateSettings"), c = g(() => s.fonts.value), l = g(() => c.value.some((e) => e.value === r.settings.fontFamily) ? r.settings.fontFamily : s.defaultFont.value), u = [
891
- {
892
- value: 480,
893
- label: "480px"
894
- },
895
- {
896
- value: 600,
897
- label: "600px"
898
- },
899
- {
900
- value: 700,
901
- label: "700px"
902
- },
903
- {
904
- value: 800,
905
- label: "800px"
906
- }
907
- ];
908
- return (n, r) => (e(), v("aside", Mn, [_("div", Nn, [
909
- _("div", { class: p(T(xt)) }, [
910
- _("div", Pn, [k(T(zt), {
911
- class: "tpl:text-[var(--tpl-text-muted)]",
912
- size: 14,
913
- "stroke-width": 2
914
- }), _("span", null, D(T(a).templateSettings.layout), 1)]),
915
- _("div", Fn, [_("label", { class: p(T(q)) }, D(T(a).templateSettings.widthPreset), 3), _("div", In, [(e(), v(y, null, o(u, (e) => _("button", {
916
- key: e.value,
917
- 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)]",
918
- style: S({
919
- backgroundColor: t.settings.width === e.value ? "var(--tpl-bg)" : "transparent",
920
- color: t.settings.width === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
921
- boxShadow: t.settings.width === e.value ? "var(--tpl-shadow)" : "none"
922
- }),
923
- onClick: (t) => i("update", { width: e.value })
924
- }, D(e.label), 13, Ln)), 64))])]),
925
- _("div", null, [_("label", { class: p(T(q)) }, D(T(a).templateSettings.customWidth), 3), _("div", Rn, [_("input", {
926
- type: "number",
927
- class: p(T(Y)),
928
- value: t.settings.width,
929
- min: "300",
930
- max: "900",
931
- onInput: r[0] ||= (e) => i("update", { width: Number(e.target.value) })
932
- }, null, 42, zn), _("span", { class: p(T(J)) }, "px", 2)])])
933
- ], 2),
934
- _("div", { class: p(T(xt)) }, [
935
- _("div", Bn, [k(T(Dt), {
936
- class: "tpl:text-[var(--tpl-text-muted)]",
937
- size: 14,
938
- "stroke-width": 2
939
- }), _("span", null, D(T(a).templateSettings.appearance), 1)]),
940
- _("div", Vn, [_("label", { class: p(T(q)) }, D(T(a).templateSettings.backgroundColor), 3), k(X, {
941
- "model-value": t.settings.backgroundColor,
942
- placeholder: T(Ct),
943
- "onUpdate:modelValue": r[1] ||= (e) => i("update", { backgroundColor: e })
944
- }, null, 8, ["model-value", "placeholder"])]),
945
- _("div", null, [_("label", { class: p(T(q)) }, D(T(a).templateSettings.fontFamily), 3), _("select", {
946
- class: p(T(K)),
947
- value: l.value,
948
- onChange: r[2] ||= (e) => i("update", { fontFamily: e.target.value })
949
- }, [(e(!0), v(y, null, o(c.value, (t) => (e(), v("option", {
950
- key: t.value,
951
- value: t.value
952
- }, D(t.label), 9, Un))), 128))], 42, Hn)])
953
- ], 2),
954
- _("div", { class: p(T(xt)) }, [_("div", Wn, [k(T(Ot), {
955
- class: "tpl:text-[var(--tpl-text-muted)]",
956
- size: 14,
957
- "stroke-width": 2
958
- }), _("span", null, D(T(a).templateSettings.language), 1)]), _("div", null, [
959
- _("label", { class: p(T(q)) }, D(T(a).templateSettings.contentLocale), 3),
960
- _("input", {
961
- type: "text",
962
- class: p(T(K)),
963
- value: t.settings.locale ?? "",
964
- placeholder: "en",
965
- spellcheck: "false",
966
- autocapitalize: "off",
967
- autocomplete: "off",
968
- onInput: r[3] ||= (e) => i("update", { locale: e.target.value.trim() || void 0 })
969
- }, null, 42, Gn),
970
- _("p", Kn, D(T(a).templateSettings.contentLocaleHint), 1)
971
- ])], 2),
972
- _("div", { class: p(T(xt)) }, [_("div", qn, [k(T($e), {
973
- class: "tpl:text-[var(--tpl-text-muted)]",
974
- size: 14,
975
- "stroke-width": 2
976
- }), _("span", null, D(T(a).templateSettings.preheaderText), 1)]), _("div", null, [k(jn, {
977
- "model-value": t.settings.preheaderText ?? "",
978
- placeholder: T(a).templateSettings.preheaderTextPlaceholder,
979
- rows: 2,
980
- "onUpdate:modelValue": r[4] ||= (e) => i("update", { preheaderText: e.replace(/[\r\n]/g, " ") || void 0 })
981
- }, null, 8, ["model-value", "placeholder"]), _("div", Jn, [_("span", Yn, D(T(a).templateSettings.preheaderTextHint), 1), _("span", Xn, D((t.settings.preheaderText ?? "").length) + "/" + D(rr), 1)])])], 2),
982
- _("div", Zn, [_("div", Qn, [k(T(nt), {
983
- size: 14,
984
- "stroke-width": 2
985
- }), _("span", null, D(T(a).templateSettings.tips), 1)]), _("ul", $n, [
986
- _("li", er, D(T(a).templateSettings.tip1), 1),
987
- _("li", tr, D(T(a).templateSettings.tip2), 1),
988
- _("li", nr, D(T(a).templateSettings.tip3), 1)
989
- ])])
990
- ])]));
991
- }
992
- }), ar = { key: 0 }, or = {
993
- key: 0,
994
- class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
995
- }, sr = { key: 1 }, cr = [
996
- "type",
997
- "value",
998
- "placeholder"
999
- ], lr = {
1000
- key: 0,
1001
- class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
1002
- }, ur = "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)]", $ = /*#__PURE__*/ ft(/* @__PURE__ */ m({
1003
- __name: "MergeTagInput",
1004
- props: {
1005
- modelValue: {},
1006
- type: { default: "text" },
1007
- placeholder: { default: "" },
1008
- pulse: {
1009
- type: Boolean,
1010
- default: !1
1011
- }
1012
- },
1013
- emits: ["update:modelValue"],
1014
- setup(t, { emit: n }) {
1015
- let r = t, i = n, a = u(null), { segments: o, hasMergeTags: s, canRequestMergeTag: c, isRequestingMergeTag: l, canInsertLogicTag: d, isRequestingLogicTag: f, isEditing: m, startEditing: h, stopEditing: g, handleInput: y, clearValue: x, insertMergeTag: S, insertLogicTag: w } = dn({
1016
- modelValue: () => r.modelValue,
1017
- emit: (e) => i("update:modelValue", e),
1018
- elementRef: a
1019
- });
1020
- return (n, r) => T(s) && !T(m) ? (e(), v("div", ar, [k(_n, {
1021
- segments: T(o),
1022
- "display-class": ur,
1023
- pulse: t.pulse,
1024
- onEdit: T(h),
1025
- onClear: T(x)
1026
- }, null, 8, [
1027
- "segments",
1028
- "pulse",
1029
- "onEdit",
1030
- "onClear"
1031
- ]), T(c) || T(d) ? (e(), v("div", or, [T(c) ? (e(), C(bn, {
1032
- key: 0,
1033
- disabled: T(l),
1034
- onInsert: T(S)
1035
- }, null, 8, ["disabled", "onInsert"])) : b("", !0), T(d) ? (e(), C(Cn, {
1036
- key: 1,
1037
- disabled: T(f),
1038
- onInsert: T(w)
1039
- }, null, 8, ["disabled", "onInsert"])) : b("", !0)])) : b("", !0)])) : (e(), v("div", sr, [_("input", {
1040
- ref_key: "inputRef",
1041
- ref: a,
1042
- type: t.type,
1043
- class: p([T(K), { "tpl-pulse-fill": t.pulse }]),
1044
- value: t.modelValue,
1045
- placeholder: t.placeholder,
1046
- onInput: r[0] ||= (...e) => T(y) && T(y)(...e),
1047
- onBlur: r[1] ||= (...e) => T(g) && T(g)(...e),
1048
- onKeydown: r[2] ||= E((...e) => T(g) && T(g)(...e), ["escape"])
1049
- }, null, 42, cr), T(c) || T(d) ? (e(), v("div", lr, [T(c) ? (e(), C(bn, {
1050
- key: 0,
1051
- disabled: T(l),
1052
- onInsert: T(S)
1053
- }, null, 8, ["disabled", "onInsert"])) : b("", !0), T(d) ? (e(), C(Cn, {
1054
- key: 1,
1055
- disabled: T(f),
1056
- onInsert: T(w)
1057
- }, null, 8, ["disabled", "onInsert"])) : b("", !0)])) : b("", !0)]));
1058
- }
1059
- }), [["__scopeId", "data-v-e9135590"]]), dr = { class: "tpl:mb-3.5" }, fr = ["value"], pr = { value: "" }, mr = ["value"], hr = { class: "tpl:mb-3.5" }, gr = { class: "tpl:mb-3.5" }, _r = {
1060
- key: 0,
1061
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
1062
- }, vr = ["checked"], yr = { class: "tpl:mb-3.5" }, br = { class: "tpl:mb-3.5" }, xr = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Sr = { class: "tpl:mb-3.5" }, Cr = { class: "tpl:flex tpl:items-stretch" }, wr = ["value"], Tr = { class: "tpl:mb-3.5" }, Er = { class: "tpl:flex tpl:items-stretch" }, Dr = ["value"], Or = { class: "tpl:mb-3.5" }, kr = ["value"], Ar = { value: "auto" }, jr = { value: "full" }, Mr = { value: "custom" }, Nr = {
1063
- key: 0,
1064
- class: "tpl:mt-2 tpl:flex tpl:items-stretch"
1065
- }, Pr = ["value"], Fr = 200, Ir = /* @__PURE__ */ m({
1066
- __name: "ButtonToolbar",
1067
- props: {
1068
- block: {},
1069
- fontFamilies: {}
1070
- },
1071
- emits: ["update"],
1072
- setup(t, { emit: n }) {
1073
- let r = t, i = n, { t: a } = W(), s = g(() => r.block.width === "full" ? "full" : typeof r.block.width == "number" ? "custom" : "auto");
1074
- function c(e, t) {
1075
- i("update", { [e]: t });
1076
- }
1077
- function l(e) {
1078
- if (e === "full") {
1079
- c("width", "full");
1080
- return;
1081
- }
1082
- if (e === "custom") {
1083
- c("width", typeof r.block.width == "number" ? r.block.width : Fr);
1084
- return;
1085
- }
1086
- c("width", void 0);
1087
- }
1088
- function u(e) {
1089
- let t = Number(e);
1090
- !Number.isFinite(t) || t <= 0 || c("width", t);
1091
- }
1092
- return (n, r) => (e(), v(y, null, [
1093
- _("div", dr, [_("label", { class: p(T(q)) }, D(T(a).button.fontFamily), 3), _("select", {
1094
- class: p(T(K)),
1095
- value: t.block.fontFamily || "",
1096
- onChange: r[0] ||= (e) => c("fontFamily", e.target.value || void 0)
1097
- }, [_("option", pr, D(T(a).button.inheritFont), 1), (e(!0), v(y, null, o(t.fontFamilies, (t) => (e(), v("option", {
1098
- key: t.value,
1099
- value: t.value
1100
- }, D(t.label), 9, mr))), 128))], 42, fr)]),
1101
- _("div", hr, [_("label", { class: p(T(q)) }, D(T(a).button.text), 3), k($, {
1102
- "model-value": t.block.text,
1103
- type: "text",
1104
- "onUpdate:modelValue": r[1] ||= (e) => c("text", e)
1105
- }, null, 8, ["model-value"])]),
1106
- _("div", gr, [
1107
- _("label", { class: p(T(q)) }, D(T(a).button.url), 3),
1108
- k($, {
1109
- "model-value": t.block.url,
1110
- type: "url",
1111
- placeholder: T(a).button.urlPlaceholder,
1112
- "onUpdate:modelValue": r[2] ||= (e) => c("url", e)
1113
- }, null, 8, ["model-value", "placeholder"]),
1114
- t.block.url ? (e(), v("label", _r, [_("input", {
1115
- type: "checkbox",
1116
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
1117
- checked: t.block.openInNewTab ?? !1,
1118
- onChange: r[3] ||= (e) => c("openInNewTab", e.target.checked)
1119
- }, null, 40, vr), d(" " + D(T(a).button.openInNewTab), 1)])) : b("", !0)
1120
- ]),
1121
- _("div", yr, [_("label", { class: p(T(q)) }, D(T(a).button.background), 3), k(X, {
1122
- "model-value": t.block.backgroundColor,
1123
- "onUpdate:modelValue": r[4] ||= (e) => c("backgroundColor", e)
1124
- }, null, 8, ["model-value"])]),
1125
- _("div", br, [_("label", { class: p(T(q)) }, D(T(a).button.textColor), 3), k(X, {
1126
- "model-value": t.block.textColor,
1127
- "onUpdate:modelValue": r[5] ||= (e) => c("textColor", e)
1128
- }, null, 8, ["model-value"])]),
1129
- _("div", xr, [_("div", Sr, [_("label", { class: p(T(q)) }, D(T(a).button.borderRadius), 3), _("div", Cr, [_("input", {
1130
- type: "number",
1131
- class: p(T(Y)),
1132
- value: t.block.borderRadius,
1133
- min: "0",
1134
- max: "50",
1135
- onInput: r[6] ||= (e) => c("borderRadius", Number(e.target.value))
1136
- }, null, 42, wr), _("span", { class: p(T(J)) }, "px", 2)])]), _("div", Tr, [_("label", { class: p(T(q)) }, D(T(a).button.fontSize), 3), _("div", Er, [_("input", {
1137
- type: "number",
1138
- class: p(T(Y)),
1139
- value: t.block.fontSize,
1140
- min: "10",
1141
- max: "36",
1142
- onInput: r[7] ||= (e) => c("fontSize", Number(e.target.value))
1143
- }, null, 42, Dr), _("span", { class: p(T(J)) }, "px", 2)])])]),
1144
- _("div", Or, [
1145
- _("label", { class: p(T(q)) }, D(T(a).button.width), 3),
1146
- _("select", {
1147
- class: p(T(K)),
1148
- value: s.value,
1149
- onChange: r[8] ||= (e) => l(e.target.value)
1150
- }, [
1151
- _("option", Ar, D(T(a).button.widthAuto), 1),
1152
- _("option", jr, D(T(a).button.fullWidth), 1),
1153
- _("option", Mr, D(T(a).button.widthCustom), 1)
1154
- ], 42, kr),
1155
- s.value === "custom" ? (e(), v("div", Nr, [_("input", {
1156
- type: "number",
1157
- class: p(T(Y)),
1158
- value: typeof t.block.width == "number" ? t.block.width : Fr,
1159
- min: "20",
1160
- onInput: r[9] ||= (e) => u(e.target.value)
1161
- }, null, 42, Pr), _("span", { class: p(T(J)) }, "px", 2)])) : b("", !0)
1162
- ])
1163
- ], 64));
1164
- }
1165
- }), Lr = { class: "spacing-control" }, Rr = { class: "tpl:mb-2 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, zr = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-1.5" }, Br = { class: "tpl:flex tpl:items-center" }, Vr = ["aria-label"], Hr = ["value", "aria-label"], Ur = ["aria-label"], Wr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Gr = { class: "tpl:flex tpl:items-center" }, Kr = ["aria-label"], qr = ["value", "aria-label"], Jr = ["aria-label"], Yr = ["aria-label", "title"], Xr = { class: "tpl:flex tpl:items-center" }, Zr = ["aria-label"], Qr = ["value", "aria-label"], $r = ["aria-label"], ei = { class: "tpl:flex tpl:items-center" }, ti = ["aria-label"], ni = ["value", "aria-label"], ri = ["aria-label"], ii = "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)]", ai = "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)]", oi = /*#__PURE__*/ ft(/* @__PURE__ */ m({
1166
- __name: "SpacingControl",
1167
- props: {
1168
- modelValue: {},
1169
- label: {}
1170
- },
1171
- emits: ["update:modelValue"],
1172
- setup(t, { emit: n }) {
1173
- let r = t, i = n, { t: o } = W(), s = g(() => r.modelValue.top === r.modelValue.right && r.modelValue.right === r.modelValue.bottom && r.modelValue.bottom === r.modelValue.left), c = u(s.value);
1174
- a(s, (e) => {
1175
- !e && c.value && (c.value = !1);
1176
- });
1177
- function l(e, t) {
1178
- let n = r.modelValue[e], a = Math.max(0, n + t);
1179
- c.value ? i("update:modelValue", {
1180
- top: a,
1181
- right: a,
1182
- bottom: a,
1183
- left: a
1184
- }) : i("update:modelValue", {
1185
- ...r.modelValue,
1186
- [e]: a
1187
- });
1188
- }
1189
- function d(e, t) {
1190
- let n = Math.max(0, t);
1191
- c.value ? i("update:modelValue", {
1192
- top: n,
1193
- right: n,
1194
- bottom: n,
1195
- left: n
1196
- }) : i("update:modelValue", {
1197
- ...r.modelValue,
1198
- [e]: n
1199
- });
1200
- }
1201
- function f() {
1202
- if (c.value = !c.value, c.value) {
1203
- let e = r.modelValue.top;
1204
- i("update:modelValue", {
1205
- top: e,
1206
- right: e,
1207
- bottom: e,
1208
- left: e
1209
- });
1210
- }
1211
- }
1212
- return (n, r) => (e(), v("div", Lr, [_("label", Rr, D(t.label), 1), _("div", zr, [
1213
- _("div", Br, [
1214
- _("button", {
1215
- "aria-label": T(o).spacingControl.decreaseTop,
1216
- class: p([ii, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1217
- onClick: r[0] ||= (e) => l("top", -1)
1218
- }, [k(T(Ye), {
1219
- size: 12,
1220
- "stroke-width": 2
1221
- })], 10, Vr),
1222
- _("input", {
1223
- type: "number",
1224
- class: p(ai),
1225
- value: t.modelValue.top,
1226
- "aria-label": T(o).spacingControl.top,
1227
- min: "0",
1228
- onInput: r[1] ||= (e) => d("top", Number(e.target.value))
1229
- }, null, 40, Hr),
1230
- _("button", {
1231
- "aria-label": T(o).spacingControl.increaseTop,
1232
- class: p([ii, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1233
- onClick: r[2] ||= (e) => l("top", 1)
1234
- }, [k(T(Q), {
1235
- size: 12,
1236
- "stroke-width": 2
1237
- })], 10, Ur)
1238
- ]),
1239
- _("div", Wr, [
1240
- _("div", Gr, [
1241
- _("button", {
1242
- "aria-label": T(o).spacingControl.decreaseLeft,
1243
- class: p([ii, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1244
- onClick: r[3] ||= (e) => l("left", -1)
1245
- }, [k(T(Ye), {
1246
- size: 12,
1247
- "stroke-width": 2
1248
- })], 10, Kr),
1249
- _("input", {
1250
- type: "number",
1251
- class: p(ai),
1252
- value: t.modelValue.left,
1253
- "aria-label": T(o).spacingControl.left,
1254
- min: "0",
1255
- onInput: r[4] ||= (e) => d("left", Number(e.target.value))
1256
- }, null, 40, qr),
1257
- _("button", {
1258
- "aria-label": T(o).spacingControl.increaseLeft,
1259
- class: p([ii, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1260
- onClick: r[5] ||= (e) => l("left", 1)
1261
- }, [k(T(Q), {
1262
- size: 12,
1263
- "stroke-width": 2
1264
- })], 10, Jr)
1265
- ]),
1266
- _("button", {
1267
- class: p(["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)]", c.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)]"]),
1268
- "aria-label": c.value ? T(o).spacingControl.unlock : T(o).spacingControl.lockAll,
1269
- title: c.value ? T(o).spacingControl.unlock : T(o).spacingControl.lockAll,
1270
- onClick: f
1271
- }, [c.value ? (e(), C(T(jt), {
1272
- key: 0,
1273
- size: 14,
1274
- "stroke-width": 2
1275
- })) : (e(), C(T(At), {
1276
- key: 1,
1277
- size: 14,
1278
- "stroke-width": 2
1279
- }))], 10, Yr),
1280
- _("div", Xr, [
1281
- _("button", {
1282
- "aria-label": T(o).spacingControl.decreaseRight,
1283
- class: p([ii, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1284
- onClick: r[6] ||= (e) => l("right", -1)
1285
- }, [k(T(Ye), {
1286
- size: 12,
1287
- "stroke-width": 2
1288
- })], 10, Zr),
1289
- _("input", {
1290
- type: "number",
1291
- class: p(ai),
1292
- value: t.modelValue.right,
1293
- "aria-label": T(o).spacingControl.right,
1294
- min: "0",
1295
- onInput: r[7] ||= (e) => d("right", Number(e.target.value))
1296
- }, null, 40, Qr),
1297
- _("button", {
1298
- "aria-label": T(o).spacingControl.increaseRight,
1299
- class: p([ii, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1300
- onClick: r[8] ||= (e) => l("right", 1)
1301
- }, [k(T(Q), {
1302
- size: 12,
1303
- "stroke-width": 2
1304
- })], 10, $r)
1305
- ])
1306
- ]),
1307
- _("div", ei, [
1308
- _("button", {
1309
- "aria-label": T(o).spacingControl.decreaseBottom,
1310
- class: p([ii, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
1311
- onClick: r[9] ||= (e) => l("bottom", -1)
1312
- }, [k(T(Ye), {
1313
- size: 12,
1314
- "stroke-width": 2
1315
- })], 10, ti),
1316
- _("input", {
1317
- type: "number",
1318
- class: p(ai),
1319
- value: t.modelValue.bottom,
1320
- "aria-label": T(o).spacingControl.bottom,
1321
- min: "0",
1322
- onInput: r[10] ||= (e) => d("bottom", Number(e.target.value))
1323
- }, null, 40, ni),
1324
- _("button", {
1325
- "aria-label": T(o).spacingControl.increaseBottom,
1326
- class: p([ii, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
1327
- onClick: r[11] ||= (e) => l("bottom", 1)
1328
- }, [k(T(Q), {
1329
- size: 12,
1330
- "stroke-width": 2
1331
- })], 10, ri)
1332
- ])
1333
- ])]));
1334
- }
1335
- }), [["__scopeId", "data-v-9a9c8a07"]]), si = { class: "tpl:mt-3" }, ci = /* @__PURE__ */ m({
1336
- __name: "CollapsibleSection",
1337
- props: {
1338
- title: {},
1339
- open: { type: Boolean },
1340
- noBorder: { type: Boolean }
1341
- },
1342
- emits: ["toggle"],
1343
- setup(n) {
1344
- return (r, i) => (e(), v("div", { class: p(["tpl:py-3", n.noBorder ? "" : "tpl:border-t tpl:border-[var(--tpl-border)]"]) }, [_("button", {
1345
- type: "button",
1346
- 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)]",
1347
- onClick: i[0] ||= (e) => r.$emit("toggle")
1348
- }, [k(T(qe), {
1349
- class: p(["tpl:transition-transform tpl:duration-200", n.open ? "tpl:rotate-0" : "tpl:-rotate-90"]),
1350
- size: 12,
1351
- "stroke-width": 2
1352
- }, null, 8, ["class"]), _("span", null, D(n.title), 1)]), t(_("div", si, [s(r.$slots, "default")], 512), [[x, n.open]])], 2));
1353
- }
1354
- }), li = { class: "tpl:space-y-2" }, ui = ["checked", "onChange"], di = { class: "tpl:space-y-2" }, fi = ["value"], pi = { value: "" }, mi = ["label"], hi = ["value"], gi = ["value"], _i = {
1355
- key: 0,
1356
- value: "__custom__"
1357
- }, vi = {
1358
- key: 0,
1359
- class: "tpl:space-y-2"
1360
- }, yi = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, bi = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, xi = { class: "tpl:flex tpl:justify-end" }, Si = ["disabled"], Ci = {
1361
- key: 0,
1362
- class: "tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]"
1363
- }, wi = { class: "tpl:space-y-1" }, Ti = { 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)]" }, Ei = {
1364
- key: 0,
1365
- 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)]"
1366
- }, Di = /* @__PURE__ */ m({
1367
- __name: "CommonBlockSettings",
1368
- props: {
1369
- block: {},
1370
- isFirstSection: { type: Boolean }
1371
- },
1372
- emits: ["update"],
1373
- setup(n, { emit: s }) {
1374
- let c = n, l = s, { t: m } = W(), h = A(Be, []), x = A(Re, !1), S = i(/* @__PURE__ */ new Set()), w = u(!1), E = u(""), O = u(""), j = [{
1375
- key: "desktop",
1376
- icon: Mt,
1377
- labelKey: "showOnDesktop"
1378
- }, {
1379
- key: "mobile",
1380
- icon: Lt,
1381
- labelKey: "showOnMobile"
1382
- }];
1383
- function N(e) {
1384
- S.has(e) ? S.delete(e) : S.add(e);
1385
- }
1386
- let P = g(() => h.length > 0 || x), F = g(() => c.block.displayCondition ? !h.some((e) => e.label === c.block.displayCondition?.label) : !1);
1387
- function I() {
1388
- w.value = !0, F.value && c.block.displayCondition ? (E.value = c.block.displayCondition.before, O.value = c.block.displayCondition.after ?? "") : (E.value = "", O.value = "");
1389
- }
1390
- function L() {
1391
- E.value.trim() && (l("update", { displayCondition: {
1392
- label: m.blockSettings.customCondition,
1393
- before: E.value.trim(),
1394
- after: O.value.trim()
1395
- } }), w.value = !1, E.value = "", O.value = "");
1396
- }
1397
- a(() => c.block.displayCondition, (e) => {
1398
- if (!e) {
1399
- w.value = !1, E.value = "", O.value = "";
1400
- return;
1401
- }
1402
- F.value && (E.value = e.before, O.value = e.after ?? "");
1403
- }, { immediate: !0 });
1404
- let R = g(() => {
1405
- let e = {};
1406
- for (let t of h) {
1407
- let n = t.group ?? "";
1408
- e[n] || (e[n] = []), e[n].push(t);
1409
- }
1410
- return e;
1411
- });
1412
- function z(e, t) {
1413
- l("update", { styles: {
1414
- ...c.block.styles,
1415
- [e]: t
1416
- } });
1417
- }
1418
- function B(e) {
1419
- return c.block.visibility?.[e] !== !1;
1420
- }
1421
- function V(e) {
1422
- let t = {
1423
- desktop: B("desktop"),
1424
- mobile: B("mobile")
1425
- };
1426
- t[e] = !t[e], l("update", { visibility: t });
1427
- }
1428
- return (i, a) => (e(), v("div", { class: p(["tpl:flex tpl:flex-col", n.isFirstSection ? "" : "tpl:mt-4"]) }, [
1429
- k(ci, {
1430
- title: T(m).blockSettings.spacing,
1431
- open: S.has("spacing"),
1432
- "no-border": n.isFirstSection,
1433
- onToggle: a[1] ||= (e) => N("spacing")
1434
- }, {
1435
- default: M(() => [k(oi, {
1436
- label: T(m).blockSettings.padding,
1437
- "model-value": n.block.styles.padding,
1438
- "onUpdate:modelValue": a[0] ||= (e) => z("padding", e)
1439
- }, null, 8, ["label", "model-value"])]),
1440
- _: 1
1441
- }, 8, [
1442
- "title",
1443
- "open",
1444
- "no-border"
1445
- ]),
1446
- k(ci, {
1447
- title: T(m).blockSettings.background,
1448
- open: S.has("bg"),
1449
- onToggle: a[3] ||= (e) => N("bg")
1450
- }, {
1451
- default: M(() => [_("label", { class: p(T(q)) }, D(T(m).blockSettings.color), 3), k(X, {
1452
- "model-value": n.block.styles.backgroundColor ?? "",
1453
- "onUpdate:modelValue": a[2] ||= (e) => z("backgroundColor", e)
1454
- }, null, 8, ["model-value"])]),
1455
- _: 1
1456
- }, 8, ["title", "open"]),
1457
- k(ci, {
1458
- title: T(m).blockSettings.display,
1459
- open: S.has("display"),
1460
- onToggle: a[4] ||= (e) => N("display")
1461
- }, {
1462
- default: M(() => [_("div", li, [(e(), v(y, null, o(j, (t) => _("label", {
1463
- key: t.key,
1464
- class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]"
1465
- }, [
1466
- _("input", {
1467
- type: "checkbox",
1468
- class: "tpl:accent-[var(--tpl-primary)]",
1469
- checked: B(t.key),
1470
- onChange: (e) => V(t.key)
1471
- }, null, 40, ui),
1472
- (e(), C(r(t.icon), {
1473
- size: 14,
1474
- "stroke-width": 1.5
1475
- })),
1476
- d(" " + D(T(m).blockSettings[t.labelKey]), 1)
1477
- ])), 64))])]),
1478
- _: 1
1479
- }, 8, ["title", "open"]),
1480
- P.value ? (e(), C(ci, {
1481
- key: 0,
1482
- title: T(m).blockSettings.displayCondition,
1483
- open: S.has("condition"),
1484
- onToggle: a[8] ||= (e) => N("condition")
1485
- }, {
1486
- default: M(() => [_("div", di, [_("select", {
1487
- class: p(["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)]", n.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)]"]),
1488
- value: w.value || F.value ? "__custom__" : n.block.displayCondition?.label ?? "",
1489
- onChange: a[5] ||= (e) => {
1490
- let t = e.target.value;
1491
- if (t === "__custom__") {
1492
- I();
1493
- return;
1494
- }
1495
- if (w.value = !1, !t) {
1496
- l("update", { displayCondition: void 0 });
1497
- return;
1498
- }
1499
- let n = T(h).find((e) => e.label === t);
1500
- n && l("update", { displayCondition: n });
1501
- }
1502
- }, [
1503
- _("option", pi, D(T(m).blockSettings.noCondition), 1),
1504
- (e(!0), v(y, null, o(R.value, (t, n) => (e(), v(y, { key: n }, [n ? (e(), v("optgroup", {
1505
- key: 0,
1506
- label: String(n)
1507
- }, [(e(!0), v(y, null, o(t, (t) => (e(), v("option", {
1508
- key: t.label,
1509
- value: t.label
1510
- }, D(t.label), 9, hi))), 128))], 8, mi)) : (e(!0), v(y, { key: 1 }, o(t, (t) => (e(), v("option", {
1511
- key: t.label,
1512
- value: t.label
1513
- }, D(t.label), 9, gi))), 128))], 64))), 128)),
1514
- T(x) ? (e(), v("option", _i, D(T(m).blockSettings.customCondition), 1)) : b("", !0)
1515
- ], 42, fi), w.value || F.value ? (e(), v("div", vi, [
1516
- _("div", null, [_("label", yi, D(T(m).blockSettings.customConditionBefore), 1), t(_("textarea", {
1517
- "onUpdate:modelValue": a[6] ||= (e) => E.value = e,
1518
- rows: "2",
1519
- class: p(T(bt))
1520
- }, null, 2), [[f, E.value]])]),
1521
- _("div", null, [_("label", bi, D(T(m).blockSettings.customConditionAfter), 1), t(_("textarea", {
1522
- "onUpdate:modelValue": a[7] ||= (e) => O.value = e,
1523
- rows: "2",
1524
- class: p(T(bt))
1525
- }, null, 2), [[f, O.value]])]),
1526
- _("div", xi, [_("button", {
1527
- type: "button",
1528
- 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",
1529
- disabled: !E.value.trim(),
1530
- onClick: L
1531
- }, D(T(m).blockSettings.applyCondition), 9, Si)])
1532
- ])) : n.block.displayCondition && !F.value ? (e(), v(y, { key: 1 }, [n.block.displayCondition.description ? (e(), v("p", Ci, D(n.block.displayCondition.description), 1)) : b("", !0), _("div", wi, [_("pre", Ti, D(n.block.displayCondition.before), 1), n.block.displayCondition.after ? (e(), v("pre", Ei, D(n.block.displayCondition.after), 1)) : b("", !0)])], 64)) : b("", !0)])]),
1533
- _: 1
1534
- }, 8, ["title", "open"])) : b("", !0)
1535
- ], 2));
1536
- }
1537
- }), Oi = ["title"], ki = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ai = {
1538
- key: 1,
1539
- class: "tpl:text-[var(--tpl-danger)]"
1540
- }, ji = [
1541
- "aria-checked",
1542
- "aria-label",
1543
- "disabled"
1544
- ], Mi = /* @__PURE__ */ m({
1545
- __name: "BooleanField",
1546
- props: {
1547
- field: {},
1548
- modelValue: { type: Boolean },
1549
- readOnly: { type: Boolean }
1550
- },
1551
- emits: ["update:modelValue"],
1552
- setup(t, { emit: n }) {
1553
- let r = n, { t: i } = W();
1554
- return (n, a) => (e(), v("div", {
1555
- class: "tpl:mb-3.5",
1556
- title: t.readOnly ? T(i).customBlocks.dataSource.readOnlyTooltip : void 0
1557
- }, [_("label", { class: p(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", t.readOnly ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [_("span", ki, [
1558
- d(D(t.field.label) + " ", 1),
1559
- t.readOnly ? (e(), C(T(jt), {
1560
- key: 0,
1561
- size: 12,
1562
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1563
- })) : b("", !0),
1564
- t.field.required ? (e(), v("span", Ai, " * ")) : b("", !0)
1565
- ]), _("button", {
1566
- type: "button",
1567
- role: "switch",
1568
- "aria-checked": t.modelValue,
1569
- "aria-label": t.field.label,
1570
- class: p([
1571
- "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",
1572
- t.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
1573
- t.readOnly ? "tpl:opacity-60 tpl:cursor-not-allowed" : "tpl:cursor-pointer"
1574
- ]),
1575
- disabled: t.readOnly,
1576
- onClick: a[0] ||= (e) => !t.readOnly && r("update:modelValue", !t.modelValue)
1577
- }, [_("span", { class: p(["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", t.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, ji)], 2)], 8, Oi));
1578
- }
1579
- }), Ni = { class: "tpl:mb-3.5" }, Pi = {
1580
- key: 1,
1581
- class: "tpl:text-[var(--tpl-danger)]"
1582
- }, Fi = /* @__PURE__ */ m({
1583
- __name: "FieldWrapper",
1584
- props: {
1585
- label: {},
1586
- required: { type: Boolean },
1587
- readOnly: { type: Boolean }
1588
- },
1589
- setup(t) {
1590
- return (n, r) => (e(), v("div", Ni, [_("label", { class: p(T(q)) }, [
1591
- d(D(t.label) + " ", 1),
1592
- t.readOnly ? (e(), C(T(jt), {
1593
- key: 0,
1594
- size: 12,
1595
- class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
1596
- })) : b("", !0),
1597
- t.required ? (e(), v("span", Pi, "*")) : b("", !0)
1598
- ], 2), s(n.$slots, "default")]));
1599
- }
1600
- }), Ii = /* @__PURE__ */ m({
1601
- __name: "ColorField",
1602
- props: {
1603
- field: {},
1604
- modelValue: {},
1605
- readOnly: { type: Boolean }
1606
- },
1607
- emits: ["update:modelValue"],
1608
- setup(t, { emit: n }) {
1609
- let r = n, { t: i } = W();
1610
- return (n, a) => (e(), C(Fi, {
1611
- label: t.field.label,
1612
- required: t.field.required,
1613
- "read-only": t.readOnly
1614
- }, {
1615
- default: M(() => [k(X, {
1616
- "model-value": t.modelValue,
1617
- placeholder: t.field.placeholder,
1618
- disabled: t.readOnly,
1619
- title: t.readOnly ? T(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1620
- "onUpdate:modelValue": a[0] ||= (e) => r("update:modelValue", e)
1621
- }, null, 8, [
1622
- "model-value",
1623
- "placeholder",
1624
- "disabled",
1625
- "title"
1626
- ])]),
1627
- _: 1
1628
- }, 8, [
1629
- "label",
1630
- "required",
1631
- "read-only"
1632
- ]));
1633
- }
1634
- }), Li = {
1635
- key: 0,
1636
- class: "tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-2 tpl:border-dashed tpl:text-xs tpl:font-medium tpl:border-[var(--tpl-primary)] tpl:text-[var(--tpl-primary)]",
1637
- style: { "background-color": "color-mix(in srgb, var(--tpl-bg) 90%, transparent)" }
1638
- }, Ri = [
1639
- "value",
1640
- "placeholder",
1641
- "title"
1642
- ], zi = ["value", "placeholder"], Bi = /* @__PURE__ */ m({
1643
- __name: "ImageField",
1644
- props: {
1645
- field: {},
1646
- modelValue: {},
1647
- readOnly: { type: Boolean }
1648
- },
1649
- emits: ["update:modelValue"],
1650
- setup(t, { emit: n }) {
1651
- let r = t, i = n, { t: a } = W(), o = A(Ee, null), s = ht(), c = g(() => !!o);
1652
- async function l() {
1653
- let e = await o?.({ accept: ["images"] });
1654
- s.alive && e && i("update:modelValue", e.url);
1655
- }
1656
- let f = u(), m = u(!1), h = g(() => c.value && !m.value && !r.readOnly);
1657
- async function x(e) {
1658
- if (o) {
1659
- m.value = !0;
1660
- try {
1661
- let t = await o({
1662
- accept: ["images"],
1663
- files: e
1664
- });
1665
- if (!s.alive) return;
1666
- t && i("update:modelValue", t.url);
1667
- } finally {
1668
- s.alive && (m.value = !1);
1669
- }
1670
- }
1671
- }
1672
- let { isOver: S } = ue({
1673
- target: f,
1674
- enabled: h,
1675
- onFiles: x
1676
- });
1677
- return (n, r) => (e(), C(Fi, {
1678
- label: t.field.label,
1679
- required: t.field.required,
1680
- "read-only": t.readOnly
1681
- }, {
1682
- default: M(() => [_("div", {
1683
- ref_key: "dropZoneRef",
1684
- ref: f,
1685
- class: "tpl:relative"
1686
- }, [
1687
- h.value && (T(S) || m.value) ? (e(), v("div", Li, [m.value ? (e(), v(y, { key: 0 }, [k(T(it), {
1688
- class: "tpl-spinner",
1689
- size: 18,
1690
- "stroke-width": 2
1691
- }), d(" " + D(T(a).image.uploading), 1)], 64)) : (e(), v(y, { key: 1 }, [k(T(ut), {
1692
- size: 18,
1693
- "stroke-width": 1.5
1694
- }), d(" " + D(T(a).image.dropToUpload), 1)], 64))])) : b("", !0),
1695
- t.readOnly ? (e(), v("input", {
1696
- key: 1,
1697
- type: "url",
1698
- class: p([T(K), "tpl:opacity-60 tpl:cursor-not-allowed"]),
1699
- value: t.modelValue,
1700
- placeholder: t.field.placeholder || "https://...",
1701
- disabled: "",
1702
- title: T(a).customBlocks.dataSource.readOnlyTooltip
1703
- }, null, 10, Ri)) : (e(), v("input", {
1704
- key: 2,
1705
- type: "url",
1706
- class: p(T(K)),
1707
- value: t.modelValue,
1708
- placeholder: t.field.placeholder || "https://...",
1709
- onInput: r[0] ||= (e) => i("update:modelValue", e.target.value)
1710
- }, null, 42, zi)),
1711
- c.value && !t.readOnly ? (e(), v("button", {
1712
- key: 3,
1713
- 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)]",
1714
- onClick: r[1] ||= (e) => l()
1715
- }, [k(T(pe), {
1716
- size: 14,
1717
- "stroke-width": 1.5
1718
- }), d(" " + D(T(a).image.browseMedia), 1)])) : b("", !0)
1719
- ], 512)]),
1720
- _: 1
1721
- }, 8, [
1722
- "label",
1723
- "required",
1724
- "read-only"
1725
- ]));
1726
- }
1727
- }), Vi = [
1728
- "value",
1729
- "placeholder",
1730
- "min",
1731
- "max",
1732
- "step",
1733
- "disabled",
1734
- "title"
1735
- ], Hi = /* @__PURE__ */ m({
1736
- __name: "NumberField",
1737
- props: {
1738
- field: {},
1739
- modelValue: {},
1740
- readOnly: { type: Boolean }
1741
- },
1742
- emits: ["update:modelValue"],
1743
- setup(t, { emit: n }) {
1744
- let r = n, { t: i } = W();
1745
- return (n, a) => (e(), C(Fi, {
1746
- label: t.field.label,
1747
- required: t.field.required,
1748
- "read-only": t.readOnly
1749
- }, {
1750
- default: M(() => [_("input", {
1751
- type: "number",
1752
- class: p([T(K), t.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
1753
- value: t.modelValue,
1754
- placeholder: t.field.placeholder,
1755
- min: t.field.min,
1756
- max: t.field.max,
1757
- step: t.field.step,
1758
- disabled: t.readOnly,
1759
- title: t.readOnly ? T(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1760
- onInput: a[0] ||= (e) => !t.readOnly && r("update:modelValue", Number(e.target.value))
1761
- }, null, 42, Vi)]),
1762
- _: 1
1763
- }, 8, [
1764
- "label",
1765
- "required",
1766
- "read-only"
1767
- ]));
1768
- }
1769
- }), Ui = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Wi = { class: "tpl:mb-2 tpl:flex tpl:items-center tpl:justify-between" }, Gi = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]" }, Ki = ["title", "onClick"], qi = {
1770
- key: 1,
1771
- class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
1772
- }, Ji = /* @__PURE__ */ m({
1773
- __name: "RepeatableField",
1774
- props: {
1775
- field: {},
1776
- modelValue: {},
1777
- readOnly: { type: Boolean }
1778
- },
1779
- emits: ["update:modelValue"],
1780
- setup(t, { emit: n }) {
1781
- let i = t, a = n, { t: s } = W(), c = g(() => i.modelValue || []), l = g(() => !i.field.maxItems || c.value.length < i.field.maxItems), u = g(() => !i.field.minItems || c.value.length > i.field.minItems);
1782
- function f() {
1783
- if (!l.value || i.readOnly) return;
1784
- let e = {};
1785
- for (let t of i.field.fields) e[t.key] = t.default ?? "";
1786
- a("update:modelValue", [...c.value, e]);
1787
- }
1788
- function m(e) {
1789
- if (!u.value || i.readOnly) return;
1790
- let t = [...c.value];
1791
- t.splice(e, 1), a("update:modelValue", t);
1792
- }
1793
- function h(e, t, n) {
1794
- let r = c.value.map((r, i) => i === e ? {
1795
- ...r,
1796
- [t]: n
1797
- } : r);
1798
- a("update:modelValue", r);
1799
- }
1800
- return (n, i) => (e(), C(Fi, {
1801
- label: t.field.label,
1802
- required: t.field.required,
1803
- "read-only": t.readOnly
1804
- }, {
1805
- default: M(() => [_("div", Ui, [
1806
- (e(!0), v(y, null, o(c.value, (n, i) => (e(), v("div", {
1807
- key: `${t.field.key}-${i}`,
1808
- class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-3"
1809
- }, [_("div", Wi, [_("span", Gi, " #" + D(i + 1), 1), u.value && !t.readOnly ? (e(), v("button", {
1810
- key: 0,
1811
- type: "button",
1812
- 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)]",
1813
- title: T(s).customBlocks.fields.removeItem,
1814
- onClick: (e) => m(i)
1815
- }, [k(T(lt), {
1816
- size: 12,
1817
- "stroke-width": 2
1818
- })], 8, Ki)) : b("", !0)]), (e(!0), v(y, null, o(t.field.fields, (a) => (e(), C(r(T(ra)(a.type)), {
1819
- key: a.key,
1820
- field: a,
1821
- "model-value": n[a.key],
1822
- "read-only": t.readOnly,
1823
- "onUpdate:modelValue": (e) => h(i, a.key, e)
1824
- }, null, 8, [
1825
- "field",
1826
- "model-value",
1827
- "read-only",
1828
- "onUpdate:modelValue"
1829
- ]))), 128))]))), 128)),
1830
- l.value && !t.readOnly ? (e(), v("button", {
1831
- key: 0,
1832
- type: "button",
1833
- class: p(T(yt)),
1834
- onClick: f
1835
- }, [k(T(Q), {
1836
- size: 14,
1837
- "stroke-width": 2
1838
- }), d(" " + D(T(s).customBlocks.fields.addItem), 1)], 2)) : b("", !0),
1839
- !l.value && !t.readOnly ? (e(), v("p", qi, D(T(s).customBlocks.fields.maxItemsReached), 1)) : b("", !0)
1840
- ])]),
1841
- _: 1
1842
- }, 8, [
1843
- "label",
1844
- "required",
1845
- "read-only"
1846
- ]));
1847
- }
1848
- }), Yi = [
1849
- "value",
1850
- "disabled",
1851
- "title"
1852
- ], Xi = ["value"], Zi = /* @__PURE__ */ m({
1853
- __name: "SelectField",
1854
- props: {
1855
- field: {},
1856
- modelValue: {},
1857
- readOnly: { type: Boolean }
1858
- },
1859
- emits: ["update:modelValue"],
1860
- setup(t, { emit: n }) {
1861
- let r = n, { t: i } = W();
1862
- return (n, a) => (e(), C(Fi, {
1863
- label: t.field.label,
1864
- required: t.field.required,
1865
- "read-only": t.readOnly
1866
- }, {
1867
- default: M(() => [_("select", {
1868
- class: p([T(K), t.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
1869
- value: t.modelValue,
1870
- disabled: t.readOnly,
1871
- title: t.readOnly ? T(i).customBlocks.dataSource.readOnlyTooltip : void 0,
1872
- onChange: a[0] ||= (e) => !t.readOnly && r("update:modelValue", e.target.value)
1873
- }, [(e(!0), v(y, null, o(t.field.options, (t) => (e(), v("option", {
1874
- key: t.value,
1875
- value: t.value
1876
- }, D(t.label), 9, Xi))), 128))], 42, Yi)]),
1877
- _: 1
1878
- }, 8, [
1879
- "label",
1880
- "required",
1881
- "read-only"
1882
- ]));
1883
- }
1884
- }), Qi = [
1885
- "value",
1886
- "placeholder",
1887
- "title"
1888
- ], $i = /* @__PURE__ */ m({
1889
- __name: "TextField",
1890
- props: {
1891
- field: {},
1892
- modelValue: {},
1893
- readOnly: { type: Boolean }
1894
- },
1895
- emits: ["update:modelValue"],
1896
- setup(t, { emit: n }) {
1897
- let r = n, { t: i } = W();
1898
- return (n, a) => (e(), C(Fi, {
1899
- label: t.field.label,
1900
- required: t.field.required,
1901
- "read-only": t.readOnly
1902
- }, {
1903
- default: M(() => [t.readOnly ? (e(), v("input", {
1904
- key: 0,
1905
- type: "text",
1906
- class: p([T(K), "tpl:opacity-60 tpl:cursor-not-allowed"]),
1907
- value: t.modelValue,
1908
- placeholder: t.field.placeholder,
1909
- disabled: "",
1910
- title: T(i).customBlocks.dataSource.readOnlyTooltip
1911
- }, null, 10, Qi)) : (e(), C($, {
1912
- key: 1,
1913
- "model-value": t.modelValue,
1914
- placeholder: t.field.placeholder,
1915
- "onUpdate:modelValue": a[0] ||= (e) => r("update:modelValue", e)
1916
- }, null, 8, ["model-value", "placeholder"]))]),
1917
- _: 1
1918
- }, 8, [
1919
- "label",
1920
- "required",
1921
- "read-only"
1922
- ]));
1923
- }
1924
- }), ea = [
1925
- "value",
1926
- "placeholder",
1927
- "title"
1928
- ], ta = "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", na = {
1929
- text: $i,
1930
- textarea: /* @__PURE__ */ m({
1931
- __name: "TextareaField",
1932
- props: {
1933
- field: {},
1934
- modelValue: {},
1935
- readOnly: { type: Boolean }
1936
- },
1937
- emits: ["update:modelValue"],
1938
- setup(t, { emit: n }) {
1939
- let r = n, { t: i } = W();
1940
- return (n, a) => (e(), C(Fi, {
1941
- label: t.field.label,
1942
- required: t.field.required,
1943
- "read-only": t.readOnly
1944
- }, {
1945
- default: M(() => [t.readOnly ? (e(), v("textarea", {
1946
- key: 0,
1947
- value: t.modelValue,
1948
- placeholder: t.field.placeholder,
1949
- rows: "3",
1950
- disabled: "",
1951
- title: T(i).customBlocks.dataSource.readOnlyTooltip,
1952
- class: p(ta)
1953
- }, null, 8, ea)) : (e(), C(jn, {
1954
- key: 1,
1955
- "model-value": t.modelValue,
1956
- placeholder: t.field.placeholder,
1957
- "onUpdate:modelValue": a[0] ||= (e) => r("update:modelValue", e)
1958
- }, null, 8, ["model-value", "placeholder"]))]),
1959
- _: 1
1960
- }, 8, [
1961
- "label",
1962
- "required",
1963
- "read-only"
1964
- ]));
1965
- }
1966
- }),
1967
- image: Bi,
1968
- color: Ii,
1969
- number: Hi,
1970
- select: Zi,
1971
- boolean: Mi,
1972
- repeatable: Ji
1973
- };
1974
- function ra(e) {
1975
- return na[e] ?? $i;
1976
- }
1977
- //#endregion
1978
- //#region src/components/toolbar/CustomBlockToolbar.vue?vue&type=script&setup=true&lang.ts
1979
- var ia = {
1980
- key: 0,
1981
- class: "tpl:p-4"
1982
- }, aa = { class: "tpl:m-0 tpl:text-center tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, oa = { key: 1 }, sa = {
1983
- key: 0,
1984
- class: "tpl:m-0 tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
1985
- }, ca = {
1986
- key: 1,
1987
- class: "tpl:mb-4"
1988
- }, la = {
1989
- key: 1,
1990
- class: "tpl:flex tpl:h-[32px] tpl:items-center"
1991
- }, ua = {
1992
- key: 0,
1993
- class: "tpl:w-full tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
1994
- }, da = {
1995
- key: 2,
1996
- class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]"
1997
- }, fa = /* @__PURE__ */ m({
1998
- __name: "CustomBlockToolbar",
1999
- props: { block: {} },
2000
- emits: ["updateFieldValues", "updateDataSourceFetched"],
2001
- setup(t, { emit: n }) {
2002
- let i = t, a = n, { t: s } = W(), c = A(Ne, []), l = g(() => c.find((e) => e.type === i.block.customType)), { isFetching: u, fetchError: f, fetch: p, hasDataSource: m, needsFetch: h } = ie({
2003
- definition: l,
2004
- block: g(() => i.block),
2005
- onUpdate: (e, t) => {
2006
- a("updateFieldValues", e), a("updateDataSourceFetched", t);
2007
- }
2008
- });
2009
- function x(e) {
2010
- return e.readOnly === !0 && m.value && !!i.block.dataSourceFetched;
2011
- }
2012
- function S(e, t) {
2013
- a("updateFieldValues", {
2014
- ...i.block.fieldValues,
2015
- [e]: t
2016
- });
2017
- }
2018
- return (n, i) => l.value ? (e(), v("div", oa, [
2019
- l.value.description ? (e(), v("p", sa, D(l.value.description), 1)) : b("", !0),
2020
- T(m) ? (e(), v("div", ca, [T(h) && !T(u) ? (e(), v("button", {
2021
- key: 0,
2022
- type: "button",
2023
- 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)]",
2024
- onClick: i[0] ||= (...e) => T(p) && T(p)(...e)
2025
- }, D(l.value?.dataSource?.label || T(s).customBlocks.dataSource.fetchButton), 1)) : (e(), v("div", la, [T(u) ? (e(), v("div", ua, D(T(s).customBlocks.dataSource.fetching), 1)) : (e(), v("button", {
2026
- key: 1,
2027
- type: "button",
2028
- 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)]",
2029
- onClick: i[1] ||= (...e) => T(p) && T(p)(...e)
2030
- }, [k(T(et), { size: 12 }), d(" " + D(T(s).customBlocks.dataSource.changeButton), 1)]))])), T(f) ? (e(), v("p", da, [k(T(Je), {
2031
- size: 14,
2032
- class: "tpl:shrink-0"
2033
- }), d(" " + D(T(s).customBlocks.dataSource.fetchError), 1)])) : b("", !0)])) : b("", !0),
2034
- (e(!0), v(y, null, o(l.value.fields, (n) => (e(), C(r(T(ra)(n.type)), {
2035
- key: n.key,
2036
- field: n,
2037
- "model-value": t.block.fieldValues[n.key],
2038
- "read-only": x(n),
2039
- "onUpdate:modelValue": (e) => S(n.key, e)
2040
- }, null, 8, [
2041
- "field",
2042
- "model-value",
2043
- "read-only",
2044
- "onUpdate:modelValue"
2045
- ]))), 128))
2046
- ])) : (e(), v("div", ia, [_("p", aa, D(T(s).customBlocks.toolbar.noDefinition), 1)]));
2047
- }
2048
- }), pa = { class: "tpl:mb-3.5" }, ma = { class: "tpl:mb-3.5" }, ha = { class: "tpl:mb-3.5" }, ga = { class: "tpl:flex tpl:items-stretch" }, _a = ["value"], va = /* @__PURE__ */ m({
2049
- __name: "DividerToolbar",
2050
- props: { block: {} },
2051
- emits: ["update"],
2052
- setup(t, { emit: n }) {
2053
- let r = n, { t: i } = W();
2054
- function a(e, t) {
2055
- r("update", { [e]: t });
2056
- }
2057
- return (n, r) => (e(), v(y, null, [
2058
- _("div", pa, [_("label", { class: p(T(q)) }, D(T(i).divider.style), 3), k(wt, {
2059
- options: [
2060
- {
2061
- value: "solid",
2062
- label: T(i).divider.solid
2063
- },
2064
- {
2065
- value: "dashed",
2066
- label: T(i).divider.dashed
2067
- },
2068
- {
2069
- value: "dotted",
2070
- label: T(i).divider.dotted
2071
- }
2072
- ],
2073
- "model-value": t.block.lineStyle,
2074
- "onUpdate:modelValue": r[0] ||= (e) => a("lineStyle", e)
2075
- }, null, 8, ["options", "model-value"])]),
2076
- _("div", ma, [_("label", { class: p(T(q)) }, D(T(i).divider.color), 3), k(X, {
2077
- "model-value": t.block.color,
2078
- "onUpdate:modelValue": r[1] ||= (e) => a("color", e)
2079
- }, null, 8, ["model-value"])]),
2080
- _("div", ha, [_("label", { class: p(T(q)) }, D(T(i).divider.thickness), 3), _("div", ga, [_("input", {
2081
- type: "number",
2082
- class: p(T(Y)),
2083
- value: t.block.thickness,
2084
- min: "1",
2085
- max: "10",
2086
- onInput: r[2] ||= (e) => a("thickness", Number(e.target.value))
2087
- }, null, 42, _a), _("span", { class: p(T(J)) }, "px", 2)])])
2088
- ], 64));
2089
- }
2090
- }), ya = { class: "tpl:mb-3.5" }, ba = ["value"], xa = { class: "tpl:mt-1.5 tpl:flex tpl:items-start tpl:gap-1.5 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, Sa = /* @__PURE__ */ m({
2091
- __name: "HtmlToolbar",
2092
- props: { block: {} },
2093
- emits: ["update"],
2094
- setup(t, { emit: n }) {
2095
- let r = n, { t: i } = W();
2096
- return (n, a) => (e(), v("div", ya, [
2097
- _("label", { class: p(T(q)) }, D(T(i).html.content), 3),
2098
- _("textarea", {
2099
- value: t.block.content,
2100
- placeholder: "<div>...</div>",
2101
- rows: "10",
2102
- class: p(T(bt)),
2103
- onInput: a[0] ||= (e) => r("update", { content: e.target.value })
2104
- }, null, 42, ba),
2105
- _("p", xa, [k(T(nt), {
2106
- size: 12,
2107
- class: "tpl:mt-0.5 tpl:shrink-0"
2108
- }), d(" " + D(T(i).html.sanitizationHint), 1)])
2109
- ]));
2110
- }
2111
- }), Ca = { class: "tpl:mb-3.5" }, wa = {
2112
- key: 0,
2113
- class: "tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-2 tpl:border-dashed tpl:text-xs tpl:font-medium tpl:border-[var(--tpl-primary)] tpl:text-[var(--tpl-primary)]",
2114
- style: { "background-color": "color-mix(in srgb, var(--tpl-bg) 90%, transparent)" }
2115
- }, Ta = {
2116
- key: 0,
2117
- class: "tpl:mb-3.5"
2118
- }, Ea = ["value", "placeholder"], Da = { class: "tpl:mb-3.5" }, Oa = { class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]" }, ka = ["checked"], Aa = { class: "tpl:block tpl:text-[var(--tpl-text-dim)]" }, ja = { class: "tpl:mb-3.5" }, Ma = ["value"], Na = { value: "full" }, Pa = { value: "custom" }, Fa = {
2119
- key: 0,
2120
- class: "tpl:mt-2 tpl:flex tpl:items-stretch"
2121
- }, Ia = ["value"], La = { class: "tpl:mb-3.5" }, Ra = { class: "tpl:mb-3.5" }, za = {
2122
- key: 0,
2123
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
2124
- }, Ba = ["checked"], Va = 350, Ha = /* @__PURE__ */ m({
2125
- __name: "ImageToolbar",
2126
- props: { block: {} },
2127
- emits: ["update"],
2128
- setup(t, { emit: n }) {
2129
- let r = t, i = n, { t: a } = W(), o = A(Ee, null), s = A(je, L.liquid), c = ht(), l = g(() => !!o), f = u(!1), m = u(!1), { start: h } = we(() => {
2130
- f.value = !1;
2131
- }, 1e3, { immediate: !1 }), x = [
2132
- 300,
2133
- 400,
2134
- 500
2135
- ], S = g(() => {
2136
- let e = r.block.width;
2137
- return e === "full" ? "full" : x.includes(e) ? String(e) : "custom";
2138
- });
2139
- function C(e, t) {
2140
- i("update", { [e]: t });
2141
- }
2142
- function w(e) {
2143
- if (e === "custom") {
2144
- let e = r.block.width;
2145
- (typeof e != "number" || x.includes(e)) && C("width", Va);
2146
- return;
2147
- }
2148
- C("width", e === "full" ? "full" : Number(e));
2149
- }
2150
- function E(e) {
2151
- let t = Number(e);
2152
- !Number.isFinite(t) || t <= 0 || C("width", t);
2153
- }
2154
- async function O() {
2155
- let e = await o?.({ accept: ["images"] });
2156
- c.alive && e && (C("src", e.url), e.alt && (C("alt", e.alt), m.value = !0), f.value = !0, h());
2157
- }
2158
- let j = u(), M = u(!1), N = g(() => I(r.block.src, s)), P = g(() => l.value && !M.value && !N.value);
2159
- async function F(e) {
2160
- if (o) {
2161
- M.value = !0;
2162
- try {
2163
- let t = await o({
2164
- accept: ["images"],
2165
- files: e
2166
- });
2167
- if (!c.alive) return;
2168
- t && (C("src", t.url), t.alt && (C("alt", t.alt), m.value = !0), f.value = !0, h());
2169
- } finally {
2170
- c.alive && (M.value = !1);
2171
- }
2172
- }
2173
- }
2174
- let { isOver: R } = ue({
2175
- target: j,
2176
- enabled: P,
2177
- onFiles: F
2178
- });
2179
- return (n, r) => (e(), v(y, null, [
2180
- _("div", Ca, [_("label", { class: p(T(q)) }, D(T(a).image.imageUrl), 3), _("div", {
2181
- ref_key: "dropZoneRef",
2182
- ref: j,
2183
- class: "tpl:relative"
2184
- }, [
2185
- P.value && (T(R) || M.value) ? (e(), v("div", wa, [M.value ? (e(), v(y, { key: 0 }, [k(T(it), {
2186
- class: "tpl-spinner",
2187
- size: 18,
2188
- "stroke-width": 2
2189
- }), d(" " + D(T(a).image.uploading), 1)], 64)) : (e(), v(y, { key: 1 }, [k(T(ut), {
2190
- size: 18,
2191
- "stroke-width": 1.5
2192
- }), d(" " + D(T(a).image.dropToUpload), 1)], 64))])) : b("", !0),
2193
- k($, {
2194
- "model-value": t.block.src,
2195
- type: "url",
2196
- placeholder: T(a).image.imageUrlPlaceholder,
2197
- pulse: f.value,
2198
- "onUpdate:modelValue": r[0] ||= (e) => C("src", e)
2199
- }, null, 8, [
2200
- "model-value",
2201
- "placeholder",
2202
- "pulse"
2203
- ]),
2204
- l.value ? (e(), v("button", {
2205
- key: 1,
2206
- 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",
2207
- style: {
2208
- "border-color": "var(--tpl-border)",
2209
- color: "var(--tpl-primary)",
2210
- "background-color": "var(--tpl-bg)"
2211
- },
2212
- onClick: O
2213
- }, [k(T(pe), {
2214
- size: 14,
2215
- "stroke-width": 1.5
2216
- }), d(" " + D(T(a).image.browseMedia), 1)])) : b("", !0)
2217
- ], 512)]),
2218
- T(I)(t.block.src, T(s)) ? (e(), v("div", Ta, [_("label", { class: p(T(q)) }, [d(D(T(a).image.placeholderUrl) + " ", 1), r[9] ||= _("span", { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, D("(optional)"), -1)], 2), _("input", {
2219
- type: "url",
2220
- class: p(T(K)),
2221
- value: t.block.placeholderUrl || "",
2222
- placeholder: T(a).image.placeholderUrlPlaceholder,
2223
- onInput: r[1] ||= (e) => C("placeholderUrl", e.target.value)
2224
- }, null, 42, Ea)])) : b("", !0),
2225
- _("div", Da, [
2226
- _("label", { class: p(T(q)) }, D(T(a).image.altText), 3),
2227
- k($, {
2228
- "model-value": t.block.alt,
2229
- type: "text",
2230
- placeholder: T(a).image.altTextPlaceholder,
2231
- pulse: m.value,
2232
- disabled: t.block.decorative === !0,
2233
- "onUpdate:modelValue": r[2] ||= (e) => C("alt", e)
2234
- }, null, 8, [
2235
- "model-value",
2236
- "placeholder",
2237
- "pulse",
2238
- "disabled"
2239
- ]),
2240
- _("label", Oa, [_("input", {
2241
- type: "checkbox",
2242
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
2243
- checked: t.block.decorative === !0,
2244
- onChange: r[3] ||= (e) => C("decorative", e.target.checked)
2245
- }, null, 40, ka), _("span", null, [d(D(T(a).image.decorative) + " ", 1), _("span", Aa, D(T(a).image.decorativeHint), 1)])])
2246
- ]),
2247
- _("div", ja, [
2248
- _("label", { class: p(T(q)) }, D(T(a).image.width), 3),
2249
- _("select", {
2250
- class: p(T(K)),
2251
- value: S.value,
2252
- onChange: r[4] ||= (e) => w(e.target.value)
2253
- }, [
2254
- _("option", Na, D(T(a).image.fullWidth), 1),
2255
- r[10] ||= _("option", { value: "300" }, "300px", -1),
2256
- r[11] ||= _("option", { value: "400" }, "400px", -1),
2257
- r[12] ||= _("option", { value: "500" }, "500px", -1),
2258
- _("option", Pa, D(T(a).image.widthCustom), 1)
2259
- ], 42, Ma),
2260
- S.value === "custom" ? (e(), v("div", Fa, [_("input", {
2261
- type: "number",
2262
- class: p(T(Y)),
2263
- value: typeof t.block.width == "number" ? t.block.width : Va,
2264
- min: "20",
2265
- onInput: r[5] ||= (e) => E(e.target.value)
2266
- }, null, 42, Ia), _("span", { class: p(T(J)) }, "px", 2)])) : b("", !0)
2267
- ]),
2268
- _("div", La, [_("label", { class: p(T(q)) }, D(T(a).title.align), 3), k(wt, {
2269
- options: [
2270
- {
2271
- value: "left",
2272
- label: T(a).title.alignLeft
2273
- },
2274
- {
2275
- value: "center",
2276
- label: T(a).title.alignCenter
2277
- },
2278
- {
2279
- value: "right",
2280
- label: T(a).title.alignRight
2281
- }
2282
- ],
2283
- "model-value": t.block.align,
2284
- "onUpdate:modelValue": r[6] ||= (e) => C("align", e)
2285
- }, null, 8, ["options", "model-value"])]),
2286
- _("div", Ra, [
2287
- _("label", { class: p(T(q)) }, D(T(a).image.linkUrl), 3),
2288
- k($, {
2289
- "model-value": t.block.linkUrl || "",
2290
- type: "url",
2291
- placeholder: T(a).image.imageUrlPlaceholder,
2292
- "onUpdate:modelValue": r[7] ||= (e) => C("linkUrl", e)
2293
- }, null, 8, ["model-value", "placeholder"]),
2294
- t.block.linkUrl ? (e(), v("label", za, [_("input", {
2295
- type: "checkbox",
2296
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
2297
- checked: t.block.linkOpenInNewTab ?? !1,
2298
- onChange: r[8] ||= (e) => C("linkOpenInNewTab", e.target.checked)
2299
- }, null, 40, Ba), d(" " + D(T(a).image.openInNewTab), 1)])) : b("", !0)
2300
- ])
2301
- ], 64));
2302
- }
2303
- }), Ua = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Wa = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ga = [
2304
- "value",
2305
- "placeholder",
2306
- "onInput"
2307
- ], Ka = ["title", "onClick"], qa = { class: "tpl:flex tpl:items-center tpl:gap-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Ja = ["checked", "onChange"], Ya = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Xa = ["value"], Za = { value: "" }, Qa = ["value"], $a = ["value"], eo = /* @__PURE__ */ m({
2308
- __name: "MenuToolbar",
2309
- props: {
2310
- block: {},
2311
- fontFamilies: {}
2312
- },
2313
- emits: ["update"],
2314
- setup(t, { emit: n }) {
2315
- let r = t, i = n, { t: a } = W(), s = g(() => [
2316
- {
2317
- key: "openInNewTab",
2318
- label: a.menu.openInNewTab
2319
- },
2320
- {
2321
- key: "bold",
2322
- label: a.menu.bold
2323
- },
2324
- {
2325
- key: "underline",
2326
- label: a.menu.underline
2327
- }
2328
- ]), c = g(() => [
2329
- {
2330
- value: "left",
2331
- label: a.title.alignLeft,
2332
- icon: ct
2333
- },
2334
- {
2335
- value: "center",
2336
- label: a.title.alignCenter,
2337
- icon: st
2338
- },
2339
- {
2340
- value: "right",
2341
- label: a.title.alignRight,
2342
- icon: ot
2343
- }
2344
- ]);
2345
- function l(e, t) {
2346
- i("update", { [e]: t });
2347
- }
2348
- function u() {
2349
- let e = {
2350
- id: N(),
2351
- text: "",
2352
- url: "",
2353
- openInNewTab: !1,
2354
- bold: !1,
2355
- underline: !1
2356
- };
2357
- i("update", { items: [...r.block.items, e] });
2358
- }
2359
- function f(e, t, n) {
2360
- let a = r.block.items.map((r) => r.id === e ? {
2361
- ...r,
2362
- [t]: n
2363
- } : r);
2364
- i("update", { items: a });
2365
- }
2366
- function m(e) {
2367
- i("update", { items: r.block.items.filter((t) => t.id !== e) });
2368
- }
2369
- return (n, r) => (e(), v(y, null, [
2370
- k(Z, { label: T(a).menu.items }, {
2371
- default: M(() => [_("div", Ua, [(e(!0), v(y, null, o(t.block.items, (n) => (e(), v("div", {
2372
- key: n.id,
2373
- 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"
2374
- }, [
2375
- _("div", Wa, [_("input", {
2376
- type: "text",
2377
- class: p([T(K), "tpl:flex-1"]),
2378
- value: n.text,
2379
- placeholder: T(a).menu.text,
2380
- onInput: (e) => f(n.id, "text", e.target.value)
2381
- }, null, 42, Ga), _("button", {
2382
- class: p(T(vt)),
2383
- title: T(a).menu.removeItem,
2384
- onClick: (e) => m(n.id)
2385
- }, [k(T(dt), {
2386
- size: 14,
2387
- "stroke-width": 2
2388
- })], 10, Ka)]),
2389
- k($, {
2390
- "model-value": n.url,
2391
- type: "url",
2392
- placeholder: T(a).menu.urlPlaceholder,
2393
- "onUpdate:modelValue": (e) => f(n.id, "url", e)
2394
- }, null, 8, [
2395
- "model-value",
2396
- "placeholder",
2397
- "onUpdate:modelValue"
2398
- ]),
2399
- _("div", qa, [(e(!0), v(y, null, o(s.value, (t) => (e(), v("label", {
2400
- key: t.key,
2401
- class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1"
2402
- }, [_("input", {
2403
- type: "checkbox",
2404
- checked: n[t.key],
2405
- class: "tpl:accent-[var(--tpl-primary)]",
2406
- onChange: (e) => f(n.id, t.key, e.target.checked)
2407
- }, null, 40, Ja), d(" " + D(t.label), 1)]))), 128))]),
2408
- _("div", Ya, [_("label", { class: p([T(q), "tpl:!mb-0"]) }, D(T(a).menu.color), 3), k(X, {
2409
- "swatch-only": "",
2410
- "model-value": n.color || t.block.linkColor || t.block.color,
2411
- "onUpdate:modelValue": (e) => f(n.id, "color", e)
2412
- }, null, 8, ["model-value", "onUpdate:modelValue"])])
2413
- ]))), 128)), _("button", {
2414
- class: p(T(yt)),
2415
- onClick: u
2416
- }, [k(T(Q), {
2417
- size: 14,
2418
- "stroke-width": 2
2419
- }), d(" " + D(T(a).menu.addItem), 1)], 2)])]),
2420
- _: 1
2421
- }, 8, ["label"]),
2422
- k(Z, { label: T(a).menu.fontFamily }, {
2423
- default: M(() => [_("select", {
2424
- class: p(T(K)),
2425
- value: t.block.fontFamily || "",
2426
- onChange: r[0] ||= (e) => l("fontFamily", e.target.value || void 0)
2427
- }, [_("option", Za, D(T(a).title.inheritFont), 1), (e(!0), v(y, null, o(t.fontFamilies, (t) => (e(), v("option", {
2428
- key: t.value,
2429
- value: t.value
2430
- }, D(t.label), 9, Qa))), 128))], 42, Xa)]),
2431
- _: 1
2432
- }, 8, ["label"]),
2433
- k(Z, { label: T(a).menu.fontSize }, {
2434
- default: M(() => [k(Tt, {
2435
- "model-value": t.block.fontSize,
2436
- min: 8,
2437
- max: 48,
2438
- suffix: "px",
2439
- "onUpdate:modelValue": r[1] ||= (e) => l("fontSize", e)
2440
- }, null, 8, ["model-value"])]),
2441
- _: 1
2442
- }, 8, ["label"]),
2443
- k(Z, { label: T(a).menu.color }, {
2444
- default: M(() => [k(X, {
2445
- "model-value": t.block.color,
2446
- "onUpdate:modelValue": r[2] ||= (e) => l("color", e)
2447
- }, null, 8, ["model-value"])]),
2448
- _: 1
2449
- }, 8, ["label"]),
2450
- k(Z, { label: T(a).menu.linkColor }, {
2451
- default: M(() => [k(X, {
2452
- "model-value": t.block.linkColor || t.block.color,
2453
- "onUpdate:modelValue": r[3] ||= (e) => l("linkColor", e || void 0)
2454
- }, null, 8, ["model-value"])]),
2455
- _: 1
2456
- }, 8, ["label"]),
2457
- k(Z, { label: T(a).menu.textAlign }, {
2458
- default: M(() => [k(wt, {
2459
- options: c.value,
2460
- "model-value": t.block.textAlign,
2461
- "onUpdate:modelValue": r[4] ||= (e) => l("textAlign", e)
2462
- }, null, 8, ["options", "model-value"])]),
2463
- _: 1
2464
- }, 8, ["label"]),
2465
- k(Z, { label: T(a).menu.separator }, {
2466
- default: M(() => [_("input", {
2467
- type: "text",
2468
- class: p(T(K)),
2469
- value: t.block.separator,
2470
- onInput: r[5] ||= (e) => l("separator", e.target.value)
2471
- }, null, 42, $a)]),
2472
- _: 1
2473
- }, 8, ["label"]),
2474
- k(Z, { label: T(a).menu.separatorColor }, {
2475
- default: M(() => [k(X, {
2476
- "model-value": t.block.separatorColor,
2477
- "onUpdate:modelValue": r[6] ||= (e) => l("separatorColor", e)
2478
- }, null, 8, ["model-value"])]),
2479
- _: 1
2480
- }, 8, ["label"]),
2481
- k(Z, { label: T(a).menu.spacing }, {
2482
- default: M(() => [k(Tt, {
2483
- "model-value": t.block.spacing,
2484
- min: 0,
2485
- max: 50,
2486
- suffix: "px",
2487
- "onUpdate:modelValue": r[7] ||= (e) => l("spacing", e)
2488
- }, null, 8, ["model-value"])]),
2489
- _: 1
2490
- }, 8, ["label"])
2491
- ], 64));
2492
- }
2493
- });
2494
- //#endregion
2495
- //#region src/utils/rebalanceColumnChildren.ts
2496
- function to(e) {
2497
- return e === "1" ? 1 : e === "3" ? 3 : 2;
2498
- }
2499
- function no(e, t) {
2500
- let n = to(t);
2501
- if (e.length === n) return e;
2502
- if (e.length < n) {
2503
- let t = Array.from({ length: n - e.length }, () => []);
2504
- return [...e, ...t];
2505
- }
2506
- let r = e.slice(0, n), i = e.slice(n).flat(), a = [...r[n - 1], ...i];
2507
- return [...r.slice(0, n - 1), a];
2508
- }
2509
- //#endregion
2510
- //#region src/components/toolbar/SectionToolbar.vue?vue&type=script&setup=true&lang.ts
2511
- var ro = { class: "tpl:mb-3.5" }, io = ["value"], ao = ["value"], oo = { class: "tpl:mb-3.5" }, so = { class: "tpl:flex tpl:items-stretch" }, co = ["value"], lo = { class: "tpl:mb-3.5" }, uo = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, fo = ["checked"], po = {
2512
- key: 0,
2513
- class: "tpl:mt-3 tpl:ml-0.5 tpl:space-y-3 tpl:border-l tpl:border-[var(--tpl-border)] tpl:pl-3"
2514
- }, mo = { class: "tpl:flex tpl:items-stretch" }, ho = ["value"], go = /* @__PURE__ */ m({
2515
- __name: "SectionToolbar",
2516
- props: { block: {} },
2517
- emits: ["update"],
2518
- setup(t, { emit: n }) {
2519
- let r = t, i = n, { t: a } = W(), s = g(() => [
2520
- {
2521
- value: "1",
2522
- label: a.section.column1
2523
- },
2524
- {
2525
- value: "2",
2526
- label: a.section.column2
2527
- },
2528
- {
2529
- value: "3",
2530
- label: a.section.column3
2531
- },
2532
- {
2533
- value: "1-2",
2534
- label: a.section.ratio12
2535
- },
2536
- {
2537
- value: "2-1",
2538
- label: a.section.ratio21
2539
- }
2540
- ]);
2541
- function c(e) {
2542
- let t = e.target.value, n = no(r.block.children, t);
2543
- i("update", {
2544
- columns: t,
2545
- children: n
2546
- });
2547
- }
2548
- function l(e) {
2549
- let t = Number(e.target.value);
2550
- i("update", { borderRadius: t });
2551
- }
2552
- function u(e) {
2553
- i("update", { wrapper: e ? { padding: {
2554
- top: 20,
2555
- right: 20,
2556
- bottom: 20,
2557
- left: 20
2558
- } } : void 0 });
2559
- }
2560
- function f(e) {
2561
- i("update", { wrapper: {
2562
- ...r.block.wrapper,
2563
- ...e
2564
- } });
2565
- }
2566
- function m(e) {
2567
- f({ padding: e });
2568
- }
2569
- function h(e) {
2570
- f({ borderRadius: Number(e.target.value) });
2571
- }
2572
- return (n, r) => (e(), v(y, null, [
2573
- _("div", ro, [_("label", { class: p(T(q)) }, D(T(a).section.columns), 3), _("select", {
2574
- class: p(T(K)),
2575
- value: t.block.columns,
2576
- onChange: c
2577
- }, [(e(!0), v(y, null, o(s.value, (t) => (e(), v("option", {
2578
- key: t.value,
2579
- value: t.value
2580
- }, D(t.label), 9, ao))), 128))], 42, io)]),
2581
- _("div", oo, [_("label", { class: p(T(q)) }, D(T(a).section.borderRadius), 3), _("div", so, [_("input", {
2582
- type: "number",
2583
- class: p(T(Y)),
2584
- value: t.block.borderRadius ?? 0,
2585
- min: "0",
2586
- max: "50",
2587
- onInput: l
2588
- }, null, 42, co), _("span", { class: p(T(J)) }, "px", 2)])]),
2589
- _("div", lo, [_("label", uo, [_("input", {
2590
- type: "checkbox",
2591
- class: "tpl:accent-[var(--tpl-primary)]",
2592
- checked: !!t.block.wrapper,
2593
- onChange: r[0] ||= (e) => u(e.target.checked)
2594
- }, null, 40, fo), d(" " + D(T(a).section.wrapperEnable), 1)]), t.block.wrapper ? (e(), v("div", po, [
2595
- _("div", null, [_("label", { class: p(T(q)) }, D(T(a).blockSettings.color), 3), k(X, {
2596
- "model-value": t.block.wrapper.backgroundColor ?? "",
2597
- "onUpdate:modelValue": r[1] ||= (e) => f({ backgroundColor: e })
2598
- }, null, 8, ["model-value"])]),
2599
- k(oi, {
2600
- label: T(a).blockSettings.padding,
2601
- "model-value": t.block.wrapper.padding ?? {
2602
- top: 0,
2603
- right: 0,
2604
- bottom: 0,
2605
- left: 0
2606
- },
2607
- "onUpdate:modelValue": m
2608
- }, null, 8, ["label", "model-value"]),
2609
- _("div", null, [_("label", { class: p(T(q)) }, D(T(a).section.borderRadius), 3), _("div", mo, [_("input", {
2610
- type: "number",
2611
- class: p(T(Y)),
2612
- value: t.block.wrapper.borderRadius ?? 0,
2613
- min: "0",
2614
- max: "50",
2615
- onInput: h
2616
- }, null, 42, ho), _("span", { class: p(T(J)) }, "px", 2)])])
2617
- ])) : b("", !0)])
2618
- ], 64));
2619
- }
2620
- }), _o = { class: "tpl:mb-3.5" }, vo = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, yo = { class: "tpl:flex tpl:items-center tpl:gap-2" }, bo = ["value", "onChange"], xo = ["value"], So = ["title", "onClick"], Co = { class: "tpl:mb-3.5" }, wo = ["value"], To = { value: "solid" }, Eo = { value: "outlined" }, Do = { value: "rounded" }, Oo = { value: "square" }, ko = { value: "circle" }, 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__ */ m({
2621
- __name: "SocialToolbar",
2622
- props: { block: {} },
2623
- emits: ["update"],
2624
- setup(t, { emit: n }) {
2625
- let r = t, i = n, { t: a } = W();
2626
- function s(e, t) {
2627
- i("update", { [e]: t });
2628
- }
2629
- function c() {
2630
- let e = {
2631
- id: N(),
2632
- platform: "facebook",
2633
- url: ""
2634
- };
2635
- i("update", { icons: [...r.block.icons, e] });
2636
- }
2637
- function l(e, t, n) {
2638
- let a = r.block.icons.map((r) => r.id === e ? {
2639
- ...r,
2640
- [t]: n
2641
- } : r);
2642
- i("update", { icons: a });
2643
- }
2644
- function u(e) {
2645
- i("update", { icons: r.block.icons.filter((t) => t.id !== e) });
2646
- }
2647
- return (n, r) => (e(), v(y, null, [
2648
- _("div", _o, [_("label", { class: p(T(q)) }, D(T(a).social.icons), 3), _("div", vo, [(e(!0), v(y, null, o(t.block.icons, (t) => (e(), v("div", {
2649
- key: t.id,
2650
- 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"
2651
- }, [_("div", yo, [_("select", {
2652
- "data-testid": "social-platform-select",
2653
- class: p([T(K), "tpl:flex-1"]),
2654
- value: t.platform,
2655
- onChange: (e) => l(t.id, "platform", e.target.value)
2656
- }, [(e(!0), v(y, null, o(T(_e), (t) => (e(), v("option", {
2657
- key: t,
2658
- value: t
2659
- }, D(T(a).social.platforms[t]), 9, xo))), 128))], 42, bo), _("button", {
2660
- class: p(T(vt)),
2661
- title: T(a).social.removeIcon,
2662
- onClick: (e) => u(t.id)
2663
- }, [k(T(dt), {
2664
- size: 14,
2665
- "stroke-width": 2
2666
- })], 10, So)]), k($, {
2667
- "model-value": t.url,
2668
- type: "url",
2669
- placeholder: T(a).social.urlPlaceholder,
2670
- "onUpdate:modelValue": (e) => l(t.id, "url", e)
2671
- }, null, 8, [
2672
- "model-value",
2673
- "placeholder",
2674
- "onUpdate:modelValue"
2675
- ])]))), 128)), _("button", {
2676
- class: p(T(yt)),
2677
- onClick: c
2678
- }, [k(T(Q), {
2679
- size: 14,
2680
- "stroke-width": 2
2681
- }), d(" " + D(T(a).social.addIcon), 1)], 2)])]),
2682
- _("div", Co, [_("label", { class: p(T(q)) }, D(T(a).social.style), 3), _("select", {
2683
- class: p(T(K)),
2684
- value: t.block.iconStyle,
2685
- onChange: r[0] ||= (e) => s("iconStyle", e.target.value)
2686
- }, [
2687
- _("option", To, D(T(a).social.styleSolid), 1),
2688
- _("option", Eo, D(T(a).social.styleOutlined), 1),
2689
- _("option", Do, D(T(a).social.styleRounded), 1),
2690
- _("option", Oo, D(T(a).social.styleSquare), 1),
2691
- _("option", ko, D(T(a).social.styleCircle), 1)
2692
- ], 42, wo)]),
2693
- _("div", Ao, [_("label", { class: p(T(q)) }, D(T(a).social.size), 3), k(wt, {
2694
- options: [
2695
- {
2696
- value: "small",
2697
- label: T(a).social.sizeSmall
2698
- },
2699
- {
2700
- value: "medium",
2701
- label: T(a).social.sizeMedium
2702
- },
2703
- {
2704
- value: "large",
2705
- label: T(a).social.sizeLarge
2706
- }
2707
- ],
2708
- "model-value": t.block.iconSize,
2709
- "onUpdate:modelValue": r[1] ||= (e) => s("iconSize", e)
2710
- }, null, 8, ["options", "model-value"])]),
2711
- _("div", jo, [_("label", { class: p(T(q)) }, D(T(a).social.spacing), 3), _("div", Mo, [_("input", {
2712
- type: "number",
2713
- class: p(T(Y)),
2714
- value: t.block.spacing,
2715
- min: "0",
2716
- max: "50",
2717
- onInput: r[2] ||= (e) => s("spacing", Number(e.target.value))
2718
- }, null, 42, No), _("span", { class: p(T(J)) }, "px", 2)])]),
2719
- _("div", Po, [_("label", { class: p(T(q)) }, D(T(a).social.align), 3), k(wt, {
2720
- options: [
2721
- {
2722
- value: "left",
2723
- label: T(a).title.alignLeft,
2724
- icon: T(ct)
2725
- },
2726
- {
2727
- value: "center",
2728
- label: T(a).title.alignCenter,
2729
- icon: T(st)
2730
- },
2731
- {
2732
- value: "right",
2733
- label: T(a).title.alignRight,
2734
- icon: T(ot)
2735
- }
2736
- ],
2737
- "model-value": t.block.align,
2738
- "onUpdate:modelValue": r[3] ||= (e) => s("align", e)
2739
- }, null, 8, ["options", "model-value"])])
2740
- ], 64));
2741
- }
2742
- }), Io = { class: "tpl:mb-3.5" }, Lo = { class: "tpl:flex tpl:items-stretch" }, Ro = ["value"], zo = ["value"], Bo = /* @__PURE__ */ m({
2743
- __name: "SpacerToolbar",
2744
- props: { block: {} },
2745
- emits: ["update"],
2746
- setup(t, { emit: n }) {
2747
- let r = n, { t: i } = W();
2748
- return (n, a) => (e(), v("div", Io, [
2749
- _("label", { class: p(T(q)) }, D(T(i).spacer.height), 3),
2750
- _("div", Lo, [_("input", {
2751
- type: "number",
2752
- class: p(T(Y)),
2753
- value: t.block.height,
2754
- min: "10",
2755
- max: "100",
2756
- onInput: a[0] ||= (e) => r("update", { height: Number(e.target.value) })
2757
- }, null, 42, Ro), _("span", { class: p(T(J)) }, "px", 2)]),
2758
- _("input", {
2759
- type: "range",
2760
- class: "tpl:mt-2 tpl:w-full tpl:accent-[var(--tpl-primary)]",
2761
- value: t.block.height,
2762
- min: "10",
2763
- max: "100",
2764
- onInput: a[1] ||= (e) => r("update", { height: Number(e.target.value) })
2765
- }, null, 40, zo)
2766
- ]));
2767
- }
2768
- }), 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 = {
2769
- key: 0,
2770
- class: "tpl:mb-3.5"
2771
- }, 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__ */ m({
2772
- __name: "TableToolbar",
2773
- props: {
2774
- block: {},
2775
- fontFamilies: {}
2776
- },
2777
- emits: ["update"],
2778
- setup(t, { emit: n }) {
2779
- let r = t, i = n, { t: a } = W(), s = g(() => r.block.rows.length > 0 ? r.block.rows[0].cells.length : 0);
2780
- function c(e, t) {
2781
- i("update", { [e]: t });
2782
- }
2783
- function l() {
2784
- let e = r.block.rows.length > 0 ? r.block.rows[0].cells.length : 3, t = {
2785
- id: N(),
2786
- cells: Array.from({ length: e }, () => ({
2787
- id: N(),
2788
- content: ""
2789
- }))
2790
- };
2791
- i("update", { rows: [...r.block.rows, t] });
2792
- }
2793
- function u(e) {
2794
- i("update", { rows: r.block.rows.filter((t) => t.id !== e) });
2795
- }
2796
- function f() {
2797
- let e = r.block.rows.map((e) => ({
2798
- ...e,
2799
- cells: [...e.cells, {
2800
- id: N(),
2801
- content: ""
2802
- }]
2803
- }));
2804
- i("update", { rows: e });
2805
- }
2806
- function m(e) {
2807
- let t = r.block.rows.map((t) => ({
2808
- ...t,
2809
- cells: t.cells.filter((t, n) => n !== e)
2810
- }));
2811
- i("update", { rows: t });
2812
- }
2813
- return (n, r) => (e(), v(y, null, [
2814
- _("div", Vo, [_("label", { class: p(T(q)) }, D(T(a).table.dimensions), 3), _("div", Ho, [_("div", Uo, [_("span", Wo, D(T(a).table.rows), 1), _("div", Go, [
2815
- _("button", {
2816
- 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",
2817
- disabled: t.block.rows.length <= 1,
2818
- onClick: r[0] ||= (e) => u(t.block.rows[t.block.rows.length - 1].id)
2819
- }, [k(T(Ye), {
2820
- size: 12,
2821
- "stroke-width": 2
2822
- })], 8, Ko),
2823
- _("span", qo, D(t.block.rows.length), 1),
2824
- _("button", {
2825
- 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)]",
2826
- onClick: l
2827
- }, [k(T(Q), {
2828
- size: 12,
2829
- "stroke-width": 2
2830
- })])
2831
- ])]), _("div", Jo, [_("span", Yo, D(T(a).table.columns), 1), _("div", Xo, [
2832
- _("button", {
2833
- 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",
2834
- disabled: s.value <= 1,
2835
- onClick: r[1] ||= (e) => m(s.value - 1)
2836
- }, [k(T(Ye), {
2837
- size: 12,
2838
- "stroke-width": 2
2839
- })], 8, Zo),
2840
- _("span", Qo, D(s.value), 1),
2841
- _("button", {
2842
- 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)]",
2843
- onClick: f
2844
- }, [k(T(Q), {
2845
- size: 12,
2846
- "stroke-width": 2
2847
- })])
2848
- ])])])]),
2849
- _("div", $o, [_("label", es, [_("input", {
2850
- type: "checkbox",
2851
- checked: t.block.hasHeaderRow,
2852
- class: "tpl:accent-[var(--tpl-primary)]",
2853
- onChange: r[2] ||= (e) => c("hasHeaderRow", e.target.checked)
2854
- }, null, 40, ts), d(" " + D(T(a).table.hasHeaderRow), 1)])]),
2855
- t.block.hasHeaderRow ? (e(), v("div", ns, [_("label", { class: p(T(q)) }, D(T(a).table.headerBackgroundColor), 3), k(X, {
2856
- "model-value": t.block.headerBackgroundColor ?? "",
2857
- "seed-color": T(St),
2858
- placeholder: T(a).table.noHeaderBg,
2859
- "onUpdate:modelValue": r[3] ||= (e) => c("headerBackgroundColor", e || null)
2860
- }, null, 8, [
2861
- "model-value",
2862
- "seed-color",
2863
- "placeholder"
2864
- ])])) : b("", !0),
2865
- _("div", rs, [_("label", { class: p(T(q)) }, D(T(a).table.borderColor), 3), k(X, {
2866
- "model-value": t.block.borderColor,
2867
- "onUpdate:modelValue": r[4] ||= (e) => c("borderColor", e)
2868
- }, null, 8, ["model-value"])]),
2869
- _("div", is, [_("label", { class: p(T(q)) }, D(T(a).table.borderWidth), 3), _("div", as, [_("input", {
2870
- type: "number",
2871
- class: p(T(Y)),
2872
- value: t.block.borderWidth,
2873
- min: "0",
2874
- max: "10",
2875
- onInput: r[5] ||= (e) => c("borderWidth", Number(e.target.value))
2876
- }, null, 42, os), _("span", { class: p(T(J)) }, "px", 2)])]),
2877
- _("div", ss, [_("label", { class: p(T(q)) }, D(T(a).table.cellPadding), 3), _("div", cs, [_("input", {
2878
- type: "number",
2879
- class: p(T(Y)),
2880
- value: t.block.cellPadding,
2881
- min: "0",
2882
- max: "30",
2883
- onInput: r[6] ||= (e) => c("cellPadding", Number(e.target.value))
2884
- }, null, 42, ls), _("span", { class: p(T(J)) }, "px", 2)])]),
2885
- _("div", us, [_("label", { class: p(T(q)) }, D(T(a).table.fontFamily), 3), _("select", {
2886
- class: p(T(K)),
2887
- value: t.block.fontFamily || "",
2888
- onChange: r[7] ||= (e) => c("fontFamily", e.target.value || void 0)
2889
- }, [_("option", fs, D(T(a).title.inheritFont), 1), (e(!0), v(y, null, o(t.fontFamilies, (t) => (e(), v("option", {
2890
- key: t.value,
2891
- value: t.value
2892
- }, D(t.label), 9, ps))), 128))], 42, ds)]),
2893
- _("div", ms, [_("label", { class: p(T(q)) }, D(T(a).table.fontSize), 3), _("div", hs, [_("input", {
2894
- type: "number",
2895
- class: p(T(Y)),
2896
- value: t.block.fontSize,
2897
- min: "10",
2898
- max: "32",
2899
- onInput: r[8] ||= (e) => c("fontSize", Number(e.target.value))
2900
- }, null, 42, gs), _("span", { class: p(T(J)) }, "px", 2)])]),
2901
- _("div", _s, [_("label", { class: p(T(q)) }, D(T(a).table.color), 3), k(X, {
2902
- "model-value": t.block.color,
2903
- "onUpdate:modelValue": r[9] ||= (e) => c("color", e)
2904
- }, null, 8, ["model-value"])]),
2905
- _("div", vs, [_("label", { class: p(T(q)) }, D(T(a).table.textAlign), 3), k(wt, {
2906
- options: [
2907
- {
2908
- value: "left",
2909
- label: T(a).title.alignLeft,
2910
- icon: T(ct)
2911
- },
2912
- {
2913
- value: "center",
2914
- label: T(a).title.alignCenter,
2915
- icon: T(st)
2916
- },
2917
- {
2918
- value: "right",
2919
- label: T(a).title.alignRight,
2920
- icon: T(ot)
2921
- }
2922
- ],
2923
- "model-value": t.block.textAlign,
2924
- "onUpdate:modelValue": r[10] ||= (e) => c("textAlign", e)
2925
- }, null, 8, ["options", "model-value"])])
2926
- ], 64));
2927
- }
2928
- }), 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__ */ m({
2929
- __name: "TitleToolbar",
2930
- props: {
2931
- block: {},
2932
- fontFamilies: {}
2933
- },
2934
- emits: ["update"],
2935
- setup(t, { emit: n }) {
2936
- let r = n, { t: i } = W();
2937
- function a(e, t) {
2938
- r("update", { [e]: t });
2939
- }
2940
- return (n, r) => (e(), v(y, null, [
2941
- _("div", bs, [_("label", { class: p(T(q)) }, D(T(i).title.level), 3), _("select", {
2942
- class: p(T(K)),
2943
- value: t.block.level,
2944
- onChange: r[0] ||= (e) => a("level", Number(e.target.value))
2945
- }, [
2946
- _("option", Ss, D(T(i).title.heading1), 1),
2947
- _("option", Cs, D(T(i).title.heading2), 1),
2948
- _("option", ws, D(T(i).title.heading3), 1),
2949
- _("option", Ts, D(T(i).title.heading4), 1)
2950
- ], 42, xs)]),
2951
- _("div", Es, [_("label", { class: p(T(q)) }, D(T(i).title.fontFamily), 3), _("select", {
2952
- class: p(T(K)),
2953
- value: t.block.fontFamily || "",
2954
- onChange: r[1] ||= (e) => a("fontFamily", e.target.value || void 0)
2955
- }, [_("option", Os, D(T(i).title.inheritFont), 1), (e(!0), v(y, null, o(t.fontFamilies, (t) => (e(), v("option", {
2956
- key: t.value,
2957
- value: t.value
2958
- }, D(t.label), 9, ks))), 128))], 42, Ds)]),
2959
- _("div", As, [_("label", { class: p(T(q)) }, D(T(i).title.color), 3), k(X, {
2960
- "model-value": t.block.color,
2961
- "onUpdate:modelValue": r[2] ||= (e) => a("color", e)
2962
- }, null, 8, ["model-value"])]),
2963
- _("div", js, [_("label", { class: p(T(q)) }, D(T(i).title.align), 3), k(wt, {
2964
- options: [
2965
- {
2966
- value: "left",
2967
- label: T(i).title.alignLeft,
2968
- icon: T(ct)
2969
- },
2970
- {
2971
- value: "center",
2972
- label: T(i).title.alignCenter,
2973
- icon: T(st)
2974
- },
2975
- {
2976
- value: "right",
2977
- label: T(i).title.alignRight,
2978
- icon: T(ot)
2979
- }
2980
- ],
2981
- "model-value": t.block.textAlign,
2982
- "onUpdate:modelValue": r[3] ||= (e) => a("textAlign", e)
2983
- }, null, 8, ["options", "model-value"])])
2984
- ], 64));
2985
- }
2986
- }), Ns = { class: "tpl:mb-3.5" }, Ps = {
2987
- key: 0,
2988
- class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
2989
- }, Fs = ["checked"], Is = {
2990
- key: 0,
2991
- class: "tpl:mb-3.5"
2992
- }, Ls = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, Rs = [
2993
- "value",
2994
- "placeholder",
2995
- "title"
2996
- ], zs = { class: "tpl:mb-3.5" }, Bs = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, Vs = { class: "tpl:mb-3.5" }, Hs = { class: "tpl:mb-3.5" }, Us = ["value"], Ws = { value: "full" }, Gs = { class: "tpl:mb-3.5" }, Ks = /* @__PURE__ */ m({
2997
- __name: "VideoToolbar",
2998
- props: { block: {} },
2999
- emits: ["update"],
3000
- setup(t, { emit: n }) {
3001
- let r = t, i = n, { t: a } = W(), o = A(Ee, null), s = A(je, L.liquid), c = ht(), l = g(() => !!o), f = g(() => I(r.block.url, s)), m = u(!1), { start: h } = we(() => {
3002
- m.value = !1;
3003
- }, 1e3, { immediate: !1 });
3004
- function x(e, t) {
3005
- i("update", { [e]: t });
3006
- }
3007
- async function S() {
3008
- let e = await o?.({ accept: ["images"] });
3009
- c.alive && e && (x("thumbnailUrl", e.url), m.value = !0, h());
3010
- }
3011
- return (n, r) => (e(), v(y, null, [
3012
- _("div", Ns, [
3013
- _("label", { class: p(T(q)) }, D(T(a).video.videoUrl), 3),
3014
- k($, {
3015
- "model-value": t.block.url,
3016
- type: "url",
3017
- placeholder: T(a).video.videoUrlPlaceholder,
3018
- "onUpdate:modelValue": r[0] ||= (e) => x("url", e)
3019
- }, null, 8, ["model-value", "placeholder"]),
3020
- t.block.url ? (e(), v("label", Ps, [_("input", {
3021
- type: "checkbox",
3022
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
3023
- checked: t.block.openInNewTab ?? !1,
3024
- onChange: r[1] ||= (e) => x("openInNewTab", e.target.checked)
3025
- }, null, 40, Fs), d(" " + D(T(a).video.openInNewTab), 1)])) : b("", !0)
3026
- ]),
3027
- f.value ? (e(), v("div", Is, [_("label", { class: p(T(q)) }, [d(D(T(a).video.placeholderUrl) + " ", 1), _("span", Ls, D(T(a).video.optional), 1)], 2), _("input", {
3028
- type: "url",
3029
- class: p(T(K)),
3030
- value: t.block.placeholderUrl || "",
3031
- placeholder: T(a).video.placeholderUrlPlaceholder,
3032
- title: T(a).video.placeholderUrlTooltip,
3033
- onInput: r[2] ||= (e) => x("placeholderUrl", e.target.value)
3034
- }, null, 42, Rs)])) : b("", !0),
3035
- _("div", zs, [
3036
- _("label", { class: p(T(q)) }, [d(D(T(a).video.customThumbnail) + " ", 1), _("span", Bs, D(T(a).video.optional), 1)], 2),
3037
- k($, {
3038
- "model-value": t.block.thumbnailUrl,
3039
- type: "url",
3040
- placeholder: T(a).video.thumbnailPlaceholder,
3041
- pulse: m.value,
3042
- "onUpdate:modelValue": r[3] ||= (e) => x("thumbnailUrl", e)
3043
- }, null, 8, [
3044
- "model-value",
3045
- "placeholder",
3046
- "pulse"
3047
- ]),
3048
- l.value ? (e(), v("button", {
3049
- key: 0,
3050
- 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",
3051
- style: {
3052
- "border-color": "var(--tpl-border)",
3053
- color: "var(--tpl-primary)",
3054
- "background-color": "var(--tpl-bg)"
3055
- },
3056
- onClick: S
3057
- }, [k(T(pe), {
3058
- size: 14,
3059
- "stroke-width": 1.5
3060
- }), d(" " + D(T(a).image.browseMedia), 1)])) : b("", !0)
3061
- ]),
3062
- _("div", Vs, [_("label", { class: p(T(q)) }, D(T(a).video.altText), 3), k($, {
3063
- "model-value": t.block.alt,
3064
- type: "text",
3065
- placeholder: T(a).video.altTextPlaceholder,
3066
- "onUpdate:modelValue": r[4] ||= (e) => x("alt", e)
3067
- }, null, 8, ["model-value", "placeholder"])]),
3068
- _("div", Hs, [_("label", { class: p(T(q)) }, D(T(a).video.width), 3), _("select", {
3069
- class: p(T(K)),
3070
- value: t.block.width,
3071
- onChange: r[5] ||= (e) => x("width", e.target.value === "full" ? "full" : Number(e.target.value))
3072
- }, [
3073
- _("option", Ws, D(T(a).video.fullWidth), 1),
3074
- r[7] ||= _("option", { value: "300" }, "300px", -1),
3075
- r[8] ||= _("option", { value: "400" }, "400px", -1),
3076
- r[9] ||= _("option", { value: "500" }, "500px", -1)
3077
- ], 42, Us)]),
3078
- _("div", Gs, [_("label", { class: p(T(q)) }, D(T(a).title.align), 3), k(wt, {
3079
- options: [
3080
- {
3081
- value: "left",
3082
- label: T(a).title.alignLeft
3083
- },
3084
- {
3085
- value: "center",
3086
- label: T(a).title.alignCenter
3087
- },
3088
- {
3089
- value: "right",
3090
- label: T(a).title.alignRight
3091
- }
3092
- ],
3093
- "model-value": t.block.align,
3094
- "onUpdate:modelValue": r[6] ||= (e) => x("align", e)
3095
- }, null, 8, ["options", "model-value"])])
3096
- ], 64));
3097
- }
3098
- }), qs = ["aria-label"], Js = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3.5" }, Ys = { class: "tpl:flex tpl:items-center tpl:gap-2 tpl:text-[var(--tpl-primary)]" }, Xs = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Zs = { class: "tpl:flex tpl:gap-1" }, Qs = ["title"], $s = ["title"], ec = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, tc = /*#__PURE__*/ ft(/* @__PURE__ */ m({
3099
- __name: "Toolbar",
3100
- props: { block: {} },
3101
- emits: [
3102
- "update",
3103
- "delete",
3104
- "duplicate"
3105
- ],
3106
- setup(t, { emit: n }) {
3107
- let i = j(() => import("./CountdownToolbar-Dtqgwy0g.js")), a = t, o = n, { t: s } = W(), c = Oe(Fe, "Toolbar"), l = A(Ne, []), u = g(() => a.block.type), d = g(() => P(a.block)), f = g(() => {
3108
- if (d.value) return l.find((e) => e.type === a.block.customType);
3109
- }), p = g(() => d.value ? f.value?.name ?? a.block.customType : H(u.value, s)), m = c.fonts;
3110
- function h(e) {
3111
- o("update", e);
3112
- }
3113
- return (n, a) => (e(), v("aside", {
3114
- "aria-label": T(s).landmarks.blockToolbar,
3115
- class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]"
3116
- }, [_("div", Js, [_("div", Ys, [T(Qe)[u.value] ? (e(), C(r(T(Qe)[u.value]), {
3117
- key: 0,
3118
- size: 16,
3119
- "stroke-width": 1.5
3120
- })) : d.value ? (e(), C(T(re), {
3121
- key: 1,
3122
- size: 16,
3123
- "stroke-width": 1.5
3124
- })) : b("", !0), _("h3", Xs, D(p.value), 1)]), _("div", Zs, [_("button", {
3125
- 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)]",
3126
- title: T(s).toolbar.duplicate,
3127
- onClick: a[0] ||= (e) => o("duplicate")
3128
- }, [k(T(U), {
3129
- size: 14,
3130
- "stroke-width": 2
3131
- })], 8, Qs), _("button", {
3132
- 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)]",
3133
- title: T(s).toolbar.delete,
3134
- onClick: a[1] ||= (e) => o("delete")
3135
- }, [k(T(lt), {
3136
- size: 14,
3137
- "stroke-width": 2
3138
- })], 8, $s)])]), _("div", ec, [d.value ? (e(), C(fa, {
3139
- key: 0,
3140
- block: t.block,
3141
- onUpdateFieldValues: a[2] ||= (e) => o("update", { fieldValues: e }),
3142
- onUpdateDataSourceFetched: a[3] ||= (e) => o("update", { dataSourceFetched: e })
3143
- }, null, 8, ["block"])) : u.value === "section" ? (e(), C(go, {
3144
- key: 1,
3145
- block: t.block,
3146
- onUpdate: h
3147
- }, null, 8, ["block"])) : u.value === "title" ? (e(), C(Ms, {
3148
- key: 2,
3149
- block: t.block,
3150
- "font-families": T(m),
3151
- onUpdate: h
3152
- }, null, 8, ["block", "font-families"])) : u.value === "paragraph" ? (e(), v(y, { key: 3 }, [], 64)) : u.value === "image" ? (e(), C(Ha, {
3153
- key: 4,
3154
- block: t.block,
3155
- onUpdate: h
3156
- }, null, 8, ["block"])) : u.value === "video" ? (e(), C(Ks, {
3157
- key: 5,
3158
- block: t.block,
3159
- onUpdate: h
3160
- }, null, 8, ["block"])) : u.value === "button" ? (e(), C(Ir, {
3161
- key: 6,
3162
- block: t.block,
3163
- "font-families": T(m),
3164
- onUpdate: h
3165
- }, null, 8, ["block", "font-families"])) : u.value === "divider" ? (e(), C(va, {
3166
- key: 7,
3167
- block: t.block,
3168
- onUpdate: h
3169
- }, null, 8, ["block"])) : u.value === "social" ? (e(), C(Fo, {
3170
- key: 8,
3171
- block: t.block,
3172
- onUpdate: h
3173
- }, null, 8, ["block"])) : u.value === "menu" ? (e(), C(eo, {
3174
- key: 9,
3175
- block: t.block,
3176
- "font-families": T(m),
3177
- onUpdate: h
3178
- }, null, 8, ["block", "font-families"])) : u.value === "table" ? (e(), C(ys, {
3179
- key: 10,
3180
- block: t.block,
3181
- "font-families": T(m),
3182
- onUpdate: h
3183
- }, null, 8, ["block", "font-families"])) : u.value === "spacer" ? (e(), C(Bo, {
3184
- key: 11,
3185
- block: t.block,
3186
- onUpdate: h
3187
- }, null, 8, ["block"])) : u.value === "html" ? (e(), C(Sa, {
3188
- key: 12,
3189
- block: t.block,
3190
- onUpdate: h
3191
- }, null, 8, ["block"])) : u.value === "countdown" ? (e(), C(T(i), {
3192
- key: 13,
3193
- block: t.block,
3194
- "font-families": T(m),
3195
- onUpdate: h
3196
- }, null, 8, ["block", "font-families"])) : b("", !0), k(Di, {
3197
- block: t.block,
3198
- "is-first-section": u.value === "paragraph",
3199
- onUpdate: h
3200
- }, null, 8, ["block", "is-first-section"])])], 8, qs));
3201
- }
3202
- }), [["__scopeId", "data-v-2ac88283"]]), nc = ["aria-label"], rc = {
3203
- role: "tablist",
3204
- class: "tpl:relative tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-active)] tpl:p-1.5"
3205
- }, ic = [
3206
- "aria-selected",
3207
- "aria-label",
3208
- "title"
3209
- ], ac = { key: 0 }, oc = [
3210
- "aria-selected",
3211
- "aria-label",
3212
- "title"
3213
- ], sc = { key: 0 }, cc = [
3214
- "aria-selected",
3215
- "aria-label",
3216
- "title"
3217
- ], lc = { key: 0 }, uc = {
3218
- key: 1,
3219
- class: "tpl:ml-1 tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-1.5 tpl:text-[10px]"
3220
- }, dc = {
3221
- key: 0,
3222
- id: "tpl-tabpanel-content",
3223
- role: "tabpanel",
3224
- "aria-labelledby": "tpl-tab-content",
3225
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
3226
- }, fc = {
3227
- key: 1,
3228
- 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)]"
3229
- }, pc = { class: "tpl:mb-4 tpl:text-[var(--tpl-text-dim)]" }, mc = { class: "tpl:m-0 tpl:mb-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, hc = { class: "tpl:m-0 tpl:text-sm tpl:leading-normal" }, gc = {
3230
- key: 1,
3231
- id: "tpl-tabpanel-settings",
3232
- role: "tabpanel",
3233
- "aria-labelledby": "tpl-tab-settings",
3234
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
3235
- }, _c = {
3236
- key: 2,
3237
- id: "tpl-tabpanel-issues",
3238
- role: "tabpanel",
3239
- "aria-labelledby": "tpl-tab-issues",
3240
- class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
3241
- }, vc = /* @__PURE__ */ m({
3242
- __name: "RightSidebar",
3243
- props: {
3244
- selectedBlock: {},
3245
- settings: {},
3246
- shiftedLeft: { type: Boolean }
3247
- },
3248
- emits: [
3249
- "update-block",
3250
- "delete-block",
3251
- "duplicate-block",
3252
- "update-settings"
3253
- ],
3254
- setup(t, { emit: n }) {
3255
- let r = j(() => import("./IssuesPanel-u7ee3Wrl.js")), i = t, o = n, { t: s } = W(), c = u("content"), l = A(ke, null), d = g(() => l !== null), f = g(() => l?.issues.value.length ?? 0);
3256
- function m(e) {
3257
- return c.value === e ? "tpl:flex-1 tpl:text-[var(--tpl-primary)]" : "tpl:shrink-0 tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]";
3258
- }
3259
- function h(e) {
3260
- return c.value === e ? {
3261
- backgroundColor: "var(--tpl-bg)",
3262
- boxShadow: "var(--tpl-shadow-md)"
3263
- } : { backgroundColor: "transparent" };
3264
- }
3265
- return a(() => i.selectedBlock, (e) => {
3266
- e && (c.value = "content");
3267
- }), (n, i) => (e(), v("aside", {
3268
- "aria-label": T(s).landmarks.rightSidebar,
3269
- class: p(["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)]", t.shiftedLeft ? "tpl:right-[360px]" : "tpl:right-0"])
3270
- }, [
3271
- _("div", rc, [
3272
- _("button", {
3273
- id: "tpl-tab-content",
3274
- role: "tab",
3275
- "aria-selected": c.value === "content",
3276
- "aria-controls": "tpl-tabpanel-content",
3277
- "aria-label": T(s).sidebar.content,
3278
- title: T(s).sidebar.content,
3279
- class: p(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", m("content")]),
3280
- style: S(h("content")),
3281
- onClick: i[0] ||= (e) => c.value = "content"
3282
- }, [k(T(Pt), {
3283
- size: 14,
3284
- "stroke-width": 2
3285
- }), c.value === "content" ? (e(), v("span", ac, D(T(s).sidebar.content), 1)) : b("", !0)], 14, ic),
3286
- _("button", {
3287
- id: "tpl-tab-settings",
3288
- role: "tab",
3289
- "aria-selected": c.value === "settings",
3290
- "aria-controls": "tpl-tabpanel-settings",
3291
- "aria-label": T(s).sidebar.settings,
3292
- title: T(s).sidebar.settings,
3293
- class: p(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", m("settings")]),
3294
- style: S(h("settings")),
3295
- onClick: i[1] ||= (e) => c.value = "settings"
3296
- }, [k(T(It), {
3297
- size: 14,
3298
- "stroke-width": 1.5
3299
- }), c.value === "settings" ? (e(), v("span", sc, D(T(s).sidebar.settings), 1)) : b("", !0)], 14, oc),
3300
- d.value ? (e(), v("button", {
3301
- key: 0,
3302
- id: "tpl-tab-issues",
3303
- role: "tab",
3304
- "aria-selected": c.value === "issues",
3305
- "aria-controls": "tpl-tabpanel-issues",
3306
- "aria-label": T(s).issues.panelTabLabel,
3307
- title: T(s).issues.panelTabLabel,
3308
- class: p(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", m("issues")]),
3309
- style: S(h("issues")),
3310
- onClick: i[2] ||= (e) => c.value = "issues"
3311
- }, [
3312
- k(T(rt), {
3313
- size: 14,
3314
- "stroke-width": 1.5
3315
- }),
3316
- c.value === "issues" ? (e(), v("span", lc, D(T(s).issues.panelTabLabel), 1)) : b("", !0),
3317
- f.value > 0 ? (e(), v("span", uc, D(f.value), 1)) : b("", !0)
3318
- ], 14, cc)) : b("", !0)
3319
- ]),
3320
- c.value === "content" ? (e(), v("div", dc, [t.selectedBlock ? (e(), C(tc, {
3321
- key: 0,
3322
- block: t.selectedBlock,
3323
- onUpdate: i[3] ||= (e) => o("update-block", e),
3324
- onDelete: i[4] ||= (e) => o("delete-block"),
3325
- onDuplicate: i[5] ||= (e) => o("duplicate-block")
3326
- }, null, 8, ["block"])) : (e(), v("div", fc, [
3327
- _("div", pc, [k(T(kt), {
3328
- size: 40,
3329
- "stroke-width": 1.5
3330
- })]),
3331
- _("h3", mc, D(T(s).sidebar.noSelection), 1),
3332
- _("p", hc, D(T(s).sidebar.noSelectionHint), 1)
3333
- ]))])) : b("", !0),
3334
- c.value === "settings" ? (e(), v("div", gc, [k(ir, {
3335
- settings: t.settings,
3336
- onUpdate: i[6] ||= (e) => o("update-settings", e)
3337
- }, null, 8, ["settings"])])) : b("", !0),
3338
- c.value === "issues" && d.value ? (e(), v("div", _c, [k(T(r))])) : b("", !0)
3339
- ], 10, nc));
3340
- }
3341
- }), yc = {
3342
- class: "tpl-small-screen-notice tpl:absolute tpl:inset-0 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-6 tpl:py-10 tpl:text-center tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)]",
3343
- style: { "z-index": "10001" },
3344
- role: "status",
3345
- "data-testid": "small-screen-notice"
3346
- }, bc = { class: "tpl:text-[var(--tpl-text-dim)]" }, xc = { class: "tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Sc = { class: "tpl:m-0 tpl:max-w-sm tpl:text-sm tpl:leading-normal" }, Cc = /* @__PURE__ */ m({
3347
- __name: "SmallScreenNotice",
3348
- setup(t) {
3349
- let { t: n } = W();
3350
- return (t, r) => (e(), v("div", yc, [
3351
- _("div", bc, [k(T(Mt), {
3352
- size: 48,
3353
- "stroke-width": 1.5
3354
- })]),
3355
- _("h2", xc, D(T(n).smallScreen.title), 1),
3356
- _("p", Sc, D(T(n).smallScreen.message), 1)
3357
- ]));
3358
- }
3359
- }), wc = ["aria-label"], Tc = [
3360
- "aria-checked",
3361
- "aria-label",
3362
- "title",
3363
- "onClick"
3364
- ], Ec = /* @__PURE__ */ m({
3365
- __name: "ViewportToggle",
3366
- props: { viewport: {} },
3367
- emits: ["change"],
3368
- setup(t, { emit: n }) {
3369
- let r = t, i = n, { t: a } = W(), s = g(() => [{
3370
- value: "desktop",
3371
- label: a.viewport.desktop
3372
- }, {
3373
- value: "mobile",
3374
- label: a.viewport.mobile
3375
- }]), c = g(() => `translateX(${s.value.findIndex((e) => e.value === r.viewport) * 100}%)`);
3376
- return (n, r) => (e(), v("div", {
3377
- role: "radiogroup",
3378
- "aria-label": T(a).viewport.label,
3379
- class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
3380
- style: S({
3381
- gridTemplateColumns: `repeat(${s.value.length}, 1fr)`,
3382
- backgroundColor: "var(--tpl-bg-hover)"
3383
- })
3384
- }, [_("div", {
3385
- class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
3386
- style: S({
3387
- left: "4px",
3388
- width: `calc((100% - 8px) / ${s.value.length})`,
3389
- transform: c.value,
3390
- backgroundColor: "var(--tpl-bg)",
3391
- boxShadow: "var(--tpl-shadow)",
3392
- transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
3393
- })
3394
- }, null, 4), (e(!0), v(y, null, o(s.value, (n) => (e(), v("button", {
3395
- key: n.value,
3396
- role: "radio",
3397
- "aria-checked": t.viewport === n.value,
3398
- "aria-label": n.label,
3399
- 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",
3400
- style: S({
3401
- color: t.viewport === n.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3402
- transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
3403
- }),
3404
- title: n.label,
3405
- onClick: (e) => i("change", n.value)
3406
- }, [n.value === "desktop" ? (e(), C(T(Mt), {
3407
- key: 0,
3408
- size: 18,
3409
- "stroke-width": 1.5
3410
- })) : (e(), C(T(Lt), {
3411
- key: 1,
3412
- size: 18,
3413
- "stroke-width": 1.5
3414
- })), _("span", null, D(n.label), 1)], 12, Tc))), 128))], 12, wc));
3415
- }
3416
- }), Dc = [
3417
- "aria-label",
3418
- "title",
3419
- "aria-pressed"
3420
- ], Oc = /*#__PURE__*/ ft(/* @__PURE__ */ m({
3421
- __name: "PreviewToggle",
3422
- props: { previewMode: { type: Boolean } },
3423
- emits: ["change"],
3424
- setup(t, { emit: n }) {
3425
- let r = n, { t: i } = W();
3426
- return (n, a) => (e(), v("button", {
3427
- 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",
3428
- style: S({
3429
- color: t.previewMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3430
- backgroundColor: t.previewMode ? "var(--tpl-primary-light)" : "transparent"
3431
- }),
3432
- "aria-label": t.previewMode ? T(i).previewMode.disable : T(i).previewMode.enable,
3433
- title: t.previewMode ? T(i).previewMode.disable : T(i).previewMode.enable,
3434
- "aria-pressed": t.previewMode,
3435
- onClick: a[0] ||= (e) => r("change", !t.previewMode)
3436
- }, [k(O, {
3437
- "enter-active-class": "tpl-icon-enter-active",
3438
- "leave-active-class": "tpl-icon-leave-active",
3439
- "enter-from-class": "tpl-icon-enter-from",
3440
- "leave-to-class": "tpl-icon-leave-to",
3441
- mode: "out-in"
3442
- }, {
3443
- default: M(() => [t.previewMode ? (e(), C(T($e), {
3444
- key: "eye",
3445
- size: 18,
3446
- "stroke-width": 1.5
3447
- })) : (e(), C(T(ne), {
3448
- key: "eye-off",
3449
- size: 18,
3450
- "stroke-width": 1.5
3451
- }))]),
3452
- _: 1
3453
- })], 12, Dc));
3454
- }
3455
- }), [["__scopeId", "data-v-af87d02a"]]), kc = [
3456
- "aria-label",
3457
- "title",
3458
- "aria-pressed"
3459
- ], Ac = /*#__PURE__*/ ft(/* @__PURE__ */ m({
3460
- __name: "DarkModeToggle",
3461
- props: { darkMode: { type: Boolean } },
3462
- emits: ["change"],
3463
- setup(t, { emit: n }) {
3464
- let r = n, { t: i } = W();
3465
- return (n, a) => (e(), v("button", {
3466
- 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",
3467
- style: S({
3468
- color: t.darkMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
3469
- backgroundColor: t.darkMode ? "var(--tpl-primary-light)" : "transparent"
3470
- }),
3471
- "aria-label": t.darkMode ? T(i).darkMode.disable : T(i).darkMode.enable,
3472
- title: t.darkMode ? T(i).darkMode.disable : T(i).darkMode.enable,
3473
- "aria-pressed": t.darkMode,
3474
- onClick: a[0] ||= (e) => r("change", !t.darkMode)
3475
- }, [k(O, {
3476
- "enter-active-class": "tpl-icon-enter-active",
3477
- "leave-active-class": "tpl-icon-leave-active",
3478
- "enter-from-class": "tpl-icon-enter-from",
3479
- "leave-to-class": "tpl-icon-leave-to",
3480
- mode: "out-in"
3481
- }, {
3482
- default: M(() => [t.darkMode ? (e(), C(T(Nt), {
3483
- key: "moon",
3484
- size: 18,
3485
- "stroke-width": 1.5
3486
- })) : (e(), C(T(Bt), {
3487
- key: "sun",
3488
- size: 18,
3489
- "stroke-width": 1.5
3490
- }))]),
3491
- _: 1
3492
- })], 12, kc));
3493
- }
3494
- }), [["__scopeId", "data-v-f8694f76"]]), jc = {
3495
- class: "tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1",
3496
- style: {
3497
- "background-color": "color-mix(\n in srgb,\n var(--tpl-canvas-bg) 85%,\n transparent\n )",
3498
- "backdrop-filter": "blur(8px)",
3499
- "-webkit-backdrop-filter": "blur(8px)"
3500
- }
3501
- }, Mc = {
3502
- href: "https://github.com/templatical/sdk",
3503
- target: "_blank",
3504
- rel: "noopener noreferrer",
3505
- class: "tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]",
3506
- style: { "text-decoration": "none" }
3507
- }, Nc = /* @__PURE__ */ m({
3508
- __name: "EditorFooter",
3509
- props: { positionClass: {} },
3510
- setup(t) {
3511
- let { t: n } = W();
3512
- return (r, i) => (e(), v("footer", { class: p(["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)]", t.positionClass]) }, [_("div", jc, [
3513
- _("span", null, D(T(n).footer.poweredBy), 1),
3514
- i[0] ||= _("a", {
3515
- href: "https://templatical.com",
3516
- target: "_blank",
3517
- rel: "noopener noreferrer",
3518
- 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)]",
3519
- style: { "text-decoration": "none" }
3520
- }, [_("img", {
3521
- width: "14",
3522
- height: "14",
3523
- src: "https://templatical.com/logo.svg",
3524
- alt: ""
3525
- }), d(" Templatical ")], -1),
3526
- i[1] ||= _("span", { class: "tpl:text-[var(--tpl-border)]" }, "·", -1),
3527
- _("a", Mc, D(T(n).footer.openSource), 1)
3528
- ])], 2));
3529
- }
3530
- }), Pc = ["aria-labelledby", "data-tpl-theme"], Fc = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:gap-3 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, Ic = ["id"], Lc = ["aria-label"], Rc = { class: "tpl:relative tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, zc = [
3531
- "id",
3532
- "placeholder",
3533
- "aria-label",
3534
- "aria-activedescendant"
3535
- ], Bc = {
3536
- key: 0,
3537
- class: "tpl:flex tpl:gap-1.5 tpl:overflow-x-auto tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2",
3538
- "data-testid": "merge-tag-picker-group-pills"
3539
- }, Vc = ["data-group-name", "onClick"], Hc = ["aria-label"], Uc = {
3540
- key: 0,
3541
- class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
3542
- "data-testid": "merge-tag-picker-empty"
3543
- }, Wc = {
3544
- key: 1,
3545
- class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
3546
- "data-testid": "merge-tag-picker-empty"
3547
- }, Gc = [
3548
- "aria-expanded",
3549
- "data-group-name",
3550
- "data-group-collapsed",
3551
- "onClick"
3552
- ], Kc = { class: "tpl:ml-1 tpl:font-normal" }, qc = [
3553
- "id",
3554
- "aria-selected",
3555
- "data-selected",
3556
- "data-merge-tag-index",
3557
- "data-merge-tag-value",
3558
- "title",
3559
- "onMousemove",
3560
- "onClick"
3561
- ], Jc = { class: "tpl:text-sm tpl:font-medium" }, Yc = { class: "tpl:line-clamp-2 tpl:font-mono tpl:text-xs tpl:text-ellipsis tpl:break-all tpl:text-[var(--tpl-text-dim)]" }, Xc = {
3562
- key: 0,
3563
- class: "tpl:line-clamp-2 tpl:text-xs tpl:text-ellipsis tpl:text-[var(--tpl-text-dim)]"
3564
- }, Zc = "tpl-merge-tag-picker-list", Qc = /* @__PURE__ */ m({
3565
- __name: "MergeTagPickerModal",
3566
- setup(r) {
3567
- let i = Oe(Ue, "MergeTagPickerModal"), { t: s, format: c } = W(), l = A(Ae, null), d = A(De, null), m = u(""), x = Te(m, 200), w = u(null), O = g(() => x.value.trim().length > 0), j = u(0), N = g(() => i.tags.value.some((e) => !!e.group)), P = u(/* @__PURE__ */ new Set());
3568
- function F(e) {
3569
- return P.value.has(e);
3570
- }
3571
- function I(e) {
3572
- let t = new Set(P.value);
3573
- t.has(e) ? t.delete(e) : t.add(e), P.value = t, j.value = 0;
3574
- }
3575
- let L = g(() => {
3576
- let e = x.value.trim().toLowerCase();
3577
- return e ? i.tags.value.filter((t) => [
3578
- t.label,
3579
- t.value,
3580
- t.description ?? ""
3581
- ].join(" ").toLowerCase().includes(e)) : i.tags.value;
3582
- }), R = g(() => {
3583
- if (!N.value) return [];
3584
- let e = s.mergeTag.picker.otherGroup, t = /* @__PURE__ */ new Set(), n = [];
3585
- for (let r of i.tags.value) {
3586
- let i = r.group ?? e;
3587
- t.has(i) || (t.add(i), n.push(i));
3588
- }
3589
- return n;
3590
- }), z = g(() => {
3591
- let e = L.value;
3592
- if (!N.value || O.value) return e.map((e, t) => ({
3593
- kind: "tag",
3594
- tag: e,
3595
- index: t
3596
- }));
3597
- let t = s.mergeTag.picker.otherGroup, n = /* @__PURE__ */ new Map(), r = [];
3598
- for (let i of e) {
3599
- let e = i.group ?? t;
3600
- n.has(e) || (n.set(e, []), r.push(e)), n.get(e).push(i);
3601
- }
3602
- let i = [], a = 0;
3603
- for (let e of r) {
3604
- let t = n.get(e);
3605
- if (i.push({
3606
- kind: "header",
3607
- group: e,
3608
- count: t.length
3609
- }), !P.value.has(e)) for (let e of t) i.push({
3610
- kind: "tag",
3611
- tag: e,
3612
- index: a
3613
- }), a++;
3614
- }
3615
- return i;
3616
- }), B = g(() => z.value.flatMap((e) => e.kind === "tag" ? [e.tag] : []));
3617
- a(() => i.isOpen.value, (e) => {
3618
- e && (m.value = "", j.value = 0, P.value = /* @__PURE__ */ new Set(), n(() => {
3619
- w.value?.focus();
3620
- }));
3621
- }), a(B, (e) => {
3622
- j.value >= e.length && (j.value = Math.max(0, e.length - 1));
3623
- });
3624
- function V(e) {
3625
- i.resolve(e);
3626
- }
3627
- function ee() {
3628
- i.resolve(null);
3629
- }
3630
- function te(e) {
3631
- if (B.value.length === 0) return;
3632
- let t = j.value + e;
3633
- j.value = Math.max(0, Math.min(B.value.length - 1, t)), re();
3634
- }
3635
- let H = u(null), ne = u({});
3636
- function U(e, t) {
3637
- ne.value[e] = t ?? null;
3638
- }
3639
- function re() {
3640
- n(() => {
3641
- let e = H.value;
3642
- e && e.querySelector(`[data-merge-tag-index="${j.value}"]`)?.scrollIntoView({ block: "nearest" });
3643
- });
3644
- }
3645
- function ie(e) {
3646
- if (P.value.has(e)) {
3647
- let t = new Set(P.value);
3648
- t.delete(e), P.value = t;
3649
- }
3650
- n(() => {
3651
- let t = H.value;
3652
- if (!t) return;
3653
- let n = 0, r = !1;
3654
- for (let i of Array.from(t.children)) {
3655
- if (i.dataset.testid === "merge-tag-picker-group-header" && i.dataset.groupName === e) {
3656
- r = !0;
3657
- break;
3658
- }
3659
- n += i.offsetHeight;
3660
- }
3661
- r && t.scrollTo({
3662
- top: n,
3663
- behavior: "smooth"
3664
- });
3665
- });
3666
- }
3667
- function ae(e) {
3668
- if (e.key === "ArrowDown") e.preventDefault(), te(1);
3669
- else if (e.key === "ArrowUp") e.preventDefault(), te(-1);
3670
- else if (e.key === "Enter") {
3671
- e.preventDefault();
3672
- let t = B.value[j.value];
3673
- t && V(t);
3674
- }
3675
- }
3676
- function oe() {
3677
- if (B.value.length !== 0) return `${Zc}-opt-${j.value}`;
3678
- }
3679
- function se(e) {
3680
- return `${Zc}-opt-${e}`;
3681
- }
3682
- let ce = g(() => i.tags.value.length === 0), le = g(() => !ce.value && L.value.length === 0), ue = g(() => N.value && R.value.length > 1 && !O.value);
3683
- return (n, r) => (e(), C(Et, {
3684
- visible: T(i).isOpen.value,
3685
- onClose: ee,
3686
- onKeydown: ae
3687
- }, {
3688
- default: M(() => [_("div", {
3689
- role: "dialog",
3690
- "aria-modal": "true",
3691
- "aria-labelledby": `${Zc}-title`,
3692
- "data-tpl-theme": T(d),
3693
- "data-testid": "merge-tag-picker-modal",
3694
- class: "tpl tpl:flex tpl:max-h-[80vh] tpl:w-[min(420px,92vw)] tpl:flex-col tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:shadow-[var(--tpl-shadow-lg)]",
3695
- style: S(T(l))
3696
- }, [
3697
- _("header", Fc, [_("h2", {
3698
- id: `${Zc}-title`,
3699
- class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
3700
- }, D(T(s).mergeTag.picker.title), 9, Ic), _("button", {
3701
- type: "button",
3702
- class: "tpl:flex tpl:h-7 tpl:w-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
3703
- "aria-label": T(s).mergeTag.picker.close,
3704
- "data-testid": "merge-tag-picker-close",
3705
- onClick: ee
3706
- }, [k(T(dt), {
3707
- size: 16,
3708
- "stroke-width": 2
3709
- })], 8, Lc)]),
3710
- _("div", Rc, [k(T(Xe), {
3711
- class: "tpl:pointer-events-none tpl:absolute tpl:top-1/2 tpl:left-5 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]",
3712
- size: 14,
3713
- "stroke-width": 2
3714
- }), t(_("input", {
3715
- id: `${Zc}-search`,
3716
- ref_key: "searchInputRef",
3717
- ref: w,
3718
- "onUpdate:modelValue": r[0] ||= (e) => m.value = e,
3719
- type: "text",
3720
- class: "tpl:w-full tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)]",
3721
- placeholder: T(s).mergeTag.picker.searchPlaceholder,
3722
- "aria-label": T(s).mergeTag.picker.searchAriaLabel,
3723
- "aria-controls": Zc,
3724
- "aria-activedescendant": oe(),
3725
- "data-testid": "merge-tag-picker-search",
3726
- onKeydown: r[1] ||= E(h(() => {}, ["prevent"]), ["enter"])
3727
- }, null, 40, zc), [[f, m.value]])]),
3728
- ue.value ? (e(), v("div", Bc, [(e(!0), v(y, null, o(R.value, (t) => (e(), v("button", {
3729
- key: t,
3730
- type: "button",
3731
- class: "tpl:flex tpl:flex-shrink-0 tpl:cursor-pointer tpl:items-center tpl:rounded-full tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-2.5 tpl:py-0.5 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
3732
- "data-testid": "merge-tag-picker-group-pill",
3733
- "data-group-name": t,
3734
- onClick: (e) => ie(t)
3735
- }, D(t), 9, Vc))), 128))])) : b("", !0),
3736
- _("div", {
3737
- id: Zc,
3738
- ref_key: "listRef",
3739
- ref: H,
3740
- class: "tpl:relative tpl:max-h-[60vh] tpl:flex-1 tpl:overflow-y-auto",
3741
- role: "listbox",
3742
- "aria-label": T(s).mergeTag.picker.title,
3743
- "data-testid": "merge-tag-picker-list"
3744
- }, [ce.value ? (e(), v("div", Uc, D(T(s).mergeTag.picker.empty), 1)) : le.value ? (e(), v("div", Wc, D(T(s).mergeTag.picker.noResults), 1)) : (e(!0), v(y, { key: 2 }, o(z.value, (t, n) => (e(), v(y, { key: n }, [t.kind === "header" ? (e(), v("button", {
3745
- key: 0,
3746
- ref_for: !0,
3747
- ref: (e) => U(t.group, e),
3748
- type: "button",
3749
- "aria-expanded": !F(t.group),
3750
- "aria-controls": Zc,
3751
- class: "tpl:sticky tpl:top-0 tpl:z-10 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-1.5 tpl:border-none tpl:bg-[var(--tpl-bg-elevated)] tpl:px-3 tpl:pt-2.5 tpl:pb-1 tpl:text-left tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)]",
3752
- "data-testid": "merge-tag-picker-group-header",
3753
- "data-group-name": t.group,
3754
- "data-group-collapsed": F(t.group) ? "true" : "false",
3755
- onClick: (e) => I(t.group)
3756
- }, [
3757
- k(T(qe), {
3758
- size: 12,
3759
- "stroke-width": 2,
3760
- class: p(["tpl:transition-transform", F(t.group) ? "tpl:-rotate-90" : ""])
3761
- }, null, 8, ["class"]),
3762
- _("span", null, D(t.group), 1),
3763
- _("span", Kc, " (" + D(T(c)(T(s).mergeTag.picker.groupCount, { count: t.count })) + ") ", 1)
3764
- ], 8, Gc)) : (e(), v("button", {
3765
- key: 1,
3766
- id: se(t.index),
3767
- type: "button",
3768
- role: "option",
3769
- "aria-selected": t.index === j.value,
3770
- "data-selected": t.index === j.value ? "true" : "false",
3771
- "data-merge-tag-index": t.index,
3772
- "data-merge-tag-value": t.tag.value,
3773
- title: t.tag.description ? `${t.tag.value} — ${t.tag.description}` : t.tag.value,
3774
- class: p(["tpl:flex tpl:w-full tpl:cursor-pointer tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:border-none tpl:px-3 tpl:py-1.5 tpl:text-left tpl:transition-colors", t.index === j.value ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:bg-transparent tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
3775
- "data-testid": "merge-tag-picker-item",
3776
- onMousemove: (e) => j.value = t.index,
3777
- onClick: (e) => V(t.tag)
3778
- }, [
3779
- _("span", Jc, D(t.tag.label), 1),
3780
- _("span", Yc, D(t.tag.value), 1),
3781
- t.tag.description ? (e(), v("span", Xc, D(t.tag.description), 1)) : b("", !0)
3782
- ], 42, qc))], 64))), 128))], 8, Hc)
3783
- ], 12, Pc)]),
3784
- _: 1
3785
- }, 8, ["visible"]));
3786
- }
3787
- }), $c = ["data-logic-keyword"], el = /* @__PURE__ */ m({
3788
- __name: "LogicTagBadge",
3789
- props: {
3790
- value: {},
3791
- syntax: {}
3792
- },
3793
- setup(t) {
3794
- let n = t, r = g(() => F(n.value, n.syntax)), i = g(() => B(n.value, n.syntax));
3795
- return (t, n) => r.value ? (e(), v("span", {
3796
- key: 0,
3797
- class: "tpl:inline-flex tpl:flex-shrink-0 tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:leading-none tpl:font-bold tpl:tracking-wide tpl:uppercase",
3798
- style: {
3799
- border: "1.5px solid\n color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
3800
- color: "var(--tpl-primary)"
3801
- },
3802
- "data-testid": "merge-tag-logic-badge",
3803
- "data-logic-keyword": i.value
3804
- }, D(i.value), 9, $c)) : b("", !0);
3805
- }
3806
- }), tl = ["aria-labelledby", "data-tpl-theme"], nl = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:gap-3 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, rl = ["id"], il = ["aria-label"], al = { class: "tpl:relative tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, ol = [
3807
- "id",
3808
- "placeholder",
3809
- "aria-label",
3810
- "aria-activedescendant"
3811
- ], sl = ["aria-label"], cl = {
3812
- key: 0,
3813
- class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
3814
- "data-testid": "logic-picker-empty"
3815
- }, ll = {
3816
- key: 1,
3817
- class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
3818
- "data-testid": "logic-picker-empty"
3819
- }, ul = ["data-group-name"], dl = [
3820
- "id",
3821
- "aria-selected",
3822
- "data-selected",
3823
- "data-logic-index",
3824
- "data-logic-kind",
3825
- "onMousemove",
3826
- "onClick"
3827
- ], fl = { class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-between tpl:gap-2" }, pl = { class: "tpl:text-sm tpl:font-medium" }, ml = {
3828
- key: 0,
3829
- class: "tpl:flex tpl:items-center"
3830
- }, hl = {
3831
- key: 1,
3832
- class: "tpl:flex tpl:items-center tpl:gap-1"
3833
- }, gl = { class: "tpl:line-clamp-2 tpl:font-mono tpl:text-xs tpl:text-ellipsis tpl:break-all tpl:text-[var(--tpl-text-dim)]" }, _l = {
3834
- key: 0,
3835
- class: "tpl:line-clamp-2 tpl:text-xs tpl:text-ellipsis tpl:text-[var(--tpl-text-dim)]"
3836
- }, vl = "tpl-logic-picker-list", yl = /* @__PURE__ */ m({
3837
- __name: "LogicTagPickerModal",
3838
- setup(r) {
3839
- let i = Oe(We, "LogicTagPickerModal"), { t: s } = W(), c = A(je, L.liquid), l = A(Ae, null), d = A(De, null), m = u(""), x = Te(m, 200), w = u(null), O = g(() => x.value.trim().length > 0), j = u(0);
3840
- function N(e) {
3841
- let t = x.value.trim().toLowerCase();
3842
- return t ? e.filter(Boolean).join(" ").toLowerCase().includes(t) : !0;
3843
- }
3844
- let P = g(() => i.tags.value.filter((e) => N([
3845
- e.label,
3846
- e.value,
3847
- e.description
3848
- ]))), F = g(() => i.pairs.value.filter((e) => N([
3849
- e.label,
3850
- e.before,
3851
- e.after,
3852
- e.description
3853
- ]))), I = g(() => [...F.value.map((e) => ({
3854
- kind: "pair",
3855
- pair: e,
3856
- group: e.group
3857
- })), ...P.value.map((e) => ({
3858
- kind: "tag",
3859
- tag: e,
3860
- group: e.group
3861
- }))]), R = g(() => i.tags.value.some((e) => !!e.group) || i.pairs.value.some((e) => !!e.group));
3862
- function z(e) {
3863
- let t = s.logicTag.picker.otherGroup, n = /* @__PURE__ */ new Map(), r = [];
3864
- for (let i of e) {
3865
- let e = i.group ?? t;
3866
- n.has(e) || (n.set(e, []), r.push(e)), n.get(e).push(i);
3867
- }
3868
- return r.map((e) => [e, n.get(e)]);
3869
- }
3870
- let B = g(() => {
3871
- let e = [], t = [], n = 0, r = (r) => {
3872
- r.kind === "tag" ? (e.push({
3873
- kind: "tag",
3874
- tag: r.tag,
3875
- index: n
3876
- }), t.push(r.tag)) : (e.push({
3877
- kind: "pair",
3878
- pair: r.pair,
3879
- index: n
3880
- }), t.push(r.pair)), n++;
3881
- }, i = I.value;
3882
- if (O.value || !R.value) for (let e of i) r(e);
3883
- else for (let [t, n] of z(i)) {
3884
- e.push({
3885
- kind: "header",
3886
- label: t
3887
- });
3888
- for (let e of n) r(e);
3889
- }
3890
- return {
3891
- rows: e,
3892
- items: t
3893
- };
3894
- }), V = g(() => B.value.items), ee = g(() => i.tags.value.length === 0 && i.pairs.value.length === 0), te = g(() => !ee.value && V.value.length === 0);
3895
- a(() => i.isOpen.value, (e) => {
3896
- e && (m.value = "", j.value = 0, n(() => w.value?.focus()));
3897
- }), a(V, (e) => {
3898
- j.value >= e.length && (j.value = Math.max(0, e.length - 1));
3899
- });
3900
- let H = u(null);
3901
- function ne(e) {
3902
- i.resolve(e);
3903
- }
3904
- function U() {
3905
- i.resolve(null);
3906
- }
3907
- function re(e) {
3908
- V.value.length !== 0 && (j.value = Math.max(0, Math.min(V.value.length - 1, j.value + e)), n(() => {
3909
- H.value?.querySelector(`[data-logic-index="${j.value}"]`)?.scrollIntoView({ block: "nearest" });
3910
- }));
3911
- }
3912
- function ie(e) {
3913
- if (e.key === "ArrowDown") e.preventDefault(), re(1);
3914
- else if (e.key === "ArrowUp") e.preventDefault(), re(-1);
3915
- else if (e.key === "Enter") {
3916
- e.preventDefault();
3917
- let t = V.value[j.value];
3918
- t && ne(t);
3919
- }
3920
- }
3921
- function ae(e) {
3922
- return `${vl}-opt-${e}`;
3923
- }
3924
- function oe() {
3925
- return V.value.length === 0 ? void 0 : `${vl}-opt-${j.value}`;
3926
- }
3927
- return (n, r) => (e(), C(Et, {
3928
- visible: T(i).isOpen.value,
3929
- onClose: U,
3930
- onKeydown: ie
3931
- }, {
3932
- default: M(() => [_("div", {
3933
- role: "dialog",
3934
- "aria-modal": "true",
3935
- "aria-labelledby": `${vl}-title`,
3936
- "data-tpl-theme": T(d),
3937
- "data-testid": "logic-picker-modal",
3938
- class: "tpl tpl:flex tpl:max-h-[80vh] tpl:w-[min(420px,92vw)] tpl:flex-col tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:shadow-[var(--tpl-shadow-lg)]",
3939
- style: S(T(l))
3940
- }, [
3941
- _("header", nl, [_("h2", {
3942
- id: `${vl}-title`,
3943
- class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
3944
- }, D(T(s).logicTag.picker.title), 9, rl), _("button", {
3945
- type: "button",
3946
- class: "tpl:flex tpl:h-7 tpl:w-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
3947
- "aria-label": T(s).logicTag.picker.close,
3948
- "data-testid": "logic-picker-close",
3949
- onClick: U
3950
- }, [k(T(dt), {
3951
- size: 16,
3952
- "stroke-width": 2
3953
- })], 8, il)]),
3954
- _("div", al, [k(T(Xe), {
3955
- class: "tpl:pointer-events-none tpl:absolute tpl:top-1/2 tpl:left-5 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]",
3956
- size: 14,
3957
- "stroke-width": 2
3958
- }), t(_("input", {
3959
- id: `${vl}-search`,
3960
- ref_key: "searchInputRef",
3961
- ref: w,
3962
- "onUpdate:modelValue": r[0] ||= (e) => m.value = e,
3963
- type: "text",
3964
- class: "tpl:w-full tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)]",
3965
- placeholder: T(s).logicTag.picker.searchPlaceholder,
3966
- "aria-label": T(s).logicTag.picker.searchAriaLabel,
3967
- "aria-controls": vl,
3968
- "aria-activedescendant": oe(),
3969
- "data-testid": "logic-picker-search",
3970
- onKeydown: r[1] ||= E(h(() => {}, ["prevent"]), ["enter"])
3971
- }, null, 40, ol), [[f, m.value]])]),
3972
- _("div", {
3973
- id: vl,
3974
- ref_key: "listRef",
3975
- ref: H,
3976
- class: "tpl:relative tpl:max-h-[60vh] tpl:flex-1 tpl:overflow-y-auto",
3977
- role: "listbox",
3978
- "aria-label": T(s).logicTag.picker.title,
3979
- "data-testid": "logic-picker-list"
3980
- }, [ee.value ? (e(), v("div", cl, D(T(s).logicTag.picker.empty), 1)) : te.value ? (e(), v("div", ll, D(T(s).logicTag.picker.noResults), 1)) : (e(!0), v(y, { key: 2 }, o(B.value.rows, (t, n) => (e(), v(y, { key: n }, [t.kind === "header" ? (e(), v("div", {
3981
- key: 0,
3982
- class: "tpl:px-3 tpl:pt-2.5 tpl:pb-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]",
3983
- "data-testid": "logic-picker-header",
3984
- "data-group-name": t.label
3985
- }, D(t.label), 9, ul)) : (e(), v("button", {
3986
- key: 1,
3987
- id: ae(t.index),
3988
- type: "button",
3989
- role: "option",
3990
- "aria-selected": t.index === j.value,
3991
- "data-selected": t.index === j.value ? "true" : "false",
3992
- "data-logic-index": t.index,
3993
- "data-logic-kind": t.kind,
3994
- class: p(["tpl:flex tpl:w-full tpl:cursor-pointer tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:border-none tpl:px-3 tpl:py-1.5 tpl:text-left tpl:transition-colors", t.index === j.value ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:bg-transparent tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
3995
- "data-testid": "logic-picker-item",
3996
- onMousemove: (e) => j.value = t.index,
3997
- onClick: (e) => ne(t.kind === "tag" ? t.tag : t.pair)
3998
- }, [
3999
- _("span", fl, [_("span", pl, D(t.kind === "tag" ? t.tag.label : t.pair.label), 1), t.kind === "tag" ? (e(), v("span", ml, [k(el, {
4000
- value: t.tag.value,
4001
- syntax: T(c)
4002
- }, null, 8, ["value", "syntax"])])) : (e(), v("span", hl, [
4003
- k(el, {
4004
- value: t.pair.before,
4005
- syntax: T(c)
4006
- }, null, 8, ["value", "syntax"]),
4007
- r[2] ||= _("span", { class: "tpl:text-[var(--tpl-text-dim)]" }, "…", -1),
4008
- k(el, {
4009
- value: t.pair.after,
4010
- syntax: T(c)
4011
- }, null, 8, ["value", "syntax"])
4012
- ]))]),
4013
- _("span", gl, D(t.kind === "tag" ? t.tag.value : `${t.pair.before} … ${t.pair.after}`), 1),
4014
- (t.kind === "tag" ? t.tag.description : t.pair.description) ? (e(), v("span", _l, D(t.kind === "tag" ? t.tag.description : t.pair.description), 1)) : b("", !0)
4015
- ], 42, dl))], 64))), 128))], 8, sl)
4016
- ], 12, tl)]),
4017
- _: 1
4018
- }, 8, ["visible"]));
4019
- }
4020
- });
4021
- //#endregion
4022
- export { Oc as a, vc as c, Qt as d, Vt as f, Ac as i, un as l, Qc as n, Ec as o, Ft as p, Nc as r, Cc as s, yl as t, $t as u };