fuma 2.0.3 → 2.0.5

package/dist/ui/button/ButtonCopy.svelte

@@ -2,6 +2,7 @@
 	import { mdiClipboardTextOutline } from '@mdi/js'
 	import { toast } from 'svelte-sonner'
 	import { Icon } from '../icon/index.js'
+	import { createEventDispatcher } from 'svelte'
 	let valueOrGetValue: string | (() => Promise<string>)
 	export { valueOrGetValue as value }
 	export let title = ''
@@ -12,6 +13,7 @@
 	export { klass as class }
 
 	let isLoading = false
+	const disptach = createEventDispatcher<{ success: void }>()
 
 	async function loadValue(): Promise<string> {
 		if (typeof valueOrGetValue === 'string') return valueOrGetValue
@@ -27,6 +29,7 @@
 			.writeText(value)
 			.then(() => {
 				toast.success(successMessage)
+				disptach('success')
 			})
 			.catch((error) => {
 				toast.error(error)
@@ -36,10 +39,10 @@
 
 <div class="relative">
 	{#if isLoading}
-		<span class="loading loading-spinner absolute left-1 top-1 scale-125 opacity-25"></span>
+		<span class="loading loading-spinner absolute top-1 left-1 scale-125 opacity-25"></span>
 	{/if}
 	<button
-		class="{klass} btn btn-sm {label ? '' : 'btn-square'}"
+		class={klass ? klass : `btn btn-sm ${label ? '' : ' btn-square'}`}
 		on:click|preventDefault={handleClick}
 		class:btn-disabled={isLoading}
 	>

package/dist/ui/button/ButtonCopy.svelte.d.ts

@@ -19,6 +19,8 @@ declare const ButtonCopy: $$__sveltets_2_IsomorphicComponent<{
     successMessage?: string;
     class?: string;
 }, {
+    success: CustomEvent<void>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type ButtonCopy = InstanceType<typeof ButtonCopy>;

package/dist/ui/form/Form.svelte

@@ -116,12 +116,12 @@
 	use:enhance
 	on:input={handleInput}
 >
-	<slot />
-
 	{#if data?.id}
 		<input type="hidden" name="id" value={data.id} />
 	{/if}
 
+	<slot />
+
 	{#each fields as groupFields, groupIndex}
 		{@const section = sections[groupIndex] || {}}
 		{#if !getBoolean(section?.hide)(data)}

package/dist/ui/input/FormControl.svelte

@@ -49,7 +49,7 @@
 	>
 		{#if label}
 			<label for="{prefixFor}{_key}" class="label cursor-pointer {classLabel}">
-				<span class="label-text">
+				<span class="py-1.5 text-xs font-extrabold">
 					{#if typeof label === 'string'}
 						{label}
 					{:else}
@@ -67,11 +67,11 @@
 
 	{#if error}
 		<label for="{prefixFor}{_key}" class="label" transition:slide>
-			<span class="label-text-alt text-warning">{error}</span>
+			<span class="text-warning text-xs font-extrabold">{error}</span>
 		</label>
 	{:else if hint}
 		<label for="{prefixFor}{_key}" class="label" transition:slide>
-			<span class="label-text-alt text-neutral">{hint}</span>
+			<span class="text-neutral text-xs font-extrabold">{hint}</span>
 		</label>
 	{/if}
 </div>

package/dist/ui/input/InputSearch.svelte

@@ -1,16 +1,27 @@
 <script lang="ts">
 	import { mdiClose } from '@mdi/js'
 	import { browser } from '$app/environment'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { Icon } from '../icon/index.js'
 	import { InputText } from './index.js'
 
-	let klass = ''
-	export { klass as class }
-	export let key = 'search'
-	export let value = $page.url.searchParams.get(key) || ''
+	let {
+		class: klass = '',
+		key = 'search',
+		value = page.url.searchParams.get(key) || '',
+		oninput,
+		onclear,
+		onkeydown
+	}: {
+		class?: string
+		key?: string
+		value?: string
+		oninput?: (value: string) => void
+		onclear?: () => void
+		onkeydown?: (event: KeyboardEvent) => void
+	} = $props()
 
-	let inputElement: HTMLInputElement
+	let inputElement = $state<HTMLInputElement>()
 </script>
 
 <InputText
@@ -18,9 +29,8 @@
 	bind:inputElement
 	bind:value
 	on:blur
-	on:blur
-	on:input
-	on:keydown
+	on:input={() => oninput?.(value)}
+	on:keydown={(e) => onkeydown?.(e)}
 	on:keyup
 	bindWithParams
 	input={{
@@ -31,17 +41,19 @@
 	}}
 	classWrapper="relative {klass}"
 >
-	<button
-		slot="append"
-		class="btn btn-square btn-sm absolute right-0"
-		class:hidden={!browser}
-		style:scale={!!value ? 0.75 : 0}
-		on:click={() => {
-			value = ''
-			inputElement.dispatchEvent(new Event('input', { bubbles: true }))
-		}}
-		tabindex={!!value ? 0 : -1}
-	>
-		<Icon path={mdiClose} />
-	</button>
+	{#snippet append()}
+		<button
+			class="btn btn-square btn-sm absolute right-0"
+			class:hidden={!browser}
+			style:scale={!!value ? 0.75 : 0}
+			onclick={() => {
+				value = ''
+				oninput?.(value)
+				onclear?.()
+			}}
+			tabindex={!!value ? 0 : -1}
+		>
+			<Icon path={mdiClose} />
+		</button>
+	{/snippet}
 </InputText>

package/dist/ui/input/InputSearch.svelte.d.ts

@@ -1,3 +1,11 @@
+type $$ComponentProps = {
+    class?: string;
+    key?: string;
+    value?: string;
+    oninput?: (value: string) => void;
+    onclear?: () => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};
 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;
@@ -11,17 +19,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InputSearch: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    key?: string;
-    value?: string;
-}, {
+declare const InputSearch: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
     blur: FocusEvent;
-    input: Event;
-    keydown: KeyboardEvent;
     keyup: KeyboardEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type InputSearch = InstanceType<typeof InputSearch>;
 export default InputSearch;

package/dist/ui/input/InputText.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte'
 	import { FormControl, bindValueWithParams, type InputProps } from './index.js'
 
-	type $$Props = InputProps
-	$: ({ input, value: _value, classWrapper, bindWithParams, ...props } = $$props as $$Props)
-	$: ({ class: inputClass, ...inputProps } = input || {})
-	export let value = _value
-	export let inputElement: HTMLInputElement | undefined = undefined
+	let {
+		input,
+		value = $bindable(),
+		classWrapper,
+		bindWithParams,
+		inputElement = $bindable(),
+		prepend,
+		append,
+		...controlProps
+	}: InputProps & {
+		prepend?: Snippet<[value: string | null | undefined]>
+		append?: Snippet<[value: string | null | undefined]>
+	} = $props()
+
+	let inputProps = $derived({
+		...input,
+		class: `input input-bordered w-full ${input?.class || ''}`
+	})
 </script>
 
-<FormControl {...props} enhanceDisabled={props.enhanceDisabled || bindWithParams} let:key>
+<FormControl {...controlProps} enhanceDisabled={controlProps.enhanceDisabled || bindWithParams}>
 	{#snippet children({ key })}
 		<div class={classWrapper}>
-			<slot name="prepend" {value} />
+			{@render prepend?.(value)}
 			<input
 				bind:value
 				on:input
@@ -24,10 +38,9 @@
 				type="text"
 				name={key}
 				id={key}
-				class="input input-bordered w-full {inputClass || ''}"
 				{...inputProps}
 			/>
-			<slot name="append" {value} />
+			{@render append?.(value)}
 		</div>
 	{/snippet}
 </FormControl>

package/dist/ui/input/InputText.svelte.d.ts

@@ -1,4 +1,9 @@
+import type { Snippet } from 'svelte';
 import { type InputProps } from './index.js';
+type $$ComponentProps = InputProps & {
+    prepend?: Snippet<[value: string | null | undefined]>;
+    append?: Snippet<[value: string | null | undefined]>;
+};
 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;
@@ -12,19 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, 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 InputText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<InputProps, {
-    prepend: {
-        value: string | null | undefined;
-    };
-    append: {
-        value: string | null | undefined;
-    };
-}>, {
+declare const InputText: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
     input: Event;
     focus: FocusEvent;
     blur: FocusEvent;
@@ -32,13 +25,6 @@ declare const InputText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     keyup: KeyboardEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    prepend: {
-        value: string | null | undefined;
-    };
-    append: {
-        value: string | null | undefined;
-    };
-}, {}, string>;
+}, {}, {}, "value" | "inputElement">;
 type InputText = InstanceType<typeof InputText>;
 export default InputText;

package/dist/ui/input/InputTime.svelte

@@ -3,10 +3,11 @@
 	import type { HTMLInputAttributes, FormEventHandler } from 'svelte/elements'
 	import { FormControl, type InputProps } from './index.js'
 	import dayjs from 'dayjs'
-	type $$Props = InputProps<Date>
+	type $$Props = InputProps<Date> & { getDefaultDate?: () => Date }
 
 	export let value: Date | null | undefined = undefined
 	export let input: HTMLInputAttributes = {}
+	export let getDefaultDate = () => new Date(0)
 
 	$: ({ class: inputClass = '', ...inputProps } = input)
 
@@ -19,7 +20,7 @@
 
 	function getDateTime(v: string | null | undefined): Date | null | undefined {
 		if (!v) return value
-		const date = new Date(value || 0)
+		const date = value ? new Date(value) : getDefaultDate()
 		const dateString = [
 			date.getFullYear().toString(),
 			(date.getMonth() + 1).toString().padStart(2, '0'),

package/dist/ui/input/InputTime.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputProps } from './index.js';
+import type { HTMLInputAttributes } from 'svelte/elements';
 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;
@@ -12,7 +12,30 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InputTime: $$__sveltets_2_IsomorphicComponent<InputProps<Date>, {
+declare const InputTime: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    classLabel?: string;
+    key?: string;
+    label?: import("svelte").Snippet | string;
+    labelAppend?: import("svelte").Snippet | null;
+    error?: string;
+    hint?: string;
+    prefix?: string | number;
+    prefixFor?: string | number;
+    enhanceDisabled?: boolean;
+    labelPosition?: "top" | "left" | "right";
+    children?: import("svelte").Snippet<[{
+        key: string;
+    }]> | undefined;
+} & {
+    input?: HTMLInputAttributes;
+    inputElement?: HTMLInputElement;
+    classWrapper?: string;
+    value?: Date | null | undefined;
+    bindWithParams?: boolean;
+} & {
+    getDefaultDate?: () => Date;
+}, {
     focus: FocusEvent;
     blur: FocusEvent;
     input: CustomEvent<Date | null>;

package/dist/ui/input/textRich/InputTextRich.svelte

@@ -25,6 +25,11 @@
 		}
 	})
 
+	export function setImage(image: { src: string; alt: string }) {
+		if (!editor) return false
+		return editor.commands.setImage(image)
+	}
+
 	function initEditor() {
 		const valueAsHtml = !value.startsWith('{') && value !== 'null'
 		editor = new Editor({

package/dist/ui/input/textRich/InputTextRich.svelte.d.ts

@@ -12,6 +12,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const InputTextRich: $$__sveltets_2_IsomorphicComponent<{
+    setImage?: (image: {
+        src: string;
+        alt: string;
+    }) => boolean;
+} & {
     class?: string;
     classLabel?: string;
     key?: string;
@@ -33,6 +38,11 @@ declare const InputTextRich: $$__sveltets_2_IsomorphicComponent<{
     change: CustomEvent<void>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setImage: (image: {
+        src: string;
+        alt: string;
+    }) => boolean;
+}, string>;
 type InputTextRich = InstanceType<typeof InputTextRich>;
 export default InputTextRich;

package/dist/ui/input/textRich/ToolsBar.svelte

@@ -56,9 +56,6 @@
 
 		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0"></div>
 
-		<ToolMenuInsert
-			{editor}
-			on:insertMedia={() => toast.warning('TODO: import SelectMedia like benev.io')}
-		/>
+		<ToolMenuInsert {editor} on:insertMedia />
 	</div>
 </div>

package/dist/ui/input/textRich/ToolsBar.svelte.d.ts

@@ -16,6 +16,8 @@ declare const ToolsBar: $$__sveltets_2_IsomorphicComponent<{
     editor: Editor;
     class?: string;
 }, {
+    insertMedia: CustomEvent<void>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type ToolsBar = InstanceType<typeof ToolsBar>;

package/dist/ui/menu/DropDown.svelte

@@ -97,23 +97,23 @@
 {#if !disable}
 	<div class={classWrapper}>
 		<div class={classActivator} bind:this={activator}>
-			<slot name="activator" />
+			<slot name="activator" {tip} />
 		</div>
 
 		<div class="hidden">
 			<div
-				class="{klass} max-h-80 overflow-auto rounded-lg border bg-base-100 p-1 shadow-lg"
+				class="{klass} bg-base-100 max-h-80 overflow-auto rounded-lg border p-1 shadow-lg"
 				bind:this={content}
 			>
-				<slot />
+				<slot {tip} />
 			</div>
 		</div>
 	</div>
 {:else}
 	<div class={classWrapper}>
-		<slot name="activator" />
+		<slot name="activator" {tip} />
 		<div class="{klass} mt-2">
-			<slot />
+			<slot {tip} />
 		</div>
 	</div>
 {/if}

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

@@ -35,13 +35,21 @@ declare const DropDown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     show?: () => void;
     setTippyProps?: (props: Partial<TippyProps>) => void;
 }, {
-    activator: {};
-    default: {};
+    activator: {
+        tip: TippyInstance<TippyProps> | undefined;
+    };
+    default: {
+        tip: TippyInstance<TippyProps> | undefined;
+    };
 }>, {
     [evt: string]: CustomEvent<any>;
 }, {
-    activator: {};
-    default: {};
+    activator: {
+        tip: TippyInstance<TippyProps> | undefined;
+    };
+    default: {
+        tip: TippyInstance<TippyProps> | undefined;
+    };
 }, {
     hide: () => void;
     show: () => void;

package/dist/ui/range/RangePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy, createEventDispatcher } from 'svelte'
 	import type { Litepicker } from 'litepicker'
-	import type { Range, RangeAsDate, RangeDate } from './types.js'
+	import type { RangeAsDate, RangeDate } from './types.js'
 	import dayjs from 'dayjs'
 
 	export let numberOfMonths = 3
@@ -15,7 +15,7 @@
 	let endElement: HTMLInputElement
 	let picker: Litepicker
 	let parentEl: HTMLDivElement
-	const dispatch = createEventDispatcher<{ change: Range }>()
+	const dispatch = createEventDispatcher<{ change: RangeAsDate }>()
 
 	onMount(() => {
 		initTimePicker()

package/dist/ui/range/RangePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Range, RangeAsDate } from './types.js';
+import type { RangeAsDate } from './types.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;
@@ -21,7 +21,7 @@ declare const RangePicker: $$__sveltets_2_IsomorphicComponent<{
     maxDate?: Date | number | string | undefined;
     clear?: () => void;
 }, {
-    change: CustomEvent<Range>;
+    change: CustomEvent<RangeAsDate>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/dist/ui/range/RangePickerButton.svelte

@@ -10,17 +10,20 @@
 	import { InputTime } from '../input/index.js'
 	import { type RangeAsDate, RangePicker } from './index.js'
 	import { jsonParse } from '../../utils/jsonParse.js'
-	export let minDate: Date | number | string | undefined = undefined
-	export let maxDate: Date | number | string | undefined = undefined
 
 	let dropDown: DropDown
 	let rangePicker: RangePicker
+	let klass = ''
 
 	export let key = 'range'
 	export let range: RangeAsDate = jsonParse<RangeAsDate>($urlParam.get(key), {
 		start: null,
 		end: null
 	})
+	export let minDate: Date | number | string | undefined = undefined
+	export let maxDate: Date | number | string | undefined = undefined
+	export { klass as class }
+	export let classLabel = ''
 
 	$: isValidPeriod = !!range.start && !!range.end
 
@@ -44,12 +47,12 @@
 </script>
 
 <DropDown bind:this={dropDown} tippyProps={{ onHidden: writeURL }} class="max-h-full">
-	<button slot="activator" class="btn btn-sm">
+	<button slot="activator" class="min-width-0 btn btn-sm flex-nowrap {klass}">
 		<Icon path={mdiCalendarMonthOutline} class="opacity-60" size={20} />
 		{#if isValidPeriod}
 			<span
 				transition:slide={{ axis: 'x', duration: 200 }}
-				class="whitespace-nowrap text-xs font-medium opacity-80"
+				class="whitespace-nowrap text-xs font-medium opacity-80 {classLabel}"
 			>
 				{getLabel(range)}
 			</span>

package/dist/ui/range/RangePickerButton.svelte.d.ts

@@ -13,10 +13,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RangePickerButton: $$__sveltets_2_IsomorphicComponent<{
-    minDate?: Date | number | string | undefined;
-    maxDate?: Date | number | string | undefined;
     key?: string;
     range?: RangeAsDate;
+    minDate?: Date | number | string | undefined;
+    maxDate?: Date | number | string | undefined;
+    class?: string;
+    classLabel?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/ui/table/Table.svelte

@@ -1,27 +1,41 @@
-<script lang="ts" generics="Item extends {id: string | number}">
+<script lang="ts" generics="Item extends ItemBase">
 	import { afterNavigate } from '$app/navigation'
 	import { Placeholder } from '../placeholder/index.js'
-	import type { ComponentAndProps } from '../../utils/component.js'
 
 	import {
 		type TableField,
+		type ItemBase,
 		TableHead,
 		TableBody,
 		context,
 		createKeys,
 		syncFieldsWithParams
 	} from './index.js'
+	import type { Snippet } from 'svelte'
 
-	export let key = 'table'
-	export let fields: TableField<Item>[]
-	export let items: Item[]
-	export let slotAction: ((item: Item) => ComponentAndProps) | undefined = undefined
-	export let placholder = 'Aucun élément trouvé'
-	let klass = ''
-	export { klass as class }
-	export let classRow = ''
-	export let hideBody = false
-	export let onCreateField: (() => void) | undefined = undefined
+	let {
+		key = 'table',
+		fields,
+		items,
+		actions,
+		placholder = 'placholder',
+		class: klass,
+		classRow,
+		hideBody = false,
+		onCreateField,
+		onclick
+	}: {
+		key?: string
+		fields: TableField<Item>[]
+		items: Item[]
+		actions?: Snippet<[item: Item]>
+		placholder?: string
+		class?: string
+		classRow?: string
+		hideBody?: boolean
+		onCreateField?: () => void
+		onclick?: (item?: Item) => void
+	} = $props()
 
 	const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = createKeys(key)
 	context.set(key, {
@@ -39,7 +53,7 @@
 	<table class="relative table">
 		<TableHead {fields} {key} {onCreateField} />
 		{#if !hideBody && items.length}
-			<TableBody {fields} {items} action={slotAction} {classRow} on:click />
+			<TableBody {fields} {items} {actions} {classRow} {onclick} />
 		{/if}
 	</table>