@r2digisolutions/ui 0.20.1 → 0.21.0

package/dist/components/index.d.ts

@@ -21,4 +21,10 @@ import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
 import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
-export { Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import Dialog from './ui/Dialog/Dialog.svelte';
+import DialogHeader from './ui/Dialog/DialogHeader.svelte';
+import DialogTitle from './ui/Dialog/DialogTitle.svelte';
+import DialogDescription from './ui/Dialog/DialogDescription.svelte';
+import DialogContent from './ui/Dialog/DialogContent.svelte';
+import DialogFooter from './ui/Dialog/DialogFooter.svelte';
+export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/index.js

@@ -21,4 +21,10 @@ import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
 import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
-export { Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import Dialog from './ui/Dialog/Dialog.svelte';
+import DialogHeader from './ui/Dialog/DialogHeader.svelte';
+import DialogTitle from './ui/Dialog/DialogTitle.svelte';
+import DialogDescription from './ui/Dialog/DialogDescription.svelte';
+import DialogContent from './ui/Dialog/DialogContent.svelte';
+import DialogFooter from './ui/Dialog/DialogFooter.svelte';
+export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/ui/Dialog/Dialog.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import type { DialogProps } from './type.js';
+	import { createDialogContext } from './context.svelte';
+	import { tick } from 'svelte';
+
+	let {
+		open = $bindable(),
+		padding = 'md',
+		children,
+		header,
+		footer,
+		onclose,
+		size = 'lg',
+		onOpenChange,
+		closedby = 'any',
+		...props
+	}: DialogProps = $props();
+
+	const cx = createDialogContext(() => open, { onOpenChange });
+
+	const _onclose = async () => {
+		open = false;
+		await tick();
+		onclose?.();
+	};
+
+	const paddings: Record<typeof padding, string> = {
+		none: 'p-0',
+		sm: 'md:p-4 p-4',
+		md: 'md:p-6 p-4',
+		lg: 'md:p-8 p-4'
+	};
+
+	const sizes: Record<typeof size, string> = {
+		auto: 'w-auto',
+		sm: 'w-full md:max-w-sm',
+		md: 'w-full md:max-w-md',
+		lg: 'w-full md:max-w-lg',
+		xl: 'w-full md:max-w-xl',
+		'2xl': 'w-full md:max-w-2xl',
+		'3xl': 'w-full md:max-w-3xl',
+		'4xl': 'w-full md:max-w-4xl',
+		'5xl': 'w-full md:max-w-5xl',
+		'6xl': 'w-full md:max-w-6xl',
+		'7xl': 'w-full md:max-w-7xl',
+		full: 'w-full md:max-w-full h-full md:h-full'
+	};
+
+	$effect(() => {
+		if (open) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = 'auto';
+		}
+	});
+</script>
+
+{#if cx.open}
+	<dialog
+		{...props}
+		{closedby}
+		onclose={_onclose}
+		transition:fly={{ y: 100, duration: 200 }}
+		bind:this={cx.ref_dialog}
+		aria-modal="true"
+		class={[
+			'fixed inset-0 flex h-full max-h-full w-full max-w-full flex-col gap-4 overflow-hidden bg-white shadow-lg duration-200 backdrop:bg-black/50 backdrop:backdrop-blur-xs md:m-auto md:h-fit dark:border-gray-600 dark:bg-gray-800',
+			props.class,
+			// paddings[padding],
+			sizes[size],
+			{
+				'sm:rounded-lg': size !== 'full'
+			}
+		]}
+	>
+		{#if header}
+			{@render header()}
+		{/if}
+		{@render children()}
+		{#if footer}
+			{@render footer()}
+		{/if}
+	</dialog>
+{/if}

package/dist/components/ui/Dialog/Dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps } from './type.js';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/ui/Dialog/DialogContent.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { DialogContentProps } from './type.js';
+
+	let { children, padding = 'md', onkeydown, ...props }: DialogContentProps = $props();
+
+	const paddings: Record<typeof padding, string> = {
+		none: 'p-0',
+		sm: 'md:px-4 px-4 pb-4',
+		md: 'md:px-6 px-4 pb-4',
+		lg: 'md:px-8 px-4 pb-4'
+	};
+</script>
+
+<section
+	{...props}
+	class={['flex flex-1 flex-col gap-2 overflow-auto', props.class, paddings[padding]]}
+	{onkeydown}
+>
+	{@render children()}
+</section>

package/dist/components/ui/Dialog/DialogContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogContentProps } from './type.js';
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/components/ui/Dialog/DialogDescription.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { DialogDescriptionProps } from './type.js';
+
+	const { children, ...props }: DialogDescriptionProps = $props();
+</script>
+
+<p class={['text-md text-center text-pretty sm:text-left dark:text-gray-300', props.class]}>
+	{@render children()}
+</p>

package/dist/components/ui/Dialog/DialogDescription.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogDescriptionProps } from './type.js';
+declare const DialogDescription: import("svelte").Component<DialogDescriptionProps, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/components/ui/Dialog/DialogFooter.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { DialogFooterProps } from './type.js';
+
+	let { children, position = 'start', ...props }: DialogFooterProps = $props();
+</script>
+
+<footer
+	class={[
+		'flex gap-2 px-6 pb-6',
+		props.class,
+		position === 'start' && 'justify-start',
+		position === 'center' && 'justify-center',
+		position === 'end' && 'justify-end'
+	]}
+>
+	{@render children()}
+</footer>

package/dist/components/ui/Dialog/DialogFooter.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogFooterProps } from './type.js';
+declare const DialogFooter: import("svelte").Component<DialogFooterProps, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/components/ui/Dialog/DialogHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { X } from 'lucide-svelte';
+	import type { DialogPropsgHeaderProps } from './type.js';
+
+	let { children, ...props }: DialogPropsgHeaderProps = $props();
+</script>
+
+<header class={['flex flex-col px-6 text-center sm:text-left', props.class, children && 'pt-6']}>
+	{@render children?.()}
+	<form method="dialog" class="absolute top-0 right-0">
+		<button
+			type="submit"
+			class="cursor-pointer p-2 text-gray-400 hover:text-gray-500 focus:outline-none"
+			aria-label="Close"
+		>
+			<X class="h-6 w-6" />
+		</button>
+	</form>
+</header>

