@orchidui/dashboard 1.109.0 → 1.110.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +679 -675
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var pt = Object.defineProperty;
2
- var gt = (n, V, r) => V in n ? pt(n, V, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[V] = r;
3
- var We = (n, V, r) => gt(n, typeof V != "symbol" ? V + "" : V, r);
4
- import { ref as v, computed as $e, createBlock as N, openBlock as m, unref as w, normalizeClass as Q, withCtx as W, createVNode as L, createElementBlock as E, createSlots as vt, renderSlot as je, normalizeStyle as te, createCommentVNode as D, onMounted as Je, watch as fe, createElementVNode as h, Teleport as mt, Fragment as ge, createTextVNode as ve, toDisplayString as Pe, renderList as Ke, withKeys as ot, inject as Re, reactive as _e, provide as Be, nextTick as ft, withDirectives as ht, vShow as yt, defineAsyncComponent as it } from "vue";
5
- import { Q as Y, a as bt } from "./QuillEditor-BOsliE6V.js";
6
- import { BaseInput as st, Dropdown as rt, Input as we, Icon as A, Modal as xt, Select as Ze, Slider as Ae } from "@orchidui/core";
7
- import { rgbToHsl as et, rgb2Hex as tt, rgbaToHex8 as kt, hsl2Hex as lt, hexToRgb as ze, rgbToHue as Qe, hslToRgb as at, hex8ToRgba as $t, parseRgba as wt, parseRgb as St } from "./Dashboard/ColorPicker/components/converters.js";
2
+ var gt = (o, V, u) => V in o ? pt(o, V, { enumerable: !0, configurable: !0, writable: !0, value: u }) : o[V] = u;
3
+ var ze = (o, V, u) => gt(o, typeof V != "symbol" ? V + "" : V, u);
4
+ import { ref as v, computed as ke, createBlock as N, openBlock as m, unref as w, normalizeClass as Q, withCtx as Y, createVNode as L, createElementBlock as R, createSlots as vt, renderSlot as Ke, normalizeStyle as le, createCommentVNode as D, onMounted as _e, watch as ye, createElementVNode as y, Teleport as mt, Fragment as ce, createTextVNode as pe, toDisplayString as Pe, renderList as Ze, withKeys as it, inject as Re, reactive as et, provide as Ee, nextTick as ft, withDirectives as ht, vShow as yt, defineAsyncComponent as st } from "vue";
5
+ import { Q as G, a as bt } from "./QuillEditor-BOsliE6V.js";
6
+ import { BaseInput as rt, Dropdown as ut, Input as $e, Icon as A, Modal as xt, Select as Je, Slider as Ae } from "@orchidui/core";
7
+ import { rgbToHsl as tt, rgb2Hex as lt, rgbaToHex8 as kt, hsl2Hex as at, hexToRgb as je, rgbToHue as Qe, hslToRgb as nt, hex8ToRgba as $t, parseRgba as wt, parseRgb as St } from "./Dashboard/ColorPicker/components/converters.js";
8
8
  import { PieChart as Ct } from "./Dashboard/Charts/PieChart/OcPieChart.js";
9
9
  import { LineChart as Ml } from "./Dashboard/Charts/LineChart/OcLineChart.js";
10
10
  import { BarChart as Al } from "./Dashboard/Charts/BarChart/OcBarChart.js";
11
- import { BarRaceChart as Xl } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
11
+ import { BarRaceChart as Nl } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
12
12
  import { _ as ql } from "./OcCard-C-0VY9wF.js";
13
13
  import { OcOverviewPieChart as Gl } from "./Dashboard/Charts/OverviewPieChart/OcOverviewPieChart.js";
14
14
  import { OverviewMonthlyBarChart as Wl } from "./Dashboard/Charts/OverviewMonthlyBarChart/OcOverviewMonthlyBarChart.js";
@@ -43,85 +43,85 @@ const It = { key: 1 }, Vt = {
43
43
  /** New color value selected. Payload: hex or gradient string. */
44
44
  "update:model-value": []
45
45
  },
46
- setup(n, { emit: V }) {
47
- const r = n, y = V, d = v(!1), f = v(r.modelValue), C = (O) => {
48
- O && (f.value = O, y("update:model-value", O));
49
- }, p = $e(() => r.variant === "gradient" ? {
46
+ setup(o, { emit: V }) {
47
+ const u = o, b = V, d = v(!1), h = v(u.modelValue), C = (O) => {
48
+ O && (h.value = O, b("update:model-value", O));
49
+ }, p = ke(() => u.variant === "gradient" ? {
50
50
  class: "w-[20px] h-[20px] hide-svg-icon",
51
51
  style: {
52
- background: f.value
52
+ background: h.value
53
53
  }
54
54
  } : {
55
55
  style: {
56
- color: f.value
56
+ color: h.value
57
57
  }
58
- }), a = v(), H = v([]), Z = () => {
59
- H.value.length > 8 && (H.value = H.value.filter((O, X) => X < 8)), localStorage.setItem("ck-cp-local-color-list", JSON.stringify(H.value));
58
+ }), n = v(), H = v([]), Z = () => {
59
+ H.value.length > 8 && (H.value = H.value.filter((O, P) => P < 8)), localStorage.setItem("ck-cp-local-color-list", JSON.stringify(H.value));
60
60
  };
61
61
  let M = localStorage.getItem("ck-cp-local-color-list");
62
62
  M && (H.value = [...new Set(JSON.parse(M))], Z());
63
63
  const T = (O) => {
64
- if (!O && f.value)
65
- if (H.value.find((U) => U === f.value))
64
+ if (!O && h.value)
65
+ if (H.value.find((U) => U === h.value))
66
66
  H.value = [
67
- f.value,
68
- ...H.value.filter((U) => U !== f.value)
67
+ h.value,
68
+ ...H.value.filter((U) => U !== h.value)
69
69
  ], Z();
70
70
  else {
71
71
  H.value.length >= 9 && H.value.pop();
72
- let U = f.value;
72
+ let U = h.value;
73
73
  H.value.unshift(U), Z();
74
74
  }
75
- }, B = v(!1), z = (O) => {
76
- f.value = O, y("update:model-value", O), d.value = !1;
75
+ }, B = v(!1), W = (O) => {
76
+ h.value = O, b("update:model-value", O), d.value = !1;
77
77
  };
78
- return (O, X) => (m(), N(w(st), {
79
- class: Q(n.hideInputColor ? "w-[40px]" : ""),
80
- onClick: X[1] || (X[1] = () => {
78
+ return (O, P) => (m(), N(w(rt), {
79
+ class: Q(o.hideInputColor ? "w-[40px]" : ""),
80
+ onClick: P[1] || (P[1] = () => {
81
81
  var U;
82
- return (U = a.value) == null ? void 0 : U.toggleDropdown();
82
+ return (U = n.value) == null ? void 0 : U.toggleDropdown();
83
83
  })
84
84
  }, {
85
- default: W(() => [
86
- L(w(rt), {
85
+ default: Y(() => [
86
+ L(w(ut), {
87
87
  ref_key: "dropdownRef",
88
- ref: a,
88
+ ref: n,
89
89
  modelValue: d.value,
90
90
  "onUpdate:modelValue": [
91
- X[0] || (X[0] = (U) => d.value = U),
91
+ P[0] || (P[0] = (U) => d.value = U),
92
92
  T
93
93
  ],
94
94
  "max-menu-height": 800,
95
- placement: n.placement,
95
+ placement: o.placement,
96
96
  "popper-options": {
97
97
  strategy: "fixed"
98
98
  }
99
99
  }, {
100
- menu: W(() => [
100
+ menu: Y(() => [
101
101
  B.value ? D("", !0) : (m(), N(w(xl), {
102
102
  key: 0,
103
- variant: n.variant,
104
- "show-alpha": !n.hideOpacity,
105
- type: n.hideOpacity ? "HEX" : "HEX8",
106
- "model-value": n.modelValue,
103
+ variant: o.variant,
104
+ "show-alpha": !o.hideOpacity,
105
+ type: o.hideOpacity ? "HEX" : "HEX8",
106
+ "model-value": o.modelValue,
107
107
  "last-used-colors": H.value,
108
- "preset-colors": n.presetColors,
108
+ "preset-colors": o.presetColors,
109
109
  "onUpdate:modelValue": C,
110
- onLastUsedPick: z
110
+ onLastUsedPick: W
111
111
  }, null, 8, ["variant", "show-alpha", "type", "model-value", "last-used-colors", "preset-colors"]))
112
112
  ]),
113
- default: W(() => [
114
- n.hideInputColor ? (m(), E("div", It, [
115
- je(O.$slots, "picker-icon", {}, () => [
113
+ default: Y(() => [
114
+ o.hideInputColor ? (m(), R("div", It, [
115
+ Ke(O.$slots, "picker-icon", {}, () => [
116
116
  L(w(A), {
117
117
  class: "cursor-pointer",
118
- style: te(`color: ${f.value}`),
118
+ style: le(`color: ${h.value}`),
119
119
  name: "drop"
120
120
  }, null, 8, ["style"])
121
121
  ])
122
- ])) : (m(), N(w(we), {
122
+ ])) : (m(), N(w($e), {
123
123
  key: 0,
124
- "model-value": f.value,
124
+ "model-value": h.value,
125
125
  icon: "drop",
126
126
  "icon-props": p.value,
127
127
  placeholder: "",
@@ -129,8 +129,8 @@ const It = { key: 1 }, Vt = {
129
129
  }, vt({ _: 2 }, [
130
130
  O.$slots.leading ? {
131
131
  name: "leading",
132
- fn: W(() => [
133
- je(O.$slots, "leading")
132
+ fn: Y(() => [
133
+ Ke(O.$slots, "leading")
134
134
  ]),
135
135
  key: "0"
136
136
  } : void 0
@@ -142,10 +142,10 @@ const It = { key: 1 }, Vt = {
142
142
  _: 3
143
143
  }, 8, ["class"]));
144
144
  }
145
- }, Tt = ["id"], Lt = { class: "flex items-center gap-x-3 px-5" }, Bt = { class: "flex items-center gap-x-5 cursor-pointer" }, Rt = { class: "flex flex-col py-2 overflow-hidden" }, Et = ["onClick"], Ot = { class: "flex gap-x-3 items-center px-5" }, Ut = { class: "flex items-center gap-x-3 px-5" }, Dt = { class: "flex gap-x-3 items-center px-5" }, Ht = { class: "flex gap-x-3 items-center px-5" }, Mt = { class: "flex items-center" }, Qt = { class: "grid cursor-pointer px-5" }, At = {
145
+ }, Tt = ["id"], Lt = { class: "flex items-center gap-x-3 px-5" }, Bt = { class: "flex items-center gap-x-5 cursor-pointer" }, Et = { class: "flex flex-col py-2 overflow-hidden" }, Rt = ["onClick"], Ot = { class: "flex gap-x-3 items-center px-5" }, Ut = { class: "flex items-center gap-x-3 px-5" }, Dt = { class: "flex gap-x-3 items-center px-5" }, Ht = { class: "flex gap-x-3 items-center px-5" }, Mt = { class: "flex items-center" }, Qt = { class: "grid cursor-pointer px-5" }, At = {
146
146
  key: 5,
147
147
  class: "flex gap-x-3 items-center px-5"
148
- }, Pt = { class: "flex" }, Xt = { class: "mt-1 mx-2 cursor-pointer" }, Rl = {
148
+ }, Pt = { class: "flex" }, Nt = { class: "mt-1 mx-2 cursor-pointer" }, El = {
149
149
  __name: "OcTextEditor",
150
150
  props: {
151
151
  /**
@@ -188,7 +188,7 @@ const It = { key: 1 }, Vt = {
188
188
  },
189
189
  variant: {
190
190
  type: String,
191
- validator: (n) => ["default", "text-only"].includes(n),
191
+ validator: (o) => ["default", "text-only"].includes(o),
192
192
  default: "default"
193
193
  },
194
194
  placeholder: {
@@ -198,8 +198,8 @@ const It = { key: 1 }, Vt = {
198
198
  isCustomImageUpload: Boolean
199
199
  },
200
200
  emits: ["update:modelValue", "update:image", "uploadImage"],
201
- setup(n, { emit: V }) {
202
- const r = n, y = V, d = {
201
+ setup(o, { emit: V }) {
202
+ const u = o, b = V, d = {
203
203
  default: [
204
204
  "changes",
205
205
  "font-size",
@@ -212,244 +212,248 @@ const It = { key: 1 }, Vt = {
212
212
  "alignment"
213
213
  ],
214
214
  "text-only": ["changes", "font-size", "font-style", "link", "quote", "list", "alignment"]
215
- }, f = $e(() => d[r.variant]), C = Y.import("attributors/style/size");
216
- C.whitelist = r.fontSizes.map((u) => u.value), Y.register(C, !0);
217
- const p = Y.import("attributors/style/align");
218
- Y.register(p, !0);
219
- const a = Y.import("attributors/style/background");
220
- Y.register(a, !0);
221
- const H = Y.import("attributors/style/color");
222
- Y.register(H, !0);
223
- const Z = Y.import("attributors/style/direction");
224
- Y.register(Z, !0);
225
- const M = Y.import("attributors/style/font");
226
- Y.register(M, !0);
227
- const T = Y.import("blots/block/embed");
215
+ }, h = ke(() => d[u.variant]), C = G.import("attributors/style/size");
216
+ C.whitelist = u.fontSizes.map((r) => r.value), G.register(C, !0);
217
+ const p = G.import("attributors/style/align");
218
+ G.register(p, !0);
219
+ const n = G.import("attributors/style/background");
220
+ G.register(n, !0);
221
+ const H = G.import("attributors/style/color");
222
+ G.register(H, !0);
223
+ const Z = G.import("attributors/style/direction");
224
+ G.register(Z, !0);
225
+ const M = G.import("attributors/style/font");
226
+ G.register(M, !0);
227
+ const T = G.import("blots/block/embed");
228
228
  class B extends T {
229
229
  }
230
- We(B, "blotName", "divider"), We(B, "tagName", "hr"), Y.register(B);
231
- const z = v(
230
+ ze(B, "blotName", "divider"), ze(B, "tagName", "hr"), G.register(B);
231
+ const W = v(
232
232
  Math.random().toString(36).replace(/[^a-zA-Z]+/g, "")
233
- ), O = v(!1), X = v(!1), U = v(!1), le = v(!1), J = v(!1), j = v(!1), R = v(!1), q = v(""), ae = v(""), ee = v(""), x = v(), Se = v(!1), ue = v(r.image), ie = (u) => {
234
- O.value = x.value.getQuill().history.stack.undo.length > 0, X.value = x.value.getQuill().history.stack.redo.length > 0, U.value = x.value.getQuill().getFormat().bold, le.value = x.value.getQuill().getFormat().italic, J.value = x.value.getQuill().getFormat().underline, R.value = x.value.getQuill().getFormat().blockquote, ae.value = x.value.getQuill().getFormat().list, ee.value = x.value.getQuill().getFormat().align;
235
- let o = document.createElement("div");
236
- o.innerHTML = u, Se.value && (o.innerText ? y("update:modelValue", u || "") : y("update:modelValue", ""), o.remove());
237
- }, Xe = () => {
233
+ ), O = v(!1), P = v(!1), U = v(!1), ae = v(!1), J = v(!1), j = v(!1), E = v(!1), X = v(""), ne = v(""), _ = v(""), x = v(), we = v(!1), re = v(u.image), ge = (r) => r.querySelector("img, iframe, video, hr, table"), Ne = (r) => {
234
+ var F;
235
+ const a = document.createElement("div");
236
+ a.innerHTML = r;
237
+ const f = !((F = a.innerText) != null && F.trim()) && !ge(a);
238
+ return a.remove(), f;
239
+ }, be = (r) => {
240
+ O.value = x.value.getQuill().history.stack.undo.length > 0, P.value = x.value.getQuill().history.stack.redo.length > 0, U.value = x.value.getQuill().getFormat().bold, ae.value = x.value.getQuill().getFormat().italic, J.value = x.value.getQuill().getFormat().underline, E.value = x.value.getQuill().getFormat().blockquote, ne.value = x.value.getQuill().getFormat().list, _.value = x.value.getQuill().getFormat().align, we.value && (Ne(r) ? b("update:modelValue", "") : b("update:modelValue", r || ""));
241
+ }, Oe = () => {
238
242
  if (x.value.getQuill().getSelection(!0)) {
239
- const o = x.value.getQuill().getSelection(!0);
240
- x.value.getQuill().insertText(o.index, `
241
- `, Y.sources.USER), x.value.getQuill().insertEmbed(o.index + 1, "divider", !0, Y.sources.USER), x.value.getQuill().setSelection(o.index + 2, Y.sources.SILENT);
243
+ const a = x.value.getQuill().getSelection(!0);
244
+ x.value.getQuill().insertText(a.index, `
245
+ `, G.sources.USER), x.value.getQuill().insertEmbed(a.index + 1, "divider", !0, G.sources.USER), x.value.getQuill().setSelection(a.index + 2, G.sources.SILENT);
242
246
  }
243
- }, Ee = () => {
244
- x.value.getQuill().history.undo(), ie(r.modelValue);
245
- }, Oe = () => {
246
- x.value.getQuill().history.redo(), ie(r.modelValue);
247
+ }, Se = () => {
248
+ x.value.getQuill().history.undo(), be(u.modelValue);
249
+ }, oe = () => {
250
+ x.value.getQuill().history.redo(), be(u.modelValue);
247
251
  }, Ce = () => {
248
- var u;
249
- x.value.getQuill().format("bold", !U.value), (u = x.value.getQuill().getSelection()) != null && u.length || (U.value = !U.value);
250
- }, ne = () => {
251
- var u;
252
- x.value.getQuill().format("italic", !le.value), (u = x.value.getQuill().getSelection()) != null && u.length || (le.value = !le.value);
253
- }, Ie = () => {
254
- var u;
255
- x.value.getQuill().format("underline", !J.value), (u = x.value.getQuill().getSelection()) != null && u.length || (J.value = !J.value);
256
- }, Ue = (u) => {
257
- x.value.getQuill().format("size", u), q.value = u, j.value = !1;
258
- }, me = () => {
259
- const u = x.value.getQuill().getSelection();
260
- u && u.length > 0 && x.value.getQuill().theme.tooltip.edit();
261
- }, Ne = () => {
262
- x.value.getQuill().format("blockquote", !R.value);
263
- }, oe = (u) => {
264
- const o = x.value.getQuill().getSelection();
265
- o && (x.value.getQuill().clipboard.dangerouslyPasteHTML(o.index, `<img src="${u}" />`), ue.value = u, y("update:image", ue.value));
252
+ var r;
253
+ x.value.getQuill().format("bold", !U.value), (r = x.value.getQuill().getSelection()) != null && r.length || (U.value = !U.value);
254
+ }, Xe = () => {
255
+ var r;
256
+ x.value.getQuill().format("italic", !ae.value), (r = x.value.getQuill().getSelection()) != null && r.length || (ae.value = !ae.value);
257
+ }, ve = () => {
258
+ var r;
259
+ x.value.getQuill().format("underline", !J.value), (r = x.value.getQuill().getSelection()) != null && r.length || (J.value = !J.value);
260
+ }, Ue = (r) => {
261
+ x.value.getQuill().format("size", r), X.value = r, j.value = !1;
262
+ }, ie = () => {
263
+ const r = x.value.getQuill().getSelection();
264
+ r && r.length > 0 && x.value.getQuill().theme.tooltip.edit();
266
265
  }, De = () => {
267
- if (x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1), r.isCustomImageUpload) {
266
+ x.value.getQuill().format("blockquote", !E.value);
267
+ }, qe = (r) => {
268
+ const a = x.value.getQuill().getSelection();
269
+ a && (x.value.getQuill().clipboard.dangerouslyPasteHTML(a.index, `<img src="${r}" />`), re.value = r, b("update:image", re.value));
270
+ }, q = () => {
271
+ if (x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1), u.isCustomImageUpload) {
268
272
  if (!x.value.getQuill().getSelection()) return;
269
- y("upload-image", x.value);
273
+ b("upload-image", x.value);
270
274
  return;
271
275
  }
272
- const u = document.createElement("input");
273
- u.type = "file", u.accept = "jpg,.jpeg,.png,.webp,.gif", u.onchange = () => {
274
- const o = u.files[0], b = new FileReader();
275
- b.onload = () => oe(b.result), b.readAsDataURL(o);
276
- }, u.click();
277
- }, He = (u) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(u), F = (u) => {
276
+ const r = document.createElement("input");
277
+ r.type = "file", r.accept = "jpg,.jpeg,.png,.webp,.gif", r.onchange = () => {
278
+ const a = r.files[0], f = new FileReader();
279
+ f.onload = () => qe(f.result), f.readAsDataURL(a);
280
+ }, r.click();
281
+ }, K = (r) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(r), He = (r) => {
278
282
  setTimeout(() => {
279
- var b;
280
- if (u) {
281
- const P = x.value.getHTML(), se = document.createElement("div");
282
- se.innerHTML = P;
283
- let xe = se.getElementsByTagName("img");
284
- if (xe && xe.length > 0)
285
- for (let pe = 0; pe < xe.length; pe++) {
286
- const ke = (b = xe[pe]) == null ? void 0 : b.getAttribute("src");
287
- He(ke) && y("update:image", ke);
283
+ var f;
284
+ if (r) {
285
+ const F = x.value.getHTML(), te = document.createElement("div");
286
+ te.innerHTML = F;
287
+ let de = te.getElementsByTagName("img");
288
+ if (de && de.length > 0)
289
+ for (let Be = 0; Be < de.length; Be++) {
290
+ const t = (f = de[Be]) == null ? void 0 : f.getAttribute("src");
291
+ K(t) && b("update:image", t);
288
292
  }
289
293
  }
290
294
  }, 100);
291
- const { items: o } = u.clipboardData;
292
- o.length && o[0].getAsString((b) => {
293
- He(b) && (x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1));
295
+ const { items: a } = r.clipboardData;
296
+ a.length && a[0].getAsString((f) => {
297
+ K(f) && (x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1));
294
298
  });
295
- }, _ = () => {
299
+ }, Fe = () => {
296
300
  x.value.getQuill().theme.tooltip.edit("video");
297
- }, Ve = (u) => {
298
- x.value.getQuill().format("list", u), ae.value = u;
299
- }, he = (u = void 0) => {
300
- x.value.getQuill().format("align", u), ee.value = u;
301
- }, de = v(""), qe = () => {
302
- x.value.getQuill().format("color", de.value);
301
+ }, Ie = (r) => {
302
+ x.value.getQuill().format("list", r), ne.value = r;
303
+ }, xe = (r = void 0) => {
304
+ x.value.getQuill().format("align", r), _.value = r;
305
+ }, ue = v(""), me = () => {
306
+ x.value.getQuill().format("color", ue.value);
303
307
  };
304
- Je(() => {
305
- Ue(r.initialFontSize || r.fontSizes[0].value), Se.value = !0;
308
+ _e(() => {
309
+ Ue(u.initialFontSize || u.fontSizes[0].value), we.value = !0;
306
310
  });
307
- const ye = v(100), ce = v(!1), Te = (u) => {
308
- var b, P;
309
- ye.value = u;
310
- const o = (b = window.getSelection()) == null ? void 0 : b.focusNode;
311
- o && o.nodeName !== "#text" && (x.value.getQuill().format("width", `${ye.value}%`), (P = o == null ? void 0 : o.querySelector("img")) == null || P.setAttribute("style", "margin:auto;display:block;"));
312
- }, be = (u = "left") => {
313
- var b, P;
314
- const o = (b = window.getSelection()) == null ? void 0 : b.focusNode;
315
- if (o && o.nodeName !== "#text") {
316
- let se = "float:left";
317
- u == "center" ? se = "" : u == "right" && (se = "float:right"), (P = o == null ? void 0 : o.querySelector("img")) == null || P.setAttribute("style", `margin:auto;display:block;${se}`);
311
+ const fe = v(100), Ve = v(!1), Me = (r) => {
312
+ var f, F;
313
+ fe.value = r;
314
+ const a = (f = window.getSelection()) == null ? void 0 : f.focusNode;
315
+ a && a.nodeName !== "#text" && (x.value.getQuill().format("width", `${fe.value}%`), (F = a == null ? void 0 : a.querySelector("img")) == null || F.setAttribute("style", "margin:auto;display:block;"));
316
+ }, ee = (r = "left") => {
317
+ var f, F;
318
+ const a = (f = window.getSelection()) == null ? void 0 : f.focusNode;
319
+ if (a && a.nodeName !== "#text") {
320
+ let te = "float:left";
321
+ r == "center" ? te = "" : r == "right" && (te = "float:right"), (F = a == null ? void 0 : a.querySelector("img")) == null || F.setAttribute("style", `margin:auto;display:block;${te}`);
318
322
  }
319
- }, Me = () => {
320
- var b, P;
321
- const u = (b = window.getSelection()) == null ? void 0 : b.focusNode, o = (u == null ? void 0 : u.nodeType) === Node.ELEMENT_NODE ? u == null ? void 0 : u.innerHTML : (P = u == null ? void 0 : u.parentElement) == null ? void 0 : P.innerHTML;
322
- ce.value = typeof o == "string" && (o == null ? void 0 : o.includes("<img"));
323
- }, K = v(!1), G = v(3), Le = v(3), Fe = $e(() => {
324
- let u = [];
325
- for (let o = 1; o < 30; o++)
326
- u.push({
327
- label: o.toString(),
328
- value: o.toString()
323
+ }, z = () => {
324
+ var f, F;
325
+ const r = (f = window.getSelection()) == null ? void 0 : f.focusNode, a = (r == null ? void 0 : r.nodeType) === Node.ELEMENT_NODE ? r == null ? void 0 : r.innerHTML : (F = r == null ? void 0 : r.parentElement) == null ? void 0 : F.innerHTML;
326
+ Ve.value = typeof a == "string" && (a == null ? void 0 : a.includes("<img"));
327
+ }, he = v(!1), Te = v(3), Le = v(3), Ge = ke(() => {
328
+ let r = [];
329
+ for (let a = 1; a < 30; a++)
330
+ r.push({
331
+ label: a.toString(),
332
+ value: a.toString()
329
333
  });
330
- return u;
331
- }), Ge = $e(() => {
332
- let u = [];
333
- for (let o = 1; o < 12; o++)
334
- u.push({
335
- label: o.toString(),
336
- value: o.toString()
334
+ return r;
335
+ }), Ye = ke(() => {
336
+ let r = [];
337
+ for (let a = 1; a < 12; a++)
338
+ r.push({
339
+ label: a.toString(),
340
+ value: a.toString()
337
341
  });
338
- return u;
339
- }), Ye = () => {
340
- let u = x.value.getQuill().getModule("better-table");
341
- u == null || u.insertTable(parseInt(G.value), parseInt(Le.value)), K.value = !1;
342
+ return r;
343
+ }), We = () => {
344
+ let r = x.value.getQuill().getModule("better-table");
345
+ r == null || r.insertTable(parseInt(Te.value), parseInt(Le.value)), he.value = !1;
342
346
  };
343
- return fe(
344
- () => r.modelValue,
345
- (u) => {
346
- u || x.value.getQuill().setContents([], "silent");
347
+ return ye(
348
+ () => u.modelValue,
349
+ (r) => {
350
+ r || x.value.getQuill().setContents([], "silent");
347
351
  }
348
- ), (u, o) => (m(), N(w(st), {
349
- label: n.label,
350
- hint: n.hint,
351
- "error-message": n.errorMessage,
352
- "is-required": n.isRequired,
353
- "label-icon": n.labelIcon,
354
- "tooltip-text": n.tooltipText,
355
- "tooltip-options": n.tooltipOptions
352
+ ), (r, a) => (m(), N(w(rt), {
353
+ label: o.label,
354
+ hint: o.hint,
355
+ "error-message": o.errorMessage,
356
+ "is-required": o.isRequired,
357
+ "label-icon": o.labelIcon,
358
+ "tooltip-text": o.tooltipText,
359
+ "tooltip-options": o.tooltipOptions
356
360
  }, {
357
- default: W(() => [
361
+ default: Y(() => [
358
362
  (m(), N(mt, { to: "body" }, [
359
363
  L(w(xt), {
360
364
  size: "small",
361
365
  title: "Insert table",
362
- modelValue: K.value,
363
- "onUpdate:modelValue": o[2] || (o[2] = (b) => K.value = b),
366
+ modelValue: he.value,
367
+ "onUpdate:modelValue": a[2] || (a[2] = (f) => he.value = f),
364
368
  class: "!w-full !h-full",
365
369
  confirmButtonProps: {
366
370
  label: "Save",
367
- onClick: () => Ye()
371
+ onClick: () => We()
368
372
  }
369
373
  }, {
370
- default: W(() => [
371
- L(w(Ze), {
374
+ default: Y(() => [
375
+ L(w(Je), {
372
376
  modelValue: Le.value,
373
- "onUpdate:modelValue": o[0] || (o[0] = (b) => Le.value = b),
374
- options: Ge.value,
377
+ "onUpdate:modelValue": a[0] || (a[0] = (f) => Le.value = f),
378
+ options: Ye.value,
375
379
  label: "Table cell",
376
380
  class: "mb-3"
377
381
  }, null, 8, ["modelValue", "options"]),
378
- L(w(Ze), {
379
- modelValue: G.value,
380
- "onUpdate:modelValue": o[1] || (o[1] = (b) => G.value = b),
381
- options: Fe.value,
382
+ L(w(Je), {
383
+ modelValue: Te.value,
384
+ "onUpdate:modelValue": a[1] || (a[1] = (f) => Te.value = f),
385
+ options: Ge.value,
382
386
  label: "Table rows"
383
387
  }, null, 8, ["modelValue", "options"])
384
388
  ]),
385
389
  _: 1
386
390
  }, 8, ["modelValue", "confirmButtonProps"])
387
391
  ])),
388
- h("div", {
389
- class: Q(["grid", { "has-error": n.errorMessage }]),
390
- onClick: Me
392
+ y("div", {
393
+ class: Q(["grid", { "has-error": o.errorMessage }]),
394
+ onClick: z
391
395
  }, [
392
- z.value ? (m(), N(w(bt), {
396
+ W.value ? (m(), N(w(bt), {
393
397
  key: 0,
394
- id: `#${z.value}`,
398
+ id: `#${W.value}`,
395
399
  ref_key: "quill",
396
400
  ref: x,
397
- content: n.modelValue,
401
+ content: o.modelValue,
398
402
  options: {
399
- bounds: `#${z.value}`
403
+ bounds: `#${W.value}`
400
404
  },
401
405
  "is-text-only": "",
402
406
  theme: "snow",
403
407
  "content-type": "html",
404
408
  class: "min-h-[200px]",
405
- placeholder: n.placeholder,
406
- "onUpdate:content": ie,
407
- onPaste: F
409
+ placeholder: o.placeholder,
410
+ "onUpdate:content": be,
411
+ onPaste: He
408
412
  }, {
409
- toolbar: W(() => [
410
- h("div", {
411
- id: z.value,
413
+ toolbar: Y(() => [
414
+ y("div", {
415
+ id: W.value,
412
416
  class: "flex min-h-[36px] flex-wrap !py-2 !px-3 gap-y-2 rounded-t"
413
417
  }, [
414
- f.value.includes("changes") ? (m(), E(ge, { key: 0 }, [
415
- h("div", Lt, [
418
+ h.value.includes("changes") ? (m(), R(ce, { key: 0 }, [
419
+ y("div", Lt, [
416
420
  L(w(A), {
417
421
  class: Q(O.value ? "text-oc-text cursor-pointer" : "text-oc-text-300"),
418
422
  width: "20",
419
423
  height: "20",
420
424
  name: "text-editor/undo",
421
- onClick: Ee
425
+ onClick: Se
422
426
  }, null, 8, ["class"]),
423
427
  L(w(A), {
424
- class: Q(X.value ? "text-oc-text cursor-pointer" : "text-oc-text-300"),
428
+ class: Q(P.value ? "text-oc-text cursor-pointer" : "text-oc-text-300"),
425
429
  width: "20",
426
430
  height: "20",
427
431
  name: "text-editor/redo",
428
- onClick: Oe
432
+ onClick: oe
429
433
  }, null, 8, ["class"])
430
434
  ]),
431
- o[16] || (o[16] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
435
+ a[16] || (a[16] = y("div", { class: "border-l border-oc-gray-200" }, null, -1))
432
436
  ], 64)) : D("", !0),
433
- f.value.includes("font-size") ? (m(), E(ge, { key: 1 }, [
434
- L(w(rt), {
437
+ h.value.includes("font-size") ? (m(), R(ce, { key: 1 }, [
438
+ L(w(ut), {
435
439
  modelValue: j.value,
436
- "onUpdate:modelValue": o[3] || (o[3] = (b) => j.value = b),
440
+ "onUpdate:modelValue": a[3] || (a[3] = (f) => j.value = f),
437
441
  class: "px-5"
438
442
  }, {
439
- menu: W(() => [
440
- h("div", Rt, [
441
- (m(!0), E(ge, null, Ke(n.fontSizes, (b) => (m(), E("div", {
442
- key: b.value,
443
- class: Q(["min-w-[120px] cursor-pointer py-2 px-3 hover:bg-oc-gray-50", q.value === b.value ? "font-medium" : ""]),
444
- onClick: (P) => Ue(b.value)
445
- }, Pe(b.label), 11, Et))), 128))
443
+ menu: Y(() => [
444
+ y("div", Et, [
445
+ (m(!0), R(ce, null, Ze(o.fontSizes, (f) => (m(), R("div", {
446
+ key: f.value,
447
+ class: Q(["min-w-[120px] cursor-pointer py-2 px-3 hover:bg-oc-gray-50", X.value === f.value ? "font-medium" : ""]),
448
+ onClick: (F) => Ue(f.value)
449
+ }, Pe(f.label), 11, Rt))), 128))
446
450
  ])
447
451
  ]),
448
- default: W(() => {
449
- var b;
452
+ default: Y(() => {
453
+ var f;
450
454
  return [
451
- h("div", Bt, [
452
- ve(Pe((b = n.fontSizes.find((P) => P.value === q.value)) == null ? void 0 : b.label) + " ", 1),
455
+ y("div", Bt, [
456
+ pe(Pe((f = o.fontSizes.find((F) => F.value === X.value)) == null ? void 0 : f.label) + " ", 1),
453
457
  L(w(A), {
454
458
  width: "20",
455
459
  height: "20",
@@ -461,10 +465,10 @@ const It = { key: 1 }, Vt = {
461
465
  }),
462
466
  _: 1
463
467
  }, 8, ["modelValue"]),
464
- o[17] || (o[17] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
468
+ a[17] || (a[17] = y("div", { class: "border-l border-oc-gray-200" }, null, -1))
465
469
  ], 64)) : D("", !0),
466
- f.value.includes("font-style") ? (m(), E(ge, { key: 2 }, [
467
- h("div", Ot, [
470
+ h.value.includes("font-style") ? (m(), R(ce, { key: 2 }, [
471
+ y("div", Ot, [
468
472
  L(w(A), {
469
473
  class: Q(["cursor-pointer", U.value ? "text-oc-text" : "text-oc-text-300"]),
470
474
  width: "20",
@@ -473,183 +477,183 @@ const It = { key: 1 }, Vt = {
473
477
  onClick: Ce
474
478
  }, null, 8, ["class"]),
475
479
  L(w(A), {
476
- class: Q(["cursor-pointer", le.value ? "text-oc-text" : "text-oc-text-300"]),
480
+ class: Q(["cursor-pointer", ae.value ? "text-oc-text" : "text-oc-text-300"]),
477
481
  width: "20",
478
482
  height: "20",
479
483
  name: "text-editor/italic",
480
- onClick: ne
484
+ onClick: Xe
481
485
  }, null, 8, ["class"]),
482
486
  L(w(A), {
483
487
  class: Q(["cursor-pointer", J.value ? "text-oc-text" : "text-oc-text-300"]),
484
488
  width: "20",
485
489
  height: "20",
486
490
  name: "text-editor/underline",
487
- onClick: Ie
491
+ onClick: ve
488
492
  }, null, 8, ["class"])
489
493
  ]),
490
- o[18] || (o[18] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
494
+ a[18] || (a[18] = y("div", { class: "border-l border-oc-gray-200" }, null, -1))
491
495
  ], 64)) : D("", !0),
492
- h("div", Ut, [
493
- f.value.includes("link") ? (m(), N(w(A), {
496
+ y("div", Ut, [
497
+ h.value.includes("link") ? (m(), N(w(A), {
494
498
  key: 0,
495
499
  class: "cursor-pointer",
496
500
  width: "20",
497
501
  height: "20",
498
502
  name: "text-editor/link",
499
- onClick: me
503
+ onClick: ie
500
504
  })) : D("", !0),
501
- f.value.includes("image") ? (m(), N(w(A), {
505
+ h.value.includes("image") ? (m(), N(w(A), {
502
506
  key: 1,
503
507
  class: "cursor-pointer",
504
508
  width: "20",
505
509
  height: "20",
506
510
  name: "text-editor/image",
507
- onClick: De
511
+ onClick: q
508
512
  })) : D("", !0),
509
- f.value.includes("quote") ? (m(), N(w(A), {
513
+ h.value.includes("quote") ? (m(), N(w(A), {
510
514
  key: 2,
511
- class: Q(["cursor-pointer", R.value ? "text-oc-text" : "text-oc-text-300"]),
515
+ class: Q(["cursor-pointer", E.value ? "text-oc-text" : "text-oc-text-300"]),
512
516
  width: "20",
513
517
  height: "20",
514
518
  name: "text-editor/quote",
515
- onClick: Ne
519
+ onClick: De
516
520
  }, null, 8, ["class"])) : D("", !0),
517
- f.value.includes("media") ? (m(), N(w(A), {
521
+ h.value.includes("media") ? (m(), N(w(A), {
518
522
  key: 3,
519
523
  class: "cursor-pointer",
520
524
  width: "20",
521
525
  height: "20",
522
526
  name: "text-editor/media",
523
- onClick: _
527
+ onClick: Fe
524
528
  })) : D("", !0),
525
529
  L(w(A), {
526
530
  class: "cursor-pointer",
527
531
  width: "20",
528
532
  height: "20",
529
533
  name: "table",
530
- onClick: o[4] || (o[4] = (b) => K.value = !K.value)
534
+ onClick: a[4] || (a[4] = (f) => he.value = !he.value)
531
535
  })
532
536
  ]),
533
- f.value.includes("list") ? (m(), E(ge, { key: 3 }, [
534
- o[19] || (o[19] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
535
- h("div", Dt, [
537
+ h.value.includes("list") ? (m(), R(ce, { key: 3 }, [
538
+ a[19] || (a[19] = y("div", { class: "border-l border-oc-gray-200" }, null, -1)),
539
+ y("div", Dt, [
536
540
  L(w(A), {
537
- class: Q(["cursor-pointer", ae.value === "bullet" ? "text-oc-text" : "text-oc-text-300"]),
541
+ class: Q(["cursor-pointer", ne.value === "bullet" ? "text-oc-text" : "text-oc-text-300"]),
538
542
  width: "20",
539
543
  height: "20",
540
544
  name: "text-editor/bullet",
541
- onClick: o[5] || (o[5] = (b) => Ve("bullet"))
545
+ onClick: a[5] || (a[5] = (f) => Ie("bullet"))
542
546
  }, null, 8, ["class"]),
543
547
  L(w(A), {
544
- class: Q(["cursor-pointer", ae.value === "ordered" ? "text-oc-text" : "text-oc-text-300"]),
548
+ class: Q(["cursor-pointer", ne.value === "ordered" ? "text-oc-text" : "text-oc-text-300"]),
545
549
  width: "20",
546
550
  height: "20",
547
551
  name: "text-editor/number",
548
- onClick: o[6] || (o[6] = (b) => Ve("ordered"))
552
+ onClick: a[6] || (a[6] = (f) => Ie("ordered"))
549
553
  }, null, 8, ["class"])
550
554
  ])
551
555
  ], 64)) : D("", !0),
552
- f.value.includes("alignment") ? (m(), E(ge, { key: 4 }, [
553
- o[20] || (o[20] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
554
- h("div", Ht, [
556
+ h.value.includes("alignment") ? (m(), R(ce, { key: 4 }, [
557
+ a[20] || (a[20] = y("div", { class: "border-l border-oc-gray-200" }, null, -1)),
558
+ y("div", Ht, [
555
559
  L(w(A), {
556
- class: Q(["cursor-pointer", ee.value ? "text-oc-text-300" : "text-oc-text"]),
560
+ class: Q(["cursor-pointer", _.value ? "text-oc-text-300" : "text-oc-text"]),
557
561
  width: "20",
558
562
  height: "20",
559
563
  name: "text-editor/left",
560
- onClick: o[7] || (o[7] = (b) => he())
564
+ onClick: a[7] || (a[7] = (f) => xe())
561
565
  }, null, 8, ["class"]),
562
566
  L(w(A), {
563
- class: Q(["cursor-pointer", ee.value === "center" ? "text-oc-text" : "text-oc-text-300"]),
567
+ class: Q(["cursor-pointer", _.value === "center" ? "text-oc-text" : "text-oc-text-300"]),
564
568
  width: "20",
565
569
  height: "20",
566
570
  name: "text-editor/center",
567
- onClick: o[8] || (o[8] = (b) => he("center"))
571
+ onClick: a[8] || (a[8] = (f) => xe("center"))
568
572
  }, null, 8, ["class"]),
569
573
  L(w(A), {
570
- class: Q(["cursor-pointer", ee.value === "right" ? "text-oc-text" : "text-oc-text-300"]),
574
+ class: Q(["cursor-pointer", _.value === "right" ? "text-oc-text" : "text-oc-text-300"]),
571
575
  width: "20",
572
576
  height: "20",
573
577
  name: "text-editor/right",
574
- onClick: o[9] || (o[9] = (b) => he("right"))
578
+ onClick: a[9] || (a[9] = (f) => xe("right"))
575
579
  }, null, 8, ["class"]),
576
580
  L(w(A), {
577
- class: Q(["cursor-pointer", ee.value === "justify" ? "text-oc-text" : "text-oc-text-300"]),
581
+ class: Q(["cursor-pointer", _.value === "justify" ? "text-oc-text" : "text-oc-text-300"]),
578
582
  width: "20",
579
583
  height: "20",
580
584
  name: "text-editor/justify",
581
- onClick: o[10] || (o[10] = (b) => he("justify"))
585
+ onClick: a[10] || (a[10] = (f) => xe("justify"))
582
586
  }, null, 8, ["class"])
583
587
  ])
584
588
  ], 64)) : D("", !0),
585
- o[22] || (o[22] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
586
- h("div", Mt, [
589
+ a[22] || (a[22] = y("div", { class: "border-l border-oc-gray-200" }, null, -1)),
590
+ y("div", Mt, [
587
591
  L(w(Vt), {
588
- modelValue: de.value,
592
+ modelValue: ue.value,
589
593
  "onUpdate:modelValue": [
590
- o[11] || (o[11] = (b) => de.value = b),
591
- qe
594
+ a[11] || (a[11] = (f) => ue.value = f),
595
+ me
592
596
  ],
593
597
  "hide-input-color": ""
594
598
  }, {
595
- "picker-icon": W(() => [
596
- h("div", Qt, [
597
- h("div", {
598
- style: te(`color:${de.value}`)
599
+ "picker-icon": Y(() => [
600
+ y("div", Qt, [
601
+ y("div", {
602
+ style: le(`color:${ue.value}`)
599
603
  }, "A", 4),
600
- h("div", {
604
+ y("div", {
601
605
  class: "h-[5px] w-full rounded border",
602
- style: te(`background:${de.value}`)
606
+ style: le(`background:${ue.value}`)
603
607
  }, null, 4)
604
608
  ])
605
609
  ]),
606
610
  _: 1
607
611
  }, 8, ["modelValue"])
608
612
  ]),
609
- o[23] || (o[23] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
610
- ce.value ? (m(), E("div", At, [
613
+ a[23] || (a[23] = y("div", { class: "border-l border-oc-gray-200" }, null, -1)),
614
+ Ve.value ? (m(), R("div", At, [
611
615
  L(w(Ae), {
612
616
  label: "Image width",
613
617
  class: "w-[120px]",
614
- "model-value": ye.value,
618
+ "model-value": fe.value,
615
619
  "min-limit": 0,
616
620
  "max-limit": 100,
617
- "onUpdate:modelValue": Te
621
+ "onUpdate:modelValue": Me
618
622
  }, null, 8, ["model-value"]),
619
- h("div", Pt, [
623
+ y("div", Pt, [
620
624
  L(w(A), {
621
625
  class: "cursor-pointer",
622
626
  width: "20",
623
627
  height: "20",
624
628
  name: "text-editor/left",
625
- onClick: o[12] || (o[12] = (b) => be())
629
+ onClick: a[12] || (a[12] = (f) => ee())
626
630
  }),
627
631
  L(w(A), {
628
632
  class: "cursor-pointer",
629
633
  width: "20",
630
634
  height: "20",
631
635
  name: "text-editor/center",
632
- onClick: o[13] || (o[13] = (b) => be("center"))
636
+ onClick: a[13] || (a[13] = (f) => ee("center"))
633
637
  }),
634
638
  L(w(A), {
635
639
  class: "cursor-pointer",
636
640
  width: "20",
637
641
  height: "20",
638
642
  name: "text-editor/right",
639
- onClick: o[14] || (o[14] = (b) => be("right"))
643
+ onClick: a[14] || (a[14] = (f) => ee("right"))
640
644
  })
641
645
  ])
642
646
  ])) : D("", !0),
643
- h("div", Xt, [
644
- (m(), E("svg", {
647
+ y("div", Nt, [
648
+ (m(), R("svg", {
645
649
  width: "20",
646
650
  height: "20",
647
651
  viewBox: "0 0 15 15",
648
652
  fill: "none",
649
653
  xmlns: "http://www.w3.org/2000/svg",
650
- onClick: o[15] || (o[15] = (b) => Xe())
651
- }, [...o[21] || (o[21] = [
652
- h("path", {
654
+ onClick: a[15] || (a[15] = (f) => Oe())
655
+ }, [...a[21] || (a[21] = [
656
+ y("path", {
653
657
  "fill-rule": "evenodd",
654
658
  "clip-rule": "evenodd",
655
659
  d: "M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z",
@@ -666,7 +670,7 @@ const It = { key: 1 }, Vt = {
666
670
  _: 1
667
671
  }, 8, ["label", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
668
672
  }
669
- }, Nt = {
673
+ }, Xt = {
670
674
  __name: "InputHex",
671
675
  props: {
672
676
  modelValue: {
@@ -676,53 +680,53 @@ const It = { key: 1 }, Vt = {
676
680
  emits: {
677
681
  "update:modelValue": []
678
682
  },
679
- setup(n, { emit: V }) {
680
- const r = n, y = V, d = v(""), f = (p) => {
683
+ setup(o, { emit: V }) {
684
+ const u = o, b = V, d = v(""), h = (p) => {
681
685
  d.value = p, d.value = `#${p.replace(/#/g, "")}`;
682
686
  }, C = () => {
683
687
  let p = d.value;
684
- if (p === r.modelValue) return;
688
+ if (p === u.modelValue) return;
685
689
  if (!/^#[0-9a-fA-F]+$/.test(p)) {
686
- d.value = r.modelValue;
690
+ d.value = u.modelValue;
687
691
  return;
688
692
  }
689
- let a = p.replace(/#/g, "");
690
- switch (a.length) {
693
+ let n = p.replace(/#/g, "");
694
+ switch (n.length) {
691
695
  case 0:
692
- a = r.modelValue.replace("#", "");
696
+ n = u.modelValue.replace("#", "");
693
697
  break;
694
698
  case 1:
695
699
  case 2:
696
- a = a.repeat(3);
700
+ n = n.repeat(3);
697
701
  break;
698
702
  case 4:
699
703
  case 5:
700
- a = a.slice(0, 3);
704
+ n = n.slice(0, 3);
701
705
  break;
702
706
  case 3:
703
707
  case 6:
704
708
  break;
705
709
  default:
706
- a = a.slice(0, 6);
710
+ n = n.slice(0, 6);
707
711
  }
708
- d.value = `#${a.toUpperCase()}`, y("update:modelValue", d.value);
712
+ d.value = `#${n.toUpperCase()}`, b("update:modelValue", d.value);
709
713
  };
710
- return fe(
711
- () => r.modelValue,
712
- (p, a) => {
713
- p !== a && (d.value = p);
714
+ return ye(
715
+ () => u.modelValue,
716
+ (p, n) => {
717
+ p !== n && (d.value = p);
714
718
  },
715
719
  { immediate: !0 }
716
- ), (p, a) => (m(), N(w(we), {
720
+ ), (p, n) => (m(), N(w($e), {
717
721
  class: "w-[158px]",
718
722
  placeholder: "#FFFFFF",
719
723
  "model-value": d.value,
720
- "onUpdate:modelValue": f,
724
+ "onUpdate:modelValue": h,
721
725
  onBlur: C,
722
- onKeyup: ot(C, ["enter"])
726
+ onKeyup: it(C, ["enter"])
723
727
  }, null, 8, ["model-value"]));
724
728
  }
725
- }, qt = { class: "grid grid-cols-3 gap-3" }, nt = {
729
+ }, qt = { class: "grid grid-cols-3 gap-3" }, ot = {
726
730
  __name: "InputRgbHsl",
727
731
  props: {
728
732
  inputType: {
@@ -740,28 +744,28 @@ const It = { key: 1 }, Vt = {
740
744
  "update-rgb-value": [],
741
745
  "update-hsl-value": []
742
746
  },
743
- setup(n, { emit: V }) {
744
- const r = n, y = V, d = v({
747
+ setup(o, { emit: V }) {
748
+ const u = o, b = V, d = v({
745
749
  r: 0,
746
750
  g: 0,
747
751
  b: 0
748
- }), f = v(), C = v(), p = v(), a = (M, T) => {
749
- var z, O, X;
752
+ }), h = v(), C = v(), p = v(), n = (M, T) => {
753
+ var W, O, P;
750
754
  let B = 255;
751
- if (r.inputType == "HSL" && (B = 100, M == "r" && (B = 360)), !isNaN(parseInt(T))) {
755
+ if (u.inputType == "HSL" && (B = 100, M == "r" && (B = 360)), !isNaN(parseInt(T))) {
752
756
  if (M == "r") {
753
757
  let U = parseInt(T);
754
- U <= B && (d.value.r = U, r.inputType == "RGB" ? H("r") : Z()), (z = f.value) == null || z.focus();
758
+ U <= B && (d.value.r = U, u.inputType == "RGB" ? H("r") : Z()), (W = h.value) == null || W.focus();
755
759
  } else if (M == "g") {
756
760
  let U = parseInt(T);
757
- U <= B && (d.value.g = U, r.inputType == "RGB" ? H("g") : Z()), (O = C.value) == null || O.focus();
761
+ U <= B && (d.value.g = U, u.inputType == "RGB" ? H("g") : Z()), (O = C.value) == null || O.focus();
758
762
  } else if (M == "b") {
759
763
  let U = parseInt(T);
760
- U <= B && (d.value.b = U, r.inputType == "RGB" ? H("b") : Z()), (X = p.value) == null || X.focus();
764
+ U <= B && (d.value.b = U, u.inputType == "RGB" ? H("b") : Z()), (P = p.value) == null || P.focus();
761
765
  }
762
766
  }
763
767
  }, H = (M) => {
764
- y("update-rgb-value", {
768
+ b("update-rgb-value", {
765
769
  type: M,
766
770
  value: {
767
771
  r: parseInt(d.value.r),
@@ -770,20 +774,20 @@ const It = { key: 1 }, Vt = {
770
774
  }
771
775
  });
772
776
  }, Z = () => {
773
- y("update-hsl-value", {
777
+ b("update-hsl-value", {
774
778
  h: parseInt(d.value.r),
775
779
  s: parseInt(d.value.g),
776
780
  l: parseInt(d.value.b)
777
781
  });
778
782
  };
779
- return r.inputType === "RGB" ? fe(
780
- () => r.rgbValue,
783
+ return u.inputType === "RGB" ? ye(
784
+ () => u.rgbValue,
781
785
  (M, T) => {
782
786
  M !== T && (d.value = M);
783
787
  },
784
788
  { immediate: !0, deep: !0 }
785
- ) : fe(
786
- () => r.hslValue,
789
+ ) : ye(
790
+ () => u.hslValue,
787
791
  (M) => {
788
792
  d.value = {
789
793
  r: M.h,
@@ -792,27 +796,27 @@ const It = { key: 1 }, Vt = {
792
796
  };
793
797
  },
794
798
  { immediate: !0, deep: !0 }
795
- ), (M, T) => (m(), E("div", qt, [
796
- L(w(we), {
799
+ ), (M, T) => (m(), R("div", qt, [
800
+ L(w($e), {
797
801
  ref_key: "rInputEl",
798
- ref: f,
802
+ ref: h,
799
803
  "model-value": d.value.r,
800
804
  placeholder: "100",
801
- "onUpdate:modelValue": T[0] || (T[0] = (B) => a("r", B))
805
+ "onUpdate:modelValue": T[0] || (T[0] = (B) => n("r", B))
802
806
  }, null, 8, ["model-value"]),
803
- L(w(we), {
807
+ L(w($e), {
804
808
  ref_key: "gInputEl",
805
809
  ref: C,
806
810
  "model-value": d.value.g,
807
811
  placeholder: "100",
808
- "onUpdate:modelValue": T[1] || (T[1] = (B) => a("g", B))
812
+ "onUpdate:modelValue": T[1] || (T[1] = (B) => n("g", B))
809
813
  }, null, 8, ["model-value"]),
810
- L(w(we), {
814
+ L(w($e), {
811
815
  ref_key: "bInputEl",
812
816
  ref: p,
813
817
  "model-value": d.value.b,
814
818
  placeholder: "100",
815
- "onUpdate:modelValue": T[2] || (T[2] = (B) => a("b", B))
819
+ "onUpdate:modelValue": T[2] || (T[2] = (B) => n("b", B))
816
820
  }, null, 8, ["model-value"])
817
821
  ]));
818
822
  }
@@ -826,29 +830,29 @@ const It = { key: 1 }, Vt = {
826
830
  emits: {
827
831
  "update:modelValue": []
828
832
  },
829
- setup(n, { emit: V }) {
830
- const r = n, y = V, d = v(""), f = (p) => {
833
+ setup(o, { emit: V }) {
834
+ const u = o, b = V, d = v(""), h = (p) => {
831
835
  d.value = p;
832
836
  }, C = () => {
833
837
  let p = parseInt(d.value);
834
- p && p <= 100 ? y("update:modelValue", p) : d.value = r.modelValue;
838
+ p && p <= 100 ? b("update:modelValue", p) : d.value = u.modelValue;
835
839
  };
836
- return fe(
837
- () => r.modelValue,
838
- (p, a) => {
839
- p !== a && (d.value = p);
840
+ return ye(
841
+ () => u.modelValue,
842
+ (p, n) => {
843
+ p !== n && (d.value = p);
840
844
  },
841
845
  { immediate: !0 }
842
- ), (p, a) => (m(), N(w(we), {
846
+ ), (p, n) => (m(), N(w($e), {
843
847
  class: "w-[75px]",
844
848
  placeholder: "100",
845
849
  "model-value": d.value,
846
- "onUpdate:modelValue": f,
850
+ "onUpdate:modelValue": h,
847
851
  onBlur: C,
848
- onKeyup: ot(C, ["enter"])
852
+ onKeyup: it(C, ["enter"])
849
853
  }, {
850
- leading: W(() => [...a[0] || (a[0] = [
851
- ve("%", -1)
854
+ leading: Y(() => [...n[0] || (n[0] = [
855
+ pe("%", -1)
852
856
  ])]),
853
857
  _: 1
854
858
  }, 8, ["model-value"]));
@@ -859,13 +863,13 @@ const It = { key: 1 }, Vt = {
859
863
  modelValue: { default: "RGB", type: String }
860
864
  },
861
865
  emits: ["update:model-value"],
862
- setup(n, { emit: V }) {
863
- const y = v(n.modelValue), d = V, f = (C) => {
864
- y.value = C, d("update:model-value", C);
866
+ setup(o, { emit: V }) {
867
+ const b = v(o.modelValue), d = V, h = (C) => {
868
+ b.value = C, d("update:model-value", C);
865
869
  };
866
- return (C, p) => (m(), N(w(Ze), {
870
+ return (C, p) => (m(), N(w(Je), {
867
871
  class: "!w-[80px]",
868
- "model-value": y.value,
872
+ "model-value": b.value,
869
873
  options: [
870
874
  {
871
875
  label: "HEX",
@@ -880,7 +884,7 @@ const It = { key: 1 }, Vt = {
880
884
  value: "HSL"
881
885
  }
882
886
  ],
883
- "onUpdate:modelValue": f
887
+ "onUpdate:modelValue": h
884
888
  }, null, 8, ["model-value"]));
885
889
  }
886
890
  }, Yt = { class: "opacity-bar" }, Wt = { class: "picker-opacity-slider opacity-bar-background" }, zt = ["value"], jt = {
@@ -889,16 +893,16 @@ const It = { key: 1 }, Vt = {
889
893
  modelValue: { default: 0, type: Number }
890
894
  },
891
895
  emits: ["update:modelValue", "onInput"],
892
- setup(n, { emit: V }) {
893
- const r = Re("opacitySlider"), y = V, d = (f) => {
894
- y("update:modelValue", parseInt(f.target.value)), y("onInput", f);
896
+ setup(o, { emit: V }) {
897
+ const u = Re("opacitySlider"), b = V, d = (h) => {
898
+ b("update:modelValue", parseInt(h.target.value)), b("onInput", h);
895
899
  };
896
- return (f, C) => (m(), E("div", Yt, [
897
- h("div", Wt, [
898
- h("input", {
900
+ return (h, C) => (m(), R("div", Yt, [
901
+ y("div", Wt, [
902
+ y("input", {
899
903
  ref_key: "opacitySlider",
900
- ref: r,
901
- value: n.modelValue,
904
+ ref: u,
905
+ value: o.modelValue,
902
906
  class: "opacity__slider",
903
907
  type: "range",
904
908
  min: "0",
@@ -914,31 +918,31 @@ const It = { key: 1 }, Vt = {
914
918
  gradientType: String
915
919
  },
916
920
  emits: ["onAddColor", "onMouseDown", "onDeleteColor"],
917
- setup(n, { emit: V }) {
918
- const r = Re("gradientBar"), y = v(), d = V, f = (T) => {
921
+ setup(o, { emit: V }) {
922
+ const u = Re("gradientBar"), b = v(), d = V, h = (T) => {
919
923
  T.preventDefault();
920
- }, C = v("left:0"), p = v(!1), a = (T) => {
924
+ }, C = v("left:0"), p = v(!1), n = (T) => {
921
925
  d("onMouseDown", T);
922
926
  }, H = () => {
923
- let T = y.value.querySelector(".select");
927
+ let T = b.value.querySelector(".select");
924
928
  C.value = T == null ? void 0 : T.getAttribute("style");
925
929
  }, Z = () => {
926
930
  var B;
927
- H(), (((B = y.value.querySelectorAll(".gradient-handle")) == null ? void 0 : B.length) ?? 2) > 2 ? p.value = !0 : p.value = !1;
931
+ H(), (((B = b.value.querySelectorAll(".gradient-handle")) == null ? void 0 : B.length) ?? 2) > 2 ? p.value = !0 : p.value = !1;
928
932
  }, M = (T) => {
929
933
  p.value = !1, d("onAddColor", T);
930
934
  };
931
- return (T, B) => (m(), E("div", {
935
+ return (T, B) => (m(), R("div", {
932
936
  ref_key: "gradientSlider",
933
- ref: y,
937
+ ref: b,
934
938
  class: "relative h-[40px]",
935
939
  onClick: Z
936
940
  }, [
937
- h("button", {
941
+ y("button", {
938
942
  type: "button",
939
943
  class: Q(["absolute top-[-18px] text-oc-accent-3 rounded-[4px] border-2 border-oc-gray-200 p-2 bg-oc-bg-light", p.value ? "" : "!hidden"]),
940
- style: te(C.value),
941
- onClick: B[0] || (B[0] = (z) => T.$emit("onDeleteColor"))
944
+ style: le(C.value),
945
+ onClick: B[0] || (B[0] = (W) => T.$emit("onDeleteColor"))
942
946
  }, [
943
947
  L(w(A), {
944
948
  name: "bin",
@@ -946,17 +950,17 @@ const It = { key: 1 }, Vt = {
946
950
  height: "14"
947
951
  })
948
952
  ], 6),
949
- h("div", {
953
+ y("div", {
950
954
  class: Q(["gradient-bar", {
951
- "mt-[20px]": n.gradientType === "linear",
952
- "mt-[12px]": n.gradientType === "radial"
955
+ "mt-[20px]": o.gradientType === "linear",
956
+ "mt-[12px]": o.gradientType === "radial"
953
957
  }]),
954
- onMousedown: a,
955
- onDragstart: f
958
+ onMousedown: n,
959
+ onDragstart: h
956
960
  }, [
957
- h("div", {
961
+ y("div", {
958
962
  ref_key: "gradientBar",
959
- ref: r,
963
+ ref: u,
960
964
  class: "gradient-container",
961
965
  onDblclick: M
962
966
  }, null, 544)
@@ -969,20 +973,20 @@ const It = { key: 1 }, Vt = {
969
973
  modelValue: { default: 0, type: Number }
970
974
  },
971
975
  emits: ["update:modelValue", "onInput", "onChange"],
972
- setup(n, { emit: V }) {
973
- const r = V, y = (d) => {
974
- r("update:modelValue", parseFloat(d.target.value)), r("onInput", d);
976
+ setup(o, { emit: V }) {
977
+ const u = V, b = (d) => {
978
+ u("update:modelValue", parseFloat(d.target.value)), u("onInput", d);
975
979
  };
976
- return (d, f) => (m(), E("div", Zt, [
977
- h("input", {
978
- value: n.modelValue,
980
+ return (d, h) => (m(), R("div", Zt, [
981
+ y("input", {
982
+ value: o.modelValue,
979
983
  class: "picker-hue-range-slider",
980
984
  type: "range",
981
985
  min: "0",
982
986
  max: "360",
983
987
  step: "0.1",
984
- onInput: y,
985
- onChange: f[0] || (f[0] = (C) => d.$emit("onChange", C))
988
+ onInput: b,
989
+ onChange: h[0] || (h[0] = (C) => d.$emit("onChange", C))
986
990
  }, null, 40, Jt)
987
991
  ]));
988
992
  }
@@ -1002,71 +1006,71 @@ const It = { key: 1 }, Vt = {
1002
1006
  percentageY: { default: 50, type: Number }
1003
1007
  },
1004
1008
  emits: ["update:angle", "update:percentageX", "update:percentageY", "onInput"],
1005
- setup(n, { emit: V }) {
1006
- const r = v(!1), y = v(!1);
1007
- Je(() => {
1008
- r.value = !0, y.value = !0;
1009
+ setup(o, { emit: V }) {
1010
+ const u = v(!1), b = v(!1);
1011
+ _e(() => {
1012
+ u.value = !0, b.value = !0;
1009
1013
  });
1010
- const d = V, f = (C, p) => {
1011
- let a = parseInt(C);
1014
+ const d = V, h = (C, p) => {
1015
+ let n = parseInt(C);
1012
1016
  switch (p) {
1013
1017
  case "angle":
1014
- C > 360 ? a = 360 : C < 0 && (a = 0), d("update:angle", a), d("onInput");
1018
+ C > 360 ? n = 360 : C < 0 && (n = 0), d("update:angle", n), d("onInput");
1015
1019
  break;
1016
1020
  case "percentageX":
1017
- C > 100 ? a = 100 : C < 0 && (a = 0), d("update:percentageX", a), d("onInput");
1021
+ C > 100 ? n = 100 : C < 0 && (n = 0), d("update:percentageX", n), d("onInput");
1018
1022
  break;
1019
1023
  case "percentageY":
1020
- C > 100 ? a = 100 : C < 0 && (a = 0), d("update:percentageY", a), d("onInput");
1024
+ C > 100 ? n = 100 : C < 0 && (n = 0), d("update:percentageY", n), d("onInput");
1021
1025
  break;
1022
1026
  }
1023
1027
  };
1024
- return (C, p) => (m(), E("div", el, [
1025
- n.gradientType == "linear" && r.value ? (m(), N(w(Ae), {
1028
+ return (C, p) => (m(), R("div", el, [
1029
+ o.gradientType == "linear" && u.value ? (m(), N(w(Ae), {
1026
1030
  key: 0,
1027
1031
  label: "Angle",
1028
- "model-value": n.angle,
1032
+ "model-value": o.angle,
1029
1033
  "min-limit": 0,
1030
1034
  "max-limit": 360,
1031
- "onUpdate:modelValue": p[0] || (p[0] = (a) => f(a, "angle"))
1035
+ "onUpdate:modelValue": p[0] || (p[0] = (n) => h(n, "angle"))
1032
1036
  }, {
1033
- "min-limit-label": W(() => [...p[3] || (p[3] = [
1034
- ve("0 ", -1)
1037
+ "min-limit-label": Y(() => [...p[3] || (p[3] = [
1038
+ pe("0 ", -1)
1035
1039
  ])]),
1036
- "max-limit-label": W(() => [...p[4] || (p[4] = [
1037
- ve("360", -1),
1038
- h("span", null, "°", -1)
1040
+ "max-limit-label": Y(() => [...p[4] || (p[4] = [
1041
+ pe("360", -1),
1042
+ y("span", null, "°", -1)
1039
1043
  ])]),
1040
1044
  _: 1
1041
1045
  }, 8, ["model-value"])) : D("", !0),
1042
- n.gradientType == "radial" && y.value ? (m(), E("div", tl, [
1046
+ o.gradientType == "radial" && b.value ? (m(), R("div", tl, [
1043
1047
  L(w(Ae), {
1044
1048
  label: "Position X",
1045
- "model-value": n.percentageX,
1049
+ "model-value": o.percentageX,
1046
1050
  "min-limit": 0,
1047
1051
  "max-limit": 100,
1048
- "onUpdate:modelValue": p[1] || (p[1] = (a) => f(a, "percentageX"))
1052
+ "onUpdate:modelValue": p[1] || (p[1] = (n) => h(n, "percentageX"))
1049
1053
  }, {
1050
- "min-limit-label": W(() => [...p[5] || (p[5] = [
1051
- ve("0", -1)
1054
+ "min-limit-label": Y(() => [...p[5] || (p[5] = [
1055
+ pe("0", -1)
1052
1056
  ])]),
1053
- "max-limit-label": W(() => [...p[6] || (p[6] = [
1054
- ve("100%", -1)
1057
+ "max-limit-label": Y(() => [...p[6] || (p[6] = [
1058
+ pe("100%", -1)
1055
1059
  ])]),
1056
1060
  _: 1
1057
1061
  }, 8, ["model-value"]),
1058
1062
  L(w(Ae), {
1059
1063
  label: "Position Y",
1060
- "model-value": n.percentageY,
1064
+ "model-value": o.percentageY,
1061
1065
  "min-limit": 0,
1062
1066
  "max-limit": 100,
1063
- "onUpdate:modelValue": p[2] || (p[2] = (a) => f(a, "percentageY"))
1067
+ "onUpdate:modelValue": p[2] || (p[2] = (n) => h(n, "percentageY"))
1064
1068
  }, {
1065
- "min-limit-label": W(() => [...p[7] || (p[7] = [
1066
- ve("0", -1)
1069
+ "min-limit-label": Y(() => [...p[7] || (p[7] = [
1070
+ pe("0", -1)
1067
1071
  ])]),
1068
- "max-limit-label": W(() => [...p[8] || (p[8] = [
1069
- ve("100%", -1)
1072
+ "max-limit-label": Y(() => [...p[8] || (p[8] = [
1073
+ pe("100%", -1)
1070
1074
  ])]),
1071
1075
  _: 1
1072
1076
  }, 8, ["model-value"])
@@ -1076,26 +1080,26 @@ const It = { key: 1 }, Vt = {
1076
1080
  }, al = {
1077
1081
  __name: "PickerWrap",
1078
1082
  emits: ["onMouseDown"],
1079
- setup(n) {
1080
- const V = Re("canvas"), r = Re("pickerWrap"), y = Re("pickerPointer"), d = (f) => {
1081
- f.preventDefault();
1083
+ setup(o) {
1084
+ const V = Re("canvas"), u = Re("pickerWrap"), b = Re("pickerPointer"), d = (h) => {
1085
+ h.preventDefault();
1082
1086
  };
1083
- return (f, C) => (m(), E("div", {
1087
+ return (h, C) => (m(), R("div", {
1084
1088
  ref_key: "pickerWrap",
1085
- ref: r,
1089
+ ref: u,
1086
1090
  class: "cp-picker-wrap",
1087
- onMousedown: C[0] || (C[0] = (p) => f.$emit("onMouseDown", p)),
1091
+ onMousedown: C[0] || (C[0] = (p) => h.$emit("onMouseDown", p)),
1088
1092
  onDragstart: d
1089
1093
  }, [
1090
- h("canvas", {
1094
+ y("canvas", {
1091
1095
  ref_key: "canvas",
1092
1096
  ref: V,
1093
1097
  class: "colour-area"
1094
1098
  }, null, 512),
1095
- C[1] || (C[1] = h("div", { class: "colour-area-mask" }, null, -1)),
1096
- h("div", {
1099
+ C[1] || (C[1] = y("div", { class: "colour-area-mask" }, null, -1)),
1100
+ y("div", {
1097
1101
  ref_key: "pickerPointer",
1098
- ref: y,
1102
+ ref: b,
1099
1103
  class: "colour-area-point-circle"
1100
1104
  }, null, 512)
1101
1105
  ], 544));
@@ -1126,37 +1130,37 @@ const It = { key: 1 }, Vt = {
1126
1130
  modelValue: String
1127
1131
  },
1128
1132
  emits: ["onChangeMode"],
1129
- setup(n) {
1130
- return (V, r) => (m(), E("div", nl, [
1131
- h("button", {
1133
+ setup(o) {
1134
+ return (V, u) => (m(), R("div", nl, [
1135
+ y("button", {
1132
1136
  type: "button",
1133
- class: Q(n.mode == "solid" ? "active" : ""),
1137
+ class: Q(o.mode == "solid" ? "active" : ""),
1134
1138
  style: { padding: "7px" },
1135
- onClick: r[0] || (r[0] = (y) => V.$emit("onChangeMode", "solid"))
1139
+ onClick: u[0] || (u[0] = (b) => V.$emit("onChangeMode", "solid"))
1136
1140
  }, [
1137
- n.modelValue && n.mode == "solid" ? (m(), E("div", {
1141
+ o.modelValue && o.mode == "solid" ? (m(), R("div", {
1138
1142
  key: 0,
1139
1143
  class: "w-[28px] h-[28px] rounded-full border",
1140
- style: te(`background:${n.modelValue}`)
1141
- }, null, 4)) : (m(), E("svg", ol, [...r[3] || (r[3] = [
1142
- h("g", { opacity: "0.5" }, [
1143
- h("path", {
1144
+ style: le(`background:${o.modelValue}`)
1145
+ }, null, 4)) : (m(), R("svg", ol, [...u[3] || (u[3] = [
1146
+ y("g", { opacity: "0.5" }, [
1147
+ y("path", {
1144
1148
  d: "M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z",
1145
1149
  fill: "#03102F"
1146
1150
  })
1147
1151
  ], -1)
1148
1152
  ])]))
1149
1153
  ], 2),
1150
- h("button", {
1154
+ y("button", {
1151
1155
  type: "button",
1152
- class: Q(n.gradientType == "linear" && n.mode != "solid" ? "active" : ""),
1153
- style: te(`${n.iconClasses.linear ? "" : "padding: 7px;"}`),
1154
- onClick: r[1] || (r[1] = (y) => V.$emit("onChangeMode", "linear"))
1156
+ class: Q(o.gradientType == "linear" && o.mode != "solid" ? "active" : ""),
1157
+ style: le(`${o.iconClasses.linear ? "" : "padding: 7px;"}`),
1158
+ onClick: u[1] || (u[1] = (b) => V.$emit("onChangeMode", "linear"))
1155
1159
  }, [
1156
- h("div", {
1160
+ y("div", {
1157
1161
  class: "w-[28px] h-[28px] rounded-full border",
1158
- style: te(
1159
- n.modelValue && n.gradientType == "linear" && n.mode != "solid" ? `background:${n.modelValue}` : `
1162
+ style: le(
1163
+ o.modelValue && o.gradientType == "linear" && o.mode != "solid" ? `background:${o.modelValue}` : `
1160
1164
  background: linear-gradient(
1161
1165
  180deg,
1162
1166
  #03102f 0%,
@@ -1166,16 +1170,16 @@ const It = { key: 1 }, Vt = {
1166
1170
  )
1167
1171
  }, null, 4)
1168
1172
  ], 6),
1169
- h("button", {
1173
+ y("button", {
1170
1174
  type: "button",
1171
- class: Q(n.gradientType == "radial" && n.mode != "solid" ? "active" : ""),
1172
- style: te(`${n.iconClasses.radial ? "" : "padding: 6px;"}`),
1173
- onClick: r[2] || (r[2] = (y) => V.$emit("onChangeMode", "radial"))
1175
+ class: Q(o.gradientType == "radial" && o.mode != "solid" ? "active" : ""),
1176
+ style: le(`${o.iconClasses.radial ? "" : "padding: 6px;"}`),
1177
+ onClick: u[2] || (u[2] = (b) => V.$emit("onChangeMode", "radial"))
1174
1178
  }, [
1175
- h("div", {
1179
+ y("div", {
1176
1180
  class: "w-[28px] h-[28px] rounded-full border",
1177
- style: te(
1178
- n.modelValue && n.gradientType == "radial" && n.mode != "solid" ? `background:${n.modelValue}` : "background: radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 0%, rgb(3, 16, 47) 100%);"
1181
+ style: le(
1182
+ o.modelValue && o.gradientType == "radial" && o.mode != "solid" ? `background:${o.modelValue}` : "background: radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 0%, rgb(3, 16, 47) 100%);"
1179
1183
  )
1180
1184
  }, null, 4)
1181
1185
  ], 6)
@@ -1229,68 +1233,68 @@ const It = { key: 1 }, Vt = {
1229
1233
  lastUsedColors: Array
1230
1234
  },
1231
1235
  emits: ["update:modelValue", "last-used-pick"],
1232
- setup(n, { emit: V }) {
1233
- const r = n, y = v(r.variant == "gradient" ? "gradient" : "solid"), d = v(null), f = V, C = v(r.modelValue), p = (t) => {
1234
- C.value = t, X.value && f("update:modelValue", t);
1235
- }, a = v([
1236
+ setup(o, { emit: V }) {
1237
+ const u = o, b = v(u.variant == "gradient" ? "gradient" : "solid"), d = v(null), h = V, C = v(u.modelValue), p = (t) => {
1238
+ C.value = t, P.value && h("update:modelValue", t);
1239
+ }, n = v([
1236
1240
  { id: 1, r: 68, g: 71, b: 119, a: 100, percent: 0, hue: 0, select: !0 },
1237
1241
  { id: 2, r: 0, g: 0, b: 255, a: 100, percent: 100, hue: 0, select: !1 }
1238
- ]), H = v(r.lastUsedColors);
1239
- fe(
1240
- () => r.lastUsedColors,
1242
+ ]), H = v(u.lastUsedColors);
1243
+ ye(
1244
+ () => u.lastUsedColors,
1241
1245
  () => {
1242
- H.value = r.lastUsedColors;
1246
+ H.value = u.lastUsedColors;
1243
1247
  },
1244
1248
  {
1245
1249
  deep: !0
1246
1250
  }
1247
1251
  );
1248
- const Z = $e(() => r.variant !== "gradient" ? H.value.filter((t) => !t.includes("linear") && !t.includes("radial")) : H.value), M = v(!1), T = v("linear"), B = _e({
1252
+ const Z = ke(() => u.variant !== "gradient" ? H.value.filter((t) => !t.includes("linear") && !t.includes("radial")) : H.value), M = v(!1), T = v("linear"), B = et({
1249
1253
  angle: 90,
1250
1254
  percentageX: 50,
1251
1255
  percentageY: 50
1252
- }), z = v(""), O = v(r.inputType), X = v(!1), U = v(), le = v(), J = v(), j = v(), R = v(), q = _e({
1256
+ }), W = v(""), O = v(u.inputType), P = v(!1), U = v(), ae = v(), J = v(), j = v(), E = v(), X = et({
1253
1257
  h: 0,
1254
1258
  s: 0,
1255
1259
  l: 0
1256
1260
  });
1257
- Be("gradientBar", le), Be("canvas", J), Be("pickerWrap", j), Be("pickerPointer", R), Be("opacitySlider", U);
1258
- let ae = 0, ee = 0, x = 0, Se = 0, ue = 0, ie = 0;
1259
- const Xe = (t) => {
1260
- !j.value || !R.value || (ue = j.value.offsetHeight - R.value.offsetHeight, ie = j.value.offsetWidth - R.value.offsetWidth, x = t.clientX - t.target.getBoundingClientRect().left, Se = t.clientY - t.target.getBoundingClientRect().top, ae = x - R.value.offsetWidth / 2, ee = Se - R.value.offsetHeight / 2, R.value.style.left = `${ae}px`, R.value.style.top = `${ee}px`, Ce(!1), P(), window.addEventListener("mousemove", Ee), window.addEventListener("mouseup", Oe));
1261
- }, Ee = (t) => {
1261
+ Ee("gradientBar", ae), Ee("canvas", J), Ee("pickerWrap", j), Ee("pickerPointer", E), Ee("opacitySlider", U);
1262
+ let ne = 0, _ = 0, x = 0, we = 0, re = 0, ge = 0;
1263
+ const Ne = (t) => {
1264
+ !j.value || !E.value || (re = j.value.offsetHeight - E.value.offsetHeight, ge = j.value.offsetWidth - E.value.offsetWidth, x = t.clientX - t.target.getBoundingClientRect().left, we = t.clientY - t.target.getBoundingClientRect().top, ne = x - E.value.offsetWidth / 2, _ = we - E.value.offsetHeight / 2, E.value.style.left = `${ne}px`, E.value.style.top = `${_}px`, Se(!1), a(), window.addEventListener("mousemove", be), window.addEventListener("mouseup", Oe));
1265
+ }, be = (t) => {
1262
1266
  t.preventDefault();
1263
- const e = j.value.getBoundingClientRect(), l = t.clientX - e.left - R.value.offsetWidth / 2, i = t.clientY - e.top - R.value.offsetHeight / 2;
1264
- l >= 0 && l <= ie ? (ae = l, R.value.style.left = `${l}px`) : 0 > l ? (ae = 0, R.value.style.left = "0px") : l > ie && (ae = ie, R.value.style.left = `${ie}px`), i >= 0 && i <= ue ? (ee = i, R.value.style.top = `${i}px`) : 0 > i ? (ee = 0, R.value.style.top = "0px") : i > ue && (ee = ue, R.value.style.top = `${ue}px`), Ce(!1), P();
1267
+ const e = j.value.getBoundingClientRect(), l = t.clientX - e.left - E.value.offsetWidth / 2, i = t.clientY - e.top - E.value.offsetHeight / 2;
1268
+ l >= 0 && l <= ge ? (ne = l, E.value.style.left = `${l}px`) : 0 > l ? (ne = 0, E.value.style.left = "0px") : l > ge && (ne = ge, E.value.style.left = `${ge}px`), i >= 0 && i <= re ? (_ = i, E.value.style.top = `${i}px`) : 0 > i ? (_ = 0, E.value.style.top = "0px") : i > re && (_ = re, E.value.style.top = `${re}px`), Se(!1), a();
1265
1269
  }, Oe = () => {
1266
- window.removeEventListener("mousemove", Ee), window.removeEventListener("mouseup", Oe);
1267
- }, Ce = (t) => {
1270
+ window.removeEventListener("mousemove", be), window.removeEventListener("mouseup", Oe);
1271
+ }, Se = (t) => {
1268
1272
  if (!t) {
1269
- let e = Ue();
1270
- const l = at(ne.value, e.s, e.l);
1273
+ let e = Xe();
1274
+ const l = nt(oe.value, e.s, e.l);
1271
1275
  if (l) {
1272
- if (X.value) {
1273
- let i = a.value.find((s) => s.select == !0);
1276
+ if (P.value) {
1277
+ let i = n.value.find((s) => s.select == !0);
1274
1278
  i && (i.r = l.r, i.g = l.g, i.b = l.b);
1275
1279
  }
1276
- K(), G();
1280
+ ee(), z();
1277
1281
  }
1278
1282
  }
1279
- }, ne = v(0), Ie = async (t) => {
1280
- const { rgb: e } = lt(ne.value, 100, 50);
1283
+ }, oe = v(0), Ce = async (t) => {
1284
+ const { rgb: e } = at(oe.value, 100, 50);
1281
1285
  Me(e), setTimeout(() => {
1282
- Ce(t), P();
1286
+ Se(t), a();
1283
1287
  }, 0);
1284
- }, Ue = () => {
1285
- let t = { s: 0, l: 0 }, e = j.value.offsetWidth - R.value.offsetWidth, l = j.value.offsetHeight - R.value.offsetHeight, i = parseInt(R.value.style.left), c = 1 - parseInt(R.value.style.top) / l, k = i / e;
1288
+ }, Xe = () => {
1289
+ let t = { s: 0, l: 0 }, e = j.value.offsetWidth - E.value.offsetWidth, l = j.value.offsetHeight - E.value.offsetHeight, i = parseInt(E.value.style.left), c = 1 - parseInt(E.value.style.top) / l, k = i / e;
1286
1290
  return t.l = c / 2 * (2 - k), t.s = c * k / (1 - Math.abs(2 * t.l - 1)), Number.isNaN(t.s) && (t.s = t.l), t.l = t.l > 1 ? 1 : t.l, t.s = t.s > 1 ? 1 : t.s, t;
1287
- }, me = () => {
1288
- const t = a.value.find((e) => e.select == !0);
1291
+ }, ve = () => {
1292
+ const t = n.value.find((e) => e.select == !0);
1289
1293
  if (t) {
1290
- const { l: e, s: l } = et(t.r, t.g, t.b);
1294
+ const { l: e, s: l } = tt(t.r, t.g, t.b);
1291
1295
  let i = e, s = l;
1292
1296
  Number.isNaN(s) && (s = i);
1293
- let c = { x: 0, y: 0 }, k = j.value.offsetWidth - R.value.offsetWidth, I = j.value.offsetHeight - R.value.offsetHeight;
1297
+ let c = { x: 0, y: 0 }, k = j.value.offsetWidth - E.value.offsetWidth, I = j.value.offsetHeight - E.value.offsetHeight;
1294
1298
  const [$, g] = 2 * i - 1 < 0 ? [
1295
1299
  k * 2 * s / (1 + s),
1296
1300
  I * (1 - i * (1 + s))
@@ -1301,58 +1305,58 @@ const It = { key: 1 }, Vt = {
1301
1305
  return c.x = $, c.y = g, c;
1302
1306
  } else
1303
1307
  return null;
1304
- }, Ne = () => {
1305
- const t = a.value.find((e) => e.select == !0);
1306
- t && (t.hue = ne.value);
1307
- }, oe = v(100), De = (t) => {
1308
- if (r.showAlpha) {
1309
- const e = a.value.find((l) => l.select == !0);
1310
- e && (e.a = parseInt(t), G());
1308
+ }, Ue = () => {
1309
+ const t = n.value.find((e) => e.select == !0);
1310
+ t && (t.hue = oe.value);
1311
+ }, ie = v(100), De = (t) => {
1312
+ if (u.showAlpha) {
1313
+ const e = n.value.find((l) => l.select == !0);
1314
+ e && (e.a = parseInt(t), z());
1311
1315
  }
1312
- }, He = (t) => {
1316
+ }, qe = (t) => {
1313
1317
  var l, i, s, c;
1314
1318
  const e = (i = (l = d.value) == null ? void 0 : l.querySelector(".gradient-handle-content")) == null ? void 0 : i.getBoundingClientRect();
1315
- return t === 0 ? "0px" : t === 100 && e ? `${(((s = le.value) == null ? void 0 : s.offsetWidth) || 0) - (e.width || 0)}px` : `${(((c = le.value) == null ? void 0 : c.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
1319
+ return t === 0 ? "0px" : t === 100 && e ? `${(((s = ae.value) == null ? void 0 : s.offsetWidth) || 0) - (e.width || 0)}px` : `${(((c = ae.value) == null ? void 0 : c.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
1316
1320
  };
1317
- let F = null, _ = null;
1318
- const Ve = (t) => {
1321
+ let q = null, K = null;
1322
+ const He = (t) => {
1319
1323
  var i, s;
1320
1324
  const l = t.target.offsetParent;
1321
1325
  if ((i = l == null ? void 0 : l.id) != null && i.includes("clr-gb-")) {
1322
1326
  const c = l.id.replace("clr-gb-", "");
1323
- _ = l;
1324
- const k = a.value.find((I) => I.select == !0);
1327
+ K = l;
1328
+ const k = n.value.find((I) => I.select == !0);
1325
1329
  if (k && k.id != c) {
1326
1330
  const I = (s = d.value) == null ? void 0 : s.querySelector(".gradient-handle.select");
1327
1331
  I == null || I.classList.remove("select"), l.classList.add("select");
1328
- const $ = a.value.findIndex((g) => g.select == !0);
1329
- for (let g = 0; g < a.value.length; g++) {
1330
- const S = a.value[g];
1332
+ const $ = n.value.findIndex((g) => g.select == !0);
1333
+ for (let g = 0; g < n.value.length; g++) {
1334
+ const S = n.value[g];
1331
1335
  if (S.id == c) {
1332
- $ != -1 && (a.value[$].select = !1), a.value[g].select = !0, oe.value = S.a, ce(S.r, S.g, S.b, S.hue, !0), K(), P();
1336
+ $ != -1 && (n.value[$].select = !1), n.value[g].select = !0, ie.value = S.a, me(S.r, S.g, S.b, S.hue, !0), ee(), a();
1333
1337
  break;
1334
1338
  }
1335
1339
  }
1336
1340
  }
1337
- window.addEventListener("mousemove", de), window.addEventListener("mouseup", he);
1341
+ window.addEventListener("mousemove", Ie), window.addEventListener("mouseup", Fe);
1338
1342
  }
1339
- }, he = () => {
1340
- window.removeEventListener("mousemove", de), window.removeEventListener("mouseup", Ve);
1341
- }, de = (t) => {
1343
+ }, Fe = () => {
1344
+ window.removeEventListener("mousemove", Ie), window.removeEventListener("mouseup", He);
1345
+ }, Ie = (t) => {
1342
1346
  var c, k;
1343
1347
  t.preventDefault();
1344
- const e = (k = (c = d.value) == null ? void 0 : c.querySelector(".gradient-handle-content")) == null ? void 0 : k.getBoundingClientRect(), l = F == null ? void 0 : F.getBoundingClientRect(), i = l.width - (e == null ? void 0 : e.width);
1348
+ const e = (k = (c = d.value) == null ? void 0 : c.querySelector(".gradient-handle-content")) == null ? void 0 : k.getBoundingClientRect(), l = q == null ? void 0 : q.getBoundingClientRect(), i = l.width - (e == null ? void 0 : e.width);
1345
1349
  let s = t.clientX - (l.left || 0) - ((e == null ? void 0 : e.width) || 0) / 2;
1346
- if (s < 0 ? s = 0 : s > i && (s = i), _) {
1347
- _.style.left = `${s}px`;
1348
- const I = parseFloat((s / ((l == null ? void 0 : l.width) - (e == null ? void 0 : e.width)) * 100).toFixed(0)), $ = a.value.find(
1349
- (g) => g.id == (_ == null ? void 0 : _.id.replace("clr-gb-", ""))
1350
+ if (s < 0 ? s = 0 : s > i && (s = i), K) {
1351
+ K.style.left = `${s}px`;
1352
+ const I = parseFloat((s / ((l == null ? void 0 : l.width) - (e == null ? void 0 : e.width)) * 100).toFixed(0)), $ = n.value.find(
1353
+ (g) => g.id == (K == null ? void 0 : K.id.replace("clr-gb-", ""))
1350
1354
  );
1351
- $ && ($.percent = I), G();
1355
+ $ && ($.percent = I), z();
1352
1356
  }
1353
- }, qe = (t) => {
1357
+ }, xe = (t) => {
1354
1358
  var I, $;
1355
- const e = F == null ? void 0 : F.getBoundingClientRect(), l = Math.round((t.clientX - ((e == null ? void 0 : e.left) || 0)) / ((e == null ? void 0 : e.width) || 1) * 100), i = a.value.findIndex((g) => g.select == !0), s = a.value[i], c = {
1359
+ const e = q == null ? void 0 : q.getBoundingClientRect(), l = Math.round((t.clientX - ((e == null ? void 0 : e.left) || 0)) / ((e == null ? void 0 : e.width) || 1) * 100), i = n.value.findIndex((g) => g.select == !0), s = n.value[i], c = {
1356
1360
  id: Date.now(),
1357
1361
  r: s.r,
1358
1362
  g: s.g,
@@ -1362,10 +1366,10 @@ const It = { key: 1 }, Vt = {
1362
1366
  hue: s.hue,
1363
1367
  select: !0
1364
1368
  };
1365
- a.value[i].select = !1;
1369
+ n.value[i].select = !1;
1366
1370
  const k = (I = d.value) == null ? void 0 : I.querySelector(".gradient-handle.select");
1367
- k == null || k.classList.remove("select"), a.value = [...a.value, c], be(c), _ = ($ = d.value) == null ? void 0 : $.querySelector(`#clr-gb-${c.id}`), G();
1368
- }, ye = (t) => {
1371
+ k == null || k.classList.remove("select"), n.value = [...n.value, c], Ve(c), K = ($ = d.value) == null ? void 0 : $.querySelector(`#clr-gb-${c.id}`), z();
1372
+ }, ue = (t) => {
1369
1373
  if (t.r == 0 && t.g == 0 && t.b == 0)
1370
1374
  return !0;
1371
1375
  if (t.r == 255 && t.g == 255 && t.b == 255)
@@ -1374,34 +1378,34 @@ const It = { key: 1 }, Vt = {
1374
1378
  const e = J.value.getContext("2d", { willReadFrequently: !0 }), l = J.value.width, i = J.value.height, s = e.getImageData(0, 0, l, i).data, c = t.r, k = t.g, I = t.b;
1375
1379
  for (let $ = 0; $ < i; $++)
1376
1380
  for (let g = 0; g < l; g++) {
1377
- const S = ($ * l + g) * 4, re = s[S], dt = s[S + 1], ct = s[S + 2];
1378
- if (re === c && dt === k && ct === I)
1381
+ const S = ($ * l + g) * 4, se = s[S], dt = s[S + 1], ct = s[S + 2];
1382
+ if (se === c && dt === k && ct === I)
1379
1383
  return !0;
1380
1384
  }
1381
1385
  return !1;
1382
1386
  }
1383
- }, ce = (t, e, l, i, s) => {
1387
+ }, me = (t, e, l, i, s) => {
1384
1388
  setTimeout(() => {
1385
- if (ye({ r: t, g: e, b: l })) {
1386
- let c = me();
1387
- c && (R.value.style.left = `${c.x}px`, R.value.style.top = `${c.y}px`);
1389
+ if (ue({ r: t, g: e, b: l })) {
1390
+ let c = ve();
1391
+ c && (E.value.style.left = `${c.x}px`, E.value.style.top = `${c.y}px`);
1388
1392
  } else {
1389
- let c = me();
1390
- c && (R.value.style.left = `${c.x}px`, R.value.style.top = `${c.y}px`), ne.value = i, Ie(s);
1393
+ let c = ve();
1394
+ c && (E.value.style.left = `${c.x}px`, E.value.style.top = `${c.y}px`), oe.value = i, Ce(s);
1391
1395
  }
1392
1396
  }, 0);
1393
- }, Te = () => {
1394
- a.value.forEach((l) => be(l)), Le();
1395
- const t = a.value[0];
1396
- ne.value = t.hue, Ie(!0);
1397
- let e = me();
1398
- e && (R.value.style.left = `${e.x}px`, R.value.style.top = `${e.y}px`), K(), G();
1399
- }, be = (t) => {
1400
- if (y.value == "gradient") {
1397
+ }, fe = () => {
1398
+ n.value.forEach((l) => Ve(l)), he();
1399
+ const t = n.value[0];
1400
+ oe.value = t.hue, Ce(!0);
1401
+ let e = ve();
1402
+ e && (E.value.style.left = `${e.x}px`, E.value.style.top = `${e.y}px`), ee(), z();
1403
+ }, Ve = (t) => {
1404
+ if (b.value == "gradient") {
1401
1405
  let e = document.createElement("div");
1402
- e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = He(t.percent);
1406
+ e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = qe(t.percent);
1403
1407
  let l = document.createElement("div");
1404
- l.classList.add("gradient-handle-content"), t.select == !0 && e.classList.add("select"), e.appendChild(l), F && F.appendChild(e);
1408
+ l.classList.add("gradient-handle-content"), t.select == !0 && e.classList.add("select"), e.appendChild(l), q && q.appendChild(e);
1405
1409
  }
1406
1410
  }, Me = (t) => {
1407
1411
  const e = J.value.getContext("2d", { willReadFrequently: !0 }), l = J.value.width, i = J.value.height;
@@ -1410,36 +1414,36 @@ const It = { key: 1 }, Vt = {
1410
1414
  s.addColorStop(0, "rgb(255,255,255)"), s.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = s, e.fillRect(0, 0, l, i);
1411
1415
  let c = e.createLinearGradient(0, 0, 0, i);
1412
1416
  c.addColorStop(0, "rgba(0,0,0,0)"), c.addColorStop(1, "rgb(0,0,0)"), e.fillStyle = c, e.fillRect(0, 0, l, i);
1413
- }, K = () => {
1414
- if (r.showAlpha) {
1415
- let t = a.value.find((e) => e.select == !0);
1417
+ }, ee = () => {
1418
+ if (u.showAlpha) {
1419
+ let t = n.value.find((e) => e.select == !0);
1416
1420
  t && (U.value.style.background = ` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${t.r}, ${t.g}, ${t.b}, 100) 97%)`);
1417
1421
  }
1418
- }, G = () => {
1422
+ }, z = () => {
1419
1423
  var t;
1420
- if (y.value == "gradient") {
1421
- a.value.sort((s, c) => s.percent - c.percent);
1424
+ if (b.value == "gradient") {
1425
+ n.value.sort((s, c) => s.percent - c.percent);
1422
1426
  let e = "linear-gradient(90deg, ", l;
1423
1427
  if (T.value == "linear") {
1424
1428
  l = `linear-gradient(${B.angle}deg, `;
1425
- for (let s = 0; s < a.value.length; s++) {
1426
- const { r: c, g: k, b: I, a: $, percent: g } = a.value[s];
1427
- a.value.length - 1 == s ? (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `);
1429
+ for (let s = 0; s < n.value.length; s++) {
1430
+ const { r: c, g: k, b: I, a: $, percent: g } = n.value[s];
1431
+ n.value.length - 1 == s ? (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `);
1428
1432
  }
1429
1433
  } else {
1430
1434
  l = `radial-gradient(circle at ${B.percentageX}% ${B.percentageY}%, `;
1431
- for (let s = 0; s < a.value.length; s++) {
1432
- const { r: c, g: k, b: I, a: $, percent: g } = a.value[s];
1433
- a.value.length - 1 == s ? (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `);
1435
+ for (let s = 0; s < n.value.length; s++) {
1436
+ const { r: c, g: k, b: I, a: $, percent: g } = n.value[s];
1437
+ n.value.length - 1 == s ? (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${c},${k},${I},${$ / 100}) ${g}%, `);
1434
1438
  }
1435
1439
  }
1436
- le.value.style.backgroundImage = e;
1440
+ ae.value.style.backgroundImage = e;
1437
1441
  let i = (t = d.value) == null ? void 0 : t.querySelector("#ck-cp-target-background");
1438
- i && (i.style.backgroundImage = l, X.value && p(i.style.backgroundImage));
1442
+ i && (i.style.backgroundImage = l, P.value && p(i.style.backgroundImage));
1439
1443
  } else {
1440
- const { r: e, g: l, b: i, a: s } = a.value[0];
1444
+ const { r: e, g: l, b: i, a: s } = n.value[0];
1441
1445
  let c = "";
1442
- switch (r.type) {
1446
+ switch (u.type) {
1443
1447
  case "HEX8":
1444
1448
  c = kt(e, l, i, s / 100);
1445
1449
  break;
@@ -1450,87 +1454,87 @@ const It = { key: 1 }, Vt = {
1450
1454
  c = `rgb(${e},${l},${i})`;
1451
1455
  break;
1452
1456
  case "HEX":
1453
- c = tt(e, l, i);
1457
+ c = lt(e, l, i);
1454
1458
  break;
1455
1459
  }
1456
1460
  p(c);
1457
1461
  }
1458
- }, Le = () => {
1459
- a.value.forEach((t) => {
1462
+ }, he = () => {
1463
+ n.value.forEach((t) => {
1460
1464
  t.hue = Qe(t.r, t.g, t.b);
1461
1465
  });
1462
- }, Fe = (t) => {
1463
- T.value = t, G();
1464
- }, Ge = () => {
1466
+ }, Te = (t) => {
1467
+ T.value = t, z();
1468
+ }, Le = () => {
1465
1469
  var t, e;
1466
- if (a.value.length > 2) {
1467
- const l = a.value.findIndex((i) => i.select == !0);
1470
+ if (n.value.length > 2) {
1471
+ const l = n.value.findIndex((i) => i.select == !0);
1468
1472
  if (l !== -1) {
1469
- const i = a.value[l].id;
1470
- a.value.splice(l, 1);
1473
+ const i = n.value[l].id;
1474
+ n.value.splice(l, 1);
1471
1475
  const s = (t = d.value) == null ? void 0 : t.querySelector(`#clr-gb-${i}`);
1472
1476
  s == null || s.remove();
1473
- const c = a.value[0];
1474
- c && (c.select = !0, _ = (e = d.value) == null ? void 0 : e.querySelector(`#clr-gb-${c.id}`), _ == null || _.classList.add("select"), ce(c.r, c.g, c.b, c.hue, !1), P(), G());
1477
+ const c = n.value[0];
1478
+ c && (c.select = !0, K = (e = d.value) == null ? void 0 : e.querySelector(`#clr-gb-${c.id}`), K == null || K.classList.add("select"), me(c.r, c.g, c.b, c.hue, !1), a(), z());
1475
1479
  }
1476
1480
  }
1477
- }, Ye = () => {
1481
+ }, Ge = () => {
1478
1482
  var l;
1479
1483
  const t = (l = d.value) == null ? void 0 : l.querySelector("#cp-btn-eyedropper");
1480
1484
  t == null || t.classList.add("active"), new EyeDropper().open().then((i) => {
1481
- const { sRGBHex: s } = i, c = a.value.find((I) => I.select == !0), k = ze(s);
1485
+ const { sRGBHex: s } = i, c = n.value.find((I) => I.select == !0), k = je(s);
1482
1486
  if (k) {
1483
1487
  const I = Qe(k.r, k.g, k.b);
1484
- if (c && (c.hue = I, c.r = k.r, c.g = k.g, c.b = k.b), ye(k)) {
1485
- const $ = me();
1486
- $ && (R.value.style.left = `${$.x}px`, R.value.style.top = `${$.y}px`);
1488
+ if (c && (c.hue = I, c.r = k.r, c.g = k.g, c.b = k.b), ue(k)) {
1489
+ const $ = ve();
1490
+ $ && (E.value.style.left = `${$.x}px`, E.value.style.top = `${$.y}px`);
1487
1491
  } else {
1488
- ne.value = I;
1489
- const { rgb: $ } = lt(I, 100, 50);
1492
+ oe.value = I;
1493
+ const { rgb: $ } = at(I, 100, 50);
1490
1494
  Me($);
1491
- const g = me();
1492
- g && (R.value.style.left = `${g.x}px`, R.value.style.top = `${g.y}px`);
1495
+ const g = ve();
1496
+ g && (E.value.style.left = `${g.x}px`, E.value.style.top = `${g.y}px`);
1493
1497
  }
1494
- P(), K(), G(), t == null || t.classList.remove("active");
1498
+ a(), ee(), z(), t == null || t.classList.remove("active");
1495
1499
  }
1496
1500
  }).catch(() => {
1497
1501
  t == null || t.classList.remove("active");
1498
1502
  });
1499
- }, u = (t) => {
1503
+ }, Ye = (t) => {
1500
1504
  const { value: e, type: l } = t;
1501
1505
  if (l != "a") {
1502
- const i = a.value.find((s) => s.select == !0);
1506
+ const i = n.value.find((s) => s.select == !0);
1503
1507
  if (i) {
1504
1508
  i.r = parseInt(e.r), i.g = parseInt(e.g), i.b = parseInt(e.b);
1505
1509
  const s = Qe(i.r, i.g, i.b);
1506
- i.hue = s, ce(i.r, i.g, i.b, i.hue, !0), G(), K();
1510
+ i.hue = s, me(i.r, i.g, i.b, i.hue, !0), z(), ee();
1507
1511
  }
1508
1512
  } else
1509
- oe.value = e, G(), K();
1510
- }, o = (t) => {
1511
- q.h = t.h, q.s = t.s, q.l = t.l;
1512
- const e = a.value.find((l) => l.select == !0);
1513
- if (e && !Number.isNaN(q.h) && !Number.isNaN(q.s) && !Number.isNaN(q.l)) {
1514
- const { r: l, g: i, b: s } = at(q.h, q.s / 100, q.l / 100);
1515
- e.hue = q.h, e.r = l, e.g = i, e.b = s, ce(e.r, e.g, e.b, e.hue, !0), G(), K();
1513
+ ie.value = e, z(), ee();
1514
+ }, We = (t) => {
1515
+ X.h = t.h, X.s = t.s, X.l = t.l;
1516
+ const e = n.value.find((l) => l.select == !0);
1517
+ if (e && !Number.isNaN(X.h) && !Number.isNaN(X.s) && !Number.isNaN(X.l)) {
1518
+ const { r: l, g: i, b: s } = nt(X.h, X.s / 100, X.l / 100);
1519
+ e.hue = X.h, e.r = l, e.g = i, e.b = s, me(e.r, e.g, e.b, e.hue, !0), z(), ee();
1516
1520
  }
1517
- }, b = () => {
1518
- if (z.value) {
1519
- const t = ze(z.value);
1521
+ }, r = () => {
1522
+ if (W.value) {
1523
+ const t = je(W.value);
1520
1524
  if (t) {
1521
- const e = Qe(t.r, t.g, t.b), l = a.value.find((i) => i.select == !0);
1522
- l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, ce(t.r, t.g, t.b, l.hue, !0), G(), K(), pe(O.value));
1525
+ const e = Qe(t.r, t.g, t.b), l = n.value.find((i) => i.select == !0);
1526
+ l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, me(t.r, t.g, t.b, l.hue, !0), z(), ee(), te(O.value));
1523
1527
  }
1524
1528
  }
1525
- }, P = () => {
1526
- const t = a.value.find((e) => e.select == !0);
1527
- t && (z.value = tt(t.r, t.g, t.b).toUpperCase()), pe(O.value);
1528
- }, se = (t) => {
1529
- f("last-used-pick", t);
1529
+ }, a = () => {
1530
+ const t = n.value.find((e) => e.select == !0);
1531
+ t && (W.value = lt(t.r, t.g, t.b).toUpperCase()), te(O.value);
1532
+ }, f = (t) => {
1533
+ h("last-used-pick", t);
1530
1534
  };
1531
1535
  window.EyeDropper && (M.value = !0);
1532
- const xe = (t = "") => {
1533
- if (y.value == "gradient") {
1536
+ const F = (t = "") => {
1537
+ if (b.value == "gradient") {
1534
1538
  let e = t.includes("linear") ? "linear" : "radial", l = [];
1535
1539
  if (T.value = e, e == "linear") {
1536
1540
  let i = /^linear-gradient\((.*)\)$/, s = t.replace(";", "").trim().match(i), c = /,\s*(?![^()]*\))/;
@@ -1552,10 +1556,10 @@ const It = { key: 1 }, Vt = {
1552
1556
  B.angle = parseInt($.replace("deg", ""));
1553
1557
  else if ($.includes("rgba")) {
1554
1558
  let S = $.trim().replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
1555
- S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
1559
+ S = S.filter((se) => se.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
1556
1560
  } else if ($.includes("rgb")) {
1557
1561
  let S = $.trim().replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
1558
- S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
1562
+ S = S.filter((se) => se.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
1559
1563
  }
1560
1564
  }
1561
1565
  }
@@ -1580,15 +1584,15 @@ const It = { key: 1 }, Vt = {
1580
1584
  B.percentageX = parseInt(S[0]), B.percentageY = parseInt(S[1]);
1581
1585
  } else if ($.includes("rgba")) {
1582
1586
  let S = $.replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
1583
- S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
1587
+ S = S.filter((se) => se.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
1584
1588
  } else if ($.includes("rgb")) {
1585
1589
  let S = $.replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
1586
- S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
1590
+ S = S.filter((se) => se.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
1587
1591
  }
1588
1592
  }
1589
1593
  }
1590
1594
  }
1591
- l.length > 1 && (a.value = l, a.value[0].select = !0, oe.value = a.value[0].a);
1595
+ l.length > 1 && (n.value = l, n.value[0].select = !0, ie.value = n.value[0].a);
1592
1596
  } else if (t) {
1593
1597
  let e = {
1594
1598
  r: 0,
@@ -1600,7 +1604,7 @@ const It = { key: 1 }, Vt = {
1600
1604
  if (t.length >= 8)
1601
1605
  e = $t(t);
1602
1606
  else {
1603
- let l = ze(t);
1607
+ let l = je(t);
1604
1608
  l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
1605
1609
  }
1606
1610
  else if (t.includes("rgb"))
@@ -1610,73 +1614,73 @@ const It = { key: 1 }, Vt = {
1610
1614
  let l = St(t);
1611
1615
  l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
1612
1616
  }
1613
- e && (a.value[0].r = e.r, a.value[0].b = e.b, a.value[0].g = e.g, a.value[0].a = parseInt((e.a * 100).toFixed(0)), oe.value = a.value[0].a, a.value[0].hue = 0);
1617
+ e && (n.value[0].r = e.r, n.value[0].b = e.b, n.value[0].g = e.g, n.value[0].a = parseInt((e.a * 100).toFixed(0)), ie.value = n.value[0].a, n.value[0].hue = 0);
1614
1618
  }
1615
- }, pe = (t) => {
1616
- const e = a.value.find((l) => l.select == !0);
1619
+ }, te = (t) => {
1620
+ const e = n.value.find((l) => l.select == !0);
1617
1621
  if (e) {
1618
1622
  switch (t) {
1619
1623
  case "RGB":
1620
1624
  break;
1621
1625
  case "HSL": {
1622
- const { h: l, s: i, l: s } = et(e.r, e.g, e.b);
1623
- q.h = Math.round(l), q.s = Math.round(i * 100), q.l = Math.round(s * 100);
1626
+ const { h: l, s: i, l: s } = tt(e.r, e.g, e.b);
1627
+ X.h = Math.round(l), X.s = Math.round(i * 100), X.l = Math.round(s * 100);
1624
1628
  break;
1625
1629
  }
1626
1630
  }
1627
1631
  O.value = t;
1628
1632
  }
1629
- }, ke = (t) => {
1630
- t && xe(t), Te();
1633
+ }, de = (t) => {
1634
+ t && F(t), fe();
1631
1635
  };
1632
- fe(
1633
- () => r.modelValue,
1636
+ ye(
1637
+ () => u.modelValue,
1634
1638
  (t, e) => {
1635
- t !== e && t !== C.value && (a.value.forEach((l) => {
1636
- const i = F == null ? void 0 : F.querySelector(`#clr-gb-${l.id}`);
1639
+ t !== e && t !== C.value && (n.value.forEach((l) => {
1640
+ const i = q == null ? void 0 : q.querySelector(`#clr-gb-${l.id}`);
1637
1641
  i == null || i.remove();
1638
- }), ke(t));
1642
+ }), de(t));
1639
1643
  }
1640
1644
  );
1641
- const ut = (t) => {
1642
- a.value.forEach((e) => {
1643
- const l = F == null ? void 0 : F.querySelector(`#clr-gb-${e.id}`);
1645
+ const Be = (t) => {
1646
+ n.value.forEach((e) => {
1647
+ const l = q == null ? void 0 : q.querySelector(`#clr-gb-${e.id}`);
1644
1648
  l == null || l.remove();
1645
- }), t !== "solid" ? (y.value = "gradient", setTimeout(() => {
1649
+ }), t !== "solid" ? (b.value = "gradient", setTimeout(() => {
1646
1650
  var e;
1647
- F = (e = d.value) == null ? void 0 : e.querySelector(".gradient-bar"), Fe(t), Te();
1648
- }, 200)) : t === "solid" && (y.value = "solid", a.value = a.value.map((e) => (e.select = !1, e)), a.value[0].select = !0, setTimeout(() => {
1649
- ke(r.modelValue);
1651
+ q = (e = d.value) == null ? void 0 : e.querySelector(".gradient-bar"), Te(t), fe();
1652
+ }, 200)) : t === "solid" && (b.value = "solid", n.value = n.value.map((e) => (e.select = !1, e)), n.value[0].select = !0, setTimeout(() => {
1653
+ de(u.modelValue);
1650
1654
  }, 200));
1651
1655
  };
1652
- return Je(() => {
1656
+ return _e(() => {
1653
1657
  var t;
1654
- y.value = r.modelValue.includes("linear") || r.modelValue.includes("radial") ? "gradient" : "solid", y.value == "gradient" && (F = (t = d.value) == null ? void 0 : t.querySelector(".gradient-bar")), ke(r.modelValue), pe(O.value), ft(() => {
1655
- X.value = !0;
1658
+ b.value = u.modelValue.includes("linear") || u.modelValue.includes("radial") ? "gradient" : "solid", b.value == "gradient" && (q = (t = d.value) == null ? void 0 : t.querySelector(".gradient-bar")), de(u.modelValue), te(O.value), ft(() => {
1659
+ P.value = !0;
1656
1660
  });
1657
- }), (t, e) => (m(), E("div", {
1661
+ }), (t, e) => (m(), R("div", {
1658
1662
  ref_key: "pickerTemplateRef",
1659
1663
  ref: d,
1660
- class: Q(["ck-cp-container", n.disabled ? "ck-cp-disabled " : ""]),
1661
- "cp-theme": n.theme
1664
+ class: Q(["ck-cp-container", o.disabled ? "ck-cp-disabled " : ""]),
1665
+ "cp-theme": o.theme
1662
1666
  }, [
1663
- n.variant == "gradient" ? (m(), E("div", rl, [
1667
+ o.variant == "gradient" ? (m(), R("div", rl, [
1664
1668
  L(il, {
1665
1669
  class: "mr-auto",
1666
- variant: n.variant,
1667
- mode: y.value,
1668
- "model-value": n.modelValue,
1669
- iconClasses: n.iconClasses,
1670
+ variant: o.variant,
1671
+ mode: b.value,
1672
+ "model-value": o.modelValue,
1673
+ iconClasses: o.iconClasses,
1670
1674
  gradientType: T.value,
1671
- onOnChangeMode: ut
1675
+ onOnChangeMode: Be
1672
1676
  }, null, 8, ["variant", "mode", "model-value", "iconClasses", "gradientType"])
1673
1677
  ])) : D("", !0),
1674
- y.value == "gradient" && n.variant == "gradient" ? (m(), E("div", ul, [
1678
+ b.value == "gradient" && o.variant == "gradient" ? (m(), R("div", ul, [
1675
1679
  L(Kt, {
1676
1680
  gradientType: T.value,
1677
- onOnAddColor: qe,
1678
- onOnMouseDown: Ve,
1679
- onOnDeleteColor: Ge
1681
+ onOnAddColor: xe,
1682
+ onOnMouseDown: He,
1683
+ onOnDeleteColor: Le
1680
1684
  }, null, 8, ["gradientType"]),
1681
1685
  L(ll, {
1682
1686
  percentageY: B.percentageY,
@@ -1686,102 +1690,102 @@ const It = { key: 1 }, Vt = {
1686
1690
  percentageX: B.percentageX,
1687
1691
  "onUpdate:percentageX": e[2] || (e[2] = (l) => B.percentageX = l),
1688
1692
  inputType: O.value,
1689
- mode: y.value,
1693
+ mode: b.value,
1690
1694
  gradientType: T.value,
1691
- onOnInput: G
1695
+ onOnInput: z
1692
1696
  }, null, 8, ["percentageY", "angle", "percentageX", "inputType", "mode", "gradientType"])
1693
- ])) : (m(), E("div", dl, [
1694
- n.presetColors ? (m(), E("div", cl, [
1695
- e[10] || (e[10] = h("div", { class: "text-oc-text-400 text-sm my-3 font-medium" }, "Choose color", -1)),
1696
- h("div", pl, [
1697
- (m(!0), E(ge, null, Ke(n.presetColors, (l) => (m(), E("div", {
1697
+ ])) : (m(), R("div", dl, [
1698
+ o.presetColors ? (m(), R("div", cl, [
1699
+ e[10] || (e[10] = y("div", { class: "text-oc-text-400 text-sm my-3 font-medium" }, "Choose color", -1)),
1700
+ y("div", pl, [
1701
+ (m(!0), R(ce, null, Ze(o.presetColors, (l) => (m(), R("div", {
1698
1702
  key: `color-${l}`,
1699
1703
  class: "ck-cp-color-item !w-[32px] !h-[32px]",
1700
- style: te(`background:${l}`),
1701
- onClick: (i) => se(l)
1704
+ style: le(`background:${l}`),
1705
+ onClick: (i) => f(l)
1702
1706
  }, null, 12, gl))), 128))
1703
1707
  ])
1704
1708
  ])) : D("", !0)
1705
1709
  ])),
1706
- L(al, { onOnMouseDown: Xe }),
1707
- h("div", vl, [
1710
+ L(al, { onOnMouseDown: Ne }),
1711
+ y("div", vl, [
1708
1712
  L(_t, {
1709
1713
  class: Q(M.value ? "max-w-[90%]" : ""),
1710
- modelValue: ne.value,
1711
- "onUpdate:modelValue": e[3] || (e[3] = (l) => ne.value = l),
1712
- onOnInput: e[4] || (e[4] = (l) => Ie(!1)),
1713
- onOnChange: Ne
1714
+ modelValue: oe.value,
1715
+ "onUpdate:modelValue": e[3] || (e[3] = (l) => oe.value = l),
1716
+ onOnInput: e[4] || (e[4] = (l) => Ce(!1)),
1717
+ onOnChange: Ue
1714
1718
  }, null, 8, ["class", "modelValue"]),
1715
- M.value ? (m(), E("button", {
1719
+ M.value ? (m(), R("button", {
1716
1720
  key: 0,
1717
1721
  id: "cp-btn-eyedropper",
1718
1722
  type: "button",
1719
1723
  class: "cp-btn",
1720
1724
  style: { padding: "7px" },
1721
- onClick: Ye
1725
+ onClick: Ge
1722
1726
  }, [...e[11] || (e[11] = [
1723
- h("svg", {
1727
+ y("svg", {
1724
1728
  version: "1.1",
1725
1729
  xmlns: "http://www.w3.org/2000/svg",
1726
1730
  width: "32",
1727
1731
  height: "32",
1728
1732
  viewBox: "0 0 32 32"
1729
1733
  }, [
1730
- h("path", { d: "M21.35 1.825l-6.344 6.35-0.588-0.588c-0.781-0.781-2.050-0.781-2.831 0s-0.781 2.050 0 2.831l10 10c0.781 0.781 2.050 0.781 2.831 0s0.781-2.050 0-2.831l-0.587-0.587 6.344-6.35c2.438-2.438 2.438-6.388 0-8.819s-6.387-2.438-8.819 0zM3.462 20.206c-0.938 0.938-1.462 2.212-1.462 3.538v2.65l-1.663 2.494c-0.531 0.794-0.425 1.85 0.25 2.525s1.731 0.781 2.525 0.25l2.494-1.663h2.65c1.325 0 2.6-0.525 3.537-1.462l7.544-7.544-2.831-2.831-7.544 7.544c-0.188 0.188-0.444 0.294-0.706 0.294h-2.256v-2.256c0-0.262 0.106-0.519 0.294-0.706l7.544-7.544-2.831-2.831-7.544 7.544z" })
1734
+ y("path", { d: "M21.35 1.825l-6.344 6.35-0.588-0.588c-0.781-0.781-2.050-0.781-2.831 0s-0.781 2.050 0 2.831l10 10c0.781 0.781 2.050 0.781 2.831 0s0.781-2.050 0-2.831l-0.587-0.587 6.344-6.35c2.438-2.438 2.438-6.388 0-8.819s-6.387-2.438-8.819 0zM3.462 20.206c-0.938 0.938-1.462 2.212-1.462 3.538v2.65l-1.663 2.494c-0.531 0.794-0.425 1.85 0.25 2.525s1.731 0.781 2.525 0.25l2.494-1.663h2.65c1.325 0 2.6-0.525 3.537-1.462l7.544-7.544-2.831-2.831-7.544 7.544c-0.188 0.188-0.444 0.294-0.706 0.294h-2.256v-2.256c0-0.262 0.106-0.519 0.294-0.706l7.544-7.544-2.831-2.831-7.544 7.544z" })
1731
1735
  ], -1)
1732
1736
  ])])) : D("", !0)
1733
1737
  ]),
1734
- n.showAlpha ? (m(), N(jt, {
1738
+ o.showAlpha ? (m(), N(jt, {
1735
1739
  key: 3,
1736
- modelValue: oe.value,
1737
- "onUpdate:modelValue": e[5] || (e[5] = (l) => oe.value = l),
1740
+ modelValue: ie.value,
1741
+ "onUpdate:modelValue": e[5] || (e[5] = (l) => ie.value = l),
1738
1742
  onOnInput: e[6] || (e[6] = (l) => De(l.target.value))
1739
1743
  }, null, 8, ["modelValue"])) : D("", !0),
1740
- ht(h("div", ml, null, 512), [
1744
+ ht(y("div", ml, null, 512), [
1741
1745
  [yt, !1]
1742
1746
  ]),
1743
- h("div", fl, [
1747
+ y("div", fl, [
1744
1748
  L(Gt, {
1745
1749
  "model-value": O.value,
1746
- "onUpdate:modelValue": pe
1750
+ "onUpdate:modelValue": te
1747
1751
  }, null, 8, ["model-value"]),
1748
- X.value && n.showInputSet ? (m(), E("div", hl, [
1749
- O.value == "HEX" ? (m(), N(Nt, {
1752
+ P.value && o.showInputSet ? (m(), R("div", hl, [
1753
+ O.value == "HEX" ? (m(), N(Xt, {
1750
1754
  key: 0,
1751
- modelValue: z.value,
1755
+ modelValue: W.value,
1752
1756
  "onUpdate:modelValue": [
1753
- e[7] || (e[7] = (l) => z.value = l),
1754
- b
1757
+ e[7] || (e[7] = (l) => W.value = l),
1758
+ r
1755
1759
  ]
1756
1760
  }, null, 8, ["modelValue"])) : D("", !0),
1757
- O.value == "RGB" ? (m(), N(nt, {
1761
+ O.value == "RGB" ? (m(), N(ot, {
1758
1762
  key: 1,
1759
- "rgb-value": a.value.find((l) => l.select == !0),
1760
- onUpdateRgbValue: u
1763
+ "rgb-value": n.value.find((l) => l.select == !0),
1764
+ onUpdateRgbValue: Ye
1761
1765
  }, null, 8, ["rgb-value"])) : D("", !0),
1762
- O.value == "HSL" ? (m(), N(nt, {
1766
+ O.value == "HSL" ? (m(), N(ot, {
1763
1767
  key: 2,
1764
1768
  "input-type": "HSL",
1765
- "hsl-value": q,
1766
- onUpdateHslValue: o
1769
+ "hsl-value": X,
1770
+ onUpdateHslValue: We
1767
1771
  }, null, 8, ["hsl-value"])) : D("", !0),
1768
- n.showAlpha ? (m(), N(Ft, {
1772
+ o.showAlpha ? (m(), N(Ft, {
1769
1773
  key: 3,
1770
- modelValue: oe.value,
1774
+ modelValue: ie.value,
1771
1775
  "onUpdate:modelValue": [
1772
- e[8] || (e[8] = (l) => oe.value = l),
1776
+ e[8] || (e[8] = (l) => ie.value = l),
1773
1777
  e[9] || (e[9] = (l) => De(l))
1774
1778
  ]
1775
1779
  }, null, 8, ["modelValue"])) : D("", !0)
1776
1780
  ])) : D("", !0)
1777
1781
  ]),
1778
- e[12] || (e[12] = h("div", { class: "text-oc-text-400 text-sm my-3 font-medium font-inter" }, "Last used", -1)),
1779
- H.value.length > 0 && n.showColorList ? (m(), E("div", yl, [
1780
- (m(!0), E(ge, null, Ke(Z.value, (l) => (m(), E("div", {
1782
+ e[12] || (e[12] = y("div", { class: "text-oc-text-400 text-sm my-3 font-medium font-inter" }, "Last used", -1)),
1783
+ H.value.length > 0 && o.showColorList ? (m(), R("div", yl, [
1784
+ (m(!0), R(ce, null, Ze(Z.value, (l) => (m(), R("div", {
1781
1785
  key: `color-${l}`,
1782
1786
  class: "ck-cp-color-item !w-[32px] !h-[32px]",
1783
- style: te(`background:${l}`),
1784
- onClick: (i) => se(l)
1787
+ style: le(`background:${l}`),
1788
+ onClick: (i) => f(l)
1785
1789
  }, null, 12, bl))), 128))
1786
1790
  ])) : D("", !0)
1787
1791
  ], 10, sl));
@@ -1792,7 +1796,7 @@ const It = { key: 1 }, Vt = {
1792
1796
  }, Sl = {
1793
1797
  key: 0,
1794
1798
  class: "text-sm text-oc-text-400"
1795
- }, El = {
1799
+ }, Rl = {
1796
1800
  __name: "OcOnboardingProgressbar",
1797
1801
  props: {
1798
1802
  title: {
@@ -1812,8 +1816,8 @@ const It = { key: 1 }, Vt = {
1812
1816
  default: () => []
1813
1817
  }
1814
1818
  },
1815
- setup(n) {
1816
- const V = n, r = $e(() => ({
1819
+ setup(o) {
1820
+ const V = o, u = ke(() => ({
1817
1821
  grid: {
1818
1822
  containLabel: !1
1819
1823
  },
@@ -1841,29 +1845,29 @@ const It = { key: 1 }, Vt = {
1841
1845
  }
1842
1846
  ]
1843
1847
  }));
1844
- return (y, d) => (m(), E("div", kl, [
1848
+ return (b, d) => (m(), R("div", kl, [
1845
1849
  L(w(Ct), {
1846
1850
  class: "w-[140px] bg-white rounded-full h-[140px]",
1847
- "additional-options": r.value,
1851
+ "additional-options": u.value,
1848
1852
  "tooltip-formatter": () => null,
1849
1853
  "tooltip-value-formatter": () => null
1850
1854
  }, null, 8, ["additional-options"]),
1851
- h("div", $l, [
1852
- n.title ? (m(), E("span", wl, Pe(n.title), 1)) : D("", !0),
1853
- je(y.$slots, "description", {}, () => [
1854
- n.description ? (m(), E("span", Sl, Pe(n.description), 1)) : D("", !0)
1855
+ y("div", $l, [
1856
+ o.title ? (m(), R("span", wl, Pe(o.title), 1)) : D("", !0),
1857
+ Ke(b.$slots, "description", {}, () => [
1858
+ o.description ? (m(), R("span", Sl, Pe(o.description), 1)) : D("", !0)
1855
1859
  ])
1856
1860
  ])
1857
1861
  ]));
1858
1862
  }
1859
- }, Ol = it(
1860
- () => import("./OcCodeBlock-DBRj4Nc-.js").then((n) => n.O)
1861
- ), Ul = it(
1863
+ }, Ol = st(
1864
+ () => import("./OcCodeBlock-DBRj4Nc-.js").then((o) => o.O)
1865
+ ), Ul = st(
1862
1866
  () => import("./OcLottieAnimation-DtD2oJib.js")
1863
1867
  );
1864
1868
  export {
1865
1869
  Al as BarChart,
1866
- Xl as BarRaceChart,
1870
+ Nl as BarRaceChart,
1867
1871
  ql as Card,
1868
1872
  Ol as CodeBlock,
1869
1873
  Vt as ColorPicker,
@@ -1871,8 +1875,8 @@ export {
1871
1875
  Ml as LineChart,
1872
1876
  Ul as LottieAnimation,
1873
1877
  Gl as OcOverviewPieChart,
1874
- El as OnboardingProgressbar,
1878
+ Rl as OnboardingProgressbar,
1875
1879
  Wl as OverviewMonthlyBarChart,
1876
1880
  Ct as PieChart,
1877
- Rl as TextEditor
1881
+ El as TextEditor
1878
1882
  };