svelte-ux
Version:
A large collection of Svelte components, actions, stores and utils to simplify creating highly interactive and visual applications. Built using Tailwind with extensibility and customization in mind.
115 lines (114 loc) • 4.58 kB
TypeScript
import { SvelteComponentTyped } from "svelte";
import { type ComponentProps } from 'svelte';
import type { Placement } from '@floating-ui/dom';
import { type ScrollIntoViewOptions } from '@layerstack/svelte-actions';
import TextField from './TextField.svelte';
import type { IconInput } from '../utils/icons.js';
import type { MenuOption } from '../types/index.js';
declare class __sveltets_Render<TValue> {
props(): {
[x: string]: any;
options?: MenuOption<TValue>[] | undefined;
name?: string | undefined;
label?: string | undefined;
placeholder?: string | undefined;
labelPlacement?: import("../types/index.js").LabelPlacement | undefined;
loading?: boolean | undefined;
required?: boolean | undefined;
disabled?: boolean | undefined;
readonly?: boolean | undefined;
icon?: IconInput;
inlineOptions?: boolean | undefined;
toggleIcon?: IconInput;
closeIcon?: IconInput;
activeOptionIcon?: boolean | undefined;
clearable?: boolean | undefined;
base?: boolean | undefined;
rounded?: boolean | undefined;
dense?: boolean | undefined;
clearSearchOnOpen?: boolean | undefined;
autofocus?: boolean | {
restoreFocus?: boolean;
delay?: number;
disabled?: boolean;
} | undefined;
fieldActions?: import("@layerstack/svelte-actions").Actions<HTMLInputElement | HTMLTextAreaElement> | undefined;
stepper?: boolean | undefined;
scrollIntoView?: Partial<ScrollIntoViewOptions> | undefined;
classes?: {
root?: string;
field?: string | ComponentProps<TextField>["classes"];
options?: string;
option?: string;
selected?: string;
group?: string;
empty?: string;
} | undefined;
placement?: Placement | undefined;
autoPlacement?: boolean | undefined;
matchWidth?: boolean | undefined;
resize?: boolean | undefined;
disableTransition?: boolean | undefined;
menuProps?: {
[x: string]: any;
open?: boolean | undefined;
offset?: number | undefined;
matchWidth?: boolean | undefined;
placement?: Placement | undefined;
autoPlacement?: boolean | undefined;
resize?: boolean | "width" | "height" | undefined;
disableTransition?: boolean | undefined;
transition?: ((node: HTMLElement, params: import("../types/index.js").TransitionParams) => import("svelte/transition").TransitionConfig) | undefined | undefined;
transitionParams?: import("../types/index.js").TransitionParams | undefined;
explicitClose?: boolean | undefined;
moveFocus?: boolean | undefined;
classes?: {
root?: string;
menu?: string;
} | undefined;
menuItemsEl?: HTMLMenuElement | undefined;
} | undefined;
value?: TValue | null | undefined;
selected?: MenuOption<TValue> | null | undefined;
search?: ((text: string, options: MenuOption<TValue>[]) => Promise<MenuOption<TValue>[]>) | undefined;
open?: boolean | undefined;
};
events(): {
change: CustomEvent<{
value: TValue | null | undefined;
option: MenuOption<TValue> | null | undefined;
}>;
inputChange: CustomEvent<string>;
} & {
[evt: string]: CustomEvent<any>;
};
slots(): {
prepend: {};
append: {};
beforeOptions: {
hide: (reason?: string) => void;
};
option: {
option: any;
index: any;
selected: MenuOption<TValue> | null | undefined;
value: TValue | null | undefined;
highlightIndex: number;
};
empty: {
loading: boolean;
};
afterOptions: {
hide: (reason?: string) => void;
};
actions: {
hide: (reason?: string) => void;
};
};
}
export type SelectFieldProps<TValue> = ReturnType<__sveltets_Render<TValue>['props']>;
export type SelectFieldEvents<TValue> = ReturnType<__sveltets_Render<TValue>['events']>;
export type SelectFieldSlots<TValue> = ReturnType<__sveltets_Render<TValue>['slots']>;
export default class SelectField<TValue> extends SvelteComponentTyped<SelectFieldProps<TValue>, SelectFieldEvents<TValue>, SelectFieldSlots<TValue>> {
}
export {};