flowbite-svelte 0.44.11 → 0.44.12

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

@@ -1,117 +0,0 @@
----
-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

@@ -1,341 +0,0 @@
----
-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/)