@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.
- package/README.md +4 -0
- package/dist/components/ColorPicker.vue.d.ts +18 -0
- package/dist/components/ConfirmationModal.vue.d.ts +1 -1
- package/dist/components/DateInput.vue.d.ts +9 -0
- package/dist/components/DateRangeInput.vue.d.ts +1 -1
- package/dist/components/DialogModal.vue.d.ts +1 -1
- package/dist/components/InputGroup.vue.d.ts +19 -1
- package/dist/components/Modal.vue.d.ts +1 -1
- package/dist/index.js +21 -21
- package/dist/index.node.js +21 -21
- package/dist/{plugin-ODQo1Iv8.js → plugin-Ccj_nvDC.js} +878 -246
- package/dist/plugin-Ccj_nvDC.js.map +1 -0
- package/dist/styles.css +195 -45
- package/package.json +1 -1
- package/dist/plugin-ODQo1Iv8.js.map +0 -1
|
@@ -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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
|
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
|
|
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-
|
|
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$
|
|
1431
|
-
const _hoisted_6$
|
|
1432
|
-
const _hoisted_7$
|
|
1433
|
-
const _hoisted_8$
|
|
1434
|
-
const _hoisted_9$
|
|
1435
|
-
const _hoisted_10$
|
|
1436
|
-
const _hoisted_11$
|
|
1437
|
-
const _hoisted_12$
|
|
1438
|
-
const _hoisted_13$
|
|
1439
|
-
const _hoisted_14$
|
|
1440
|
-
const _hoisted_15$
|
|
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: "
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
1812
|
+
}, toDisplayString(day.date.getDate()), 43, _hoisted_9$4)
|
|
1803
1813
|
]);
|
|
1804
1814
|
}), 128))
|
|
1805
1815
|
]),
|
|
1806
|
-
createElementVNode("div", _hoisted_10$
|
|
1807
|
-
createElementVNode("div", _hoisted_11$
|
|
1808
|
-
createElementVNode("div", _hoisted_12$
|
|
1809
|
-
startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$
|
|
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-
|
|
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$
|
|
1834
|
-
const _hoisted_6$
|
|
1835
|
-
const _hoisted_7$
|
|
1836
|
-
const _hoisted_8$
|
|
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$
|
|
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$
|
|
1898
|
+
}, null, 8, _hoisted_6$6),
|
|
1889
1899
|
createElementVNode("div", null, [
|
|
1890
|
-
createElementVNode("p", _hoisted_7$
|
|
1891
|
-
createElementVNode("p", _hoisted_8$
|
|
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$
|
|
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 =
|
|
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$
|
|
2270
|
-
key:
|
|
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$
|
|
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: "
|
|
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$
|
|
2640
|
-
__props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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)) :
|
|
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:
|
|
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:
|
|
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$
|
|
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$
|
|
2702
|
-
const _sfc_main$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
5369
|
-
ColorPicker
|
|
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$
|
|
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$
|
|
5427
|
-
_sfc_main$
|
|
5428
|
-
|
|
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$
|
|
5466
|
-
_sfc_main$
|
|
5467
|
-
_sfc_main$
|
|
5468
|
-
|
|
5469
|
-
|
|
5470
|
-
_sfc_main$
|
|
5471
|
-
_sfc_main$
|
|
5472
|
-
_sfc_main$
|
|
5473
|
-
|
|
5474
|
-
|
|
5475
|
-
_sfc_main$
|
|
5476
|
-
_sfc_main$
|
|
5477
|
-
_sfc_main$
|
|
5478
|
-
_sfc_main$
|
|
5479
|
-
_sfc_main$
|
|
5480
|
-
_sfc_main$
|
|
5481
|
-
_sfc_main$
|
|
5482
|
-
_sfc_main$
|
|
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-
|
|
6116
|
+
//# sourceMappingURL=plugin-Ccj_nvDC.js.map
|