flowbite-svelte 0.44.8 → 0.44.10

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

@@ -0,0 +1,156 @@
+---
+layout: componentLayout
+title: Svelte Tooltip - Flowbite
+breadcrumb_title: Svelte Tooltip
+component_title: Tooltip
+dir: Components
+description: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
+thumnailSize: w-24
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'Tooltip, Frame'
+</script>
+
+Flowbite-Svelte allows you to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Tooltip } from 'flowbite-svelte';
+</script>
+```
+
+## Default tooltip example
+
+To get started with using tooltips all you need to do is set `triggeredBy` attribute of the tooltip component to any CSS query targeting trigger element(s). In the following example you can see the tooltip that will be trigger by the `tooltip-default` element to be shown when hovered or focused.
+
+```svelte example class="flex items-end h-32"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+</script>
+
+<Button>Default tooltip</Button>
+<Tooltip>Tooltip content</Tooltip>
+```
+
+## Tooltip types
+
+You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `type={light|dark}` data attribute.
+
+```svelte example class="flex items-end gap-2 h-32"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+  let type = 'dark';
+</script>
+
+<Button id="type-light">Light tooltip</Button>
+<Button id="type-auto">Default tooltip</Button>
+<Button id="type-dark">Dark tooltip</Button>
+<Tooltip {type} triggeredBy="[id^='type-']" on:show={(ev) => (type = ev.target.id.split('-')[1])}>Tooltip content</Tooltip>
+```
+
+## Placement
+
+The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `placement={top|right|bottom|left}` attribute.
+
+**Note!** This examples shows you also how to share one tooltip between multiple triggering elements using advanced CSS query.
+
+```svelte example class="flex items-center gap-2 h-36"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+  let placement = 'left';
+</script>
+
+<Button id="placement-left">Tooltip left</Button>
+<Button id="placement-top">Tooltip top</Button>
+<Button id="placement-bottom">Tooltip bottom</Button>
+<Button id="placement-right">Tooltip right</Button>
+<Tooltip triggeredBy="[id^='placement-']" {placement} on:show={(e) => ([, placement] = e.target.id.split('-'))}>
+  Tooltip content - {placement}
+</Tooltip>
+```
+
+## Triggering
+
+```svelte example class="flex items-end gap-2 h-32"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+</script>
+
+<Button id="hover">Tooltip hover</Button>
+<Button id="click">Tooltip click</Button>
+<Tooltip triggeredBy="#hover">Hover tooltip content</Tooltip>
+<Tooltip trigger="click" triggeredBy="#click">Click tooltip content</Tooltip>
+```
+
+## Disable arrow
+
+```svelte example class="flex items-end gap-2 h-32"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+</script>
+
+<Button id="disable-arrow">Default tooltip</Button>
+<Tooltip arrow={false} triggeredBy="#disable-arrow">Tooltip content</Tooltip>
+```
+
+## External reference
+
+If you need the tooltip to be attached to the other element then the tiggering one you can pass a CSS query to `reference` prop.
+
+```svelte example class="flex gap-4 flex-col justify-center items-center h-72"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+  let placement = '';
+</script>
+
+<div id="ext-ref" class="p-2 rounded-lg border border-gray-200 dark:border-gray-600">External reference</div>
+<div class="space-x-4">
+  <Button id="ref-left" on:mouseenter={() => (placement = 'left')}>Left</Button>
+  <Button id="ref-top" on:mouseenter={() => (placement = 'top')}>Top</Button>
+  <Button id="ref-right" on:mouseenter={() => (placement = 'right')}>Right</Button>
+</div>
+<Tooltip reference="#ext-ref" triggeredBy="[id^='ref-']" {placement} class="w-64 text-sm font-light">And here's some amazing content. It's very engaging. Right?</Tooltip>
+```
+
+## Custom type
+
+Various color palettes can be set for a tooltip by using the `color` property from the underlying `Frame` component. (Setting `color` prop sets the `type` to `custom` implicitly.)
+
+When you want to add a fully custom styles, use `type="custom"`, `defaultClass`, and `class` to modify the tooltip styling.
+
+```svelte example class="flex items-center h-64 gap-2"
+<script>
+  import { Tooltip, Button } from 'flowbite-svelte';
+</script>
+
+<Button>Green tooltip</Button>
+<Tooltip color="green">Tooltip content</Tooltip>
+
+<Button>Yellow tooltip</Button>
+<Tooltip color="yellow">Tooltip content</Tooltip>
+
+<Button>Custom type</Button>
+<Tooltip placement="right" type="custom" defaultClass="" class="p-4 text-lg font-medium bg-purple-500 text-gray-100" arrow={false}>Tooltip content</Tooltip>
+```
+
+## Component data
+
+### Tooltip
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Frame styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Tooltip](https://flowbite.com/docs/components/tooltips/)

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

@@ -0,0 +1,158 @@
+---
+layout: componentLayout
+title: Svelte Typography - Flowbite
+breadcrumb_title: Svelte Typography
+component_title: Typography
+dir: Components
+description: Use the typography and the utility classes from Tailwind CSS to style text with Flowbite
+thumnailSize: w-36
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { A } from '$lib';
+</script>
+
+The typography for FlowBite is completely based on the utility classes from Tailwind CSS.
+
+We have listed some of the commonly used typography classes that we use throughout the FlowBite UI, however, you can also check out all of the utility classes on the <a class="link" href="https://tailwindcss.com/docs/font-family">Tailwind CSS documentation</a> directly.
+
+## Font Size
+
+Use the following text-size utility classes from Tailwind to set the font size for any text element.
+
+```svelte example
+<p class="text-xs dark:text-white">Flowbite</p>
+
+<p class="text-sm dark:text-white">FlowBite</p>
+
+<p class="text-base dark:text-white">FlowBite</p>
+
+<p class="text-lg dark:text-white">FlowBite</p>
+
+<p class="text-xl dark:text-white">FlowBite</p>
+
+<p class="text-2xl dark:text-white">FlowBite</p>
+
+<p class="text-3xl dark:text-white">FlowBite</p>
+
+<p class="text-4xl dark:text-white">FlowBite</p>
+
+<p class="text-5xl dark:text-white">FlowBite</p>
+
+<p class="text-6xl dark:text-white">FlowBite</p>
+
+<p class="text-7xl dark:text-white">FlowBite</p>
+
+<p class="text-8xl dark:text-white">FlowBite</p>
+
+<p class="text-9xl dark:text-white">FlowBite</p>
+```
+
+## Font Weight
+
+Use the following font-weight utility classes to set the font weight for any text element.
+
+```svelte example
+<p class="font-thin dark:text-white">FlowBite</p>
+
+<p class="font-extralight dark:text-white">FlowBite</p>
+
+<p class="font-light dark:text-white">FlowBite</p>
+
+<p class="font-normal dark:text-white">FlowBite</p>
+
+<p class="font-medium dark:text-white">FlowBite</p>
+
+<p class="font-semibold dark:text-white">FlowBite</p>
+
+<p class="font-bold dark:text-white">FlowBite</p>
+
+<p class="font-extrabold dark:text-white">FlowBite</p>
+
+<p class="font-black dark:text-white">FlowBite</p>
+```
+
+## Line Height
+
+Use the following leading-type utility classes to set the line height for any text element.
+
+```svelte example
+<p class="leading-none dark:text-gray-400">Themesberg was created to bring quality ...</p>
+
+<p class="leading-tight dark:text-gray-400">Themesberg was created to bring quality ...</p>
+
+<p class="leading-snug dark:text-gray-400">Themesberg was created to bring quality ...</p>
+
+<p class="leading-normal dark:text-gray-400">Themesberg was created to bring quality ...</p>
+
+<p class="leading-relaxed dark:text-gray-400">Themesberg was created to bring quality ...</p>
+
+<p class="leading-loose dark:text-gray-400">Themesberg was created to bring quality ...</p>
+```
+
+## Lists
+
+Use the following code to create list items with ordered and unordered lists.
+
+```svelte example
+<script>
+  import { List, Li, Heading } from 'flowbite-svelte';
+</script>
+
+<Heading tag="h5">List disc</Heading>
+<List list="disc">
+  <Li>Design</Li>
+  <Li>Develop</Li>
+  <Li>Test</Li>
+</List>
+<Heading tag="h5">List decimal</Heading>
+<List list="decimal">
+  <Li>Design</Li>
+  <Li>Develop</Li>
+  <Li>Test</Li>
+</List>
+<Heading tag="h5">List none</Heading>
+<List list="none">
+  <Li>Design</Li>
+  <Li>Develop</Li>
+  <Li>Test</Li>
+</List>
+```
+
+## List position
+
+Use the list-inside and list-outside classes to set the list item position inside a list component.
+
+```svelte example
+<script>
+  import { List, Li, Heading } from 'flowbite-svelte';
+</script>
+
+<Heading tag="h5">List inside</Heading>
+<List position="inside">
+  <Li>Design</Li>
+  <Li>Develop</Li>
+  <Li>Test</Li>
+</List>
+<Heading tag="h5">List outside</Heading>
+<List position="outside">
+  <Li>Design</Li>
+  <Li>Develop</Li>
+  <Li>Test</Li>
+</List>
+```
+
+## Text Decoration
+
+You can use the following classes to set the text decoration for any inline text element.
+
+```svelte example
+<p class="underline dark:text-gray-400">please read our terms and services</p>
+
+<p class="line-through dark:text-gray-400">please read our terms and services</p>
+```
+
+## References
+
+- [Flowbite Typography](https://flowbite.com/docs/components/typography/)

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

@@ -0,0 +1,125 @@
+---
+layout: componentLayout
+title: Svelte Video - Flowbite
+breadcrumb_title: Svelte Video
+component_title: Video
+dir: Components
+description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { Heading, P, A } from '$lib'
+  const components = 'Video'
+</script>
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+```
+
+## Video player
+
+Use this example to create a native browser video player and apply the w-full utility class from Tailwind CSS to span the full width of the parent container.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" controls trackSrc="flowbite.mp4" />
+```
+
+## Autoplay
+
+Use the autoplay attribute on the video component to automatically start the video when the page has been loaded.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" autoplay controls trackSrc="flowbite.mp4" />
+```
+
+## Muted
+
+Use the muted attribute together with the autoplay option to start the video while the sound is muted.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" autoplay muted controls trackSrc="flowbite.mp4" />
+```
+
+## Sizes
+
+Set the width and height of the video component using the `w-{size}` and `h-{size}` classes.
+
+### Width
+
+Use the `w-{size}` class to set the height of the video player.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" controls class="w-96" trackSrc="flowbite.mp4" />
+```
+
+### Height
+
+Use the `h-{size}` class to set the height of the video player.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" controls class="h-80" trackSrc="flowbite.mp4" />
+```
+
+### Responsive
+
+Use the following example to make the video responsive across all devices and viewports.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" controls class="w-full max-w-full h-auto" trackSrc="flowbite.mp4" />
+```
+
+### Custom styles
+
+Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or border to set rounded corners and border.
+
+```svelte example hideScript
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+
+<Video src="/videos/flowbite.mp4" controls class="w-full max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700" trackSrc="flowbite.mp4" />
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Video styling
+
+- Use the `class` prop to overwrite the `video` tag class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Video](https://flowbite.com/docs/components/video/)

package/src/routes/docs/examples/[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/examples/[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} />

package/src/routes/docs/examples/sidebar-layout.md

@@ -0,0 +1,20 @@
+---
+layout: componentLayout
+title: Responsive Sidebar Layout
+dir: Examples
+description: Flowbite Svelte Responsive sidebar layout
+breadcrumb_title: Svelte Sidebar Layout
+component_title: Sidebar Layout
+---
+
+<script>
+  
+  import { Img, A, List, Li } from '$lib';
+</script>
+
+<List tag="ul" class="space-y-1 my-4">
+  <Li><A href="https://github.com/shinokada/flowbite-sveltekit-responsive-sidebar-layout">GitHub Repo</A></Li>
+  <Li><A href="https://sveltekit-sidebar-layout.vercel.app/">Demo</A></Li>
+</List>
+
+<Img src="/images/sveltekit-sidebar-layout-optimized.png" alt="sveltekit sidebar layout" />

package/src/routes/docs/examples/snapshot.md

@@ -0,0 +1,59 @@
+---
+layout: componentLayout
+title: Svelte Snapshot - Flowbite
+breadcrumb_title: Svelte Snapshot
+component_title: Snapshot
+dir: Examples
+description: Svelte Snapshot with Flowbite Svete
+---
+
+<script>
+  
+  import { Input, Label, A } from '$lib';
+
+  let formData = {
+    first_name: '',
+    last_name: '',
+    company: '',
+    website: '',
+    email: ''
+  };
+  export const snapshot = {
+    capture: () => formData,
+    restore: (value) => (formData = value)
+  };
+</script>
+
+Imagine a scenario where a user has filled out a form, but before submitting it, clicks on a link and then hits the back button on their browser. In such cases, the values they entered in the form will vanish into thin air. However, if it's important to retain this input, you can create a snapshot of the DOM state, which can be reinstated when the user returns to the previous page.
+
+You can achieve this by using <A href="https://kit.svelte.dev/docs/snapshots">SvelteKit snapshots</A>, which enable you to preserve the state of the form input even if the user navigates away from the page and then returns or refreshes the page.
+
+<form class="p-16">
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+    <div>
+        <Label for="first_name" class="mb-2">First name</Label>
+        <Input type="text" id="first_name" placeholder="John" required bind:value={formData.first_name} />
+    </div>
+    <div>
+        <Label for="last_name" class="mb-2">Last name</Label>
+        <Input type="text" id="last_name" placeholder="Doe" required bind:value={formData.last_name} />
+    </div>
+    <div>
+        <Label for="company" class="mb-2">Company</Label>
+        <Input type="text" id="company" placeholder="Flowbite" required bind:value={formData.company} />
+    </div>
+    <div>
+        <Label for="website" class="mb-2">Website URL</Label>
+        <Input type="url" id="website" placeholder="flowbite.com" bind:value={formData.website} />
+    </div>
+    </div>
+    <div class="mb-6">
+    <Label for="email" class="mb-2">Email address</Label>
+    <Input
+        type="email"
+        id="email"
+        placeholder="john.doe@company.com"
+        required
+        bind:value={formData.email} />
+    </div>
+</form>

package/src/routes/docs/examples/testsnap.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Input, Label, Button, Checkbox, A } from '$lib';
+  let formData = {
+    first_name: '',
+    last_name: '',
+    company: '',
+    website: '',
+    email: ''
+  };
+  export const snapshot = {
+    capture: () => formData,
+    restore: (value: typeof formData) => (formData = value)
+  };
+</script>
+
+<form class="p-16">
+  <div class="grid gap-6 mb-6 md:grid-cols-2">
+    <div>
+      <Label for="first_name" class="mb-2">First name</Label>
+      <Input type="text" id="first_name" placeholder="John" required bind:value={formData.first_name} />
+    </div>
+    <div>
+      <Label for="last_name" class="mb-2">Last name</Label>
+      <Input type="text" id="last_name" placeholder="Doe" required bind:value={formData.last_name} />
+    </div>
+    <div>
+      <Label for="company" class="mb-2">Company</Label>
+      <Input type="text" id="company" placeholder="Flowbite" required bind:value={formData.company} />
+    </div>
+    <div>
+      <Label for="website" class="mb-2">Website URL</Label>
+      <Input type="url" id="website" placeholder="flowbite.com" bind:value={formData.website} />
+    </div>
+  </div>
+  <div class="mb-6">
+    <Label for="email" class="mb-2">Email address</Label>
+    <Input type="email" id="email" placeholder="john.doe@company.com" required bind:value={formData.email} />
+  </div>
+  <div class="mb-6">
+    <Label for="password" class="mb-2">Password</Label>
+    <Input type="password" id="password" placeholder="•••••••••" />
+  </div>
+  <div class="mb-6">
+    <Label for="confirm_password" class="mb-2">Confirm password</Label>
+    <Input type="password" id="confirm_password" placeholder="•••••••••" />
+  </div>
+  <Checkbox class="mb-6 space-x-1" required>I agree with the <A href="/">terms and conditions</A>.</Checkbox>
+  <Button type="submit">Submit</Button>
+</form>

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

@@ -0,0 +1,13 @@
+// src/routes/experimental/[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/experimental/[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} />