package/dist/components/ui/Dialog/DialogHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogPropsgHeaderProps } from './type.js';
+declare const DialogHeader: import("svelte").Component<DialogPropsgHeaderProps, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/components/ui/Dialog/DialogTitle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { DialogTitleProps } from './type.js';
+
+	const { children, ...props }: DialogTitleProps = $props();
+</script>
+
+<h2 class={['text-center text-2xl font-bold sm:text-left dark:text-white', props.class]}>
+	{@render children()}
+</h2>

package/dist/components/ui/Dialog/DialogTitle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogTitleProps } from './type.js';
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/ui/Dialog/ModalContext.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare class ModalContext {
+    #private;
+    constructor(initialOpen?: boolean);
+    onclose(): void;
+    get open(): boolean;
+    set open(value: boolean);
+    get ref_dialog(): HTMLDialogElement | undefined;
+    set ref_dialog(value: HTMLDialogElement | undefined);
+}

package/dist/components/ui/Dialog/ModalContext.svelte.js

@@ -0,0 +1,34 @@
+export class ModalContext {
+    #open = $state(false);
+    #ref_dialog = $state();
+    constructor(initialOpen = false) {
+        this.#open = initialOpen;
+        $effect(() => {
+            if (this.#open) {
+                this.#ref_dialog?.showModal();
+            }
+            else {
+                this.#ref_dialog?.close();
+            }
+        });
+    }
+    onclose() {
+        this.#open = false;
+        this.#ref_dialog?.close();
+    }
+    get open() {
+        return this.#open;
+    }
+    set open(value) {
+        this.#open = value;
+    }
+    get ref_dialog() {
+        return this.#ref_dialog;
+    }
+    set ref_dialog(value) {
+        this.#ref_dialog = value;
+        if (value) {
+            value.showModal();
+        }
+    }
+}

package/dist/components/ui/Dialog/context.svelte.d.ts

@@ -0,0 +1,7 @@
+import { ModalContext } from './ModalContext.svelte';
+export declare const KEY: unique symbol;
+export interface DialogActions {
+    onOpenChange?(open: boolean): void;
+}
+export declare function createDialogContext(fn_open: any, actions?: DialogActions): ModalContext;
+export declare function useDialogContext(): ModalContext;

package/dist/components/ui/Dialog/context.svelte.js

@@ -0,0 +1,19 @@
+import { getContext, setContext } from 'svelte';
+import { ModalContext } from './ModalContext.svelte';
+export const KEY = Symbol('Dialog');
+export function createDialogContext(fn_open, actions = {}) {
+    const context = new ModalContext(fn_open());
+    setContext(KEY, context);
+    $effect(() => {
+        context.open = fn_open();
+        actions.onOpenChange?.(context.open);
+        return () => {
+            context.open = false;
+            actions.onOpenChange?.(context.open);
+        };
+    });
+    return context;
+}
+export function useDialogContext() {
+    return getContext(KEY);
+}

package/dist/components/ui/Dialog/type.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface DialogProps {
+    closedby?: 'none' | 'closerequest' | 'any';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full' | 'auto';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    class?: ClassValue;
+    children: Snippet;
+    open?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    onclose?(): void;
+    onpointermove?(e: PointerEvent): void;
+    onOpenChange?(open: boolean): void;
+}
+export interface DialogPropsgHeaderProps {
+    children?: Snippet;
+    class?: ClassValue;
+}
+export interface DialogTitleProps {
+    class?: ClassValue;
+    children: Snippet;
+}
+export interface DialogDescriptionProps {
+    class?: ClassValue;
+    children: Snippet;
+}
+export interface DialogFooterProps {
+    position?: 'start' | 'center' | 'end';
+    class?: ClassValue;
+    children: Snippet;
+}
+export interface DialogContentProps {
+    onkeydown?(e: KeyboardEvent): void;
+    padding?: DialogProps['padding'];
+    class?: ClassValue;
+    children: Snippet;
+    [key: string]: any;
+}

package/dist/components/ui/Dialog/type.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.20.1",
+	"version": "0.21.0",
 	"private": false,
 	"packageManager": "bun@1.2.19",
 	"publishConfig": {