flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/components/typography.md

@@ -0,0 +1,132 @@
+---
+layout: typographyLayout
+title: Svelte Typography - Flowbite
+breadcrumb_title: Typography
+dir: Components
+description: Use the typography and the utility classes from Tailwind CSS to style text with FlowBite
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Heading, A } from '$lib';
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+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.
+
+<Htwo label="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>
+```
+
+<Htwo label="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>
+```
+
+<Htwo label="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>
+```
+
+<Htwo label="Lists" />
+
+Use the following code to create list items with ordered and unordered lists.
+
+```svelte example
+.list-disc
+  <ul class="list-disc dark:text-gray-400">
+    <li>Design</li>
+    <li>Develop</li>
+    <li>Test</li>
+  </ul>
+.list-decimal
+  <ol class="list-decimal dark:text-gray-400">
+    <li>Design</li>
+    <li>Develop</li>
+    <li>Test</li>
+  </ol>
+.list-default
+  <ul class="dark:text-gray-400">
+    <li>Design</li>
+    <li>Develop</li>
+    <li>Test</li>
+  </ul>
+```
+
+<Htwo label="List position" />
+
+Use the list-inside and list-outside classes to set the list item position inside a list component.
+
+```svelte example
+.list-inside
+  <ul class="list-disc list-inside dark:text-gray-400">
+    <li>Design</li>
+    <li>Develop</li>
+    <li>Test</li>
+  </ul>
+.list-outside
+  <ul class="list-disc list-outside dark:text-gray-400">
+    <li>Design</li>
+    <li>Develop</li>
+    <li>Test</li>
+  </ul>
+```
+
+<Htwo label="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>
+```
+

package/src/routes/components/video.md

@@ -0,0 +1,143 @@
+---
+layout: componentLayout
+title: Svelte Video - Flowbite
+breadcrumb_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
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
+  import { props as items } from '../props/Video.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Video } from 'flowbite-svelte';
+</script>
+```
+
+<Htwo label="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' />
+```
+
+<Htwo label="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' />
+```
+
+<Htwo label="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' />
+```
+
+<Htwo label="Sizes" />
+
+Set the width and height of the video component using the `w-{size}` and `h-{size}` classes.
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Width</Heading>
+
+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' />
+```
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Height</Heading>
+
+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' />
+```
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Responsive
+</Heading>
+
+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' />
+```
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Custom styles
+</Heading>
+
+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' />
+```
+
+<Htwo label="Props" />
+
+<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
+ page</A> for type information.</p>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/video/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Tooltip</A>
+</P>

package/src/routes/datepicker/+page.svelte

