ropav 0.1.4 → 0.1.5
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 +16 -0
- package/dist/alert.css +18 -18
- package/dist/alert.js +15 -10
- package/dist/avatar.css +19 -19
- package/dist/avatar.js +14 -9
- package/dist/badge.css +16 -16
- package/dist/badge.js +12 -7
- package/dist/base.css +196 -56
- package/dist/button-link.css +32 -28
- package/dist/button-link.js +9 -5
- package/dist/button.css +32 -28
- package/dist/button.js +9 -5
- package/dist/checkbox.css +32 -32
- package/dist/checkbox.js +17 -9
- package/dist/chevron-right.js +12 -0
- package/dist/collectionNavigation.js +120 -0
- package/dist/color-input.js +2 -1
- package/dist/componentColors.js +94 -22
- package/dist/components/alert/types.d.ts +1 -0
- package/dist/components/alert/useAlertColor.d.ts +1 -1
- package/dist/components/avatar/types.d.ts +1 -0
- package/dist/components/avatar/useAvatarColor.d.ts +1 -1
- package/dist/components/badge/types.d.ts +1 -0
- package/dist/components/badge/useBadgeColor.d.ts +1 -1
- package/dist/components/button/types.d.ts +1 -0
- package/dist/components/button/useButtonColor.d.ts +1 -1
- package/dist/components/button-link/types.d.ts +1 -0
- package/dist/components/checkbox/types.d.ts +1 -0
- package/dist/components/dropdown-menu/dropdown-menu-primitive-core.d.ts +1 -0
- package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +0 -2
- package/dist/components/dropdown-menu/index.d.ts +1 -0
- package/dist/components/dropdown-menu/types.d.ts +4 -0
- package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +2 -1
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -0
- package/dist/components/icon-button/types.d.ts +1 -0
- package/dist/components/pagination/index.d.ts +4 -0
- package/dist/components/pagination/index.js +2 -0
- package/dist/components/pagination/pagination.d.ts +49 -0
- package/dist/components/pagination/types.d.ts +54 -0
- package/dist/components/pagination/usePagination.d.ts +19 -0
- package/dist/components/radio/types.d.ts +3 -0
- package/dist/components/select/useSelect.d.ts +1 -1
- package/dist/components/slider/range-slider-tooltip.d.ts +2 -0
- package/dist/components/slider/types.d.ts +1 -1
- package/dist/components/slider/useRangeSlider.d.ts +2 -0
- package/dist/components/slider/useSlider.d.ts +2 -0
- package/dist/components/toast/types.d.ts +2 -0
- package/dist/components/toast/useToastColor.d.ts +1 -1
- package/dist/components/tooltip/types.d.ts +1 -0
- package/dist/components/tooltip/useTooltip.d.ts +1 -1
- package/dist/dropdown-menu.js +55 -30
- package/dist/icon-button.css +39 -35
- package/dist/icon-button.js +9 -5
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -1
- package/dist/input.js +2 -1
- package/dist/number-input.js +2 -1
- package/dist/pagination.css +140 -0
- package/dist/pagination.js +442 -0
- package/dist/radio.js +15 -5
- package/dist/select.js +65 -46
- package/dist/slider.css +191 -191
- package/dist/slider.js +49 -31
- package/dist/switch.js +2 -1
- package/dist/textarea.js +2 -1
- package/dist/toast.css +26 -26
- package/dist/toast.js +16 -9
- package/dist/tooltip.css +12 -12
- package/dist/tooltip.js +13 -8
- package/dist/unplugin-icons.js +38 -25
- package/dist/useButtonColor.js +6 -3
- package/dist/useControllableValue.js +27 -0
- package/dist/useFormControl.js +2 -27
- package/dist/utils/componentColors.d.ts +14 -1
- package/docs/public-styles-api.md +1 -1
- package/docs/public-tokens.md +648 -508
- package/package.json +7 -1
- package/src/styles/_tokens.scss +459 -319
- package/src/styles/styles-manifest.json +1122 -2
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { onBeforeUnmount } from "vue";
|
|
2
|
+
//#region src/composables/useTypeahead.ts
|
|
3
|
+
var DEFAULT_TYPEAHEAD_TIMEOUT = 1e3;
|
|
4
|
+
var COMBINING_MARKS = /\p{M}/gu;
|
|
5
|
+
var WHITESPACE = /\s+/g;
|
|
6
|
+
function normalizeTypeaheadText(value, locales) {
|
|
7
|
+
return value.toLocaleLowerCase(locales).normalize("NFKD").replace(COMBINING_MARKS, "").replace(WHITESPACE, " ").trim();
|
|
8
|
+
}
|
|
9
|
+
function isRepeatedQuery(query) {
|
|
10
|
+
const characters = [...query];
|
|
11
|
+
return characters.length > 1 && characters.every((character) => character === characters[0]);
|
|
12
|
+
}
|
|
13
|
+
function useTypeahead(options) {
|
|
14
|
+
let buffer = "";
|
|
15
|
+
let timer;
|
|
16
|
+
let lastMatch;
|
|
17
|
+
let currentScope = options.scopeKey?.();
|
|
18
|
+
const isDisabled = options.isDisabled ?? (() => false);
|
|
19
|
+
function clearTimer() {
|
|
20
|
+
if (timer !== void 0) clearTimeout(timer);
|
|
21
|
+
timer = void 0;
|
|
22
|
+
}
|
|
23
|
+
function reset() {
|
|
24
|
+
clearTimer();
|
|
25
|
+
buffer = "";
|
|
26
|
+
lastMatch = void 0;
|
|
27
|
+
currentScope = options.scopeKey?.();
|
|
28
|
+
}
|
|
29
|
+
function scheduleReset() {
|
|
30
|
+
clearTimer();
|
|
31
|
+
timer = setTimeout(reset, options.timeout ?? DEFAULT_TYPEAHEAD_TIMEOUT);
|
|
32
|
+
}
|
|
33
|
+
function hasBuffer() {
|
|
34
|
+
return buffer.length > 0;
|
|
35
|
+
}
|
|
36
|
+
function getMatchIndex(query, startIndex, keepCurrent) {
|
|
37
|
+
const items = options.items();
|
|
38
|
+
if (items.length === 0) return -1;
|
|
39
|
+
function matches(index) {
|
|
40
|
+
const item = items[index];
|
|
41
|
+
return Boolean(item && !isDisabled(item) && normalizeTypeaheadText(options.getTextValue(item)).startsWith(query));
|
|
42
|
+
}
|
|
43
|
+
if (keepCurrent && startIndex >= 0 && matches(startIndex)) return startIndex;
|
|
44
|
+
for (let offset = 1; offset <= items.length; offset += 1) {
|
|
45
|
+
const index = (startIndex + offset + items.length) % items.length;
|
|
46
|
+
if (matches(index)) return index;
|
|
47
|
+
}
|
|
48
|
+
return -1;
|
|
49
|
+
}
|
|
50
|
+
function getLastMatchIndex(items) {
|
|
51
|
+
const match = lastMatch;
|
|
52
|
+
if (!match) return -1;
|
|
53
|
+
if (Object.is(items[match.index], match.item)) return match.index;
|
|
54
|
+
const identityIndex = items.findIndex((item) => Object.is(item, match.item));
|
|
55
|
+
if (identityIndex >= 0) return identityIndex;
|
|
56
|
+
let keyIndex = -1;
|
|
57
|
+
for (let index = 0; index < items.length; index += 1) {
|
|
58
|
+
if (!Object.is(options.getKey(items[index]), match.key)) continue;
|
|
59
|
+
if (keyIndex >= 0) return -1;
|
|
60
|
+
keyIndex = index;
|
|
61
|
+
}
|
|
62
|
+
return keyIndex;
|
|
63
|
+
}
|
|
64
|
+
function handleKey(event) {
|
|
65
|
+
const nextScope = options.scopeKey?.();
|
|
66
|
+
if (!Object.is(currentScope, nextScope)) reset();
|
|
67
|
+
currentScope = nextScope;
|
|
68
|
+
if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing || [...event.key].length !== 1 || event.key === " " && !hasBuffer()) return false;
|
|
69
|
+
event.preventDefault();
|
|
70
|
+
buffer += event.key;
|
|
71
|
+
scheduleReset();
|
|
72
|
+
const normalizedBuffer = normalizeTypeaheadText(buffer);
|
|
73
|
+
if (!normalizedBuffer) return true;
|
|
74
|
+
const repeated = isRepeatedQuery(normalizedBuffer);
|
|
75
|
+
const query = repeated ? [...normalizedBuffer][0] : normalizedBuffer;
|
|
76
|
+
const items = options.items();
|
|
77
|
+
const lastMatchIndex = getLastMatchIndex(items);
|
|
78
|
+
const matchIndex = getMatchIndex(query, lastMatchIndex >= 0 ? lastMatchIndex : options.activeIndex(), !repeated && [...query].length > 1);
|
|
79
|
+
if (matchIndex < 0) return true;
|
|
80
|
+
const item = items[matchIndex];
|
|
81
|
+
if (!item) return true;
|
|
82
|
+
lastMatch = {
|
|
83
|
+
item,
|
|
84
|
+
index: matchIndex,
|
|
85
|
+
key: options.getKey(item)
|
|
86
|
+
};
|
|
87
|
+
options.onMatch(item, matchIndex);
|
|
88
|
+
return true;
|
|
89
|
+
}
|
|
90
|
+
onBeforeUnmount(clearTimer);
|
|
91
|
+
return {
|
|
92
|
+
handleKey,
|
|
93
|
+
hasBuffer,
|
|
94
|
+
reset
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
//#endregion
|
|
98
|
+
//#region src/composables/collectionNavigation.ts
|
|
99
|
+
function getEnabledIndexes(items, isDisabled) {
|
|
100
|
+
return items.map((item, index) => isDisabled(item) ? -1 : index).filter((index) => index >= 0);
|
|
101
|
+
}
|
|
102
|
+
function getNextEnabledIndex(items, currentIndex, direction, isDisabled, loop = true) {
|
|
103
|
+
const enabledIndexes = getEnabledIndexes(items, isDisabled);
|
|
104
|
+
if (enabledIndexes.length === 0) return void 0;
|
|
105
|
+
const currentPosition = enabledIndexes.indexOf(currentIndex);
|
|
106
|
+
if (currentPosition < 0) {
|
|
107
|
+
if (direction === 1) return enabledIndexes.find((index) => index > currentIndex) ?? (loop ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1]);
|
|
108
|
+
for (let index = enabledIndexes.length - 1; index >= 0; index -= 1) {
|
|
109
|
+
const candidate = enabledIndexes[index];
|
|
110
|
+
if (candidate < currentIndex) return candidate;
|
|
111
|
+
}
|
|
112
|
+
return loop ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
|
|
113
|
+
}
|
|
114
|
+
const nextPosition = currentPosition + direction;
|
|
115
|
+
if (nextPosition >= 0 && nextPosition < enabledIndexes.length) return enabledIndexes[nextPosition];
|
|
116
|
+
if (!loop) return enabledIndexes[currentPosition];
|
|
117
|
+
return direction === 1 ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1];
|
|
118
|
+
}
|
|
119
|
+
//#endregion
|
|
120
|
+
export { getNextEnabledIndex as n, useTypeahead as r, getEnabledIndexes as t };
|
package/dist/color-input.js
CHANGED
|
@@ -2,7 +2,8 @@ import './color-input.css';
|
|
|
2
2
|
import { t as bem } from "./bem.js";
|
|
3
3
|
import { n as useStylesApi, t as presence } from "./styles-api.js";
|
|
4
4
|
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
5
|
-
import {
|
|
5
|
+
import { t as useControllableValue } from "./useControllableValue.js";
|
|
6
|
+
import { a as useTextFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
|
|
6
7
|
import { t as useControlState } from "./useControlState.js";
|
|
7
8
|
import { t as color_swatch_default } from "./color-swatch.js";
|
|
8
9
|
import { n as formatColorPickerValue, r as parseColorPickerValue, t as color_picker_default } from "./color-picker.js";
|
package/dist/componentColors.js
CHANGED
|
@@ -59,13 +59,20 @@ function getComponentColorValue(color) {
|
|
|
59
59
|
if (parsed.kind === "custom") return parsed.value;
|
|
60
60
|
}
|
|
61
61
|
function getComponentContrastColor(color, options = {}) {
|
|
62
|
-
|
|
62
|
+
return getComponentContrastColorRoles(color, options).color;
|
|
63
|
+
}
|
|
64
|
+
function getComponentContrastColorRoles(color, options = {}) {
|
|
65
|
+
if (options.contrastColor !== void 0) return createContrastColorRoles(options.contrastColor);
|
|
66
|
+
if (options.autoContrast === false) return createContrastColorRoles("var(--rp-color-white)");
|
|
63
67
|
const parsed = parseComponentColor(color);
|
|
64
|
-
if (parsed.kind === "
|
|
65
|
-
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
if (parsed.kind === "custom") return getCustomContrastColorRoles(parsed.value, true);
|
|
69
|
+
const roles = getComponentColorRoles(color);
|
|
70
|
+
if (!roles) return createContrastColorRoles("var(--rp-color-white)");
|
|
71
|
+
return {
|
|
72
|
+
color: roles.contrast,
|
|
73
|
+
hover: roles.contrastHover,
|
|
74
|
+
active: roles.contrastActive
|
|
75
|
+
};
|
|
69
76
|
}
|
|
70
77
|
function getComponentColorRoles(color) {
|
|
71
78
|
const parsed = parseComponentColor(color);
|
|
@@ -90,32 +97,49 @@ function getComponentColorRoles(color) {
|
|
|
90
97
|
});
|
|
91
98
|
if (parsed.kind === "shade") {
|
|
92
99
|
const base = `var(--rp-color-${parsed.color}-${parsed.shade})`;
|
|
100
|
+
const hoverShade = Math.min(Number(parsed.shade) + 1, 9);
|
|
93
101
|
return createComponentColorRoles(base, {
|
|
94
|
-
hover: `var(--rp-color-${parsed.color}-${
|
|
102
|
+
hover: `var(--rp-color-${parsed.color}-${hoverShade})`,
|
|
95
103
|
contrast: `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`,
|
|
104
|
+
contrastHover: `var(--rp-color-${parsed.color}-${hoverShade}-contrast)`,
|
|
105
|
+
contrastActive: `var(--rp-color-${parsed.color}-${parsed.shade}-active-contrast)`,
|
|
96
106
|
foreground: base
|
|
97
107
|
});
|
|
98
108
|
}
|
|
99
|
-
|
|
109
|
+
const contrast = getCustomContrastColorRoles(parsed.value);
|
|
110
|
+
return createComponentColorRoles(parsed.value, {
|
|
111
|
+
contrast: contrast.color,
|
|
112
|
+
contrastHover: contrast.hover,
|
|
113
|
+
contrastActive: contrast.active
|
|
114
|
+
});
|
|
100
115
|
}
|
|
101
|
-
function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast }) {
|
|
116
|
+
function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast, contrastColor }) {
|
|
102
117
|
const roles = getComponentColorRoles(color ?? defaultColor);
|
|
103
118
|
if (!roles) return void 0;
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
119
|
+
if (variant === "solid") {
|
|
120
|
+
const contrast = getComponentContrastColorRoles(color ?? defaultColor, {
|
|
121
|
+
autoContrast,
|
|
122
|
+
contrastColor
|
|
123
|
+
});
|
|
124
|
+
return {
|
|
125
|
+
background: roles.filled,
|
|
126
|
+
hover: roles.hover,
|
|
127
|
+
active: roles.active,
|
|
128
|
+
color: contrast.color,
|
|
129
|
+
colorHover: contrast.hover,
|
|
130
|
+
colorActive: contrast.active,
|
|
131
|
+
border: roles.filled,
|
|
132
|
+
borderHover: roles.hover,
|
|
133
|
+
borderActive: roles.active
|
|
134
|
+
};
|
|
135
|
+
}
|
|
114
136
|
if (variant === "subtle") return {
|
|
115
137
|
background: roles.light,
|
|
116
138
|
hover: roles.lightHover,
|
|
117
139
|
active: roles.lightActive,
|
|
118
140
|
color: roles.foreground,
|
|
141
|
+
colorHover: roles.foreground,
|
|
142
|
+
colorActive: roles.foreground,
|
|
119
143
|
border: "transparent",
|
|
120
144
|
borderHover: "transparent",
|
|
121
145
|
borderActive: "transparent"
|
|
@@ -125,6 +149,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
|
|
|
125
149
|
hover: roles.lightHover,
|
|
126
150
|
active: roles.lightActive,
|
|
127
151
|
color: roles.foreground,
|
|
152
|
+
colorHover: roles.foreground,
|
|
153
|
+
colorActive: roles.foreground,
|
|
128
154
|
border: roles.outline,
|
|
129
155
|
borderHover: roles.lightHover,
|
|
130
156
|
borderActive: roles.outlineHover
|
|
@@ -134,6 +160,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
|
|
|
134
160
|
hover: roles.lightHover,
|
|
135
161
|
active: roles.lightActive,
|
|
136
162
|
color: roles.foreground,
|
|
163
|
+
colorHover: roles.foreground,
|
|
164
|
+
colorActive: roles.foreground,
|
|
137
165
|
border: roles.outline,
|
|
138
166
|
borderHover: roles.outlineHover,
|
|
139
167
|
borderActive: roles.outlineHover
|
|
@@ -143,6 +171,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
|
|
|
143
171
|
hover: roles.lightHover,
|
|
144
172
|
active: roles.lightActive,
|
|
145
173
|
color: roles.foreground,
|
|
174
|
+
colorHover: roles.foreground,
|
|
175
|
+
colorActive: roles.foreground,
|
|
146
176
|
border: "transparent",
|
|
147
177
|
borderHover: "transparent",
|
|
148
178
|
borderActive: "transparent"
|
|
@@ -152,6 +182,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
|
|
|
152
182
|
hover: "transparent",
|
|
153
183
|
active: "transparent",
|
|
154
184
|
color: roles.foreground,
|
|
185
|
+
colorHover: roles.foreground,
|
|
186
|
+
colorActive: roles.foreground,
|
|
155
187
|
border: "transparent",
|
|
156
188
|
borderHover: "transparent",
|
|
157
189
|
borderActive: "transparent"
|
|
@@ -161,17 +193,21 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
|
|
|
161
193
|
hover: roles.lightHover,
|
|
162
194
|
active: roles.lightActive,
|
|
163
195
|
color: roles.foreground,
|
|
196
|
+
colorHover: roles.foreground,
|
|
197
|
+
colorActive: roles.foreground,
|
|
164
198
|
border: roles.outline,
|
|
165
199
|
borderHover: roles.outlineHover,
|
|
166
200
|
borderActive: roles.outlineHover
|
|
167
201
|
};
|
|
168
202
|
}
|
|
169
203
|
function createComponentColorRoles(color, overrides = {}) {
|
|
170
|
-
|
|
204
|
+
const roles = {
|
|
171
205
|
filled: color,
|
|
172
206
|
hover: `color-mix(in srgb, ${color} 90%, var(--rp-color-black))`,
|
|
173
207
|
active: `color-mix(in srgb, ${color} 80%, var(--rp-color-black))`,
|
|
174
208
|
contrast: "var(--rp-color-white)",
|
|
209
|
+
contrastHover: "var(--rp-color-white)",
|
|
210
|
+
contrastActive: "var(--rp-color-white)",
|
|
175
211
|
light: `color-mix(in srgb, ${color} 12%, transparent)`,
|
|
176
212
|
lightHover: `color-mix(in srgb, ${color} 18%, transparent)`,
|
|
177
213
|
lightActive: `color-mix(in srgb, ${color} 24%, transparent)`,
|
|
@@ -180,10 +216,31 @@ function createComponentColorRoles(color, overrides = {}) {
|
|
|
180
216
|
foreground: color,
|
|
181
217
|
...overrides
|
|
182
218
|
};
|
|
219
|
+
return {
|
|
220
|
+
...roles,
|
|
221
|
+
contrastHover: overrides.contrastHover ?? roles.contrast,
|
|
222
|
+
contrastActive: overrides.contrastActive ?? roles.contrast
|
|
223
|
+
};
|
|
183
224
|
}
|
|
184
|
-
function
|
|
225
|
+
function getCustomContrastColorRoles(color, warnForTranslucentColor = false) {
|
|
185
226
|
const parsed = parseCssColor(color);
|
|
186
|
-
if (!parsed) return "var(--rp-color-white)";
|
|
227
|
+
if (!parsed) return createContrastColorRoles("var(--rp-color-white)");
|
|
228
|
+
if (parsed.opacity < 100) {
|
|
229
|
+
if (warnForTranslucentColor);
|
|
230
|
+
return createContrastColorRoles("var(--rp-color-white)");
|
|
231
|
+
}
|
|
232
|
+
const black = {
|
|
233
|
+
red: 0,
|
|
234
|
+
green: 0,
|
|
235
|
+
blue: 0
|
|
236
|
+
};
|
|
237
|
+
return {
|
|
238
|
+
color: getReadableParsedColorVariable(parsed),
|
|
239
|
+
hover: getReadableParsedColorVariable(mixOpaqueColors(parsed, .9, black)),
|
|
240
|
+
active: getReadableParsedColorVariable(mixOpaqueColors(parsed, .8, black))
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
function getReadableParsedColorVariable(parsed) {
|
|
187
244
|
return contrastRatio({
|
|
188
245
|
red: 0,
|
|
189
246
|
green: 0,
|
|
@@ -194,6 +251,21 @@ function getReadableColorVariable(color) {
|
|
|
194
251
|
blue: 255
|
|
195
252
|
}, parsed) ? "var(--rp-color-black)" : "var(--rp-color-white)";
|
|
196
253
|
}
|
|
254
|
+
function createContrastColorRoles(color) {
|
|
255
|
+
return {
|
|
256
|
+
color,
|
|
257
|
+
hover: color,
|
|
258
|
+
active: color
|
|
259
|
+
};
|
|
260
|
+
}
|
|
261
|
+
function mixOpaqueColors(first, firstWeight, second) {
|
|
262
|
+
const secondWeight = 1 - firstWeight;
|
|
263
|
+
return {
|
|
264
|
+
red: first.red * firstWeight + second.red * secondWeight,
|
|
265
|
+
green: first.green * firstWeight + second.green * secondWeight,
|
|
266
|
+
blue: first.blue * firstWeight + second.blue * secondWeight
|
|
267
|
+
};
|
|
268
|
+
}
|
|
197
269
|
function contrastRatio(foreground, background) {
|
|
198
270
|
const foregroundLuminance = relativeLuminance(foreground);
|
|
199
271
|
const backgroundLuminance = relativeLuminance(background);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CSSProperties } from 'vue';
|
|
2
2
|
import { AlertColor, AlertVariant } from './types.js';
|
|
3
|
-
export declare function getAlertColorStyle(color: AlertColor | undefined, variant: AlertVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
|
|
3
|
+
export declare function getAlertColorStyle(color: AlertColor | undefined, variant: AlertVariant | undefined, autoContrast: boolean | undefined, contrastColor?: string): CSSProperties | undefined;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CSSProperties } from 'vue';
|
|
2
2
|
import { AvatarColor, AvatarVariant } from './types.js';
|
|
3
|
-
export declare function getAvatarColorStyle(color: AvatarColor | undefined, variant: AvatarVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
|
|
3
|
+
export declare function getAvatarColorStyle(color: AvatarColor | undefined, variant: AvatarVariant | undefined, autoContrast: boolean | undefined, contrastColor?: string): CSSProperties | undefined;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CSSProperties } from 'vue';
|
|
2
2
|
import { BadgeColor, BadgeVariant } from './types.js';
|
|
3
|
-
export declare function getBadgeColorStyle(color: BadgeColor | undefined, variant: BadgeVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
|
|
3
|
+
export declare function getBadgeColorStyle(color: BadgeColor | undefined, variant: BadgeVariant | undefined, autoContrast: boolean | undefined, contrastColor?: string): CSSProperties | undefined;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CSSProperties } from 'vue';
|
|
2
2
|
import { ButtonColor, ButtonVariant } from './types.js';
|
|
3
|
-
export declare function getButtonColorStyle(color: ButtonColor | undefined, variant: ButtonVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
|
|
3
|
+
export declare function getButtonColorStyle(color: ButtonColor | undefined, variant: ButtonVariant | undefined, autoContrast: boolean | undefined, contrastColor?: string): CSSProperties | undefined;
|
|
@@ -16,6 +16,7 @@ export interface ButtonLinkProps extends StylesApiProps<ButtonLinkPart> {
|
|
|
16
16
|
variant?: ButtonLinkVariant;
|
|
17
17
|
color?: ButtonLinkColor;
|
|
18
18
|
autoContrast?: boolean;
|
|
19
|
+
contrastColor?: string;
|
|
19
20
|
size?: ButtonLinkSize;
|
|
20
21
|
radius?: ButtonLinkRadius;
|
|
21
22
|
disabled?: boolean;
|
|
@@ -8,6 +8,7 @@ export type ComponentRefValue = Element | ComponentPublicInstance | VaporCompone
|
|
|
8
8
|
export interface MenuItemRegistration {
|
|
9
9
|
id: string;
|
|
10
10
|
element: () => HTMLElement | null;
|
|
11
|
+
textValue: () => string;
|
|
11
12
|
disabled: () => boolean;
|
|
12
13
|
activate: (event: Event) => void;
|
|
13
14
|
submenu?: DropdownMenuSubContext;
|
|
@@ -19,5 +19,3 @@ export declare function normalizePath(indexOrPath: number | ItemPath): ItemPath;
|
|
|
19
19
|
export declare function getEventPoint(event: MouseEvent): PointerPoint;
|
|
20
20
|
export declare function hasMeasuredRect(rect: DOMRect): boolean;
|
|
21
21
|
export declare function isPointInRect(point: PointerPoint, rect: DOMRect, padding?: number): boolean;
|
|
22
|
-
export declare function getEnabledIndexes(items: DropdownMenuItem[]): number[];
|
|
23
|
-
export declare function getNextEnabledIndex(items: DropdownMenuItem[], index: number, direction: 1 | -1): number | undefined;
|
|
@@ -13,6 +13,7 @@ export declare const DropdownMenuItem: (__VLS_props: NonNullable<Awaited<typeof
|
|
|
13
13
|
id?: string | undefined;
|
|
14
14
|
as?: import('./types.js').DropdownMenuAs | undefined;
|
|
15
15
|
value?: import('./types.js').DropdownMenuItemValue | undefined;
|
|
16
|
+
textValue?: string | undefined;
|
|
16
17
|
disabled?: boolean | undefined;
|
|
17
18
|
destructive?: boolean | undefined;
|
|
18
19
|
closeOnSelect?: boolean | undefined;
|
|
@@ -190,6 +190,8 @@ export interface DropdownMenuItemPrimitiveProps {
|
|
|
190
190
|
id?: string;
|
|
191
191
|
as?: DropdownMenuAs;
|
|
192
192
|
value?: DropdownMenuItemValue;
|
|
193
|
+
/** Text used for keyboard typeahead. Falls back to the rendered text content. */
|
|
194
|
+
textValue?: string;
|
|
193
195
|
disabled?: boolean;
|
|
194
196
|
destructive?: boolean;
|
|
195
197
|
closeOnSelect?: boolean;
|
|
@@ -234,6 +236,8 @@ export interface DropdownMenuSubPrimitiveProps {
|
|
|
234
236
|
export interface DropdownMenuSubTriggerPrimitiveProps {
|
|
235
237
|
id?: string;
|
|
236
238
|
as?: DropdownMenuAs;
|
|
239
|
+
/** Text used for keyboard typeahead. Falls back to the rendered text content. */
|
|
240
|
+
textValue?: string;
|
|
237
241
|
disabled?: boolean;
|
|
238
242
|
}
|
|
239
243
|
export interface DropdownMenuSubContentPrimitiveProps extends Omit<DropdownMenuContentPrimitiveProps, 'arrow' | 'ignore' | 'placement'> {
|
|
@@ -31,12 +31,13 @@ type UseDropdownMenuInteractionsOptions = {
|
|
|
31
31
|
getItemAtPath: (path: ItemPath) => DropdownMenuItem | undefined;
|
|
32
32
|
focusItem: (target: DropdownMenuFocusTarget, menuPath?: ItemPath) => boolean;
|
|
33
33
|
moveFocus: (direction: 1 | -1) => ItemPath | undefined;
|
|
34
|
+
handleTypeahead: (event: KeyboardEvent) => boolean;
|
|
34
35
|
submenus: SubmenuControls;
|
|
35
36
|
hoverIntent: HoverIntentControls;
|
|
36
37
|
disclosure: DisclosureControls;
|
|
37
38
|
isSubmenuOpeningLeft: (path: ItemPath) => boolean;
|
|
38
39
|
};
|
|
39
|
-
export declare function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft, }: UseDropdownMenuInteractionsOptions): {
|
|
40
|
+
export declare function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, handleTypeahead, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft, }: UseDropdownMenuInteractionsOptions): {
|
|
40
41
|
activateItem: (item: DropdownMenuItem, path: ItemPath, event?: MouseEvent | KeyboardEvent) => void;
|
|
41
42
|
selectItem: (item: DropdownMenuItem, originalEvent?: Event) => void;
|
|
42
43
|
openSubmenu: (path: ItemPath, focus?: SubmenuFocusTarget, point?: PointerPoint) => boolean;
|
|
@@ -10,6 +10,7 @@ export declare function useDropdownMenuNavigation(items: DropdownMenuItemsSource
|
|
|
10
10
|
getItemAtPath: (path: ItemPath) => DropdownMenuItem | undefined;
|
|
11
11
|
focusItem: (target: DropdownMenuFocusTarget, menuPath?: ItemPath) => boolean;
|
|
12
12
|
resetFocus: () => void;
|
|
13
|
+
setFocusedIndex: (index: number, menuPath?: ItemPath) => boolean;
|
|
13
14
|
isItemFocused: (indexOrPath: number | ItemPath) => boolean;
|
|
14
15
|
moveFocus: (direction: 1 | -1) => number[] | undefined;
|
|
15
16
|
};
|
|
@@ -11,6 +11,7 @@ export interface IconButtonProps extends StylesApiProps<IconButtonPart> {
|
|
|
11
11
|
variant?: IconButtonVariant;
|
|
12
12
|
color?: IconButtonColor;
|
|
13
13
|
autoContrast?: boolean;
|
|
14
|
+
contrastColor?: string;
|
|
14
15
|
size?: IconButtonSize;
|
|
15
16
|
radius?: IconButtonRadius;
|
|
16
17
|
type?: 'button' | 'submit' | 'reset';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as Pagination } from './pagination.js';
|
|
2
|
+
export { paginationColors, paginationParts, paginationRadiuses, paginationSizes } from './types.js';
|
|
3
|
+
export type { PaginationColor, PaginationControl, PaginationControlSlotProps, PaginationEllipsisItem, PaginationGetPageAriaLabel, PaginationItem, PaginationPageItem, PaginationPageSlotProps, PaginationPart, PaginationProps, PaginationRadius, PaginationSize, } from './types.js';
|
|
4
|
+
export { getPaginationItems, normalizePaginationPage, normalizePaginationTotal, usePagination, } from './usePagination.js';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as pagination_default, c as normalizePaginationTotal, i as paginationSizes, l as usePagination, n as paginationParts, o as getPaginationItems, r as paginationRadiuses, s as normalizePaginationPage, t as paginationColors } from "../../pagination.js";
|
|
2
|
+
export { pagination_default as Pagination, getPaginationItems, normalizePaginationPage, normalizePaginationTotal, paginationColors, paginationParts, paginationRadiuses, paginationSizes, usePagination };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { PaginationProps } from './types.js';
|
|
2
|
+
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<PaginationProps & {
|
|
4
|
+
"onUpdate:modelValue"?: ((page: number) => any) | undefined;
|
|
5
|
+
onChange?: ((page: number) => any) | undefined;
|
|
6
|
+
}> & (typeof globalThis extends {
|
|
7
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
8
|
+
} ? P : {});
|
|
9
|
+
expose: (exposed: {}) => void;
|
|
10
|
+
attrs: any;
|
|
11
|
+
slots: {
|
|
12
|
+
first?: (props: {
|
|
13
|
+
page: number;
|
|
14
|
+
disabled: boolean;
|
|
15
|
+
}) => any;
|
|
16
|
+
} & {
|
|
17
|
+
previous?: (props: {
|
|
18
|
+
page: number;
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
}) => any;
|
|
21
|
+
} & {
|
|
22
|
+
page?: (props: {
|
|
23
|
+
page: number;
|
|
24
|
+
active: boolean;
|
|
25
|
+
}) => any;
|
|
26
|
+
} & {
|
|
27
|
+
ellipsis?: (props: {}) => any;
|
|
28
|
+
} & {
|
|
29
|
+
next?: (props: {
|
|
30
|
+
page: number;
|
|
31
|
+
disabled: boolean;
|
|
32
|
+
}) => any;
|
|
33
|
+
} & {
|
|
34
|
+
last?: (props: {
|
|
35
|
+
page: number;
|
|
36
|
+
disabled: boolean;
|
|
37
|
+
}) => any;
|
|
38
|
+
};
|
|
39
|
+
emit: ((evt: "update:modelValue", page: number) => void) & ((evt: "change", page: number) => void);
|
|
40
|
+
}>) => import('vue').VNode & {
|
|
41
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
42
|
+
};
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
46
|
+
[K in keyof T]: T[K];
|
|
47
|
+
} : {
|
|
48
|
+
[K in keyof T as K]: T[K];
|
|
49
|
+
}) & {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ComponentColorValue } from '../../utils/componentColors.js';
|
|
2
|
+
import { StylesApiProps } from '../../styles-api.js';
|
|
3
|
+
export declare const paginationParts: readonly ["root", "items", "control", "page", "ellipsis"];
|
|
4
|
+
export type PaginationPart = (typeof paginationParts)[number];
|
|
5
|
+
export declare const paginationColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
|
|
6
|
+
export declare const paginationSizes: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
7
|
+
export declare const paginationRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
|
|
8
|
+
export type PaginationColor = ComponentColorValue;
|
|
9
|
+
export type PaginationSize = (typeof paginationSizes)[number];
|
|
10
|
+
export type PaginationRadius = (typeof paginationRadiuses)[number];
|
|
11
|
+
export type PaginationControl = 'first' | 'previous' | 'next' | 'last';
|
|
12
|
+
export type PaginationGetPageAriaLabel = (page: number, active: boolean) => string;
|
|
13
|
+
export interface PaginationPageItem {
|
|
14
|
+
type: 'page';
|
|
15
|
+
key: string;
|
|
16
|
+
page: number;
|
|
17
|
+
}
|
|
18
|
+
export interface PaginationEllipsisItem {
|
|
19
|
+
type: 'ellipsis';
|
|
20
|
+
key: string;
|
|
21
|
+
}
|
|
22
|
+
export type PaginationItem = PaginationPageItem | PaginationEllipsisItem;
|
|
23
|
+
export interface PaginationPageSlotProps {
|
|
24
|
+
page: number;
|
|
25
|
+
active: boolean;
|
|
26
|
+
}
|
|
27
|
+
export interface PaginationControlSlotProps {
|
|
28
|
+
page: number;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface PaginationProps extends StylesApiProps<PaginationPart> {
|
|
32
|
+
id?: string;
|
|
33
|
+
modelValue?: number;
|
|
34
|
+
defaultValue?: number;
|
|
35
|
+
total: number;
|
|
36
|
+
siblings?: number;
|
|
37
|
+
boundaries?: number;
|
|
38
|
+
withControls?: boolean;
|
|
39
|
+
withEdges?: boolean;
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
color?: PaginationColor;
|
|
42
|
+
autoContrast?: boolean;
|
|
43
|
+
contrastColor?: string;
|
|
44
|
+
size?: PaginationSize;
|
|
45
|
+
radius?: PaginationRadius;
|
|
46
|
+
ariaLabel?: string;
|
|
47
|
+
labelledby?: string;
|
|
48
|
+
describedby?: string;
|
|
49
|
+
firstLabel?: string;
|
|
50
|
+
previousLabel?: string;
|
|
51
|
+
nextLabel?: string;
|
|
52
|
+
lastLabel?: string;
|
|
53
|
+
getPageAriaLabel?: PaginationGetPageAriaLabel;
|
|
54
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSProperties } from 'vue';
|
|
2
|
+
import { PaginationItem, PaginationProps } from './types.js';
|
|
3
|
+
export declare function normalizePaginationTotal(total: number): number;
|
|
4
|
+
export declare function normalizePaginationPage(page: number, total: number): number;
|
|
5
|
+
export declare function getPaginationItems(total: number, page: number, siblings?: number, boundaries?: number): PaginationItem[];
|
|
6
|
+
export declare function usePagination(props: Readonly<PaginationProps>, getCurrentValue: () => number, onChange: (page: number) => void): {
|
|
7
|
+
totalPages: import('vue').ComputedRef<number>;
|
|
8
|
+
currentPage: import('vue').ComputedRef<number>;
|
|
9
|
+
items: import('vue').ComputedRef<PaginationItem[]>;
|
|
10
|
+
rootClass: import('vue').ComputedRef<string[]>;
|
|
11
|
+
rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
|
|
12
|
+
firstPage: import('vue').ComputedRef<number>;
|
|
13
|
+
previousPage: import('vue').ComputedRef<number>;
|
|
14
|
+
nextPage: import('vue').ComputedRef<number>;
|
|
15
|
+
lastPage: import('vue').ComputedRef<number>;
|
|
16
|
+
isFirstDisabled: import('vue').ComputedRef<boolean>;
|
|
17
|
+
isLastDisabled: import('vue').ComputedRef<boolean>;
|
|
18
|
+
selectPage: (page: number) => boolean;
|
|
19
|
+
};
|
|
@@ -18,6 +18,7 @@ export interface RadioProps extends StylesApiProps<RadioPart> {
|
|
|
18
18
|
variant?: RadioVariant;
|
|
19
19
|
color?: RadioColor;
|
|
20
20
|
autoContrast?: boolean;
|
|
21
|
+
contrastColor?: string;
|
|
21
22
|
size?: RadioSize;
|
|
22
23
|
disabled?: boolean;
|
|
23
24
|
required?: boolean;
|
|
@@ -37,6 +38,7 @@ export interface RadioGroupProps extends StylesApiProps<RadioGroupPart> {
|
|
|
37
38
|
variant?: RadioVariant;
|
|
38
39
|
color?: RadioColor;
|
|
39
40
|
autoContrast?: boolean;
|
|
41
|
+
contrastColor?: string;
|
|
40
42
|
size?: RadioSize;
|
|
41
43
|
orientation?: RadioGroupOrientation;
|
|
42
44
|
disabled?: boolean;
|
|
@@ -65,6 +67,7 @@ export interface RadioGroupContext {
|
|
|
65
67
|
variant?: RadioVariant;
|
|
66
68
|
color?: RadioColor;
|
|
67
69
|
autoContrast?: boolean;
|
|
70
|
+
contrastColor?: string;
|
|
68
71
|
size?: RadioSize;
|
|
69
72
|
inputAttrs: InputHTMLAttributes | undefined;
|
|
70
73
|
select: (value: string | number) => void;
|