@aswin.dev/editor 0.7.3 → 0.7.6

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 (93) hide show
  1. package/dist/{AiChatSidebar-Dt5pvG5t.js → AiChatSidebar-DM2ri7KX.js} +1 -1
  2. package/dist/{AiFeatureMenu-BipxcGap.js → AiFeatureMenu-BrZBJ0R5.js} +1 -1
  3. package/dist/{CloudEditor-CnUX0IOW.js → CloudEditor-BRpzzfQn.js} +8 -8
  4. package/dist/{CollaboratorBar-NaaZTjbs.js → CollaboratorBar-DsRXj3Kn.js} +1 -1
  5. package/dist/CountdownToolbar-B9IAZzeV.js +194 -0
  6. package/dist/{DesignReferenceSidebar-CZg97bbj.js → DesignReferenceSidebar-B1iw3Bb7.js} +1 -1
  7. package/dist/{ModuleBrowserModal-D2EVdexc.js → ModuleBrowserModal-DVnd1dqR.js} +4 -4
  8. package/dist/{ModulePreviewCanvas-P3N-nxkU.js → ModulePreviewCanvas-D9jBAoBQ.js} +29 -29
  9. package/dist/{ParagraphEditor-BbRuKhWv.js → ParagraphEditor-CO3V0H_V.js} +7 -7
  10. package/dist/{SaveModuleDialog-DLZa3m3O.js → SaveModuleDialog-CboNFwIA.js} +2 -2
  11. package/dist/{NumberWithSuffix-CihczoAd.js → SlidingPillSelect-DfcBdJqN.js} +122 -106
  12. package/dist/{SnapshotHistory-Csg1_jXi.js → SnapshotHistory-C26pvPre.js} +1 -1
  13. package/dist/{TestEmailModal-m3okLbJz.js → TestEmailModal-B4OoUWb_.js} +2 -2
  14. package/dist/{TitleEditor-CtJIS5ER.js → TitleEditor-DU_QWG_m.js} +2 -2
  15. package/dist/{TplModal-CQCrKeKP.js → TplModal-Dr6Do8oU.js} +1 -1
  16. package/dist/{blockTypeIcons-Dah0pgt-.js → blockTypeIcons-cRDr36gk.js} +48 -30
  17. package/dist/bundle-stats.json +6 -6
  18. package/dist/cdn/chunks/{AccessibilityPanel-Bt_fD7QT.js → AccessibilityPanel-Csd47zqI.js} +9 -9
  19. package/dist/cdn/chunks/{AccessibilityPanel-Bt_fD7QT.js.map → AccessibilityPanel-Csd47zqI.js.map} +1 -1
  20. package/dist/cdn/chunks/{AiFeatureMenu-Bn-0rgfr.js → AiFeatureMenu-BlnZF5pf.js} +7 -7
  21. package/dist/cdn/chunks/{AiFeatureMenu-Bn-0rgfr.js.map → AiFeatureMenu-BlnZF5pf.js.map} +1 -1
  22. package/dist/cdn/chunks/{BlockA11yBadge-Cj18Iw0p.js → BlockA11yBadge-VY8NqI9n.js} +4 -4
  23. package/dist/cdn/chunks/{BlockA11yBadge-Cj18Iw0p.js.map → BlockA11yBadge-VY8NqI9n.js.map} +1 -1
  24. package/dist/cdn/chunks/{CloudEditor-56lVcdot.js → CloudEditor-D0TrKlva.js} +178 -178
  25. package/dist/cdn/chunks/{CloudEditor-56lVcdot.js.map → CloudEditor-D0TrKlva.js.map} +1 -1
  26. package/dist/cdn/chunks/{CollaboratorBar-B7DCV3xp.js → CollaboratorBar-BhMNTI_h.js} +3 -3
  27. package/dist/cdn/chunks/{CollaboratorBar-B7DCV3xp.js.map → CollaboratorBar-BhMNTI_h.js.map} +1 -1
  28. package/dist/cdn/chunks/CountdownToolbar-DsP6O1fl.js +196 -0
  29. package/dist/cdn/chunks/CountdownToolbar-DsP6O1fl.js.map +1 -0
  30. package/dist/cdn/chunks/{ModuleBrowserModal-CiIY7ZGv.js → ModuleBrowserModal-CpYPeiKv.js} +8 -8
  31. package/dist/cdn/chunks/{ModuleBrowserModal-CiIY7ZGv.js.map → ModuleBrowserModal-CpYPeiKv.js.map} +1 -1
  32. package/dist/cdn/chunks/{ModulePreviewCanvas-M7_OGV2m.js → ModulePreviewCanvas-BIYYnqUq.js} +24 -24
  33. package/dist/cdn/chunks/{ModulePreviewCanvas-M7_OGV2m.js.map → ModulePreviewCanvas-BIYYnqUq.js.map} +1 -1
  34. package/dist/cdn/chunks/{ParagraphEditor-1XJOpiLX.js → ParagraphEditor-ZV5SYYw8.js} +53 -53
  35. package/dist/cdn/chunks/{ParagraphEditor-1XJOpiLX.js.map → ParagraphEditor-ZV5SYYw8.js.map} +1 -1
  36. package/dist/cdn/chunks/{RichTextEditorContent-C2q8sbp2.js → RichTextEditorContent-Dx05ETtt.js} +4 -4
  37. package/dist/cdn/chunks/{RichTextEditorContent-C2q8sbp2.js.map → RichTextEditorContent-Dx05ETtt.js.map} +1 -1
  38. package/dist/cdn/chunks/{SaveModuleDialog-BNxh1jPT.js → SaveModuleDialog-DJEEK7Wb.js} +23 -23
  39. package/dist/cdn/chunks/{SaveModuleDialog-BNxh1jPT.js.map → SaveModuleDialog-DJEEK7Wb.js.map} +1 -1
  40. package/dist/cdn/chunks/{NumberWithSuffix-DfVBnsgc.js → SlidingPillSelect-BhPCkqVu.js} +132 -116
  41. package/dist/cdn/chunks/SlidingPillSelect-BhPCkqVu.js.map +1 -0
  42. package/dist/cdn/chunks/{TitleEditor-IF7VzLTk.js → TitleEditor-fu1A87Ld.js} +21 -21
  43. package/dist/cdn/chunks/{TitleEditor-IF7VzLTk.js.map → TitleEditor-fu1A87Ld.js.map} +1 -1
  44. package/dist/cdn/chunks/blockTypeIcons-CJirTS-q.js +25 -0
  45. package/dist/cdn/chunks/blockTypeIcons-CJirTS-q.js.map +1 -0
  46. package/dist/cdn/chunks/{de-B05yW8Gi.js → de-BsYijc0r.js} +49 -2
  47. package/dist/cdn/chunks/de-BsYijc0r.js.map +1 -0
  48. package/dist/cdn/chunks/{en-BII7695P.js → en-DMu9hPIC.js} +49 -2
  49. package/dist/cdn/chunks/en-DMu9hPIC.js.map +1 -0
  50. package/dist/cdn/chunks/{extensions-B0eT-yjf.js → extensions-BbFKsjyT.js} +26 -26
  51. package/dist/cdn/chunks/{extensions-B0eT-yjf.js.map → extensions-BbFKsjyT.js.map} +1 -1
  52. package/dist/cdn/chunks/{features-BrvE2Fzv.js → features-uApxwJMz.js} +1953 -1836
  53. package/dist/cdn/chunks/features-uApxwJMz.js.map +1 -0
  54. package/dist/cdn/chunks/{icons-C7wtAD8p.js → icons-DZb4EX9m.js} +26 -9
  55. package/dist/cdn/chunks/icons-DZb4EX9m.js.map +1 -0
  56. package/dist/cdn/chunks/{media-library-Cl5XuaKy.js → media-library-B3g52j8R.js} +529 -529
  57. package/dist/cdn/chunks/{media-library-Cl5XuaKy.js.map → media-library-B3g52j8R.js.map} +1 -1
  58. package/dist/cdn/chunks/{quality-Va91a3N8.js → quality-Ug5lFGHP.js} +288 -288
  59. package/dist/cdn/chunks/{quality-Va91a3N8.js.map → quality-Ug5lFGHP.js.map} +1 -1
  60. package/dist/cdn/chunks/{renderer-si0Zgxeb.js → renderer-jXCdXjV-.js} +19 -19
  61. package/dist/cdn/chunks/{renderer-si0Zgxeb.js.map → renderer-jXCdXjV-.js.map} +1 -1
  62. package/dist/cdn/chunks/{src-BLyYIbdZ.js → src-FMtH5ZvJ.js} +9 -9
  63. package/dist/cdn/chunks/{src-BLyYIbdZ.js.map → src-FMtH5ZvJ.js.map} +1 -1
  64. package/dist/cdn/chunks/{styles-C6BQLT9F.js → styles-Co9vw4ag.js} +1332 -1101
  65. package/dist/cdn/chunks/styles-Co9vw4ag.js.map +1 -0
  66. package/dist/cdn/chunks/{tiptap-D8whBv5F.js → tiptap-qXOh0vzV.js} +2 -2
  67. package/dist/cdn/chunks/{tiptap-D8whBv5F.js.map → tiptap-qXOh0vzV.js.map} +1 -1
  68. package/dist/cdn/editor.css +1 -1
  69. package/dist/cdn/editor.js +85 -85
  70. package/dist/cdn/editor.js.map +1 -1
  71. package/dist/{cloud-BoS0J0vs.js → cloud-COUuu_KE.js} +1 -1
  72. package/dist/{de-C74F9xK3.js → de-CR1qAkAm.js} +48 -1
  73. package/dist/{dist-C2grMquk.js → dist-DP82Y0rs.js} +155 -131
  74. package/dist/{en-B24jVTeO.js → en-jbnp1n6M.js} +48 -1
  75. package/dist/{extensions-DsmjHqBF.js → extensions-Bg22D6c8.js} +16 -16
  76. package/dist/index.d.ts +10 -10
  77. package/dist/style.css +1 -1
  78. package/dist/{styles-BMFMtR9R.js → styles-DgL0UYj0.js} +1456 -1225
  79. package/dist/templatical-editor.js +6 -6
  80. package/dist/{useEditorCore-CtNAo0uy.js → useEditorCore-CSlYQZWx.js} +1756 -1661
  81. package/dist/{useMergeTag-2vTcVpNo.js → useMergeTag-BVL3A4OO.js} +4 -4
  82. package/package.json +7 -7
  83. package/dist/CountdownToolbar-CbhSp_uq.js +0 -210
  84. package/dist/cdn/chunks/CountdownToolbar-BtaD3d3-.js +0 -212
  85. package/dist/cdn/chunks/CountdownToolbar-BtaD3d3-.js.map +0 -1
  86. package/dist/cdn/chunks/NumberWithSuffix-DfVBnsgc.js.map +0 -1
  87. package/dist/cdn/chunks/blockTypeIcons-tPBKQ8WC.js +0 -24
  88. package/dist/cdn/chunks/blockTypeIcons-tPBKQ8WC.js.map +0 -1
  89. package/dist/cdn/chunks/de-B05yW8Gi.js.map +0 -1
  90. package/dist/cdn/chunks/en-BII7695P.js.map +0 -1
  91. package/dist/cdn/chunks/features-BrvE2Fzv.js.map +0 -1
  92. package/dist/cdn/chunks/icons-C7wtAD8p.js.map +0 -1
  93. package/dist/cdn/chunks/styles-C6BQLT9F.js.map +0 -1
