@aswin.dev/editor 0.7.0 → 0.7.2

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