flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/kbd/ArrowKeyUp.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"
+	/></svg
+>

package/src/lib/kbd/Kbd.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let kbdClass: string =
+		'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+</script>
+
+<kbd class={classNames(kbdClass, $$props.class)}>
+	<slot />
+</kbd>

package/src/lib/list-group/Listgroup.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import classNames from 'classnames';
+  import type { ListGroupItemType } from '../types';
+  import ListgroupItem from './ListgroupItem.svelte';
+  import Frame from '../utils/Frame.svelte';
+
+  export let items: ListGroupItemType[] = [];
+  export let active: boolean = false;
+
+  $: setContext('active', active);
+
+  let groupClass: string;
+  $: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+</script>
+
+<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
+  {#each items as item, index}
+    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+  {:else}
+    <slot />
+  {/each}
+</Frame>

package/src/lib/list-group/ListgroupItem.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import classNames from 'classnames';
+  import { createEventDispatcher } from 'svelte';
+
+  export let active: boolean = getContext('active');
+  export let current: boolean = false;
+  export let disabled: boolean = false;
+  export let href: string = '';
+
+  let dispatch = createEventDispatcher();
+
+  const states = {
+    current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
+    normal: '',
+    disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
+  };
+  let focusClass =
+    'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';
+  let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white';
+
+  let state: string;
+  $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
+
+  let itemClass: string;
+  $: itemClass = classNames(
+    'py-2 px-0 sm:px-4 w-full text-sm font-medium',
+    'first:rounded-t-lg last:rounded-b-lg',
+    states[state],
+    active && state === 'disabled' && 'cursor-not-allowed',
+    active && state === 'normal' && hoverClass,
+    active && state === 'normal' && focusClass,
+    $$props.class
+  );
+</script>
+
+{#if !active}
+  <li class={itemClass}>
+    <slot item={$$props} />
+  </li>
+{:else if href}
+  <a
+    {href}
+    class="block {itemClass}"
+    on:click={() => dispatch('click', $$props)}
+    aria-current={current}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover>
+    <slot item={$$props} />
+  </a>
+{:else}
+  <button
+    class="inline-flex relative items-center text-left {itemClass}"
+    {disabled}
+    on:click={() => dispatch('click', $$props)}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    aria-current={current}>
+    <slot item={$$props} />
+  </button>
+{/if}

package/src/lib/megamenu/MegaMenu.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import type { LinkType } from '../types';
+	import Popper from '../utils/Popper.svelte';
+
+	export let items: LinkTypeLike[] = [];
+	export let full: boolean = false;
+	export let open: boolean = false;
+
+	interface LinkTypeLike extends LinkType {
+		[propName: string]: any;
+	}
+
+	let wrapperClass;
+	$: wrapperClass = classNames(full && 'border-y w-full', $$props.class);
+
+	let ulClass: string;
+	$: ulClass = classNames(
+		'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max',
+		full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3',
+		'text-sm font-medium',
+		full && $$slots.extra && 'md:w-2/3'
+	);
+
+	const init = (node: HTMLElement) => {
+		if (full) {
+			node.parentElement.classList.add('inset-x-0');
+		}
+	};
+</script>
+
+<Popper
+	color={full ? 'default' : 'dropdown'}
+	border={!full}
+	rounded={!full}
+	activeContent
+	arrow={false}
+	trigger="click"
+	placement="bottom"
+	yOnly={full}
+	{...$$restProps}
+	class={wrapperClass}
+	on:show
+	bind:open>
+	<div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto">
+		<ul class={ulClass}>
+			{#each items as item, index}
+				<li>
+					<slot {item} {index} />
+				</li>
+			{:else}
+				<slot />
+			{/each}
+		</ul>
+		{#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
+	</div>
+</Popper>

package/src/lib/modals/Modal.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import Frame from '../utils/Frame.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import focusTrap from '../utils/focusTrap';
+  import type { SizeType } from '$lib/types';
+
+  export let open: boolean = false;
+  export let title: string = '';
+  export let size: SizeType = 'md';
+  export let placement:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'center-left'
+    | 'center'
+    | 'center-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right' = 'center';
+  export let autoclose: boolean = false;
+  export let permanent: boolean = false;
+  export let backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'hide');
+
+  function prepareFocus(node: HTMLElement) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+    let n: Node | null;
+    while ((n = walker.nextNode())) {
+      if (n instanceof HTMLElement) {
+        const el = n as HTMLElement;
+        const [x, y] = isScrollable(el);
+        if (x || y) el.tabIndex = 0;
+      }
+    }
+    node.focus();
+  }
+
+  const getPlacementClasses = () => {
+    switch (placement) {
+      // top
+      case 'top-left':
+        return ['justify-start', 'items-start'];
+      case 'top-center':
+        return ['justify-center', 'items-start'];
+      case 'top-right':
+        return ['justify-end', 'items-start'];
+
+      // center
+      case 'center-left':
+        return ['justify-start', 'items-center'];
+      case 'center':
+        return ['justify-center', 'items-center'];
+      case 'center-right':
+        return ['justify-end', 'items-center'];
+
+      // bottom
+      case 'bottom-left':
+        return ['justify-start', 'items-end'];
+      case 'bottom-center':
+        return ['justify-center', 'items-end'];
+      case 'bottom-right':
+        return ['justify-end', 'items-end'];
+
+      default:
+        return ['justify-center', 'items-center'];
+    }
+  };
+
+  const sizes = {
+    xs: 'max-w-md',
+    sm: 'max-w-lg',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-7xl'
+  };
+
+  const onAutoClose = (e: MouseEvent) => {
+    const target: Element = e.target as Element;
+    if (autoclose && target?.tagName === 'BUTTON') open = false;
+  };
+
+  const hide = () => {
+    open = false;
+  };
+
+  let mainClass: string;
+  $: mainClass = classNames(
+    'flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full',
+    backdropClasses,
+    ...getPlacementClasses()
+  );
+
+  let frameClass: string;
+  $: frameClass = classNames('relative flex flex-col w-full h-full md:h-auto', $$props.class);
+
+  const isScrollable = (e: HTMLElement): boolean[] => [
+    e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
+    e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
+  ];
+
+  function preventWheelDefault(e: Event) {
+    // @ts-ignore
+    const [x, y] = isScrollable(this);
+    return x || y || e.preventDefault();
+  }
+
+  function handleKeys(e: KeyboardEvent) {
+    if (e.key === 'Escape' && !permanent) return hide();
+  }
+</script>
+
+{#if open}
+  <div
+    tabindex="-1"
+    class={mainClass}
+    aria-modal="true"
+    role="dialog"
+    on:keydown|preventDefault={handleKeys}
+    on:wheel|preventDefault
+    use:prepareFocus
+    use:focusTrap
+    on:click={autoclose ? onAutoClose : null}>
+    <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
+      <!-- Modal content -->
+      <Frame rounded shadow {...$$restProps} class={frameClass}>
+        <!-- Modal header -->
+        {#if $$slots.header || title}
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t border-b">
+            <slot name="header">
+              <h3
+                class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
+                {title}
+              </h3>
+            </slot>
+            {#if !permanent}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
+          </Frame>
+        {:else if !permanent}
+          <CloseButton
+            name="Close modal"
+            class="absolute top-3 right-2.5"
+            on:click={hide}
+            color={$$restProps.color} />
+        {/if}
+        <!-- Modal body -->
+        <div
+          id="modal"
+          class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
+          on:keydown|stopPropagation={handleKeys}
+          on:wheel|stopPropagation={preventWheelDefault}>
+          <slot />
+        </div>
+        <!-- Modal footer -->
+        {#if $$slots.footer}
+          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b border-t">
+            <slot name="footer" />
+          </Frame>
+        {/if}
+      </Frame>
+    </div>
+  </div>
+{/if}

package/src/lib/navbar/Menu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'bars 3';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/src/lib/navbar/NavBrand.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let href: string = '';
+</script>
+
+<a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
+	<slot />
+</a>

package/src/lib/navbar/NavDropdown.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { NavbarType } from '../types';
+	import { clickOutside } from '../utils/clickOutside';
+
+	export let liButtonClass: string = 'flex items-center justify-between w-full';
+	export let name: string;
+	export let child: NavbarType[] = [];
+	export let dropdownDiv: string = '';
+	export let dropdownLinkClassWithChild: string = undefined;
+	export let rel: string = undefined;
+
+	let hidden = true;
+	let block = false;
+
+	const handleDropdown = () => {
+		hidden = !hidden;
+		block = !block;
+	};
+
+	let liClass =
+		'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
+</script>
+
+<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
+	<button on:click={() => handleDropdown()} class={liButtonClass}
+		>{name}
+		<svg
+			class="ml-1 w-4 h-4"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		></button
+	>
+
+	<!-- Dropdown menu -->
+	<div class:hidden class="absolute {dropdownDiv} mt-8 z-10">
+		<slot>
+			<ul class="py-1" aria-labelledby="dropdownLargeButton">
+				{#each child as item}
+					<li>
+						<a
+							href={item.href}
+							{rel}
+							on:blur
+							on:change
+							on:click
+							on:focus
+							on:keydown
+							on:keypress
+							on:keyup
+							on:mouseenter
+							on:mouseleave
+							on:mouseover
+							class={dropdownLinkClassWithChild}>{item.name}</a
+						>
+					</li>
+				{/each}
+			</ul>
+		</slot>
+	</div>
+</li>

package/src/lib/navbar/NavHamburger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+	import classNames from 'classnames';
+	import Menu from './Menu.svelte';
+
+	export let btnClass: string = 'ml-3 md:hidden';
+</script>
+
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
+	<Menu class="h-6 w-6 shrink-0" />
+</ToolbarButton>

package/src/lib/navbar/NavLi.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let href: string = '';
+	export let active: boolean = false;
+	export let activeClass: string =
+		'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+	export let nonActiveClass: string =
+		'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+
+	let liClass;
+	$: liClass = classNames(
+		'block py-2 pr-4 pl-3 md:p-0 rounded md:border-0',
+		active ? activeClass : nonActiveClass,
+		$$props.class
+	);
+</script>
+
+<li>
+	<svelte:element
+		this={href ? 'a' : 'div'}
+		{href}
+		{...$$restProps}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		class={liClass}>
+		<slot />
+	</svelte:element>
+</li>

package/src/lib/navbar/NavUl.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { slide } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import Frame from '../utils/Frame.svelte';
+
+  export let divClass: string = 'w-full md:block md:w-auto';
+  export let ulClass: string =
+    'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+  export let hidden: boolean = true;
+
+  let _divClass: string;
+  $: _divClass = classNames(divClass, $$props.class);
+
+  let _ulClass: string;
+  $: _ulClass = classNames(
+    ulClass,
+    // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
+    $$props.class
+  );
+</script>
+
+{#if !hidden}
+  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
+      <slot />
+    </Frame>
+  </div>
+{:else}
+  <div {...$$restProps} class={_divClass} {hidden}>
+    <ul class={_ulClass}>
+      <slot />
+    </ul>
+  </div>
+{/if}

package/src/lib/navbar/Navbar.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Frame from '../utils/Frame.svelte';
+  import classNames from 'classnames';
+
+  export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+  export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+  export let fluid: boolean = true;
+  export let color:
+    | 'gray'
+    | 'red'
+    | 'yellow'
+    | 'green'
+    | 'indigo'
+    | 'default'
+    | 'purple'
+    | 'pink'
+    | 'blue'
+    | 'light'
+    | 'dark'
+    | 'dropdown'
+    | 'navbar'
+    | 'navbarUl'
+    | 'form'
+    | 'none' = 'navbar';
+
+  let hidden = true;
+  let toggle = () => {
+    hidden = !hidden;
+  };
+</script>
+
+<Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
+  <div class={classNames(navDivClass, fluid && 'container')}>
+    <slot {hidden} {toggle} />
+  </div>
+</Frame>

package/src/lib/paginations/Pagination.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { createEventDispatcher, setContext } from 'svelte';
+  import type { LinkType } from '../types';
+  import PaginationItem from './PaginationItem.svelte';
+
+  export let pages: LinkType[] = [];
+  export let ulClass: string = 'inline-flex -space-x-px items-center';
+  export let table: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  setContext('group', true);
+  setContext('table', table);
+
+  const previous = () => {
+    dispatch('previous');
+  };
+  const next = () => {
+    dispatch('next');
+  };
+</script>
+
+<nav aria-label="Page navigation">
+  <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
+    <li>
+      <PaginationItem on:click={previous} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+        <slot name="prev">Previous</slot>
+      </PaginationItem>
+    </li>
+    {#each pages as { name, href }}
+      <li>
+        <PaginationItem {href}>{name}</PaginationItem>
+      </li>
+    {/each}
+    <li>
+      <PaginationItem on:click={next} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+        <slot name="next">Next</slot>
+      </PaginationItem>
+    </li>
+  </ul>
+</nav>

package/src/lib/paginations/PaginationItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { getContext } from 'svelte';
+
+  export let href: string | undefined = undefined;
+
+  const group = getContext('group');
+  const table = getContext('table');
+
+  let defaultClass: string;
+  $: defaultClass = classNames(
+    'block py-2',
+    group ? 'px-3' : 'px-4',
+    'text-sm font-medium',
+    table || 'border border-gray-300',
+    group || (table ? 'rounded' : 'rounded-lg'),
+    'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
+    $$props.class
+  );
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'button'}
+  {href}
+  class={defaultClass}
+  on:blur
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  on:mouseover>
+  <slot />
+</svelte:element>