flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/components/kbd.md

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

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