fuma 2.0.49 → 2.1.0

package/dist/ui/menu/ContextMenu.svelte.d.ts

@@ -1,41 +1,15 @@
+import type { Snippet } from 'svelte';
 import type { TippyProps } from '../../utils/tippy.js';
-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 ContextMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     tippyProps?: Partial<TippyProps>;
     class?: string;
-    show?: (event: MouseEvent) => void;
-    hide?: () => void;
-}, {
-    header: {};
-    default: {};
-}>, {
-    show: CustomEvent<void>;
-    hide: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    default: {};
-}, {
+    onShow?: () => void;
+    onHide?: () => void;
+    children: Snippet;
+};
+declare const ContextMenu: import("svelte").Component<$$ComponentProps, {
     show: (event: MouseEvent) => void;
     hide: () => void;
-}, string>;
-type ContextMenu = InstanceType<typeof ContextMenu>;
+}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

package/dist/ui/menu/DropDown.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" context="module">
-	import { createSingleton, type TippyInstance } from '../../utils/tippy.js'
+<script lang="ts" module>
 	import type { CreateSingletonInstance } from 'tippy.js'
+	import { createSingleton, type TippyInstance } from '../../utils/tippy.js'
 
 	let sigleton: CreateSingletonInstance | null = null
 	const tips: TippyInstance[] = []
@@ -8,37 +8,55 @@
 
 <script lang="ts">
 	import { tippy, type TippyProps } from '../../utils/tippy.js'
-	import { onMount } from 'svelte'
+	import { onMount, type Snippet } from 'svelte'
 	import { beforeNavigate } from '$app/navigation'
 	import './dropdown.css'
 
