Dev

.editorconfig

@@ -14,7 +14,7 @@ trim_trailing_whitespace = false
 [*.{yml,yaml}]
 indent_size = 2
 
-[*.{js,ts,vue}]
+[*.{js,ts,mts,vue}]
 indent_size = 2
 indent_style = tab
 

.eslintrc.js

@@ -13,8 +13,8 @@ module.exports = {
 	],
 	ignorePatterns: [
 		'.eslintrc.js',
-		'vite.build.config.ts',
-		'vite.config.ts',
+		'vite.build.config.mts',
+		'vite.config.mts',
 		'*.bk.vue',
 	],
 	overrides: [

.npmrc

@@ -0,0 +1 @@
+node-version=20.10.0

.nvmrc

@@ -0,0 +1 @@
+20.10.0

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log
 All notable changes to the "vuetify-color-field" plugin will be documented in this file.
 
+## v1.1.0
+01-05-24
+[main] (@webdevnerdstuff)
+* Fix typescript issues
+* Reorganizing
+* Add vitest
+* Update node version to v20.10.0
+
 ## v1.0.1
 11-09-23
 [main] (@webdevnerdstuff)

dist/plugin/VColorField.vue.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../types';
+import { Props } from './types';
 declare function toggleColorPicker(trigger?: string | Event): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     appendIcon: undefined;
@@ -8,6 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     cardOffsetY: number;
     cardPadding: number;
     cardProps: () => {};
+    clearable: boolean;
     color: undefined;
     colorPickerProps: () => {};
     density: string;
@@ -31,18 +32,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     readonly: boolean;
     readonlyInput: boolean;
     required: boolean;
+    variant: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     update: (...args: any[]) => void;
     "update:mode": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     appendIcon: undefined;
     appendInnerIcon: undefined;
     cardFieldWidth: boolean;
     cardOffsetX: number;
     cardOffsetY: number;
     cardPadding: number;
     cardProps: () => {};
+    clearable: boolean;
     color: undefined;
     colorPickerProps: () => {};
     density: string;
@@ -66,58 +69,52 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     readonly: boolean;
     readonlyInput: boolean;
     required: boolean;
+    variant: string;
 }>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:mode"?: ((...args: any[]) => any) | undefined;
     onUpdate?: ((...args: any[]) => any) | undefined;
+    "onUpdate:mode"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    density: "default" | "comfortable" | "compact" | null;
     appendIcon: string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent;
-    prependIcon: string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent;
     appendInnerIcon: string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent;
     cardFieldWidth: boolean;
     cardOffsetX: string | number;
     cardOffsetY: string | number;
     cardPadding: string | number;
