@vonagam/svelte-vest-flowbite v0.1.0
@vonagam/svelte-vest-flowbite
Provides UI components in style of Flowbite for @vonagam/svelte-vest.
Installation
npm install --save-dev @vonagam/svelte-vest-flowbite
yarn add --dev @vonagam/svelte-vest-flowbite
pnpm add --save-dev @vonagam/svelte-vest-flowbiteUsage
Usage example can be found in examples/svelte-vest-flowbite.
Api
All exported components have two variants - controlled and uncontrolled. Uncontrolled variant (like Checkbox) implements an UI component in Flowbite style. Controlled variant (like FieldCheckbox) is a wrapper around
uncontrolled version with some props being set based on a field state.
All controlled variants have an additional required prop field of type string | FieldApi | FieldWrap
to specify which field the component works with.
Components:
Checkbox
Checkbox represents a single checkbox input element (without a label).
// In addition to all input element props.
type Props = {
// Values of checked checkboxes in a group. Default: an empty array.
group?: (string | number)[],
// Value corresponding to this checkbox. Default: "on".
value?: string | number,
// Checked status of checkbox. Default: undefined and then becomes boolean based on `group` and `value`.
checked?: boolean | undefined,
// Adds "sr-only peer" class if true. Default: false.
custom?: boolean,
// Color. Default: "base".
color?: "base" | "green" | "red",
}FieldCheckbox variant controls checked, color and disabled.
Input
Input represents a single input element.
// In addition to all input element props.
type Props = {
// A type prop for an input element. Default: "text".
type?: string,
// Value. Default: undefined.
value?: string | undefined,
// Size. Default: "md".
size?: "sm" | "md" | "lg",
// Color. Default: "base".
color?: "base" | "green" | "red",
}FieldInput variant controls value, color and disabled.
Message
Message represents a message (error/warning/details) for an input.
// In addition to all element props.
type Props = {
// Element tag to use. Default: "p".
tag?: string,
// Size. Default: "md".
size?: "sm" | "md" | "lg",
// Color. Default: "base".
color?: "base" | "green" | "red",
// Adds "opacity-50" if true. Default: false.
disabled?: boolean,
}FieldMessage variant controls color and disabled.
Name
Name represents a name for an input, usually inside a label.
// In addition to all element props.
type Props = {
// Element tag to use. Default: "span".
tag?: string,
// Size. Default: "md".
size?: "sm" | "md" | "lg",
// Color. Default: "base".
color?: "base" | "green" | "red",
// Adds "opacity-50" if true. Default: false.
disabled?: boolean,
}FieldName variant controls color and disabled.
Radio
Radio represents a single radio input element (without a label).
// In addition to all input element props.
type Props = {
// Value of a checked radio in a group. Default: "".
group?: string | number,
// Value corresponding to this radio. Default: "".
value?: string | number,
// Adds "sr-only peer" class if true. Default: false.
custom?: boolean,
// Color. Default: "base".
color?: "base" | "green" | "red",
}FieldRadio variant controls group, color and disabled.
Select
Select represents a select element.
// In addition to all select element props.
type Props = {
// Options. If an empty array then default slot can be used for rendering custom options. Default: [].
items?: {value: any, name: any}[],
// Adds `<option disabled selected value="">{placeholder}</option>` if not undefined. Default: undefined.
placeholder?: string | undefined,
// Selected value. Default: undefined.
value?: string | undefined,
// Size. Default: "md".
size?: "sm" | "md" | "lg",
// Color. Default: "base".
color?: "base" | "green" | "red",
}FieldSelect variant controls value, color and disabled.
Textarea
Textarea represents a textarea element.
// In addition to all textarea element props.
type Props = {
// Value. Default: undefined.
value?: string | undefined,
// Size. Default: "md".
size?: "sm" | "md" | "lg",
// Color. Default: "base".
color?: "base" | "green" | "red",
}FieldTextarea variant controls value, color and disabled.