flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/forms/select.md

@@ -0,0 +1,280 @@
+---
+layout: componentLayout
+title: Svelte Select - Flowbite
+breadcrumb_title: Svelte Select
+component_title: Select
+dir: Forms
+description: Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
+---
+
+<script>
+import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+import { Badge, A } from '$lib'
+const components = 'Select'
+</script>
+
+The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Select } from 'flowbite-svelte';
+</script>
+```
+
+## Select input example
+
+Get started with the default example of a select input component to get a single option selection.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte';
+  let selected;
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+</script>
+
+<Label>
+  Select an option
+  <Select class="mt-2" items={countries} bind:value={selected} />
+</Label>
+```
+
+## Disabled state
+
+Apply the disable state to the select component to disallow the selection of new options.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte';
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+</script>
+
+<Label for="select-disabled" class="mb-2">Disabled select</Label>
+<Select id="select-disabled" disabled items={countries} placeholder="You can't select anything..." />
+```
+
+## Underline select
+
+Use the underline style for the select component as an alternative appearance.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte';
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+</script>
+
+<Label for="select-underline" class="sr-only">Underline select</Label>
+<Select id="select-underline" underline class="mt-2" items={countries} />
+```
+
+## Select with dropdown
+
+Use this example if you want to create a multi-level dropdown and select component combination.
+
+```svelte example class="h-64"
+<script>
+  import { Select, Dropdown, DropdownItem } from 'flowbite-svelte';
+  import { ChevronDownSolid } from 'flowbite-svelte-icons';
+  import Usa from '../../utils/icons/Usa.svelte';
+  import Germany from '../../utils/icons/Germany.svelte';
+  import Italy from '../../utils/icons/Italy.svelte';
+  import China from '../../utils/icons/China.svelte';
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+  let states = [
+    { value: 'CA', name: 'California' },
+    { value: 'TX', name: 'Texas' },
+    { value: 'WH', name: 'Washinghton' },
+    { value: 'FL', name: 'Florida' },
+    { value: 'VG', name: 'Virginia' },
+    { value: 'GE', name: 'Georgia' },
+    { value: 'MI', name: 'Michigan' }
+  ];
+</script>
+
+<div class="flex">
+  <button id="states-button" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
+    <Usa />
+    USA
+    <ChevronDownSolid class="w-3 h-3 ml-2" />
+  </button>
+  <Dropdown triggeredBy="#states-button">
+    <DropdownItem class="flex items-center">
+      <Usa />
+      United States
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <Germany />
+      Germany
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <Italy />
+      Italy
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <China />
+      China
+    </DropdownItem>
+  </Dropdown>
+  <Select items={states} placeholder="Choose the state" class="!rounded-l-none" />
+</div>
+```
+
+## Sizes
+
+Get started with the small, default, and large sizes for the select component from the example below.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte';
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+</script>
+
+<Label for="select-sm" class="mb-2">Small select</Label>
+<Select id="select-sm" size="sm" items={countries} class="mb-6" />
+<Label for="select-md" class="mb-2">Default select</Label>
+<Select id="select-md" size="md" items={countries} class="mb-6" />
+<Label for="select-lg" class="mb-2">Large select</Label>
+<Select id="select-lg" size="lg" items={countries} class="mb-6" />
+<p class="my-6" />
+<Label for="select-sm" class="sr-only">Underline small select</Label>
+<Select id="select-sm" underline size="sm" items={countries} class="mb-6" />
+<Label for="select-md" class="sr-only">Underline default select</Label>
+<Select id="select-md" underline size="md" items={countries} class="mb-6" />
+<Label for="select-lg" class="sr-only">Underline large select</Label>
+<Select id="select-lg" underline size="lg" items={countries} class="mb-6" />
+```
+
+## Custom options
+
+If you want custom options, put them directly inside the component and leave the `items` prop unset. Furthermore, if the default placeholder is not what you want, set the `placeholder` prop to `""`.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte';
+  let selected;
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' }
+  ];
+</script>
+
+<Label for="countries">Select an option</Label>
+<Select id="countries" class="mt-2" bind:value={selected} placeholder="">
+  <option selected value="all">All</option>
+
+  {#each countries as { value, name }}
+    <option {value}>{name}</option>
+  {/each}
+</Select>
+```
+
+## MultiSelect
+
+```svelte example hideOutput
+<script>
+  import { MultiSelect } from 'flowbite-svelte';
+</script>
+```
+
+### Basic example
+
+Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
+
+```svelte example class="h-80"
+<script>
+  import { MultiSelect } from 'flowbite-svelte';
+
+  let selected = [];
+  let countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+    { value: 'jp', name: 'Japan' },
+    { value: 'en', name: 'England' }
+  ];
+</script>
+
+<MultiSelect items={countries} bind:value={selected} size="lg" />
+```
+
+### Pre-select values
+
+```svelte example class="h-96"
+<script>
+  import { MultiSelect, Badge } from 'flowbite-svelte';
+
+  let countries = [
+    { value: 'us', name: 'United States', color: 'indigo' },
+    { value: 'ca', name: 'Canada', color: 'green' },
+    { value: 'fr', name: 'France', color: 'blue' },
+    { value: 'jp', name: 'Japan', color: 'red' },
+    { value: 'en', name: 'England', color: 'yellow' }
+  ];
+  let selected = ['us', 'fr'];
+</script>
+
+<MultiSelect items={countries} bind:value={selected} />
+```
+
+### Customization
+
+To customize the look and feel use the `slot` to insert inner [`Badge`](/docs/components/badge) component.
+
+Remember to connect the `clear` slot's prop to trigger option removal.
+
+```svelte example class="h-96"
+<script>
+  import { MultiSelect, Badge } from 'flowbite-svelte';
+
+  let selected = [];
+  let countries = [
+    { value: 'us', name: 'United States', color: 'indigo' },
+    { value: 'ca', name: 'Canada', color: 'green' },
+    { value: 'fr', name: 'France', color: 'blue' },
+    { value: 'jp', name: 'Japan', color: 'red' },
+    { value: 'en', name: 'England', color: 'yellow' }
+  ];
+</script>
+
+<MultiSelect items={countries} bind:value={selected} let:item let:clear>
+  <Badge color={item.color} dismissable params={{ duration: 100 }} on:close={clear}>
+    {item.name}
+  </Badge>
+</MultiSelect>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Select styling
+
+- Use the `class` prop to overwrite the select tag.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Select](https://flowbite.com/docs/forms/select/)

package/src/routes/docs/forms/textarea.md

@@ -0,0 +1,142 @@
+---
+layout: componentLayout
+title: Svelte Textarea - Flowbite
+breadcrumb_title: Svelte Textarea
+component_title: Textarea
+dir: Forms
+description: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, A } from '$lib'
+
+  const components = 'Textarea'
+</script>
+
+The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Textarea } from 'flowbite-svelte';
+</script>
+```
+
+## Textarea example
+
+Get started with the default example of a textarea component below.
+
+```svelte example
+<script>
+  import { Textarea, Label } from 'flowbite-svelte';
+</script>
+
+<Label for="textarea-id" class="mb-2">Your message</Label>
+<Textarea id="textarea-id" placeholder="Your message" rows="4" name="message" />
+```
+
+## WYSIWYG Editor
+
+If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.
+
+```svelte example
+<script>
+  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
+  import { PaperClipOutline, MapPinAltSolid, ImageOutline, CodeOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
+</script>
+
+<form>
+  <label for="editor" class="sr-only">Publish post</label>
+  <Textarea id="editor" rows="8" class="mb-4" placeholder="Write a comment">
+    <Toolbar slot="header" embedded>
+      <ToolbarGroup>
+        <ToolbarButton name="Attach file"><PaperClipOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
+        <ToolbarButton name="Embed map"><MapPinAltSolid class="w-5 h-5" /></ToolbarButton>
+        <ToolbarButton name="Upload image"><ImageOutline class="w-5 h-5" /></ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarGroup>
+        <ToolbarButton name="Format code"><CodeOutline class="w-5 h-5" /></ToolbarButton>
+        <ToolbarButton name="Add emoji"><FaceGrinOutline class="w-5 h-5" /></ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarButton name="send" slot="end"><PapperPlaneOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
+    </Toolbar>
+  </Textarea>
+  <Button>Publish post</Button>
+</form>
+```
+
+## Comment box
+
+Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
+
+```svelte example class="space-y-4"
+<script>
+  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
+  import { PaperClipOutline, MapPinAltSolid, ImageOutline } from 'flowbite-svelte-icons';
+</script>
+
+<form>
+  <Textarea class="mb-4" placeholder="Write a comment">
+    <div slot="footer" class="flex items-center justify-between">
+      <Button type="submit">Post comment</Button>
+      <Toolbar embedded>
+        <ToolbarButton name="Attach file"><PaperClipOutline class="w-6 h-6" /></ToolbarButton>
+        <ToolbarButton name="Set location"><MapPinAltSolid class="w-6 h-6" /></ToolbarButton>
+        <ToolbarButton name="Upload image"><ImageOutline class="w-6 h-6" /></ToolbarButton>
+      </Toolbar>
+    </div>
+  </Textarea>
+</form>
+<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
+  Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline"> Community Guidelines </a>
+  .
+</p>
+```
+
+## Chatroom input
+
+If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.
+
+```svelte example class="space-y-4"
+<script>
+  import { Textarea, Alert, ToolbarButton } from 'flowbite-svelte';
+  import { ImageOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
+</script>
+
+<form>
+  <label for="chat" class="sr-only">Your message</label>
+  <Alert color="dark" class="px-3 py-2">
+    <svelte:fragment slot="icon">
+      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
+        <ImageOutline class="w-5 h-5" />
+        <span class="sr-only">Upload image</span>
+      </ToolbarButton>
+      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
+        <FaceGrinOutline class="w-5 h-5" />
+        <span class="sr-only">Add emoji</span>
+      </ToolbarButton>
+      <Textarea id="chat" class="mx-4" rows="1" placeholder="Your message..." />
+      <ToolbarButton type="submit" color="blue" class="rounded-full text-primary-600 dark:text-primary-500">
+        <PapperPlaneOutline class="w-5 h-5 rotate-45" />
+        <span class="sr-only">Send message</span>
+      </ToolbarButton>
+    </svelte:fragment>
+  </Alert>
+</form>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Textarea styling
+
+Use the `class` prop to overwrite the `textarea` tag.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Textarea](https://flowbite.com/docs/forms/textarea/)

package/src/routes/docs/forms/toggle.md

@@ -0,0 +1,86 @@
+---
+layout: componentLayout
+title: Svelte Toggle (Switch) - Flowbite
+breadcrumb_title: Svelte Toggle (Switch)
+component_title: Toggle
+dir: Forms
+description: Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
+thumbnailSize: w-72
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { onMount } from 'svelte';
+  import { Toggle, Badge, A } from '$lib'
+
+  const components = 'Toggle'
+</script>
+
+The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Toggle } from 'flowbite-svelte';
+</script>
+```
+
+## Toggle examples
+
+Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
+
+```svelte example class="flex flex-col gap-2" hideScript
+<script>
+  import { Toggle } from 'flowbite-svelte';
+</script>
+
+<Toggle>Toggle me</Toggle>
+<Toggle checked={true}>Checked toggle</Toggle>
+<Toggle disabled>Disabled toggle</Toggle>
+<Toggle checked disabled>Disabled checked</Toggle>
+```
+
+## Colors
+
+```svelte example class="flex justify-between" hideScript
+<script>
+  import { Toggle } from 'flowbite-svelte';
+</script>
+
+<Toggle color="red" checked>Red</Toggle>
+<Toggle color="green" checked>Green</Toggle>
+<Toggle color="purple" checked>Purple</Toggle>
+<Toggle color="yellow" checked>Yellow</Toggle>
+<Toggle color="teal" checked>Teal</Toggle>
+<Toggle color="orange" checked>Orange</Toggle>
+```
+
+## Sizes
+
+```svelte example class="flex flex-col gap-2"
+<script>
+  import { Toggle } from 'flowbite-svelte';
+  const customSize = 'w-16 h-10 after:top-1 after:left-[4px]  after:h-8 after:w-8';
+</script>
+
+<Toggle size="small">Small toggle</Toggle>
+<Toggle size="default" checked>Default toggle</Toggle>
+<Toggle size="large" checked>Large toggle</Toggle>
+<Toggle size="custom" {customSize}>Custom toggle</Toggle>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Toggle styling
+
+- Use the `class` prop to overwrite the `Checkbox` component.
+- Use the 'classDiv`prop to overwrite the`divClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Switch (Toggle)](https://flowbite.com/docs/forms/toggle/)

package/src/routes/docs/pages/[slug]/+page.js

@@ -0,0 +1,13 @@
+// src/routes/components/[slug]/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const post = await import(`../${params.slug}.md`);
+  const { title, dir } = post.metadata;
+  const content = post.default;
+
+  return {
+    content,
+    title,
+    dir
+  };
+}

package/src/routes/docs/pages/[slug]/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  export let data: PageData;
+</script>
+
+<svelte:component this={data.content} />