fuma 0.5.0 → 1.0.0

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

@@ -5,13 +5,17 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").ComponentType | import("../../index.js").ComponentAndProps | undefined;
+        label?: string | import("svelte").Snippet<[]> | undefined;
+        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
         labelPosition?: ("top" | "left" | "right") | undefined;
+        children?: import("svelte").Snippet<[{
+            key: string;
+        }]> | undefined;
     } & {
         input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;

package/dist/ui/input/InputRelation.svelte

@@ -1,116 +1,128 @@
-<script generics="RelationItem extends {id: string}">import { createEventDispatcher, tick } from "svelte";
-import debounce from "debounce";
-import { toast } from "svelte-sonner";
-import { mdiClose } from "@mdi/js";
-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 RelationAfter from "./RelationAfter.svelte";
-export let key = Math.random().toString();
-export let label = "";
-export let search;
-export let createUrl = "";
-export let createTitle = "Nouveau";
-export let createIcon = void 0;
-let item = null;
-export { item as value };
-export let error = "";
-export let placeholder = "";
-export let tippyProps = {};
-export let dropdownProps = {};
-export let flatMode = false;
-export let slotItem = null;
-export let slotSuggestion = slotItem;
-export let input = void 0;
-let klass = "";
-export { klass as class };
-export let classList = "";
-let inputElement;
-let proposedItems = [];
-let isLoading = false;
-let isError = false;
-let focusIndex = 0;
-let searchValue = "";
-const dispatch = createEventDispatcher();
-export async function clear() {
-  searchValue = "";
-  item = null;
-  await tick();
-  inputElement.focus();
-}
-async function select(index = focusIndex) {
-  item = proposedItems[index];
-  dispatch("input", { value: item });
-}
-async function searchItems(searchValue2 = "") {
-  try {
-    isLoading = true;
-    isError = false;
-    focusIndex = 0;
-    proposedItems = await search(searchValue2);
-  } catch (error2) {
-    toast.error("Erreur");
-    isError = true;
-    console.error(error2);
-  } finally {
-    isLoading = false;
-  }
-}
-const searchItemsDebounce = debounce(searchItems, 150);
-function handleFocus() {
-  searchItems();
-}
-async function handleBlur() {
-  searchValue = "";
-}
+<script lang="ts" generics="RelationItem extends {id: string}">
+	import { createEventDispatcher, tick, type ComponentProps, type Snippet } from 'svelte'
+	import type { HTMLInputAttributes } from 'svelte/elements'
+	import debounce from 'debounce'
+	import { toast } from 'svelte-sonner'
+	import { mdiClose } from '@mdi/js'
+
+	import { USE_COERCE_JSON } from '../../utils/constant.js'
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { FormControl, SelectorList } from './index.js'
+	import type { TippyProps } from '../../utils/tippy.js'
+	import RelationAfter from './RelationAfter.svelte'
+
+	export let key = Math.random().toString()
+	export let label = ''
+	export let search: (q: string) => Promise<RelationItem[]>
+	export let createUrl = ''
+	export let createTitle = 'Nouveau'
+	export let createIcon: string | undefined = undefined
+	let item: RelationItem | null = null
+	export { item as value }
+	export let error = ''
+	export let placeholder = ''
+	export let tippyProps: Partial<TippyProps> = {}
+	export let dropdownProps: ComponentProps<DropDown> = {}
+	export let flatMode = false
+	export let slotItem: Snippet<[RelationItem]>
+	export let slotSuggestion: Snippet<[RelationItem]> = slotItem
+	export let input: HTMLInputAttributes | undefined = undefined
+	export let append: Snippet | undefined = undefined
+
+	let klass = ''
+	export { klass as class }
+	export let classList = ''
+
+	let inputElement: HTMLInputElement
+
+	let proposedItems: RelationItem[] = []
+
+	let isLoading = false
+	let isError = false
+	let focusIndex = 0
+	let searchValue = ''
+
+	const dispatch = createEventDispatcher<{ input: { value: RelationItem } }>()
+
+	export async function clear() {
+		searchValue = ''
+		item = null
+		await tick()
+		inputElement.focus()
+	}
+
+	async function select(index = focusIndex) {
+		item = proposedItems[index]
+		dispatch('input', { value: item })
+	}
+
+	async function searchItems(searchValue = '') {
+		try {
+			isLoading = true
+			isError = false
+			focusIndex = 0
+			proposedItems = await search(searchValue)
+		} catch (error) {
+			toast.error('Erreur')
+			isError = true
+			console.error(error)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	const searchItemsDebounce = debounce(searchItems, 150)
+
+	function handleFocus() {
+		searchItems()
+	}
+	async function handleBlur() {
+		searchValue = ''
+	}
 </script>
 
 <DropDown {tippyProps} disable={flatMode} {...dropdownProps}>
 	<div class="contents" slot="activator">
-		<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="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} />
+		<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>
-				<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>
+				{#if item}
+					<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={() => clear()} class="btn btn-square btn-sm">
+							<Icon path={mdiClose} />
+						</button>
 					</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}
+					<input
+						type="hidden"
+						name={key}
+						value="{USE_COERCE_JSON}{JSON.stringify({ id: item.id })}"
+					/>
+				{/if}
+			{/snippet}
 		</FormControl>
 	</div>
 
@@ -124,10 +136,6 @@ async function handleBlur() {
 		class="w-full min-w-40 {classList}"
 		on:select={({ detail }) => select(detail)}
 	>
-		<slot name="suggestion" item={proposedItems[index]}>
-			<Slot slot={slotSuggestion} args={proposedItems[index]}>
-				{proposedItems[index].id}
-			</Slot>
-		</slot>
+		{@render slotSuggestion(proposedItems[index])}
 	</SelectorList>
 </DropDown>

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

@@ -1,7 +1,7 @@
 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;
 }> {
@@ -31,11 +31,13 @@ declare class __sveltets_Render<RelationItem extends {
             hide?: (() => void) | undefined;
             show?: (() => void) | undefined;
             setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;
+            children?: Snippet<[]> | undefined;
         } | undefined;
         flatMode?: boolean | undefined;
-        slotItem?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
-        slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
+        slotItem: Snippet<[RelationItem]>;
+        slotSuggestion?: Snippet<[RelationItem]> | undefined;
         input?: HTMLInputAttributes | undefined;
+        append?: Snippet<[]> | undefined;
         class?: string | undefined;
         classList?: string | undefined;
         clear?: (() => Promise<void>) | undefined;
@@ -47,15 +49,7 @@ declare class __sveltets_Render<RelationItem extends {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        append: {};
-        item: {
-            item: RelationItem | null;
-        };
-        suggestion: {
-            item: RelationItem;
-        };
-    };
+    slots(): {};
 }
 export type InputRelationProps<RelationItem extends {
     id: string;

package/dist/ui/input/InputRelations.svelte

@@ -1,82 +1,94 @@
-<script generics="RelationItem extends {id: string}">import { createEventDispatcher, tick } from "svelte";
-import { slide } from "svelte/transition";
-import { toast } from "svelte-sonner";
-import { mdiClose } from "@mdi/js";
-import debounce from "debounce";
-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 RelationAfter from "./RelationAfter.svelte";
-export let key = "";
-export let label = "";
-export let search;
-export let createUrl = "";
-export let createTitle = "";
-export let createIcon = void 0;
-export let error = "";
-export let placeholder = "";
-export let flatMode = false;
-export let slotItem = null;
-export let slotSuggestion = slotItem;
-export let input = void 0;
-let klass = "";
-export { klass as class };
-export let classList = "";
-let proposedItems = [];
-let items = null;
-export { items as value };
-let isLoading = false;
-let isError = false;
-let focusIndex = 0;
-let searchValue = "";
-let dropdown;
-const dispatch = createEventDispatcher();
-let inputSearch;
-async function select(index = focusIndex) {
-  const proposedItem = proposedItems[index];
-  if (!proposedItem)
-    return;
-  if (!items)
-    items = [proposedItem];
-  else
-    items = [...items, proposedItem];
-  dropdown.hide();
-  inputSearch.select();
-  proposedItems = [...proposedItems.slice(0, index), ...proposedItems.slice(index + 1)];
-  dispatch("input", { value: items.map(({ id }) => id), items });
-  await tick();
-  setTimeout(() => dropdown.show(), 200);
-}
-function remove(index) {
-  if (!items?.length)
-    return;
-  items = [...items.slice(0, index), ...items.slice(index + 1)];
-}
-async function searchItems(searchValue2 = "") {
-  try {
-    isLoading = true;
-    isError = false;
-    focusIndex = 0;
-    const res = await search(searchValue2);
-    const currentIds = items?.map(({ id }) => id) || [];
-    proposedItems = res.filter(({ id }) => !currentIds.includes(id));
-  } catch (error2) {
-    toast.error("Erreur");
-    isError = true;
-    console.error(error2);
-  } finally {
-    isLoading = false;
-  }
-}
-const searchItemsDebounce = debounce(searchItems, 150);
-function handleFocus() {
-  searchItems();
-}
-async function handleBlur() {
-  searchValue = "";
-}
+<script lang="ts" generics="RelationItem extends {id: string}">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	import { createEventDispatcher, tick, type Snippet } from 'svelte'
+	import { slide } from 'svelte/transition'
+	import { toast } from 'svelte-sonner'
+	import { mdiClose } from '@mdi/js'
+	import debounce from 'debounce'
+
+	import { USE_COERCE_JSON } from '../../utils/constant.js'
+	import { Icon } from '../icon/index.js'
+	import { FormControl, SelectorList } from './index.js'
+	import { DropDown } from '../menu/index.js'
+	import RelationAfter from './RelationAfter.svelte'
+
+	export let key = ''
+	export let label = ''
+	export let search: (q: string) => Promise<RelationItem[]>
+	export let createUrl = ''
+	export let createTitle = ''
+	export let createIcon: string | undefined = undefined
+	export let error = ''
+	export let placeholder = ''
+	export let flatMode = false
+	export let slotItem: Snippet<[RelationItem]>
+	export let slotSuggestion: Snippet<[RelationItem]> = slotItem
+	export let input: HTMLInputAttributes | undefined = undefined
+	export let append: Snippet | undefined = undefined
+
+	let klass = ''
+	export { klass as class }
+	export let classList = ''
+
+	let proposedItems: RelationItem[] = []
+	let items: RelationItem[] | null = null
+	export { items as value }
+
+	let isLoading = false
+	let isError = false
+	let focusIndex = 0
+	let searchValue = ''
+
+	let dropdown: DropDown
+	const dispatch = createEventDispatcher<{ input: { value: string[]; items: RelationItem[] } }>()
+	let inputSearch: HTMLInputElement
+
+	async function select(index = focusIndex) {
+		const proposedItem = proposedItems[index]
+		if (!proposedItem) return
+		if (!items) items = [proposedItem]
+		else items = [...items, proposedItem]
+		dropdown.hide()
+		inputSearch.select()
+		proposedItems = [...proposedItems.slice(0, index), ...proposedItems.slice(index + 1)]
+		dispatch('input', { value: items.map(({ id }) => id), items })
+		await tick()
+		setTimeout(() => dropdown.show(), 200)
+	}
+
+	function remove(index: number) {
+		if (!items?.length) return
+		items = [...items.slice(0, index), ...items.slice(index + 1)]
+	}
+
+	async function searchItems(searchValue = '') {
+		try {
+			isLoading = true
+			isError = false
+			focusIndex = 0
+			const res = await search(searchValue)
+			const currentIds = items?.map(({ id }) => id) || []
+			proposedItems = res.filter(({ id }) => !currentIds.includes(id))
+		} catch (error) {
+			toast.error('Erreur')
+			isError = true
+			console.error(error)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	const searchItemsDebounce = debounce(searchItems, 150)
+
+	function handleFocus() {
+		searchItems()
+		// dropdown.show()
+	}
+	async function handleBlur() {
+		// dropdown.hide()
+		searchValue = ''
+	}
 </script>
 
 <DropDown bind:this={dropdown} disable={flatMode}>
@@ -90,11 +102,7 @@ async function handleBlur() {
 								transition:slide|local={{ axis: 'x', duration: 200 }}
 								class="badge badge-outline badge-lg items-center whitespace-nowrap pr-0 text-right"
 							>
-								<slot {item} name="item">
-									<Slot slot={slotItem} args={item}>
-										{item.id}
-									</Slot>
-								</slot>
+								{@render slotItem(item)}
 								<div
 									class="btn btn-circle btn-ghost btn-xs ml-1 mr-[2px] h-[18px] min-h-[18px] w-[18px]"
 									role="button"
@@ -127,7 +135,7 @@ async function handleBlur() {
 
 						<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
 					</div>
-					<slot name="append" />
+					{@render append?.()}
 				</div>
 			</div>
 
@@ -149,10 +157,6 @@ async function handleBlur() {
 		class="w-full min-w-40 {classList}"
 		on:select={({ detail }) => select(detail)}
 	>
-		<slot name="suggestion" item={proposedItems[index]}>
-			<Slot slot={slotSuggestion} args={proposedItems[index]}>
-				{proposedItems[index].id}
-			</Slot>
-		</slot>
+		{@render slotSuggestion(proposedItems[index])}
 	</SelectorList>
 </DropDown>

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { ComponentAndProps } from '../../utils/component.js';
+import { type Snippet } from 'svelte';
 declare class __sveltets_Render<RelationItem extends {
     id: string;
 }> {
@@ -14,9 +14,10 @@ declare class __sveltets_Render<RelationItem extends {
         error?: string | undefined;
         placeholder?: string | undefined;
         flatMode?: boolean | undefined;
-        slotItem?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
-        slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
+        slotItem: Snippet<[RelationItem]>;
+        slotSuggestion?: Snippet<[RelationItem]> | undefined;
         input?: HTMLInputAttributes | undefined;
+        append?: Snippet<[]> | undefined;
         class?: string | undefined;
         classList?: string | undefined;
         value?: RelationItem[] | null | undefined;
@@ -29,15 +30,7 @@ declare class __sveltets_Render<RelationItem extends {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        item: {
-            item: RelationItem;
-        };
-        append: {};
-        suggestion: {
-            item: RelationItem;
-        };
-    };
+    slots(): {};
 }
 export type InputRelationsProps<RelationItem extends {
     id: string;

package/dist/ui/input/InputSearch.svelte

@@ -1,13 +1,16 @@
-<script>import { mdiClose } from "@mdi/js";
-import { browser } from "$app/environment";
-import { page } from "$app/stores";
-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 inputElement;
+<script lang="ts">
+	import { mdiClose } from '@mdi/js'
+	import { browser } from '$app/environment'
+	import { page } from '$app/stores'
+	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 inputElement: HTMLInputElement
 </script>
 
 <InputText