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