flowbite-svelte 0.26.31 → 0.27.2

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 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.2](https://github.com/themesberg/flowbite-svelte/compare/v0.27.1...v0.27.2) (2022-09-26)
+
+
+### Features
+
+* permanent option ([cceeb1b](https://github.com/themesberg/flowbite-svelte/commit/cceeb1b21995e4b386e61fa90256c7b3a304326e))
+
+### [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,20 @@
-<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 permanent = false;
+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);
-    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);
-        }
-    };
-};
-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);
-    }
-    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);
-};
+$: dispatch(open ? 'open' : 'hide');
+function grabFocus(node) {
+    node.focus();
+}
 const getPlacementClasses = () => {
     switch (placement) {
         // top
@@ -90,53 +49,81 @@ const sizes = {
     lg: 'max-w-4xl',
     xl: 'max-w-7xl'
 };
-const onButtonsClick = ({ target }) => {
-    if (autoclose && target.tagName === 'BUTTON')
-        open = !open;
+const onAutoClose = (e) => {
+    const target = e.target;
+    if (autoclose && target?.tagName === 'BUTTON')
+        open = false;
 };
 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(), $$props.class);
+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>
 
-<!-- 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"
+    on:keydown={handleKeys}
+    on:wheel|preventDefault
+    use:grabFocus
+    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>
+            {#if !permanent}<CloseButton name="Close modal" on:click={hide} />{/if}
+          </div>
+        {:else if !permanent}
+          <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"
+          on:keydown={stopArrowsPropagation}
+          on:wheel|stopPropagation={preventWheelDefault}>
+          <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,16 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Size } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         open?: boolean | undefined;
         title?: string | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        size?: Size | undefined;
         placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
         autoclose?: boolean | undefined;
+        permanent?: boolean | undefined;
         backdropClasses?: string | undefined;
     };
     events: {
-        show: CustomEvent<any>;
-        hide: CustomEvent<any>;
+        wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

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

package/types.d.ts

@@ -147,6 +147,12 @@ export interface PageType {
     pageNum: number;
     href: string;
 }
+export declare const xs = "xs";
+export declare const sm = "sm";
+export declare const md = "md";
+export declare const lg = "lg";
+export declare const xl = "xl";
+export declare type Size = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
 export interface PillTabType {
     name: string;
     selected: boolean;

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);
+    }
+  };
 }