flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/components/spinner.md

@@ -0,0 +1,117 @@
+---
+layout: componentLayout
+title: Svelte Spinner - Flowbite
+breadcrumb_title: Svelte Spinner (Loader)
+component_title: Spinner
+dir: Components
+description: Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG
+thumnailSize: w-48
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  
+  const components = 'Spinner'
+</script>
+
+The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+```
+
+## Default spinner
+
+Use the following SVG element to show a loading animation:
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner />
+```
+
+## Colors
+
+You can change the colors of the spinner element using the `color` prop.
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner />
+<Spinner color="gray" />
+<Spinner color="green" />
+<Spinner color="red" />
+<Spinner color="yellow" />
+<Spinner color="pink" />
+<Spinner color="purple" />
+```
+
+## Sizes
+
+Change the size of the spinner component using the `size` prop.
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner size={4} />
+<Spinner size={6} />
+<Spinner size={8} />
+```
+
+## Alignment
+
+Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<div class="text-left"><Spinner /></div><div class="text-center"><Spinner /></div><div class="text-right"><Spinner /></div>
+```
+
+## Buttons
+
+The spinner component can also be used inside elements such as buttons when submitting form data:
+
+```svelte example
+<script>
+  import { Spinner, Button } from 'flowbite-svelte';
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+  <Button>
+    <Spinner class="mr-3" size="4" color="white" />
+    Loading ...
+  </Button>
+  <Button outline color="dark">
+    <Spinner class="mr-3" size="4" />
+    Loading ...
+  </Button>
+</div>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Spinner styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Spinner (Loader)](https://flowbite.com/docs/components/spinner/)

package/src/routes/docs/components/tab.md

@@ -0,0 +1,341 @@
+---
+layout: componentLayout
+title: Svelte Tabs - Flowbite
+breadcrumb_title: Svelte Tabs
+component_title: Tabs
+dir: Components
+description: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
+thumnailSize: w-64
+---
+
+<script lang="ts">
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, P, A } from '$lib'
+
+  const components = 'TabItem, Tabs'
+</script>
+
+The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+```
+
+## Default tabs
+
+Use the following default tabs component example to show a dynamic content in your webpage.
+
+<p class="my-2"/>
+
+If your tab title is a simple string set the `title` property on `TabItem`, otherwise when more control is needed overwrite the `title` slot.
+
+<p class="my-2"/>
+
+The last tab in that example shows not only how to show a disabled tab, but how to use the `title` slot entry as well.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs>
+  <TabItem open title="Profile">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Profile:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Settings">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Users">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Users:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Dashboard">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem disabled>
+    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Disabled:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Tabs with underline
+
+You can control the style of tabs component by settings the `activeClasses` and `inactiveClasses` on the `TabItem` elements. See the `Custom style` section below for more details.
+
+<p class="my-2"/>
+
+However tabs component comes with several pre-defined styles that are accessible to you by setting the `style` property. This will set the `activeClasses` and `inactiveClasses` properties for you.
+
+<p class="my-2"/>
+
+Use the `style="underline"` to achieve this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="underline">
+  <TabItem open title="Profile">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Profile:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Dashboard">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Settings">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem title="Users">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Users:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem disabled>
+    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Disabled:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Tabs with icons
+
+This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs. Use icon components for a simple syntax. See <a href="/icons">Icons</a> for more details.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+  import { UserCircleSolid, GridSolid, AdjustmentsVerticalSolid, ClipboardSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Tabs style="underline">
+  <TabItem open>
+    <div slot="title" class="flex items-center gap-2">
+      <UserCircleSolid size="sm" />
+      Profile
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Profile:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <GridSolid size="sm" />
+      Dashboard
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <AdjustmentsVerticalSolid size="sm" />
+      Settings
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <ClipboardSolid size="sm" />
+      Contacts
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Contacts:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Pills tabs
+
+If you want to use pills as a style for the tabs component use `style="pill"`.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="pill">
+  <TabItem open>
+    <span slot="title">Profile</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Profile:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Users:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Full width tabs
+
+If you want to show the tabs on the full width relative to the parent element use `tabStype="full"` prop.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="full" defaultClass="flex rounded-lg divide-x divide-gray-200 shadow dark:divide-gray-700">
+  <TabItem class="w-full" open>
+    <span slot="title">Profile</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Profile:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Users:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Components in tab contents
+
+You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1:
+
+```svelte example class="h-auto"
+<script>
+  import { Tabs, TabItem, Timeline, TimelineItem, Button } from 'flowbite-svelte';
+  import { ArrowRightOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Tabs>
+  <TabItem open>
+    <span slot="title">Profile</span>
+    <Timeline>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
+        <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
+        <Button color="alternative">
+          Learn more
+          <ArrowRightOutline class="ml-2 w-3 h-3" />
+        </Button>
+      </TimelineItem>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
+        <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
+      </TimelineItem>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
+        <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
+      </TimelineItem>
+    </Timeline>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Dashboard:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Settings:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      <b>Users:</b>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+  </TabItem>
+</Tabs>
+```
+
+## Custom style
+
+To get a custom look and feel for the `Tabs` component, do not set `style` prop, but set `activeClasses` and `inactiveClasses` properties either on the `Tabs` component or on the individual `TabItem` components.
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### TabItem styling
+
+- Use the `class` prop to overwrite the `li` tag class.
+
+### Tabs styling
+
+- Use the `class` prop to overwrite `defaultClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Tabs](https://flowbite.com/docs/components/tabs/)