flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/kbd.md

@@ -1,284 +0,0 @@
----
-layout: componentLayout
-title: Svelte KBD (Keyboard) - Flowbite
-breadcrumb_title: KBD
-dir: Components
-description: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components
----
-
-<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/Kbd.json'
-  import { props as items2} from '../props/ArrowKeyDown.json'
-  import { props as items3} from '../props/ArrowKeyLeft.json'
-  import { props as items4} from '../props/ArrowKeyRight.json'
-  import { props as items5} from '../props/ArrowKeyUp.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>
-
-<ExampleDiv>
-<GitHubSource href="kbd/Kbd.svelte">Kbd</GitHubSource>
-</ExampleDiv>
-
-The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Default KBD" />
-
-Here’s a list of KBD components that you can use inside any other element.
-
-```svelte example hideScript
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-
-<Kbd class='px-2 py-1.5'>Shift</Kbd>
-<Kbd class='px-2 py-1.5'>Ctrl</Kbd>
-<Kbd class='px-2 py-1.5'>Tab</Kbd>
-<Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
-<Kbd class='px-2 py-1.5'>Esc</Kbd>
-<Kbd class='px-4 py-1.5'>Spacebar</Kbd>
-<Kbd class='px-2 py-1.5'>Enter</Kbd>
-```
-
-<Htwo label="KBD inside text" />
-
-Use this example by nesting an inline KBD component inside a paragraph.
-
-```svelte example hideScript
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-
-<p class="text-gray-500 dark:text-gray-400">
-Please press <Kbd class="px-2 py-1.5">Ctrl</Kbd> + <Kbd class="px-2 py-1.5">Shift</Kbd> + <Kbd class="px-2 py-1.5">R</Kbd> to re-render an MDN page.
-</p>
-```
-
-<Htwo label="KBD inside table" />
-
-The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.
-
-```svelte example
-<script>
-  import { Kbd, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte'
-</script>
-
-<Table>
-  <TableHead>
-    <TableHeadCell>Key</TableHeadCell>
-    <TableHeadCell>Description</TableHeadCell>
-  </TableHead>
-  <TableBody class="divide-y">
-    <TableBodyRow>
-      <TableBodyCell>
-        <Kbd class='px-2 py-1.5'>Shift</Kbd> or <Kbd class='px-2 py-1.5'>Tab</Kbd>
-      </TableBodyCell>
-      <TableBodyCell>Navigate to interactive elements</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>
-        <Kbd class='px-2 py-1.5'>Enter</Kbd> or <Kbd class='px-4 py-1.5'>Space bar</Kbd>
-      </TableBodyCell>
-      <TableBodyCell>Ensure elements with ARIA role="button" can be activated with both key commands.</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>
-        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-        <ArrowKeyUp />
-        <span class="sr-only">Arrow key up</span>
-        </Kbd>
-        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-        <ArrowKeyDown />
-        <span class="sr-only">Arrow key down</span>
-        </Kbd> or 
-        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-        <ArrowKeyLeft />
-        <span class="sr-only">Arrow key left</span>
-        </Kbd>
-        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-        <ArrowKeyRight />
-        <span class="sr-only">Arrow key right</span>
-        </Kbd>
-      </TableBodyCell>
-      <TableBodyCell>Choose and activate previous/next tab.</TableBodyCell>
-    </TableBodyRow>
-  </TableBody>
-</Table>
-```
-
-<Htwo label='Arrow keys' />
-
-Use this example to show arrow keys inside the KBD styled element.
-
-```svelte example
-<script>
-  import { Kbd, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte'
-</script>
-
-<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-  <ArrowKeyUp />
-  <span class="sr-only">Arrow key up</span>
-</Kbd>
-<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-  <ArrowKeyDown />
-  <span class="sr-only">Arrow key down</span>
-</Kbd>
-<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-  <ArrowKeyLeft />
-  <span class="sr-only">Arrow key left</span>
-</Kbd>
-<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
-  <ArrowKeyRight />
-  <span class="sr-only">Arrow key right</span>
-</Kbd>
-```
-
-<Htwo label='Letter keys' />
-
-Use this example if you need to show a key from the latin alphabet
-
-```svelte example hideScript
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-
-<Kbd class="px-2 py-1.5">Q</Kbd>
-<Kbd class="px-2 py-1.5">W</Kbd>
-<Kbd class="px-2 py-1.5">E</Kbd>
-<Kbd class="px-2 py-1.5">R</Kbd>
-<Kbd class="px-2 py-1.5">T</Kbd>
-<Kbd class="px-2 py-1.5">Y</Kbd>
-<Kbd class="px-2 py-1.5">U</Kbd>
-<Kbd class="px-2 py-1.5">I</Kbd>
-<Kbd class="px-2 py-1.5">O</Kbd>
-<Kbd class="px-2 py-1.5">P</Kbd>
-<Kbd class="px-2 py-1.5">A</Kbd>
-<Kbd class="px-2 py-1.5">S</Kbd>
-<Kbd class="px-2 py-1.5">D</Kbd>
-<Kbd class="px-2 py-1.5">F</Kbd>
-<Kbd class="px-2 py-1.5">G</Kbd>
-<Kbd class="px-2 py-1.5">H</Kbd>
-<Kbd class="px-2 py-1.5">J</Kbd>
-<Kbd class="px-2 py-1.5">K</Kbd>
-<Kbd class="px-2 py-1.5">L</Kbd>
-<Kbd class="px-2 py-1.5">Z</Kbd>
-<Kbd class="px-2 py-1.5">X</Kbd>
-<Kbd class="px-2 py-1.5">C</Kbd>
-<Kbd class="px-2 py-1.5">V</Kbd>
-<Kbd class="px-2 py-1.5">B</Kbd>
-<Kbd class="px-2 py-1.5">N</Kbd>
-<Kbd class="px-2 py-1.5">M</Kbd>
-```
-
-<Htwo label='Number keys' />
-
-Use this example to show a key inside a KBD component from the english numeral system.
-
-```svelte example hideScript
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-
-<Kbd class="px-2 py-1.5">1</Kbd>
-<Kbd class="px-2 py-1.5">2</Kbd>
-<Kbd class="px-2 py-1.5">3</Kbd>
-<Kbd class="px-2 py-1.5">4</Kbd>
-<Kbd class="px-2 py-1.5">5</Kbd>
-<Kbd class="px-2 py-1.5">6</Kbd>
-<Kbd class="px-2 py-1.5">7</Kbd>
-<Kbd class="px-2 py-1.5">8</Kbd>
-<Kbd class="px-2 py-1.5">9</Kbd>
-<Kbd class="px-2 py-1.5">0</Kbd>
-```
-
-<Htwo label='Function keys' />
-
-This example can be used to denote function keys inside the KBD component.
-
-```svelte example hideScript
-<script>
-  import { Kbd } from 'flowbite-svelte'
-</script>
-
-<Kbd class="px-2 py-1.5">F1</Kbd>
-<Kbd class="px-2 py-1.5">F2</Kbd>
-<Kbd class="px-2 py-1.5">F3</Kbd>
-<Kbd class="px-2 py-1.5">F4</Kbd>
-<Kbd class="px-2 py-1.5">F5</Kbd>
-<Kbd class="px-2 py-1.5">F6</Kbd>
-<Kbd class="px-2 py-1.5">F7</Kbd>
-<Kbd class="px-2 py-1.5">F8</Kbd>
-<Kbd class="px-2 py-1.5">F9</Kbd>
-<Kbd class="px-2 py-1.5">F10</Kbd>
-<Kbd class="px-2 py-1.5">F11</Kbd>
-<Kbd class="px-2 py-1.5">F12</Kbd>
-```
-
-<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>
-
-<h3 class='text-xl w-full dark:text-white py-4'>Kbd</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>ArrowKeyDown</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items2} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>ArrowKeyLeft</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items3} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>ArrowKeyRight</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items4} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>ArrowKeyUp</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items5} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/kbd/" target="_blank" rel="noreferrer" class="link"
-    >Tailwind CSS KBD (Keyboard)</A
-  >
-</P>

