@formkit/pro 0.115.10 → 0.117.0

package/index.d.ts

@@ -6,6 +6,7 @@ import type { FormKitMessage } from '@formkit/core';
 import type { FormKitNode } from '@formkit/core';
 import type { FormKitOptionsItem } from '@formkit/inputs';
 import type { FormKitOptionsProp } from '@formkit/inputs';
+import type { FormKitOptionsPropWithGroups } from '@formkit/inputs';
 import type { FormKitOptionsValue } from '@formkit/inputs';
 import { FormKitPlugin } from '@formkit/core';
 import { FormKitSchemaExtendableSection } from '@formkit/inputs';
@@ -156,6 +157,12 @@ declare interface CharPart {
     pattern: RegExp;
 }
 
+/**
+ * Input definition for a colorpicker input.
+ * @public
+ */
+export declare const colorpicker: FormKitProInput;
+
 /**
  * Creates a set of commonly used sections.
  * @param createSection - Creates commonly used sections.
@@ -369,6 +376,98 @@ export declare interface FormKitAutocompleteSlots<Props extends FormKitInputs<Pr
     message: FormKitSlotData<Props, AutocompleteSlotData>;
 }
 
+declare interface FormKitColorpickerSlotData {
+    format: 'hex' | 'rgba' | 'hsla';
+    valueFormat: 'hex' | 'rgba' | 'hsla';
+    panelControls: Bool;
+    panelFormat: Bool;
+    eyeDropper: Bool;
+    inline?: undefined | true;
+    options?: undefined | FormKitOptionsPropWithGroups;
+    showValue: Bool;
+    closeOnSelect?: undefined | true;
+    allowPaste: Bool;
+    panelIsOpen: Bool;
+    h: number;
+    s: number;
+    v: number;
+    alpha: number;
+    hsla: Record<string, number>;
+    hslaPercent: Record<string, number>;
+    hslaString: string;
+    hslaStringPrecise: string;
+    rgba: Record<string, number>;
+    rgbaString: string;
+    hex: string;
+    panelActiveFormat: 'hex' | 'rgba' | 'hsla';
+    fns: FormKitFrameworkContext['fns'] & {
+        anyToHsvaString: (value: string) => string;
+    };
+    handlers: FormKitFrameworkContext['handlers'] & {
+        inputPreviewClick: (e: Event) => void;
+        inputPreviewFocusout: (e: FocusEvent) => void;
+        inputPreviewKeydown: (e: KeyboardEvent) => void;
+        closePanel: () => void;
+        panelCloseKeydown: (e: KeyboardEvent) => void;
+        toggleFormat: (delta: number) => void;
+        panelKeydown: (e: KeyboardEvent) => void;
+        lsKeydown: (e: KeyboardEvent) => void;
+        hueControlKeydown: (e: KeyboardEvent) => void;
+        alphaControlKeydown: (e: KeyboardEvent) => void;
+        eyeDropperKeydown: (e: KeyboardEvent) => void;
+        formatSwitcherKeydown: (e: KeyboardEvent) => void;
+        hexInput: (e: InputEvent) => void;
+        hexKeydown: (e: KeyboardEvent) => void;
+        hexFocus: () => void;
+        hexBlur: (e: Event) => void;
+        rangeLimitInput: (format: string, min: number, max: number, event?: Event) => (e: Event) => void;
+        rangeLimitKeydown: (format: string, min: number, max: number, step: number) => (e: KeyboardEvent) => void;
+        swatchClick: (e: Event) => void;
+        swatchKeydown: (e: KeyboardEvent) => void;
+    };
+    ui: FormKitFrameworkContext['ui'] & {
+        close: FormKitMessage;
+        toggle: FormKitMessage;
+    };
+}
+
+export declare interface FormKitColorpickerSlots<Props extends FormKitInputs<Props>> {
+    swatchPreview: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    valueString: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    panel: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    panelClose: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    controlGroup: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    LS: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    canvasLS: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    controlLS: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    hue: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    canvasHue: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    controlHue: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    alpha: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    canvasAlpha: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    controlAlpha: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    preview: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    canvasPreview: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    canvasSwatchPreview: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    eyeDropper: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    formatField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    colorInputGroup: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    hexField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    rField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    gField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    bField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    hField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    sField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    lField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    aField: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    formatSwitcher: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    swatches: FormKitSlotData<Props, FormKitColorpickerSlotData>;
+    swatch: FormKitSlotData<Props, FormKitColorpickerSlotData & {
+        option: FormKitOptionsItem;
+        index: number;
+    }>;
+}
+
 /**
  * Slot information that pertains specifically to the datepicker input.
  *
@@ -827,7 +926,8 @@ declare namespace inputs {
         taglist,
         mask,
         transferlist,
-        slider
+        slider,
+        colorpicker
     }
 }
 export { inputs }
@@ -1245,6 +1345,21 @@ declare module '@formkit/inputs' {
       // TODO: audit these props.
     }
 
+    colorpicker: {
+      type: 'colorpicker'
+      value?: string
+      options?: FormKitOptionsPropWithGroups
+      inline?: Bool
+      format?: 'hex' | 'rgba' | 'hsla'
+      valueFormat?: 'hex' | 'rgba' | 'hsla'
+      panelControls?: Bool
+      panelFormat?: Bool
+      eyeDropper?: Bool
+      showValue?: Bool
+      closeOnSelect?: Bool
+      allowPaste?: Bool
+    }
+
     datepicker: {
       type: 'datepicker'
       value?: string | Date
@@ -1405,6 +1520,7 @@ declare module '@formkit/inputs' {
 
   interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
     autocomplete: FormKitAutocompleteSlots<Props>
+    colorpicker: FormKitColorpickerSlots<Props>
     datepicker: FormKitDatePickerSlots<Props> & FormKitOverlaySlots<Props>
     dropdown: FormKitDropdownSlots<Props>
     mask: FormKitBaseSlots<Props> & FormKitOverlaySlots<Props>