@hashrytech/quick-components-kit 0.17.6 → 0.17.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -45,6 +45,7 @@ A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS
|
|
|
45
45
|
export type DrawerProps = {
|
|
46
46
|
open?: boolean;
|
|
47
47
|
escapeKeyClose?: boolean;
|
|
48
|
+
clickOutsideClose?: boolean;
|
|
48
49
|
disableBodyScroll?: boolean;
|
|
49
50
|
inertId?: string;
|
|
50
51
|
ariaLabel?: string;
|
|
@@ -61,7 +62,8 @@ A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS
|
|
|
61
62
|
<script lang="ts">
|
|
62
63
|
let {
|
|
63
64
|
open=$bindable(false),
|
|
64
|
-
escapeKeyClose=true,
|
|
65
|
+
escapeKeyClose=true,
|
|
66
|
+
clickOutsideClose=true,
|
|
65
67
|
disableBodyScroll=true,
|
|
66
68
|
inertId,
|
|
67
69
|
ariaLabel="Drawer",
|
|
@@ -107,13 +109,19 @@ A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS
|
|
|
107
109
|
if(inertId)
|
|
108
110
|
document.getElementById(inertId)?.removeAttribute("inert");
|
|
109
111
|
open = false;
|
|
110
|
-
};
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
function handleOverlayClick() {
|
|
115
|
+
if(clickOutsideClose) {
|
|
116
|
+
closeDrawer();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
111
119
|
|
|
112
120
|
</script>
|
|
113
121
|
|
|
114
122
|
{#if open}
|
|
115
123
|
<Portal class="fixed z-50">
|
|
116
|
-
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={
|
|
124
|
+
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={handleOverlayClick} />
|
|
117
125
|
<div bind:this={drawerElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
|
|
118
126
|
class={twMerge("fixed bg-white overflow-y-auto focus:outline-none", postionClasses[position], props.class)}
|
|
119
127
|
in:fly={transitionProperties}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
export type ModalProps = {
|
|
13
13
|
open?: boolean;
|
|
14
14
|
escapeKeyClose?: boolean;
|
|
15
|
+
clickOutsideClose?: boolean;
|
|
15
16
|
disableBodyScroll?: boolean;
|
|
16
17
|
ariaLabel?: string;
|
|
17
18
|
inertId?: string;
|
|
@@ -24,7 +25,7 @@
|
|
|
24
25
|
</script>
|
|
25
26
|
|
|
26
27
|
<script lang="ts">
|
|
27
|
-
let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, transitionDuration=config.transitionDuration, inertId, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
|
|
28
|
+
let {open=$bindable(false), escapeKeyClose=true, clickOutsideClose=true, disableBodyScroll=true, transitionDuration=config.transitionDuration, inertId, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
|
|
28
29
|
|
|
29
30
|
let modalElement: HTMLDivElement | undefined = $state();
|
|
30
31
|
|
|
@@ -50,11 +51,17 @@
|
|
|
50
51
|
}
|
|
51
52
|
};
|
|
52
53
|
|
|
54
|
+
function handleOverlayClick() {
|
|
55
|
+
if(clickOutsideClose) {
|
|
56
|
+
closeModal();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
53
60
|
</script>
|
|
54
61
|
|
|
55
62
|
{#if open}
|
|
56
63
|
<Portal class="fixed z-50">
|
|
57
|
-
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={
|
|
64
|
+
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={handleOverlayClick} />
|
|
58
65
|
<div bind:this={modalElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
|
|
59
66
|
class={twMerge("fixed w-full max-w-2xl top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-6/12 focus:outline-none bg-white rounded-primary", props.class)}
|
|
60
67
|
use:onKeydown={{key: "Escape", callback: handleKeydown}}
|