Build

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

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: globalThis.PropType<string>;
+    };
+    icon: {
+        type: globalThis.PropType<string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent>;
+        default: 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<{
+    color: {
+        type: globalThis.PropType<string>;
+    };
+    icon: {
+        type: globalThis.PropType<string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent>;
+        default: string;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,50 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: globalThis.PropType<any>;
+    };
+    pipIcon: {
+        type: globalThis.PropType<string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent>;
+    };
+    pipBorder: {
+        type: globalThis.PropType<string | null>;
+    };
+    pipBorderRadius: {
+        type: globalThis.PropType<string>;
+    };
+    pip: {
+        type: globalThis.PropType<boolean>;
+    };
+    pipSize: {
+        type: globalThis.PropType<string | number>;
+    };
+    pipSlot: {
+        type: globalThis.PropType<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<{
+    modelValue: {
+        type: globalThis.PropType<any>;
+    };
+    pipIcon: {
+        type: globalThis.PropType<string | (string | [path: string, opacity: number])[] | import("vue").JSXComponent>;
+    };
+    pipBorder: {
+        type: globalThis.PropType<string | null>;
+    };
+    pipBorderRadius: {
+        type: globalThis.PropType<string>;
+    };
+    pip: {
+        type: globalThis.PropType<boolean>;
+    };
+    pipSize: {
+        type: globalThis.PropType<string | number>;
+    };
+    pipSlot: {
+        type: globalThis.PropType<string>;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

dist/plugin/components/index.d.ts

@@ -0,0 +1 @@
+export {};

dist/plugin/composables/classes.d.ts

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

dist/plugin/composables/helpers.d.ts

@@ -0,0 +1,5 @@
+import { UseConvertToUnit } from '../../types';
+/**
+* Converts a string to a number with a unit.
+*/
+export declare const useConvertToUnit: UseConvertToUnit;

dist/plugin/composables/icons.d.ts

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

dist/plugin/composables/styles.d.ts

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

dist/plugin/index.d.ts

@@ -0,0 +1,3 @@
+import VColorField from './VColorField.vue';
+export { VColorField };
+export default VColorField;

dist/plugin/utils/emits.d.ts

@@ -0,0 +1,2 @@
+declare const _default: never[];
+export default _default;

dist/plugin/utils/globals.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "v-color-field";

dist/scss/main.scss

@@ -0,0 +1,35 @@
+.v-color-field {
+	&--text-field {
+		&-readonly,
+		&-readonly-input {
+			.v-field {
+				* {
+					cursor: pointer !important;
+				}
+			}
+		}
+	}
+
+	&--card {
+		display: none;
+		position: absolute;
+		z-index: 999999;
+
+		.v-color-picker {
+			width: 100% !important;
+
+
+			&-canvas {
+				canvas {
+					width: 100%;
+				}
+			}
+		}
+
+		&-full-width {
+			.v-color-picker {
+				max-width: 100% !important;
+			}
+		}
+	}
+}

dist/types/index.d.ts

@@ -0,0 +1,119 @@
+import { CSSProperties } from 'vue';
+import type { IconOptions } from 'vuetify';
+import type { VCard, VColorPicker, VIcon, VTextField } from 'vuetify/components';
+export type Mode = VColorPicker['$props']['mode'];
+export interface KeyStringAny<T = any> {
+    [key: string]: T;
+}
+export type HtmlRefElement = HTMLDivElement | null | undefined;
+export interface PipProps {
+    pip?: boolean;
+    pipBorder?: string | null | undefined;
+    pipIcon?: VIcon['$props']['icon'];
+    pipBorderRadius?: string;
+    pipSize?: VIcon['$props']['size'];
+    pipSlot?: string | undefined;
+}
+export interface VCardProps extends Omit<VCard['$props'], '$children'> {
+    verticalOffset?: number;
+}
+export interface Props extends PipProps {
+    appendIcon?: VTextField['$props']['appendIcon'];
+    appendInnerIcon?: VTextField['$props']['appendInnerIcon'];
+    cardFieldWidth?: boolean;
+    cardOffsetX?: number | string;
+    cardOffsetY?: number | string;
+    cardPadding?: number | string;
+    cardProps?: VCardProps;
+    color?: VTextField['$props']['color'];
+    colorPickerProps?: VColorPicker['$props'] & {
+        hideModeSwitch?: boolean;
+    };
+    density?: VTextField['$props']['density'];
+    hint?: string;
+    iconHoverColor?: VIcon['$props']['color'] | boolean;
+    label?: string;
+    messages?: VTextField['$props']['messages'];
+    name?: any;
+    open?: string | undefined;
+    persistentHint?: boolean;
+    persistentPlaceholder?: VTextField['$props']['persistentPlaceholder'];
+    placeholder?: VTextField['$props']['placeholder'];
+    prependIcon?: VTextField['$props']['prependIcon'];
+    prependInnerIcon?: VTextField['$props']['prependInnerIcon'] | null | false;
+    readonly?: VTextField['$props']['readonly'];
+    readonlyInput?: boolean | null | undefined;
+    required?: boolean;
+    theme?: VTextField['$props']['theme'];
+}
+export interface PipComponentProps extends PipProps {
+    modelValue?: any;
+}
+export interface ColorPickerIconProps {
+    color?: VIcon['$props']['color'];
+    icon?: VIcon['$props']['icon'];
+}
+export interface VuetifyDefaults {
+    VCard: Props['cardProps'];
+    VColorPicker: Props['colorPickerProps'];
+}
+export interface TextFieldProperties {
+    bottom: string | number | undefined;
+    height: number | string;
+    left: string | number | undefined;
+    right: string | number | undefined;
+    top: string | number | undefined;
+    width: number | string;
+}
+export interface UseGetIcon {
+    (options: {
+        icon: PipProps['pipIcon'];
+        iconOptions: IconOptions | undefined;
+        name: string;
+    }): string;
+}
+export interface UseComposableName {
+    (options: {
+        foo?: string;
+    }): Props;
+}
+export interface UseConvertToUnit {
+    (options: {
+        unit?: string;
+        value: string | number | undefined;
+    }): string | undefined;
+}
+export interface UsePipClasses {
+    (options?: {}): object;
+}
+export interface UseTextFieldClasses {
+    (options: {
+        name?: Props['name'];
+        readonly?: boolean | null;
+        readonlyInput: Props['readonlyInput'];
+    }): object;
+}
+export interface UseHintClasses {
+    (options?: {}): object;
+}
+export interface UseCardClasses {
+    (options: {
+        fullWidth?: boolean;
+    }): object;
+}
+export interface UsePipStyle {
+    (options: {
+        pipBorder?: Props['pipBorder'];
+        pipBorderRadius?: Props['pipBorderRadius'];
+    }): CSSProperties;
+}
+export interface CardStylesObject extends CSSProperties {
+    bottom?: string | number;
+    display?: string;
+    left?: string | number;
+    minWidth?: string;
+    padding?: string;
+    right?: string | number;
+    top?: string | number;
+    width?: string | number;
+}