fuma 1.0.10 → 1.0.12

package/dist/ui/input/InputDateTime.svelte

@@ -23,19 +23,17 @@
 	}
 </script>
 
-<FormControl {...$$restProps}>
-	{#snippet children({ key })}
-		<input
-			value={value && dayjs(value).format('YYYY-MM-DDTHH:mm')}
-			on:input={handleInput}
-			on:focus
-			on:blur
-			type="datetime-local"
-			id={key}
-			class="input input-bordered {inputClass}"
-			{...inputProps}
-		/>
+<FormControl {...$$restProps} let:key>
+	<input
+		value={value && dayjs(value).format('YYYY-MM-DDTHH:mm')}
+		on:input={handleInput}
+		on:focus
+		on:blur
+		type="datetime-local"
+		id={key}
+		class="input input-bordered {inputClass}"
+		{...inputProps}
+	/>
 
-		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
-	{/snippet}
+	<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
 </FormControl>

package/dist/ui/input/InputNumber.svelte

@@ -10,22 +10,21 @@
 	export let inputElement: HTMLInputElement | undefined = undefined
 </script>
 
-<FormControl {...$$restProps}>
-	{#snippet children({ key })}
-		<input
-			bind:value
-			bind:this={inputElement}
-			on:input
-			on:focus
-			on:blur
-			type="number"
-			id={key}
-			inputmode="numeric"
-			class="input input-bordered"
-			{...input}
-		/>
-		{#if value !== undefined}
-			<input type="hidden" name={key} value="{USE_COERCE_NUMBER}{value}" />
-		{/if}
-	{/snippet}
+<FormControl {...$$restProps} let:key>
+	<slot name="label_append" slot="label_append" />
+	<input
+		bind:value
+		bind:this={inputElement}
+		on:input
+		on:focus
+		on:blur
+		type="number"
+		id={key}
+		inputmode="numeric"
+		class="input input-bordered"
+		{...input}
+	/>
+	{#if value !== undefined}
+		<input type="hidden" name={key} value="{USE_COERCE_NUMBER}{value}" />
+	{/if}
 </FormControl>

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

@@ -9,7 +9,11 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        label_append: {
+            slot: string;
+        };
+    };
 };
 export type InputNumberProps = typeof __propDef.props;
 export type InputNumberEvents = typeof __propDef.events;

package/dist/ui/input/InputPassword.svelte

@@ -7,19 +7,17 @@
 	export let autocomplete = 'current-password'
 </script>
 
-<FormControl {...props}>
-	{#snippet children({ key })}
-		<input
-			bind:value
-			on:input
-			on:focus
-			on:blur
-			type="password"
-			name={key}
-			id={key}
-			class="input input-bordered"
-			{autocomplete}
-			{...input}
-		/>
-	{/snippet}
+<FormControl {...props} let:key>
+	<input
+		bind:value
+		on:input
+		on:focus
+		on:blur
+		type="password"
+		name={key}
+		id={key}
+		class="input input-bordered"
+		{autocomplete}
+		{...input}
+	/>
 </FormControl>

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

@@ -4,8 +4,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../../index.js").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputRadio.svelte

@@ -48,26 +48,25 @@
 		{#each _options as option}
 			<FormControl
 				{...props}
+				let:key
 				enhanceDisabled
 				label={option.label}
 				prefixFor={option.value}
 				class="flex-row-reverse items-center justify-end gap-2"
 			>
-				{#snippet children({ key })}
-					<input
-						use:bindValueWithParams={{ bindEnable: props.bindWithParams }}
-						bind:group={value}
-						on:input
-						on:focus
-						on:blur
-						value={option.value}
-						type="radio"
-						name={key}
-						id="{option.value}{key}"
-						class="radio"
-						{...input}
-					/>
-				{/snippet}
+				<input
+					use:bindValueWithParams={{ bindEnable: props.bindWithParams }}
+					bind:group={value}
+					on:input
+					on:focus
+					on:blur
+					value={option.value}
+					type="radio"
+					name={key}
+					id="{option.value}{key}"
+					class="radio"
+					{...input}
+				/>
 			</FormControl>
 		{/each}
 	</div>

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

@@ -5,8 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../../index.js").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputRelation.svelte

@@ -1,5 +1,5 @@
-<script lang="ts" generics="RelationItem extends {id: string | number}">
-	import { createEventDispatcher, tick, type ComponentProps, type Snippet } from 'svelte'
+<script lang="ts" generics="RelationItem extends {id: string}">
+	import { createEventDispatcher, tick, type ComponentProps } from 'svelte'
 	import type { HTMLInputAttributes } from 'svelte/elements'
 	import debounce from 'debounce'
 	import { toast } from 'svelte-sonner'
@@ -7,9 +7,11 @@
 
 	import { USE_COERCE_JSON } from '../../utils/constant.js'
 	import { Icon } from '../icon/index.js'
+	import { Slot } from '../slot/index.js'
 	import { DropDown } from '../menu/index.js'
 	import { FormControl, SelectorList } from './index.js'
 	import type { TippyProps } from '../../utils/tippy.js'
+	import type { ComponentAndProps } from '../../utils/component.js'
 	import RelationAfter from './RelationAfter.svelte'
 
 	export let key = Math.random().toString()
@@ -25,11 +27,9 @@
 	export let tippyProps: Partial<TippyProps> = {}
 	export let dropdownProps: ComponentProps<DropDown> = {}
 	export let flatMode = false
-	export let noSlotItemWrapper = false
-	export let slotItem: Snippet<[RelationItem]>
-	export let slotSuggestion: Snippet<[RelationItem]> = slotItem
+	export let slotItem: ((item: RelationItem) => ComponentAndProps | string) | null = null
+	export let slotSuggestion: ((item: RelationItem) => ComponentAndProps | string) | null = slotItem
 	export let input: HTMLInputAttributes | undefined = undefined
-	export let append: Snippet | undefined = undefined
 
 	let klass = ''
 	export { klass as class }
@@ -85,53 +85,48 @@
 
 <DropDown {tippyProps} disable={flatMode} {...dropdownProps}>
 	<div class="contents" slot="activator">
-		<FormControl {key} {label} {error} class={klass}>
-			{#snippet children({ key })}
-				<div class="flex grow gap-2" class:hidden={item}>
-					<div class="input input-bordered flex grow items-center pr-2">
-						<input
-							type="text"
-							id={key}
-							bind:this={inputElement}
-							bind:value={searchValue}
-							on:input={(e) => searchItemsDebounce(e.currentTarget.value)}
-							on:focus={handleFocus}
-							on:blur={handleBlur}
-							autocomplete="off"
-							{placeholder}
-							class="grow"
-							size={8}
-							{...input}
-						/>
-						<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
-					</div>
-					{@render append?.()}
-				</div>
-
-				{#if item}
-					{#if noSlotItemWrapper}
-						{@render slotItem(item)}
-					{:else}
-						<div class="flex h-12 items-center gap-2 rounded-lg border bg-base-100 pl-4 pr-2">
-							<div class="grow">
-								{@render slotItem(item)}
-							</div>
-							<button
-								type="button"
-								on:click|stopPropagation={() => clear()}
-								class="btn btn-square btn-sm"
-							>
-								<Icon path={mdiClose} />
-							</button>
-						</div>
-					{/if}
+		<FormControl {key} {label} {error} class={klass} let:key>
+			<div class="flex grow gap-2" class:hidden={item}>
+				<div class="input input-bordered flex grow items-center pr-2">
 					<input
-						type="hidden"
-						name={key}
-						value="{USE_COERCE_JSON}{JSON.stringify({ id: item.id })}"
+						type="text"
+						id={key}
+						bind:this={inputElement}
+						bind:value={searchValue}
+						on:input={(e) => searchItemsDebounce(e.currentTarget.value)}
+						on:focus={handleFocus}
+						on:blur={handleBlur}
+						autocomplete="off"
+						{placeholder}
+						class="grow"
+						size={8}
+						{...input}
 					/>
-				{/if}
-			{/snippet}
+
+					<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
+				</div>
+				<slot name="append" />
+			</div>
+
+			{#if item}
+				<div class="flex h-12 items-center gap-2 rounded-lg border bg-base-100 pl-4 pr-2">
+					<div class="grow">
+						<slot name="item" {item}>
+							<Slot slot={slotItem} args={item}>
+								{item.id}
+							</Slot>
+						</slot>
+					</div>
+					<button type="button" on:click={() => clear()} class="btn btn-square btn-sm">
+						<Icon path={mdiClose} />
+					</button>
+				</div>
+				<input
+					type="hidden"
+					name={key}
+					value="{USE_COERCE_JSON}{JSON.stringify({ id: item.id })}"
+				/>
+			{/if}
 		</FormControl>
 	</div>
 
@@ -145,6 +140,10 @@
 		class="w-full min-w-40 {classList}"
 		on:select={({ detail }) => select(detail)}
 	>
-		{@render slotSuggestion(proposedItems[index])}
+		<slot name="suggestion" item={proposedItems[index]}>
+			<Slot slot={slotSuggestion} args={proposedItems[index]}>
+				{proposedItems[index].id}
+			</Slot>
+		</slot>
 	</SelectorList>
 </DropDown>

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { TippyProps } from '../../utils/tippy.js';
+import type { ComponentAndProps } from '../../utils/component.js';
 declare class __sveltets_Render<RelationItem extends {
-    id: string | number;
+    id: string;
 }> {
     props(): {
         key?: string | undefined;
@@ -31,14 +31,12 @@ declare class __sveltets_Render<RelationItem extends {
             hide?: (() => void) | undefined;
             show?: (() => void) | undefined;
             setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;
-            children?: Snippet<[]> | undefined;
+            children?: import("svelte").Snippet<[]> | undefined;
         } | undefined;
         flatMode?: boolean | undefined;
-        noSlotItemWrapper?: boolean | undefined;
-        slotItem: Snippet<[RelationItem]>;
-        slotSuggestion?: Snippet<[RelationItem]> | undefined;
+        slotItem?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
+        slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
         input?: HTMLInputAttributes | undefined;
-        append?: Snippet<[]> | undefined;
         class?: string | undefined;
         classList?: string | undefined;
         clear?: (() => Promise<void>) | undefined;
@@ -50,19 +48,27 @@ declare class __sveltets_Render<RelationItem extends {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
+    slots(): {
+        append: {};
+        item: {
+            item: RelationItem | null;
+        };
+        suggestion: {
+            item: RelationItem;
+        };
+    };
 }
 export type InputRelationProps<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['props']>;
 export type InputRelationEvents<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['events']>;
 export type InputRelationSlots<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['slots']>;
 export default class InputRelation<RelationItem extends {
-    id: string | number;
+    id: string;
 }> extends SvelteComponent<InputRelationProps<RelationItem>, InputRelationEvents<RelationItem>, InputRelationSlots<RelationItem>> {
     get clear(): () => Promise<void>;
 }

package/dist/ui/input/InputRelations.svelte

@@ -1,7 +1,7 @@
-<script lang="ts" generics="RelationItem extends {id: string | number}">
+<script lang="ts" generics="RelationItem extends {id: string}">
 	import type { HTMLInputAttributes } from 'svelte/elements'
 
-	import { createEventDispatcher, tick, type Snippet } from 'svelte'
+	import { createEventDispatcher, tick } from 'svelte'
 	import { slide } from 'svelte/transition'
 	import { toast } from 'svelte-sonner'
 	import { mdiClose } from '@mdi/js'
@@ -9,8 +9,10 @@
 
 	import { USE_COERCE_JSON } from '../../utils/constant.js'
 	import { Icon } from '../icon/index.js'
+	import { Slot } from '../slot/index.js'
 	import { FormControl, SelectorList } from './index.js'
 	import { DropDown } from '../menu/index.js'
+	import type { ComponentAndProps } from '../../utils/component.js'
 	import RelationAfter from './RelationAfter.svelte'
 
 	export let key = ''
@@ -22,10 +24,9 @@
 	export let error = ''
 	export let placeholder = ''
 	export let flatMode = false
-	export let slotItem: Snippet<[RelationItem]>
-	export let slotSuggestion: Snippet<[RelationItem]> = slotItem
+	export let slotItem: ((item: RelationItem) => ComponentAndProps | string) | null = null
+	export let slotSuggestion: ((item: RelationItem) => ComponentAndProps | string) | null = slotItem
 	export let input: HTMLInputAttributes | undefined = undefined
-	export let append: Snippet | undefined = undefined
 
 	let klass = ''
 	export { klass as class }
@@ -41,9 +42,7 @@
 	let searchValue = ''
 
 	let dropdown: DropDown
-	const dispatch = createEventDispatcher<{
-		input: { value: (string | number)[]; items: RelationItem[] }
-	}>()
+	const dispatch = createEventDispatcher<{ input: { value: string[]; items: RelationItem[] } }>()
 	let inputSearch: HTMLInputElement
 
 	async function select(index = focusIndex) {
@@ -104,7 +103,11 @@
 								transition:slide|local={{ axis: 'x', duration: 200 }}
 								class="badge badge-outline badge-lg items-center whitespace-nowrap pr-0 text-right"
 							>
-								{@render slotItem(item)}
+								<slot {item} name="item">
+									<Slot slot={slotItem} args={item}>
+										{item.id}
+									</Slot>
+								</slot>
 								<div
 									class="btn btn-circle btn-ghost btn-xs ml-1 mr-[2px] h-[18px] min-h-[18px] w-[18px]"
 									role="button"
@@ -137,7 +140,7 @@
 
 						<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
 					</div>
-					{@render append?.()}
+					<slot name="append" />
 				</div>
 			</div>
 
@@ -159,6 +162,10 @@
 		class="w-full min-w-40 {classList}"
 		on:select={({ detail }) => select(detail)}
 	>
-		{@render slotSuggestion(proposedItems[index])}
+		<slot name="suggestion" item={proposedItems[index]}>
+			<Slot slot={slotSuggestion} args={proposedItems[index]}>
+				{proposedItems[index].id}
+			</Slot>
+		</slot>
 	</SelectorList>
 </DropDown>

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Snippet } from 'svelte';
+import type { ComponentAndProps } from '../../utils/component.js';
 declare class __sveltets_Render<RelationItem extends {
-    id: string | number;
+    id: string;
 }> {
     props(): {
         key?: string | undefined;
@@ -14,35 +14,42 @@ declare class __sveltets_Render<RelationItem extends {
         error?: string | undefined;
         placeholder?: string | undefined;
         flatMode?: boolean | undefined;
-        slotItem: Snippet<[RelationItem]>;
-        slotSuggestion?: Snippet<[RelationItem]> | undefined;
+        slotItem?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
+        slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
         input?: HTMLInputAttributes | undefined;
-        append?: Snippet<[]> | undefined;
         class?: string | undefined;
         classList?: string | undefined;
         value?: RelationItem[] | null | undefined;
     };
     events(): {
         input: CustomEvent<{
-            value: (string | number)[];
+            value: string[];
             items: RelationItem[];
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
+    slots(): {
+        item: {
+            item: RelationItem;
+        };
+        append: {};
+        suggestion: {
+            item: RelationItem;
+        };
+    };
 }
 export type InputRelationsProps<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['props']>;
 export type InputRelationsEvents<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['events']>;
 export type InputRelationsSlots<RelationItem extends {
-    id: string | number;
+    id: string;
 }> = ReturnType<__sveltets_Render<RelationItem>['slots']>;
 export default class InputRelations<RelationItem extends {
-    id: string | number;
+    id: string;
 }> extends SvelteComponent<InputRelationsProps<RelationItem>, InputRelationsEvents<RelationItem>, InputRelationsSlots<RelationItem>> {
 }
 export {};

package/dist/ui/input/InputSearch.svelte

@@ -26,7 +26,7 @@
 	input={{
 		class: 'input-sm pr-8',
 		placeholder: 'Recherche',
-		autocomplete: 'off',
+		autocomplete: 'fuck-off',
 		inputmode: 'search'
 	}}
 	classWrapper="relative {klass}"

package/dist/ui/input/InputSelect.svelte

@@ -41,28 +41,26 @@
 
 <DropDown bind:this={dropDown}>
 	<svelte:fragment slot="activator">
-		<FormControl {...props}>
-			{#snippet children({ key })}
-				<button
-					bind:this={button}
-					id={key}
-					type="button"
-					class="input-bordered flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2 hover:bg-base-200/50"
-				>
-					{#if selectedOption}
-						{#if selectedOption.icon}
-							<Icon path={selectedOption.icon} size={21} class="opacity-70" />
-						{/if}
-						<span>{selectedOption.label}</span>
-					{:else if placeholder}
-						<span class="opacity-60">{placeholder}</span>
+		<FormControl {...props} let:key>
+			<button
+				bind:this={button}
+				id={key}
+				type="button"
+				class="input-bordered flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2 hover:bg-base-200/50"
+			>
+				{#if selectedOption}
+					{#if selectedOption.icon}
+						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
 					{/if}
-					<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
-				</button>
-				{#if value !== undefined}
-					<input type="hidden" name={key} {value} />
+					<span>{selectedOption.label}</span>
+				{:else if placeholder}
+					<span class="opacity-60">{placeholder}</span>
 				{/if}
-			{/snippet}
+				<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
+			</button>
+			{#if value !== undefined}
+				<input type="hidden" name={key} {value} />
+			{/if}
 		</FormControl>
 	</svelte:fragment>
 

package/dist/ui/input/InputText.svelte

@@ -9,25 +9,25 @@
 </script>
 
 <FormControl {...props} enhanceDisabled={props.enhanceDisabled || bindWithParams} let:key>
-	{#snippet children({ key })}
-		<div class={classWrapper}>
-			<slot name="prepend" {value} />
-			<input
-				bind:value
-				on:input
-				on:focus
-				on:blur
-				on:keydown
-				on:keyup
-				bind:this={inputElement}
-				use:bindValueWithParams={{ bindEnable: bindWithParams, initValue: (v) => (value = v) }}
-				type="text"
-				name={key}
-				id={key}
-				class="input input-bordered w-full {inputClass || ''}"
-				{...inputProps}
-			/>
-			<slot name="append" {value} />
-		</div>
-	{/snippet}
+	<slot name="label_append" slot="label_append" />
+
+	<div class={classWrapper}>
+		<slot name="prepend" {value} />
+		<input
+			bind:value
+			on:input
+			on:focus
+			on:blur
+			on:keydown
+			on:keyup
+			bind:this={inputElement}
+			use:bindValueWithParams={{ bindEnable: bindWithParams, initValue: (v) => (value = v) }}
+			type="text"
+			name={key}
+			id={key}
+			class="input input-bordered w-full {inputClass || ''}"
+			{...inputProps}
+		/>
+		<slot name="append" {value} />
+	</div>
 </FormControl>

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

@@ -12,6 +12,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        label_append: {
+            slot: string;
+        };
         prepend: {
             value: string | null | undefined;
         };