flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/experimental/datepicker.md

@@ -0,0 +1,131 @@
+---
+layout: componentLayout
+title: Svelte Datepicker - Flowbite
+breadcrumb_title: Svelte Datepicker
+component_title: Datepicker
+dir: Experimental
+description: Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript
+thumnailSize: w-28
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { Alert } from '$lib'
+
+  const components = 'Datepicker'
+</script>
+
+Date picker component
+
+<div class="p-8">
+    <Alert color="red">
+        <span class="font-medium">⚠️ Datepicker component is experimental and only works with SvelteKit.</span>
+    </Alert>
+</div>
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+```
+
+### Use rel="external"
+
+This component is importing Flowbite datepicker javascript in the `svelte:head` section. When you are linking to a page using this component, use `rel="external"`.
+
+## Datepicker example
+
+Use the following example of an input element to create a datepicker component. All you need to do is to add the datepicker data attribute to any input element.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker />
+```
+
+## Name and other attributes
+
+The component has `$$restProps` attributes that can be used to pass any other attribute.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker name="start" />
+```
+
+## Date range picker
+
+Use the `range` prop and the following markup to initialize two datepickers as a range.
+
+The range picker has input name of `start` and `end`.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker range />
+```
+
+## Action buttons
+
+By adding the `datepickerButtons` prop you will enable the today and clear buttons with the following features:
+
+- Clicking on the today button will browse back to the current day/month/year
+- Clicking on the clear button will reset all selections
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker datepickerButtons />
+```
+
+## Date format
+
+If you want to use a custom format such as mm/dd/yyyythen you can use the `datepickerFormat="format"` prop to change it.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker datepickerFormat="dd/mm/yyyy" />
+```
+
+## Orientation
+
+You can override the default positioning algorithm by using the `datepickerOrientation="top | right | bottom | left"` prop. You can even combine right with bottom or left with top.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker datepickerOrientation="bottom right" />
+```
+
+## Title
+
+You can also add a title to the datepicker by using the `datepicker-title="title"` prop.
+
+```svelte example hideOutput
+<script>
+  import { Datepicker } from 'flowbite-svelte';
+</script>
+
+<Datepicker datepickerTitle="My Vacation" />
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+<CompoAttributesViewer {components}/>

package/src/routes/docs/extend/CheckCircle.svelte

@@ -0,0 +1,3 @@
+<svg class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+</svg>

