@enos5/enos-vue-default 1.8.0 → 1.8.3

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.
@@ -1,6 +1,7 @@
1
1
  import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode, Transition, withCtx, mergeProps, useSlots, unref, withDirectives, vShow, useAttrs, vModelCheckbox, onMounted, nextTick, onBeforeUnmount, Teleport, withModifiers, onUnmounted, inject, provide, defineComponent, isVNode, cloneVNode, resolveDynamicComponent, createTextVNode, h, vModelText, createSlots } from "vue";
2
- import { LockClosedIcon, ChevronDownIcon, PhotoIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
2
+ import { LockClosedIcon, ChevronDownIcon, PhotoIcon, EyeDropperIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
3
3
  import Editor from "@tinymce/tinymce-vue";
4
+ import { useI18n } from "vue-i18n";
4
5
  import { Link } from "@inertiajs/vue3";
5
6
  const _hoisted_1$E = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
6
7
  const _hoisted_2$o = {
@@ -306,7 +307,7 @@ const _hoisted_1$B = { class: "md:col-span-1 flex justify-between" };
306
307
  const _hoisted_2$m = { class: "px-4 sm:px-0" };
307
308
  const _hoisted_3$g = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
308
309
  const _hoisted_4$b = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
309
- const _hoisted_5$8 = { class: "px-4 sm:px-0" };
310
+ const _hoisted_5$9 = { class: "px-4 sm:px-0" };
310
311
  function _sfc_render(_ctx, _cache) {
311
312
  return openBlock(), createElementBlock("div", _hoisted_1$B, [
312
313
  createElementVNode("div", _hoisted_2$m, [
@@ -317,7 +318,7 @@ function _sfc_render(_ctx, _cache) {
317
318
  renderSlot(_ctx.$slots, "description")
318
319
  ])
319
320
  ]),
320
- createElementVNode("div", _hoisted_5$8, [
321
+ createElementVNode("div", _hoisted_5$9, [
321
322
  renderSlot(_ctx.$slots, "aside")
322
323
  ])
323
324
  ]);
@@ -621,21 +622,21 @@ const _hoisted_2$k = {
621
622
  };
622
623
  const _hoisted_3$e = ["type", "value", "disabled"];
623
624
  const _hoisted_4$a = ["aria-label"];
624
- const _hoisted_5$7 = {
625
+ const _hoisted_5$8 = {
625
626
  key: 0,
626
627
  class: "h-5 w-5",
627
628
  fill: "none",
628
629
  stroke: "currentColor",
629
630
  viewBox: "0 0 24 24"
630
631
  };
631
- const _hoisted_6$7 = {
632
+ const _hoisted_6$8 = {
632
633
  key: 1,
633
634
  class: "h-5 w-5",
634
635
  fill: "none",
635
636
  stroke: "currentColor",
636
637
  viewBox: "0 0 24 24"
637
638
  };
638
- const DEFAULT_MAX_LENGTH$2 = 254;
639
+ const DEFAULT_MAX_LENGTH$1 = 254;
639
640
  const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
640
641
  __name: "TextInput",
641
642
  props: {
@@ -666,7 +667,7 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
666
667
  const inputAttrs = computed(() => {
667
668
  const { class: _class, type: _type, ...rest } = attrs;
668
669
  if (rest.maxlength === void 0) {
669
- rest.maxlength = DEFAULT_MAX_LENGTH$2;
670
+ rest.maxlength = DEFAULT_MAX_LENGTH$1;
670
671
  }
671
672
  return rest;
672
673
  });
@@ -718,14 +719,14 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
718
719
  "aria-label": revealed.value ? "Hide password" : "Show password",
719
720
  onClick: toggleVisibility
720
721
  }, [
721
- revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$7, [..._cache[2] || (_cache[2] = [
722
+ revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$8, [..._cache[2] || (_cache[2] = [
722
723
  createElementVNode("path", {
723
724
  "stroke-linecap": "round",
724
725
  "stroke-linejoin": "round",
725
726
  "stroke-width": "2",
726
727
  d: "M13.875 18.825A10.05 10.05 0 0112 19c-5 0-9.27-3.11-11-7 1.01-2.27 2.78-4.1 5-5.32m3.08-1.3A9.96 9.96 0 0112 5c5 0 9.27 3.11 11 7a11.03 11.03 0 01-4.16 4.91M15 12a3 3 0 00-3-3m0 0a3 3 0 00-2.94 3.59M3 3l18 18"
727
728
  }, null, -1)
728
- ])])) : (openBlock(), createElementBlock("svg", _hoisted_6$7, [..._cache[3] || (_cache[3] = [
729
+ ])])) : (openBlock(), createElementBlock("svg", _hoisted_6$8, [..._cache[3] || (_cache[3] = [
729
730
  createElementVNode("path", {
730
731
  "stroke-linecap": "round",
731
732
  "stroke-linejoin": "round",
@@ -745,7 +746,7 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
745
746
  }
746
747
  });
747
748
  const _hoisted_1$u = ["value", "disabled"];
748
- const DEFAULT_MAX_LENGTH$1 = 1e3;
749
+ const DEFAULT_MAX_LENGTH = 1e3;
749
750
  const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
750
751
  __name: "TextArea",
751
752
  props: {
@@ -772,7 +773,7 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
772
773
  const textareaAttrs = computed(() => {
773
774
  const { class: _class, ...rest } = attrs;
774
775
  if (rest.maxlength === void 0) {
775
- rest.maxlength = DEFAULT_MAX_LENGTH$1;
776
+ rest.maxlength = DEFAULT_MAX_LENGTH;
776
777
  }
777
778
  return rest;
778
779
  });
@@ -1334,7 +1335,7 @@ const _sfc_main$F = {
1334
1335
  };
1335
1336
  }
1336
1337
  };
1337
- const _hoisted_1$s = ["type", "max", "value", "disabled"];
1338
+ const _hoisted_1$s = ["type", "lang", "max", "value", "disabled"];
1338
1339
  const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1339
1340
  __name: "DateInput",
1340
1341
  props: {
@@ -1342,6 +1343,10 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1342
1343
  type: [String, Number, null],
1343
1344
  default: ""
1344
1345
  },
1346
+ locale: {
1347
+ type: String,
1348
+ default: "en"
1349
+ },
1345
1350
  withTimestamp: {
1346
1351
  type: Boolean,
1347
1352
  default: false
@@ -1363,6 +1368,10 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1363
1368
  const input = ref(null);
1364
1369
  const inputType = computed(() => props.withTimestamp ? "datetime-local" : "date");
1365
1370
  const normalizedValue = computed(() => props.modelValue ?? "");
1371
+ const inputLang = computed(() => {
1372
+ const lang = attrs.lang;
1373
+ return typeof lang === "string" && lang !== "" ? lang : props.locale;
1374
+ });
1366
1375
  const cappedMax = computed(() => {
1367
1376
  const limit = props.withTimestamp ? "9999-12-31T23:59" : "9999-12-31";
1368
1377
  const incoming = attrs.max;
@@ -1372,7 +1381,7 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1372
1381
  return incoming > limit ? limit : incoming;
1373
1382
  });
1374
1383
  const inputAttrs = computed(() => {
1375
- const { class: _class, type: _type, ...rest } = attrs;
1384
+ const { class: _class, type: _type, lang: _lang, ...rest } = attrs;
1376
1385
  return rest;
1377
1386
  });
1378
1387
  const inputClasses = computed(() => [
@@ -1409,6 +1418,7 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1409
1418
  ref: input
1410
1419
  }, inputAttrs.value, {
1411
1420
  type: inputType.value,
1421
+ lang: inputLang.value,
1412
1422
  max: cappedMax.value,
1413
1423
  class: [inputClasses.value, props.disabled ? props.disabledClass : null],
1414
1424
  value: normalizedValue.value,
@@ -1419,7 +1429,7 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1419
1429
  };
1420
1430
  }
1421
1431
  });
1422
- const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-35dd480a"]]);
1432
+ const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-c8cee934"]]);
1423
1433
  const _hoisted_1$r = { class: "relative" };
1424
1434
  const _hoisted_2$i = {
1425
1435
  key: 0,
@@ -1427,17 +1437,17 @@ const _hoisted_2$i = {
1427
1437
  };
1428
1438
  const _hoisted_3$c = ["value", "disabled"];
1429
1439
  const _hoisted_4$9 = { class: "p-4" };
1430
- const _hoisted_5$6 = { class: "mb-4 flex items-center justify-between" };
1431
- const _hoisted_6$6 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
1432
- const _hoisted_7$6 = { class: "grid grid-cols-7 gap-1 mb-2" };
1433
- const _hoisted_8$4 = { class: "grid grid-cols-7 gap-1" };
1434
- const _hoisted_9$3 = ["disabled", "onClick", "onMouseenter"];
1435
- const _hoisted_10$3 = { class: "mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" };
1436
- const _hoisted_11$3 = { class: "flex items-center justify-between" };
1437
- const _hoisted_12$2 = { class: "text-xs text-neutral-500 dark:text-neutral-400" };
1438
- const _hoisted_13$2 = { key: 0 };
1439
- const _hoisted_14$2 = { key: 1 };
1440
- const _hoisted_15$2 = { key: 2 };
1440
+ const _hoisted_5$7 = { class: "mb-4 flex items-center justify-between" };
1441
+ const _hoisted_6$7 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
1442
+ const _hoisted_7$7 = { class: "grid grid-cols-7 gap-1 mb-2" };
1443
+ const _hoisted_8$5 = { class: "grid grid-cols-7 gap-1" };
1444
+ const _hoisted_9$4 = ["disabled", "onClick", "onMouseenter"];
1445
+ const _hoisted_10$4 = { class: "mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" };
1446
+ const _hoisted_11$4 = { class: "flex items-center justify-between" };
1447
+ const _hoisted_12$3 = { class: "text-xs text-neutral-500 dark:text-neutral-400" };
1448
+ const _hoisted_13$3 = { key: 0 };
1449
+ const _hoisted_14$3 = { key: 1 };
1450
+ const _hoisted_15$3 = { key: 2 };
1441
1451
  const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1442
1452
  __name: "DateRangeInput",
1443
1453
  props: {
@@ -1479,7 +1489,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1479
1489
  },
1480
1490
  locale: {
1481
1491
  type: String,
1482
- default: "fr-CA"
1492
+ default: "en"
1483
1493
  }
1484
1494
  },
1485
1495
  emits: ["update:modelValue"],
@@ -1725,7 +1735,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1725
1735
  }, ["stop"]))
1726
1736
  }, [
1727
1737
  createElementVNode("div", _hoisted_4$9, [
1728
- createElementVNode("div", _hoisted_5$6, [
1738
+ createElementVNode("div", _hoisted_5$7, [
1729
1739
  createElementVNode("button", {
1730
1740
  type: "button",
1731
1741
  class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
@@ -1745,7 +1755,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1745
1755
  })
1746
1756
  ], -1)
1747
1757
  ])]),
1748
- createElementVNode("div", _hoisted_6$6, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 1),
1758
+ createElementVNode("div", _hoisted_6$7, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 1),
1749
1759
  createElementVNode("button", {
1750
1760
  type: "button",
1751
1761
  class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
@@ -1766,7 +1776,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1766
1776
  ], -1)
1767
1777
  ])])
1768
1778
  ]),
1769
- createElementVNode("div", _hoisted_7$6, [
1779
+ createElementVNode("div", _hoisted_7$7, [
1770
1780
  (openBlock(true), createElementBlock(Fragment, null, renderList(dayNames.value, (day) => {
1771
1781
  return openBlock(), createElementBlock("div", {
1772
1782
  key: day,
@@ -1774,7 +1784,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1774
1784
  }, toDisplayString(day), 1);
1775
1785
  }), 128))
1776
1786
  ]),
1777
- createElementVNode("div", _hoisted_8$4, [
1787
+ createElementVNode("div", _hoisted_8$5, [
1778
1788
  (openBlock(true), createElementBlock(Fragment, null, renderList(calendarDays.value, (day) => {
1779
1789
  return openBlock(), createElementBlock("div", {
1780
1790
  key: day.date.toISOString(),
@@ -1799,14 +1809,14 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1799
1809
  onClick: ($event) => selectDate(day.date),
1800
1810
  onMouseenter: ($event) => handleDateHover(day.date),
1801
1811
  onMouseleave: handleDateLeave
1802
- }, toDisplayString(day.date.getDate()), 43, _hoisted_9$3)
1812
+ }, toDisplayString(day.date.getDate()), 43, _hoisted_9$4)
1803
1813
  ]);
1804
1814
  }), 128))
1805
1815
  ]),
1806
- createElementVNode("div", _hoisted_10$3, [
1807
- createElementVNode("div", _hoisted_11$3, [
1808
- createElementVNode("div", _hoisted_12$2, [
1809
- startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$2, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_14$2, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_15$2, " Select start date "))
1816
+ createElementVNode("div", _hoisted_10$4, [
1817
+ createElementVNode("div", _hoisted_11$4, [
1818
+ createElementVNode("div", _hoisted_12$3, [
1819
+ startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$3, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_14$3, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_15$3, " Select start date "))
1810
1820
  ]),
1811
1821
  startDate.value || endDate.value ? (openBlock(), createElementBlock("button", {
1812
1822
  key: 0,
@@ -1822,7 +1832,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
1822
1832
  };
1823
1833
  }
1824
1834
  });
1825
- const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-60a85ab0"]]);
1835
+ const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-5c96a933"]]);
1826
1836
  const _hoisted_1$q = { class: "relative" };
1827
1837
  const _hoisted_2$h = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
1828
1838
  const _hoisted_3$b = ["accept"];
@@ -1830,10 +1840,10 @@ const _hoisted_4$8 = {
1830
1840
  key: 0,
1831
1841
  class: "mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/50"
1832
1842
  };
1833
- const _hoisted_5$5 = { class: "flex items-center space-x-4" };
1834
- const _hoisted_6$5 = ["src"];
1835
- const _hoisted_7$5 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
1836
- const _hoisted_8$3 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
1843
+ const _hoisted_5$6 = { class: "flex items-center space-x-4" };
1844
+ const _hoisted_6$6 = ["src"];
1845
+ const _hoisted_7$6 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
1846
+ const _hoisted_8$4 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
1837
1847
  const _sfc_main$C = {
1838
1848
  __name: "ImageInput",
1839
1849
  props: {
@@ -1880,15 +1890,15 @@ const _sfc_main$C = {
1880
1890
  }), null, 16, _hoisted_3$b)
1881
1891
  ]),
1882
1892
  props.currentImageUrl ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
1883
- createElementVNode("div", _hoisted_5$5, [
1893
+ createElementVNode("div", _hoisted_5$6, [
1884
1894
  createElementVNode("img", {
1885
1895
  src: props.currentImageUrl,
1886
1896
  alt: "Current logo",
1887
1897
  class: "h-16 w-auto max-w-24 object-contain rounded-lg shadow-sm"
1888
- }, null, 8, _hoisted_6$5),
1898
+ }, null, 8, _hoisted_6$6),
1889
1899
  createElementVNode("div", null, [
1890
- createElementVNode("p", _hoisted_7$5, toDisplayString(props.currentLabel), 1),
1891
- createElementVNode("p", _hoisted_8$3, toDisplayString(props.currentSubtext), 1)
1900
+ createElementVNode("p", _hoisted_7$6, toDisplayString(props.currentLabel), 1),
1901
+ createElementVNode("p", _hoisted_8$4, toDisplayString(props.currentSubtext), 1)
1892
1902
  ])
1893
1903
  ])
1894
1904
  ])) : createCommentVNode("", true)
@@ -2121,7 +2131,7 @@ const _sfc_main$y = {
2121
2131
  return (_ctx, _cache) => {
2122
2132
  return openBlock(), createElementBlock("div", _hoisted_1$m, [
2123
2133
  (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
2124
- return openBlock(), createBlock(_sfc_main$w, {
2134
+ return openBlock(), createBlock(_sfc_main$v, {
2125
2135
  key: `radio-${__props.name ?? "group"}-${option}`,
2126
2136
  type: "radio-input",
2127
2137
  "model-value": props.modelValue,
@@ -2261,17 +2271,764 @@ const _sfc_main$x = {
2261
2271
  };
2262
2272
  }
2263
2273
  };
2264
- const _hoisted_1$k = ["for"];
2265
- const _hoisted_2$e = {
2274
+ const _hoisted_1$k = { class: "relative w-full" };
2275
+ const _hoisted_2$e = ["name", "value", "disabled", "required"];
2276
+ const _hoisted_3$a = ["disabled", "aria-expanded"];
2277
+ const _hoisted_4$7 = { class: "color-picker-checker relative inline-flex size-10 shrink-0 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700" };
2278
+ const _hoisted_5$5 = { class: "min-w-0 flex-1" };
2279
+ const _hoisted_6$5 = { class: "block text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" };
2280
+ const _hoisted_7$5 = { class: "block truncate font-mono text-sm text-neutral-900 dark:text-neutral-50" };
2281
+ const _hoisted_8$3 = { class: "rounded-2xl border border-neutral-200 bg-white/96 p-4 shadow-2xl shadow-neutral-950/12 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/96 dark:shadow-black/30" };
2282
+ const _hoisted_9$3 = { class: "flex items-start gap-3" };
2283
+ const _hoisted_10$3 = { class: "color-picker-checker relative size-14 shrink-0 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700" };
2284
+ const _hoisted_11$3 = { class: "min-w-0 flex-1" };
2285
+ const _hoisted_12$2 = { class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" };
2286
+ const _hoisted_13$2 = { class: "truncate font-mono text-base text-neutral-900 dark:text-neutral-50" };
2287
+ const _hoisted_14$2 = ["disabled", "aria-label"];
2288
+ const _hoisted_15$2 = { class: "mt-4 space-y-4" };
2289
+ const _hoisted_16$1 = ["aria-label", "aria-valuenow"];
2290
+ const _hoisted_17$1 = {
2291
+ key: 0,
2292
+ class: "absolute inset-0 bg-[linear-gradient(to_right,#fff,transparent)]"
2293
+ };
2294
+ const _hoisted_18$1 = {
2295
+ key: 2,
2296
+ class: "absolute inset-0 bg-[linear-gradient(to_top,#000,transparent)]"
2297
+ };
2298
+ const _hoisted_19 = { class: "space-y-3" };
2299
+ const _hoisted_20 = {
2300
+ key: 0,
2301
+ class: "space-y-2"
2302
+ };
2303
+ const _hoisted_21 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
2304
+ const _hoisted_22 = ["for"];
2305
+ const _hoisted_23 = ["id", "disabled", "value"];
2306
+ const _hoisted_24 = {
2307
+ key: 1,
2308
+ class: "space-y-2"
2309
+ };
2310
+ const _hoisted_25 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
2311
+ const _hoisted_26 = ["for"];
2312
+ const _hoisted_27 = ["id", "disabled", "value"];
2313
+ const _hoisted_28 = { class: "space-y-2" };
2314
+ const _hoisted_29 = ["for"];
2315
+ const _hoisted_30 = ["id", "maxlength", "placeholder", "value", "disabled"];
2316
+ const DEFAULT_HEX = "#000000";
2317
+ const DEFAULT_ALPHA = 255;
2318
+ const PICKER_PANEL_WIDTH = 320;
2319
+ const PICKER_PANEL_GAP = 8;
2320
+ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2321
+ __name: "ColorPicker",
2322
+ props: {
2323
+ modelValue: {
2324
+ type: [String, null],
2325
+ default: ""
2326
+ },
2327
+ disabled: {
2328
+ type: Boolean,
2329
+ default: false
2330
+ },
2331
+ disabledClass: {
2332
+ type: String,
2333
+ default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
2334
+ },
2335
+ allowAlpha: {
2336
+ type: Boolean,
2337
+ default: false
2338
+ },
2339
+ variant: {
2340
+ type: String,
2341
+ default: "classic"
2342
+ }
2343
+ },
2344
+ emits: ["update:modelValue", "blur"],
2345
+ setup(__props, { expose: __expose, emit: __emit }) {
2346
+ const props = __props;
2347
+ const emit = __emit;
2348
+ const attrs = useAttrs();
2349
+ const { t } = useI18n();
2350
+ const triggerRef = ref(null);
2351
+ const panelRef = ref(null);
2352
+ const hexInputRef = ref(null);
2353
+ const saturationRef = ref(null);
2354
+ const isOpen = ref(false);
2355
+ const supportsEyeDropper = ref(false);
2356
+ const lastEmittedValue = ref("");
2357
+ const hue = ref(220);
2358
+ const saturation = ref(84);
2359
+ const brightness = ref(92);
2360
+ const alpha = ref(DEFAULT_ALPHA);
2361
+ const displayValue = ref("");
2362
+ const panelStyle = ref({
2363
+ position: "fixed",
2364
+ left: "0px",
2365
+ top: "0px",
2366
+ visibility: "hidden",
2367
+ width: `${PICKER_PANEL_WIDTH}px`,
2368
+ zIndex: "9999"
2369
+ });
2370
+ let dragCleanup = null;
2371
+ let revealFrame = null;
2372
+ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
2373
+ const parseHexColor = (value) => {
2374
+ if (typeof value !== "string") {
2375
+ return null;
2376
+ }
2377
+ const trimmed = value.trim();
2378
+ if (trimmed === "") {
2379
+ return null;
2380
+ }
2381
+ const withHash = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
2382
+ const shortRgbMatch = withHash.match(/^#([0-9a-fA-F]{3})$/);
2383
+ if (shortRgbMatch) {
2384
+ const expanded = shortRgbMatch[1].split("").map((char) => char.repeat(2)).join("").toUpperCase();
2385
+ return { hex6: `#${expanded}`, alpha: DEFAULT_ALPHA };
2386
+ }
2387
+ const longRgbMatch = withHash.match(/^#([0-9a-fA-F]{6})$/);
2388
+ if (longRgbMatch) {
2389
+ return { hex6: `#${longRgbMatch[1].toUpperCase()}`, alpha: DEFAULT_ALPHA };
2390
+ }
2391
+ const shortRgbaMatch = withHash.match(/^#([0-9a-fA-F]{4})$/);
2392
+ if (shortRgbaMatch) {
2393
+ const expanded = shortRgbaMatch[1].split("").map((char) => char.repeat(2)).join("").toUpperCase();
2394
+ return {
2395
+ hex6: `#${expanded.slice(0, 6)}`,
2396
+ alpha: Number.parseInt(expanded.slice(6, 8), 16)
2397
+ };
2398
+ }
2399
+ const longRgbaMatch = withHash.match(/^#([0-9a-fA-F]{8})$/);
2400
+ if (longRgbaMatch) {
2401
+ const expanded = longRgbaMatch[1].toUpperCase();
2402
+ return {
2403
+ hex6: `#${expanded.slice(0, 6)}`,
2404
+ alpha: Number.parseInt(expanded.slice(6, 8), 16)
2405
+ };
2406
+ }
2407
+ return null;
2408
+ };
2409
+ const formatColor = (parsedColor, allowAlpha = false) => {
2410
+ if (!parsedColor) {
2411
+ return "";
2412
+ }
2413
+ if (!allowAlpha) {
2414
+ return parsedColor.hex6;
2415
+ }
2416
+ return `${parsedColor.hex6}${parsedColor.alpha.toString(16).padStart(2, "0").toUpperCase()}`;
2417
+ };
2418
+ const normalizeModelValue = (value, allowAlpha = false) => {
2419
+ const parsed = parseHexColor(value);
2420
+ if (!parsed) {
2421
+ return "";
2422
+ }
2423
+ return formatColor({
2424
+ hex6: parsed.hex6,
2425
+ alpha: allowAlpha ? parsed.alpha : DEFAULT_ALPHA
2426
+ }, allowAlpha);
2427
+ };
2428
+ const hexToRgb = (hex6) => {
2429
+ const normalized = hex6.replace("#", "");
2430
+ return {
2431
+ red: Number.parseInt(normalized.slice(0, 2), 16),
2432
+ green: Number.parseInt(normalized.slice(2, 4), 16),
2433
+ blue: Number.parseInt(normalized.slice(4, 6), 16)
2434
+ };
2435
+ };
2436
+ const rgbToHex = ({ red, green, blue }) => {
2437
+ const toHex = (value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0").toUpperCase();
2438
+ return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
2439
+ };
2440
+ const rgbToHsv = ({ red, green, blue }) => {
2441
+ const r = red / 255;
2442
+ const g = green / 255;
2443
+ const b = blue / 255;
2444
+ const max = Math.max(r, g, b);
2445
+ const min = Math.min(r, g, b);
2446
+ const delta = max - min;
2447
+ let nextHue = hue.value;
2448
+ if (delta !== 0) {
2449
+ if (max === r) {
2450
+ nextHue = 60 * ((g - b) / delta % 6);
2451
+ } else if (max === g) {
2452
+ nextHue = 60 * ((b - r) / delta + 2);
2453
+ } else {
2454
+ nextHue = 60 * ((r - g) / delta + 4);
2455
+ }
2456
+ }
2457
+ if (nextHue < 0) {
2458
+ nextHue += 360;
2459
+ }
2460
+ const nextSaturation = max === 0 ? 0 : delta / max * 100;
2461
+ const nextBrightness = max * 100;
2462
+ return {
2463
+ hue: clamp(nextHue, 0, 360),
2464
+ saturation: clamp(nextSaturation, 0, 100),
2465
+ brightness: clamp(nextBrightness, 0, 100)
2466
+ };
2467
+ };
2468
+ const hsvToRgb = ({ hue: colorHue, saturation: colorSaturation, brightness: colorBrightness }) => {
2469
+ const h2 = (colorHue % 360 + 360) % 360;
2470
+ const s = clamp(colorSaturation, 0, 100) / 100;
2471
+ const v = clamp(colorBrightness, 0, 100) / 100;
2472
+ const chroma = v * s;
2473
+ const x = chroma * (1 - Math.abs(h2 / 60 % 2 - 1));
2474
+ const match = v - chroma;
2475
+ let rPrime = 0;
2476
+ let gPrime = 0;
2477
+ let bPrime = 0;
2478
+ if (h2 < 60) {
2479
+ rPrime = chroma;
2480
+ gPrime = x;
2481
+ } else if (h2 < 120) {
2482
+ rPrime = x;
2483
+ gPrime = chroma;
2484
+ } else if (h2 < 180) {
2485
+ gPrime = chroma;
2486
+ bPrime = x;
2487
+ } else if (h2 < 240) {
2488
+ gPrime = x;
2489
+ bPrime = chroma;
2490
+ } else if (h2 < 300) {
2491
+ rPrime = x;
2492
+ bPrime = chroma;
2493
+ } else {
2494
+ rPrime = chroma;
2495
+ bPrime = x;
2496
+ }
2497
+ return {
2498
+ red: Math.round((rPrime + match) * 255),
2499
+ green: Math.round((gPrime + match) * 255),
2500
+ blue: Math.round((bPrime + match) * 255)
2501
+ };
2502
+ };
2503
+ const alphaPercentFromByte = (value) => Math.round(clamp(value, 0, 255) * 100 / 255);
2504
+ const alphaByteFromPercent = (value) => Math.round(clamp(Number(value) || 0, 0, 100) * 255 / 100);
2505
+ const currentRgb = computed(() => hsvToRgb({
2506
+ hue: hue.value,
2507
+ saturation: saturation.value,
2508
+ brightness: brightness.value
2509
+ }));
2510
+ const currentColor = computed(() => ({
2511
+ hex6: rgbToHex(currentRgb.value),
2512
+ alpha: clamp(alpha.value, 0, 255)
2513
+ }));
2514
+ const normalizedValue = computed(() => normalizeModelValue(props.modelValue, props.allowAlpha));
2515
+ const emittedValue = computed(() => formatColor(currentColor.value, props.allowAlpha));
2516
+ const opacityPercent = computed(() => alphaPercentFromByte(alpha.value));
2517
+ const swatchColor = computed(() => {
2518
+ const { red, green, blue } = currentRgb.value;
2519
+ return `rgba(${red}, ${green}, ${blue}, ${clamp(alpha.value / 255, 0, 1)})`;
2520
+ });
2521
+ const hueColor = computed(() => rgbToHex(hsvToRgb({ hue: hue.value, saturation: 100, brightness: 100 })));
2522
+ const isRainbowVariant = computed(() => props.variant === "rainbow");
2523
+ const alphaGradient = computed(() => {
2524
+ const { red, green, blue } = currentRgb.value;
2525
+ return `linear-gradient(90deg, rgba(${red}, ${green}, ${blue}, 0) 0%, rgba(${red}, ${green}, ${blue}, 1) 100%)`;
2526
+ });
2527
+ const saturationHandleStyle = computed(() => ({
2528
+ left: `${isRainbowVariant.value ? hue.value / 360 * 100 : saturation.value}%`,
2529
+ top: `${isRainbowVariant.value ? brightness.value >= 100 ? saturation.value / 2 : 50 + (100 - brightness.value) / 2 : 100 - brightness.value}%`
2530
+ }));
2531
+ const saturationAreaStyle = computed(() => isRainbowVariant.value ? {
2532
+ background: "linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"
2533
+ } : {
2534
+ backgroundColor: hueColor.value
2535
+ });
2536
+ const saturationAreaLabel = computed(() => isRainbowVariant.value ? t("Rainbow color area for {color}", { color: emittedValue.value }) : t("Saturation and brightness for {color}", { color: emittedValue.value }));
2537
+ const fieldId = computed(() => {
2538
+ const id = attrs.id;
2539
+ return typeof id === "string" && id !== "" ? id : void 0;
2540
+ });
2541
+ const fieldName = computed(() => {
2542
+ const name = attrs.name;
2543
+ return typeof name === "string" && name !== "" ? name : void 0;
2544
+ });
2545
+ const triggerAttrs = computed(() => {
2546
+ const {
2547
+ class: _class,
2548
+ name: _name,
2549
+ autofocus: _autofocus,
2550
+ required: _required,
2551
+ placeholder: _placeholder,
2552
+ maxlength: _maxlength,
2553
+ ...rest
2554
+ } = attrs;
2555
+ return {
2556
+ ...rest,
2557
+ id: fieldId.value
2558
+ };
2559
+ });
2560
+ const triggerClasses = computed(() => [
2561
+ "group flex w-full items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-3 text-left text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
2562
+ attrs.class,
2563
+ props.disabled ? props.disabledClass : ""
2564
+ ]);
2565
+ const hiddenInputRequired = computed(() => Boolean(attrs.required) && !props.disabled);
2566
+ const hexInputPlaceholder = computed(() => props.allowAlpha ? "#RRGGBBAA" : "#RRGGBB");
2567
+ const canUseEyeDropper = computed(() => supportsEyeDropper.value && !props.disabled);
2568
+ const normalizedVariant = computed(() => isRainbowVariant.value ? "rainbow" : "classic");
2569
+ const syncFromNormalizedValue = (value) => {
2570
+ const parsed = parseHexColor(value) ?? { hex6: DEFAULT_HEX, alpha: DEFAULT_ALPHA };
2571
+ const rgb = hexToRgb(parsed.hex6);
2572
+ const hsv = rgbToHsv(rgb);
2573
+ hue.value = hsv.hue;
2574
+ saturation.value = hsv.saturation;
2575
+ brightness.value = hsv.brightness;
2576
+ alpha.value = props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA;
2577
+ displayValue.value = formatColor({
2578
+ hex6: parsed.hex6,
2579
+ alpha: props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA
2580
+ }, props.allowAlpha);
2581
+ };
2582
+ const emitCurrentColor = () => {
2583
+ displayValue.value = emittedValue.value;
2584
+ lastEmittedValue.value = emittedValue.value;
2585
+ emit("update:modelValue", emittedValue.value);
2586
+ };
2587
+ watch([normalizedValue, () => props.allowAlpha, normalizedVariant], ([nextValue, allowAlpha, variant], [, previousAllowAlpha, previousVariant]) => {
2588
+ if (allowAlpha === previousAllowAlpha && nextValue === lastEmittedValue.value) {
2589
+ displayValue.value = nextValue;
2590
+ lastEmittedValue.value = "";
2591
+ return;
2592
+ }
2593
+ if (variant !== previousVariant) {
2594
+ lastEmittedValue.value = "";
2595
+ }
2596
+ lastEmittedValue.value = "";
2597
+ syncFromNormalizedValue(nextValue);
2598
+ });
2599
+ const updatePanelPosition = () => {
2600
+ if (!triggerRef.value || !panelRef.value) {
2601
+ return;
2602
+ }
2603
+ const rect = triggerRef.value.getBoundingClientRect();
2604
+ const panelWidth = panelRef.value.offsetWidth || PICKER_PANEL_WIDTH;
2605
+ const panelHeight = panelRef.value.offsetHeight || 0;
2606
+ const viewportWidth = window.innerWidth;
2607
+ const viewportHeight = window.innerHeight;
2608
+ let left = rect.left;
2609
+ if (left + panelWidth > viewportWidth - PICKER_PANEL_GAP) {
2610
+ left = viewportWidth - panelWidth - PICKER_PANEL_GAP;
2611
+ }
2612
+ left = Math.max(PICKER_PANEL_GAP, left);
2613
+ const spaceBelow = viewportHeight - rect.bottom - PICKER_PANEL_GAP;
2614
+ const spaceAbove = rect.top - PICKER_PANEL_GAP;
2615
+ const openUpward = spaceBelow < panelHeight && spaceAbove > spaceBelow;
2616
+ panelStyle.value = {
2617
+ position: "fixed",
2618
+ left: `${left}px`,
2619
+ ...openUpward ? { bottom: `${viewportHeight - rect.top + PICKER_PANEL_GAP}px` } : { top: `${rect.bottom + PICKER_PANEL_GAP}px` },
2620
+ width: `${panelWidth}px`,
2621
+ zIndex: "9999",
2622
+ visibility: panelStyle.value.visibility
2623
+ };
2624
+ };
2625
+ const revealPanel = async () => {
2626
+ if (!isOpen.value) {
2627
+ return;
2628
+ }
2629
+ if (revealFrame !== null) {
2630
+ cancelAnimationFrame(revealFrame);
2631
+ revealFrame = null;
2632
+ }
2633
+ panelStyle.value = {
2634
+ ...panelStyle.value,
2635
+ visibility: "hidden"
2636
+ };
2637
+ await nextTick();
2638
+ updatePanelPosition();
2639
+ revealFrame = requestAnimationFrame(() => {
2640
+ if (!isOpen.value) {
2641
+ return;
2642
+ }
2643
+ panelStyle.value = {
2644
+ ...panelStyle.value,
2645
+ visibility: "visible"
2646
+ };
2647
+ });
2648
+ };
2649
+ const closePanel = () => {
2650
+ isOpen.value = false;
2651
+ };
2652
+ const togglePanel = async () => {
2653
+ if (props.disabled) {
2654
+ return;
2655
+ }
2656
+ isOpen.value = !isOpen.value;
2657
+ if (isOpen.value) {
2658
+ displayValue.value = emittedValue.value;
2659
+ await revealPanel();
2660
+ await nextTick();
2661
+ hexInputRef.value?.focus();
2662
+ hexInputRef.value?.select();
2663
+ }
2664
+ };
2665
+ const closeOnOutsidePointer = (event) => {
2666
+ if (!isOpen.value) {
2667
+ return;
2668
+ }
2669
+ const target = event.target;
2670
+ if (!(target instanceof Node)) {
2671
+ return;
2672
+ }
2673
+ if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) {
2674
+ return;
2675
+ }
2676
+ closePanel();
2677
+ };
2678
+ const closeOnEscape = (event) => {
2679
+ if (event.key === "Escape" && isOpen.value) {
2680
+ closePanel();
2681
+ triggerRef.value?.focus();
2682
+ }
2683
+ };
2684
+ const handleViewportChange = () => {
2685
+ if (isOpen.value) {
2686
+ updatePanelPosition();
2687
+ }
2688
+ };
2689
+ const beginDrag = (event, updateFromPointer) => {
2690
+ if (props.disabled) {
2691
+ return;
2692
+ }
2693
+ event.preventDefault();
2694
+ updateFromPointer(event);
2695
+ const handleMove = (moveEvent) => updateFromPointer(moveEvent);
2696
+ const handleUp = () => {
2697
+ window.removeEventListener("pointermove", handleMove);
2698
+ window.removeEventListener("pointerup", handleUp);
2699
+ dragCleanup = null;
2700
+ };
2701
+ window.addEventListener("pointermove", handleMove);
2702
+ window.addEventListener("pointerup", handleUp, { once: true });
2703
+ dragCleanup = handleUp;
2704
+ };
2705
+ const updateFromSaturationPointer = (event) => {
2706
+ if (!saturationRef.value) {
2707
+ return;
2708
+ }
2709
+ const rect = saturationRef.value.getBoundingClientRect();
2710
+ const xPercent = clamp((event.clientX - rect.left) / rect.width * 100, 0, 100);
2711
+ const yPercent = clamp((event.clientY - rect.top) / rect.height * 100, 0, 100);
2712
+ if (isRainbowVariant.value) {
2713
+ hue.value = clamp(xPercent / 100 * 360, 0, 360);
2714
+ if (yPercent <= 50) {
2715
+ saturation.value = clamp(yPercent / 50 * 100, 0, 100);
2716
+ brightness.value = 100;
2717
+ } else {
2718
+ saturation.value = 100;
2719
+ brightness.value = clamp(100 - (yPercent - 50) / 50 * 100, 0, 100);
2720
+ }
2721
+ } else {
2722
+ saturation.value = xPercent;
2723
+ brightness.value = clamp(100 - yPercent, 0, 100);
2724
+ }
2725
+ emitCurrentColor();
2726
+ };
2727
+ const updateFromSaturationKey = (event) => {
2728
+ const step = event.shiftKey ? 10 : 2;
2729
+ if (event.key === "ArrowLeft") {
2730
+ if (isRainbowVariant.value) {
2731
+ hue.value = clamp(hue.value - step * 3.6, 0, 360);
2732
+ } else {
2733
+ saturation.value = clamp(saturation.value - step, 0, 100);
2734
+ }
2735
+ } else if (event.key === "ArrowRight") {
2736
+ if (isRainbowVariant.value) {
2737
+ hue.value = clamp(hue.value + step * 3.6, 0, 360);
2738
+ } else {
2739
+ saturation.value = clamp(saturation.value + step, 0, 100);
2740
+ }
2741
+ } else if (event.key === "ArrowUp") {
2742
+ if (isRainbowVariant.value) {
2743
+ if (brightness.value < 100) {
2744
+ brightness.value = clamp(brightness.value + step, 0, 100);
2745
+ } else {
2746
+ saturation.value = clamp(saturation.value - step, 0, 100);
2747
+ }
2748
+ } else {
2749
+ brightness.value = clamp(brightness.value + step, 0, 100);
2750
+ }
2751
+ } else if (event.key === "ArrowDown") {
2752
+ if (isRainbowVariant.value) {
2753
+ if (saturation.value < 100 || brightness.value === 100) {
2754
+ saturation.value = clamp(saturation.value + step, 0, 100);
2755
+ } else {
2756
+ brightness.value = clamp(brightness.value - step, 0, 100);
2757
+ }
2758
+ } else {
2759
+ brightness.value = clamp(brightness.value - step, 0, 100);
2760
+ }
2761
+ } else {
2762
+ return;
2763
+ }
2764
+ event.preventDefault();
2765
+ emitCurrentColor();
2766
+ };
2767
+ const handleHueInput = (event) => {
2768
+ hue.value = clamp(Number(event.target?.value ?? hue.value) || 0, 0, 360);
2769
+ emitCurrentColor();
2770
+ };
2771
+ const handleAlphaInput = (event) => {
2772
+ alpha.value = alphaByteFromPercent(event.target?.value ?? opacityPercent.value);
2773
+ emitCurrentColor();
2774
+ };
2775
+ const handleHexInput = (event) => {
2776
+ const nextValue = String(event.target?.value ?? "");
2777
+ displayValue.value = nextValue;
2778
+ const parsed = parseHexColor(nextValue);
2779
+ if (!parsed) {
2780
+ return;
2781
+ }
2782
+ const normalized = formatColor({
2783
+ hex6: parsed.hex6,
2784
+ alpha: props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA
2785
+ }, props.allowAlpha);
2786
+ syncFromNormalizedValue(normalized);
2787
+ lastEmittedValue.value = normalized;
2788
+ emit("update:modelValue", normalized);
2789
+ };
2790
+ const handleHexBlur = (event) => {
2791
+ displayValue.value = emittedValue.value;
2792
+ emit("blur", event);
2793
+ };
2794
+ const pickFromScreen = async () => {
2795
+ if (!canUseEyeDropper.value) {
2796
+ return;
2797
+ }
2798
+ try {
2799
+ const eyeDropper = new window.EyeDropper();
2800
+ const result = await eyeDropper.open();
2801
+ const picked = parseHexColor(result?.sRGBHex);
2802
+ if (!picked) {
2803
+ return;
2804
+ }
2805
+ const normalized = formatColor({
2806
+ hex6: picked.hex6,
2807
+ alpha: props.allowAlpha ? alpha.value : DEFAULT_ALPHA
2808
+ }, props.allowAlpha);
2809
+ syncFromNormalizedValue(normalized);
2810
+ lastEmittedValue.value = normalized;
2811
+ emit("update:modelValue", normalized);
2812
+ } catch (error) {
2813
+ if (error?.name !== "AbortError") {
2814
+ console.error("EyeDropper failed", error);
2815
+ }
2816
+ }
2817
+ };
2818
+ onMounted(() => {
2819
+ supportsEyeDropper.value = typeof window !== "undefined" && "EyeDropper" in window;
2820
+ syncFromNormalizedValue(normalizedValue.value);
2821
+ if (attrs.autofocus !== void 0) {
2822
+ triggerRef.value?.focus();
2823
+ }
2824
+ document.addEventListener("pointerdown", closeOnOutsidePointer, true);
2825
+ document.addEventListener("keydown", closeOnEscape);
2826
+ window.addEventListener("resize", handleViewportChange);
2827
+ window.addEventListener("scroll", handleViewportChange, true);
2828
+ });
2829
+ onUnmounted(() => {
2830
+ if (revealFrame !== null) {
2831
+ cancelAnimationFrame(revealFrame);
2832
+ }
2833
+ dragCleanup?.();
2834
+ document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
2835
+ document.removeEventListener("keydown", closeOnEscape);
2836
+ window.removeEventListener("resize", handleViewportChange);
2837
+ window.removeEventListener("scroll", handleViewportChange, true);
2838
+ });
2839
+ watch(isOpen, (open) => {
2840
+ if (open) {
2841
+ revealPanel();
2842
+ }
2843
+ });
2844
+ __expose({ focus: () => triggerRef.value?.focus() });
2845
+ return (_ctx, _cache) => {
2846
+ return openBlock(), createElementBlock("div", _hoisted_1$k, [
2847
+ fieldName.value ? (openBlock(), createElementBlock("input", {
2848
+ key: 0,
2849
+ type: "hidden",
2850
+ name: fieldName.value,
2851
+ value: emittedValue.value,
2852
+ disabled: props.disabled,
2853
+ required: hiddenInputRequired.value
2854
+ }, null, 8, _hoisted_2$e)) : createCommentVNode("", true),
2855
+ createElementVNode("button", mergeProps({
2856
+ ref_key: "triggerRef",
2857
+ ref: triggerRef
2858
+ }, triggerAttrs.value, {
2859
+ type: "button",
2860
+ class: triggerClasses.value,
2861
+ disabled: props.disabled,
2862
+ "aria-expanded": isOpen.value,
2863
+ "aria-haspopup": "dialog",
2864
+ onClick: togglePanel
2865
+ }), [
2866
+ createElementVNode("span", _hoisted_4$7, [
2867
+ createElementVNode("span", {
2868
+ class: "absolute inset-0",
2869
+ style: normalizeStyle({ backgroundColor: swatchColor.value })
2870
+ }, null, 4)
2871
+ ]),
2872
+ createElementVNode("span", _hoisted_5$5, [
2873
+ createElementVNode("span", _hoisted_6$5, toDisplayString(unref(t)("Color")), 1),
2874
+ createElementVNode("span", _hoisted_7$5, toDisplayString(emittedValue.value), 1)
2875
+ ]),
2876
+ createVNode(unref(ChevronDownIcon), {
2877
+ class: normalizeClass(["size-4 shrink-0 text-neutral-400 transition-transform dark:text-neutral-500", isOpen.value ? "rotate-180" : ""])
2878
+ }, null, 8, ["class"])
2879
+ ], 16, _hoisted_3$a),
2880
+ (openBlock(), createBlock(Teleport, { to: "body" }, [
2881
+ createVNode(Transition, {
2882
+ "enter-active-class": "transition duration-150 ease-out",
2883
+ "enter-from-class": "opacity-0 translate-y-1",
2884
+ "enter-to-class": "opacity-100 translate-y-0",
2885
+ "leave-active-class": "transition duration-100 ease-in",
2886
+ "leave-from-class": "opacity-100 translate-y-0",
2887
+ "leave-to-class": "opacity-0 translate-y-1"
2888
+ }, {
2889
+ default: withCtx(() => [
2890
+ isOpen.value ? (openBlock(), createElementBlock("div", {
2891
+ key: 0,
2892
+ ref_key: "panelRef",
2893
+ ref: panelRef,
2894
+ class: "z-50",
2895
+ style: normalizeStyle(panelStyle.value)
2896
+ }, [
2897
+ createElementVNode("div", _hoisted_8$3, [
2898
+ createElementVNode("div", _hoisted_9$3, [
2899
+ createElementVNode("div", _hoisted_10$3, [
2900
+ createElementVNode("span", {
2901
+ class: "absolute inset-0",
2902
+ style: normalizeStyle({ backgroundColor: swatchColor.value })
2903
+ }, null, 4)
2904
+ ]),
2905
+ createElementVNode("div", _hoisted_11$3, [
2906
+ createElementVNode("p", _hoisted_12$2, toDisplayString(unref(t)("Selected color")), 1),
2907
+ createElementVNode("p", _hoisted_13$2, toDisplayString(emittedValue.value), 1)
2908
+ ]),
2909
+ supportsEyeDropper.value ? (openBlock(), createElementBlock("button", {
2910
+ key: 0,
2911
+ type: "button",
2912
+ class: normalizeClass(["inline-flex size-10 items-center justify-center rounded-xl border border-neutral-200 text-neutral-600 transition-colors hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:focus:ring-neutral-100/10", props.disabled ? "cursor-not-allowed opacity-50" : ""]),
2913
+ disabled: props.disabled,
2914
+ "aria-label": unref(t)("Pick color from screen"),
2915
+ onClick: pickFromScreen
2916
+ }, [
2917
+ createVNode(unref(EyeDropperIcon), { class: "size-5" })
2918
+ ], 10, _hoisted_14$2)) : createCommentVNode("", true)
2919
+ ]),
2920
+ createElementVNode("div", _hoisted_15$2, [
2921
+ createElementVNode("div", {
2922
+ ref_key: "saturationRef",
2923
+ ref: saturationRef,
2924
+ class: "relative h-48 cursor-crosshair overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800",
2925
+ style: normalizeStyle(saturationAreaStyle.value),
2926
+ tabindex: "0",
2927
+ role: "slider",
2928
+ "aria-label": saturationAreaLabel.value,
2929
+ "aria-valuemin": 0,
2930
+ "aria-valuemax": 100,
2931
+ "aria-valuenow": Math.round(saturation.value),
2932
+ onPointerdown: _cache[0] || (_cache[0] = ($event) => beginDrag($event, updateFromSaturationPointer)),
2933
+ onKeydown: updateFromSaturationKey
2934
+ }, [
2935
+ !isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_17$1)) : createCommentVNode("", true),
2936
+ isRainbowVariant.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
2937
+ _cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-x-0 top-0 h-1/2 bg-[linear-gradient(to_bottom,#fff,transparent)]" }, null, -1)),
2938
+ _cache[2] || (_cache[2] = createElementVNode("div", { class: "absolute inset-x-0 bottom-0 h-1/2 bg-[linear-gradient(to_bottom,transparent,#000)]" }, null, -1))
2939
+ ], 64)) : (openBlock(), createElementBlock("div", _hoisted_18$1)),
2940
+ createElementVNode("span", {
2941
+ class: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",
2942
+ style: normalizeStyle(saturationHandleStyle.value)
2943
+ }, null, 4)
2944
+ ], 44, _hoisted_16$1),
2945
+ createElementVNode("div", _hoisted_19, [
2946
+ !isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
2947
+ createElementVNode("div", _hoisted_21, [
2948
+ createElementVNode("label", {
2949
+ for: fieldId.value ? `${fieldId.value}-hue` : void 0
2950
+ }, toDisplayString(unref(t)("Hue")), 9, _hoisted_22),
2951
+ createElementVNode("span", null, toDisplayString(Math.round(hue.value)) + "°", 1)
2952
+ ]),
2953
+ createElementVNode("input", {
2954
+ id: fieldId.value ? `${fieldId.value}-hue` : void 0,
2955
+ type: "range",
2956
+ min: "0",
2957
+ max: "360",
2958
+ step: "1",
2959
+ class: "color-picker-range",
2960
+ disabled: props.disabled,
2961
+ value: hue.value,
2962
+ style: { "background": "linear-gradient(90deg, #FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)" },
2963
+ onInput: handleHueInput
2964
+ }, null, 40, _hoisted_23)
2965
+ ])) : createCommentVNode("", true),
2966
+ props.allowAlpha ? (openBlock(), createElementBlock("div", _hoisted_24, [
2967
+ createElementVNode("div", _hoisted_25, [
2968
+ createElementVNode("label", {
2969
+ for: fieldId.value ? `${fieldId.value}-alpha` : void 0
2970
+ }, toDisplayString(unref(t)("Opacity")), 9, _hoisted_26),
2971
+ createElementVNode("span", null, toDisplayString(opacityPercent.value) + "%", 1)
2972
+ ]),
2973
+ createElementVNode("input", {
2974
+ id: fieldId.value ? `${fieldId.value}-alpha` : void 0,
2975
+ type: "range",
2976
+ min: "0",
2977
+ max: "100",
2978
+ step: "1",
2979
+ class: "color-picker-range",
2980
+ disabled: props.disabled,
2981
+ value: opacityPercent.value,
2982
+ style: normalizeStyle({ background: alphaGradient.value }),
2983
+ onInput: handleAlphaInput
2984
+ }, null, 44, _hoisted_27)
2985
+ ])) : createCommentVNode("", true)
2986
+ ]),
2987
+ createElementVNode("div", _hoisted_28, [
2988
+ createElementVNode("label", {
2989
+ for: fieldId.value ? `${fieldId.value}-hex` : void 0,
2990
+ class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400"
2991
+ }, toDisplayString(unref(t)("Hex value")), 9, _hoisted_29),
2992
+ createElementVNode("input", {
2993
+ id: fieldId.value ? `${fieldId.value}-hex` : void 0,
2994
+ ref_key: "hexInputRef",
2995
+ ref: hexInputRef,
2996
+ type: "text",
2997
+ inputmode: "text",
2998
+ spellcheck: "false",
2999
+ autocapitalize: "characters",
3000
+ maxlength: props.allowAlpha ? 9 : 7,
3001
+ placeholder: hexInputPlaceholder.value,
3002
+ class: "w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 font-mono text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
3003
+ value: displayValue.value,
3004
+ disabled: props.disabled,
3005
+ onInput: handleHexInput,
3006
+ onBlur: handleHexBlur
3007
+ }, null, 40, _hoisted_30)
3008
+ ])
3009
+ ])
3010
+ ])
3011
+ ], 4)) : createCommentVNode("", true)
3012
+ ]),
3013
+ _: 1
3014
+ })
3015
+ ]))
3016
+ ]);
3017
+ };
3018
+ }
3019
+ });
3020
+ const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-7d6915fa"]]);
3021
+ const _hoisted_1$j = ["for"];
3022
+ const _hoisted_2$d = {
2266
3023
  key: 1,
2267
3024
  class: "text-xs text-gray-500 mb-1 block"
2268
3025
  };
2269
- const _hoisted_3$a = {
2270
- key: 17,
3026
+ const _hoisted_3$9 = {
3027
+ key: 18,
2271
3028
  class: "flex items-center mt-2 text-sm text-red-600"
2272
3029
  };
2273
3030
  const defaultFieldClass = "block w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 placeholder:text-neutral-400 shadow-sm transition-all duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10";
2274
- const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
3031
+ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2275
3032
  __name: "InputGroup",
2276
3033
  props: {
2277
3034
  type: {
@@ -2444,7 +3201,15 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2444
3201
  },
2445
3202
  locale: {
2446
3203
  type: String,
2447
- default: "fr-CA"
3204
+ default: "en"
3205
+ },
3206
+ allowAlpha: {
3207
+ type: Boolean,
3208
+ default: false
3209
+ },
3210
+ variant: {
3211
+ type: String,
3212
+ default: "classic"
2448
3213
  }
2449
3214
  },
2450
3215
  emits: ["update:modelValue", "blur"],
@@ -2471,8 +3236,7 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2471
3236
  "tel",
2472
3237
  "search",
2473
3238
  "month",
2474
- "week",
2475
- "color"
3239
+ "week"
2476
3240
  ];
2477
3241
  const noComponentTypes = [];
2478
3242
  const isImageType = computed(() => props.type === "image");
@@ -2488,6 +3252,7 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2488
3252
  const isDateRangeType = computed(() => props.type === "daterange");
2489
3253
  const isTextareaType = computed(() => props.type === "textarea");
2490
3254
  const isTinyEditorType = computed(() => props.type === "tiny-editor");
3255
+ const isColorPickerType = computed(() => props.type === "color");
2491
3256
  const isSelectType = computed(() => props.type === "select");
2492
3257
  const isTextLikeType = computed(() => textLikeTypes.includes(props.type));
2493
3258
  const isNoComponentType = computed(() => noComponentTypes.includes(props.type));
@@ -2513,6 +3278,7 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2513
3278
  class: [defaultFieldClass, attrs.class],
2514
3279
  name: props.name,
2515
3280
  modelValue: props.modelValue,
3281
+ locale: props.locale,
2516
3282
  withTimestamp: props.type === "datetime-local" || props.withTimestamp,
2517
3283
  disabled: props.disabled,
2518
3284
  disabledClass: props.disabledClass
@@ -2630,67 +3396,80 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2630
3396
  disabled: props.disabled,
2631
3397
  disabledClass: props.disabledClass
2632
3398
  }));
3399
+ const colorPickerBindings = computed(() => ({
3400
+ ...attrs,
3401
+ class: [attrs.class],
3402
+ name: props.name,
3403
+ modelValue: typeof props.modelValue === "string" ? props.modelValue : "",
3404
+ disabled: props.disabled,
3405
+ disabledClass: props.disabledClass,
3406
+ allowAlpha: props.allowAlpha,
3407
+ variant: props.variant
3408
+ }));
2633
3409
  return (_ctx, _cache) => {
2634
3410
  return openBlock(), createElementBlock("div", null, [
2635
3411
  __props.label && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("label", {
2636
3412
  key: 0,
2637
3413
  for: fieldId.value,
2638
3414
  class: "text-base font-semibold text-gray-900 dark:text-gray-50 mb-1 block"
2639
- }, toDisplayString(__props.label), 9, _hoisted_1$k)) : createCommentVNode("", true),
2640
- __props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$e, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true),
3415
+ }, toDisplayString(__props.label), 9, _hoisted_1$j)) : createCommentVNode("", true),
3416
+ __props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$d, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true),
2641
3417
  isTextareaType.value ? (openBlock(), createBlock(_sfc_main$H, mergeProps({ key: 2 }, textAreaBindings.value, {
2642
3418
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
2643
3419
  onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
2644
3420
  }), null, 16)) : isTinyEditorType.value ? (openBlock(), createBlock(_sfc_main$x, mergeProps({ key: 3 }, tinyEditorBindings.value, {
2645
3421
  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event)),
2646
3422
  onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
2647
- }), null, 16)) : isSelectType.value ? (openBlock(), createBlock(_sfc_main$F, mergeProps({ key: 4 }, selectBindings.value, {
3423
+ }), null, 16)) : isColorPickerType.value ? (openBlock(), createBlock(ColorPicker, mergeProps({ key: 4 }, colorPickerBindings.value, {
2648
3424
  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => emit("update:modelValue", $event)),
2649
3425
  onBlur: _cache[5] || (_cache[5] = ($event) => emit("blur", $event))
2650
- }), null, 16)) : isDateType.value ? (openBlock(), createBlock(DateInput, mergeProps({ key: 5 }, dateBindings.value, {
3426
+ }), null, 16)) : isSelectType.value ? (openBlock(), createBlock(_sfc_main$F, mergeProps({ key: 5 }, selectBindings.value, {
2651
3427
  "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => emit("update:modelValue", $event)),
2652
3428
  onBlur: _cache[7] || (_cache[7] = ($event) => emit("blur", $event))
2653
- }), null, 16)) : isDateRangeType.value ? (openBlock(), createBlock(DateRangeInput, mergeProps({ key: 6 }, dateRangeBindings.value, {
3429
+ }), null, 16)) : isDateType.value ? (openBlock(), createBlock(DateInput, mergeProps({ key: 6 }, dateBindings.value, {
2654
3430
  "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => emit("update:modelValue", $event)),
2655
3431
  onBlur: _cache[9] || (_cache[9] = ($event) => emit("blur", $event))
2656
- }), null, 16)) : isTextLikeType.value ? (openBlock(), createBlock(_sfc_main$I, mergeProps({ key: 7 }, textInputBindings.value, {
3432
+ }), null, 16)) : isDateRangeType.value ? (openBlock(), createBlock(DateRangeInput, mergeProps({ key: 7 }, dateRangeBindings.value, {
2657
3433
  "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => emit("update:modelValue", $event)),
2658
3434
  onBlur: _cache[11] || (_cache[11] = ($event) => emit("blur", $event))
2659
- }), null, 16)) : isImageType.value ? (openBlock(), createBlock(_sfc_main$C, mergeProps({ key: 8 }, imageBindings.value, {
3435
+ }), null, 16)) : isTextLikeType.value ? (openBlock(), createBlock(_sfc_main$I, mergeProps({ key: 8 }, textInputBindings.value, {
2660
3436
  "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => emit("update:modelValue", $event)),
2661
3437
  onBlur: _cache[13] || (_cache[13] = ($event) => emit("blur", $event))
2662
- }), null, 16)) : isCheckboxSingleType.value ? (openBlock(), createBlock(_sfc_main$J, mergeProps({ key: 9 }, checkboxSingleBindings.value, {
3438
+ }), null, 16)) : isImageType.value ? (openBlock(), createBlock(_sfc_main$C, mergeProps({ key: 9 }, imageBindings.value, {
2663
3439
  "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => emit("update:modelValue", $event)),
2664
3440
  onBlur: _cache[15] || (_cache[15] = ($event) => emit("blur", $event))
2665
- }), null, 16)) : isRadioSingleType.value ? (openBlock(), createBlock(_sfc_main$A, mergeProps({ key: 10 }, radioSingleBindings.value, {
3441
+ }), null, 16)) : isCheckboxSingleType.value ? (openBlock(), createBlock(_sfc_main$J, mergeProps({ key: 10 }, checkboxSingleBindings.value, {
2666
3442
  "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => emit("update:modelValue", $event)),
2667
3443
  onBlur: _cache[17] || (_cache[17] = ($event) => emit("blur", $event))
2668
- }), null, 16)) : isToggleSingleType.value ? (openBlock(), createBlock(_sfc_main$z, mergeProps({ key: 11 }, toggleSingleBindings.value, {
3444
+ }), null, 16)) : isRadioSingleType.value ? (openBlock(), createBlock(_sfc_main$A, mergeProps({ key: 11 }, radioSingleBindings.value, {
2669
3445
  "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => emit("update:modelValue", $event)),
2670
3446
  onBlur: _cache[19] || (_cache[19] = ($event) => emit("blur", $event))
2671
- }), null, 16)) : isNotationType.value ? (openBlock(), createBlock(_sfc_main$B, mergeProps({ key: 12 }, notationBindings.value, {
3447
+ }), null, 16)) : isToggleSingleType.value ? (openBlock(), createBlock(_sfc_main$z, mergeProps({ key: 12 }, toggleSingleBindings.value, {
2672
3448
  "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => emit("update:modelValue", $event)),
2673
3449
  onBlur: _cache[21] || (_cache[21] = ($event) => emit("blur", $event))
2674
- }), null, 16)) : isCheckboxType.value ? (openBlock(), createBlock(_sfc_main$v, mergeProps({ key: 13 }, checkboxBindings.value, {
3450
+ }), null, 16)) : isNotationType.value ? (openBlock(), createBlock(_sfc_main$B, mergeProps({ key: 13 }, notationBindings.value, {
2675
3451
  "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => emit("update:modelValue", $event)),
2676
3452
  onBlur: _cache[23] || (_cache[23] = ($event) => emit("blur", $event))
2677
- }), null, 16)) : isRadioType.value ? (openBlock(), createBlock(_sfc_main$y, mergeProps({ key: 14 }, radioBindings.value, {
3453
+ }), null, 16)) : isCheckboxType.value ? (openBlock(), createBlock(_sfc_main$u, mergeProps({ key: 14 }, checkboxBindings.value, {
2678
3454
  "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => emit("update:modelValue", $event)),
2679
3455
  onBlur: _cache[25] || (_cache[25] = ($event) => emit("blur", $event))
3456
+ }), null, 16)) : isRadioType.value ? (openBlock(), createBlock(_sfc_main$y, mergeProps({ key: 15 }, radioBindings.value, {
3457
+ "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => emit("update:modelValue", $event)),
3458
+ onBlur: _cache[27] || (_cache[27] = ($event) => emit("blur", $event))
2680
3459
  }), null, 16)) : isNoComponentType.value ? renderSlot(_ctx.$slots, "unsupported-type", {
2681
- key: 15,
3460
+ key: 16,
2682
3461
  type: __props.type,
2683
3462
  modelValue: __props.modelValue,
2684
3463
  updateValue,
2685
3464
  attrs: unref(attrs)
2686
3465
  }) : renderSlot(_ctx.$slots, "unsupported-type", {
2687
- key: 16,
3466
+ key: 17,
2688
3467
  type: __props.type,
2689
3468
  modelValue: __props.modelValue,
2690
3469
  updateValue,
2691
3470
  attrs: unref(attrs)
2692
3471
  }),