-	export let tippyProps: Partial<TippyProps> = {}
-	let klass = ''
-	export { klass as class }
-	export let classWrapper = ''
-	export let classActivator = ''
-	export let useSingleton = false
-	export let autofocus = false
-	export let hideOnBlur = false
-	export let hideOnNav = true
-	export let tip: TippyInstance | undefined = undefined
-	// By pass dropdown for use in flat mode
-	export let disable = false
-	export let content: HTMLDivElement | undefined = undefined
-	let activator: HTMLDivElement
+	let {
+		tippyProps = {},
+		class: klass = '',
+		classWrapper = '',
+		classActivator = '',
+		useSingleton = false,
+		autofocus = false,
+		hideOnBlur = false,
+		hideOnNav = true,
+		disable = false,
+		tip,
+		content,
+		activator,
+		children
+	}: {
+		tippyProps?: Partial<TippyProps>
+		class?: string
+		classWrapper?: string
+		classActivator?: string
+		useSingleton?: boolean
+		autofocus?: boolean
+		hideOnBlur?: boolean
+		hideOnNav?: boolean
+		tip?: TippyInstance
+		// By pass dropdown for use in flat mode
+		disable?: boolean
+		content?: HTMLDivElement
+		activator?: Snippet<[{ tip?: TippyInstance; hide: () => void; show: () => void }]>
+		children: Snippet<[{ tip?: TippyInstance; hide: () => void; show: () => void }]>
+	} = $props()
+
+	let activatorElement: HTMLDivElement | undefined = $state()
 
 	beforeNavigate(() => hideOnNav && hide())
 
 	onMount(() => {
-		if (disable) return
+		if (disable || !activatorElement) return
 
-		const triggerTarget = activator.querySelector('button, input') || activator
+		const triggerTarget = activatorElement.querySelector('button, input') || activatorElement
 		const focusables = Array.from(
 			content!.querySelectorAll<HTMLInputElement>(
 				'a[href], button, input, textarea, select, details, [tabindex]'
 			)
 		)
-		tip = tippy(activator, {
+		tip = tippy(activatorElement, {
 			content,
 			placement: 'bottom-start',
 			theme: 'dropdown',
@@ -96,21 +114,21 @@
 
 {#if !disable}
 	<div class={classWrapper}>
-		<div class={classActivator} bind:this={activator}>
-			<slot name="activator" {tip} />
+		<div class={classActivator} bind:this={activatorElement}>
+			{@render activator?.({ tip, hide, show })}
 		</div>
 
 		<div class="hidden">
-			<div class="{klass} bg-base-100 rounded-lg border p-1 shadow-lg" bind:this={content}>
-				<slot {tip} />
+			<div class="{klass} rounded-lg border bg-base-100 p-1 shadow-lg" bind:this={content}>
+				{@render children({ tip, hide, show })}
 			</div>
 		</div>
 	</div>
 {:else}
 	<div class={classWrapper}>
-		<slot name="activator" {tip} />
+		{@render activator?.({ tip, hide, show })}
 		<div class="{klass} mt-2">
-			<slot {tip} />
+			{@render children({ tip, hide, show })}
 		</div>
 	</div>
 {/if}

package/dist/ui/menu/DropDown.svelte.d.ts

@@ -1,25 +1,8 @@
 import { type TippyInstance } from '../../utils/tippy.js';
 import { type TippyProps } from '../../utils/tippy.js';
+import { type Snippet } from 'svelte';
 import './dropdown.css';
-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 DropDown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     tippyProps?: Partial<TippyProps>;
     class?: string;
     classWrapper?: string;
@@ -28,32 +11,24 @@ declare const DropDown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     autofocus?: boolean;
     hideOnBlur?: boolean;
     hideOnNav?: boolean;
-    tip?: TippyInstance | undefined;
+    tip?: TippyInstance;
     disable?: boolean;
-    content?: HTMLDivElement | undefined;
-    hide?: () => void;
-    show?: () => void;
-    setTippyProps?: (props: Partial<TippyProps>) => void;
-}, {
-    activator: {
-        tip: TippyInstance<TippyProps> | undefined;
-    };
-    default: {
-        tip: TippyInstance<TippyProps> | undefined;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    activator: {
-        tip: TippyInstance<TippyProps> | undefined;
-    };
-    default: {
-        tip: TippyInstance<TippyProps> | undefined;
-    };
-}, {
+    content?: HTMLDivElement;
+    activator?: Snippet<[{
+        tip?: TippyInstance;
+        hide: () => void;
+        show: () => void;
+    }]>;
+    children: Snippet<[{
+        tip?: TippyInstance;
+        hide: () => void;
+        show: () => void;
+    }]>;
+};
+declare const DropDown: import("svelte").Component<$$ComponentProps, {
     hide: () => void;
     show: () => void;
     setTippyProps: (props: Partial<TippyProps>) => void;
-}, string>;
-type DropDown = InstanceType<typeof DropDown>;
+}, "">;
+type DropDown = ReturnType<typeof DropDown>;
 export default DropDown;

package/dist/ui/menu/DropDownMenu.svelte

@@ -1,50 +1,60 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
-	import { mdiUnfoldMoreHorizontal } from '@mdi/js'
-
-	import { Icon } from '../icon/index.js'
+	import { ChevronsUpDownIcon } from '@lucide/svelte'
+	import type { Snippet } from 'svelte'
 	import { DropDown } from './index.js'
-	import { SelectorList } from '../input/index.js'
 	import { type Options, parseOptions } from '../../utils/options.js'
 	import type { TippyProps } from '../../utils/tippy.js'
 
-	export let options: Options
-	export let tippyProps: Partial<TippyProps> = {}
-
-	$: _options = parseOptions(options)
-
-	let trigger: HTMLDivElement
-
-	let dropDown: DropDown
-	const dispatch = createEventDispatcher<{ select: string }>()
-
-	function onSelect(index: number) {
-		const option = _options[index]
-		dispatch('select', option.value)
-		dropDown.hide()
-	}
+	let {
+		options: optionsProp,
+		tippyProps = {},
+		onSelect,
+		children: childrenProp
+	}: {
+		options: Options
+		tippyProps?: Partial<TippyProps>
+		onSelect?: (value: string) => void
+		children?: Snippet
+	} = $props()
+
+	let options = $derived(parseOptions(optionsProp))
+	let trigger = $state<HTMLElement>()
 </script>
 
-<DropDown bind:this={dropDown} {tippyProps}>
-	<div class="contents" bind:this={trigger} slot="activator">
-		<slot>
-			<button type="button" class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2">
+<DropDown {tippyProps}>
+	{#snippet activator()}
+		<button
+			bind:this={trigger}
+			type="button"
+			class="flex h-12 items-center gap-2 rounded-lg border pr-2 pl-4"
+		>
+			{#if childrenProp}
+				{@render childrenProp()}
+			{:else}
 				<span>Menu</span>
-				<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
-			</button>
-		</slot>
-	</div>
-
-	<SelectorList
-		{trigger}
-		items={_options.map((opt) => ({ id: opt.value, ...opt }))}
-		let:item
-		on:select={({ detail }) => onSelect(detail)}
-		class="w-full"
-	>
-		{#if item.icon}
-			<Icon path={item.icon} size={18} class="opacity-70" />
-		{/if}
-		<span class="whitespace-nowrap pr-4">{item.label}</span>
-	</SelectorList>
+			{/if}
+			<ChevronsUpDownIcon class="ml-auto" size={18} />
+		</button>
+	{/snippet}
+
+	{#snippet children({ hide })}
+		<span>TODO: use Command or REMOVE THIS COMPONENT</span>
+
+		<!-- <SelectorList
+			{trigger}
+			items={options.map((opt) => ({ id: opt.value, ...opt }))}
+			onSelect={(index) => {
+				onSelect?.(options[index].value);
+				hide();
+			}}
+			class="w-full"
+		>
+			{#snippet children({ item })}
+				{#if item.icon}
+					<item.icon size={18} class="opacity-70" />
+				{/if}
+				<span class="pr-4 whitespace-nowrap">{item.label}</span>
+			{/snippet}
+		</SelectorList> -->
+	{/snippet}
 </DropDown>

package/dist/ui/menu/DropDownMenu.svelte.d.ts

@@ -1,34 +1,12 @@
+import type { Snippet } from 'svelte';
 import { type Options } from '../../utils/options.js';
 import type { TippyProps } from '../../utils/tippy.js';
-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 DropDownMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     options: Options;
     tippyProps?: Partial<TippyProps>;
-}, {
-    default: {};
-}>, {
-    select: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type DropDownMenu = InstanceType<typeof DropDownMenu>;
+    onSelect?: (value: string) => void;
+    children?: Snippet;
+};
+declare const DropDownMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropDownMenu = ReturnType<typeof DropDownMenu>;
 export default DropDownMenu;

package/dist/ui/menu/dropdown.css

@@ -18,10 +18,10 @@
 	padding: 0.25rem;
 	border-radius: 0.5rem;
 	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-		0 4px 6px -4px var(--tw-shadow-color);
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-		var(--tw-shadow);
+	--tw-shadow-colored:
+		0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+	box-shadow:
+		var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .tippy-box[data-theme~='dropdown-border'] > .tippy-content {

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

@@ -1,3 +1,3 @@
-export { default as DropDown } from './DropDown.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as DropDown } from './DropDown.svelte';
 export { default as DropDownMenu } from './DropDownMenu.svelte';

package/dist/ui/menu/index.js

@@ -1,3 +1,4 @@
-export { default as DropDown } from './DropDown.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as DropDown } from './DropDown.svelte';
 export { default as DropDownMenu } from './DropDownMenu.svelte';
+// TODO: probably replaced by Popover

package/dist/ui/mode/ToggleMode.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
-	import { ModeWatcher, toggleMode, mode } from 'mode-watcher'
-	import { mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js'
+	import { MoonIcon, SunIcon, SunMoonIcon } from '@lucide/svelte'
+	import { type Snippet } from 'svelte'
+	import { type Mode, type ModeEnum, useMode } from './useMode.svelte.js'
 
-	import { Icon } from '../icon/index.js'
+	let {
+		themes = { light: 'light', dark: 'dark' },
+		class: klass = '',
+		children
+	}: {
+		themes?: Record<ModeEnum, string>
+		class?: string
+		children?: Snippet<[{ mode: Mode }]>
+	} = $props()
 
-	let klass = ''
-	export { klass as class }
-	export let defaultMode: 'dark' | 'light' | 'system' | undefined = undefined
-
-	$: path = $mode === 'light' ? mdiWhiteBalanceSunny : mdiWeatherNight
+	let mode = $derived(useMode(themes))
 </script>
 
-<ModeWatcher {defaultMode} />
-
-<slot {toggleMode} {path}>
-	<button class="btn btn-square btn-sm {klass}" on:click={toggleMode}>
-		<Icon {path} />
+{#if children}
+	{@render children({ mode })}
+{:else}
+	<button class="btn btn-square btn-sm {klass}" onclick={mode.toggle}>
+		{#if mode.choice === 'light'}
+			<SunIcon />
+		{:else if mode.choice === 'dark'}
+			<MoonIcon />
+		{:else}
+			<SunMoonIcon />
+		{/if}
 	</button>
-</slot>
+{/if}

package/dist/ui/mode/ToggleMode.svelte.d.ts

@@ -1,37 +1,12 @@
-import { toggleMode } from 'mode-watcher';
-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 ToggleMode: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import { type Snippet } from 'svelte';
+import { type Mode, type ModeEnum } from './useMode.svelte.js';
+type $$ComponentProps = {
+    themes?: Record<ModeEnum, string>;
     class?: string;
-    defaultMode?: "dark" | "light" | "system" | undefined;
-}, {
-    default: {
-        toggleMode: typeof toggleMode;
-        path: string;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        toggleMode: typeof toggleMode;
-        path: string;
-    };
-}, {}, string>;
-type ToggleMode = InstanceType<typeof ToggleMode>;
+    children?: Snippet<[{
+        mode: Mode;
+    }]>;
+};
+declare const ToggleMode: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleMode = ReturnType<typeof ToggleMode>;
 export default ToggleMode;

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

@@ -1,2 +1,2 @@
 export { default as ToggleMode } from './ToggleMode.svelte';
-export { mode, setMode, resetMode, toggleMode, userPrefersMode, systemPrefersMode } from 'mode-watcher';
+export { useMode } from './useMode.svelte.js';

package/dist/ui/mode/index.js

@@ -1,2 +1,2 @@
 export { default as ToggleMode } from './ToggleMode.svelte';
-export { mode, setMode, resetMode, toggleMode, userPrefersMode, systemPrefersMode } from 'mode-watcher';
+export { useMode } from './useMode.svelte.js';

package/dist/ui/mode/useMode.svelte.d.ts

@@ -0,0 +1,8 @@
+export type ModeEnum = 'light' | 'dark';
+export type ModeChoice = ModeEnum | null;
+export type Mode = {
+    readonly current: ModeEnum;
+    choice: ModeChoice;
+    toggle(): void;
+};
+export declare function useMode(themes?: Record<ModeEnum, string>): Mode;

package/dist/ui/mode/useMode.svelte.js

@@ -0,0 +1,40 @@
+import { PersistedState } from 'runed';
+import { MediaQuery } from 'svelte/reactivity';
+let mode;
+export function useMode(themes = { light: 'light', dark: 'dark' }) {
+    if (!mode)
+        mode = createMode(themes);
+    return mode;
+}
+function createMode(themes = { light: 'light', dark: 'dark' }) {
+    const choice = new PersistedState('mode-choice', null);
+    const modeSystemIsLight = new MediaQuery('prefers-color-scheme: light');
+    const modeSystem = $derived(modeSystemIsLight.current ? 'light' : 'dark');
+    const modeValue = $derived(choice.current || modeSystem);
+    $effect(() => {
+        const rootEl = document.documentElement;
+        rootEl.dataset.theme = themes[modeValue];
+    });
+    return {
+        get current() {
+            return modeValue;
+        },
+        get choice() {
+            return choice.current;
+        },
+        set choice(m) {
+            choice.current = m;
+        },
+        toggle() {
+            if (!choice.current) {
+                choice.current = 'light';
+                return;
+            }
+            if (choice.current === 'light') {
+                choice.current = 'dark';
+                return;
+            }
+            choice.current = null;
+        }
+    };
+}

package/dist/ui/pagination/Pagination.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
-	import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
-	import { Icon } from '../icon/index.js'
-	import { urlParam } from '../../store/index.js'
+	import { ChevronLeftIcon, ChevronRightIcon } from '@lucide/svelte'
+	import { tip } from '../../action/tip.js'
+	import { param, urlParam } from '../../state/index.ts'
 
-	export let take = 20
+	let { take = 20 }: { take?: number } = $props()
 
-	$: skip = +($urlParam.get('skip') || 0)
-	$: _take = +($urlParam.get('take') || take)
+	let skip = $derived(+(param.get('skip') || 0))
+	$effect(() => {
+		take = +(param.get('take') || take)
+	})
 </script>
 
 <div class="join">
 	<a
-		href={$urlParam.with({ skip: skip - _take, take: _take })}
+		href={urlParam.with({ skip: skip - take, take })}
 		data-sveltekit-replacestate
-		class:btn-disabled={skip - _take < 0}
-		class="btn btn-square join-item btn-sm"
+		class:btn-disabled={skip - take < 0}
+		class="btn join-item btn-square btn-sm"
+		use:tip={{ content: 'Afficher les données précédentes' }}
 	>
-		<Icon path={mdiChevronLeft} title="Afficher les données précédentes" />
+		<ChevronLeftIcon />
 	</a>
 	<a
-		href={$urlParam.with({ skip: skip + _take, take: _take })}
+		href={urlParam.with({ skip: skip + take, take })}
 		data-sveltekit-replacestate
-		class="btn join-item btn-sm pr-1"
+		class="btn join-item pr-1 btn-sm"
+		use:tip={{ content: 'Afficher les données suivante' }}
 	>
-		{skip + 1} - {skip + _take}
-		<Icon path={mdiChevronRight} title="Afficher les données suivantes" />
+		{skip + 1} - {skip + take}
+		<ChevronRightIcon />
 	</a>
 </div>

package/dist/ui/pagination/Pagination.svelte.d.ts

@@ -1,20 +1,6 @@
-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;
-}
-declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     take?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Pagination = InstanceType<typeof Pagination>;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;