package/src/routes/docs/extend/[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/extend/[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/extend/flowbite-svelte-blocks.md

@@ -0,0 +1,28 @@
+---
+layout: componentLayout
+breadcrumb_title: Flowbite Svelte Blocks
+title: Flowbite Svelte Blocks
+component_title: Block Sections
+dir: Extend
+description: Flowbite-Svete-Blocks provides all necessary components to get started quickly
+---
+
+<script>
+  import { A, List, Li, Img} from '$lib'
+  
+  const libFiles ={
+  "GitHub Repo": "https://github.com/shinokada/flowbite-svelte-blocks",
+  Docs: "https://shinokada.github.io/flowbite-svelte-blocks/",
+  Demo: "https://flowbite-svelte-blocks.vercel.app/"
+  }
+</script>
+
+## Installation
+
+After installing Flowbite-Svelte, run the following to install Flowbite-Svelte-Blocks:
+
+```sh
+npm i -D shinokada/flowbite-svelte-blocks
+```
+
+<Img src="/images/flowbite-svelte-blocks-optimized.png" alt="Flowbite Svelte Blocks" />

package/src/routes/docs/extend/flowbite-svelte-starter.md

@@ -0,0 +1,34 @@
+---
+layout: componentLayout
+breadcrumb_title: Flowbite Svelte Starters
+title: Flowbite Svelte Starters
+component_title: Starter Kit
+dir: Extend
+description: Flowbite Svete Starters provide all necessary components to get started quickly
+---
+
+<script>
+  import { A, List, Li } from '$lib'
+  
+</script>
+
+## Flowbite Svelte starter
+
+<List tag="ul" class="space-y-1 my-4">
+  <Li><A href="https://github.com/shinokada/flowbite-svelte-starter">GitHub Repo</A></Li>
+  <Li><A href="https://flowbite-svelte-starter.vercel.app/">Demo</A></Li>
+</List>
+
+## Svelte starter
+
+<List tag="ul" class="space-y-1 my-4">
+  <Li><A href="https://github.com/shinokada/svelte-starter">GitHub Repo</A></Li>
+  <Li><A href="https://shinokada.github.io/svelte-starter/">Demo</A></Li>
+</List>
+
+## Svelte TS starter
+
+<List tag="ul" class="space-y-1 my-4">
+  <Li><A href="https://github.com/shinokada/svelte-ts-starter">GitHub Repo</A></Li>
+  <Li><A href="https://shinokada.github.io/svelte-ts-starter/">Demo</A></Li>
+</List>

package/src/routes/docs/extend/icons.md

@@ -0,0 +1,204 @@
+---
+layout: componentLayout
+breadcrumb_title: Icons
+title: Svelte Icons - Flowbite
+component_title: Svelte Icons
+dir: Extend
+description: Get started with a collection of over 430+ open-source icons built for Svelte and Flowbite and a collection of other external icon libraries to build beautiful websites
+---
+
+<script>
+  import { P, A, List, Li } from '$lib'
+  
+	import CheckCircle from './CheckCircle.svelte'
+</script>
+
+Instead of using generic SVG icons, you can start using a custom Svelte icon library such as the open-source collection of Flowbite Icons that includes over 450+ outline and solid styles and is already available to import as Svelte components inside your project.
+
+Check out the official [Flowbite Icons](https://flowbite.com/icons/) page and interface and learn how to install [Flowbite Svelte Icons](https://flowbite-svelte-icons.vercel.app/) inside your project by following the steps from this guide.
+
+## Installation
+
+To install the Flowbite Icons package in Svelte you need to set it up with NPM in your `package.json` file:
+
+```sh
+pnpm i -D flowbite-svelte-icons
+```
+
+## Usage example
+
+Inside a Svelte file import any of the icons like this:
+
+```html
+<script>
+  import { CalendarWeekSolid } from 'flowbite-svelte-icons';
+</script>
+
+<CalendarWeekSolid />
+```
+
+## Component data
+
+Check out the list of properties that you can use to customize and update the icons from Flowbite Svelte.
+
+### Outline
+
+- size: ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ = ‘md’;
+- role: string = ‘img’;
+- strokeLinecap: ‘round’ | ‘inherit’ | ‘butt’ | ‘square’ | null | undefined = ‘round’;
+- strokeLinejoin: ‘round’ | ‘inherit’ | ‘miter’ | ‘bevel’ | null | undefined = ‘round’;
+- strokeWidth = ‘2’;
+- ariaLabel = ‘icon file name’;
+
+### Solid
+
+- size: ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ = ‘md’;
+- role: string = ‘img’;
+- ariaLabel = ‘icon file name’;
+
+## IDE support
+
+If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example.
+
+## Size
+
+The following table provides details about the available sizes for icons:
+
+| Size | CSS Classes |
+| ---- | ----------- |
+| xs   | ‘w-3 h-3’   |
+| sm   | ‘w-4 h-4’   |
+| md   | ‘w-5 h-6’   |
+| lg   | ‘w-6 h-6’   |
+| xl   | ‘w-8 h-8’   |
+
+To change the size of an icon, use the size prop and specify the desired size. For example:
+
+```html
+<AddressCardSolid size="md" />
+```
+
+If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:
+
+```html
+<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />
+```
+
+## Creating a Default Global Icon Setting in Svelte
+
+Please see more details on the [docs](https://flowbite-svelte-icons.vercel.app/)
+
+## Tailwind CSS suport
+
+Use the `class` prop to change size, colors and add additional css.
+
+Here's an example of adding custom Tailwind CSS classes to an imported icon:
+
+```html
+<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />
+```
+
+## Dark mode
+
+If you want to support dark mode for the icons you need to use the `dark` variant classes from Tailwind CSS.
+
+Here's an example of making the icon red in dark mode:
+
+```html
+<AddressCardSolid class="text-blue-700 dark:text-red-500" />
+```
+
+## aria-label
+
+All of the icons support `aria-label` for accessibilty - for example `BxAbacus` has `aria-label="bx abacus"`.
+
+Use `ariaLabel` prop to modify the `aria-label` value.
+
+```html
+<AddressCardSolid ariaLabel="address card solid" />
+```
+
+## Unfocusable icon
+
+If you want to make an icon unfocusable, add `tabindex="-1"`.
+
+```html
+<AddressCardSolid tabindex="-1" />
+```
+
+## Events
+
+All of the icons from this library have the following events that you can use for programming:
+
+- on:click
+- on:keydown
+- on:keyup
+- on:focus
+- on:blur
+- on:mouseenter
+- on:mouseleave
+- on:mouseover
+- on:mouseout
+
+## Passing down other attributes
+
+Here's an example of how you can pass an attribute:
+
+```html
+<AddressCardSolid tabindex="0" />
+```
+
+## Using svelte:component
+
+Here's an example how you can use `svelte:component` with Flowbite Icons in Svelte:
+
+```html
+<script>
+  import { AddressCardSolid } from 'flowbite-svelte-icons';
+</script>
+
+<svelte:component this="{AddressCardSolid}" />
+```
+
+## Using onMount
+
+Here's an example of how you can create the icon using `onMount` from Svelte:
+
+```html
+<script>
+  import { AddressCardSolid } from 'flowbite-svelte-icons';
+  import { onMount } from 'svelte';
+  const props = {
+    size: '50',
+    color: '#ff0000'
+  };
+  onMount(() => {
+    const icon = new AddressCardSolid({ target: document.body, props });
+  });
+</script>
+```
+
+## Import all
+
+Use `import * as Icon` from 'flowbite-svelte-icons..
+
+```html
+<script>
+  import * as Icon from 'flowbite-svelte-icons';
+</script>
+
+<Icon.AddressCardSolid />
+
+<h1>Size</h1>
+<Icon.AddressCardSolid size="30" />
+
+<h1>Tailwind CSS</h1>
+<Icon.AddressCardSolid class="text-blue-500" />
+```
+
+## Resources
+
+These icon sets have the same functionalities mentioned above.
+
+- [Flowbite Icons](https://flowbite.com/icons/) and [Flowbite Icons in Svelte](https://github.com/themesberg/flowbite-svelte-icons)
+- [Svelte Icon Sets](https://svelte-svg-icons.vercel.app/)

package/src/routes/docs/extend/step-indicator.md

@@ -0,0 +1,162 @@
+---
+layout: componentLayout
+title: Svelte Step Indicator
+breadcrumb_title: Step Indicator
+component_title: Step Indicator
+dir: Extend
+description: Use the step indicator component to show the progress of a process.
+---
+
+<script>
+  import {  TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  const components = 'StepIndicator'
+</script>
+
+The Step Indicator component is a simple component to show the progress of a process. It can be used to show the progress of a multi-step form or a multi-step process.
+
+## Setup
+
+Import the `StepIndicator` component in a script tag.
+
+```svelte example hideOutput
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+</script>
+```
+
+## Default step indicator
+
+Use the following example of a step indicator element to show a progress of step 2 out of 5.
+
+```svelte example
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+  let currentStep = 2;
+  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+</script>
+
+<StepIndicator {currentStep} {steps} />
+```
+
+## Glow
+
+Use the `glow` prop to add a glow effect to the current step.
+
+```svelte example
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+  let currentStep = 2;
+  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+</script>
+
+<StepIndicator {currentStep} {steps} glow />
+```
+
+## Hide label
+
+Use the `hideLabel` prop to hide the label of the current step.
+
+```svelte example
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+  let currentStep = 2;
+  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+</script>
+
+<StepIndicator {currentStep} {steps} hideLabel />
+```
+
+## Sizes
+
+Use the `size` prop to change the size of a step indicator.
+
+```svelte example
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+  let currentStep = 2;
+  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+</script>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium dark:text-white">Small</div>
+  <StepIndicator {currentStep} {steps} size="h-1.5" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium dark:text-white">Default</div>
+  <StepIndicator {currentStep} {steps} size="h-2.5" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-lg font-medium dark:text-white">Large</div>
+  <StepIndicator {currentStep} {steps} size="h-4" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div>
+  <StepIndicator {currentStep} {steps} size="h-6" />
+</div>
+```
+
+## Colors
+
+Use the `color` prop to change the color of a step indicator.
+
+```svelte example
+<script>
+  import { StepIndicator } from 'flowbite-svelte';
+  let currentStep = 2;
+  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+</script>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium dark:text-white">Gray</div>
+  <StepIndicator {currentStep} {steps} color="gray" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue/Default</div>
+  <StepIndicator {currentStep} {steps} color="blue" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
+  <StepIndicator {currentStep} {steps} color="red" />
+</div>
+
+<div class="my-4">
+  <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
+  <StepIndicator {currentStep} {steps} color="green" />
+</div>
+
+<div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
+<div class="my-4">
+  <StepIndicator {currentStep} {steps} color="yellow" />
+</div>
+
+<div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-400">Indigo</div>
+<div class="my-4">
+  <StepIndicator {currentStep} {steps} color="indigo" />
+</div>
+
+<div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-400">Purple</div>
+<div class="my-4">
+  <StepIndicator {currentStep} {steps} color="purple" />
+</div>
+
+<div class="mb-1 text-base font-medium text-pink-700 dark:text-pink-400">Pink</div>
+<div class="my-4">
+  <StepIndicator {currentStep} {steps} color="pink" />
+</div>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### StepIndicator styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>

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