@hashrytech/quick-components-kit 0.17.6 → 0.17.8
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
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @hashrytech/quick-components-kit
|
|
2
2
|
|
|
3
|
+
## 0.17.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- patch: removing overflow-y-auto from drawer
|
|
8
|
+
|
|
9
|
+
## 0.17.7
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- patch: adding clickOutsideClose property to Modal
|
|
14
|
+
- patch: adding clickoutside close property to Drawer
|
|
15
|
+
|
|
3
16
|
## 0.17.6
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -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,15 +109,21 @@ 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
|
-
class={twMerge("fixed bg-white
|
|
126
|
+
class={twMerge("fixed bg-white focus:outline-none", postionClasses[position], props.class)}
|
|
119
127
|
in:fly={transitionProperties}
|
|
120
128
|
out:fly={transitionProperties}
|
|
121
129
|
use:onKeydown={{key: "Escape", callback: handleKeydown}}>
|
|
@@ -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,18 @@
|
|
|
50
51
|
}
|
|
51
52
|
};
|
|
52
53
|
|
|
54
|
+
function handleOverlayClick() {
|
|
55
|
+
if(clickOutsideClose) {
|
|
56
|
+
console.log("click outside close");
|
|
57
|
+
closeModal();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
53
61
|
</script>
|
|
54
62
|
|
|
55
63
|
{#if open}
|
|
56
64
|
<Portal class="fixed z-50">
|
|
57
|
-
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={
|
|
65
|
+
<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={handleOverlayClick} />
|
|
58
66
|
<div bind:this={modalElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
|
|
59
67
|
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
68
|
use:onKeydown={{key: "Escape", callback: handleKeydown}}
|