package/src/routes/components/list-group.md

@@ -1,192 +0,0 @@
----
-layout: componentLayout
-title: Svelte List Group - Flowbite
-breadcrumb_title: List group
-dir: Components
-description: Use the list group component to display a series of items, buttons or links inside a single element
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, P, A } from '$lib'
-
-  import {props as componentProps} from '../props/Listgroup.json'
-  // Props table
-  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>
-
-<ExampleDiv>
-<GitHubSource href="list-group/Listgroup.svelte">Listgroup</GitHubSource>
-<GitHubSource href="list-group/ListgroupItem.svelte">ListgroupItem</GitHubSource>
-</ExampleDiv>
-
-The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Listgroup, ListgroupItem } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Default list group" />
-
-Here’s an example of a list group that you can use right away.
-
-```svelte example
-<script>
-  import { Listgroup } from 'flowbite-svelte'
-  let simpleList = ["Profile", "Settings", "Messages", "Download"]
-</script>
-
-<Listgroup items={simpleList} let:item class="w-48">
-  {item}
-</Listgroup>
-```
-
-<Htwo label="List group with links" />
-
-You can also display a series of links inside the list group element. Notice how items provide the `href` field.
-
-You need to set the list to `active` mode to enable hovering, focus and links.
-
-If list is active and data items contain `href` field entries are presented as `<a>` elements.
-
-```svelte example
-<script>
-  import { Listgroup } from 'flowbite-svelte'
-  let links = [
-    { name: "Accordions", href: "/accordions", current: true },
-    { name: "Alerts", href: "/alerts" },
-    { name: "Badges", href: "/badges"  },
-    { name: "Breadcrumbs", href: "/breadcrumbs" },
-  ];
-</script>
-
-<Listgroup active items={links} let:item class="w-48">
-  {item.name}
-</Listgroup>
-```
-
-<Htwo label="List group with buttons" />
-
-It is also possible to display a list of button element inside the list group component. The following example includes an active and disabled item as well.
-
-You need to set the list to `active` mode to enable hovering, focus and `on:click`.
-
-If list is active and data items do not contain `href` field entries are presented as `<button>` elements triggering `on:click` events.
-
-```svelte example
-<script>
-  import { Listgroup } from 'flowbite-svelte'
-  let buttons = [
-    { name: "Profile", mycustomfield: "data1", current: true },
-    { name: "Settings", mycustomfield: "data2" },
-    { name: "Messages", mycustomfield: "data3" },
-    { name: "Download", mycustomfield: "data4",  disabled: true },
-  ];
-</script>
-
-<Listgroup active items={buttons} let:item class="w-48" on:click={(e) => alert(Object.entries(e.detail))}>
-  {item.name}
-</Listgroup>
-```
-
-<Htwo label="List group with icons" />
-
-Use the following example to create a list of buttons as a menu together with SVG icons.
-
-```svelte example
-<script>
-  import { Listgroup, UserCircle, InformationCircle } from 'flowbite-svelte'
-  let icons = [
-    { name: "Profile",   icon: UserCircle },
-    { name: "Settings",  icon:InformationCircle },
-    { name: "Messages",  icon:UserCircle },
-    { name: "Download", icon:InformationCircle },
-  ];
-</script>
-
-<Listgroup active items={icons} let:item class="w-48" on:click={console.log}>
-    <svelte:component this={item.icon} class="mr-2 w-5 h-5" />
-    {item.name}
-</Listgroup>
-```
-
-<Htwo label="Advanced" />
-
-When non standard usage is needed you can omit the `items` props and add elements directly to the list.
-Usage of hidden so far `ListgroupItem` helps you with proper layout.
-
-```svelte example
-<script>
-  import { Listgroup, ListgroupItem, Avatar } from 'flowbite-svelte'
-</script>
-
-<Listgroup active class="w-48">
-    <h3 class="text-center bg-red-500 text-white font-bold rounded-t-lg">User list</h3>
-    <ListgroupItem class="text-base font-semibold gap-2">
-      <Avatar src="/images/profile-picture-1.webp" size="xs"/>Jese Leos
-    </ListgroupItem>
-    <ListgroupItem class="text-base font-semibold gap-2">
-      <Avatar src="/images/profile-picture-2.webp" size="xs"/>Robert Gouth
-    </ListgroupItem>
-    <ListgroupItem class="text-base font-semibold gap-2">
-      <Avatar src="/images/profile-picture-3.webp" size="xs"/>Bonnie Green
-    </ListgroupItem>
-    <a href="/" class="flex items-center p-3 text-sm font-medium text-red-600 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline rounded-b-lg">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
-Delete user
-  </a>
-</Listgroup>
-```
-
-<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={componentProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4">ListgroupItem</Heading>
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:blur</Badge>
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:focus</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keypress</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-<Badge large={true}>on:mouseover</Badge>
-</div>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/list-group/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite List Group</A
-  >
-</P>