@hashrytech/quick-components-kit 0.6.1 → 0.7.0
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,11 +1,11 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { ClassNameValue } from 'tailwind-merge';
|
|
3
3
|
|
|
4
|
-
export type
|
|
4
|
+
export type HamburgerProps = {
|
|
5
5
|
open?: boolean;
|
|
6
|
+
useCloseBtn?: boolean;
|
|
6
7
|
ariaLabel: string;
|
|
7
8
|
linesClasses?: string;
|
|
8
|
-
numberOfLines?: number;
|
|
9
9
|
onclick?: (event: MouseEvent) => void;
|
|
10
10
|
class?: ClassNameValue;
|
|
11
11
|
};
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
<script lang="ts">
|
|
16
16
|
import {twMerge} from 'tailwind-merge';
|
|
17
17
|
|
|
18
|
-
let { open=$bindable(true), ariaLabel, linesClasses,
|
|
18
|
+
let { open=$bindable(true), ariaLabel, linesClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
|
|
19
19
|
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
<!--
|
|
23
|
+
<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} aria-label={ariaLabel} {onclick}>
|
|
24
24
|
<div class="space-y-2">
|
|
25
25
|
{#each Array(numberOfLines) as _}
|
|
26
26
|
<span class={twMerge("block w-7 h-0.5 bg-button-primary", linesClasses)}></span>
|
|
@@ -28,3 +28,24 @@
|
|
|
28
28
|
</div>
|
|
29
29
|
</button>
|
|
30
30
|
|
|
31
|
+
<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} aria-label={ariaLabel} {onclick}>
|
|
32
|
+
<div class="relative w-7 h-7">
|
|
33
|
+
<span class={twMerge("absolute left-0 top-1.5 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "rotate-45 top-3.5" : "")}></span>
|
|
34
|
+
<span class={twMerge("absolute left-0 top-3.5 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "opacity-0" : "opacity-100")}></span>
|
|
35
|
+
<span class={twMerge("absolute left-0 bottom-1 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "-rotate-45 top-3.5" : "")}></span>
|
|
36
|
+
</div>
|
|
37
|
+
</button>
|
|
38
|
+
-->
|
|
39
|
+
|
|
40
|
+
<button aria-label={ariaLabel} class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} {onclick}>
|
|
41
|
+
<div class="flex flex-col items-center justify-center size-7 transition-all gap-2">
|
|
42
|
+
<!-- Top bar -->
|
|
43
|
+
<span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "rotate-45 translate-y-2.5" : "", linesClasses)}></span>
|
|
44
|
+
|
|
45
|
+
<!-- Middle bar -->
|
|
46
|
+
<span class={twMerge("h-0.5 w-7 bg-button-primary transition-opacity duration-300", open && useCloseBtn ? "opacity-0" : "opacity-100", linesClasses)}></span>
|
|
47
|
+
|
|
48
|
+
<!-- Bottom bar -->
|
|
49
|
+
<span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "-rotate-45 -translate-y-2.5" : "", linesClasses)}></span>
|
|
50
|
+
</div>
|
|
51
|
+
</button>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { ClassNameValue } from 'tailwind-merge';
|
|
2
|
-
export type
|
|
2
|
+
export type HamburgerProps = {
|
|
3
3
|
open?: boolean;
|
|
4
|
+
useCloseBtn?: boolean;
|
|
4
5
|
ariaLabel: string;
|
|
5
6
|
linesClasses?: string;
|
|
6
|
-
numberOfLines?: number;
|
|
7
7
|
onclick?: (event: MouseEvent) => void;
|
|
8
8
|
class?: ClassNameValue;
|
|
9
9
|
};
|
|
10
|
-
declare const HamburgerMenu: import("svelte").Component<
|
|
10
|
+
declare const HamburgerMenu: import("svelte").Component<HamburgerProps, {}, "open">;
|
|
11
11
|
type HamburgerMenu = ReturnType<typeof HamburgerMenu>;
|
|
12
12
|
export default HamburgerMenu;
|