flowbite-svelte 0.27.6 → 0.27.8

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.27.8](https://github.com/themesberg/flowbite-svelte/compare/v0.27.7...v0.27.8) (2022-10-17)
+
+### [0.27.7](https://github.com/themesberg/flowbite-svelte/compare/v0.27.6...v0.27.7) (2022-10-17)
+
+
+### Bug Fixes
+
+* [#376](https://github.com/themesberg/flowbite-svelte/issues/376) ([#378](https://github.com/themesberg/flowbite-svelte/issues/378)) ([8b4c2e3](https://github.com/themesberg/flowbite-svelte/commit/8b4c2e3200c73448aa34f921738e8ea8d10ee538))
+* card - restProps ([#373](https://github.com/themesberg/flowbite-svelte/issues/373)) ([a7331fc](https://github.com/themesberg/flowbite-svelte/commit/a7331fcd5915e6142a99859113776ce74a72529a))
+* flitering ([#370](https://github.com/themesberg/flowbite-svelte/issues/370)) ([e8ac071](https://github.com/themesberg/flowbite-svelte/commit/e8ac07134518a373949da3fadc4f63c656fe2d59))
+* modal arrow keys ([#369](https://github.com/themesberg/flowbite-svelte/issues/369)) ([2a8bc1c](https://github.com/themesberg/flowbite-svelte/commit/2a8bc1c156c66a3dc0569312343b6f6b65a051ea))
+* remove |local from Frame componentso that toast transitions work ([6da412c](https://github.com/themesberg/flowbite-svelte/commit/6da412c0665f27a6f9dd33bbf89758c4a924d239))
+
 ### [0.27.6](https://github.com/themesberg/flowbite-svelte/compare/v0.27.5...v0.27.6) (2022-10-09)
 
 

package/README.md

@@ -446,4 +446,4 @@ Please read [How to contribute](https://github.com/themesberg/flowbite-svelte/bl
 
 ## Changelog
 
-[Changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md)
+[Changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md)

package/accordions/Accordion.svelte

@@ -4,7 +4,7 @@
 <script>import Frame from '../utils/Frame.svelte';
 import classNames from 'classnames';
 import { setContext } from 'svelte';
-export let single = true;
+export let multiple = false;
 export let flush = false;
 export let activeClasses = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
 export let inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
@@ -13,7 +13,7 @@ const ctx = {
     flush,
     activeClasses,
     inactiveClasses,
-    selected: single ? writable() : undefined
+    selected: multiple ? undefined : writable()
 };
 setContext('ctx', ctx);
 let frameClass = classNames(defaultClass, 'divide-y divide-gray-200 dark:divide-gray-700', 'border-gray-200 dark:border-gray-700', 'rounded-t-xl', $$props.class);

package/accordions/Accordion.svelte.d.ts

@@ -9,7 +9,7 @@ export interface AccordionCtxType {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        single?: boolean | undefined;
+        multiple?: boolean | undefined;
         flush?: boolean | undefined;
         activeClasses?: string | undefined;
         inactiveClasses?: string | undefined;

package/accordions/AccordionItem.svelte

@@ -12,8 +12,10 @@ const ctx = getContext('ctx') ?? {};
 // single selection
 const self = {};
 const selected = ctx.selected ?? writable();
+let _open = open;
+open = false;
 onMount(() => {
-    if (open)
+    if (_open)
         $selected = self;
     // this will trigger unsubscribe on destroy
     return selected.subscribe((x) => (open = x === self));

package/cards/Card.svelte

@@ -28,7 +28,7 @@ let imgClass;
 $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
-<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} class={cardClass}>
+<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} {...$$restProps} class={cardClass}>
   {#if img}
     <img class={imgClass} src={img} alt="" />
     <div class={innerPdding}>

package/carousels/Thumbnail.svelte

@@ -6,6 +6,7 @@ export let thumbWidth;
 export let selected = false;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <img
   class="opacity-40"
   class:active={selected}

package/drawer/Drawer.svelte

@@ -43,7 +43,7 @@ let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backd
 
 {#if !hidden}
   {#if backdrop && activateClickOutside}
-    <div class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
   {/if}
   {#if activateClickOutside}
     <div

package/index.d.ts

@@ -91,10 +91,8 @@ export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
 export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
-export { default as TabHead } from './tabs/TabHead.svelte';
-export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
-export { default as TabContentItem } from './tabs/TabContentItem.svelte';
-export { default as TabWrapper } from './tabs/TabWrapper.svelte';
+export { default as TabItem } from './tabs/TabItem.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';
 export { default as Activity } from './timelines/Activity.svelte';

package/index.js

@@ -120,10 +120,8 @@ export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
 // Tabs
-export { default as TabHead } from './tabs/TabHead.svelte';
-export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
-export { default as TabContentItem } from './tabs/TabContentItem.svelte';
-export { default as TabWrapper } from './tabs/TabWrapper.svelte';
+export { default as TabItem } from './tabs/TabItem.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
 // Timeline
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';

package/modals/Modal.svelte

@@ -12,7 +12,17 @@ export let permanent = false;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 const dispatch = createEventDispatcher();
 $: dispatch(open ? 'open' : 'hide');
-function grabFocus(node) {
+function prepareFocus(node) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+    let n;
+    while ((n = walker.nextNode())) {
+        if (n instanceof HTMLElement) {
+            const el = n;
+            const [x, y] = isScrollable(el);
+            if (x || y)
+                el.tabIndex = 0;
+        }
+    }
     node.focus();
 }
 const getPlacementClasses = () => {
@@ -63,22 +73,14 @@ const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
 ];
-const isArrowKey = (e, x, y) => (x && ['ArrowLeft', 'ArrowRight'].includes(e.key)) || (y && ['ArrowDown', 'ArrowUp'].includes(e.key));
 function preventWheelDefault(e) {
     // @ts-ignore
     const [x, y] = isScrollable(this);
     return x || y || e.preventDefault();
 }
-function stopArrowsPropagation(e) {
-    // @ts-ignore
-    const [x, y] = isScrollable(this);
-    if (isArrowKey(e, x, y))
-        e.stopPropagation();
-}
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
         return hide();
-    return isArrowKey(e, true, true) ? e.preventDefault() : true;
 }
 </script>
 
@@ -88,9 +90,9 @@ function handleKeys(e) {
     class={mainClass}
     aria-modal="true"
     role="dialog"
-    on:keydown={handleKeys}
+    on:keydown|preventDefault={handleKeys}
     on:wheel|preventDefault
-    use:grabFocus
+    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">
@@ -111,8 +113,9 @@ function handleKeys(e) {
         {/if}
         <!-- Modal body -->
         <div
+          id="modal"
           class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
-          on:keydown={stopArrowsPropagation}
+          on:keydown|stopPropagation={handleKeys}
           on:wheel|stopPropagation={preventWheelDefault}>
           <slot />
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.6",
+  "version": "0.27.8",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -13,7 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@playwright/test": "^1.25.0",
-    "@sveltejs/adapter-auto": "1.0.0-next.75",
+    "@sveltejs/adapter-vercel": "1.0.0-next.78",
     "@sveltejs/kit": "1.0.0-next.484",
     "@sveltejs/package": "1.0.0-next.3",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -205,10 +205,10 @@
     "./tables/TableHead.svelte": "./tables/TableHead.svelte",
     "./tables/TableHeadCell.svelte": "./tables/TableHeadCell.svelte",
     "./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
-    "./tabs/TabContentItem.svelte": "./tabs/TabContentItem.svelte",
     "./tabs/TabHead.svelte": "./tabs/TabHead.svelte",
     "./tabs/TabHeadItem.svelte": "./tabs/TabHeadItem.svelte",
-    "./tabs/TabWrapper.svelte": "./tabs/TabWrapper.svelte",
+    "./tabs/TabItem.svelte": "./tabs/TabItem.svelte",
+    "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
     "./timelines/Group.svelte": "./timelines/Group.svelte",

package/tabs/TabHead.svelte

@@ -1,12 +1,13 @@
 <script>export let tabStyle = 'default';
 export let customDivClass = '';
 export let customUlClass = '';
+const border = 'border-b border-gray-200 dark:border-gray-700';
 const divClasses = {
-    default: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    default: 'mb-4 ' + border,
     full: 'mb-4',
-    icon: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    icon: 'mb-4 ' + border,
     pill: 'mb-4 ',
-    underline: 'mb-4 text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700',
+    underline: 'mb-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 ' + border,
     custom: customDivClass
 };
 const ulClasses = {

package/tabs/TabHeadItem.svelte

@@ -5,6 +5,9 @@ export let activeTabValue;
 export let customActiveClass = '';
 export let customInActiveClass = '';
 export let customLiClass = '';
+import { getContext } from 'svelte';
+const ctx = getContext('ctx') ?? {};
+tabStyle = ctx.style;
 const activeClasses = {
     default: 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
     full: 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white',

package/tabs/TabItem.svelte

@@ -0,0 +1,53 @@
+<script>import { getContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+export let open = false;
+export let title = 'Tab title';
+export let activeClasses = undefined;
+export let inactiveClasses = undefined;
+export let defaultClass = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+const ctx = getContext('ctx') ?? {};
+// single selection
+const selected = ctx.selected ?? writable();
+function init(node) {
+    selected.set(node);
+    const destroy = selected.subscribe((x) => {
+        if (x !== node) {
+            open = false;
+        }
+    });
+    return { destroy };
+}
+let buttonClass;
+$: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
+// $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
+);
+</script>
+
+<li class={classNames('group', $$props.class)} role="presentation">
+  <button
+    type="button"
+    on:click={() => (open = true)}
+    on:blur
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    role="tab"
+    {...$$restProps}
+    class={buttonClass}>
+    <slot name="title">{title}</slot>
+  </button>
+
+  {#if open}
+    <div class="hidden tab_content_placeholder">
+      <div use:init>
+        <slot />
+      </div>
+    </div>
+  {/if}
+</li>

package/tabs/TabItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        title?: string | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export declare type TabItemProps = typeof __propDef.props;
+export declare type TabItemEvents = typeof __propDef.events;
+export declare type TabItemSlots = typeof __propDef.slots;
+export default class TabItem extends SvelteComponentTyped<TabItemProps, TabItemEvents, TabItemSlots> {
+}
+export {};

package/tabs/Tabs.svelte

@@ -0,0 +1,50 @@
+<script context="module">import { writable } from 'svelte/store';
+// styles
+const styledActiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
+    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
+    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500',
+    none: ''
+};
+const styledInactiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
+    none: ''
+};
+</script>
+
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let style = 'none';
+export let defaultClass = 'flex flex-wrap space-x-2';
+export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+export let divider = true;
+export let activeClasses = 'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+export let inactiveClasses = 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
+const ctx = {
+    activeClasses: styledActiveClasses[style] || activeClasses,
+    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
+    selected: writable()
+};
+$: divider = ['full', 'pill'].includes(style) ? false : divider;
+setContext('ctx', ctx);
+function init(node) {
+    const destroy = ctx.selected.subscribe((x) => {
+        if (x)
+            node.replaceChildren(x);
+    });
+    return { destroy };
+}
+$: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+</script>
+
+<ul class={ulClass}>
+  <slot {style} />
+</ul>
+{#if divider}
+  <slot name="divider">
+    <div class="h-px bg-gray-200 dark:bg-gray-700" />
+  </slot>
+{/if}
+<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />

package/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface TabCtxType {
+    activeClasses: string;
+    inactiveClasses: string;
+    selected: Writable<HTMLElement>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        style?: "none" | "pill" | "underline" | "full" | undefined;
+        defaultClass?: string | undefined;
+        contentClass?: string | undefined;
+        divider?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            style: "none" | "pill" | "underline" | "full";
+        };
+        divider: {};
+    };
+};
+export declare type TabsProps = typeof __propDef.props;
+export declare type TabsEvents = typeof __propDef.events;
+export declare type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/utils/Frame.svelte

@@ -82,7 +82,7 @@ $: divClass = classNames(bgColors[color], textColors[color], rounded && (color =
   this={tag}
   use:use={options}
   bind:this={node}
-  transition:transitionFunc|local={params}
+  transition:transitionFunc={params}
   {...$$restProps}
   class={divClass}
   on:mouseenter

package/tabs/TabContentItem.svelte

@@ -1,10 +0,0 @@
-<script>export let activeTabValue;
-export let id;
-export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
-</script>
-
-{#if activeTabValue === id}
-	<div class={contentDivClass} id="{id}-tabitem" role="tabpanel" aria-labelledby="{id}-tab">
-		<slot />
-	</div>
-{/if}

package/tabs/TabContentItem.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        activeTabValue: number;
-        id: number;
-        contentDivClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type TabContentItemProps = typeof __propDef.props;
-export declare type TabContentItemEvents = typeof __propDef.events;
-export declare type TabContentItemSlots = typeof __propDef.slots;
-export default class TabContentItem extends SvelteComponentTyped<TabContentItemProps, TabContentItemEvents, TabContentItemSlots> {
-}
-export {};

package/tabs/TabWrapper.svelte

@@ -1,8 +0,0 @@
-<script>import classNames from 'classnames';
-export let divClass = 'w-full';
-export let tabStyle = 'default';
-</script>
-
-<div class={classNames(divClass, $$props.class)}>
-  <slot {tabStyle} />
-</div>

package/tabs/TabWrapper.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            tabStyle: "default" | "icon" | "custom" | "pill" | "underline" | "full";
-        };
-    };
-};
-export declare type TabWrapperProps = typeof __propDef.props;
-export declare type TabWrapperEvents = typeof __propDef.events;
-export declare type TabWrapperSlots = typeof __propDef.slots;
-export default class TabWrapper extends SvelteComponentTyped<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
-}
-export {};