@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-flowbite

Usage

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
• Input
• Message
• Name
• Radio
• Select
• Textarea

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.

Links

• Flowbite
• Flowbite Svelte
• Vest
• Svelte