@expcat/tigercat-vue 2.0.0 → 2.0.4
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/dist/{chunk-KE6RGD4Y.mjs → chunk-26OI3TEA.mjs} +25 -55
- package/dist/{chunk-A7QIMKWQ.mjs → chunk-2T2NEZRZ.mjs} +1 -1
- package/dist/chunk-4HUYX5WW.mjs +239 -0
- package/dist/{chunk-IDUEWMWN.mjs → chunk-7KCOF5US.mjs} +61 -62
- package/dist/{chunk-RHV6DWY6.mjs → chunk-7VHXZX7Y.mjs} +20 -28
- package/dist/{chunk-IZRQ7LB3.mjs → chunk-AU6IC6K7.mjs} +1 -1
- package/dist/{chunk-O6BN5R6J.mjs → chunk-AUMTHL6N.mjs} +1 -1
- package/dist/{chunk-MNSVJBNH.mjs → chunk-B4MDHE3L.mjs} +18 -4
- package/dist/{chunk-N7LWKAYS.mjs → chunk-BZ6MVFV7.mjs} +190 -174
- package/dist/{chunk-TK3QU367.mjs → chunk-DI6RRAGQ.mjs} +3 -3
- package/dist/{chunk-4ZZYQITT.mjs → chunk-FWO7RNGI.mjs} +249 -220
- package/dist/{chunk-EZZD4OCV.mjs → chunk-GS4SV2HK.mjs} +1 -1
- package/dist/{chunk-EUSODI5E.mjs → chunk-HKYRRQS7.mjs} +11 -5
- package/dist/{chunk-D4APFWWS.mjs → chunk-IPGPLFUZ.mjs} +18 -4
- package/dist/{chunk-JKPXJ3VB.mjs → chunk-JALHMWKW.mjs} +14 -6
- package/dist/{chunk-OHPXOLNB.mjs → chunk-K3WTQBE4.mjs} +40 -15
- package/dist/{chunk-VMYV5EWI.mjs → chunk-KICZSLOX.mjs} +9 -8
- package/dist/{chunk-SK2QJ66E.mjs → chunk-KROVW4AW.mjs} +19 -59
- package/dist/{chunk-AQMPCLX7.mjs → chunk-NMAJD353.mjs} +248 -253
- package/dist/{chunk-4BO6JNA6.mjs → chunk-OAPIT53X.mjs} +4 -4
- package/dist/{chunk-SYRRMZT2.mjs → chunk-OQVGB7X6.mjs} +43 -29
- package/dist/{chunk-DWK5GUMB.mjs → chunk-OTGGPXDT.mjs} +26 -19
- package/dist/{chunk-DWPZRG7A.mjs → chunk-PGF7HLLR.mjs} +43 -39
- package/dist/chunk-Q7Y22OFX.mjs +330 -0
- package/dist/{chunk-NP6DZQ3O.mjs → chunk-RID7A5V7.mjs} +1 -1
- package/dist/{chunk-DKMKJZ7A.mjs → chunk-S5RTMAQN.mjs} +1 -1
- package/dist/{chunk-SJ7W5I5H.mjs → chunk-TCV6YPH5.mjs} +1 -1
- package/dist/{chunk-LFENEILY.mjs → chunk-WC5MKASU.mjs} +110 -99
- package/dist/components/ActivityFeed.mjs +3 -3
- package/dist/components/AutoComplete.mjs +2 -1
- package/dist/components/BackTop.d.mts +2 -2
- package/dist/components/Cascader.mjs +2 -1
- package/dist/components/ColorPicker.mjs +2 -1
- package/dist/components/CropUpload.mjs +3 -3
- package/dist/components/DataExport.mjs +3 -3
- package/dist/components/DataTableWithToolbar.mjs +6 -6
- package/dist/components/DatePicker.mjs +2 -1
- package/dist/components/DonutChart.d.mts +1 -1
- package/dist/components/Drawer.d.mts +2 -2
- package/dist/components/Drawer.mjs +2 -2
- package/dist/components/Dropdown.d.mts +2 -2
- package/dist/components/Dropdown.mjs +2 -2
- package/dist/components/FloatButton.d.mts +1 -1
- package/dist/components/FormItem.mjs +2 -1
- package/dist/components/Image.mjs +3 -3
- package/dist/components/Loading.mjs +2 -2
- package/dist/components/Mentions.mjs +2 -1
- package/dist/components/Menu.mjs +2 -2
- package/dist/components/Modal.d.mts +1 -1
- package/dist/components/Modal.mjs +2 -2
- package/dist/components/NotificationCenter.mjs +3 -3
- package/dist/components/PieChart.d.mts +1 -1
- package/dist/components/Popconfirm.d.mts +2 -2
- package/dist/components/Popconfirm.mjs +3 -3
- package/dist/components/Popover.d.mts +2 -2
- package/dist/components/Popover.mjs +3 -3
- package/dist/components/Select.mjs +2 -1
- package/dist/components/Spotlight.d.mts +1 -1
- package/dist/components/Spotlight.mjs +2 -2
- package/dist/components/Table.mjs +3 -2
- package/dist/components/TimePicker.mjs +2 -1
- package/dist/components/Tooltip.d.mts +2 -2
- package/dist/components/Tooltip.mjs +3 -3
- package/dist/components/Tour.mjs +2 -2
- package/dist/components/TreeSelect.mjs +2 -1
- package/dist/index.mjs +4 -2
- package/package.json +2 -2
- package/dist/chunk-BDTPFPSB.mjs +0 -163
- package/dist/chunk-EWUHEW6W.mjs +0 -219
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Table,
|
|
3
3
|
Table_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-AU6IC6K7.mjs";
|
|
5
|
+
import "../chunk-BZ6MVFV7.mjs";
|
|
6
6
|
import "../chunk-6BDDX2R4.mjs";
|
|
7
7
|
import "../chunk-6TTICJR4.mjs";
|
|
8
8
|
import "../chunk-2LIIMWBR.mjs";
|
|
9
9
|
import "../chunk-SJINC5NF.mjs";
|
|
10
10
|
import "../chunk-MYKKKVGK.mjs";
|
|
11
11
|
import "../chunk-P3VAY2IQ.mjs";
|
|
12
|
+
import "../chunk-Q7Y22OFX.mjs";
|
|
12
13
|
import "../chunk-UOJOJBEU.mjs";
|
|
13
14
|
import "../chunk-TGXBCKOU.mjs";
|
|
14
15
|
export {
|
|
@@ -105,10 +105,10 @@ declare const Tooltip: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
105
105
|
className: string;
|
|
106
106
|
style: StyleValue;
|
|
107
107
|
disabled: boolean;
|
|
108
|
+
placement: FloatingPlacement;
|
|
109
|
+
offset: number;
|
|
108
110
|
open: boolean;
|
|
109
111
|
content: string;
|
|
110
|
-
offset: number;
|
|
111
|
-
placement: FloatingPlacement;
|
|
112
112
|
trigger: TooltipTrigger;
|
|
113
113
|
defaultOpen: boolean;
|
|
114
114
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Tooltip,
|
|
3
3
|
Tooltip_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-HKYRRQS7.mjs";
|
|
5
|
+
import "../chunk-26OI3TEA.mjs";
|
|
6
|
+
import "../chunk-Q7Y22OFX.mjs";
|
|
7
7
|
export {
|
|
8
8
|
Tooltip,
|
|
9
9
|
Tooltip_default as default
|
package/dist/components/Tour.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Tour,
|
|
3
3
|
Tour_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-BDTPFPSB.mjs";
|
|
4
|
+
} from "../chunk-OAPIT53X.mjs";
|
|
6
5
|
import "../chunk-2TNZ4JNT.mjs";
|
|
6
|
+
import "../chunk-Q7Y22OFX.mjs";
|
|
7
7
|
import "../chunk-UOJOJBEU.mjs";
|
|
8
8
|
import "../chunk-TGXBCKOU.mjs";
|
|
9
9
|
export {
|
package/dist/index.mjs
CHANGED
|
@@ -693,6 +693,8 @@ export {
|
|
|
693
693
|
getAnchorLinkListClasses,
|
|
694
694
|
getAnchorTargetElement,
|
|
695
695
|
getAnchorWrapperClasses,
|
|
696
|
+
getAnchoredOverlayLayoutClasses,
|
|
697
|
+
getAnchoredOverlayTabTarget,
|
|
696
698
|
getAreaGradientPrefix,
|
|
697
699
|
getArrowStyles,
|
|
698
700
|
getAutoCompleteInputClasses,
|
|
@@ -1109,7 +1111,6 @@ export {
|
|
|
1109
1111
|
getStepsContainerClasses,
|
|
1110
1112
|
getSubMenuExpandIconClasses,
|
|
1111
1113
|
getSubMenuTitleClasses,
|
|
1112
|
-
getSubmenuPopupZIndex,
|
|
1113
1114
|
getSunburstGradientPrefix,
|
|
1114
1115
|
getSvgDefaultAttrs,
|
|
1115
1116
|
getSwitchClasses,
|
|
@@ -1553,7 +1554,6 @@ export {
|
|
|
1553
1554
|
popconfirmQuestionIconPath,
|
|
1554
1555
|
popconfirmSuccessIconPath,
|
|
1555
1556
|
popconfirmWarningIconPath,
|
|
1556
|
-
positionMentionsDropdown,
|
|
1557
1557
|
prefersReducedMotion,
|
|
1558
1558
|
prepareUploadFiles,
|
|
1559
1559
|
prevIconPath,
|
|
@@ -1606,6 +1606,7 @@ export {
|
|
|
1606
1606
|
rateInactiveColor,
|
|
1607
1607
|
readFileAsDataUrl,
|
|
1608
1608
|
redoFormHistory,
|
|
1609
|
+
registerEscapeDismiss,
|
|
1609
1610
|
registerImageGroupItem,
|
|
1610
1611
|
removeCssVarsCached,
|
|
1611
1612
|
renderMarkdownInline,
|
|
@@ -1637,6 +1638,7 @@ export {
|
|
|
1637
1638
|
resizeCropRect,
|
|
1638
1639
|
resizePanes,
|
|
1639
1640
|
resolveAffixTarget,
|
|
1641
|
+
resolveAnchoredOverlayTarget,
|
|
1640
1642
|
resolveCardPadding,
|
|
1641
1643
|
resolveCarouselSwipeDirection,
|
|
1642
1644
|
resolveChartPalette,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@expcat/tigercat-vue",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"description": "Vue 3 components for Tigercat UI library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Yizhe Wang",
|
|
@@ -783,7 +783,7 @@
|
|
|
783
783
|
"access": "public"
|
|
784
784
|
},
|
|
785
785
|
"dependencies": {
|
|
786
|
-
"@expcat/tigercat-core": "2.0.
|
|
786
|
+
"@expcat/tigercat-core": "2.0.4"
|
|
787
787
|
},
|
|
788
788
|
"devDependencies": {
|
|
789
789
|
"@types/node": "^26.1.1",
|
package/dist/chunk-BDTPFPSB.mjs
DELETED
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
// src/utils/overlay.ts
|
|
2
|
-
import {
|
|
3
|
-
getFocusTrapNavigation,
|
|
4
|
-
getFocusableElements,
|
|
5
|
-
isEscapeKey,
|
|
6
|
-
isEventOutside,
|
|
7
|
-
lockBodyScroll,
|
|
8
|
-
computeFloatingPosition,
|
|
9
|
-
autoUpdateFloating
|
|
10
|
-
} from "@expcat/tigercat-core";
|
|
11
|
-
import { h, ref, Teleport, watch, onBeforeUnmount } from "vue";
|
|
12
|
-
function useVueClickOutside({
|
|
13
|
-
enabled,
|
|
14
|
-
containerRef,
|
|
15
|
-
refs,
|
|
16
|
-
onOutsideClick,
|
|
17
|
-
defer = false
|
|
18
|
-
}) {
|
|
19
|
-
let timer;
|
|
20
|
-
const handler = (event) => {
|
|
21
|
-
if (!enabled.value) return;
|
|
22
|
-
const elements = refs?.length ? refs.map((ref2) => ref2?.value) : [containerRef?.value];
|
|
23
|
-
if (!elements.some(Boolean)) return;
|
|
24
|
-
if (isEventOutside(event, elements)) {
|
|
25
|
-
onOutsideClick();
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const attach = () => document.addEventListener("click", handler);
|
|
29
|
-
const detach = () => document.removeEventListener("click", handler);
|
|
30
|
-
if (!defer) {
|
|
31
|
-
attach();
|
|
32
|
-
return () => detach();
|
|
33
|
-
}
|
|
34
|
-
timer = window.setTimeout(() => attach(), 0);
|
|
35
|
-
return () => {
|
|
36
|
-
if (timer !== void 0) window.clearTimeout(timer);
|
|
37
|
-
detach();
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
function useVueEscapeKey({ enabled, onEscape }) {
|
|
41
|
-
const handler = (event) => {
|
|
42
|
-
if (!enabled.value) return;
|
|
43
|
-
if (event.defaultPrevented) return;
|
|
44
|
-
if (!isEscapeKey(event)) return;
|
|
45
|
-
onEscape();
|
|
46
|
-
};
|
|
47
|
-
document.addEventListener("keydown", handler);
|
|
48
|
-
return () => document.removeEventListener("keydown", handler);
|
|
49
|
-
}
|
|
50
|
-
function useVueBodyScrollLock(enabled) {
|
|
51
|
-
watch(
|
|
52
|
-
enabled,
|
|
53
|
-
(isEnabled, _prevEnabled, onCleanup) => {
|
|
54
|
-
if (!isEnabled) return;
|
|
55
|
-
const unlock = lockBodyScroll();
|
|
56
|
-
onCleanup(() => unlock());
|
|
57
|
-
},
|
|
58
|
-
{ immediate: true }
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
function renderVueBodyTeleport(children, disabled = false) {
|
|
62
|
-
const normalizedChildren = children == null ? [] : Array.isArray(children) ? children : [children];
|
|
63
|
-
return h(Teleport, { to: "body", disabled }, normalizedChildren);
|
|
64
|
-
}
|
|
65
|
-
function useVueFocusTrap({ enabled, containerRef }) {
|
|
66
|
-
watch(
|
|
67
|
-
[enabled, containerRef],
|
|
68
|
-
([isEnabled, container], _previous, onCleanup) => {
|
|
69
|
-
if (!isEnabled || !container) return;
|
|
70
|
-
const handler = (event) => {
|
|
71
|
-
const focusables = getFocusableElements(container);
|
|
72
|
-
const activeElement = container.ownerDocument?.activeElement ?? document.activeElement;
|
|
73
|
-
const navigation = getFocusTrapNavigation(event, focusables, activeElement);
|
|
74
|
-
if (!navigation.shouldHandle || !navigation.next) return;
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
navigation.next.focus();
|
|
77
|
-
};
|
|
78
|
-
container.addEventListener("keydown", handler);
|
|
79
|
-
onCleanup(() => container.removeEventListener("keydown", handler));
|
|
80
|
-
},
|
|
81
|
-
{ immediate: true, flush: "post" }
|
|
82
|
-
);
|
|
83
|
-
}
|
|
84
|
-
function useVueFloating(options) {
|
|
85
|
-
const {
|
|
86
|
-
referenceRef,
|
|
87
|
-
floatingRef,
|
|
88
|
-
enabled,
|
|
89
|
-
placement: initialPlacement = "bottom",
|
|
90
|
-
offset: offsetDistance = 8,
|
|
91
|
-
arrowRef,
|
|
92
|
-
onPlacementChange
|
|
93
|
-
} = options;
|
|
94
|
-
const x = ref(0);
|
|
95
|
-
const y = ref(0);
|
|
96
|
-
const placement = ref(initialPlacement);
|
|
97
|
-
const arrowX = ref(void 0);
|
|
98
|
-
const arrowY = ref(void 0);
|
|
99
|
-
let cleanup = null;
|
|
100
|
-
const update = async () => {
|
|
101
|
-
const reference = referenceRef.value;
|
|
102
|
-
const floating = floatingRef.value;
|
|
103
|
-
if (!reference || !floating) return;
|
|
104
|
-
const floatingOptions = {
|
|
105
|
-
placement: initialPlacement,
|
|
106
|
-
offset: offsetDistance,
|
|
107
|
-
flip: true,
|
|
108
|
-
shift: true,
|
|
109
|
-
arrowElement: arrowRef?.value
|
|
110
|
-
};
|
|
111
|
-
const result = await computeFloatingPosition(
|
|
112
|
-
reference,
|
|
113
|
-
floating,
|
|
114
|
-
floatingOptions
|
|
115
|
-
);
|
|
116
|
-
x.value = result.x;
|
|
117
|
-
y.value = result.y;
|
|
118
|
-
if (result.placement !== placement.value) {
|
|
119
|
-
placement.value = result.placement;
|
|
120
|
-
onPlacementChange?.(result.placement);
|
|
121
|
-
}
|
|
122
|
-
if (result.arrow) {
|
|
123
|
-
arrowX.value = result.arrow.x;
|
|
124
|
-
arrowY.value = result.arrow.y;
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
watch(
|
|
128
|
-
[enabled, referenceRef, floatingRef],
|
|
129
|
-
([isEnabled, reference, floating]) => {
|
|
130
|
-
if (cleanup) {
|
|
131
|
-
cleanup();
|
|
132
|
-
cleanup = null;
|
|
133
|
-
}
|
|
134
|
-
if (!isEnabled || !reference || !floating) return;
|
|
135
|
-
update();
|
|
136
|
-
cleanup = autoUpdateFloating(reference, floating, update);
|
|
137
|
-
},
|
|
138
|
-
{ immediate: true }
|
|
139
|
-
);
|
|
140
|
-
onBeforeUnmount(() => {
|
|
141
|
-
if (cleanup) {
|
|
142
|
-
cleanup();
|
|
143
|
-
cleanup = null;
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
return {
|
|
147
|
-
x,
|
|
148
|
-
y,
|
|
149
|
-
placement,
|
|
150
|
-
arrowX,
|
|
151
|
-
arrowY,
|
|
152
|
-
update
|
|
153
|
-
};
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
export {
|
|
157
|
-
useVueClickOutside,
|
|
158
|
-
useVueEscapeKey,
|
|
159
|
-
useVueBodyScrollLock,
|
|
160
|
-
renderVueBodyTeleport,
|
|
161
|
-
useVueFocusTrap,
|
|
162
|
-
useVueFloating
|
|
163
|
-
};
|
package/dist/chunk-EWUHEW6W.mjs
DELETED
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
// src/components/ColorPicker.ts
|
|
2
|
-
import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
|
|
3
|
-
import {
|
|
4
|
-
colorPickerBaseClasses,
|
|
5
|
-
getColorPickerTriggerClasses,
|
|
6
|
-
colorPickerPanelClasses,
|
|
7
|
-
colorPickerInputClasses,
|
|
8
|
-
colorPickerPresetClasses,
|
|
9
|
-
hexToRgb,
|
|
10
|
-
rgbToHex,
|
|
11
|
-
rgbToHsv,
|
|
12
|
-
hsvToRgb,
|
|
13
|
-
formatColorString,
|
|
14
|
-
parseColorInput,
|
|
15
|
-
classNames,
|
|
16
|
-
coerceClassValue
|
|
17
|
-
} from "@expcat/tigercat-core";
|
|
18
|
-
var ColorPicker = defineComponent({
|
|
19
|
-
name: "TigerColorPicker",
|
|
20
|
-
props: {
|
|
21
|
-
modelValue: { type: String, default: "#2563eb" },
|
|
22
|
-
disabled: { type: Boolean, default: false },
|
|
23
|
-
size: { type: String, default: "md" },
|
|
24
|
-
showAlpha: { type: Boolean, default: false },
|
|
25
|
-
format: { type: String, default: "hex" },
|
|
26
|
-
presets: { type: Array, default: void 0 }
|
|
27
|
-
},
|
|
28
|
-
emits: ["update:modelValue", "change"],
|
|
29
|
-
setup(props, { emit, attrs }) {
|
|
30
|
-
const isOpen = ref(false);
|
|
31
|
-
const alpha = ref(1);
|
|
32
|
-
const containerRef = ref(null);
|
|
33
|
-
const rgb = computed(() => hexToRgb(props.modelValue));
|
|
34
|
-
const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
|
|
35
|
-
const displayValue = computed(
|
|
36
|
-
() => formatColorString(
|
|
37
|
-
rgb.value.r,
|
|
38
|
-
rgb.value.g,
|
|
39
|
-
rgb.value.b,
|
|
40
|
-
props.format,
|
|
41
|
-
props.showAlpha ? alpha.value : void 0
|
|
42
|
-
)
|
|
43
|
-
);
|
|
44
|
-
const swatchColor = computed(
|
|
45
|
-
() => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
|
|
46
|
-
);
|
|
47
|
-
const inputValue = ref(displayValue.value);
|
|
48
|
-
watch(displayValue, (v) => {
|
|
49
|
-
inputValue.value = v;
|
|
50
|
-
});
|
|
51
|
-
function togglePanel() {
|
|
52
|
-
if (props.disabled) return;
|
|
53
|
-
isOpen.value = !isOpen.value;
|
|
54
|
-
}
|
|
55
|
-
function closePanel() {
|
|
56
|
-
isOpen.value = false;
|
|
57
|
-
}
|
|
58
|
-
function handleTriggerKeydown(e) {
|
|
59
|
-
if (props.disabled) return;
|
|
60
|
-
if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
|
|
61
|
-
e.preventDefault();
|
|
62
|
-
isOpen.value = !isOpen.value;
|
|
63
|
-
} else if (e.key === "Escape" && isOpen.value) {
|
|
64
|
-
isOpen.value = false;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
function handleAlphaChange(e) {
|
|
68
|
-
alpha.value = Number(e.target.value) / 100;
|
|
69
|
-
}
|
|
70
|
-
function handleHueChange(e) {
|
|
71
|
-
const hue = Number(e.target.value);
|
|
72
|
-
const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
|
|
73
|
-
const hex = rgbToHex(r, g, b);
|
|
74
|
-
emit("update:modelValue", hex);
|
|
75
|
-
emit("change", hex);
|
|
76
|
-
}
|
|
77
|
-
function handleInputChange(e) {
|
|
78
|
-
const val = e.target.value;
|
|
79
|
-
inputValue.value = val;
|
|
80
|
-
const hex = parseColorInput(val);
|
|
81
|
-
if (hex) {
|
|
82
|
-
emit("update:modelValue", hex);
|
|
83
|
-
emit("change", hex);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
function handlePresetClick(color) {
|
|
87
|
-
emit("update:modelValue", color);
|
|
88
|
-
emit("change", color);
|
|
89
|
-
}
|
|
90
|
-
function handlePresetKeydown(e, color) {
|
|
91
|
-
if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
|
|
92
|
-
e.preventDefault();
|
|
93
|
-
handlePresetClick(color);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
function handleClickOutside(e) {
|
|
97
|
-
if (containerRef.value && !containerRef.value.contains(e.target)) {
|
|
98
|
-
closePanel();
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
watch(isOpen, (val) => {
|
|
102
|
-
if (val) document.addEventListener("click", handleClickOutside);
|
|
103
|
-
else document.removeEventListener("click", handleClickOutside);
|
|
104
|
-
});
|
|
105
|
-
onBeforeUnmount(() => {
|
|
106
|
-
document.removeEventListener("click", handleClickOutside);
|
|
107
|
-
});
|
|
108
|
-
return () => h(
|
|
109
|
-
"div",
|
|
110
|
-
{
|
|
111
|
-
ref: containerRef,
|
|
112
|
-
class: classNames(colorPickerBaseClasses, coerceClassValue(attrs.class))
|
|
113
|
-
},
|
|
114
|
-
[
|
|
115
|
-
// Color trigger swatch
|
|
116
|
-
h("div", {
|
|
117
|
-
class: getColorPickerTriggerClasses(props.size, props.disabled),
|
|
118
|
-
style: { backgroundColor: swatchColor.value },
|
|
119
|
-
role: "button",
|
|
120
|
-
"aria-label": "Pick color",
|
|
121
|
-
"aria-haspopup": "dialog",
|
|
122
|
-
"aria-expanded": isOpen.value,
|
|
123
|
-
"aria-disabled": props.disabled || void 0,
|
|
124
|
-
tabindex: props.disabled ? -1 : 0,
|
|
125
|
-
onClick: togglePanel,
|
|
126
|
-
onKeydown: handleTriggerKeydown
|
|
127
|
-
}),
|
|
128
|
-
// Panel
|
|
129
|
-
isOpen.value ? h("div", { class: colorPickerPanelClasses }, [
|
|
130
|
-
// Hue slider
|
|
131
|
-
h("div", { class: "mb-2" }, [
|
|
132
|
-
h(
|
|
133
|
-
"label",
|
|
134
|
-
{ class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
|
|
135
|
-
"Hue"
|
|
136
|
-
),
|
|
137
|
-
h("input", {
|
|
138
|
-
type: "range",
|
|
139
|
-
min: 0,
|
|
140
|
-
max: 360,
|
|
141
|
-
value: hsv.value.h,
|
|
142
|
-
class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
|
|
143
|
-
"aria-label": "Hue",
|
|
144
|
-
onInput: handleHueChange
|
|
145
|
-
})
|
|
146
|
-
]),
|
|
147
|
-
// Alpha slider
|
|
148
|
-
props.showAlpha ? h("div", { class: "mb-2" }, [
|
|
149
|
-
h(
|
|
150
|
-
"label",
|
|
151
|
-
{ class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
|
|
152
|
-
"Alpha"
|
|
153
|
-
),
|
|
154
|
-
h("input", {
|
|
155
|
-
type: "range",
|
|
156
|
-
min: 0,
|
|
157
|
-
max: 100,
|
|
158
|
-
value: Math.round(alpha.value * 100),
|
|
159
|
-
class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
|
|
160
|
-
"aria-label": "Alpha",
|
|
161
|
-
onInput: handleAlphaChange
|
|
162
|
-
})
|
|
163
|
-
]) : null,
|
|
164
|
-
// Color value input (rendered in the selected format)
|
|
165
|
-
h("div", { class: "mb-2" }, [
|
|
166
|
-
h(
|
|
167
|
-
"label",
|
|
168
|
-
{
|
|
169
|
-
class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
|
|
170
|
-
},
|
|
171
|
-
props.format
|
|
172
|
-
),
|
|
173
|
-
h("input", {
|
|
174
|
-
type: "text",
|
|
175
|
-
class: colorPickerInputClasses,
|
|
176
|
-
value: inputValue.value,
|
|
177
|
-
"aria-label": "Color value",
|
|
178
|
-
onInput: handleInputChange
|
|
179
|
-
})
|
|
180
|
-
]),
|
|
181
|
-
// Preview
|
|
182
|
-
h("div", { class: "flex items-center gap-2 mb-2" }, [
|
|
183
|
-
h("div", {
|
|
184
|
-
class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
|
|
185
|
-
style: { backgroundColor: swatchColor.value },
|
|
186
|
-
"aria-label": "Color preview"
|
|
187
|
-
}),
|
|
188
|
-
h(
|
|
189
|
-
"span",
|
|
190
|
-
{ class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
|
|
191
|
-
displayValue.value
|
|
192
|
-
)
|
|
193
|
-
]),
|
|
194
|
-
// Presets
|
|
195
|
-
props.presets && props.presets.length > 0 ? h("div", { class: "flex flex-wrap gap-1" }, [
|
|
196
|
-
...props.presets.map(
|
|
197
|
-
(color) => h("div", {
|
|
198
|
-
key: color,
|
|
199
|
-
class: colorPickerPresetClasses,
|
|
200
|
-
style: { backgroundColor: color },
|
|
201
|
-
role: "button",
|
|
202
|
-
tabindex: 0,
|
|
203
|
-
"aria-label": `Select ${color}`,
|
|
204
|
-
onClick: () => handlePresetClick(color),
|
|
205
|
-
onKeydown: (e) => handlePresetKeydown(e, color)
|
|
206
|
-
})
|
|
207
|
-
)
|
|
208
|
-
]) : null
|
|
209
|
-
]) : null
|
|
210
|
-
]
|
|
211
|
-
);
|
|
212
|
-
}
|
|
213
|
-
});
|
|
214
|
-
var ColorPicker_default = ColorPicker;
|
|
215
|
-
|
|
216
|
-
export {
|
|
217
|
-
ColorPicker,
|
|
218
|
-
ColorPicker_default
|
|
219
|
-
};
|