flowbite-svelte 0.27.1 → 0.27.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

package/modals/Modal.svelte

@@ -8,45 +8,12 @@ export let title = '';
 export let size = 'md';
 export let placement = 'center';
 export let autoclose = true;
+export let permanent = false;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 const dispatch = createEventDispatcher();
-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 });
+$: dispatch(open ? 'open' : 'hide');
+function grabFocus(node) {
     node.focus();
-    return {
-        destroy() {
-            document.removeEventListener('keydown', keydownHandler);
-        }
-    };
-}
-function init(node) {
-    function preventScroll(e) {
-        if (e.target === node)
-            return blockEvent(e);
-    }
-    node.addEventListener('wheel', preventScroll, { passive: false });
-    dispatch('show', node);
-    return {
-        destroy() {
-            node.removeEventListener('wheel', preventScroll);
-            dispatch('hide', node);
-        }
-    };
 }
 const getPlacementClasses = () => {
     switch (placement) {
@@ -85,23 +52,45 @@ const sizes = {
 const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
-        open = !open;
+        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().join(' '), $$props.class);
+$: 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 -->
 {#if open}
   <div
     tabindex="-1"
     class={mainClass}
     aria-modal="true"
     role="dialog"
-    use:init
+    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">
@@ -109,23 +98,22 @@ $: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50
       <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">
+          <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} />
+            {#if !permanent}<CloseButton name="Close modal" on:click={hide} />{/if}
           </div>
-        {:else}
+        {: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"
-          tabindex="0"
-          use:contentInit>
+          on:keydown={stopArrowsPropagation}
+          on:wheel|stopPropagation={preventWheelDefault}>
           <slot />
         </div>
         <!-- Modal footer -->

package/modals/Modal.svelte.d.ts

@@ -1,17 +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.27.1",
+  "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;