fuma 2.0.50 → 2.1.1

package/dist/ui/copy/useCopy.svelte.d.ts

@@ -0,0 +1,10 @@
+export type UseCopyOptions = {
+    value: string | (() => string) | (() => Promise<string>);
+    successMessage?: string;
+    onSuccess?: () => void;
+};
+export declare function useCopy({ value, onSuccess, successMessage }: UseCopyOptions): {
+    [x: symbol]: (node: HTMLElement) => () => void;
+    readonly isLoading: boolean;
+    readonly disabled: boolean;
+};

package/dist/ui/copy/useCopy.svelte.js

@@ -0,0 +1,36 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { on } from 'svelte/events';
+import { toast } from 'svelte-sonner';
+export function useCopy({ value, onSuccess, successMessage = 'Copied' }) {
+    let isLoading = $state(false);
+    async function loadValue() {
+        if (typeof value === 'string')
+            return value;
+        return value();
+    }
+    async function onclick(event) {
+        event.preventDefault();
+        if (isLoading)
+            return;
+        isLoading = true;
+        const value = await loadValue().finally(() => (isLoading = false));
+        navigator.clipboard
+            .writeText(value)
+            .then(() => {
+            toast.success(successMessage);
+            onSuccess?.();
+        })
+            .catch((error) => {
+            toast.error(error);
+        });
+    }
+    return {
+        get isLoading() {
+            return isLoading;
+        },
+        get disabled() {
+            return isLoading;
+        },
+        [createAttachmentKey()]: (node) => on(node, 'click', onclick)
+    };
+}

package/dist/ui/dialog/Dialog.svelte

@@ -1,67 +1,97 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte'
-	import { mdiClose } from '@mdi/js'
-	import { Icon } from '../icon/index.js'
-	import { contextContainer } from '../context.js'
+	import { XIcon } from '@lucide/svelte'
+	import { onMount, type Snippet } from 'svelte'
 
-	export let dialog: HTMLDialogElement
-	export let hideCloseButton = false
-	let klass = ''
-	export { klass as class }
-
-	const dispatch = createEventDispatcher<{ open: void; close: void }>()
-	contextContainer.set('dialog')
+	let {
+		dialog = $bindable(),
+		hideCloseButton = false,
+		class: klass = '',
+		onOpen,
+		onClose,
+		activator,
+		header,
+		footer,
+		children
+	}: {
+		dialog?: HTMLDialogElement
+		hideCloseButton?: boolean
+		class?: string
+		onOpen?: () => void
+		onClose?: () => void
+		activator?: Snippet<[{ showModal: () => void }]>
+		header?: Snippet
+		footer?: Snippet
+		children: Snippet
+	} = $props()
 
 	onMount(() => {
+		if (!dialog) return
 		const inputsSelector = 'input:not([type=hidden], [tabindex="-1"])'
 		const inputs = dialog.querySelectorAll<HTMLInputElement>(inputsSelector)
 		const buttons = dialog.querySelectorAll<HTMLButtonElement>('button')
 
-		inputs.forEach((input) => (input.tabIndex = -1))
-		buttons.forEach((button) => (button.tabIndex = -1))
+		inputs.forEach((input) => {
+			input.tabIndex = -1
+		})
+		buttons.forEach((button) => {
+			button.tabIndex = -1
+		})
 
 		function onDialogOpen() {
-			dispatch('open')
-			inputs.forEach((input) => (input.tabIndex = 0))
-			buttons.forEach((button) => (button.tabIndex = 0))
+			onOpen?.()
+			inputs.forEach((input) => {
+				input.tabIndex = 0
+			})
+			buttons.forEach((button) => {
+				button.tabIndex = 0
+			})
 			if (!inputs[0]) return
 			inputs[0].focus()
 			inputs[0].select()
 		}
 
 		function onDialogClose() {
-			dispatch('close')
-			inputs.forEach((input) => (input.tabIndex = -1))
-			buttons.forEach((button) => (button.tabIndex = -1))
+			onClose?.()
+			inputs.forEach((input) => {
+				input.tabIndex = -1
+			})
+			buttons.forEach((button) => {
+				button.tabIndex = -1
+			})
 		}
 
-		const observer = new MutationObserver(() => (dialog.open ? onDialogOpen() : onDialogClose()))
+		const observer = new MutationObserver(() => (dialog?.open ? onDialogOpen() : onDialogClose()))
 		observer.observe(dialog, { attributeFilter: ['open'] })
 		return () => observer.disconnect()
 	})
 </script>
 
+{@render activator?.({ showModal: () => dialog?.showModal() })}
+
 <dialog bind:this={dialog} class="modal" tabindex="-1">