@@ -1,14 +1,14 @@
1
1
  import { D as e, et as t } from "./vue.runtime.esm-bundler-CjauPXjj.js";
2
- import { A as n, P as r, i } from "./dist-C2grMquk.js";
2
+ import { F as n, i as r, j as i } from "./dist-DP82Y0rs.js";
3
3
  import { C as a, b as o, h as s, x as c, y as l } from "./keys-CvX8D-8C.js";
4
4
  //#region src/composables/useMergeTag.ts
5
5
  function u() {
6
- let u = e(s, "email") === "popup", d = u ? [] : e(l, []), f = e(c, i.liquid), p = u ? null : e(a, null), m = u ? !1 : e(o, !0), h = t(!1);
6
+ let u = e(s, "email") === "popup", d = u ? [] : e(l, []), f = e(c, r.liquid), p = u ? null : e(a, null), m = u ? !1 : e(o, !0), h = t(!1);
7
7
  function g(e) {
8
- return r(e, f);
8
+ return n(e, f);
9
9
  }
10
10
  function _(e) {
11
- return n(e, d);
11
+ return i(e, d);
12
12
  }
13
13
  async function v() {
14
14
  if (!p) return null;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aswin.dev/editor",
3
3
  "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
4
- "version": "0.7.3",
4
+ "version": "0.7.6",
5
5
  "bugs": "https://github.com/templatical/sdk/issues",
6
6
  "devDependencies": {
7
7
  "@lucide/vue": "^1.11.0",
@@ -33,9 +33,9 @@
33
33
  "vue": "^3.5.33",
34
34
  "vue-tsc": "^3.2.7",
35
35
  "vuedraggable": "^4.1.0",
36
- "@aswin.dev/quality": "0.7.3",
37
- "@aswin.dev/types": "0.7.3",
38
- "@aswin.dev/core": "0.7.3"
36
+ "@aswin.dev/core": "0.7.6",
37
+ "@aswin.dev/types": "0.7.6",
38
+ "@aswin.dev/quality": "0.7.6"
39
39
  },
40
40
  "exports": {
41
41
  ".": {
@@ -63,9 +63,9 @@
63
63
  "license": "SEE LICENSE IN LICENSE",
64
64
  "module": "./dist/templatical-editor.js",
65
65
  "peerDependencies": {
66
- "@aswin.dev/media-library": "0.7.3",
67
- "@aswin.dev/quality": "0.7.3",
68
- "@aswin.dev/renderer": "0.7.3"
66
+ "@aswin.dev/quality": "0.7.6",
67
+ "@aswin.dev/renderer": "0.7.6",
68
+ "@aswin.dev/media-library": "0.7.6"
69
69
  },
70
70
  "peerDependenciesMeta": {
71
71
  "@aswin.dev/renderer": {
@@ -1,210 +0,0 @@
1
- import { At as e, C as t, F as n, Ft as r, N as i, U as a, b as o, f as s, g as c, h as l, m as u, st as d, v as f, x as p } from "./vue.runtime.esm-bundler-CjauPXjj.js";
2
- import { t as m } from "./useI18n-C2xQZ6K9.js";
3
- import { f as h } from "./styleConstants-34eUKPOZ.js";
4
- import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-CihczoAd.js";
5
- //#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
6
- var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ t({
7
- __name: "CheckboxItem",
8
- props: {
9
- modelValue: { type: Boolean },
10
- label: {}
11
- },
12
- emits: ["update:modelValue"],
13
- setup(e, { emit: t }) {
14
- let n = t;
15
- return (t, a) => (i(), f("label", b, [l("input", {
16
- type: "checkbox",
17
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
18
- checked: e.modelValue,
19
- onChange: a[0] ||= (e) => n("update:modelValue", e.target.checked)
20
- }, null, 40, x), o(" " + r(e.label), 1)]));
21
- }
22
- }), C = ["value"], w = ["value"], T = ["value"], E = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, D = ["value"], O = { value: "" }, k = ["value"], A = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, j = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, M = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, N = [
23
- "value",
24
- "placeholder",
25
- "onInput"
26
- ], P = ["value", "placeholder"], F = ["value"], I = /* @__PURE__ */ t({
27
- __name: "CountdownToolbar",
28
- props: {
29
- block: {},
30
- fontFamilies: {}
31
- },
32
- emits: ["update"],
33
- setup(t, { emit: o }) {
34
- let b = o, { t: x } = m(), I = [
35
- "UTC",
36
- "America/New_York",
37
- "America/Chicago",
38
- "America/Denver",
39
- "America/Los_Angeles",
40
- "Europe/London",
41
- "Europe/Berlin",
42
- "Europe/Paris",
43
- "Europe/Moscow",
44
- "Asia/Dubai",
45
- "Asia/Kolkata",
46
- "Asia/Shanghai",
47
- "Asia/Tokyo",
48
- "Australia/Sydney",
49
- "Pacific/Auckland"
50
- ], L = [
51
- {
52
- value: ":",
53
- label: ":"
54
- },
55
- {
56
- value: "-",
57
- label: "-"
58
- },
59
- {
60
- value: " ",
61
- label: "␣"
62
- }
63
- ], R = [
64
- "Days",
65
- "Hours",
66
- "Minutes",
67
- "Seconds"
68
- ], z = u(() => R.map((e) => ({
69
- unit: e,
70
- showKey: `show${e}`,
71
- labelKey: `label${e}`,
72
- translationKey: e.toLowerCase()
73
- })));
74
- function B(e, t) {
75
- b("update", { [e]: t });
76
- }
77
- return (o, u) => (i(), f(s, null, [
78
- p(_, { label: d(x).countdown.targetDate }, {
79
- default: a(() => [l("input", {
80
- type: "datetime-local",
81
- class: e(d(h)),
82
- value: t.block.targetDate,
83
- onInput: u[0] ||= (e) => B("targetDate", e.target.value)
84
- }, null, 42, C)]),
85
- _: 1
86
- }, 8, ["label"]),
87
- p(_, { label: d(x).countdown.timezone }, {
88
- default: a(() => [l("select", {
89
- class: e(d(h)),
90
- value: t.block.timezone,
91
- onChange: u[1] ||= (e) => B("timezone", e.target.value)
92
- }, [(i(), f(s, null, n(I, (e) => l("option", {
93
- key: e,
94
- value: e
95
- }, r(e), 9, T)), 64))], 42, w)]),
96
- _: 1
97
- }, 8, ["label"]),
98
- p(_, { label: d(x).countdown.display }, {
99
- default: a(() => [l("div", E, [(i(!0), f(s, null, n(z.value, (e) => (i(), c(S, {
100
- key: e.unit,
101
- "model-value": t.block[e.showKey],
102
- label: d(x).countdown[e.translationKey],
103
- "onUpdate:modelValue": (t) => B(e.showKey, t)
104
- }, null, 8, [
105
- "model-value",
106
- "label",
107
- "onUpdate:modelValue"
108
- ]))), 128))])]),
109
- _: 1
110
- }, 8, ["label"]),
111
- p(_, { label: d(x).countdown.separator }, {
112
- default: a(() => [p(v, {
113
- options: L,
114
- "model-value": t.block.separator,
115
- "onUpdate:modelValue": u[2] ||= (e) => B("separator", e)
116
- }, null, 8, ["model-value"])]),
117
- _: 1
118
- }, 8, ["label"]),
119
- p(_, { label: d(x).countdown.fontFamily }, {
120
- default: a(() => [l("select", {
121
- class: e(d(h)),
122
- value: t.block.fontFamily || "",
123
- onChange: u[3] ||= (e) => B("fontFamily", e.target.value || void 0)
124
- }, [l("option", O, r(d(x).countdown.inheritFont), 1), (i(!0), f(s, null, n(t.fontFamilies, (e) => (i(), f("option", {
125
- key: e.value,
126
- value: e.value
127
- }, r(e.label), 9, k))), 128))], 42, D)]),
128
- _: 1
129
- }, 8, ["label"]),
130
- l("div", A, [p(_, { label: d(x).countdown.digitFontSize }, {
131
- default: a(() => [p(y, {
132
- "model-value": t.block.digitFontSize,
133
- min: 12,
134
- max: 72,
135
- suffix: "px",
136
- "onUpdate:modelValue": u[4] ||= (e) => B("digitFontSize", e)
137
- }, null, 8, ["model-value"])]),
138
- _: 1
139
- }, 8, ["label"]), p(_, { label: d(x).countdown.labelFontSize }, {
140
- default: a(() => [p(y, {
141
- "model-value": t.block.labelFontSize,
142
- min: 8,
143
- max: 24,
144
- suffix: "px",
145
- "onUpdate:modelValue": u[5] ||= (e) => B("labelFontSize", e)
146
- }, null, 8, ["model-value"])]),
147
- _: 1
148
- }, 8, ["label"])]),
149
- l("div", j, [p(_, { label: d(x).countdown.digitColor }, {
150
- default: a(() => [p(g, {
151
- "model-value": t.block.digitColor,
152
- "onUpdate:modelValue": u[6] ||= (e) => B("digitColor", e)
153
- }, null, 8, ["model-value"])]),
154
- _: 1
155
- }, 8, ["label"]), p(_, { label: d(x).countdown.labelColor }, {
156
- default: a(() => [p(g, {
157
- "model-value": t.block.labelColor,
158
- "onUpdate:modelValue": u[7] ||= (e) => B("labelColor", e)
159
- }, null, 8, ["model-value"])]),
160
- _: 1
161
- }, 8, ["label"])]),
162
- p(_, { label: d(x).countdown.background }, {
163
- default: a(() => [p(g, {
164
- "model-value": t.block.backgroundColor,
165
- "onUpdate:modelValue": u[8] ||= (e) => B("backgroundColor", e)
166
- }, null, 8, ["model-value"])]),
167
- _: 1
168
- }, 8, ["label"]),
169
- p(_, { label: d(x).countdown.labels }, {
170
- default: a(() => [l("div", M, [(i(!0), f(s, null, n(z.value, (n) => (i(), f("input", {
171
- key: n.unit,
172
- type: "text",
173
- class: e(d(h)),
174
- value: t.block[n.labelKey],
175
- placeholder: d(x).countdown[n.translationKey],
176
- onInput: (e) => B(n.labelKey, e.target.value)
177
- }, null, 42, N))), 128))])]),
178
- _: 1
179
- }, 8, ["label"]),
180
- p(_, { label: d(x).countdown.expiry }, {
181
- default: a(() => [l("input", {
182
- type: "text",
183
- class: e(d(h)),
184
- value: t.block.expiredMessage,
185
- placeholder: d(x).countdown.expiredMessagePlaceholder,
186
- onInput: u[9] ||= (e) => B("expiredMessage", e.target.value)
187
- }, null, 42, P)]),
188
- _: 1
189
- }, 8, ["label"]),
190
- p(_, { label: d(x).countdown.expiredImageUrl }, {
191
- default: a(() => [l("input", {
192
- type: "url",
193
- class: e(d(h)),
194
- value: t.block.expiredImageUrl,
195
- placeholder: "https://...",
196
- onInput: u[10] ||= (e) => B("expiredImageUrl", e.target.value)
197
- }, null, 42, F)]),
198
- _: 1
199
- }, 8, ["label"]),
200
- p(S, {
201
- "model-value": t.block.hideOnExpiry,
202
- label: d(x).countdown.hideOnExpiry,
203
- class: "tpl:mb-3.5",
204
- "onUpdate:modelValue": u[11] ||= (e) => B("hideOnExpiry", e)
205
- }, null, 8, ["model-value", "label"])
206
- ], 64));
207
- }
208
- });
209
- //#endregion
210
- export { I as default };
@@ -1,212 +0,0 @@
1
- import { C as e, I as t, P as n, W as r, b as i, ct as a, f as o, ft as s, g as c, h as l, m as u, ut as d, v as f, x as p } from "./draggable-C-1_gch3.js";
2
- import { Bt as m } from "./features-BrvE2Fzv.js";
3
- import { f as h } from "./styleConstants-DfcU8u_r.js";
4
- import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-DfVBnsgc.js";
5
- //#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
6
- var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ e({
7
- __name: "CheckboxItem",
8
- props: {
9
- modelValue: { type: Boolean },
10
- label: {}
11
- },
12
- emits: ["update:modelValue"],
13
- setup(e, { emit: t }) {
14
- let r = t;
15
- return (t, a) => (n(), f("label", b, [l("input", {
16
- type: "checkbox",
17
- class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
18
- checked: e.modelValue,
19
- onChange: a[0] ||= (e) => r("update:modelValue", e.target.checked)
20
- }, null, 40, x), i(" " + s(e.label), 1)]));
21
- }
22
- }), C = ["value"], w = ["value"], T = ["value"], E = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, D = ["value"], O = { value: "" }, k = ["value"], A = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, j = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, M = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, N = [
23
- "value",
24
- "placeholder",
25
- "onInput"
26
- ], P = ["value", "placeholder"], F = ["value"], I = /* @__PURE__ */ e({
27
- __name: "CountdownToolbar",
28
- props: {
29
- block: {},
30
- fontFamilies: {}
31
- },
32
- emits: ["update"],
33
- setup(e, { emit: i }) {
34
- let b = i, { t: x } = m(), I = [
35
- "UTC",
36
- "America/New_York",
37
- "America/Chicago",
38
- "America/Denver",
39
- "America/Los_Angeles",
40
- "Europe/London",
41
- "Europe/Berlin",
42
- "Europe/Paris",
43
- "Europe/Moscow",
44
- "Asia/Dubai",
45
- "Asia/Kolkata",
46
- "Asia/Shanghai",
47
- "Asia/Tokyo",
48
- "Australia/Sydney",
49
- "Pacific/Auckland"
50
- ], L = [
51
- {
52
- value: ":",
53
- label: ":"
54
- },
55
- {
56
- value: "-",
57
- label: "-"
58
- },
59
- {
60
- value: " ",
61
- label: "␣"
62
- }
63
- ], R = [
64
- "Days",
65
- "Hours",
66
- "Minutes",
67
- "Seconds"
68
- ], z = u(() => R.map((e) => ({
69
- unit: e,
70
- showKey: `show${e}`,
71
- labelKey: `label${e}`,
72
- translationKey: e.toLowerCase()
73
- })));
74
- function B(e, t) {
75
- b("update", { [e]: t });
76
- }
77
- return (i, u) => (n(), f(o, null, [
78
- p(_, { label: a(x).countdown.targetDate }, {
79
- default: r(() => [l("input", {
80
- type: "datetime-local",
81
- class: d(a(h)),
82
- value: e.block.targetDate,
83
- onInput: u[0] ||= (e) => B("targetDate", e.target.value)
84
- }, null, 42, C)]),
85
- _: 1
86
- }, 8, ["label"]),
87
- p(_, { label: a(x).countdown.timezone }, {
88
- default: r(() => [l("select", {
89
- class: d(a(h)),
90
- value: e.block.timezone,
91
- onChange: u[1] ||= (e) => B("timezone", e.target.value)
92
- }, [(n(), f(o, null, t(I, (e) => l("option", {
93
- key: e,
94
- value: e
95
- }, s(e), 9, T)), 64))], 42, w)]),
96
- _: 1
97
- }, 8, ["label"]),
98
- p(_, { label: a(x).countdown.display }, {
99
- default: r(() => [l("div", E, [(n(!0), f(o, null, t(z.value, (t) => (n(), c(S, {
100
- key: t.unit,
101
- "model-value": e.block[t.showKey],
102
- label: a(x).countdown[t.translationKey],
103
- "onUpdate:modelValue": (e) => B(t.showKey, e)
104
- }, null, 8, [
105
- "model-value",
106
- "label",
107
- "onUpdate:modelValue"
108
- ]))), 128))])]),
109
- _: 1
110
- }, 8, ["label"]),
111
- p(_, { label: a(x).countdown.separator }, {
112
- default: r(() => [p(v, {
113
- options: L,
114
- "model-value": e.block.separator,
115
- "onUpdate:modelValue": u[2] ||= (e) => B("separator", e)
116
- }, null, 8, ["model-value"])]),
117
- _: 1
118
- }, 8, ["label"]),
119
- p(_, { label: a(x).countdown.fontFamily }, {
120
- default: r(() => [l("select", {
121
- class: d(a(h)),
122
- value: e.block.fontFamily || "",
123
- onChange: u[3] ||= (e) => B("fontFamily", e.target.value || void 0)
124
- }, [l("option", O, s(a(x).countdown.inheritFont), 1), (n(!0), f(o, null, t(e.fontFamilies, (e) => (n(), f("option", {
125
- key: e.value,
126
- value: e.value
127
- }, s(e.label), 9, k))), 128))], 42, D)]),
128
- _: 1
129
- }, 8, ["label"]),
130
- l("div", A, [p(_, { label: a(x).countdown.digitFontSize }, {
131
- default: r(() => [p(y, {
132
- "model-value": e.block.digitFontSize,
133
- min: 12,
134
- max: 72,
135
- suffix: "px",
136
- "onUpdate:modelValue": u[4] ||= (e) => B("digitFontSize", e)
137
- }, null, 8, ["model-value"])]),
138
- _: 1
139
- }, 8, ["label"]), p(_, { label: a(x).countdown.labelFontSize }, {
140
- default: r(() => [p(y, {
141
- "model-value": e.block.labelFontSize,
142
- min: 8,
143
- max: 24,
144
- suffix: "px",
145
- "onUpdate:modelValue": u[5] ||= (e) => B("labelFontSize", e)
146
- }, null, 8, ["model-value"])]),
147
- _: 1
148
- }, 8, ["label"])]),
149
- l("div", j, [p(_, { label: a(x).countdown.digitColor }, {
150
- default: r(() => [p(g, {
151
- "model-value": e.block.digitColor,
152
- "onUpdate:modelValue": u[6] ||= (e) => B("digitColor", e)
153
- }, null, 8, ["model-value"])]),
154
- _: 1
155
- }, 8, ["label"]), p(_, { label: a(x).countdown.labelColor }, {
156
- default: r(() => [p(g, {
157
- "model-value": e.block.labelColor,
158
- "onUpdate:modelValue": u[7] ||= (e) => B("labelColor", e)
159
- }, null, 8, ["model-value"])]),
160
- _: 1
161
- }, 8, ["label"])]),
162
- p(_, { label: a(x).countdown.background }, {
163
- default: r(() => [p(g, {
164
- "model-value": e.block.backgroundColor,
165
- "onUpdate:modelValue": u[8] ||= (e) => B("backgroundColor", e)
166
- }, null, 8, ["model-value"])]),
167
- _: 1
168
- }, 8, ["label"]),
169
- p(_, { label: a(x).countdown.labels }, {
170
- default: r(() => [l("div", M, [(n(!0), f(o, null, t(z.value, (t) => (n(), f("input", {
171
- key: t.unit,
172
- type: "text",
173
- class: d(a(h)),
174
- value: e.block[t.labelKey],
175
- placeholder: a(x).countdown[t.translationKey],
176
- onInput: (e) => B(t.labelKey, e.target.value)
177
- }, null, 42, N))), 128))])]),
178
- _: 1
179
- }, 8, ["label"]),
180
- p(_, { label: a(x).countdown.expiry }, {
181
- default: r(() => [l("input", {
182
- type: "text",
183
- class: d(a(h)),
184
- value: e.block.expiredMessage,
185
- placeholder: a(x).countdown.expiredMessagePlaceholder,
186
- onInput: u[9] ||= (e) => B("expiredMessage", e.target.value)
187
- }, null, 42, P)]),
188
- _: 1
189
- }, 8, ["label"]),
190
- p(_, { label: a(x).countdown.expiredImageUrl }, {
191
- default: r(() => [l("input", {
192
- type: "url",
193
- class: d(a(h)),
194
- value: e.block.expiredImageUrl,
195
- placeholder: "https://...",
196
- onInput: u[10] ||= (e) => B("expiredImageUrl", e.target.value)
197
- }, null, 42, F)]),
198
- _: 1
199
- }, 8, ["label"]),
200
- p(S, {
201
- "model-value": e.block.hideOnExpiry,
202
- label: a(x).countdown.hideOnExpiry,
203
- class: "tpl:mb-3.5",
204
- "onUpdate:modelValue": u[11] ||= (e) => B("hideOnExpiry", e)
205
- }, null, 8, ["model-value", "label"])
206
- ], 64));
207
- }
208
- });
209
- //#endregion
210
- export { I as default };
211
-
212
- //# sourceMappingURL=CountdownToolbar-BtaD3d3-.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CountdownToolbar-BtaD3d3-.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n modelValue: boolean;\n label: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n <label\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n >\n <input\n type=\"checkbox\"\n class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n :checked=\"modelValue\"\n @change=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n \"\n />\n {{ label }}\n </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n modelValue: boolean;\n label: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n <label\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n >\n <input\n type=\"checkbox\"\n class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n :checked=\"modelValue\"\n @change=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n \"\n />\n {{ label }}\n </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@aswin.dev/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n block: CountdownBlock;\n fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n \"UTC\",\n \"America/New_York\",\n \"America/Chicago\",\n \"America/Denver\",\n \"America/Los_Angeles\",\n \"Europe/London\",\n \"Europe/Berlin\",\n \"Europe/Paris\",\n \"Europe/Moscow\",\n \"Asia/Dubai\",\n \"Asia/Kolkata\",\n \"Asia/Shanghai\",\n \"Asia/Tokyo\",\n \"Australia/Sydney\",\n \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n { value: \":\", label: \":\" },\n { value: \"-\", label: \"-\" },\n { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n UNITS.map((unit) => ({\n unit,\n showKey: `show${unit}` as const,\n labelKey: `label${unit}` as const,\n translationKey: unit.toLowerCase() as\n | \"days\"\n | \"hours\"\n | \"minutes\"\n | \"seconds\",\n })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n <FieldRow :label=\"t.countdown.targetDate\">\n <input\n type=\"datetime-local\"\n :class=\"inputClass\"\n :value=\"block.targetDate\"\n @input=\"\n updateField('targetDate', ($event.target as HTMLInputElement).value)\n \"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.timezone\">\n <select\n :class=\"inputClass\"\n :value=\"block.timezone\"\n @change=\"\n updateField('timezone', ($event.target as HTMLSelectElement).value)\n \"\n >\n <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n </select>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.display\">\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n <CheckboxItem\n v-for=\"item in unitItems\"\n :key=\"item.unit\"\n :model-value=\"block[item.showKey]\"\n :label=\"t.countdown[item.translationKey]\"\n @update:model-value=\"updateField(item.showKey, $event)\"\n />\n </div>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.separator\">\n <SlidingPillSelect\n :options=\"SEPARATORS\"\n :model-value=\"block.separator\"\n @update:model-value=\"updateField('separator', $event)\"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.fontFamily\">\n <select\n :class=\"inputClass\"\n :value=\"block.fontFamily || ''\"\n @change=\"\n updateField(\n 'fontFamily',\n ($event.target as HTMLSelectElement).value || undefined,\n )\n \"\n >\n <option value=\"\">{{ t.countdown.inheritFont }}</option>\n <option\n v-for=\"font in fontFamilies\"\n :key=\"font.value\"\n :value=\"font.value\"\n >\n {{ font.label }}\n </option>\n </select>\n </FieldRow>\n\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n <FieldRow :label=\"t.countdown.digitFontSize\">\n <NumberWithSuffix\n :model-value=\"block.digitFontSize\"\n :min=\"12\"\n :max=\"72\"\n suffix=\"px\"\n @update:model-value=\"updateField('digitFontSize', $event)\"\n />\n </FieldRow>\n <FieldRow :label=\"t.countdown.labelFontSize\">\n <NumberWithSuffix\n :model-value=\"block.labelFontSize\"\n :min=\"8\"\n :max=\"24\"\n suffix=\"px\"\n @update:model-value=\"updateField('labelFontSize', $event)\"\n />\n </FieldRow>\n </div>\n\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n <FieldRow :label=\"t.countdown.digitColor\">\n <ColorPicker\n :model-value=\"block.digitColor\"\n @update:model-value=\"updateField('digitColor', $event)\"\n />\n </FieldRow>\n <FieldRow :label=\"t.countdown.labelColor\">\n <ColorPicker\n :model-value=\"block.labelColor\"\n @update:model-value=\"updateField('labelColor', $event)\"\n />\n </FieldRow>\n </div>\n\n <FieldRow :label=\"t.countdown.background\">\n <ColorPicker\n :model-value=\"block.backgroundColor\"\n @update:model-value=\"updateField('backgroundColor', $event)\"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.labels\">\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n <input\n v-for=\"item in unitItems\"\n :key=\"item.unit\"\n type=\"text\"\n :class=\"inputClass\"\n :value=\"block[item.labelKey]\"\n :placeholder=\"t.countdown[item.translationKey]\"\n @input=\"\n updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n \"\n />\n </div>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.expiry\">\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"block.expiredMessage\"\n :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n @input=\"\n updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n \"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.expiredImageUrl\">\n <input\n type=\"url\"\n :class=\"inputClass\"\n :value=\"block.expiredImageUrl\"\n placeholder=\"https://...\"\n @input=\"\n updateField(\n 'expiredImageUrl',\n ($event.target as HTMLInputElement).value,\n )\n \"\n />\n </FieldRow>\n\n <CheckboxItem\n :model-value=\"block.hideOnExpiry\"\n :label=\"t.countdown.hideOnExpiry\"\n class=\"tpl:mb-3.5\"\n @update:model-value=\"updateField('hideOnExpiry', $event)\"\n />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@aswin.dev/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n block: CountdownBlock;\n fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n \"UTC\",\n \"America/New_York\",\n \"America/Chicago\",\n \"America/Denver\",\n \"America/Los_Angeles\",\n \"Europe/London\",\n \"Europe/Berlin\",\n \"Europe/Paris\",\n \"Europe/Moscow\",\n \"Asia/Dubai\",\n \"Asia/Kolkata\",\n \"Asia/Shanghai\",\n \"Asia/Tokyo\",\n \"Australia/Sydney\",\n \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n { value: \":\", label: \":\" },\n { value: \"-\", label: \"-\" },\n { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n UNITS.map((unit) => ({\n unit,\n showKey: `show${unit}` as const,\n labelKey: `label${unit}` as const,\n translationKey: unit.toLowerCase() as\n | \"days\"\n | \"hours\"\n | \"minutes\"\n | \"seconds\",\n })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n <FieldRow :label=\"t.countdown.targetDate\">\n <input\n type=\"datetime-local\"\n :class=\"inputClass\"\n :value=\"block.targetDate\"\n @input=\"\n updateField('targetDate', ($event.target as HTMLInputElement).value)\n \"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.timezone\">\n <select\n :class=\"inputClass\"\n :value=\"block.timezone\"\n @change=\"\n updateField('timezone', ($event.target as HTMLSelectElement).value)\n \"\n >\n <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n </select>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.display\">\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n <CheckboxItem\n v-for=\"item in unitItems\"\n :key=\"item.unit\"\n :model-value=\"block[item.showKey]\"\n :label=\"t.countdown[item.translationKey]\"\n @update:model-value=\"updateField(item.showKey, $event)\"\n />\n </div>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.separator\">\n <SlidingPillSelect\n :options=\"SEPARATORS\"\n :model-value=\"block.separator\"\n @update:model-value=\"updateField('separator', $event)\"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.fontFamily\">\n <select\n :class=\"inputClass\"\n :value=\"block.fontFamily || ''\"\n @change=\"\n updateField(\n 'fontFamily',\n ($event.target as HTMLSelectElement).value || undefined,\n )\n \"\n >\n <option value=\"\">{{ t.countdown.inheritFont }}</option>\n <option\n v-for=\"font in fontFamilies\"\n :key=\"font.value\"\n :value=\"font.value\"\n >\n {{ font.label }}\n </option>\n </select>\n </FieldRow>\n\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n <FieldRow :label=\"t.countdown.digitFontSize\">\n <NumberWithSuffix\n :model-value=\"block.digitFontSize\"\n :min=\"12\"\n :max=\"72\"\n suffix=\"px\"\n @update:model-value=\"updateField('digitFontSize', $event)\"\n />\n </FieldRow>\n <FieldRow :label=\"t.countdown.labelFontSize\">\n <NumberWithSuffix\n :model-value=\"block.labelFontSize\"\n :min=\"8\"\n :max=\"24\"\n suffix=\"px\"\n @update:model-value=\"updateField('labelFontSize', $event)\"\n />\n </FieldRow>\n </div>\n\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n <FieldRow :label=\"t.countdown.digitColor\">\n <ColorPicker\n :model-value=\"block.digitColor\"\n @update:model-value=\"updateField('digitColor', $event)\"\n />\n </FieldRow>\n <FieldRow :label=\"t.countdown.labelColor\">\n <ColorPicker\n :model-value=\"block.labelColor\"\n @update:model-value=\"updateField('labelColor', $event)\"\n />\n </FieldRow>\n </div>\n\n <FieldRow :label=\"t.countdown.background\">\n <ColorPicker\n :model-value=\"block.backgroundColor\"\n @update:model-value=\"updateField('backgroundColor', $event)\"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.labels\">\n <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n <input\n v-for=\"item in unitItems\"\n :key=\"item.unit\"\n type=\"text\"\n :class=\"inputClass\"\n :value=\"block[item.labelKey]\"\n :placeholder=\"t.countdown[item.translationKey]\"\n @input=\"\n updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n \"\n />\n </div>\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.expiry\">\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"block.expiredMessage\"\n :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n @input=\"\n updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n \"\n />\n </FieldRow>\n\n <FieldRow :label=\"t.countdown.expiredImageUrl\">\n <input\n type=\"url\"\n :class=\"inputClass\"\n :value=\"block.expiredImageUrl\"\n placeholder=\"https://...\"\n @input=\"\n updateField(\n 'expiredImageUrl',\n ($event.target as HTMLInputElement).value,\n )\n \"\n />\n </FieldRow>\n\n <CheckboxItem\n :model-value=\"block.hideOnExpiry\"\n :label=\"t.countdown.hideOnExpiry\"\n class=\"tpl:mb-3.5\"\n @update:model-value=\"updateField('hideOnExpiry', $event)\"\n />\n</template>\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"NumberWithSuffix-DfVBnsgc.js","names":["css","hueCss","saturationCss"],"sources":["../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../../src/components/ColorPicker.vue","../../../src/components/ColorPicker.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue"],"sourcesContent":["// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/**\n * Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n */\nconst angleUnits = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI * 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n if (hex[0] === '#')\n hex = hex.substring(1);\n if (hex.length < 6) {\n return {\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n };\n }\n return {\n r: parseInt(hex.substring(0, 2), 16),\n g: parseInt(hex.substring(2, 4), 16),\n b: parseInt(hex.substring(4, 6), 16),\n a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n };\n};\nexport const parseHue = (value, unit = 'deg') => {\n return Number(value) * (angleUnits[unit] || 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n const matcher = /hsla?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(hslString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n s *= (l < 50 ? l : 100 - l) / 100;\n return {\n h: h,\n s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,\n v: l + s,\n a\n };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n const hh = ((200 - s) * v) / 100;\n return {\n h: round(h),\n s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: round(hh / 2),\n a: round(a, 2)\n };\n};\nexport const hsvaToHsvString = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n const { h, s, v, a } = roundHsva(hsva);\n return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n const { h, s, l } = hsvaToHsla(hsva);\n return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n const { h, s, l, a } = hsvaToHsla(hsva);\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n h = (h / 360) * 6;\n s = s / 100;\n v = v / 100;\n const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n return {\n r: round([v, c, b, b, d, v][module] * 255),\n g: round([d, v, v, c, b, b][module] * 255),\n b: round([b, b, d, v, v, c][module] * 255),\n a: round(a, 2)\n };\n};\nexport const hsvaToRgbString = (hsva) => {\n const { r, g, b } = hsvaToRgba(hsva);\n return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n const { r, g, b, a } = hsvaToRgba(hsva);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n const matcher = /hsva?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(hsvString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return roundHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n v: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n const matcher = /rgba?\\(?\\s*(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(rgbaString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n const hex = number.toString(16);\n return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n const alphaHex = a < 1 ? format(round(a * 255)) : '';\n return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n // prettier-ignore\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh)),\n s: round(max ? (delta / max) * 100 : 0),\n v: round((max / 255) * 100),\n a\n };\n};\nexport const roundHsva = (hsva) => ({\n h: round(hsva.h),\n s: round(hsva.s),\n v: round(hsva.v),\n a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n if (first === second)\n return true;\n for (const prop in first) {\n // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n // there is or not), and then as a type TS can iterate over.\n if (first[prop] !==\n second[prop])\n return false;\n }\n return true;\n};\nexport const equalColorString = (first, second) => {\n return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n if (first.toLowerCase() === second.toLowerCase())\n return true;\n // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n let template = cache[html];\n if (!template) {\n template = document.createElement('template');\n template.innerHTML = html;\n cache[html] = template;\n }\n return template;\n};\nexport const fire = (target, type, detail) => {\n target.dispatchEvent(new CustomEvent(type, {\n bubbles: true,\n detail\n }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n if (hasTouched && !isTouch(event))\n return false;\n if (!hasTouched)\n hasTouched = isTouch(event);\n return true;\n};\nconst pointerMove = (target, event) => {\n const pointer = isTouch(event) ? event.touches[0] : event;\n const rect = target.el.getBoundingClientRect();\n fire(target.el, 'move', target.getMove({\n x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n }));\n};\nconst keyMove = (target, event) => {\n // We use `keyCode` instead of `key` to reduce the size of the library.\n const keyCode = event.keyCode;\n // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)\n return;\n // Do not scroll page by keys when color picker element has focus.\n event.preventDefault();\n // Send relative offset to the parent component.\n fire(target.el, 'move', target.getMove({\n x: keyCode === 39 // Arrow Right\n ? 0.01\n : keyCode === 37 // Arrow Left\n ? -0.01\n : keyCode === 34 // Page Down\n ? 0.05\n : keyCode === 33 // Page Up\n ? -0.05\n : keyCode === 35 // End\n ? 1\n : keyCode === 36 // Home\n ? -1\n : 0,\n y: keyCode === 40 // Arrow down\n ? 0.01\n : keyCode === 38 // Arrow Up\n ? -0.01\n : 0\n }, true));\n};\nexport class Slider {\n constructor(root, part, aria, xy) {\n const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n root.appendChild(template.content.cloneNode(true));\n const el = root.querySelector(`[part=${part}]`);\n el.addEventListener('mousedown', this);\n el.addEventListener('touchstart', this);\n el.addEventListener('keydown', this);\n this.el = el;\n this.xy = xy;\n this.nodes = [el.firstChild, el];\n }\n set dragging(state) {\n const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n }\n handleEvent(event) {\n switch (event.type) {\n case 'mousedown':\n case 'touchstart':\n event.preventDefault();\n // event.button is 0 in mousedown for left button activation\n if (!isValid(event) || (!hasTouched && event.button != 0))\n return;\n this.el.focus();\n pointerMove(this, event);\n this.dragging = true;\n break;\n case 'mousemove':\n case 'touchmove':\n event.preventDefault();\n pointerMove(this, event);\n break;\n case 'mouseup':\n case 'touchend':\n this.dragging = false;\n break;\n case 'keydown':\n keyMove(this, event);\n break;\n }\n }\n style(styles) {\n styles.forEach((style, i) => {\n for (const p in style) {\n this.nodes[i].style.setProperty(p, style[p]);\n }\n });\n }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n constructor(root) {\n super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n }\n update({ h }) {\n this.h = h;\n this.style([\n {\n left: `${(h / 360) * 100}%`,\n color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuenow', `${round(h)}`);\n }\n getMove(offset, key) {\n // Hue measured in degrees of the color circle ranging from 0 to 360\n return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n constructor(root) {\n super(root, 'saturation', 'aria-label=\"Color\"', true);\n }\n update(hsva) {\n this.hsva = hsva;\n this.style([\n {\n top: `${100 - hsva.v}%`,\n left: `${hsva.s}%`,\n color: hsvaToHslString(hsva)\n },\n {\n 'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n }\n getMove(offset, key) {\n // Saturation and brightness always fit into [0, 100] range\n return {\n s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n };\n }\n}\n//# sourceMappingURL=saturation.js.map","export default `: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)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[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}`;\n//# sourceMappingURL=hue.js.map","export default `[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//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n static get observedAttributes() {\n return ['color'];\n }\n get [$css]() {\n return [css, hueCss, saturationCss];\n }\n get [$sliders]() {\n return [Saturation, Hue];\n }\n get color() {\n return this[$color];\n }\n set color(newColor) {\n if (!this[$isSame](newColor)) {\n const newHsva = this.colorModel.toHsva(newColor);\n this[$update](newHsva);\n this[$color] = newColor;\n }\n }\n constructor() {\n super();\n const template = tpl(`<style>${this[$css].join('')}</style>`);\n const root = this.attachShadow({ mode: 'open' });\n root.appendChild(template.content.cloneNode(true));\n root.addEventListener('move', this);\n this[$parts] = this[$sliders].map((slider) => new slider(root));\n }\n connectedCallback() {\n // A user may set a property on an _instance_ of an element,\n // before its prototype has been connected to this class.\n // If so, we need to run it through the proper class setter.\n if (this.hasOwnProperty('color')) {\n const value = this.color;\n delete this['color'];\n this.color = value;\n }\n else if (!this.color) {\n this.color = this.colorModel.defaultColor;\n }\n }\n attributeChangedCallback(_attr, _oldVal, newVal) {\n const color = this.colorModel.fromAttr(newVal);\n if (!this[$isSame](color)) {\n this.color = color;\n }\n }\n handleEvent(event) {\n // Merge the current HSV color object with updated params.\n const oldHsva = this[$hsva];\n const newHsva = { ...oldHsva, ...event.detail };\n this[$update](newHsva);\n let newColor;\n if (!equalColorObjects(newHsva, oldHsva) &&\n !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n this[$color] = newColor;\n fire(this, 'color-changed', { value: newColor });\n }\n }\n [$isSame](color) {\n return this.color && this.colorModel.equal(color, this.color);\n }\n [$update](hsva) {\n this[$hsva] = hsva;\n this[$parts].forEach((part) => part.update(hsva));\n }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n defaultColor: '#000',\n toHsva: hexToHsva,\n fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n equal: equalHex,\n fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n get colorModel() {\n return colorModel;\n }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/**\n * A color picker custom element that uses HEX format.\n *\n * @element hex-color-picker\n *\n * @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n *\n * @fires color-changed - Event fired when color property changes.\n *\n * @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n */\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" | \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n '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)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n 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\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" | \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n '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)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n 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\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n 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\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n 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\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,11,12],"mappings":"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"}