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