@vuelor/picker 0.1.0-beta.1 → 0.2.0

package/README.md

@@ -7,7 +7,7 @@
 <h1 align="center">Vuelor</h1>
 
 <p align="center">
-Vuelor — a truly flexible, accessible, and Tailwind-ready color picker with developer experiance in mind.
+Vuelor — a truly flexible, accessible, and Tailwind-ready color picker with developer experience in mind.
 </p>
 
 <p align="center">
@@ -64,9 +64,13 @@ export default {
     extend: {
       boxShadow: {
         'vuelor-card': '0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 .5px 0 #0000001f',
-        'vuelor-thumb': '0px 0px .5px #0000002e, 0px 3px 8px #0000001a, 0px 1px 3px #0000001a'
+        'vuelor-thumb': '0px 0px .5px #0000002e, 0px 3px 8px #0000001a, 0px 1px 3px #0000001a',
+        'vuelor-inner': 'inset 0 0 0 1px #0000001a'
       }
     },
+    dropShadow: {
+      'vuelor-thumb': ['0px 0px .5px #00000054', '0px 1px 3px #00000026']
+    }
   }
 }
 ```
@@ -128,3 +132,4 @@ const color = ref(null)
 | `ColorPickerSliderHue.vue`        |
 | `ColorPickerSliderSaturation.vue` |
 | `ColorPickerSliderLightness.vue`  |
+| `ColorPickerSwatch.vue`           |

package/dist/components/ColorPickerCanvas.vue.d.ts

@@ -0,0 +1,20 @@
+interface CanvasProps {
+    type?: 'HSV' | 'HSL';
+    height?: number;
+    width?: number;
+    wheel?: boolean;
+    class?: string;
+    ui?: {
+        root?: string;
+        area?: string;
+        thumb?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<CanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CanvasProps> & Readonly<{}>, {
+    type: "HSV" | "HSL";
+    width: number;
+    height: number;
+    wheel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerEyeDropper.vue.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    class?: string;
+    as?: string;
+    asChild?: boolean;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerInputHSB.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiInputSlots } from '../utils/styles';
+type __VLS_Props = {
+    class?: string;
+    ui?: Partial<UiInputSlots>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerInputHSL.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiInputSlots } from '../utils/styles';
+type __VLS_Props = {
+    class?: string;
+    ui?: Partial<UiInputSlots>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerInputHex.vue.d.ts

@@ -0,0 +1,23 @@
+import type { UiInputSlots } from '../utils/styles';
+type __VLS_Props = {
+    modelValue?: string;
+    class?: string;
+    ui?: Partial<UiInputSlots>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerInputRGB.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiInputSlots } from '../utils/styles';
+type __VLS_Props = {
+    class?: string;
+    ui?: Partial<UiInputSlots>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerRoot.vue.d.ts

@@ -0,0 +1,111 @@
+import type { Ref } from 'vue';
+import type { ThemeSlots } from '../theme';
+import type { HSV, HSVA, HSL, RGB, RGBA, Format, ColorObject } from '../utils/types';
+type ColorPickerRootContext = {
+    alpha: Ref<number>;
+    hsv: Ref<HSV>;
+    hsva: Ref<HSVA>;
+    hsl: Ref<HSL>;
+    rgb: Ref<RGB>;
+    rgba: Ref<RGBA>;
+    hex: Ref<string>;
+    hexa: Ref<string>;
+    uiSlots: Function;
+    disabled: Ref<boolean>;
+    isAlphaEnabled: Ref<boolean>;
+    commitValue: () => void;
+};
+type ModelValue = string | ColorObject | null;
+export declare const injectColorPickerContext: <T extends ColorPickerRootContext | null | undefined = ColorPickerRootContext>(fallback?: T | undefined) => T extends null ? ColorPickerRootContext | null : ColorPickerRootContext, provideColorPickerContext: (contextValue: ColorPickerRootContext) => ColorPickerRootContext;
+export interface ColorPickerRootProps {
+    ui?: ThemeSlots;
+    class?: string;
+    styling?: 'tailwindcss' | 'vanillacss';
+    disabled?: boolean;
+    defaultValue?: string;
+    modelValue: ModelValue;
+    format?: Format;
+}
+export type ColorPickerRootEmits = {
+    (e: 'valueCommit', value: ModelValue): void;
+    (e: 'update:modelValue', value: ModelValue): void;
+};
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorPickerRootProps, {
+    color: {
+        state: Ref<{
+            hsv: {
+                h: number;
+                s: number;
+                v: number;
+            };
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+            };
+            rgb: {
+                r: number;
+                g: number;
+                b: number;
+            };
+        }, {
+            hsv: HSV;
+            hsl: HSL;
+            rgb: RGB;
+        } | {
+            hsv: {
+                h: number;
+                s: number;
+                v: number;
+            };
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+            };
+            rgb: {
+                r: number;
+                g: number;
+                b: number;
+            };
+        }>;
+        alpha: Ref<number, number>;
+        rgb: import("vue").WritableComputedRef<RGB, RGB>;
+        rgba: import("vue").WritableComputedRef<RGBA, RGBA>;
+        hsl: import("vue").WritableComputedRef<HSL, HSL>;
+        hsla: import("vue").WritableComputedRef<import("..").HSLA, import("..").HSLA>;
+        hsv: import("vue").WritableComputedRef<HSV, HSV>;
+        hsva: import("vue").WritableComputedRef<HSVA, HSVA>;
+        hex: import("vue").WritableComputedRef<string, string>;
+        hexa: import("vue").WritableComputedRef<string, string>;
+        toRGBString: () => string;
+        toRGBAString: () => string;
+        toHSLString: () => string;
+        toHSLAString: () => string;
+        toHSVString: () => string;
+        toHSVAString: () => string;
+        toObject: () => ColorObject;
+        toFormat: (format: Format) => string | ColorObject;
+        fromFormat: (value: string | ColorObject, format: Format) => void;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: ModelValue) => any;
+    valueCommit: (value: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ModelValue) => any) | undefined;
+    onValueCommit?: ((value: ModelValue) => any) | undefined;
+}>, {
+    styling: "tailwindcss" | "vanillacss";
+    disabled: boolean;
+    defaultValue: string;
+    format: Format;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorPickerSliderAlpha.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+interface SliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderBlue.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface BlueSliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<BlueSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlueSliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderGreen.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface GreenSliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<GreenSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GreenSliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderHue.vue.d.ts

@@ -0,0 +1,13 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface SliderProps {
+    class?: string;
+    inverted?: boolean;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderLightness.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface SliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderRed.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface RedSliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<RedSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RedSliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSliderSaturation.vue.d.ts

@@ -0,0 +1,12 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { UiSliderSlots } from '../utils/styles';
+export interface SliderProps {
+    class?: string;
+    orientation?: SliderRootProps['orientation'];
+    ui?: Partial<UiSliderSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorPickerSwatch.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    as?: string;
+    value: string;
+    class?: string;
+    ui?: Partial<{
+        base: string;
+        alpha: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useColor.d.ts

@@ -0,0 +1,60 @@
+import type { HSV, HSVA, HSL, HSLA, RGB, RGBA, Format, ColorObject } from '../utils/types';
+type ColorState = {
+    hsv: HSV;
+    hsl: HSL;
+    rgb: RGB;
+};
+export declare function useColor(): {
+    state: import("vue").Ref<{
+        hsv: {
+            h: number;
+            s: number;
+            v: number;
+        };
+        hsl: {
+            h: number;
+            s: number;
+            l: number;
+        };
+        rgb: {
+            r: number;
+            g: number;
+            b: number;
+        };
+    }, ColorState | {
+        hsv: {
+            h: number;
+            s: number;
+            v: number;
+        };
+        hsl: {
+            h: number;
+            s: number;
+            l: number;
+        };
+        rgb: {
+            r: number;
+            g: number;
+            b: number;
+        };
+    }>;
+    alpha: import("vue").Ref<number, number>;
+    rgb: import("vue").WritableComputedRef<RGB, RGB>;
+    rgba: import("vue").WritableComputedRef<RGBA, RGBA>;
+    hsl: import("vue").WritableComputedRef<HSL, HSL>;
+    hsla: import("vue").WritableComputedRef<HSLA, HSLA>;
+    hsv: import("vue").WritableComputedRef<HSV, HSV>;
+    hsva: import("vue").WritableComputedRef<HSVA, HSVA>;
+    hex: import("vue").WritableComputedRef<string, string>;
+    hexa: import("vue").WritableComputedRef<string, string>;
+    toRGBString: () => string;
+    toRGBAString: () => string;
+    toHSLString: () => string;
+    toHSLAString: () => string;
+    toHSVString: () => string;
+    toHSVAString: () => string;
+    toObject: () => ColorObject;
+    toFormat: (format: Format) => string | ColorObject;
+    fromFormat: (value: string | ColorObject, format: Format) => void;
+};
+export {};

package/dist/composables/useThumb.d.ts

@@ -0,0 +1,7 @@
+import type { Ref, CSSProperties } from 'vue';
+export declare function useThumb(canvasRef: Ref<HTMLCanvasElement | null>, type: Ref<'HSV' | 'HSL'>): {
+    thumbStyles: import("vue").ComputedRef<CSSProperties>;
+    handleWheel: (event: WheelEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handlePointerDown: (event: PointerEvent) => void;
+};

package/dist/composables/useVModel.d.ts

@@ -0,0 +1,5 @@
+export declare function useVModel<T>(props: {
+    modelValue: T;
+}, emit: {
+    (e: 'update:modelValue', value: T): void;
+}, onUpdate: (value: T) => void): import("vue").WritableComputedRef<T, T>;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import './style/index.css';
+export * from './utils/color';
+export type * from './utils/types';
+export { useVModel } from './composables/useVModel.ts';
+export { injectColorPickerContext } from './components/ColorPickerRoot.vue';
+export { default as ColorPickerRoot } from './components/ColorPickerRoot.vue';
+export { default as ColorPickerCanvas } from './components/ColorPickerCanvas.vue';
+export { default as ColorPickerEyeDropper } from './components/ColorPickerEyeDropper.vue';
+export { default as ColorPickerInputHex } from './components/ColorPickerInputHex.vue';
+export { default as ColorPickerInputRGB } from './components/ColorPickerInputRGB.vue';
+export { default as ColorPickerInputHSL } from './components/ColorPickerInputHSL.vue';
+export { default as ColorPickerInputHSB } from './components/ColorPickerInputHSB.vue';
+export { default as ColorPickerSliderAlpha } from './components/ColorPickerSliderAlpha.vue';
+export { default as ColorPickerSliderHue } from './components/ColorPickerSliderHue.vue';
+export { default as ColorPickerSliderSaturation } from './components/ColorPickerSliderSaturation.vue';
+export { default as ColorPickerSliderLightness } from './components/ColorPickerSliderLightness.vue';
+export { default as ColorPickerSliderRed } from './components/ColorPickerSliderRed.vue';
+export { default as ColorPickerSliderGreen } from './components/ColorPickerSliderGreen.vue';
+export { default as ColorPickerSliderBlue } from './components/ColorPickerSliderBlue.vue';
+export { default as ColorPickerSwatch } from './components/ColorPickerSwatch.vue';