-	<div class="modal-box bordered flex flex-col rounded-lg border p-0">
+	<div class="bordered modal-box flex flex-col rounded-lg border p-0">
 		<div class="relative flex items-center border-b p-4">
 			<div class="grow">
-				<slot name="header" />
+				{@render header?.()}
 			</div>
 
 			{#if !hideCloseButton}
 				<button
 					type="button"
 					class="ml btn btn-square btn-ghost btn-sm"
-					on:click={() => dialog.close()}
+					onclick={() => dialog?.close()}
 				>
-					<Icon path={mdiClose} />
+					<XIcon />
 				</button>
 			{/if}
 		</div>
 		<div class="grow overflow-auto p-4 {klass}">
-			<slot />
+			{@render children()}
 		</div>
 
-		<slot name="footer" />
+		{@render footer?.()}
 	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>

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

@@ -1,38 +1,17 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    dialog: HTMLDialogElement;
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    dialog?: HTMLDialogElement;
     hideCloseButton?: boolean;
     class?: string;
-}, {
-    header: {};
-    default: {};
-    footer: {};
-}>, {
-    open: CustomEvent<void>;
-    close: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    default: {};
-    footer: {};
-}, {}, string>;
-type Dialog = InstanceType<typeof Dialog>;
+    onOpen?: () => void;
+    onClose?: () => void;
+    activator?: Snippet<[{
+        showModal: () => void;
+    }]>;
+    header?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "dialog">;
+type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/ui/dialog/index.d.ts

@@ -1,2 +1 @@
 export { default as Dialog } from './Dialog.svelte';
-export { default as DialogConfirm } from './DialogConfirm.svelte';

package/dist/ui/dialog/index.js

@@ -1,2 +1 @@
 export { default as Dialog } from './Dialog.svelte';
-export { default as DialogConfirm } from './DialogConfirm.svelte';

package/dist/ui/drawer/Drawer.svelte

@@ -1,63 +1,71 @@
+<script lang="ts" module>
+	export const transitionX = writable(0)
+</script>
+
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte'
+	import { type Snippet } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import { mdiClose } from '@mdi/js'
+	import { XIcon } from '@lucide/svelte'
 
 	import { goto } from '$app/navigation'
-	import { urlParam } from '../../store/param.js'
-	import { Icon } from '../icon/index.js'
-	import { subscibeDrawerLayers } from './layers.js'
-	import { contextContainer } from '../context.js'
+	import { urlParam } from '../../state/param.svelte.ts'
 	import { drawerFly } from './drawerFly.js'
+	import { writable } from 'svelte/store'
+	import { useLayer } from './useLayer.svelte.js'
 
