flowbite-svelte 0.26.31 → 0.27.1

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.1](https://github.com/themesberg/flowbite-svelte/compare/v0.27.0...v0.27.1) (2022-09-24)
+
+
+### Features
+
+* modal block background scroll ([f3eb627](https://github.com/themesberg/flowbite-svelte/commit/f3eb62732dc899d6f1483d9f86a5c644c8d2edd2))
+* modal internal scrolling ([7ca08ea](https://github.com/themesberg/flowbite-svelte/commit/7ca08ea939e0116241c564738ec237bd501ca32c))
+
+
+### Bug Fixes
+
+* placement and padding ([169c749](https://github.com/themesberg/flowbite-svelte/commit/169c749004d16d9b7c1aef46448608beefd3caf7))
+
+## [0.27.0](https://github.com/themesberg/flowbite-svelte/compare/v0.26.31...v0.27.0) (2022-09-24)
+
+
+### Features
+
+* add server hooks to redirect component pages and add redirect.spec test ([9e2cb72](https://github.com/themesberg/flowbite-svelte/commit/9e2cb72653cb2de16f77c30d73bd69a69bd73bd5))
+
+
+### Bug Fixes
+
+* add other dir ([dc5e73f](https://github.com/themesberg/flowbite-svelte/commit/dc5e73feaa44c3fc7f020967f2e342b08bafccdf))
+* add redirect to all other directories ([6ca9ce0](https://github.com/themesberg/flowbite-svelte/commit/6ca9ce0c38c2a417fc1bcd88520e609a0e1b2b0e))
+
 ### [0.26.31](https://github.com/themesberg/flowbite-svelte/compare/v0.26.30...v0.26.31) (2022-09-23)
 
 

package/modals/Modal.svelte

@@ -1,61 +1,53 @@
-<script>import Frame from '../utils/Frame.svelte';
+<script>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';
 export let open = false;
-export let title = undefined;
+export let title = '';
 export let size = 'md';
 export let placement = 'center';
 export let autoclose = true;
-export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 const dispatch = createEventDispatcher();
-const allPlacementClasses = [
-    'justify-start',
-    'justify-center',
-    'justify-end',
-    'items-start',
-    'items-center',
-    'items-end'
-];
-let backdropEl;
-const init = (node, _open) => {
-    getPlacementClasses().map((c) => node.classList.add(c));
-    _open && createBackdrop(node);
+function blockEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    return false;
+}
+function contentInit(node) {
+    function keydownHandler(e) {
+        if (open && e.key === 'Escape')
+            return hide();
+        const target = e.target;
+        if (node.contains(target))
+            return true;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp')
+            return blockEvent(e);
+        return true;
+    }
+    document.addEventListener('keydown', keydownHandler, { passive: false });
+    node.focus();
     return {
-        update(_open) {
-            allPlacementClasses.map((c) => node.classList.remove(c));
-            getPlacementClasses().map((c) => node.classList.add(c));
-            _open ? createBackdrop(node) : destroyBackdrop(node);
-        },
         destroy() {
-            destroyBackdrop(node);
+            document.removeEventListener('keydown', keydownHandler);
         }
     };
-};
-const handleEscape = (e) => {
-    if (open && e.key === 'Escape')
-        open = false;
-};
-const createBackdrop = (node) => {
-    if (!backdropEl) {
-        backdropEl = document.createElement('div');
-        backdropEl.classList.add(...backdropClasses.split(' '));
-        const body = document.querySelector('body');
-        body.append(backdropEl);
-        body.style.overflow = 'hidden';
-        document.addEventListener('keydown', handleEscape, true);
+}
+function init(node) {
+    function preventScroll(e) {
+        if (e.target === node)
+            return blockEvent(e);
     }
+    node.addEventListener('wheel', preventScroll, { passive: false });
     dispatch('show', node);
-};
-const destroyBackdrop = (node) => {
-    const body = document.querySelector('body');
-    body.style.overflow = 'auto';
-    if (backdropEl)
-        backdropEl.remove();
-    backdropEl = undefined;
-    document.removeEventListener('keydown', handleEscape, true);
-    dispatch('hide', node);
-};
+    return {
+        destroy() {
+            node.removeEventListener('wheel', preventScroll);
+            dispatch('hide', node);
+        }
+    };
+}
 const getPlacementClasses = () => {
     switch (placement) {
         // top
@@ -90,53 +82,60 @@ const sizes = {
     lg: 'max-w-4xl',
     xl: 'max-w-7xl'
 };
-const onButtonsClick = ({ target }) => {
-    if (autoclose && target.tagName === 'BUTTON')
+const onAutoClose = (e) => {
+    const target = e.target;
+    if (autoclose && target?.tagName === 'BUTTON')
         open = !open;
 };
 const hide = () => {
     open = false;
 };
+let mainClass;
+$: 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().join(' '), $$props.class);
 </script>
 
 <!-- Main modal -->
-<div
-	tabindex="-1"
-	class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full"
-	class:flex={open}
-	class:hidden={!open}
-	aria-hidden={open ? undefined : 'true'}
-	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">
-		<!-- Modal content -->
-		<Frame rounded shadow class="relative">
-			<!-- Modal header -->
-			{#if $$slots.header || title}
-				<div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
-					<slot name="header">
-						<h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
-							{title}
-						</h3>
-					</slot>
-					<CloseButton name="Close modal" on:click={hide} />
-				</div>
-			{:else}
-				<CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
-			{/if}
-			<!-- Modal body -->
-			<div class="p-6 space-y-6">
-				<slot />
-			</div>
-			<!-- Modal footer -->
-			{#if $$slots.footer}
-				<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-					<slot name="footer" />
-				</div>
-			{/if}
-		</Frame>
-	</div>
-</div>
+{#if open}
+  <div
+    tabindex="-1"
+    class={mainClass}
+    aria-modal="true"
+    role="dialog"
+    use:init
+    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 class="relative flex flex-col w-full h-full md:h-auto">
+        <!-- Modal header -->
+        {#if $$slots.header || title}
+          <div
+            class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
+            <slot name="header">
+              <h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
+                {title}
+              </h3>
+            </slot>
+            <CloseButton name="Close modal" on:click={hide} />
+          </div>
+        {:else}
+          <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
+        {/if}
+        <!-- Modal body -->
+        <div
+          class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
+          tabindex="0"
+          use:contentInit>
+          <slot />
+        </div>
+        <!-- Modal footer -->
+        {#if $$slots.footer}
+          <div
+            class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+            <slot name="footer" />
+          </div>
+        {/if}
+      </Frame>
+    </div>
+  </div>
+{/if}

package/modals/Modal.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         open?: boolean | undefined;
         title?: string | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.31",
+  "version": "0.27.1",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/utils/focusTrap.d.ts

@@ -1,4 +1,3 @@
-export default function focusTrap(node: any, _open: any): {
-    update(_open: any): void;
+export default function focusTrap(node: any): {
     destroy(): void;
 };

package/utils/focusTrap.js

@@ -4,58 +4,45 @@
 
 // add all the elements inside modal which you want to make focusable
 const focusableElements =
-	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
 function getFocusable(node) {
-	const focusableContent = node.querySelectorAll(focusableElements);
-	return [focusableContent[0], focusableContent[focusableContent.length - 1]];
+  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);
-		}
-	};
+export default function focusTrap(node) {
+  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();
+      }
+    }
+  }
+
+  [firstFocusableElement, lastFocusableElement] = getFocusable(node);
+  document.addEventListener('keydown', handleFocusTrap, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('keydown', handleFocusTrap, true);
+    }
+  };
 }