@vuelor/picker 0.1.0 → 0.3.0
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 +6 -1
- package/dist/components/ColorPickerEyeDropper.vue.d.ts +9 -5
- package/dist/components/ColorPickerInputHex.vue.d.ts +6 -1
- package/dist/components/ColorPickerRoot.vue.d.ts +5 -4
- package/dist/components/ColorPickerSwatch.vue.d.ts +14 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +809 -715
- package/dist/style.css +1 -1
- package/dist/theme/index.d.ts +8 -0
- package/dist/theme/tailwindcss.d.ts +4 -0
- package/dist/theme/vanillacss.d.ts +4 -0
- package/dist/utils/color.d.ts +3 -1
- package/dist/utils/consts.d.ts +1 -0
- package/dist/utils/parsers.d.ts +3 -1
- package/package.json +3 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vuelor-picker-root{--vuelor-
|
|
1
|
+
.vuelor-picker-root{--vuelor-primary-color: #0d99ff;--vuelor-surface-color: #ffffff;--vuelor-border-color: #e6e6e6;--vuelor-inner-shadow-color: #0000001a;--vuelor-input-bg-color: #f5f5f5;--vuelor-button-hover-bg-color: #0000000d;--vuelor-disabled-opacity: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--vuelor-inner-shadow-color);width:15rem;background-color:var(--vuelor-surface-color);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--vuelor-button-hover-bg-color)}.vuelor-picker-eye-dropper:disabled{opacity:var(--vuelor-disabled-opacity);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--vuelor-surface-color);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-canvas-root{position:relative;touch-action:none}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-canvas-area{border-radius:.3125rem;outline-width:.0625rem;outline-style:solid;outline-offset:-.0625rem;outline-color:var(--vuelor-inner-shadow-color)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--vuelor-border-color)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--vuelor-primary-color)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--vuelor-input-bg-color)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4;display:none}.vuelor-picker-input-label[data-alpha-label],.vuelor-picker-input-label:not([data-alpha-label]){display:block}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-base{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-basedisabled{opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-swatch-base:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -24,6 +24,10 @@ declare const _default: {
|
|
|
24
24
|
label: string;
|
|
25
25
|
field: string;
|
|
26
26
|
};
|
|
27
|
+
swatch: {
|
|
28
|
+
base: string;
|
|
29
|
+
alpha: string;
|
|
30
|
+
};
|
|
27
31
|
};
|
|
28
32
|
vanillacss: {
|
|
29
33
|
picker: {
|
|
@@ -49,6 +53,10 @@ declare const _default: {
|
|
|
49
53
|
label: string;
|
|
50
54
|
field: string;
|
|
51
55
|
};
|
|
56
|
+
swatch: {
|
|
57
|
+
base: string;
|
|
58
|
+
alpha: string;
|
|
59
|
+
};
|
|
52
60
|
};
|
|
53
61
|
};
|
|
54
62
|
export default _default;
|
package/dist/utils/color.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Hex, HSL, HSV, RGB, RGBA } from './types.ts';
|
|
1
|
+
import type { Hex, Hexa, HSL, HSV, RGB, RGBA } from './types.ts';
|
|
2
2
|
export declare function HSLtoHSV(hsl: HSL): HSV;
|
|
3
3
|
export declare function HSVtoHSL(hsv: HSV): HSL;
|
|
4
4
|
/**
|
|
@@ -15,5 +15,7 @@ export declare function HSVtoRGB(hsv: HSV): RGB;
|
|
|
15
15
|
export declare function RGBtoHSV(rgba: RGB): HSV;
|
|
16
16
|
export declare const toHex: (v: number) => string;
|
|
17
17
|
export declare function RGBtoHex(rgb: RGB): Hex;
|
|
18
|
+
export declare function RGBAtoHexa(rgba: RGBA): Hexa;
|
|
18
19
|
export declare function HexToRGB(hex: Hex): RGB;
|
|
20
|
+
export declare function HexaToRGBA(hex: Hexa): RGBA;
|
|
19
21
|
export declare function RGBAtoCSS(rgba: RGBA): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SVG_MOSAIC_URL = "data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A";
|
package/dist/utils/parsers.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { RGB, RGBA, HSL, HSLA, HSV, HSVA } from './types.ts';
|
|
2
|
-
export declare function parseHex(hex: string): RGBA;
|
|
2
|
+
export declare function parseHex(hex: string): RGBA | null;
|
|
3
|
+
export declare function getHexColorFromHexString(hex: string): string | null;
|
|
4
|
+
export declare function getAlphaFromHexString(hex: string): number | null;
|
|
3
5
|
export declare function parseRGB(str: string): RGB;
|
|
4
6
|
export declare function parseRGBA(str: string): RGBA;
|
|
5
7
|
export declare function parseHSL(str: string): HSL;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuelor/picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Vue color picker, built with Reka UI and Tailwind CSS.",
|
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
"ui",
|
|
27
27
|
"vue",
|
|
28
28
|
"nuxt",
|
|
29
|
+
"nuxt-ui",
|
|
29
30
|
"reka-ui",
|
|
31
|
+
"shadcn/vue",
|
|
30
32
|
"tailwindcss",
|
|
31
33
|
"color",
|
|
32
34
|
"color-picker"
|