import type { AllReals } from '@formkit/inputs'; import type { FormatStyleObj } from '@formkit/tempo'; import { FormKitExtendableSchemaRoot } from '@formkit/core'; import type { FormKitFrameworkContext } from '@formkit/core'; import type { FormKitInputs } from '@formkit/inputs'; 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'; import { FormKitSchemaNode } from '@formkit/core'; import type { FormKitSlotData } from '@formkit/inputs'; import { FormKitTypeDefinition } from '@formkit/core'; /** * Creates a FormKitPro conditional section. * @param condition - A schema condition to apply to a section. * @param then - The section that applies if the condition is true. * @param otherwise - (else) The section that applies if the condition is false. * @returns * @public */ export declare function $if(condition: string, then: FormKitProExtendableSection | string, otherwise?: FormKitProExtendableSection | string): FormKitProExtendableSection; /** * Input definition for a autocomplete input. * @public */ export declare const autocomplete: FormKitProInput; /** * Data available to autocomplete slots. * * @public */ export declare interface AutocompleteSlotData { options: FormKitOptionsItem[]; debounce?: number | string; multiple?: Bool; selectionAppearance?: 'option' | 'text-input' | 'text'; openOnClick?: Bool; filter?: (option: FormKitOptionsItem, search?: string) => boolean; optionLoader?: OptionLoader; emptyMessage?: string; closeOnSelect?: Bool; clearSearchOnOpen?: Bool; activeDescendant?: string; activeValue?: unknown; dropdownWrapperStyles: Record; expanded: boolean; popover?: boolean; forceExpanded: undefined | true; hasNextPage: (data?: any) => void; isLoadingOption?: boolean; listboxStyles: Record; loadMoreOption: FormKitOptionsItem; loadOnCreated: undefined | true; loadOnScroll: undefined | true; max?: number | string; option: FormKitOptionsItem; optionsLoader?: FormKitOptionsLoader; page: number; placeholder?: string; reloadOnCommit: Bool; selections: FormKitOptionsItem[]; showEmptyMessage?: boolean; handlers: FormKitFrameworkContext['handlers'] & { selectOption: (option: FormKitOptionsItem) => void; loadMoreSelected: () => void; toggleListbox: () => void; removeSelection: (option?: FormKitOptionsItem) => (e?: MouseEvent) => void; touchmove: (e: TouchEvent) => void; touchend: (e: TouchEvent) => void; click: (e: MouseEvent) => void; keydown: (e: KeyboardEvent) => void; focus: (e: FocusEvent) => void; loadMore: () => void; selectionClick: (e: MouseEvent) => void; selectionKeydown: (option: FormKitOptionsItem) => (e: KeyboardEvent) => void; searchInputTagKeydown: (option: FormKitOptionsItem) => (e: KeyboardEvent) => void; }; fns: FormKitFrameworkContext['fns'] & { isSelected: (option: FormKitOptionsItem) => boolean; isActive: (option: FormKitOptionsItem) => boolean; }; ui: FormKitFrameworkContext['ui'] & { isLoading: FormKitMessage; loadMore: FormKitMessage; }; } declare interface BasePart { /** * A textual representation to use as a placeholder. */ placeholder: string; /** * A token that represents this pattern */ token: T; /** * In select mode, which direction should types values flow? */ selectDirection?: 'left' | 'right'; /** * An optional character to fill the selection with when in select mode. * This is different than the placeholder character in that this character is * only used when the section has a value but that value is not "complete". * This character should be a single character, and valid for the given part. * For example, numbers may use a "0" as the selectFill since it leads to a * valid number with leading zeros. ### would be 001 when a user types "1". */ selectFill?: string; } declare type Bool = 'true' | 'false' | true | false | ''; /** * A calendar is an array of months, where each month is an array of weeks, * where each week is an array of days. * * @public */ export declare type Calendar = Array; /** * A calendar month is an array of weeks, where each week is an array of days. * * @public */ export declare type CalendarMonth = Array; /** * A calendar week is an array of 7 days (tuple of 7) where each day is a date. * * @public */ export declare type CalendarWeek = [ monday: Date, tuesday: Date, wednesday: Date, thursday: Date, friday: Date, saturday: Date, sunday: Date ]; declare interface CharPart { /** * Defined the part as a fixed length value */ type: 'char'; /** * Regular expression that defines what characters can be applied. */ 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. * @returns * @public */ export declare function createBaseSections(createSection: SectionFactory): { outer: FormKitProSection; wrapper: FormKitProSection; inner: FormKitProSection; icon: (sectionKey: string, el?: string | undefined) => () => FormKitSchemaExtendableSection; label: FormKitProSection; prefix: FormKitProSection; suffix: FormKitProSection; help: FormKitProSection; messages: FormKitProSection; message: FormKitProSection; }; /** * Creates a new FormKit Pro plugin. * @param apiKey - The FormKit Pro api key found on your pro.formkit.com dashboard. * @param inputs - The pro inputs to register, should only be used for Pro Inputs. * @returns * @public */ export declare function createProPlugin(apiKey: string, inputs?: Record): FormKitPlugin; /** * Creates a new section createSection factory with the input code curried in. * @param inputCode - The input code. * @returns * @public */ export declare function createSectionFactory(inputCode: string): SectionFactory; /** * Input definition for a datepicker input. * @public */ export declare const datepicker: FormKitProInput; /** * Slot information that pertains specifically to the datepicker input. * * @public */ export declare type DatePickerSlotData = { panel: Panels; calendar: Calendar; inputText: string; renderedDate: Date; expanded: boolean; popover?: boolean; showPagination: boolean; localTime: string; visibilityStyles: Record; fns: FormKitFrameworkContext['fns'] & { format: (date: Date | string, format: string) => string; sameDay: (date: Date) => boolean; sameMonth: (month: Date) => boolean; notInMonth: (month: Date, day: Date) => boolean; isDisabled: (node: FormKitNode, date?: Date) => boolean; isDisabledMonth: (month: Date) => boolean; isSelected: (date: Date) => boolean; }; handlers: FormKitFrameworkContext['handlers'] & { next: () => void; prev: () => void; open: () => void; _blurOut: () => void; jumpTo: (date: Date) => void; localTime: (e: InputEvent) => void; setDate: (date: Date) => () => void; keydown: (e: KeyboardEvent) => void; mouseEnter: (date: Date) => void; mouseLeave: () => void; }; ui: FormKitFrameworkContext['ui'] & { changeDate: FormKitMessage; chooseDate: FormKitMessage; }; dayButtonFormat: string; monthButtonFormat: string; yearFormat: string; }; /** * Input definition for a dropdown input. * @public */ export declare const dropdown: FormKitProInput; /** * Slot data for dropdown types. * * @public */ export declare interface DropdownSlotData { options: FormKitOptionsItem[]; option?: FormKitOptionsItem; debounce?: number | string; multiple?: Bool; selectionAppearance?: 'truncate' | 'tags'; openOnClick?: Bool; filter?: (option: FormKitOptionsItem, search: string) => boolean; optionLoader?: OptionLoader; emptyMessage?: string; max?: number | string; closeOnSelect?: Bool; activeDescendant?: string; deselect?: Bool; activeValue?: unknown; dropdownWrapperStyles: Record; expanded: boolean; popover?: boolean; fns: FormKitFrameworkContext['fns'] & { isSelected: (option: FormKitOptionsItem) => boolean; isActive: (option: FormKitOptionsItem) => boolean; }; handlers: FormKitFrameworkContext['handlers'] & { selectOption: (option: FormKitOptionsItem) => (e: MouseEvent) => void; loadMoreSelected: () => void; tagClick: (option: FormKitOptionsItem) => void; tagFocus: (option: FormKitOptionsItem) => void; tagBlur: () => void; blur: () => void; toggleListbox: () => void; removeSelection: (option?: FormKitOptionsItem) => (e?: MouseEvent) => void; touchmove: (e: TouchEvent) => void; touchend: (e: TouchEvent) => void; click: (e: MouseEvent) => void; keydown: (e: KeyboardEvent) => void; focus: (e: FocusEvent) => void; loadMore: () => void; }; ui: FormKitFrameworkContext['ui'] & { isLoading: FormKitMessage; loadMore: FormKitMessage; }; } declare interface EnumPart { /** * Defines the part as an enumerated list of options. */ type: 'enum'; /** * The values allowed by an enum part. */ values: string[]; } /** * A schema section that is compatible with FormKitPro’s schema composition. */ declare type ExtendableSchema = IsRoot extends true ? FormKitExtendableSchemaRoot : FormKitSchemaExtendableSection; export { FormatStyleObj } export declare interface FormKitAutocompleteSlots> { outer: FormKitSlotData; wrapper: FormKitSlotData; label: FormKitSlotData; inner: FormKitSlotData; prefixIcon: FormKitSlotData; prefix: FormKitSlotData; input: FormKitSlotData; selections: FormKitSlotData; selection: FormKitSlotData; listboxButton: FormKitSlotData; dropdownWrapper: FormKitSlotData; listbox: FormKitSlotData; listitem: FormKitSlotData; loadMore: FormKitSlotData; emptyMessageInner: FormKitSlotData; closeIcon: FormKitSlotData; selectIcon: FormKitSlotData; selectedIcon: FormKitSlotData>; index: number; }>; option: FormKitSlotData>; index: number; }>; optionLoading: FormKitSlotData>; index: number; }>; removeSelection: FormKitSlotData>; index: number; }>; suffix: FormKitSlotData; suffixIcon: FormKitSlotData; help: FormKitSlotData; messages: FormKitSlotData; message: FormKitSlotData; } 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; expanded: Bool; popover?: Bool; h: number; s: number; v: number; alpha: number; hsla: Record; hslaPercent: Record; hslaString: string; hslaStringPrecise: string; rgba: Record; 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> { swatchPreview: FormKitSlotData; valueString: FormKitSlotData; panel: FormKitSlotData; panelClose: FormKitSlotData; controlGroup: FormKitSlotData; LS: FormKitSlotData; canvasLS: FormKitSlotData; controlLS: FormKitSlotData; hue: FormKitSlotData; canvasHue: FormKitSlotData; controlHue: FormKitSlotData; alpha: FormKitSlotData; canvasAlpha: FormKitSlotData; controlAlpha: FormKitSlotData; preview: FormKitSlotData; canvasPreview: FormKitSlotData; canvasSwatchPreview: FormKitSlotData; eyeDropper: FormKitSlotData; formatField: FormKitSlotData; colorInputGroup: FormKitSlotData; hexField: FormKitSlotData; rField: FormKitSlotData; gField: FormKitSlotData; bField: FormKitSlotData; hField: FormKitSlotData; sField: FormKitSlotData; lField: FormKitSlotData; aField: FormKitSlotData; formatSwitcher: FormKitSlotData; swatches: FormKitSlotData; swatch: FormKitSlotData; } /** * Slot information that pertains specifically to the datepicker input. * * @public */ export declare interface FormKitDatePickerSlots> { calendar: FormKitSlotData; calendarHeader: FormKitSlotData; calendarWeeks: FormKitSlotData; day: FormKitSlotData; dayButton: FormKitSlotData; dayCell: FormKitSlotData; daysHeader: FormKitSlotData; help: FormKitSlotData; prefixIcon: FormKitSlotData; suffixIcon: FormKitSlotData; inner: FormKitSlotData; input: FormKitSlotData; label: FormKitSlotData; message: FormKitSlotData; messages: FormKitSlotData; month: FormKitSlotData; }>; monthButton: FormKitSlotData; months: FormKitSlotData; monthsHeader: FormKitSlotData; next: FormKitSlotData; nextLabel: FormKitSlotData; openButton: FormKitSlotData; outer: FormKitSlotData; panel: FormKitSlotData; panelHeader: FormKitSlotData; panelWrapper: FormKitSlotData; prefix: FormKitSlotData; prev: FormKitSlotData; prevLabel: FormKitSlotData; suffix: FormKitSlotData; time: FormKitSlotData; timeHeader: FormKitSlotData; timeInput: FormKitSlotData; week: FormKitSlotData; weekDay: FormKitSlotData; weekDays: FormKitSlotData; wrapper: FormKitSlotData; year: FormKitSlotData; }>; yearButton: FormKitSlotData; year: Date; }>; years: FormKitSlotData; }>; yearsHeader: FormKitSlotData; } export declare interface FormKitDropdownSlots> { outer: FormKitSlotData; wrapper: FormKitSlotData; inner: FormKitSlotData; label: FormKitSlotData; prefix: FormKitSlotData; prefixIcon: FormKitSlotData; selector: FormKitSlotData; selection: FormKitSlotData>; index: number; }>; closeIcon: FormKitSlotData; selectIcon: FormKitSlotData; suffix: FormKitSlotData; suffixIcon: FormKitSlotData; help: FormKitSlotData; messages: FormKitSlotData; message: FormKitSlotData; listboxButton: FormKitSlotData; dropdownWrapper: FormKitSlotData; listbox: FormKitSlotData; listitem: FormKitSlotData; loadMore: FormKitSlotData; emptyMessageInner: FormKitSlotData; selectedIcon: FormKitSlotData>; index: number; }>; option: FormKitSlotData>; index: number; }>; optionLoading: FormKitSlotData>; index: number; }>; removeSelection: FormKitSlotData>; index: number; }>; placeholder: FormKitSlotData; tag: FormKitSlotData>; index: number; }>; tagWrapper: FormKitSlotData; tagLabel: FormKitSlotData>; index: number; }>; } /** * The option loader function type. * * @public */ export declare interface FormKitOptionsLoader { (context: FormKitFrameworkContext): Promise | FormKitOptionsProp; (...args: any[]): Promise | FormKitOptionsProp; } export declare type FormKitOverlaySlots> = Props['overlay'] extends Yes ? { overlay: FormKitSlotData; overlayChar: FormKitSlotData; overlayEnum: FormKitSlotData; overlayInner: FormKitSlotData; overlayLiteral: FormKitSlotData; overlayParts: FormKitSlotData; overlayPlaceholder: FormKitSlotData; } : {}; /** * An extendable schema section that is compatible with FormKitPro’s schema * composition. */ declare interface FormKitProExtendableSection { (apiKey: string): ExtendableSchema; } /** * The type definition of a FormKitPro input. * @public */ export declare type FormKitProInput = Omit & { schema: FormKitProSchema; }; /** * The options prop for option-based inputs in pro like `autocomplete` and * `dropdown`. * * @public */ export declare type FormKitProOptionsProp = FormKitOptionsProp | FormKitOptionsLoader; /** * The type definition of a FormKit pro schema. * @public */ export declare interface FormKitProSchema { (apiKey: string): FormKitExtendableSchemaRoot; } /** * A schema section that is compatible with FormKitPro’s schema composition. */ declare interface FormKitProSection { (...children: Array): FormKitProExtendableSection; } export declare interface FormKitRatingSlots> { itemsWrapper: FormKitSlotData; onItem: FormKitSlotData; offItem: FormKitSlotData; default: FormKitSlotData; ratingIcon: FormKitSlotData; } /** * Slot information that pertains specifically to the datepicker input. * * @public */ export declare interface FormKitRepeaterSlots> { outer: FormKitSlotData; fieldset: FormKitSlotData; legend: FormKitSlotData; empty: FormKitSlotData; help: FormKitSlotData; prefix: FormKitSlotData; default: FormKitSlotData; }>; items: FormKitSlotData; item: FormKitSlotData; content: FormKitSlotData; }>; group: FormKitSlotData; }>; controls: FormKitSlotData; }>; up: FormKitSlotData; }>; upControl: FormKitSlotData; }>; controlLabel: FormKitSlotData; }>; moveUpIcon: FormKitSlotData; }>; remove: FormKitSlotData; }>; removeControl: FormKitSlotData; }>; removeIcon: FormKitSlotData; }>; insert: FormKitSlotData; }>; insertControl: FormKitSlotData; }>; addIcon: FormKitSlotData; }>; down: FormKitSlotData; }>; downControl: FormKitSlotData; }>; moveDownIcon: FormKitSlotData; }>; suffix: FormKitSlotData; addButton: FormKitSlotData; message: FormKitSlotData; messages: FormKitSlotData; } /** * Slots available to the slider. * * @public */ export declare interface FormKitSliderSlots> { outer: FormKitSlotData; wrapper: FormKitSlotData; label: FormKitSlotData; help: FormKitSlotData; sliderInner: FormKitSlotData; iconPrefix: FormKitSlotData; prefix: FormKitSlotData; track: FormKitSlotData; trackWrapper: FormKitSlotData; trackInner: FormKitSlotData; fill: FormKitSlotData; marks: FormKitSlotData; mark: FormKitSlotData; markLabel: FormKitSlotData; handles: FormKitSlotData; handleMin: FormKitSlotData; handleMax: FormKitSlotData; handleMinInner: FormKitSlotData; handleMaxInner: FormKitSlotData; tooltipMin: FormKitSlotData; tooltipMax: FormKitSlotData; suffix: FormKitSlotData; suffixIcon: FormKitSlotData; minValue: FormKitSlotData; maxValue: FormKitSlotData; linkedValues: FormKitSlotData; message: FormKitSlotData; messages: FormKitSlotData; } export declare interface FormKitTaglistSlots> { outer: FormKitSlotData; wrapper: FormKitSlotData; inner: FormKitSlotData; label: FormKitSlotData; prefix: FormKitSlotData; prefixIcon: FormKitSlotData; tag: FormKitSlotData; tagWrapper: FormKitSlotData; tagLoading: FormKitSlotData; suffix: FormKitSlotData; suffixIcon: FormKitSlotData; closeIcon: FormKitSlotData; selectIcon: FormKitSlotData; help: FormKitSlotData; messages: FormKitSlotData; message: FormKitSlotData; listboxButton: FormKitSlotData; dropdownWrapper: FormKitSlotData; listbox: FormKitSlotData; listitem: FormKitSlotData; loadMore: FormKitSlotData; emptyMessageInner: FormKitSlotData; selectedIcon: FormKitSlotData; option: FormKitSlotData; optionLoading: FormKitSlotData; removeSelection: FormKitSlotData; input: FormKitSlotData; tags: FormKitSlotData; tagLabel: FormKitSlotData; } /** * Togglebuttons slots. * * @public */ export declare interface FormKitTogglebuttonsSlots> { wrapper: FormKitSlotData>; options: FormKitSlotData>; option: FormKitSlotData & { option: FormKitOptionsItem; index: number; }>; singleToggle: FormKitSlotData>; multiToggle: FormKitSlotData & { option: FormKitOptionsItem; index: number; }>; inputInner: FormKitSlotData & { option: FormKitOptionsItem; index: number; }>; on: FormKitSlotData>; off: FormKitSlotData>; prefix: FormKitSlotData>; suffix: FormKitSlotData>; help: FormKitSlotData>; messages: FormKitSlotData>; message: FormKitSlotData & { message: FormKitMessage; }>; } /** * Toggle slots. * * @public */ export declare interface FormKitToggleSlots> { outer: FormKitSlotData>; wrapper: FormKitSlotData>; altLabel: FormKitSlotData>; inner: FormKitSlotData>; prefix: FormKitSlotData>; input: FormKitSlotData>; track: FormKitSlotData>; innerLabel: FormKitSlotData>; thumbWrapper: FormKitSlotData>; suffix: FormKitSlotData>; valueLabel: FormKitSlotData>; label: FormKitSlotData>; help: FormKitSlotData>; messages: FormKitSlotData>; message: FormKitSlotData & { message: FormKitMessage; }>; } /** * Behavioral group options. */ declare interface GroupOptions { repeat?: boolean; optional?: boolean; placeholder?: string; nextPart?: MaskPart; } declare type GroupPart = { type: 'group'; parts: MaskPart[]; } & GroupOptions; declare namespace inputs { export { dropdown, toggle, repeater, rating, autocomplete, datepicker, taglist, mask, transferlist, slider, colorpicker, togglebuttons } } export { inputs } declare interface LiteralPart { /** * Defines a literal (immutable) string. */ type: 'literal'; /** * The value of the immutable string. */ value: T; } /** * Input definition for a mask input. * @public */ export declare const mask: FormKitProInput; /** * Defines a specific part of a mask pattern. */ declare type MaskPart = ((BasePart & CharPart) | (BasePart & EnumPart)) | LiteralPart | GroupPart; declare interface Meta { value: string; type: 'placeholder' | 'literal' | 'char' | 'enum'; } export declare interface OptionLoader { (value: any, cachedItem: FormKitOptionsItem): FormKitOptionsItem | string | void | Promise | string | void>; } /** * Gets the allowed value type from the `options` prop. * * @public */ export declare type OptionsProValue = Options extends FormKitProOptionsProp ? Options extends (...args: any[]) => any ? ReturnType extends FormKitOptionsProp ? FormKitOptionsValue> : ReturnType extends Promise ? T extends FormKitOptionsProp ? FormKitOptionsValue : unknown : unknown : Options extends FormKitOptionsProp ? FormKitOptionsValue : unknown : unknown; /** * The available popover panels for the datepicker. * * @public */ export declare type Panels = 'year' | 'month' | 'day' | 'time'; /** * A map of the parts used */ export declare type PartMap = { [index: string]: T; }; /** * Input definition for a rating input. * @public */ export declare const rating: FormKitProInput; /** * Slot data for ratings * * @public */ declare interface RatingSlotData { min: number; max: number; offWidth: number; onWidth: number; onColor: number; offColor: number; handlers: FormKitFrameworkContext['handlers'] & { ratingHoverOver: () => void; ratingHoverOut: () => void; handleClick: () => void; }; } /** * Input definition for a repeater input. * @public */ export declare const repeater: FormKitProInput; declare interface RepeaterSlotData { items: Array; removeControl: boolean; insertControl: boolean; upControl: boolean; downControl: boolean; addLabel?: string; fns: FormKitFrameworkContext['fns'] & { createShift: (index: number, delta: 1 | -1) => () => void; createInsert: (index: number) => () => void; createAppend: () => () => void; createRemove: (index: number) => () => void; }; ui: FormKitFrameworkContext['ui'] & { moveUp: FormKitMessage; moveDown: FormKitMessage; add: FormKitMessage; remove: FormKitMessage; }; } /** * A factory that creates createSection functions that are curried with the * input code. */ declare type SectionFactory = (sectionName: string, schema: string | (() => FormKitSchemaNode), root?: IsRoot) => FormKitProSection; /** * Input definition for a slider input. * @public */ export declare const slider: FormKitProInput; /** * Conditional slots available to the slider when using a chart. * * @public */ export declare interface SliderChartSlots> { chart: FormKitSlotData; chartBar: FormKitSlotData; } export declare type SliderIntervals = { value: number; step: number; }[]; export declare type SliderScalingFunction = { forward: (value: number, min?: number, max?: number) => number; reverse: (value: number, min?: number, max?: number) => number; }; /** * Slot data for sliders. * * @public */ export declare interface SliderSlotData { chart?: Array<{ value: number; at: number; }>; inputAttrs?: Record; marks?: Bool | Array<{ at?: number; label?: string; }>; markLabel?: Bool; max: number | string; maxInputAttrs?: Record; min: number; minInputAttrs?: Record; prefix?: string; showInput?: Bool; snapToMarks?: Bool; suffix?: string; tooltip?: Bool; isMulti: boolean; fillStyles: Record; lastHandleInteraction?: 'min' | 'max'; handlers: FormKitFrameworkContext['handlers'] & { clickTrack: (e: MouseEvent) => void; focus: (e: FocusEvent) => void; clickHandle: (e: MouseEvent) => void; startDrag: (e: Event) => void; keydown: (e: KeyboardEvent) => void; maxNode: (node: FormKitNode) => void; minNode: (node: FormKitNode) => void; inputBlur: () => void; }; } /** * Input definition for a taglist input. * @public */ export declare const taglist: FormKitProInput; export declare interface TaglistSlotData { options: FormKitOptionsItem[]; debounce?: number | string; openOnClick?: Bool; filter?: (option: FormKitOptionsItem, search: string) => boolean; optionLoader?: OptionLoader; emptyMessage?: string; max?: number | string; closeOnSelect?: Bool; activeDescendant?: string; activeValue?: unknown; dropdownWrapperStyles: Record; expanded: boolean; popover?: boolean; page: number; search: string; hasNextPage: (data?: any) => void; fns: FormKitFrameworkContext['fns'] & { isSelected: (option: FormKitOptionsItem) => boolean; isActive: (option: FormKitOptionsItem) => boolean; }; handlers: FormKitFrameworkContext['handlers'] & { selectOption: (option: FormKitOptionsItem) => (e: MouseEvent) => void; loadMoreSelected: () => void; tagClick: (option: FormKitOptionsItem) => void; tagFocus: (option: FormKitOptionsItem) => void; tagBlur: () => void; blur: () => void; toggleListbox: () => void; removeSelection: (option: FormKitOptionsItem) => (e?: MouseEvent) => void; touchmove: (e: TouchEvent) => void; touchend: (e: TouchEvent) => void; click: (e: MouseEvent) => void; keydown: (e: KeyboardEvent) => void; focus: (e: FocusEvent) => void; loadMore: () => void; }; ui: FormKitFrameworkContext['ui'] & { isLoading: FormKitMessage; loadMore: FormKitMessage; }; } /** * Input definition for a toggle input. * @public */ export declare const toggle: FormKitProInput; /** * Input definition for a toggle group input. * @public */ export declare const togglebuttons: FormKitProInput; /** * Slot data for togglebuttons */ export declare interface TogglebuttonsSlotData> { onValue?: any; offValue?: any; offLabel?: string; onLabel?: string; options: FormKitOptionsItem[]; option?: FormKitOptionsItem; multiple?: Bool; enforced?: Bool; vertical?: Bool; fns: FormKitFrameworkContext['fns'] & { isChecked: (option: FormKitOptionsItem) => boolean; }; handlers: FormKitFrameworkContext['handlers'] & { toggleValue: (option: FormKitOptionsItem) => (e: MouseEvent) => void; }; } /** * Slot data for toggles */ export declare interface ToggleSlotData> { onValue: Props['onValue'] extends AllReals ? Props['onValue'] : true; offValue: Props['offValue'] extends AllReals ? Props['offValue'] : true; altLabelPosition?: Bool; offValueLabel?: string; onValueLabel?: string; valueLabelDisplay?: 'on' | 'off' | 'inner' | 'hidden'; valueLabelColorOff?: string; valueLabelColorOn?: string; thumbIcon?: string; thumbColorOn?: string; iconColorOff?: string; iconColorOn?: string; trackColorOff?: string; trackColorOn?: string; handlers: FormKitFrameworkContext['handlers'] & { toggles: (e: InputEvent) => void; }; } /** * Input definition for a transferlist input. * @public */ export declare const transferlist: FormKitProInput; /** * Data available to transfer lists. * * @public */ export declare interface TransferlistSlotData { options: FormKitOptionsItem[]; debounce?: string | number; filter?: (option: FormKitOptionsItem, search?: string) => boolean; optionLoader?: OptionLoader; sourceEmptyMessage?: string; targetEmptyMessage?: string; max?: string | number; clearOnSelect?: Bool; searchable?: Bool; sourceLabel?: string; targetLabel?: string; transferOnSelect?: boolean; placeholder?: string; selections: FormKitOptionsItem[]; activeValue?: unknown; activeDescendant?: string; sourceSelected?: boolean; targetOptions?: FormKitOptionsItem[]; sourceOptions?: FormKitOptionsItem[]; inputText: string; hasNextPage?: (dataForNextPage?: unknown) => void; page: number; targetLoading?: boolean; disabled?: boolean; showSourceEmptyMessage: boolean; showTargetEmptyMessage: boolean; fns: FormKitFrameworkContext['fns'] & { isSelected: (option: FormKitOptionsItem) => boolean; isActive: (option: FormKitOptionsItem) => boolean; optionValue: (option: FormKitOptionsItem) => unknown; getOptionCount: (targetOptions: boolean) => number; }; handlers: FormKitFrameworkContext['handlers'] & { clearSearch: () => void; selectOption: (option: FormKitOptionsItem, isSource: boolean) => void; transferForward: () => void; transferForwardAll: () => void; transferBackward: () => void; transferBackwardAll: () => void; onSearch: (e: InputEvent) => void; handleSourceSearchKeyDown: (e: KeyboardEvent) => void; sourceKeyDown: (e: KeyboardEvent) => void; targetKeyDown: (e: KeyboardEvent) => void; sourceFocused: () => void; targetFocused: () => void; onMouseEnter: () => void; onMouseLeave: () => void; }; } export declare interface TransferlistSlots> { outer: FormKitSlotData; fieldset: FormKitSlotData; legend: FormKitSlotData; help: FormKitSlotData; wrapper: FormKitSlotData; source: FormKitSlotData; sourceHeader: FormKitSlotData; sourceHeaderLabel: FormKitSlotData; sourceHeaderItemCount: FormKitSlotData; sourceControls: FormKitSlotData; sourceSearch: FormKitSlotData; sourceSearchInput: FormKitSlotData; sourceSearchClear: FormKitSlotData; closeIcon: FormKitSlotData; sourceListItems: FormKitSlotData; sourceEmptyMessage: FormKitSlotData; emptyMessageInner: FormKitSlotData; sourceListItem: FormKitSlotData; selectedIcon: FormKitSlotData; sourceOption: FormKitSlotData; sourceLoadMore: FormKitSlotData; loadMoreInner: FormKitSlotData; loaderIcon: FormKitSlotData; transferControls: FormKitSlotData; transferButtonForward: FormKitSlotData; transferButtonForwardAll: FormKitSlotData; transferButtonBackward: FormKitSlotData; transferButtonBackwardAll: FormKitSlotData; controlLabel: FormKitSlotData; fastForwardIcon: FormKitSlotData; moveRightIcon: FormKitSlotData; moveLeftIcon: FormKitSlotData; rewindIcon: FormKitSlotData; target: FormKitSlotData; targetHeader: FormKitSlotData; targetHeaderLabel: FormKitSlotData; targetHeaderItemCount: FormKitSlotData; targetListItems: FormKitSlotData; targetEmptyMessage: FormKitSlotData; targetListItem: FormKitSlotData; targetOption: FormKitSlotData; targetLoadMore: FormKitSlotData; messages: FormKitSlotData>; message: FormKitSlotData & { message: FormKitMessage; }>; } declare type Yes = 'true' | true | ''; /* */ declare module '@formkit/core' { export interface FormKitFrameworkContext { hasNextPage: (dataForNextPage?: unknown) => void page: number search: string } } /* */ /* */ import type { FormKitBaseSlots } from '@formkit/inputs' export interface OptionLoader { (value: any, cachedItem: FormKitOptionsItem): | FormKitOptionsItem | string | void | Promise | string | void> } declare module '@formkit/inputs' { interface FormKitConditionalProps { overlay?: undefined chart?: undefined } interface FormKitInputProps> { autocomplete: { type: 'autocomplete' value?: Props['multiple'] extends Yes ? OptionsProValue[] : OptionsProValue debounce?: number | string multiple?: Bool popover?: Bool options: FormKitProOptionsProp selectionAppearance?: 'option' | 'text-input' filter?: (option: FormKitOptionsItem, search: string) => boolean optionLoader?: OptionLoader // Behavioral props max?: Props['multiple'] extends Yes ? number | string : undefined openOnClick?: Bool openOnFocus?: Bool closeOnSelect?: Bool openOnRemove?: Bool alwaysLoadOnOpen?: Bool selectionRemovable?: Props['multiple'] extends Yes ? undefined : Bool loadOnCreated?: Bool clearSearchOnOpen?: Bool emptyMessage?: string // TODO: audit these props. } colorpicker: { type: 'colorpicker' value?: string options?: FormKitOptionsPropWithGroups inline?: Bool format?: 'hex' | 'rgba' | 'hsla' popover?: Bool valueFormat?: 'hex' | 'rgba' | 'hsla' panelControls?: Bool panelFormat?: Bool eyeDropper?: Bool showValue?: Bool closeOnSelect?: Bool allowPaste?: Bool } datepicker: { type: 'datepicker' value?: string | Date dateFormat?: string disabledDays?: (node: FormKitNode, date: Date) => boolean format?: string | FormatStyleObj maxDate?: Date | string popover?: Bool maxScan?: number minDate?: Date | string monthButtonFormat?: 'M' | 'MM' | 'MMM' | 'MMMM' monthFormat?: 'M' | 'MM' | 'MMM' | 'MMMM' overlay?: Bool pickerOnly?: Bool showMonths?: number sequence?: Array valueFormat?: string valueLocale?: string weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 weekDayFormat?: 'dddd' | 'ddd' | 'dd' yearFormat?: 'YY' | 'YYYY' prefixIcon?: string suffixIcon?: string } dropdown: { type: 'dropdown' value?: Props['multiple'] extends Yes ? OptionsProValue[] : OptionsProValue multiple?: Bool popover?: Bool options?: FormKitProOptionsProp selectionAppearance?: 'truncate' | 'tags' filter?: (option: FormKitOptionsItem, search: string) => boolean optionLoader?: OptionLoader emptyMessage?: string max?: Props['multiple'] extends Yes ? number | string : undefined openOnFocus?: Bool openOnRemove?: Bool closeOnSelect?: Bool clearSearchOnOpen?: Bool selectionRemovable?: Props['multiple'] extends Yes ? undefined : Bool loadOnCreated?: Bool alwaysLoadOnOpen?: Bool clearOnSelect?: Bool } rating: { value?: number | string type: 'rating' min?: string | number max?: string | number step?: string | number hoverHighlight?: Bool offColor?: string onColor?: string } repeater: { type: 'repeater' value?: Array> addLabel?: string addAttrs?: Record addButton?: Bool upControl?: Bool downControl?: Bool insertControl?: Bool removeControl?: Bool min?: number | string max?: number | string | null } mask: { type: 'mask' mask: string value?: string allowIncomplete?: Bool mode?: 'shift' | 'replace' | 'select' overlay?: Bool prefix?: string showMask?: Bool suffix?: string tokens?: PartMap unmaskValue?: Bool } slider: { type: 'slider' value?: string | string[] | number | number[] chart?: Array<{ value: number; at: number }> inputAttrs?: Record marks?: | Bool | Array<{ at?: number label?: string class?: string labelClass?: string }> markLabel?: Bool max?: number | string maxInputAttrs?: Record min?: string | number minInputAttrs?: Record prefix?: string showInput?: Bool snapToMarks?: Bool step?: number | string suffix?: string tooltip?: Bool tooltipFormat?: (value: number, handle: string) => string | undefined scalingFunction?: 'linear' | 'log' | SliderScalingFunction intervals?: SliderIntervals } taglist: { type: 'taglist' value?: any[] debounce?: number | string options?: FormKitProOptionsProp selectionAppearance?: 'truncate' | 'tags' popover?: Bool openOnClick?: Bool filter?: (option: FormKitOptionsItem, search: string) => boolean optionLoader?: OptionLoader emptyMessage?: string max?: number | string closeOnSelect?: Bool alwaysLoadOnOpen?: Bool loadOnCreated?: Bool clearSearchOnOpen?: Bool } toggle: { type: 'toggle' onValue?: any offValue?: any value?: | (Props['onValue'] extends AllReals ? Props['onValue'] : true) | (Props['offValue'] extends AllReals ? Props['offValue'] : false) altLabelPosition?: Bool offValueLabel?: string onValueLabel?: string valueLabelDisplay?: 'on' | 'off' | 'inner' | 'hidden' valueLabelColorOff?: string valueLabelColorOn?: string thumbIcon?: string thumbColorOn?: string iconColorOff?: string iconColorOn?: string trackColorOff?: string trackColorOn?: string } togglebuttons: { type: 'togglebuttons' onValue?: any offValue?: any value?: | (Props['onValue'] extends AllReals ? Props['onValue'] : true) | (Props['offValue'] extends AllReals ? Props['offValue'] : false) options?: FormKitProOptionsProp label?: string enforced?: Bool multiple?: Bool vertical?: Bool disabled?: Bool prefixIcon?: string suffixIcon?: string } transferlist: { type: 'transferlist' value?: OptionsProValue[] options: FormKitProOptionsProp debounce?: number | string filter?: (option: FormKitOptionsItem, search: string) => boolean optionLoader?: OptionLoader sourceEmptyMessage?: string targetEmptyMessage?: string max?: string | number clearOnSelect?: Bool searchable?: Bool sourceLabel?: string targetLabel?: string transferOnSelect?: Bool } } interface FormKitInputSlots> { autocomplete: FormKitAutocompleteSlots colorpicker: FormKitColorpickerSlots datepicker: FormKitDatePickerSlots & FormKitOverlaySlots dropdown: FormKitDropdownSlots mask: FormKitBaseSlots & FormKitOverlaySlots rating: FormKitBaseSlots & FormKitRatingSlots repeater: FormKitRepeaterSlots slider: FormKitSliderSlots & (Props['chart'] extends Array<{ at: number; value: number }> ? SliderChartSlots : {}) taglist: FormKitTaglistSlots toggle: FormKitToggleSlots togglebuttons: FormKitTogglebuttonsSlots transferlist: TransferlistSlots } } /* */ export { }