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