-    cardProps: import('../types').VCardProps;
+    cardProps: import('./types').VCardProps;
+    clearable: boolean;
     colorPickerProps: Partial<{
         width: NonNullable<string | number>;
         style: globalThis.StyleValue;
         disabled: boolean;
         tag: string;
-        mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
+        mode: "rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa";
         rounded: string | number | boolean;
         dotSize: string | number;
-        modes: readonly ("rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa")[];
+        modes: readonly ("rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa")[];
         canvasHeight: string | number;
         hideCanvas: boolean;
         hideSliders: boolean;
         hideInputs: boolean;
         showSwatches: boolean;
         swatchesMaxHeight: string | number;
     }> & Omit<{
-        readonly width: NonNullable<string | number>;
-        readonly style: globalThis.StyleValue;
-        readonly disabled: boolean;
-        readonly tag: string;
-        readonly mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
-        readonly dotSize: string | number;
-        readonly modes: readonly ("rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa")[];
         readonly canvasHeight: string | number;
+        readonly dotSize: string | number;
         readonly hideCanvas: boolean;
-        readonly hideSliders: boolean;
         readonly hideInputs: boolean;
+        readonly hideSliders: boolean;
+        readonly mode: "rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa";
+        readonly modes: readonly ("rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa")[];
         readonly showSwatches: boolean;
         readonly swatchesMaxHeight: string | number;
-        readonly border?: string | number | boolean | undefined;
+        readonly tag: string;
+        readonly style: globalThis.StyleValue;
+        readonly width: NonNullable<string | number>;
+        readonly disabled: boolean;
         readonly color?: string | undefined;
-        readonly position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
-        readonly class?: any;
-        readonly elevation?: string | number | undefined;
         readonly theme?: string | undefined;
-        readonly rounded?: string | number | boolean | undefined;
-        readonly modelValue?: string | Record<string, unknown> | null | undefined;
         readonly swatches?: readonly (readonly (string | number | {
             readonly r: number;
             readonly g: number;
@@ -134,8 +131,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             readonly l: number;
             readonly a?: number | undefined;
         })[])[] | undefined;
+        readonly class?: any;
+        readonly rounded?: string | number | boolean | undefined;
+        readonly position?: "fixed" | "absolute" | "static" | "sticky" | "relative" | undefined;
+        readonly elevation?: string | number | undefined;
+        readonly border?: string | number | boolean | undefined;
+        readonly modelValue?: string | Record<string, unknown> | null | undefined;
         "onUpdate:modelValue"?: ((color: any) => any) | undefined;
-        "onUpdate:mode"?: ((mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
+        "onUpdate:mode"?: ((mode: "rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         width: {
             type: globalThis.PropType<NonNullable<string | number>>;
@@ -144,7 +147,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         border: (BooleanConstructor | StringConstructor | NumberConstructor)[];
         color: StringConstructor;
         position: {
-            type: globalThis.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+            type: globalThis.PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
             validator: (v: any) => boolean;
         };
         style: {
@@ -178,12 +181,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         hideSliders: BooleanConstructor;
         hideInputs: BooleanConstructor;
         mode: {
-            type: globalThis.PropType<"rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa">;
+            type: globalThis.PropType<"rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa">;
             default: string;
             validator: (v: string) => boolean;
         };
         modes: {
-            type: globalThis.PropType<readonly ("rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa")[]>;
+            type: globalThis.PropType<readonly ("rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa")[]>;
             default: () => string[];
             validator: (v: any) => boolean;
         };
@@ -213,10 +216,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         };
     }>> & {
         "onUpdate:modelValue"?: ((color: any) => any) | undefined;
-        "onUpdate:mode"?: ((mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
-    }, "width" | "style" | "tag" | "rounded" | "canvasHeight" | "disabled" | "dotSize" | "hideCanvas" | "hideSliders" | "hideInputs" | "mode" | "modes" | "showSwatches" | "swatchesMaxHeight"> & {
-        hideModeSwitch?: boolean | undefined;
-    };
+        "onUpdate:mode"?: ((mode: "rgba" | "rgb" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
+    }, "canvasHeight" | "dotSize" | "hideCanvas" | "hideInputs" | "hideSliders" | "mode" | "modes" | "showSwatches" | "swatchesMaxHeight" | "tag" | "style" | "rounded" | "width" | "disabled">;
+    density: "default" | "comfortable" | "compact" | null;
     hint: string;
     iconHoverColor: string | boolean;
     iconSize: string | number;
@@ -226,16 +228,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     open: string;
     persistentHint: boolean;
     persistentPlaceholder: boolean;
+    pip: boolean;
+    pipBorder: string | null;
+    pipBorderRadius: string;
+    pipIcon: boolean | (string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent) | null;
+    pipSlot: string;
     placeholder: string;
+    prependIcon: string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent;
     prependInnerIcon: boolean | (string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent) | null;
     readonly: boolean | null;
     readonlyInput: boolean | null;
     required: boolean;
-    pipIcon: boolean | (string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent) | null;
-    pipBorder: string | null;
-    pipBorderRadius: string;
-    pip: boolean;
-    pipSlot: string;
+    variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
 }, {}>, Partial<Record<NonNullable<string | number>, (_: any) => any>> & {
     prepend?(_: {
         toggleColorPicker: typeof toggleColorPicker;

dist/plugin/components/ColorPickerIcon.vue.d.ts

@@ -1,9 +1,9 @@
-import { ColorPickerIconProps } from '../../types';
+import { ColorPickerIconProps } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerIconProps>, {
     icon: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerIconProps>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerIconProps>, {
     icon: string;
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;

dist/plugin/components/PipComponent.vue.d.ts

@@ -1,7 +1,7 @@
-import type { PipComponentProps } from '../../types';
+import type { PipComponentProps } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PipComponentProps>, {}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PipComponentProps>, {}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PipComponentProps>, {}>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

dist/plugin/composables/classes.d.ts

@@ -1,4 +1,4 @@
-import { UseCardClasses, UseHintClasses, UsePipClasses, UseTextFieldClasses } from '../../types';
+import { UseCardClasses, UseHintClasses, UsePipClasses, UseTextFieldClasses } from '../types';
 export declare const usePipClasses: UsePipClasses;
 export declare const useTextFieldClasses: UseTextFieldClasses;
 export declare const useHintClasses: UseHintClasses;

dist/plugin/composables/helpers.d.ts

@@ -1,4 +1,4 @@
-import { UseConvertToUnit } from '../../types';
+import { UseConvertToUnit } from '../types';
 /**
 * Converts a string to a number with a unit.
 */

dist/plugin/composables/icons.d.ts

@@ -1,2 +1,2 @@
-import { UseGetIcon } from '../../types';
+import { UseGetIcon } from '../types';
 export declare const useGetIcon: UseGetIcon;

dist/plugin/composables/styles.d.ts

@@ -1,2 +1,2 @@
-import { UsePipStyle } from '../../types';
+import { UsePipStyle } from '../types';
 export declare const usePipStyles: UsePipStyle;

dist/plugin/index.d.ts

@@ -1,3 +1,9 @@
+import type { App } from 'vue';
+import type { GlobalOptions } from './types';
 import VColorField from './VColorField.vue';
-export { VColorField };
+export declare const globalOptions: unique symbol;
+export declare function createVColorField(options?: GlobalOptions): {
+    install: (app: App) => void;
+};
 export default VColorField;
+export { VColorField, };

dist/types/index.d.ts → dist/plugin/types/index.d.ts

@@ -1,6 +1,8 @@
 import { CSSProperties } from 'vue';
 import type { IconOptions } from 'vuetify';
+import VColorField from '../VColorField.vue';
 import type { VCard, VColorPicker, VIcon, VTextField } from 'vuetify/components';
+export * from '../index';
 export type Mode = VColorPicker['$props']['mode'];
 export interface KeyStringAny<T = any> {
     [key: string]: T;
@@ -25,10 +27,9 @@ export interface Props extends PipProps {
     cardOffsetY?: number | string;
     cardPadding?: number | string;
     cardProps?: VCardProps;
+    clearable?: VTextField['$props']['clearable'];
     color?: VTextField['$props']['color'];
-    colorPickerProps?: VColorPicker['$props'] & {
-        hideModeSwitch?: boolean;
-    };
+    colorPickerProps?: VColorPicker['$props'];
     density?: VTextField['$props']['density'];
     hint?: string;
     iconHoverColor?: VIcon['$props']['color'] | boolean;
@@ -56,6 +57,9 @@ export interface Props extends PipProps {
     showSwatches?: VColorPicker['$props']['showSwatches'];
     swatches?: VColorPicker['$props']['swatches'];
     swatchesMaxHeight?: VColorPicker['$props']['swatchesMaxHeight'];
+    variant?: VTextField['$props']['variant'];
+}
+export interface GlobalOptions extends Props {
 }
 export interface PipComponentProps extends PipProps {
     modelValue?: any;
@@ -129,3 +133,10 @@ export interface CardStylesObject extends CSSProperties {
     top?: string | number;
     width?: string | number;
 }
+declare module "vue" {
+    interface ComponentCustomProperties {
+    }
+    interface GlobalComponents {
+        VColorField: typeof VColorField;
+    }
+}

dist/scss/main.scss

@@ -12,13 +12,12 @@
 
 	&--card {
 		display: none;
-		position: absolute;
+		position: absolute !important;
 		z-index: 999999;
 
 		.v-color-picker {
 			width: 100% !important;
 
-
 			&-canvas {
 				canvas {
 					width: 100%;