ropav 0.0.7 → 0.0.9
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/accordion.css +10 -10
- package/dist/accordion.js +2 -4
- package/dist/alert.css +109 -0
- package/dist/alert.js +168 -0
- package/dist/aspect-ratio.css +17 -0
- package/dist/aspect-ratio.js +26 -0
- package/dist/avatar.css +97 -0
- package/dist/avatar.js +161 -0
- package/dist/badge.css +40 -115
- package/dist/badge.js +19 -18
- package/dist/base.css +609 -180
- package/dist/bem.js +0 -2
- package/dist/button-group.js +0 -2
- package/dist/button-link.css +161 -0
- package/dist/button-link.js +108 -0
- package/dist/button.css +50 -229
- package/dist/button.js +7 -11
- package/dist/card.css +50 -30
- package/dist/card.js +69 -38
- package/dist/check.js +12 -0
- package/dist/checkbox.css +16 -57
- package/dist/checkbox.js +14 -33
- package/dist/collapse.css +8 -8
- package/dist/collapse.js +4 -10
- package/dist/color-input.css +108 -0
- package/dist/color-input.js +344 -0
- package/dist/color-picker.css +304 -0
- package/dist/color-picker.js +717 -0
- package/dist/color-picker2.js +18 -0
- package/dist/color-swatch.css +50 -0
- package/dist/color-swatch.js +73 -0
- package/dist/color.js +190 -0
- package/dist/componentColors.js +206 -15
- package/dist/components/alert/alert.d.ts +30 -0
- package/dist/components/alert/index.d.ts +3 -0
- package/dist/components/alert/index.js +2 -0
- package/dist/components/alert/types.d.ts +20 -0
- package/dist/components/alert/useAlertColor.d.ts +3 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +21 -0
- package/dist/components/aspect-ratio/index.d.ts +2 -0
- package/dist/components/aspect-ratio/index.js +2 -0
- package/dist/components/aspect-ratio/types.d.ts +3 -0
- package/dist/components/avatar/avatar.d.ts +24 -0
- package/dist/components/avatar/index.d.ts +3 -0
- package/dist/components/avatar/index.js +2 -0
- package/dist/components/avatar/types.d.ts +20 -0
- package/dist/components/avatar/useAvatarColor.d.ts +3 -0
- package/dist/components/badge/types.d.ts +2 -1
- package/dist/components/badge/useBadgeColor.d.ts +3 -8
- package/dist/components/button/types.d.ts +1 -0
- package/dist/components/button/useButtonColor.d.ts +3 -13
- package/dist/components/button-link/button-link.d.ts +27 -0
- package/dist/components/button-link/index.d.ts +2 -0
- package/dist/components/button-link/index.js +2 -0
- package/dist/components/button-link/types.d.ts +20 -0
- package/dist/components/card/card.d.ts +4 -0
- package/dist/components/card/types.d.ts +4 -0
- package/dist/components/checkbox/types.d.ts +1 -0
- package/dist/components/checkbox/useCheckbox.d.ts +2 -4
- package/dist/components/collapse/types.d.ts +0 -2
- package/dist/components/color-input/color-input.d.ts +29 -0
- package/dist/components/color-input/index.d.ts +2 -0
- package/dist/components/color-input/index.js +2 -0
- package/dist/components/color-input/types.d.ts +34 -0
- package/dist/components/color-input/useColorInput.d.ts +27 -0
- package/dist/components/color-input/useColorInputEyeDropper.d.ts +13 -0
- package/dist/components/color-input/useColorInputPopover.d.ts +11 -0
- package/dist/components/color-input/useColorInputValue.d.ts +8 -0
- package/dist/components/color-picker/color-picker-saturation.d.ts +21 -0
- package/dist/components/color-picker/color-picker-slider.d.ts +21 -0
- package/dist/components/color-picker/color-picker-utils.d.ts +23 -0
- package/dist/components/color-picker/color-picker.d.ts +23 -0
- package/dist/components/color-picker/index.d.ts +3 -0
- package/dist/components/color-picker/index.js +3 -0
- package/dist/components/color-picker/types.d.ts +39 -0
- package/dist/components/color-picker/useColorPickerDrag.d.ts +11 -0
- package/dist/components/color-picker/useColorPickerSwatches.d.ts +21 -0
- package/dist/components/color-picker/useColorPickerValue.d.ts +15 -0
- package/dist/components/color-swatch/color-swatch.d.ts +21 -0
- package/dist/components/color-swatch/index.d.ts +2 -0
- package/dist/components/color-swatch/index.js +2 -0
- package/dist/components/color-swatch/types.d.ts +6 -0
- package/dist/components/color-swatch/useColorSwatchColor.d.ts +5 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +1 -1
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -1
- package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +1 -1
- package/dist/components/field/types.d.ts +0 -2
- package/dist/components/field/useField.d.ts +1 -2
- package/dist/components/icon-button/types.d.ts +1 -0
- package/dist/components/input/types.d.ts +3 -0
- package/dist/components/modal/types.d.ts +0 -1
- package/dist/components/number-input/index.d.ts +2 -0
- package/dist/components/number-input/index.js +2 -0
- package/dist/components/number-input/number-input.d.ts +29 -0
- package/dist/components/number-input/types.d.ts +34 -0
- package/dist/components/number-input/useNumberInput.d.ts +31 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/popover/index.js +2 -1
- package/dist/components/popover/types.d.ts +6 -2
- package/dist/components/popover/usePopover.d.ts +5 -2
- package/dist/components/progress/types.d.ts +1 -1
- package/dist/components/radio/types.d.ts +3 -0
- package/dist/components/radio/useRadio.d.ts +2 -4
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/select/types.d.ts +3 -0
- package/dist/components/slider/index.d.ts +2 -1
- package/dist/components/slider/index.js +2 -2
- package/dist/components/slider/range-slider.d.ts +45 -0
- package/dist/components/slider/types.d.ts +14 -2
- package/dist/components/slider/useRangeSlider.d.ts +59 -0
- package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +7 -0
- package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +4 -0
- package/dist/components/switch/useSwitch.d.ts +2 -3
- package/dist/components/tooltip/types.d.ts +1 -0
- package/dist/dropdown-menu.css +17 -17
- package/dist/dropdown-menu.js +0 -2
- package/dist/field.css +17 -17
- package/dist/field.js +56 -51
- package/dist/icon-button.css +57 -236
- package/dist/icon-button.js +5 -8
- package/dist/index.d.ts +8 -0
- package/dist/index.js +16 -4
- package/dist/input.css +40 -46
- package/dist/input.js +39 -23
- package/dist/minus.js +12 -0
- package/dist/modal.css +37 -37
- package/dist/modal.js +10 -16
- package/dist/number-input.css +86 -0
- package/dist/number-input.js +350 -0
- package/dist/overlay.css +5 -5
- package/dist/overlay.js +3 -5
- package/dist/popover.css +62 -29
- package/dist/popover.js +25 -12
- package/dist/popover2.js +17 -0
- package/dist/progress.css +9 -30
- package/dist/progress.js +3 -8
- package/dist/radio.css +34 -62
- package/dist/radio.js +28 -18
- package/dist/select.css +105 -61
- package/dist/select.js +12 -10
- package/dist/slider.css +508 -41
- package/dist/slider.js +1122 -50
- package/dist/switch.css +19 -44
- package/dist/switch.js +4 -7
- package/dist/tabs.css +36 -36
- package/dist/tabs.js +1 -3
- package/dist/textarea.css +33 -25
- package/dist/textarea.js +0 -2
- package/dist/tooltip.css +7 -35
- package/dist/tooltip.js +13 -10
- package/dist/useButtonColor.js +16 -16
- package/dist/useClickOutside.js +0 -2
- package/dist/useCollapse.js +1 -3
- package/dist/useControlState.js +0 -2
- package/dist/useRequiredInject.js +0 -2
- package/dist/x.js +0 -2
- package/package.json +43 -7
- package/src/styles/_mixins.scss +25 -41
- package/src/styles/_tokens.scss +615 -182
- package/src/styles/_variables.scss +177 -49
- package/dist/accordion.js.map +0 -1
- package/dist/badge.js.map +0 -1
- package/dist/bem.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/collapse.js.map +0 -1
- package/dist/componentColors.js.map +0 -1
- package/dist/dropdown-menu.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/icon-button.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/modal.js.map +0 -1
- package/dist/overlay.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/radio.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/useButtonColor.js.map +0 -1
- package/dist/useClickOutside.js.map +0 -1
- package/dist/useCollapse.js.map +0 -1
- package/dist/useControlState.js.map +0 -1
- package/dist/useRequiredInject.js.map +0 -1
- package/dist/x.js.map +0 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/components/color-picker/types.ts
|
|
2
|
+
var colorPickerFormats = [
|
|
3
|
+
"hex",
|
|
4
|
+
"hexa",
|
|
5
|
+
"rgb",
|
|
6
|
+
"rgba",
|
|
7
|
+
"hsl",
|
|
8
|
+
"hsla"
|
|
9
|
+
];
|
|
10
|
+
var colorPickerSizes = [
|
|
11
|
+
"xs",
|
|
12
|
+
"sm",
|
|
13
|
+
"md",
|
|
14
|
+
"lg",
|
|
15
|
+
"xl"
|
|
16
|
+
];
|
|
17
|
+
//#endregion
|
|
18
|
+
export { colorPickerSizes as n, colorPickerFormats as t };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.rp-color-swatch[data-v-b0899989] {
|
|
2
|
+
--_rp-color-swatch-size: 24px;
|
|
3
|
+
--_rp-color-swatch-radius: var(--rp-radius-sm);
|
|
4
|
+
--_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
|
|
5
|
+
--_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
|
|
6
|
+
--_rp-color-swatch-checkerboard: conic-gradient(
|
|
7
|
+
var(--_rp-color-swatch-checkerboard-tile) 25%,
|
|
8
|
+
var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
|
|
9
|
+
var(--_rp-color-swatch-checkerboard-tile) 0 75%,
|
|
10
|
+
var(--_rp-color-swatch-checkerboard-tile-alt) 0
|
|
11
|
+
);
|
|
12
|
+
--_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
|
|
13
|
+
calc(var(--_rp-color-swatch-size) / 2);
|
|
14
|
+
--_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
|
|
15
|
+
--_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
width: var(--_rp-color-swatch-size);
|
|
21
|
+
height: var(--_rp-color-swatch-size);
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
|
|
24
|
+
background-size: auto, var(--_rp-color-swatch-checkerboard-size);
|
|
25
|
+
border: 0;
|
|
26
|
+
border-radius: var(--_rp-color-swatch-radius);
|
|
27
|
+
box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
|
|
28
|
+
color: var(--_rp-color-swatch-fg);
|
|
29
|
+
line-height: 1;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
vertical-align: middle;
|
|
32
|
+
}
|
|
33
|
+
html.dark .rp-color-swatch[data-v-b0899989], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-b0899989] {
|
|
34
|
+
--_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
|
|
35
|
+
--_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
|
|
36
|
+
}
|
|
37
|
+
.rp-color-swatch__icon[data-v-b0899989] {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
width: 70%;
|
|
42
|
+
height: 70%;
|
|
43
|
+
color: inherit;
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
}
|
|
46
|
+
.rp-color-swatch__icon[data-v-b0899989] svg {
|
|
47
|
+
display: block;
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import './color-swatch.css';
|
|
2
|
+
import { t as parseCssColor } from "./color.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
|
+
import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref, useAttrs } from "vue";
|
|
5
|
+
//#region src/components/color-swatch/useColorSwatchColor.ts
|
|
6
|
+
function getColorSwatchForeground(color) {
|
|
7
|
+
const background = parseCssColor(color);
|
|
8
|
+
if (!background) return "var(--rp-color-white)";
|
|
9
|
+
return getPerceivedBrightness(background) >= 186 ? "var(--rp-color-black)" : "var(--rp-color-white)";
|
|
10
|
+
}
|
|
11
|
+
function getColorSwatchOverlay(color) {
|
|
12
|
+
const background = parseCssColor(color);
|
|
13
|
+
if (!background || getPerceivedBrightness(background) >= 80) return {
|
|
14
|
+
stroke: "rgb(0 0 0 / 10%)",
|
|
15
|
+
shadow: "rgb(0 0 0 / 15%)"
|
|
16
|
+
};
|
|
17
|
+
return {
|
|
18
|
+
stroke: "rgb(255 255 255 / 18%)",
|
|
19
|
+
shadow: "rgb(255 255 255 / 10%)"
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
function getPerceivedBrightness({ red, green, blue }) {
|
|
23
|
+
return (red * 299 + green * 587 + blue * 114) / 1e3;
|
|
24
|
+
}
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region src/components/color-swatch/color-swatch.vue?vue&type=script&setup=true&vapor=true&lang.ts
|
|
27
|
+
var t0 = template("<span data-v-b0899989><span data-v-b0899989 class=rp-color-swatch__icon aria-hidden=true>", 1);
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/components/color-swatch/color-swatch.vue
|
|
30
|
+
var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
|
|
31
|
+
name: "RpColorSwatch",
|
|
32
|
+
inheritAttrs: false,
|
|
33
|
+
__name: "color-swatch",
|
|
34
|
+
props: {
|
|
35
|
+
color: {},
|
|
36
|
+
size: {},
|
|
37
|
+
ariaLabel: {}
|
|
38
|
+
},
|
|
39
|
+
setup(__props) {
|
|
40
|
+
const props = __props;
|
|
41
|
+
const attrs = useAttrs();
|
|
42
|
+
const isHidden = computed(() => attrs["aria-hidden"] === true || attrs["aria-hidden"] === "true");
|
|
43
|
+
const rootRole = computed(() => isHidden.value ? void 0 : "img");
|
|
44
|
+
const rootAriaLabel = computed(() => isHidden.value ? void 0 : props.ariaLabel || `Color swatch ${props.color}`);
|
|
45
|
+
const rootStyle = computed(() => {
|
|
46
|
+
const overlay = getColorSwatchOverlay(props.color);
|
|
47
|
+
const style = {
|
|
48
|
+
"--_rp-color-swatch-color": props.color,
|
|
49
|
+
"--_rp-color-swatch-fg": getColorSwatchForeground(props.color),
|
|
50
|
+
"--_rp-color-swatch-overlay-stroke": overlay.stroke,
|
|
51
|
+
"--_rp-color-swatch-overlay-shadow": overlay.shadow
|
|
52
|
+
};
|
|
53
|
+
if (props.size !== void 0) style["--_rp-color-swatch-size"] = normalizeSize(props.size);
|
|
54
|
+
return style;
|
|
55
|
+
});
|
|
56
|
+
function normalizeSize(size) {
|
|
57
|
+
return typeof size === "number" ? `${size}px` : size;
|
|
58
|
+
}
|
|
59
|
+
const n2 = t0();
|
|
60
|
+
const n1 = child(n2);
|
|
61
|
+
renderEffect(() => setDynamicProps(n2, [unref(attrs), {
|
|
62
|
+
class: "rp-color-swatch",
|
|
63
|
+
style: rootStyle.value,
|
|
64
|
+
role: rootRole.value,
|
|
65
|
+
"aria-label": rootAriaLabel.value
|
|
66
|
+
}]));
|
|
67
|
+
setInsertionState(n1, null, 0);
|
|
68
|
+
createSlot("default", null, null, 1);
|
|
69
|
+
return n2;
|
|
70
|
+
}
|
|
71
|
+
}), [["__scopeId", "data-v-b0899989"]]);
|
|
72
|
+
//#endregion
|
|
73
|
+
export { color_swatch_default as t };
|
package/dist/color.js
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
//#region src/utils/color.ts
|
|
2
|
+
var DEFAULT_OPACITY = 100;
|
|
3
|
+
var NUMBER_SOURCE = String.raw`[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?`;
|
|
4
|
+
var NUMBER_PATTERN = new RegExp(`^${NUMBER_SOURCE}$`, "i");
|
|
5
|
+
var HUE_PATTERN = new RegExp(`^(${NUMBER_SOURCE})(deg|grad|rad|turn)?$`, "i");
|
|
6
|
+
function parseCssColor(value) {
|
|
7
|
+
const color = value.trim().toLowerCase();
|
|
8
|
+
if (color === "black") return {
|
|
9
|
+
red: 0,
|
|
10
|
+
green: 0,
|
|
11
|
+
blue: 0,
|
|
12
|
+
opacity: DEFAULT_OPACITY
|
|
13
|
+
};
|
|
14
|
+
if (color === "white") return {
|
|
15
|
+
red: 255,
|
|
16
|
+
green: 255,
|
|
17
|
+
blue: 255,
|
|
18
|
+
opacity: DEFAULT_OPACITY
|
|
19
|
+
};
|
|
20
|
+
if (color === "transparent") return {
|
|
21
|
+
red: 0,
|
|
22
|
+
green: 0,
|
|
23
|
+
blue: 0,
|
|
24
|
+
opacity: 0
|
|
25
|
+
};
|
|
26
|
+
return parseHexColor(color) ?? parseRgbColor(color) ?? parseHslColor(color);
|
|
27
|
+
}
|
|
28
|
+
function parseHexColor(color) {
|
|
29
|
+
const hex = color.match(/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i)?.[1];
|
|
30
|
+
if (!hex) return void 0;
|
|
31
|
+
if (hex.length === 3 || hex.length === 4) return {
|
|
32
|
+
red: Number.parseInt(hex[0] + hex[0], 16),
|
|
33
|
+
green: Number.parseInt(hex[1] + hex[1], 16),
|
|
34
|
+
blue: Number.parseInt(hex[2] + hex[2], 16),
|
|
35
|
+
opacity: hex.length === 4 ? roundPercent(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
|
|
36
|
+
};
|
|
37
|
+
return {
|
|
38
|
+
red: Number.parseInt(hex.slice(0, 2), 16),
|
|
39
|
+
green: Number.parseInt(hex.slice(2, 4), 16),
|
|
40
|
+
blue: Number.parseInt(hex.slice(4, 6), 16),
|
|
41
|
+
opacity: hex.length === 8 ? roundPercent(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
function parseRgbColor(color) {
|
|
45
|
+
const body = color.match(/^rgba?\((.*)\)$/i)?.[1];
|
|
46
|
+
if (body == null) return void 0;
|
|
47
|
+
const parsed = parseFunctionChannels(body);
|
|
48
|
+
if (!parsed) return void 0;
|
|
49
|
+
if (parsed.legacy) {
|
|
50
|
+
const percentageChannels = parsed.channels.filter((channel) => channel.endsWith("%"));
|
|
51
|
+
if (percentageChannels.length !== 0 && percentageChannels.length !== parsed.channels.length) return;
|
|
52
|
+
}
|
|
53
|
+
const [red, green, blue] = parsed.channels.map(parseRgbChannel);
|
|
54
|
+
const opacity = parseAlpha(parsed.alpha);
|
|
55
|
+
if (red == null || green == null || blue == null || opacity == null) return void 0;
|
|
56
|
+
return {
|
|
57
|
+
red,
|
|
58
|
+
green,
|
|
59
|
+
blue,
|
|
60
|
+
opacity
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
function parseHslColor(color) {
|
|
64
|
+
const body = color.match(/^hsla?\((.*)\)$/i)?.[1];
|
|
65
|
+
if (body == null) return void 0;
|
|
66
|
+
const parsed = parseFunctionChannels(body);
|
|
67
|
+
if (!parsed) return void 0;
|
|
68
|
+
const hue = parseHue(parsed.channels[0]);
|
|
69
|
+
const saturation = parsePercentage(parsed.channels[1]);
|
|
70
|
+
const lightness = parsePercentage(parsed.channels[2]);
|
|
71
|
+
const opacity = parseAlpha(parsed.alpha);
|
|
72
|
+
if (hue == null || saturation == null || lightness == null || opacity == null) return;
|
|
73
|
+
return hslToRgb(hue, saturation, lightness, opacity);
|
|
74
|
+
}
|
|
75
|
+
function parseFunctionChannels(body) {
|
|
76
|
+
const value = body.trim();
|
|
77
|
+
if (!value) return void 0;
|
|
78
|
+
if (value.includes(",")) {
|
|
79
|
+
if (value.includes("/")) return void 0;
|
|
80
|
+
const parts = value.split(",").map((part) => part.trim());
|
|
81
|
+
if (parts.length !== 3 && parts.length !== 4 || parts.some((part) => !part)) return;
|
|
82
|
+
return {
|
|
83
|
+
channels: [
|
|
84
|
+
parts[0],
|
|
85
|
+
parts[1],
|
|
86
|
+
parts[2]
|
|
87
|
+
],
|
|
88
|
+
alpha: parts[3],
|
|
89
|
+
legacy: true
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
const slashParts = value.split("/");
|
|
93
|
+
if (slashParts.length > 2) return void 0;
|
|
94
|
+
const channels = slashParts[0].trim().split(/\s+/).filter(Boolean);
|
|
95
|
+
const alpha = slashParts[1]?.trim();
|
|
96
|
+
if (channels.length !== 3 || slashParts.length === 2 && !alpha) return void 0;
|
|
97
|
+
return {
|
|
98
|
+
channels: [
|
|
99
|
+
channels[0],
|
|
100
|
+
channels[1],
|
|
101
|
+
channels[2]
|
|
102
|
+
],
|
|
103
|
+
alpha,
|
|
104
|
+
legacy: false
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function parseRgbChannel(channel) {
|
|
108
|
+
const percentage = parsePercentage(channel);
|
|
109
|
+
if (percentage != null) return clamp(Math.round(percentage / 100 * 255), 0, 255);
|
|
110
|
+
const number = parseNumber(channel);
|
|
111
|
+
return number == null ? void 0 : clamp(Math.round(number), 0, 255);
|
|
112
|
+
}
|
|
113
|
+
function parseHue(channel) {
|
|
114
|
+
const match = channel.trim().match(HUE_PATTERN);
|
|
115
|
+
if (!match) return void 0;
|
|
116
|
+
const value = Number(match[1]);
|
|
117
|
+
if (!Number.isFinite(value)) return void 0;
|
|
118
|
+
switch (match[2]) {
|
|
119
|
+
case "grad": return value * .9;
|
|
120
|
+
case "rad": return value * 180 / Math.PI;
|
|
121
|
+
case "turn": return value * 360;
|
|
122
|
+
default: return value;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
function parsePercentage(channel) {
|
|
126
|
+
const value = channel.trim();
|
|
127
|
+
if (!value.endsWith("%")) return void 0;
|
|
128
|
+
const number = parseNumber(value.slice(0, -1));
|
|
129
|
+
return number == null ? void 0 : clamp(number, 0, 100);
|
|
130
|
+
}
|
|
131
|
+
function parseAlpha(alpha) {
|
|
132
|
+
if (alpha === void 0) return DEFAULT_OPACITY;
|
|
133
|
+
const percentage = parsePercentage(alpha);
|
|
134
|
+
if (percentage != null) return roundPercent(percentage);
|
|
135
|
+
const number = parseNumber(alpha);
|
|
136
|
+
return number == null ? void 0 : roundPercent(clamp(number, 0, 1) * 100);
|
|
137
|
+
}
|
|
138
|
+
function parseNumber(value) {
|
|
139
|
+
const token = value.trim();
|
|
140
|
+
if (!NUMBER_PATTERN.test(token)) return void 0;
|
|
141
|
+
const number = Number(token);
|
|
142
|
+
return Number.isFinite(number) ? number : void 0;
|
|
143
|
+
}
|
|
144
|
+
function hslToRgb(hue, saturation, lightness, opacity) {
|
|
145
|
+
const h = normalizeHue(hue);
|
|
146
|
+
const s = clamp(saturation, 0, 100) / 100;
|
|
147
|
+
const l = clamp(lightness, 0, 100) / 100;
|
|
148
|
+
const c = (1 - Math.abs(2 * l - 1)) * s;
|
|
149
|
+
const x = c * (1 - Math.abs(h / 60 % 2 - 1));
|
|
150
|
+
const m = l - c / 2;
|
|
151
|
+
let red = 0;
|
|
152
|
+
let green = 0;
|
|
153
|
+
let blue = 0;
|
|
154
|
+
if (h < 60) {
|
|
155
|
+
red = c;
|
|
156
|
+
green = x;
|
|
157
|
+
} else if (h < 120) {
|
|
158
|
+
red = x;
|
|
159
|
+
green = c;
|
|
160
|
+
} else if (h < 180) {
|
|
161
|
+
green = c;
|
|
162
|
+
blue = x;
|
|
163
|
+
} else if (h < 240) {
|
|
164
|
+
green = x;
|
|
165
|
+
blue = c;
|
|
166
|
+
} else if (h < 300) {
|
|
167
|
+
red = x;
|
|
168
|
+
blue = c;
|
|
169
|
+
} else {
|
|
170
|
+
red = c;
|
|
171
|
+
blue = x;
|
|
172
|
+
}
|
|
173
|
+
return {
|
|
174
|
+
red: Math.round((red + m) * 255),
|
|
175
|
+
green: Math.round((green + m) * 255),
|
|
176
|
+
blue: Math.round((blue + m) * 255),
|
|
177
|
+
opacity
|
|
178
|
+
};
|
|
179
|
+
}
|
|
180
|
+
function normalizeHue(value) {
|
|
181
|
+
return (value % 360 + 360) % 360;
|
|
182
|
+
}
|
|
183
|
+
function roundPercent(value) {
|
|
184
|
+
return Math.round(value * 100) / 100;
|
|
185
|
+
}
|
|
186
|
+
function clamp(value, min, max) {
|
|
187
|
+
return Math.min(max, Math.max(min, value));
|
|
188
|
+
}
|
|
189
|
+
//#endregion
|
|
190
|
+
export { parseCssColor as t };
|
package/dist/componentColors.js
CHANGED
|
@@ -1,22 +1,213 @@
|
|
|
1
|
+
import { t as parseCssColor } from "./color.js";
|
|
1
2
|
//#region src/utils/componentColors.ts
|
|
2
3
|
var componentColors = [
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
4
|
+
"dark",
|
|
5
|
+
"gray",
|
|
6
|
+
"red",
|
|
7
|
+
"pink",
|
|
8
|
+
"grape",
|
|
9
|
+
"violet",
|
|
10
|
+
"indigo",
|
|
11
|
+
"blue",
|
|
12
|
+
"cyan",
|
|
13
|
+
"teal",
|
|
14
|
+
"green",
|
|
15
|
+
"lime",
|
|
16
|
+
"yellow",
|
|
17
|
+
"orange"
|
|
18
|
+
];
|
|
19
|
+
var componentColorShades = [
|
|
20
|
+
"0",
|
|
21
|
+
"1",
|
|
22
|
+
"2",
|
|
23
|
+
"3",
|
|
24
|
+
"4",
|
|
25
|
+
"5",
|
|
26
|
+
"6",
|
|
27
|
+
"7",
|
|
28
|
+
"8",
|
|
29
|
+
"9"
|
|
10
30
|
];
|
|
11
31
|
var componentColorNames = new Set(componentColors);
|
|
12
|
-
|
|
13
|
-
|
|
32
|
+
var componentColorShadeNames = new Set(componentColorShades);
|
|
33
|
+
function parseComponentColor(color) {
|
|
34
|
+
if (!color) return { kind: "empty" };
|
|
35
|
+
if (color === "primary") return { kind: "primary" };
|
|
36
|
+
if (componentColorNames.has(color)) return {
|
|
37
|
+
kind: "preset",
|
|
38
|
+
color
|
|
39
|
+
};
|
|
40
|
+
const shadeMatch = color.match(/^([a-z]+)\.(\d+)$/);
|
|
41
|
+
if (shadeMatch && componentColorNames.has(shadeMatch[1])) return componentColorShadeNames.has(shadeMatch[2]) ? {
|
|
42
|
+
kind: "shade",
|
|
43
|
+
color: shadeMatch[1],
|
|
44
|
+
shade: shadeMatch[2]
|
|
45
|
+
} : {
|
|
46
|
+
kind: "invalid",
|
|
47
|
+
value: color
|
|
48
|
+
};
|
|
49
|
+
return {
|
|
50
|
+
kind: "custom",
|
|
51
|
+
value: color
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
function getComponentColorValue(color) {
|
|
55
|
+
const parsed = parseComponentColor(color);
|
|
56
|
+
if (parsed.kind === "primary") return "var(--rp-primary-color-filled)";
|
|
57
|
+
if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-filled)`;
|
|
58
|
+
if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade})`;
|
|
59
|
+
if (parsed.kind === "custom") return parsed.value;
|
|
60
|
+
}
|
|
61
|
+
function getComponentContrastColor(color, options = {}) {
|
|
62
|
+
if (!options.autoContrast) return "var(--rp-color-white)";
|
|
63
|
+
const parsed = parseComponentColor(color);
|
|
64
|
+
if (parsed.kind === "primary") return "var(--rp-primary-color-contrast)";
|
|
65
|
+
if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-contrast)`;
|
|
66
|
+
if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`;
|
|
67
|
+
if (parsed.kind === "custom") return getReadableColorVariable(parsed.value);
|
|
68
|
+
return "var(--rp-color-white)";
|
|
69
|
+
}
|
|
70
|
+
function getComponentColorRoles(color) {
|
|
71
|
+
const parsed = parseComponentColor(color);
|
|
72
|
+
if (parsed.kind === "empty" || parsed.kind === "invalid") return;
|
|
73
|
+
if (parsed.kind === "primary") return createComponentColorRoles("var(--rp-primary-color-filled)", {
|
|
74
|
+
hover: "var(--rp-primary-color-filled-hover)",
|
|
75
|
+
contrast: "var(--rp-primary-color-contrast)",
|
|
76
|
+
light: "var(--rp-primary-color-light)",
|
|
77
|
+
lightHover: "var(--rp-primary-color-light-hover)",
|
|
78
|
+
outline: "var(--rp-primary-color-outline)",
|
|
79
|
+
outlineHover: "color-mix(in srgb, var(--rp-primary-color-outline) 62%, transparent)",
|
|
80
|
+
foreground: "var(--rp-primary-color-light-color)"
|
|
81
|
+
});
|
|
82
|
+
if (parsed.kind === "preset") return createComponentColorRoles(`var(--rp-color-${parsed.color}-filled)`, {
|
|
83
|
+
hover: `var(--rp-color-${parsed.color}-filled-hover)`,
|
|
84
|
+
contrast: `var(--rp-color-${parsed.color}-contrast)`,
|
|
85
|
+
light: `var(--rp-color-${parsed.color}-light)`,
|
|
86
|
+
lightHover: `var(--rp-color-${parsed.color}-light-hover)`,
|
|
87
|
+
outline: `var(--rp-color-${parsed.color}-outline)`,
|
|
88
|
+
outlineHover: `color-mix(in srgb, var(--rp-color-${parsed.color}-outline) 62%, transparent)`,
|
|
89
|
+
foreground: `var(--rp-color-${parsed.color}-light-color)`
|
|
90
|
+
});
|
|
91
|
+
if (parsed.kind === "shade") {
|
|
92
|
+
const base = `var(--rp-color-${parsed.color}-${parsed.shade})`;
|
|
93
|
+
return createComponentColorRoles(base, {
|
|
94
|
+
hover: `var(--rp-color-${parsed.color}-${Math.min(Number(parsed.shade) + 1, 9)})`,
|
|
95
|
+
contrast: `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`,
|
|
96
|
+
foreground: base
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
return createComponentColorRoles(parsed.value, { contrast: getReadableColorVariable(parsed.value) });
|
|
100
|
+
}
|
|
101
|
+
function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast }) {
|
|
102
|
+
const roles = getComponentColorRoles(color ?? defaultColor);
|
|
103
|
+
if (!roles) return void 0;
|
|
104
|
+
const contrast = getComponentContrastColor(color ?? defaultColor, { autoContrast });
|
|
105
|
+
if (variant === "solid") return {
|
|
106
|
+
background: roles.filled,
|
|
107
|
+
hover: roles.hover,
|
|
108
|
+
active: roles.active,
|
|
109
|
+
color: contrast,
|
|
110
|
+
border: roles.filled,
|
|
111
|
+
borderHover: roles.hover,
|
|
112
|
+
borderActive: roles.active
|
|
113
|
+
};
|
|
114
|
+
if (variant === "subtle") return {
|
|
115
|
+
background: roles.light,
|
|
116
|
+
hover: roles.lightHover,
|
|
117
|
+
active: roles.lightActive,
|
|
118
|
+
color: roles.foreground,
|
|
119
|
+
border: "transparent",
|
|
120
|
+
borderHover: "transparent",
|
|
121
|
+
borderActive: "transparent"
|
|
122
|
+
};
|
|
123
|
+
if (variant === "surface") return {
|
|
124
|
+
background: roles.light,
|
|
125
|
+
hover: roles.lightHover,
|
|
126
|
+
active: roles.lightActive,
|
|
127
|
+
color: roles.foreground,
|
|
128
|
+
border: roles.outline,
|
|
129
|
+
borderHover: roles.lightHover,
|
|
130
|
+
borderActive: roles.outlineHover
|
|
131
|
+
};
|
|
132
|
+
if (variant === "outline") return {
|
|
133
|
+
background: "transparent",
|
|
134
|
+
hover: roles.lightHover,
|
|
135
|
+
active: roles.lightActive,
|
|
136
|
+
color: roles.foreground,
|
|
137
|
+
border: roles.outline,
|
|
138
|
+
borderHover: roles.outlineHover,
|
|
139
|
+
borderActive: roles.outlineHover
|
|
140
|
+
};
|
|
141
|
+
if (variant === "ghost") return {
|
|
142
|
+
background: "transparent",
|
|
143
|
+
hover: roles.lightHover,
|
|
144
|
+
active: roles.lightActive,
|
|
145
|
+
color: roles.foreground,
|
|
146
|
+
border: "transparent",
|
|
147
|
+
borderHover: "transparent",
|
|
148
|
+
borderActive: "transparent"
|
|
149
|
+
};
|
|
150
|
+
if (variant === "plain") return {
|
|
151
|
+
background: "transparent",
|
|
152
|
+
hover: "transparent",
|
|
153
|
+
active: "transparent",
|
|
154
|
+
color: roles.foreground,
|
|
155
|
+
border: "transparent",
|
|
156
|
+
borderHover: "transparent",
|
|
157
|
+
borderActive: "transparent"
|
|
158
|
+
};
|
|
159
|
+
return {
|
|
160
|
+
background: "var(--rp-color-default)",
|
|
161
|
+
hover: roles.lightHover,
|
|
162
|
+
active: roles.lightActive,
|
|
163
|
+
color: roles.foreground,
|
|
164
|
+
border: roles.outline,
|
|
165
|
+
borderHover: roles.outlineHover,
|
|
166
|
+
borderActive: roles.outlineHover
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
function createComponentColorRoles(color, overrides = {}) {
|
|
170
|
+
return {
|
|
171
|
+
filled: color,
|
|
172
|
+
hover: `color-mix(in srgb, ${color} 90%, var(--rp-color-black))`,
|
|
173
|
+
active: `color-mix(in srgb, ${color} 80%, var(--rp-color-black))`,
|
|
174
|
+
contrast: "var(--rp-color-white)",
|
|
175
|
+
light: `color-mix(in srgb, ${color} 12%, transparent)`,
|
|
176
|
+
lightHover: `color-mix(in srgb, ${color} 18%, transparent)`,
|
|
177
|
+
lightActive: `color-mix(in srgb, ${color} 24%, transparent)`,
|
|
178
|
+
outline: color,
|
|
179
|
+
outlineHover: `color-mix(in srgb, ${color} 62%, transparent)`,
|
|
180
|
+
foreground: color,
|
|
181
|
+
...overrides
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
function getReadableColorVariable(color) {
|
|
185
|
+
const parsed = parseCssColor(color);
|
|
186
|
+
if (!parsed) return "var(--rp-color-white)";
|
|
187
|
+
return contrastRatio({
|
|
188
|
+
red: 0,
|
|
189
|
+
green: 0,
|
|
190
|
+
blue: 0
|
|
191
|
+
}, parsed) >= contrastRatio({
|
|
192
|
+
red: 255,
|
|
193
|
+
green: 255,
|
|
194
|
+
blue: 255
|
|
195
|
+
}, parsed) ? "var(--rp-color-black)" : "var(--rp-color-white)";
|
|
196
|
+
}
|
|
197
|
+
function contrastRatio(foreground, background) {
|
|
198
|
+
const foregroundLuminance = relativeLuminance(foreground);
|
|
199
|
+
const backgroundLuminance = relativeLuminance(background);
|
|
200
|
+
const lighter = Math.max(foregroundLuminance, backgroundLuminance);
|
|
201
|
+
const darker = Math.min(foregroundLuminance, backgroundLuminance);
|
|
202
|
+
return (lighter + .05) / (darker + .05);
|
|
14
203
|
}
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
|
|
204
|
+
function relativeLuminance(color) {
|
|
205
|
+
const [red, green, blue] = [
|
|
206
|
+
color.red,
|
|
207
|
+
color.green,
|
|
208
|
+
color.blue
|
|
209
|
+
].map((channel) => channel / 255).map((channel) => channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4);
|
|
210
|
+
return .2126 * red + .7152 * green + .0722 * blue;
|
|
18
211
|
}
|
|
19
212
|
//#endregion
|
|
20
|
-
export {
|
|
21
|
-
|
|
22
|
-
//# sourceMappingURL=componentColors.js.map
|
|
213
|
+
export { getComponentVariantColorRoles as i, getComponentColorValue as n, getComponentContrastColor as r, componentColors as t };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { AlertProps } from './types';
|
|
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<AlertProps & {
|
|
4
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
5
|
+
onClose?: (() => any) | undefined;
|
|
6
|
+
}> & (typeof globalThis extends {
|
|
7
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
8
|
+
} ? P : {});
|
|
9
|
+
expose: (exposed: {}) => void;
|
|
10
|
+
attrs: any;
|
|
11
|
+
slots: {
|
|
12
|
+
icon?: (props: {}) => any;
|
|
13
|
+
} & {
|
|
14
|
+
title?: (props: {}) => any;
|
|
15
|
+
} & {
|
|
16
|
+
default?: (props: {}) => any;
|
|
17
|
+
} & {
|
|
18
|
+
action?: (props: {}) => any;
|
|
19
|
+
};
|
|
20
|
+
emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close") => void);
|
|
21
|
+
}>) => import('vue').VNode & {
|
|
22
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
23
|
+
};
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
26
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
27
|
+
[K in keyof T]: T[K];
|
|
28
|
+
} : {
|
|
29
|
+
[K in keyof T as K]: T[K];
|
|
30
|
+
}) & {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ComponentColorValue } from '../../utils/componentColors';
|
|
2
|
+
export declare const alertColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
|
|
3
|
+
export declare const alertVariants: readonly ["subtle", "surface", "outline", "solid"];
|
|
4
|
+
export declare const alertRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
|
|
5
|
+
export type AlertColor = ComponentColorValue;
|
|
6
|
+
export type AlertVariant = (typeof alertVariants)[number];
|
|
7
|
+
export type AlertRadius = (typeof alertRadiuses)[number];
|
|
8
|
+
export type AlertRole = 'alert' | 'status' | 'none';
|
|
9
|
+
export interface AlertProps {
|
|
10
|
+
open?: boolean;
|
|
11
|
+
title?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
variant?: AlertVariant;
|
|
14
|
+
color?: AlertColor;
|
|
15
|
+
autoContrast?: boolean;
|
|
16
|
+
radius?: AlertRadius;
|
|
17
|
+
role?: AlertRole;
|
|
18
|
+
closable?: boolean;
|
|
19
|
+
closeLabel?: string;
|
|
20
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { AspectRatioProps } from './types';
|
|
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<AspectRatioProps> & (typeof globalThis extends {
|
|
4
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
5
|
+
} ? P : {});
|
|
6
|
+
expose: (exposed: {}) => void;
|
|
7
|
+
attrs: any;
|
|
8
|
+
slots: {
|
|
9
|
+
default?: (props: {}) => any;
|
|
10
|
+
};
|
|
11
|
+
emit: {};
|
|
12
|
+
}>) => import('vue').VNode & {
|
|
13
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
14
|
+
};
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
18
|
+
[K in keyof T]: T[K];
|
|
19
|
+
} : {
|
|
20
|
+
[K in keyof T as K]: T[K];
|
|
21
|
+
}) & {};
|