@templatical/editor 0.0.6 → 0.1.1

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