@@ -0,0 +1,179 @@
+<script>
+  import { Htwo, ExampleDiv, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils';
+  import 'prism-themes/themes/prism-holi-theme.css';
+  import { Datepicker, Breadcrumb, BreadcrumbItem, Alert } from '$lib';
+  import { props as items } from '../props/Datepicker.json';
+  let propHeader = ['Name', 'Type', 'Default'];
+  let divClass = 'w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4';
+  let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white';
+</script>
+
+<Breadcrumb class="pt-20 py-8">
+  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+  <BreadcrumbItem>Datepicker</BreadcrumbItem>
+</Breadcrumb>
+
+<h1 class="text-3xl w-full dark:text-white pb-4">Svelte Datepicker - Flowbite</h1>
+
+<div class="p-8">
+  <Alert color="red">
+    <span class="font-medium"
+      >⚠️ Datepicker component is experimental and only works with SvelteKit.
+    </span></Alert>
+</div>
+
+<CompoDescription
+  >Start receiving date and time data from your users using this free datepicker element based on Tailwind
+  utility-classes and vanilla JavaScript</CompoDescription>
+
+<Htwo label="Setup" />
+
+<pre class="language-html"><code class="language-html">
+&lt;script&gt;
+ import &#123;Datepicker&#125; from 'flowbite-svelte';
+&lt;/script&gt;
+
+</code></pre>
+
+<h3 class="dark:text-white">Use rel="external"</h3>
+
+<p class="dark:text-white">
+  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".
+</p>
+
+<pre class="language-html"><code class="language-html">
+&lt;a href="/datepicker" rel="external"&gt;Datepicker page&lt:/a&gt;
+	
+</code></pre>
+
+<Htwo label="Datepicker example" />
+
+<p class="dark:text-white">
+  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.
+</p>
+
+<ExampleDiv>
+  <Datepicker />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker /&gt;
+
+</code></pre>
+
+<Htwo label="Name and other attributes" />
+
+<p class="dark:text-white">
+  The component has $$...restProps attributes that can be used to pass any other attribute.
+</p>
+
+<ExampleDiv>
+  <Datepicker name="start" />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker name="start" /&gt;
+	
+	</code></pre>
+
+<Htwo label="Date range picker" />
+
+<p class="dark:text-white">
+  Use the <code>range</code> prop and the following markup to initialize two datepickers as a range.
+</p>
+
+<p class="dark:text-white">
+  The range picker has input name of <code>start</code> and <code>end</code>.
+</p>
+
+<ExampleDiv>
+  <Datepicker range />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker range /&gt;
+
+</code></pre>
+
+<Htwo label="Action buttons" />
+
+<p class="dark:text-white">
+  By adding the <code>datepickerButtons</code> prop you will enable the today and clear buttons with the following
+  features:
+</p>
+
+<ul class="dark:text-white">
+  <li>Clicking on the today button will browse back to the current day/month/year</li>
+  <li>Clicking on the clear button will reset all selections</li>
+</ul>
+
+<ExampleDiv>
+  <Datepicker datepickerButtons />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker datepickerButtons /&gt;
+
+</code></pre>
+
+<Htwo label="Date format" />
+
+<p class="dark:text-white">
+  If you want to use a custom format such as mm/dd/yyyythen you can use the
+  <code>datepickerFormat="format"</code> prop to change it.
+</p>
+
+<ExampleDiv>
+  <Datepicker datepickerFormat="dd/mm/yyyy" />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker datepickerFormat="dd/mm/yyyy" /&gt;
+
+</code></pre>
+
+<Htwo label="Orientation" />
+
+<p class="dark:text-white">
+  You can override the default positioning algorithm by using the
+  <code>datepickerOrientation="top | right | bottom | left"</code>
+  prop. You can even combine right with bottom or left with top.
+</p>
+
+<ExampleDiv>
+  <Datepicker datepickerOrientation="bottom right" />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker datepickerOrientation="bottom right" /&gt;
+
+</code></pre>
+
+<Htwo label="Title" />
+
+<p class="dark:text-white">
+  You can also add a title to the datepicker by using the <code>datepicker-title="title"</code> prop.
+</p>
+
+<ExampleDiv>
+  <Datepicker datepickerTitle="My Vacation" />
+</ExampleDiv>
+
+<pre class="language-html"><code class="language-html">
+&lt;Datepicker datepickerTitle="My Vacation" /&gt;
+
+</code></pre>
+
+<Htwo label="Props" />
+
+<p class="dark:text-white">
+  The component has the following props, type, and default values. See
+  <a href="/pages/types">types page</a>
+  for type information.
+</p>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState="hover" />
+</TableProp>

package/src/routes/extend/CheckCircle.svelte

@@ -0,0 +1,9 @@
+<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/extend/[slug]/+page.js

@@ -0,0 +1,12 @@
+// src/routes/components/[slug]/+page.js
+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/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/extend/flowbite-svelte-starter.md

@@ -0,0 +1,76 @@
+---
+layout: pageLayout
+breadcrumb_title: Flowbite-Svelte Starter
+title: Flowbite-Svelte Starter
+dir: Extend
+description: Flowbite-Svete-Starter provides all necessary components to get started quickly 
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { CompoDescription, Htwo, MetaTag } from '../utils'
+  import { Breadcrumb, BreadcrumbItem, Heading, A } from '$lib'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<Htwo label="Demo" />
+
+<p class="dark:text-white" ><a class="text-blue-700" href="https://flowbite-svelte-starter.vercel.app/">Flowbite-Svelte-Starter Demo</a></p>
+
+<Htwo label="Features" />
+
+<ul class="dark:text-white">
+<li>Svelte</li>
+<li>SvelteKit</li>
+<li>Tailwind CSS</li>
+<li>Flowbite</li>
+<li>Flowbite-Svelte</li>
+<li>Flowbite-Svelte-Blocks</li>
+<li>ESlint</li>
+<li>Typescript</li>
+<li>Playwright</li>
+<li>Prettier</li>
+<li>Svelte-heros(Heroicons)</li>
+<li>Darkmode activated</li>
+</ul>
+
+<Htwo label="Installation" />
+
+```sh
+npx degit shinokada/flowbite-svelte-starter my-demo
+cd my-demo
+pnpm i // or npm i
+pnpm run dev // or npm run dev
+```
+
+<Htwo label="Other examples/themes" />
+
+<Htwo label="Svelte-Sidebar-Example" />
+
+If you want to see [a svelte-sidebar demo](https://flowbite-svelte-starter.vercel.app/):
+
+```sh
+git checkout svelte-sidebar-example
+```
+
+<Htwo label="Jaco example" />
+
+```sh
+git checkout jaco
+```
+
+<Htwo label="Plain" />
+
+```sh
+git checkout plain
+```