2693
- hasError.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
3472
+ hasError.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
2694
3473
  createVNode(unref(ExclamationCircleIcon), { class: "mr-1 h-4 w-4 flex-shrink-0" }),
2695
3474
  createElementVNode("span", null, toDisplayString(__props.errorMessage), 1)
2696
3475
  ])) : createCommentVNode("", true)
@@ -2698,8 +3477,8 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2698
3477
  };
2699
3478
  }
2700
3479
  });
2701
- const _hoisted_1$j = { class: "flex flex-wrap gap-3" };
2702
- const _sfc_main$v = {
3480
+ const _hoisted_1$i = { class: "flex flex-wrap gap-3" };
3481
+ const _sfc_main$u = {
2703
3482
  __name: "CheckboxMultipleInput",
2704
3483
  props: {
2705
3484
  modelValue: {
@@ -2740,9 +3519,9 @@ const _sfc_main$v = {
2740
3519
  emit("update:modelValue", nextSelection);
2741
3520
  };
2742
3521
  return (_ctx, _cache) => {
2743
- return openBlock(), createElementBlock("div", _hoisted_1$j, [
3522
+ return openBlock(), createElementBlock("div", _hoisted_1$i, [
2744
3523
  (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
2745
- return openBlock(), createBlock(_sfc_main$w, {
3524
+ return openBlock(), createBlock(_sfc_main$v, {
2746
3525
  key: `checkbox-${option}`,
2747
3526
  type: "checkbox-input",
2748
3527
  name: __props.name,
@@ -2758,153 +3537,6 @@ const _sfc_main$v = {
2758
3537
  };
2759
3538
  }
2760
3539
  };
2761
- const _hoisted_1$i = { class: "relative" };
2762
- const _hoisted_2$d = ["disabled", "aria-label"];
2763
- const _hoisted_3$9 = ["value", "disabled"];
2764
- const _hoisted_4$7 = ["value", "disabled"];
2765
- const DEFAULT_COLOR = "#000000";
2766
- const DEFAULT_MAX_LENGTH = 7;
2767
- const _sfc_main$u = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
2768
- __name: "ColorPicker",
2769
- props: {
2770
- modelValue: {
2771
- type: [String, null],
2772
- default: ""
2773
- },
2774
- disabled: {
2775
- type: Boolean,
2776
- default: false
2777
- },
2778
- disabledClass: {
2779
- type: String,
2780
- default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
2781
- }
2782
- },
2783
- emits: ["update:modelValue", "blur"],
2784
- setup(__props, { expose: __expose, emit: __emit }) {
2785
- const props = __props;
2786
- const emit = __emit;
2787
- const attrs = useAttrs();
2788
- const textInput = ref(null);
2789
- const nativeInput = ref(null);
2790
- const normalizeHexColor = (value) => {
2791
- if (typeof value !== "string") {
2792
- return "";
2793
- }
2794
- const trimmed = value.trim();
2795
- if (trimmed === "") {
2796
- return "";
2797
- }
2798
- const withHash = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
2799
- const shortMatch = withHash.match(/^#([0-9a-fA-F]{3})$/);
2800
- if (shortMatch) {
2801
- const [, shortValue] = shortMatch;
2802
- return `#${shortValue.split("").map((char) => char.repeat(2)).join("").toUpperCase()}`;
2803
- }
2804
- const longMatch = withHash.match(/^#([0-9a-fA-F]{6})$/);
2805
- if (longMatch) {
2806
- return `#${longMatch[1].toUpperCase()}`;
2807
- }
2808
- return "";
2809
- };
2810
- const normalizedModelValue = computed(() => normalizeHexColor(props.modelValue));
2811
- const fallbackColor = computed(() => normalizedModelValue.value || DEFAULT_COLOR);
2812
- const displayValue = ref(normalizedModelValue.value);
2813
- const textInputAttrs = computed(() => {
2814
- const { class: _class, type: _type, ...rest } = attrs;
2815
- if (rest.maxlength === void 0) {
2816
- rest.maxlength = DEFAULT_MAX_LENGTH;
2817
- }
2818
- return rest;
2819
- });
2820
- const textInputClasses = computed(() => [
2821
- "w-full min-w-0 rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
2822
- "pl-16",
2823
- attrs.class
2824
- ]);
2825
- watch(normalizedModelValue, (nextValue) => {
2826
- displayValue.value = nextValue;
2827
- });
2828
- const emitNormalizedColor = (value) => {
2829
- const normalized = normalizeHexColor(value);
2830
- if (!normalized) {
2831
- return false;
2832
- }
2833
- emit("update:modelValue", normalized);
2834
- return true;
2835
- };
2836
- const handleTextInput = (event) => {
2837
- const nextValue = String(event.target?.value ?? "");
2838
- displayValue.value = nextValue;
2839
- emitNormalizedColor(nextValue);
2840
- };
2841
- const handleNativeInput = (event) => {
2842
- const nextValue = String(event.target?.value ?? "");
2843
- const normalized = normalizeHexColor(nextValue) || DEFAULT_COLOR;
2844
- displayValue.value = normalized;
2845
- emit("update:modelValue", normalized);
2846
- };
2847
- const handleBlur = (event) => {
2848
- displayValue.value = normalizedModelValue.value;
2849
- emit("blur", event);
2850
- };
2851
- const openNativePicker = () => {
2852
- if (props.disabled) {
2853
- return;
2854
- }
2855
- nativeInput.value?.click();
2856
- };
2857
- onMounted(() => {
2858
- if (textInput.value?.hasAttribute("autofocus")) {
2859
- textInput.value.focus();
2860
- }
2861
- });
2862
- __expose({ focus: () => textInput.value?.focus() });
2863
- return (_ctx, _cache) => {
2864
- return openBlock(), createElementBlock("div", _hoisted_1$i, [
2865
- createElementVNode("button", {
2866
- type: "button",
2867
- class: normalizeClass(["absolute inset-y-0 left-0 my-2 ml-2 inline-flex w-10 items-center justify-center rounded-md border border-neutral-200 bg-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:ring-neutral-100/10", props.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"]),
2868
- disabled: props.disabled,
2869
- "aria-label": `Choose color${normalizedModelValue.value ? ` ${normalizedModelValue.value}` : ""}`,
2870
- onClick: openNativePicker
2871
- }, [
2872
- createElementVNode("span", {
2873
- class: "h-5 w-5 rounded border border-black/10 dark:border-white/10",
2874
- style: normalizeStyle({ backgroundColor: fallbackColor.value })
2875
- }, null, 4)
2876
- ], 10, _hoisted_2$d),
2877
- createElementVNode("input", {
2878
- ref_key: "nativeInput",
2879
- ref: nativeInput,
2880
- type: "color",
2881
- tabindex: "-1",
2882
- "aria-hidden": "true",
2883
- class: "pointer-events-none absolute h-0 w-0 opacity-0",
2884
- value: fallbackColor.value,
2885
- disabled: props.disabled,
2886
- onInput: handleNativeInput,
2887
- onChange: handleNativeInput
2888
- }, null, 40, _hoisted_3$9),
2889
- createElementVNode("input", mergeProps({
2890
- ref_key: "textInput",
2891
- ref: textInput
2892
- }, textInputAttrs.value, {
2893
- type: "text",
2894
- inputmode: "text",
2895
- spellcheck: "false",
2896
- autocapitalize: "characters",
2897
- placeholder: "#RRGGBB",
2898
- class: [textInputClasses.value, props.disabled ? props.disabledClass : null],
2899
- value: displayValue.value,
2900
- disabled: props.disabled,
2901
- onInput: handleTextInput,
2902
- onBlur: handleBlur
2903
- }), null, 16, _hoisted_4$7)
2904
- ]);
2905
- };
2906
- }
2907
- });
2908
3540
  const _sfc_main$t = {
2909
3541
  __name: "Modal",
2910
3542
  props: {
@@ -5137,7 +5769,7 @@ const _sfc_main$2 = {
5137
5769
  isEditingRow(item, index) && column.slot && unref(slots)[getEditSlotName(column)] ? renderSlot(_ctx.$slots, getEditSlotName(column), mergeProps({
5138
5770
  key: 0,
5139
5771
  ref_for: true
5140
- }, getSlotBindings(item, column, index))) : isEditingRow(item, index) && column.input ? (openBlock(), createBlock(_sfc_main$w, {
5772
+ }, getSlotBindings(item, column, index))) : isEditingRow(item, index) && column.input ? (openBlock(), createBlock(_sfc_main$v, {
5141
5773
  key: 1,
5142
5774
  type: getInputType(column),
5143
5775
  class: normalizeClass(getInputClass(column)),
@@ -5365,8 +5997,8 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
5365
5997
  CardTabs: _sfc_main$T,
5366
5998
  Checkbox: _sfc_main$K,
5367
5999
  CheckboxInput: _sfc_main$J,
5368
- CheckboxMultipleInput: _sfc_main$v,
5369
- ColorPicker: _sfc_main$u,
6000
+ CheckboxMultipleInput: _sfc_main$u,
6001
+ ColorPicker,
5370
6002
  ConfirmationModal: _sfc_main$s,
5371
6003
  CustomSelect: _sfc_main$G,
5372
6004
  DateInput,
@@ -5378,7 +6010,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
5378
6010
  FormSection: _sfc_main$o,
5379
6011
  ImageInput: _sfc_main$C,
5380
6012
  InputError: _sfc_main$n,
5381
- InputGroup: _sfc_main$w,
6013
+ InputGroup: _sfc_main$v,
5382
6014
  InputLabel: _sfc_main$m,
5383
6015
  LinkButton: _sfc_main$l,
5384
6016
  Modal: _sfc_main$t,
@@ -5423,9 +6055,9 @@ const plugin = {
5423
6055
  };
5424
6056
  export {
5425
6057
  _sfc_main$x as $,
5426
- _sfc_main$A as A,
5427
- _sfc_main$y as B,
5428
- _sfc_main$k as C,
6058
+ _sfc_main$y as A,
6059
+ _sfc_main$k as B,
6060
+ ColorPicker as C,
5429
6061
  DateInput as D,
5430
6062
  _sfc_main$F as E,
5431
6063
  _sfc_main$j as F,
@@ -5462,23 +6094,23 @@ export {
5462
6094
  _sfc_main$T as f,
5463
6095
  _sfc_main$K as g,
5464
6096
  _sfc_main$J as h,
5465
- _sfc_main$v as i,
5466
- _sfc_main$u as j,
5467
- _sfc_main$s as k,
5468
- _sfc_main$G as l,
5469
- DateRangeInput as m,
5470
- _sfc_main$r as n,
5471
- _sfc_main$R as o,
5472
- _sfc_main$q as p,
5473
- _sfc_main$p as q,
5474
- plugin as r,
5475
- _sfc_main$o as s,
5476
- _sfc_main$C as t,
5477
- _sfc_main$n as u,
5478
- _sfc_main$w as v,
5479
- _sfc_main$m as w,
5480
- _sfc_main$l as x,
5481
- _sfc_main$t as y,
5482
- _sfc_main$B as z
6097
+ _sfc_main$u as i,
6098
+ _sfc_main$s as j,
6099
+ _sfc_main$G as k,
6100
+ DateRangeInput as l,
6101
+ _sfc_main$r as m,
6102
+ _sfc_main$R as n,
6103
+ _sfc_main$q as o,
6104
+ _sfc_main$p as p,
6105
+ plugin as q,
6106
+ _sfc_main$o as r,
6107
+ _sfc_main$C as s,
6108
+ _sfc_main$n as t,
6109
+ _sfc_main$v as u,
6110
+ _sfc_main$m as v,
6111
+ _sfc_main$l as w,
6112
+ _sfc_main$t as x,
6113
+ _sfc_main$B as y,
6114
+ _sfc_main$A as z
5483
6115
  };
5484
- //# sourceMappingURL=plugin-ODQo1Iv8.js.map
6116
+ //# sourceMappingURL=plugin-Ccj_nvDC.js.map