@abhivarde/svelte-drawer 0.0.4 → 0.0.5
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.
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import DrawerContent from "./DrawerContent.svelte";
|
|
3
|
+
|
|
4
|
+
type Variant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
variant = "default",
|
|
8
|
+
class: className = "",
|
|
9
|
+
children,
|
|
10
|
+
...restProps
|
|
11
|
+
}: {
|
|
12
|
+
variant?: Variant;
|
|
13
|
+
class?: string;
|
|
14
|
+
children?: any;
|
|
15
|
+
[key: string]: any;
|
|
16
|
+
} = $props();
|
|
17
|
+
|
|
18
|
+
const variantStyles: Record<Variant, string> = {
|
|
19
|
+
default:
|
|
20
|
+
"bg-gray-100 flex flex-col rounded-t-[10px] mt-24 h-fit fixed bottom-0 left-0 right-0 outline-none",
|
|
21
|
+
sheet:
|
|
22
|
+
"bg-white flex flex-col rounded-t-3xl h-[85vh] fixed bottom-0 left-0 right-0 outline-none shadow-2xl",
|
|
23
|
+
dialog:
|
|
24
|
+
"bg-white flex flex-col rounded-lg h-fit max-h-[90vh] fixed inset-0 m-auto max-w-lg outline-none shadow-xl",
|
|
25
|
+
minimal:
|
|
26
|
+
"bg-white flex flex-col h-fit fixed bottom-0 left-0 right-0 outline-none",
|
|
27
|
+
sidebar:
|
|
28
|
+
"bg-white h-full w-full max-w-sm fixed top-0 bottom-0 outline-none shadow-2xl",
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const combinedClass = $derived(
|
|
32
|
+
`${variantStyles[variant]} ${className}`.trim()
|
|
33
|
+
);
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<DrawerContent class={combinedClass} {...restProps}>
|
|
37
|
+
{@render children?.()}
|
|
38
|
+
</DrawerContent>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Variant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
variant?: Variant;
|
|
4
|
+
class?: string;
|
|
5
|
+
children?: any;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
};
|
|
8
|
+
declare const DrawerVariants: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type DrawerVariants = ReturnType<typeof DrawerVariants>;
|
|
10
|
+
export default DrawerVariants;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as Drawer } from "./components/Drawer.svelte";
|
|
2
|
-
export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
|
|
3
2
|
export { default as DrawerContent } from "./components/DrawerContent.svelte";
|
|
4
|
-
export
|
|
3
|
+
export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
|
|
4
|
+
export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
|
|
5
|
+
export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, } from "./types";
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as Drawer } from "./components/Drawer.svelte";
|
|
2
|
-
export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
|
|
3
2
|
export { default as DrawerContent } from "./components/DrawerContent.svelte";
|
|
4
|
-
export
|
|
3
|
+
export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
|
|
4
|
+
export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
|
package/dist/types.d.ts
CHANGED
|
@@ -11,3 +11,9 @@ export interface DrawerContentProps {
|
|
|
11
11
|
export interface DrawerOverlayProps {
|
|
12
12
|
class?: string;
|
|
13
13
|
}
|
|
14
|
+
export type DrawerVariant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
|
|
15
|
+
export interface DrawerVariantsProps {
|
|
16
|
+
variant?: DrawerVariant;
|
|
17
|
+
class?: string;
|
|
18
|
+
trapFocus?: boolean;
|
|
19
|
+
}
|