flowbite-svelte 0.22.20 → 0.22.23

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.22.23](https://github.com/themesberg/flowbite-svelte/compare/v0.22.22...v0.22.23) (2022-07-29)
+
+
+### Bug Fixes
+
+* minor fixes / fine tuning ([57c1cf7](https://github.com/themesberg/flowbite-svelte/commit/57c1cf7f1bd461c417be1fd925766c045d72c015))
+
+### [0.22.22](https://github.com/themesberg/flowbite-svelte/compare/v0.22.21...v0.22.22) (2022-07-28)
+
+
+### Features
+
+* focus trap for modals ([08604ac](https://github.com/themesberg/flowbite-svelte/commit/08604ac3475f28a5a35c037e47ecfc13ee13b877))
+
+### [0.22.21](https://github.com/themesberg/flowbite-svelte/compare/v0.22.20...v0.22.21) (2022-07-28)
+
+
+### Bug Fixes
+
+* megamenu centered in small screen ([713aa9a](https://github.com/themesberg/flowbite-svelte/commit/713aa9ab5d1c390291bb61910f9eae4b68d5981e))
+
 ### [0.22.20](https://github.com/themesberg/flowbite-svelte/compare/v0.22.19...v0.22.20) (2022-07-28)
 
 ### [0.22.19](https://github.com/themesberg/flowbite-svelte/compare/v0.22.17...v0.22.19) (2022-07-27)

package/alerts/Alert.svelte

@@ -1,7 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 const dispatch = createEventDispatcher();
+setContext('background', true);
 export let color = 'blue';
 export let icon = null;
 export let dismissable = false;
@@ -48,13 +50,11 @@ const textColors = {
     dark: 'text-gray-700  dark:text-gray-300'
 };
 let divClass;
-$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', $$props.class);
-let textColor;
-$: textColor = textColors[color] ?? textColors.blue;
+$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);
 </script>
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
-	<div class="flex items-center {textColor}">
+	<div class="flex items-center">
 		{#if icon}
 			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
 		{/if}

package/forms/Checkbox.svelte

@@ -37,6 +37,7 @@ $: {
 		type="checkbox"
 		bind:checked
 		on:click
+		on:change
 		{value}
 		{...$$restProps}
 		class={inputClass(custom, color, true, background, $$slots.default || $$props.class)}

package/forms/Checkbox.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/forms/Toggle.svelte

@@ -26,7 +26,7 @@ let divClass;
 $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click>
+<Checkbox custom {...$$restProps} class={$$props.class}	{value}	bind:checked bind:group	on:click on:change>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/megamenu/MegaMenu.svelte

@@ -6,7 +6,7 @@ setContext('background', true);
 let wrapperClass;
 $: wrapperClass = classNames('border-gray-100 shadow-md dark:border-gray-700', full ? 'border-y' : 'rounded-lg border', full ? 'bg-white dark:bg-gray-800' : 'bg-white dark:bg-gray-700', $$props.class);
 let ulClass;
-$: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'sm:grid-cols-2' : 'sm:grid-cols-2 md:grid-cols-3', 'text-sm font-medium', 'text-gray-500 dark:text-gray-400', full && $$slots.extra && 'md:w-2/3');
+$: 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', 'text-gray-500 dark:text-gray-400', full && $$slots.extra && 'md:w-2/3');
 function init(node) {
     if (full) {
         node.parentElement.classList.add('inset-x-0');

package/modals/Modal.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { setContext } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
+import focusTrap from '../utils/focusTrap';
 export let open = false;
 export let title = undefined;
 export let size = 'md';
@@ -18,15 +19,14 @@ const allPlacementClasses = [
     'items-end'
 ];
 let backdropEl;
-function init(node, _visible) {
+function init(node, _open) {
     getPlacementClasses().map((c) => node.classList.add(c));
-    if (_visible)
-        createBackdrop(node);
+    _open && createBackdrop(node);
     return {
-        update(_visible) {
+        update(_open) {
             allPlacementClasses.map((c) => node.classList.remove(c));
             getPlacementClasses().map((c) => node.classList.add(c));
-            _visible ? createBackdrop(node) : destroyBackdrop(node);
+            _open ? createBackdrop(node) : destroyBackdrop(node);
         },
         destroy() {
             destroyBackdrop(node);
@@ -44,17 +44,17 @@ function createBackdrop(node) {
         const body = document.querySelector('body');
         body.append(backdropEl);
         body.style.overflow = 'hidden';
-        body.addEventListener('keydown', handleEscape, true);
+        document.addEventListener('keydown', handleEscape, true);
     }
     dispatch('show', node);
 }
 function destroyBackdrop(node) {
     const body = document.querySelector('body');
     body.style.overflow = 'auto';
-    body.removeEventListener('keydown', handleEscape, true);
     if (backdropEl)
         backdropEl.remove();
     backdropEl = undefined;
+    document.removeEventListener('keydown', handleEscape, true);
     dispatch('hide', node);
 }
 function getPlacementClasses() {
@@ -110,6 +110,7 @@ function hide() {
 	aria-modal={open ? 'true' : undefined}
 	role={open ? 'dialog' : undefined}
 	use:init={open}
+	use:focusTrap={open}
 	on:click={onButtonsClick}
 >
 	<div class="relative p-4 w-full {sizes[size]} h-full md:h-auto">

package/navbar/NavDropdown.svelte

@@ -1,5 +1,5 @@
 <script>import { clickOutside } from '../utils/clickOutside';
-export let liButtonClass = 'flex items-center';
+export let liButtonClass = 'flex items-center justify-between w-full';
 export let name;
 export let child = [];
 let hidden = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.20",
+  "version": "0.22.23",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -236,6 +236,7 @@
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/OptsButton.svelte": "./utils/OptsButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
+    "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"

package/utils/focusTrap.js

@@ -0,0 +1,61 @@
+//
+// Focus trap copied from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
+//
+
+// add all the elements inside modal which you want to make focusable
+const focusableElements =
+	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+function getFocusable(node) {
+	const focusableContent = node.querySelectorAll(focusableElements);
+	return [focusableContent[0], focusableContent[focusableContent.length - 1]];
+}
+
+export default function focusTrap(node, _open) {
+	let firstFocusableElement, lastFocusableElement; // first and last element to be focused inside modal
+
+	function handleFocusTrap(e) {
+		let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+		if (!isTabPressed) {
+			return;
+		}
+
+		if (e.shiftKey) {
+			// if shift key pressed for shift + tab combination
+			if (document.activeElement === firstFocusableElement) {
+				lastFocusableElement.focus(); // add focus for the last focusable element
+				e.preventDefault();
+			}
+		} else {
+			// if tab key is pressed
+			if (document.activeElement === lastFocusableElement) {
+				// if focused has reached to last focusable element then focus first focusable element after pressing tab
+				firstFocusableElement.focus(); // add focus for the first focusable element
+				e.preventDefault();
+			}
+		}
+	}
+
+	if (_open) {
+		[firstFocusableElement, lastFocusableElement] = getFocusable(node);
+		document.addEventListener('keydown', handleFocusTrap, true);
+		firstFocusableElement.focus();
+	}
+
+	return {
+		update(_open) {
+			if (_open) {
+				[firstFocusableElement, lastFocusableElement] = getFocusable(node);
+				document.addEventListener('keydown', handleFocusTrap, true);
+				firstFocusableElement.focus();
+			} else {
+				document.removeEventListener('keydown', handleFocusTrap, true);
+			}
+		},
+
+		destroy() {
+			document.removeEventListener('keydown', handleFocusTrap, true);
+		}
+	};
+}