-	export let title = ''
-	/** Key used in url query params */
-	export let key: string
-
-	let klass = ''
-	export { klass as class }
-	export let maxWidth = '32rem'
-	export let classHeader = ''
-	export let classBody = ''
-	export let duration = 180
-	export let noOverlay = false
-	export let transitionX = 0
-	export let zIndex = 50
+	let {
+		key,
+		title,
+		class: klass = '',
+		maxWidth = '32rem',
+		classHeader = '',
+		classBody = '',
+		duration = 180,
+		noOverlay = false,
+		zIndex = 50,
+		children
+	}: {
+		key: string
+		title?: string
+		class?: string
+		maxWidth?: string
+		classHeader?: string
+		classBody?: string
+		duration?: number
+		noOverlay?: boolean
+		zIndex?: number
+		children: Snippet<[{ open: typeof open; close: typeof close }]>
+	} = $props()
 
 	type GotoOptions = Parameters<typeof goto>[1]
 	export function open(value = 1, options: GotoOptions = {}) {
-		return goto($urlParam.with({ [key]: value }), {
+		return goto(urlParam.with({ [key]: value }), {
 			...options,
 			replaceState: true,
 			noScroll: true
 		})
 	}
+
 	export function close(options: GotoOptions = {}) {
-		return goto($urlParam.without(key), { ...options, replaceState: true, noScroll: true })
+		return goto(urlParam.without(key), { ...options, replaceState: true, noScroll: true })
 	}
-
-	const { offset, index, destroy, isActive } = subscibeDrawerLayers(key)
-	onDestroy(destroy)
-	contextContainer.set('drawer')
-	let clientWidth = 0
-
-	onMount(() => {
-		transitionX = $isActive ? clientWidth : 0
-	})
+	let { offset, index, isActive } = $derived(useLayer(key))
+	let clientWidth = $state(0)
 </script>
 
-{#if !noOverlay && $isActive}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if !noOverlay && isActive}
 	<div
-		on:click={() => close()}
-		on:keyup={() => close()}
+		role="button"
+		onclick={() => close()}
+		onkeyup={() => close()}
+		tabindex={-1}
 		transition:fade={{ duration }}
-		style="z-index: {zIndex + $index};"
+		style="z-index: {zIndex + index};"
 		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
 	></div>
 {/if}
 
-{#if $isActive}
+{#if isActive}
 	<aside
 		bind:clientWidth
 		transition:drawerFly|local={{
@@ -65,21 +73,21 @@
 			duration,
 			opacity: 1,
 			onTransition(pos) {
-				transitionX = pos.x
+				$transitionX = pos.x
 			}
 		}}
 		style="
-			z-index: {zIndex + $index};
+			z-index: {zIndex + index};
 			max-width: min(100%, {maxWidth});
-			transform: translateX({-$offset * 4}rem);
+			transform: translateX({-offset * 4}rem);
 			transition-duration: {duration}ms;
 		"
 		class:border-l={noOverlay}
 		class="{klass} fixed
-      bottom-0 right-0 top-0 z-10 flex
+      		top-0 right-0 bottom-0 z-10 flex
 			w-full flex-col overflow-y-scroll bg-base-100
 			transition-transform
-    "
+    	"
 	>
 		<div
 			class="{classHeader}
@@ -88,13 +96,13 @@
 			"
 		>
 			<h2 class="title min-w-0 overflow-hidden">{title}</h2>
-			<button on:click={() => close()} class="btn btn-square btn-sm">
-				<Icon path={mdiClose} title="Fermer" />
+			<button onclick={() => close()} class="btn btn-square btn-sm">
+				<XIcon title="Fermer" />
 			</button>
 		</div>
 
-		<div class="{classBody} grow pl-8 pr-4">
-			<slot {open} {close} />
+		<div class="{classBody} grow pr-4 pl-8">
+			{@render children({ open, close })}
 		</div>
 	</aside>
 {/if}

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -1,71 +1,16 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+export declare const transitionX: import("svelte/store").Writable<number>;
+import { type Snippet } from 'svelte';
+declare const Drawer: import("svelte").Component<{
+    key: string;
     title?: string;
-    /** Key used in url query params */ key: string;
     class?: string;
     maxWidth?: string;
     classHeader?: string;
     classBody?: string;
     duration?: number;
     noOverlay?: boolean;
-    transitionX?: number;
     zIndex?: number;
-    open?: (value?: number, options?: {
-        replaceState?: boolean | undefined;
-        noScroll?: boolean | undefined;
-        keepFocus?: boolean | undefined;
-        invalidateAll?: boolean | undefined;
-        invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
-        state?: App.PageState | undefined;
-    } | undefined) => Promise<void>;
-    close?: (options?: {
-        replaceState?: boolean | undefined;
-        noScroll?: boolean | undefined;
-        keepFocus?: boolean | undefined;
-        invalidateAll?: boolean | undefined;
-        invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
-        state?: App.PageState | undefined;
-    } | undefined) => Promise<void>;
-}, {
-    default: {
-        open: (value?: number, options?: {
-            replaceState?: boolean | undefined;
-            noScroll?: boolean | undefined;
-            keepFocus?: boolean | undefined;
-            invalidateAll?: boolean | undefined;
-            invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
-            state?: App.PageState | undefined;
-        } | undefined) => Promise<void>;
-        close: (options?: {
-            replaceState?: boolean | undefined;
-            noScroll?: boolean | undefined;
-            keepFocus?: boolean | undefined;
-            invalidateAll?: boolean | undefined;
-            invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
-            state?: App.PageState | undefined;
-        } | undefined) => Promise<void>;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
+    children: Snippet<[{
         open: (value?: number, options?: {
             replaceState?: boolean | undefined;
             noScroll?: boolean | undefined;
@@ -82,7 +27,7 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
             invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
             state?: App.PageState | undefined;
         } | undefined) => Promise<void>;
-    };
+    }]>;
 }, {
     open: (value?: number, options?: {
         replaceState?: boolean | undefined;
@@ -100,6 +45,6 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
         invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
         state?: App.PageState | undefined;
     } | undefined) => Promise<void>;
-}, string>;
-type Drawer = InstanceType<typeof Drawer>;
+}, "">;
+type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/ui/drawer/drawerFly.js

@@ -13,7 +13,7 @@ export function drawerFly(node, { delay = 0, duration = 400, easing = cubicOut,
         css: (t, u) => `
 			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
 			opacity: ${target_opacity - od * u}`,
-        tick: (t, u) => {
+        tick: (t, _u) => {
             onTransition({ x: t * xValue, y: t * yValue });
         }
     };

package/dist/ui/drawer/useLayer.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare function useLayer(key: string): {
+    readonly index: number;
+    readonly offset: number | false;
+    readonly isActive: boolean;
+};

package/dist/ui/drawer/useLayer.svelte.js

@@ -0,0 +1,33 @@
+import { untrack } from 'svelte';
+import { page } from '$app/state';
+let nbActives = $state(0);
+export function useLayer(key) {
+    const index = $derived.by(() => {
+        let i = 0;
+        for (const k of page.url.searchParams.keys()) {
+            if (k === key)
+                return i;
+            i++;
+        }
+        return -1;
+    });
+    const isActive = $derived(index !== -1);
+    const offset = $derived(isActive && nbActives - index - 1);
+    $effect(() => {
+        if (isActive)
+            untrack(() => nbActives++);
+        else
+            untrack(() => (nbActives = Math.max(nbActives - 1, 0)));
+    });
+    return {
+        get index() {
+            return index;
+        },
+        get offset() {
+            return offset;
+        },
+        get isActive() {
+            return isActive;
+        }
+    };
+}

package/dist/ui/index.d.ts

@@ -1,16 +1,8 @@
-export * from './card/index.js';
+export * from './button/index.js';
+export * from './dialog/index.js';
 export * from './drawer/index.js';
-export * from './input/index.js';
-export * from './form/index.js';
 export * from './menu/index.js';
+export * from './mode/index.js';
+export * from './pagination/index.js';
 export * from './range/index.js';
 export * from './table/index.js';
-export * from './tabs/index.js';
-export * from './button/index.js';
-export * from './dialog/index.js';
-export * from './placeholder/index.js';
-export * from './icon/index.js';
-export * from './login/index.js';
-export * from './pagination/index.js';
-export * from './mode/index.js';
-export * from './badge/index.js';

package/dist/ui/index.js

@@ -1,16 +1,8 @@
-export * from './card/index.js';
+export * from './button/index.js';
+export * from './dialog/index.js';
 export * from './drawer/index.js';
-export * from './input/index.js';
-export * from './form/index.js';
 export * from './menu/index.js';
+export * from './mode/index.js';
+export * from './pagination/index.js';
 export * from './range/index.js';
 export * from './table/index.js';
-export * from './tabs/index.js';
-export * from './button/index.js';
-export * from './dialog/index.js';
-export * from './placeholder/index.js';
-export * from './icon/index.js';
-export * from './login/index.js';
-export * from './pagination/index.js';
-export * from './mode/index.js';
-export * from './badge/index.js';

package/dist/ui/menu/ContextMenu.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
-	import type { TippyProps } from '../../utils/tippy.js'
-
+	import type { Snippet } from 'svelte'
+	import { MediaQuery } from 'svelte/reactivity'
 	import { Dialog } from '../dialog/index.js'
 	import { DropDown } from './index.js'
-	import { isSmallScreen } from '../../store/index.js'
-
-	export let tippyProps: Partial<TippyProps> = {}
-	let klass = ''
-	export { klass as class }
-
-	const dispatch = createEventDispatcher<{ show: void; hide: void }>()
+	import type { TippyProps } from '../../utils/tippy.js'
 
-	let dropdown: DropDown
-	let dialog: HTMLDialogElement
+	let {
+		tippyProps = {},
+		class: klass = '',
+		onShow,
+		onHide,
+		children
+	}: {
+		tippyProps?: Partial<TippyProps>
+		class?: string
+		onShow?: () => void
+		onHide?: () => void
+		children: Snippet
+	} = $props()
+
+	const isSmallScreen = new MediaQuery('max-width: 600px;')
+	let dropdown: DropDown | undefined = $state()
+	let dialog: HTMLDialogElement | undefined = $state()
 
 	export function show(event: MouseEvent) {
-		if ($isSmallScreen) {
+		if (isSmallScreen.current) {
 			dialog?.showModal()
 		} else {
 			const target = event.target as HTMLElement
@@ -26,29 +34,22 @@
 			})
 			dropdown?.show()
 		}
-
-		dispatch('show')
+		onShow?.()
 	}
 
 	export function hide() {
-		if ($isSmallScreen) dialog?.close()
+		if (isSmallScreen.current) dialog?.close()
 		else dropdown?.hide()
-		dispatch('hide')
+		onHide?.()
 	}
 </script>
 
-{#if $isSmallScreen}
+{#if isSmallScreen.current}
 	<Dialog bind:dialog class={klass}>
-		<div slot="header" class="contents">
-			<slot name="header" />
-		</div>
-		<slot />
+		{@render children()}
 	</Dialog>
 {:else}
 	<DropDown class={klass} bind:this={dropdown} tippyProps={{ offset: [0, -5], ...tippyProps }}>
-		<div class="flex flex-col gap-2 p-1">
-			<slot name="header" />
-			<slot />
-		</div>
+		{@render children()}
 	</DropDown>
 {/if}