@itguy614/clean-ui 1.2.2 → 1.3.1
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 +12 -0
- package/dist/clean-ui.css +1 -1
- package/dist/components/CuiAccordion.vue.js +2 -2
- package/dist/components/CuiAlert.vue.d.ts +3 -5
- package/dist/components/CuiAlert.vue.d.ts.map +1 -1
- package/dist/components/CuiAlert.vue.js +1 -1
- package/dist/components/CuiAlert.vue2.js +54 -50
- package/dist/components/CuiBadge.vue.js +3 -3
- package/dist/components/CuiBadge.vue2.js +23 -23
- package/dist/components/CuiBanner.vue.d.ts +15 -10
- package/dist/components/CuiBanner.vue.d.ts.map +1 -1
- package/dist/components/CuiBanner.vue.js +5 -80
- package/dist/components/CuiBanner.vue2.js +90 -2
- package/dist/components/CuiButton.vue.d.ts +9 -0
- package/dist/components/CuiButton.vue.d.ts.map +1 -1
- package/dist/components/CuiButton.vue.js +1 -1
- package/dist/components/CuiButton.vue2.js +77 -83
- package/dist/components/CuiButtonGroup.vue.d.ts +4 -2
- package/dist/components/CuiButtonGroup.vue.d.ts.map +1 -1
- package/dist/components/CuiButtonGroup.vue.js +1 -1
- package/dist/components/CuiButtonGroup.vue2.js +18 -9
- package/dist/components/CuiCard.vue.d.ts.map +1 -1
- package/dist/components/CuiCard.vue.js +5 -33
- package/dist/components/CuiCard.vue2.js +32 -2
- package/dist/components/CuiCardBody.vue.d.ts.map +1 -1
- package/dist/components/CuiCardBody.vue.js +5 -18
- package/dist/components/CuiCardBody.vue2.js +18 -2
- package/dist/components/CuiCardFooter.vue.d.ts.map +1 -1
- package/dist/components/CuiCardFooter.vue.js +5 -30
- package/dist/components/CuiCardFooter.vue2.js +25 -2
- package/dist/components/CuiCardHeader.vue.d.ts +5 -4
- package/dist/components/CuiCardHeader.vue.d.ts.map +1 -1
- package/dist/components/CuiCardHeader.vue.js +5 -49
- package/dist/components/CuiCardHeader.vue2.js +40 -2
- package/dist/components/CuiCardMedia.vue.d.ts.map +1 -1
- package/dist/components/CuiCardMedia.vue.js +3 -3
- package/dist/components/CuiCardMedia.vue2.js +6 -6
- package/dist/components/CuiCheckbox.vue.d.ts +2 -2
- package/dist/components/CuiCheckbox.vue.d.ts.map +1 -1
- package/dist/components/CuiCheckbox.vue.js +1 -1
- package/dist/components/CuiCheckbox.vue2.js +46 -34
- package/dist/components/CuiCheckboxGroup.vue.d.ts +2 -2
- package/dist/components/CuiCheckboxGroup.vue.d.ts.map +1 -1
- package/dist/components/CuiCheckboxGroup.vue.js +2 -2
- package/dist/components/CuiCheckboxGroup.vue2.js +45 -35
- package/dist/components/CuiCodeBlock.vue.d.ts.map +1 -1
- package/dist/components/CuiCodeBlock.vue.js +14 -11
- package/dist/components/CuiColorPicker.vue.d.ts +2 -2
- package/dist/components/CuiColorPicker.vue.d.ts.map +1 -1
- package/dist/components/CuiColorPicker.vue.js +117 -104
- package/dist/components/CuiCombobox.vue.d.ts +2 -2
- package/dist/components/CuiCombobox.vue.d.ts.map +1 -1
- package/dist/components/CuiCombobox.vue.js +5 -330
- package/dist/components/CuiCombobox.vue2.js +330 -2
- package/dist/components/CuiConfirmDialog.vue.d.ts +5 -4
- package/dist/components/CuiConfirmDialog.vue.d.ts.map +1 -1
- package/dist/components/CuiConfirmDialog.vue.js +84 -73
- package/dist/components/CuiContextMenu.vue.d.ts +40 -1
- package/dist/components/CuiContextMenu.vue.d.ts.map +1 -1
- package/dist/components/CuiContextMenu.vue.js +1 -1
- package/dist/components/CuiContextMenu.vue2.js +149 -91
- package/dist/components/CuiCopyButton.vue.d.ts.map +1 -1
- package/dist/components/CuiCopyButton.vue.js +5 -61
- package/dist/components/CuiCopyButton.vue2.js +68 -2
- package/dist/components/CuiDataGridCardView.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridCardView.vue.js +10 -9
- package/dist/components/CuiDataGridColumnManager.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridColumnManager.vue.js +12 -11
- package/dist/components/CuiDataGridPagination.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridPagination.vue.js +9 -8
- package/dist/components/CuiDataGridSearch.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridSearch.vue.js +12 -9
- package/dist/components/CuiDataGridTable.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridTable.vue.js +213 -190
- package/dist/components/CuiDataGridViewManager.vue.d.ts.map +1 -1
- package/dist/components/CuiDataGridViewManager.vue.js +21 -20
- package/dist/components/CuiDatePicker.vue.d.ts +2 -2
- package/dist/components/CuiDatePicker.vue.d.ts.map +1 -1
- package/dist/components/CuiDatePicker.vue.js +257 -173
- package/dist/components/CuiDateRangePicker.vue.d.ts +2 -2
- package/dist/components/CuiDateRangePicker.vue.d.ts.map +1 -1
- package/dist/components/CuiDateRangePicker.vue.js +262 -179
- package/dist/components/CuiDivider.vue.d.ts +1 -3
- package/dist/components/CuiDivider.vue.d.ts.map +1 -1
- package/dist/components/CuiDivider.vue.js +47 -59
- package/dist/components/CuiDropdownMenu.vue.js +2 -2
- package/dist/components/CuiDropdownRadioGroup.vue.d.ts +4 -1
- package/dist/components/CuiDropdownRadioGroup.vue.d.ts.map +1 -1
- package/dist/components/CuiDropdownRadioGroup.vue.js +27 -14
- package/dist/components/CuiDropdownSub.vue.js +2 -2
- package/dist/components/CuiEmptyState.vue.d.ts +5 -4
- package/dist/components/CuiEmptyState.vue.d.ts.map +1 -1
- package/dist/components/CuiEmptyState.vue.js +1 -1
- package/dist/components/CuiEmptyState.vue2.js +30 -24
- package/dist/components/CuiFieldset.vue.d.ts.map +1 -1
- package/dist/components/CuiFieldset.vue.js +1 -1
- package/dist/components/CuiFieldset.vue2.js +21 -21
- package/dist/components/CuiFileUpload.vue.d.ts +2 -2
- package/dist/components/CuiFileUpload.vue.d.ts.map +1 -1
- package/dist/components/CuiFileUpload.vue.js +70 -57
- package/dist/components/CuiFormField.vue.d.ts.map +1 -1
- package/dist/components/CuiFormField.vue.js +2 -2
- package/dist/components/CuiFormField.vue2.js +48 -42
- package/dist/components/CuiInput.vue.d.ts +2 -2
- package/dist/components/CuiInput.vue.d.ts.map +1 -1
- package/dist/components/CuiInput.vue.js +1 -1
- package/dist/components/CuiInput.vue2.js +97 -85
- package/dist/components/CuiInputStepper.vue.d.ts +2 -2
- package/dist/components/CuiInputStepper.vue.d.ts.map +1 -1
- package/dist/components/CuiInputStepper.vue.js +5 -187
- package/dist/components/CuiInputStepper.vue2.js +237 -2
- package/dist/components/CuiKbd.vue.d.ts.map +1 -1
- package/dist/components/CuiKbd.vue.js +6 -5
- package/dist/components/CuiMaskedInput.vue.d.ts +9 -3
- package/dist/components/CuiMaskedInput.vue.d.ts.map +1 -1
- package/dist/components/CuiMaskedInput.vue.js +132 -117
- package/dist/components/CuiModal.vue.d.ts +10 -2
- package/dist/components/CuiModal.vue.d.ts.map +1 -1
- package/dist/components/CuiModal.vue.js +2 -2
- package/dist/components/CuiModal.vue2.js +48 -44
- package/dist/components/CuiModalBody.vue.d.ts.map +1 -1
- package/dist/components/CuiModalBody.vue.js +16 -13
- package/dist/components/CuiModalFooter.vue.d.ts.map +1 -1
- package/dist/components/CuiModalFooter.vue.js +3 -2
- package/dist/components/CuiModalHeader.vue.d.ts +13 -4
- package/dist/components/CuiModalHeader.vue.d.ts.map +1 -1
- package/dist/components/CuiModalHeader.vue.js +54 -42
- package/dist/components/CuiPagination.vue.d.ts.map +1 -1
- package/dist/components/CuiPagination.vue.js +1 -1
- package/dist/components/CuiPagination.vue2.js +28 -25
- package/dist/components/CuiPopover.vue.d.ts.map +1 -1
- package/dist/components/CuiPopover.vue.js +80 -72
- package/dist/components/CuiRadio.vue.d.ts +2 -4
- package/dist/components/CuiRadio.vue.d.ts.map +1 -1
- package/dist/components/CuiRadio.vue.js +2 -2
- package/dist/components/CuiRadio.vue2.js +88 -74
- package/dist/components/CuiRadioGroup.vue.d.ts +2 -2
- package/dist/components/CuiRadioGroup.vue.d.ts.map +1 -1
- package/dist/components/CuiRadioGroup.vue.js +3 -3
- package/dist/components/CuiRadioGroup.vue2.js +47 -37
- package/dist/components/CuiRating.vue.d.ts.map +1 -1
- package/dist/components/CuiRating.vue.js +15 -14
- package/dist/components/CuiResizablePanels.vue.d.ts.map +1 -1
- package/dist/components/CuiResizablePanels.vue.js +10 -9
- package/dist/components/CuiSelect.vue.d.ts +2 -2
- package/dist/components/CuiSelect.vue.d.ts.map +1 -1
- package/dist/components/CuiSelect.vue.js +2 -2
- package/dist/components/CuiSelect.vue2.js +161 -151
- package/dist/components/CuiSkeleton.vue.js +2 -2
- package/dist/components/CuiSkeleton.vue2.js +10 -10
- package/dist/components/CuiSlideover.vue.d.ts +2 -2
- package/dist/components/CuiSlideover.vue.d.ts.map +1 -1
- package/dist/components/CuiSlideover.vue.js +34 -30
- package/dist/components/CuiSlider.vue.d.ts +2 -2
- package/dist/components/CuiSlider.vue.d.ts.map +1 -1
- package/dist/components/CuiSlider.vue.js +5 -154
- package/dist/components/CuiSlider.vue2.js +171 -2
- package/dist/components/CuiSpinner.vue.d.ts.map +1 -1
- package/dist/components/CuiSpinner.vue.js +5 -4
- package/dist/components/CuiTable.vue.d.ts.map +1 -1
- package/dist/components/CuiTable.vue.js +4 -1
- package/dist/components/CuiTableBody.vue.d.ts.map +1 -1
- package/dist/components/CuiTableBody.vue.js +6 -6
- package/dist/components/CuiTableCell.vue.d.ts.map +1 -1
- package/dist/components/CuiTableCell.vue.js +11 -10
- package/dist/components/CuiTableFoot.vue.d.ts.map +1 -1
- package/dist/components/CuiTableFoot.vue.js +7 -7
- package/dist/components/CuiTableHead.vue.d.ts.map +1 -1
- package/dist/components/CuiTableHead.vue.js +7 -7
- package/dist/components/CuiTabs.vue.d.ts.map +1 -1
- package/dist/components/CuiTabs.vue.js +2 -2
- package/dist/components/CuiTabs.vue2.js +81 -76
- package/dist/components/CuiTagInput.vue.d.ts +2 -2
- package/dist/components/CuiTagInput.vue.d.ts.map +1 -1
- package/dist/components/CuiTagInput.vue.js +5 -294
- package/dist/components/CuiTagInput.vue2.js +276 -2
- package/dist/components/CuiTextarea.vue.d.ts +2 -2
- package/dist/components/CuiTextarea.vue.d.ts.map +1 -1
- package/dist/components/CuiTextarea.vue.js +4 -4
- package/dist/components/CuiTextarea.vue2.js +73 -59
- package/dist/components/CuiTimePicker.vue.d.ts +2 -2
- package/dist/components/CuiTimePicker.vue.d.ts.map +1 -1
- package/dist/components/CuiTimePicker.vue.js +172 -97
- package/dist/components/CuiTimeline.vue.d.ts.map +1 -1
- package/dist/components/CuiTimeline.vue.js +6 -5
- package/dist/components/CuiTimelineItem.vue.d.ts.map +1 -1
- package/dist/components/CuiTimelineItem.vue.js +11 -10
- package/dist/components/CuiToast.vue.d.ts +8 -10
- package/dist/components/CuiToast.vue.d.ts.map +1 -1
- package/dist/components/CuiToast.vue.js +2 -2
- package/dist/components/CuiToast.vue2.js +69 -67
- package/dist/components/CuiToggle.vue.d.ts +2 -2
- package/dist/components/CuiToggle.vue.d.ts.map +1 -1
- package/dist/components/CuiToggle.vue.js +2 -2
- package/dist/components/CuiToggle.vue2.js +71 -59
- package/dist/components/CuiToggleGroup.vue.d.ts +2 -2
- package/dist/components/CuiToggleGroup.vue.d.ts.map +1 -1
- package/dist/components/CuiToggleGroup.vue.js +2 -2
- package/dist/components/CuiToggleGroup.vue2.js +45 -35
- package/dist/components/CuiTooltip.vue.d.ts.map +1 -1
- package/dist/components/CuiTooltip.vue.js +2 -2
- package/dist/components/CuiTooltip.vue2.js +49 -45
- package/dist/components/CuiTransferList.vue.d.ts.map +1 -1
- package/dist/components/CuiTransferList.vue.js +31 -30
- package/dist/components/CuiTreeNode.vue.d.ts +9 -2
- package/dist/components/CuiTreeNode.vue.d.ts.map +1 -1
- package/dist/components/CuiTreeNode.vue.js +5 -179
- package/dist/components/CuiTreeNode.vue2.js +198 -2
- package/dist/components/CuiTreeView.vue.d.ts +33 -5
- package/dist/components/CuiTreeView.vue.d.ts.map +1 -1
- package/dist/components/CuiTreeView.vue.js +187 -44
- package/dist/composables/useCalendarKeyboard.d.ts +48 -0
- package/dist/composables/useCalendarKeyboard.d.ts.map +1 -0
- package/dist/composables/useCalendarKeyboard.js +91 -0
- package/dist/composables/useFieldDescribedBy.d.ts +30 -0
- package/dist/composables/useFieldDescribedBy.d.ts.map +1 -0
- package/dist/composables/useFieldDescribedBy.js +11 -0
- package/dist/composables/useMessages.d.ts.map +1 -1
- package/dist/composables/useMessages.js +6 -6
- package/dist/composables/usePopover.d.ts.map +1 -1
- package/dist/composables/usePopover.js +10 -0
- package/dist/composables/useScrollShadows.d.ts +3 -0
- package/dist/composables/useScrollShadows.d.ts.map +1 -1
- package/dist/composables/useScrollShadows.js +15 -12
- package/dist/icons/builtin.d.ts.map +1 -1
- package/dist/icons/builtin.js +38 -37
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +185 -182
- package/dist/messages.d.ts +39 -4
- package/dist/messages.d.ts.map +1 -1
- package/dist/messages.js +8 -7
- package/dist/types/common.d.ts +90 -0
- package/dist/types/common.d.ts.map +1 -1
- package/dist/utils/colorIconMap.d.ts +47 -3
- package/dist/utils/colorIconMap.d.ts.map +1 -1
- package/dist/utils/colorIconMap.js +20 -5
- package/dist/utils/date.d.ts +13 -0
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/date.js +46 -40
- package/dist/utils/sizing.d.ts +26 -1
- package/dist/utils/sizing.d.ts.map +1 -1
- package/dist/utils/sizing.js +22 -21
- package/dist/version.js +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as me, ref as s, computed as m, watch as pe, onMounted as J, onUnmounted as he, useTemplateRef as Q, withDirectives as _, openBlock as d, createElementBlock as c, normalizeStyle as r, withModifiers as H, createElementVNode as l, createCommentVNode as p, withKeys as be, vModelText as ge, createBlock as ye, withCtx as xe, createTextVNode as we, toDisplayString as ke, Fragment as Se, renderList as Ee, vShow as Re } from "vue";
|
|
2
2
|
import { clampSize as ze } from "../utils/sizing.js";
|
|
3
3
|
import Pe from "./CuiButton.vue.js";
|
|
4
|
-
import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as
|
|
5
|
-
const
|
|
4
|
+
import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as Be, PALETTE_TAILWIND as He, parseColor as D, rgbToHsv as A } from "../utils/color.js";
|
|
5
|
+
const De = {
|
|
6
6
|
key: 0,
|
|
7
7
|
style: { display: "flex", gap: "calc(0.625rem * var(--cui-density-scale, 1))", alignItems: "center" }
|
|
8
|
-
},
|
|
8
|
+
}, Ae = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, $e = {
|
|
9
9
|
key: 1,
|
|
10
10
|
style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))", alignItems: "center" }
|
|
11
|
-
}, Ve = {
|
|
11
|
+
}, Ve = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby"], Fe = {
|
|
12
12
|
key: 2,
|
|
13
13
|
style: { display: "flex", flexWrap: "wrap", gap: "calc(0.3125rem * var(--cui-density-scale, 1))" }
|
|
14
|
-
},
|
|
14
|
+
}, Ie = ["onClick"], te = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", Ge = /* @__PURE__ */ me({
|
|
15
15
|
__name: "CuiColorPicker",
|
|
16
16
|
props: {
|
|
17
17
|
modelValue: { default: "#000000" },
|
|
@@ -22,47 +22,53 @@ const Ae = {
|
|
|
22
22
|
showInput: { type: Boolean, default: !0 },
|
|
23
23
|
showFormatToggle: { type: Boolean, default: !0 },
|
|
24
24
|
swatchOnly: { type: Boolean, default: !1 },
|
|
25
|
+
name: {},
|
|
26
|
+
autocomplete: {},
|
|
27
|
+
id: {},
|
|
28
|
+
ariaDescribedby: {},
|
|
29
|
+
ariaLabelledby: {},
|
|
30
|
+
ariaRequired: { type: Boolean },
|
|
25
31
|
hidden: { type: Boolean, default: !1 },
|
|
26
32
|
size: { default: "md" },
|
|
27
33
|
disabled: { type: Boolean, default: !1 }
|
|
28
34
|
},
|
|
29
35
|
emits: ["update:modelValue"],
|
|
30
|
-
setup(
|
|
31
|
-
const
|
|
36
|
+
setup(n, { expose: ne, emit: ae }) {
|
|
37
|
+
const ie = ["sm", "md", "lg"], a = n, re = ae, v = s(0), h = s(1), b = s(1), u = s(1), S = s(a.format), f = s(""), oe = {
|
|
32
38
|
sm: { width: "220px", gradientHeight: "130px", sliderHeight: "10px", thumbSize: "14px", swatchSize: "20px", fontSize: "0.75rem" },
|
|
33
39
|
md: { width: "280px", gradientHeight: "160px", sliderHeight: "12px", thumbSize: "16px", swatchSize: "24px", fontSize: "0.8125rem" },
|
|
34
40
|
lg: { width: "340px", gradientHeight: "200px", sliderHeight: "14px", thumbSize: "18px", swatchSize: "28px", fontSize: "0.875rem" }
|
|
35
|
-
},
|
|
36
|
-
const { r: e, g: t, b:
|
|
37
|
-
return u.value < 1 ? `rgba(${e}, ${t}, ${
|
|
38
|
-
}),
|
|
39
|
-
const { r: e, g: t, b:
|
|
40
|
-
return Le(e, t,
|
|
41
|
+
}, o = m(() => oe[ze(a.size, ie)]), g = m(() => ee(v.value, h.value, b.value)), y = m(() => Ce(g.value.r, g.value.g, g.value.b)), $ = m(() => {
|
|
42
|
+
const { r: e, g: t, b: i } = g.value;
|
|
43
|
+
return u.value < 1 ? `rgba(${e}, ${t}, ${i}, ${u.value.toFixed(2)})` : y.value;
|
|
44
|
+
}), x = m(() => {
|
|
45
|
+
const { r: e, g: t, b: i } = g.value;
|
|
46
|
+
return Le(e, t, i, u.value, S.value);
|
|
41
47
|
});
|
|
42
48
|
function V() {
|
|
43
|
-
const e =
|
|
49
|
+
const e = D(a.modelValue);
|
|
44
50
|
if (e) {
|
|
45
|
-
const t =
|
|
46
|
-
v.value = t.h,
|
|
51
|
+
const t = A(e.r, e.g, e.b);
|
|
52
|
+
v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, f.value = x.value;
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
|
-
|
|
55
|
+
pe(() => a.modelValue, V), J(V);
|
|
50
56
|
const F = s(0);
|
|
51
57
|
let w = null;
|
|
52
58
|
J(() => {
|
|
53
|
-
|
|
59
|
+
a.presetPalette === "theme" && typeof MutationObserver < "u" && (w = new MutationObserver(() => {
|
|
54
60
|
F.value++;
|
|
55
61
|
}), w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
|
|
56
|
-
}),
|
|
62
|
+
}), he(() => {
|
|
57
63
|
w == null || w.disconnect();
|
|
58
64
|
});
|
|
59
65
|
function k() {
|
|
60
|
-
f.value =
|
|
66
|
+
f.value = x.value, re("update:modelValue", x.value);
|
|
61
67
|
}
|
|
62
|
-
const I =
|
|
68
|
+
const I = m(() => a.palette ? a.palette : a.presetPalette === "theme" ? (F.value, Me()) : a.presetPalette === "basic" ? Te : a.presetPalette === "material" ? Be : a.presetPalette === "tailwind" ? He : []), P = s(null);
|
|
63
69
|
let C = !1;
|
|
64
70
|
function le(e) {
|
|
65
|
-
|
|
71
|
+
a.disabled || (C = !0, W(e), document.addEventListener("pointermove", O), document.addEventListener("pointerup", U));
|
|
66
72
|
}
|
|
67
73
|
function O(e) {
|
|
68
74
|
C && W(e);
|
|
@@ -73,61 +79,61 @@ const Ae = {
|
|
|
73
79
|
function W(e) {
|
|
74
80
|
if (!P.value) return;
|
|
75
81
|
const t = P.value.getBoundingClientRect();
|
|
76
|
-
|
|
82
|
+
h.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), b.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), k();
|
|
77
83
|
}
|
|
78
84
|
const L = s(null);
|
|
79
85
|
let M = !1;
|
|
80
86
|
function ue(e) {
|
|
81
|
-
|
|
87
|
+
a.disabled || (M = !0, N(e), document.addEventListener("pointermove", q), document.addEventListener("pointerup", G));
|
|
82
88
|
}
|
|
83
|
-
function
|
|
84
|
-
M &&
|
|
89
|
+
function q(e) {
|
|
90
|
+
M && N(e);
|
|
85
91
|
}
|
|
86
|
-
function
|
|
87
|
-
M = !1, document.removeEventListener("pointermove",
|
|
92
|
+
function G() {
|
|
93
|
+
M = !1, document.removeEventListener("pointermove", q), document.removeEventListener("pointerup", G);
|
|
88
94
|
}
|
|
89
|
-
function
|
|
95
|
+
function N(e) {
|
|
90
96
|
if (!L.value) return;
|
|
91
97
|
const t = L.value.getBoundingClientRect();
|
|
92
98
|
v.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), k();
|
|
93
99
|
}
|
|
94
100
|
const T = s(null);
|
|
95
|
-
let
|
|
101
|
+
let B = !1;
|
|
96
102
|
function se(e) {
|
|
97
|
-
|
|
103
|
+
a.disabled || (B = !0, Y(e), document.addEventListener("pointermove", X), document.addEventListener("pointerup", K));
|
|
98
104
|
}
|
|
99
|
-
function
|
|
100
|
-
|
|
105
|
+
function X(e) {
|
|
106
|
+
B && Y(e);
|
|
101
107
|
}
|
|
102
|
-
function
|
|
103
|
-
|
|
108
|
+
function K() {
|
|
109
|
+
B = !1, document.removeEventListener("pointermove", X), document.removeEventListener("pointerup", K);
|
|
104
110
|
}
|
|
105
|
-
function
|
|
111
|
+
function Y(e) {
|
|
106
112
|
if (!T.value) return;
|
|
107
113
|
const t = T.value.getBoundingClientRect();
|
|
108
114
|
u.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), u.value = Math.round(u.value * 100) / 100, k();
|
|
109
115
|
}
|
|
110
|
-
function
|
|
111
|
-
const e =
|
|
116
|
+
function Z() {
|
|
117
|
+
const e = D(f.value);
|
|
112
118
|
if (e) {
|
|
113
|
-
const t =
|
|
114
|
-
v.value = t.h,
|
|
119
|
+
const t = A(e.r, e.g, e.b);
|
|
120
|
+
v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, k();
|
|
115
121
|
} else
|
|
116
|
-
f.value =
|
|
122
|
+
f.value = x.value;
|
|
117
123
|
}
|
|
118
124
|
function de() {
|
|
119
125
|
const e = ["hex", "rgb", "hsl"], t = e.indexOf(S.value);
|
|
120
|
-
S.value = e[(t + 1) % e.length], f.value =
|
|
126
|
+
S.value = e[(t + 1) % e.length], f.value = x.value;
|
|
121
127
|
}
|
|
122
128
|
function ce(e) {
|
|
123
|
-
if (
|
|
124
|
-
const t =
|
|
129
|
+
if (a.disabled) return;
|
|
130
|
+
const t = D(e);
|
|
125
131
|
if (t) {
|
|
126
|
-
const
|
|
127
|
-
v.value =
|
|
132
|
+
const i = A(t.r, t.g, t.b);
|
|
133
|
+
v.value = i.h, h.value = i.s, b.value = i.v, u.value = t.a, k();
|
|
128
134
|
}
|
|
129
135
|
}
|
|
130
|
-
const
|
|
136
|
+
const j = m(() => {
|
|
131
137
|
const e = ee(v.value, 1, 1);
|
|
132
138
|
return `rgb(${e.r}, ${e.g}, ${e.b})`;
|
|
133
139
|
}), E = Q("rootEl"), R = Q("inputEl");
|
|
@@ -140,39 +146,40 @@ const Ae = {
|
|
|
140
146
|
R.value ? R.value.blur() : (e = E.value) == null || e.blur();
|
|
141
147
|
}
|
|
142
148
|
return ne({ el: E, focus: ve, blur: fe }), (e, t) => _((d(), c("div", {
|
|
149
|
+
class: "cui-color-picker",
|
|
143
150
|
ref_key: "rootEl",
|
|
144
151
|
ref: E,
|
|
145
152
|
style: r({
|
|
146
|
-
width:
|
|
147
|
-
opacity:
|
|
148
|
-
pointerEvents:
|
|
153
|
+
width: o.value.width,
|
|
154
|
+
opacity: n.disabled ? "0.5" : "1",
|
|
155
|
+
pointerEvents: n.disabled ? "none" : void 0,
|
|
149
156
|
userSelect: "none"
|
|
150
157
|
})
|
|
151
158
|
}, [
|
|
152
|
-
|
|
159
|
+
n.swatchOnly ? p("", !0) : (d(), c("div", {
|
|
153
160
|
key: 0,
|
|
154
161
|
ref_key: "gradientRef",
|
|
155
162
|
ref: P,
|
|
156
163
|
style: r({
|
|
157
164
|
position: "relative",
|
|
158
165
|
width: "100%",
|
|
159
|
-
height:
|
|
166
|
+
height: o.value.gradientHeight,
|
|
160
167
|
borderRadius: "0.5rem 0.5rem 0 0",
|
|
161
168
|
cursor: "crosshair",
|
|
162
169
|
overflow: "hidden",
|
|
163
|
-
background:
|
|
170
|
+
background: j.value
|
|
164
171
|
}),
|
|
165
|
-
onPointerdown:
|
|
172
|
+
onPointerdown: H(le, ["prevent"])
|
|
166
173
|
}, [
|
|
167
174
|
t[3] || (t[3] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
|
|
168
175
|
t[4] || (t[4] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
|
|
169
176
|
l("div", {
|
|
170
177
|
style: r({
|
|
171
178
|
position: "absolute",
|
|
172
|
-
left: `${
|
|
173
|
-
top: `${(1 -
|
|
174
|
-
width:
|
|
175
|
-
height:
|
|
179
|
+
left: `${h.value * 100}%`,
|
|
180
|
+
top: `${(1 - b.value) * 100}%`,
|
|
181
|
+
width: o.value.thumbSize,
|
|
182
|
+
height: o.value.thumbSize,
|
|
176
183
|
borderRadius: "50%",
|
|
177
184
|
border: "2px solid white",
|
|
178
185
|
boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
|
|
@@ -186,14 +193,14 @@ const Ae = {
|
|
|
186
193
|
padding: "calc(0.75rem * var(--cui-density-scale, 1))",
|
|
187
194
|
background: "var(--cui-surface-base, white)",
|
|
188
195
|
border: "1px solid var(--cui-border)",
|
|
189
|
-
borderTop:
|
|
190
|
-
borderRadius:
|
|
196
|
+
borderTop: n.swatchOnly ? void 0 : "none",
|
|
197
|
+
borderRadius: n.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
|
|
191
198
|
display: "flex",
|
|
192
199
|
flexDirection: "column",
|
|
193
200
|
gap: "calc(0.625rem * var(--cui-density-scale, 1))"
|
|
194
201
|
})
|
|
195
202
|
}, [
|
|
196
|
-
|
|
203
|
+
n.swatchOnly ? p("", !0) : (d(), c("div", De, [
|
|
197
204
|
l("div", {
|
|
198
205
|
style: r({
|
|
199
206
|
width: "2rem",
|
|
@@ -207,75 +214,75 @@ const Ae = {
|
|
|
207
214
|
})
|
|
208
215
|
}, [
|
|
209
216
|
l("div", {
|
|
210
|
-
style: r({ position: "absolute", inset: "0", borderRadius: "50%", background:
|
|
217
|
+
style: r({ position: "absolute", inset: "0", borderRadius: "50%", background: $.value })
|
|
211
218
|
}, null, 4)
|
|
212
219
|
], 4),
|
|
213
|
-
l("div",
|
|
220
|
+
l("div", Ae, [
|
|
214
221
|
l("div", {
|
|
215
222
|
ref_key: "hueRef",
|
|
216
223
|
ref: L,
|
|
217
224
|
style: r({
|
|
218
225
|
position: "relative",
|
|
219
|
-
height:
|
|
226
|
+
height: o.value.sliderHeight,
|
|
220
227
|
borderRadius: "9999px",
|
|
221
228
|
cursor: "pointer",
|
|
222
229
|
background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
|
|
223
230
|
}),
|
|
224
|
-
onPointerdown:
|
|
231
|
+
onPointerdown: H(ue, ["prevent"])
|
|
225
232
|
}, [
|
|
226
233
|
l("div", {
|
|
227
234
|
style: r({
|
|
228
235
|
position: "absolute",
|
|
229
236
|
left: `${v.value / 360 * 100}%`,
|
|
230
237
|
top: "50%",
|
|
231
|
-
width:
|
|
232
|
-
height:
|
|
238
|
+
width: o.value.thumbSize,
|
|
239
|
+
height: o.value.thumbSize,
|
|
233
240
|
borderRadius: "50%",
|
|
234
241
|
border: "2px solid white",
|
|
235
242
|
boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
|
|
236
243
|
transform: "translate(-50%, -50%)",
|
|
237
244
|
pointerEvents: "none",
|
|
238
|
-
background:
|
|
245
|
+
background: j.value
|
|
239
246
|
})
|
|
240
247
|
}, null, 4)
|
|
241
248
|
], 36),
|
|
242
|
-
|
|
249
|
+
n.showAlpha ? (d(), c("div", {
|
|
243
250
|
key: 0,
|
|
244
251
|
ref_key: "alphaRef",
|
|
245
252
|
ref: T,
|
|
246
253
|
style: r({
|
|
247
254
|
position: "relative",
|
|
248
|
-
height:
|
|
255
|
+
height: o.value.sliderHeight,
|
|
249
256
|
borderRadius: "9999px",
|
|
250
257
|
cursor: "pointer",
|
|
251
258
|
background: te,
|
|
252
259
|
overflow: "hidden"
|
|
253
260
|
}),
|
|
254
|
-
onPointerdown:
|
|
261
|
+
onPointerdown: H(se, ["prevent"])
|
|
255
262
|
}, [
|
|
256
263
|
l("div", {
|
|
257
|
-
style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${
|
|
264
|
+
style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${y.value})` })
|
|
258
265
|
}, null, 4),
|
|
259
266
|
l("div", {
|
|
260
267
|
style: r({
|
|
261
268
|
position: "absolute",
|
|
262
269
|
left: `${u.value * 100}%`,
|
|
263
270
|
top: "50%",
|
|
264
|
-
width:
|
|
265
|
-
height:
|
|
271
|
+
width: o.value.thumbSize,
|
|
272
|
+
height: o.value.thumbSize,
|
|
266
273
|
borderRadius: "50%",
|
|
267
274
|
border: "2px solid white",
|
|
268
275
|
boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
|
|
269
276
|
transform: "translate(-50%, -50%)",
|
|
270
277
|
pointerEvents: "none",
|
|
271
|
-
background:
|
|
278
|
+
background: y.value
|
|
272
279
|
})
|
|
273
280
|
}, null, 4)
|
|
274
|
-
], 36)) :
|
|
281
|
+
], 36)) : p("", !0)
|
|
275
282
|
])
|
|
276
283
|
])),
|
|
277
|
-
|
|
278
|
-
|
|
284
|
+
n.showInput ? (d(), c("div", $e, [
|
|
285
|
+
n.swatchOnly ? (d(), c("div", {
|
|
279
286
|
key: 0,
|
|
280
287
|
style: r({
|
|
281
288
|
width: "1.5rem",
|
|
@@ -283,16 +290,22 @@ const Ae = {
|
|
|
283
290
|
borderRadius: "0.25rem",
|
|
284
291
|
border: "1px solid var(--cui-border)",
|
|
285
292
|
flexShrink: "0",
|
|
286
|
-
background:
|
|
293
|
+
background: $.value
|
|
287
294
|
})
|
|
288
|
-
}, null, 4)) :
|
|
295
|
+
}, null, 4)) : p("", !0),
|
|
289
296
|
_(l("input", {
|
|
290
297
|
ref: "inputEl",
|
|
291
|
-
|
|
298
|
+
id: n.id,
|
|
299
|
+
name: n.name,
|
|
300
|
+
autocomplete: n.autocomplete,
|
|
301
|
+
"aria-describedby": n.ariaDescribedby,
|
|
302
|
+
"aria-required": n.ariaRequired || void 0,
|
|
303
|
+
"aria-labelledby": n.ariaLabelledby,
|
|
304
|
+
"onUpdate:modelValue": t[0] || (t[0] = (i) => f.value = i),
|
|
292
305
|
style: r({
|
|
293
306
|
flex: "1",
|
|
294
307
|
padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))",
|
|
295
|
-
fontSize:
|
|
308
|
+
fontSize: o.value.fontSize,
|
|
296
309
|
fontFamily: "var(--cui-font-mono, monospace)",
|
|
297
310
|
border: "1px solid var(--cui-border-strong, var(--cui-border))",
|
|
298
311
|
borderRadius: "0.25rem",
|
|
@@ -301,45 +314,45 @@ const Ae = {
|
|
|
301
314
|
outline: "none",
|
|
302
315
|
minWidth: "0"
|
|
303
316
|
}),
|
|
304
|
-
onKeydown:
|
|
305
|
-
onBlur:
|
|
306
|
-
}, null,
|
|
307
|
-
[
|
|
317
|
+
onKeydown: be(Z, ["enter"]),
|
|
318
|
+
onBlur: Z
|
|
319
|
+
}, null, 44, Ve), [
|
|
320
|
+
[ge, f.value]
|
|
308
321
|
]),
|
|
309
|
-
|
|
322
|
+
n.showFormatToggle ? (d(), ye(Pe, {
|
|
310
323
|
key: 1,
|
|
311
324
|
variant: "ghost",
|
|
312
325
|
size: "xs",
|
|
313
|
-
style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize:
|
|
326
|
+
style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: o.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
|
|
314
327
|
onClick: de
|
|
315
328
|
}, {
|
|
316
|
-
default:
|
|
329
|
+
default: xe(() => [
|
|
317
330
|
we(ke(S.value.toUpperCase()), 1)
|
|
318
331
|
]),
|
|
319
332
|
_: 1
|
|
320
|
-
}, 8, ["style"])) :
|
|
321
|
-
])) :
|
|
322
|
-
I.value.length > 0 ? (d(), c("div",
|
|
323
|
-
(d(!0), c(Se, null, Ee(I.value, (
|
|
324
|
-
key:
|
|
333
|
+
}, 8, ["style"])) : p("", !0)
|
|
334
|
+
])) : p("", !0),
|
|
335
|
+
I.value.length > 0 ? (d(), c("div", Fe, [
|
|
336
|
+
(d(!0), c(Se, null, Ee(I.value, (i) => (d(), c("div", {
|
|
337
|
+
key: i,
|
|
325
338
|
style: r({
|
|
326
|
-
width:
|
|
327
|
-
height:
|
|
339
|
+
width: o.value.swatchSize,
|
|
340
|
+
height: o.value.swatchSize,
|
|
328
341
|
borderRadius: "0.25rem",
|
|
329
|
-
background:
|
|
342
|
+
background: i,
|
|
330
343
|
cursor: "pointer",
|
|
331
|
-
border:
|
|
332
|
-
boxShadow:
|
|
344
|
+
border: y.value.toLowerCase() === i.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
|
|
345
|
+
boxShadow: y.value.toLowerCase() === i.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
|
|
333
346
|
transition: "transform 0.1s ease"
|
|
334
347
|
}),
|
|
335
|
-
onClick: (z) => ce(
|
|
348
|
+
onClick: (z) => ce(i),
|
|
336
349
|
onMouseenter: t[1] || (t[1] = (z) => z.target.style.transform = "scale(1.15)"),
|
|
337
350
|
onMouseleave: t[2] || (t[2] = (z) => z.target.style.transform = "scale(1)")
|
|
338
|
-
}, null, 44,
|
|
339
|
-
])) :
|
|
351
|
+
}, null, 44, Ie))), 128))
|
|
352
|
+
])) : p("", !0)
|
|
340
353
|
], 4)
|
|
341
354
|
], 4)), [
|
|
342
|
-
[Re, !
|
|
355
|
+
[Re, !n.hidden]
|
|
343
356
|
]);
|
|
344
357
|
}
|
|
345
358
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ColorableProps, SizeableProps, DisableableProps, HideableProps, CuiRounded } from "../types/common";
|
|
1
|
+
import type { ColorableProps, SizeableProps, DisableableProps, HideableProps, CuiRounded, NativeControlProps } from "../types/common";
|
|
2
2
|
export interface ComboboxOption {
|
|
3
3
|
/** Unique value */
|
|
4
4
|
value: string | number;
|
|
@@ -15,7 +15,7 @@ export interface ComboboxOption {
|
|
|
15
15
|
/** Any extra data the consumer wants to access in slots */
|
|
16
16
|
[key: string]: unknown;
|
|
17
17
|
}
|
|
18
|
-
export interface CuiComboboxProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
|
|
18
|
+
export interface CuiComboboxProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
|
|
19
19
|
/** Selected value(s) — string/number for single, array for multiple */
|
|
20
20
|
modelValue?: string | number | (string | number)[] | null;
|
|
21
21
|
/** Static options */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"AAmnBA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAQtI,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA2SD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAkSD,QAAA,IAAI,QAAQ;;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmD/C,QAAA,MAAM,eAAe;;;;;;;;;;;WA/oBX,OAAO;;;;aAML,UAAU;aAVV,OAAO;;iBAVH,MAAM;aAJV,cAAc,EAAE;cAEf,OAAO;cAMP,MAAM;cAEN,MAAM;gBAEJ,MAAM;mBAUH,MAAM;6EAopBtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|