fuma 1.0.20 → 2.0.0

package/dist/ui/input/InputRelation.svelte

@@ -1,116 +1,137 @@
-<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 | number}">
+	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 noSlotItemWrapper = 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} />
-				</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>
+		<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>
-					<button type="button" on:click={() => clear()} class="btn btn-square btn-sm">
-						<Icon path={mdiClose} />
-					</button>
+					{@render append?.()}
 				</div>
-				<input
-					type="hidden"
-					name={key}
-					value="{USE_COERCE_JSON}{JSON.stringify({ id: item.id })}"
-				/>
-			{/if}
+
+				{#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}
+					<input
+						type="hidden"
+						name={key}
+						value="{USE_COERCE_JSON}{JSON.stringify({ id: item.id })}"
+					/>
+				{/if}
+			{/snippet}
 		</FormControl>
 	</div>
 
@@ -124,10 +145,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,43 +1,30 @@
-import { SvelteComponent } from "svelte";
+import { type ComponentProps, type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import { DropDown } from '../menu/index.js';
 import type { TippyProps } from '../../utils/tippy.js';
-import type { ComponentAndProps } from '../../utils/component.js';
 declare class __sveltets_Render<RelationItem extends {
-    id: string;
+    id: string | number;
 }> {
     props(): {
-        key?: string | undefined;
-        label?: string | undefined;
+        key?: string;
+        label?: string;
         search: (q: string) => Promise<RelationItem[]>;
-        createUrl?: string | undefined;
-        createTitle?: string | undefined;
+        createUrl?: string;
+        createTitle?: string;
         createIcon?: string | undefined;
         value?: RelationItem | null | undefined;
-        error?: string | undefined;
-        placeholder?: string | undefined;
-        tippyProps?: Partial<TippyProps> | undefined;
-        dropdownProps?: {
-            tippyProps?: Partial<TippyProps> | undefined;
-            class?: string | undefined;
-            classWrapper?: string | undefined;
-            classActivator?: string | undefined;
-            useSingleton?: boolean | undefined;
-            autofocus?: boolean | undefined;
-            hideOnBlur?: boolean | undefined;
-            hideOnNav?: boolean | undefined;
-            tip?: import("tippy.js").Instance<TippyProps> | undefined;
-            disable?: boolean | undefined;
-            content?: HTMLDivElement | undefined;
-            hide?: (() => void) | undefined;
-            show?: (() => void) | undefined;
-            setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;
-        } | undefined;
-        flatMode?: boolean | undefined;
-        slotItem?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
-        slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
+        error?: string;
+        placeholder?: string;
+        tippyProps?: Partial<TippyProps>;
+        dropdownProps?: ComponentProps<DropDown>;
+        flatMode?: boolean;
+        noSlotItemWrapper?: boolean;
+        slotItem: Snippet<[RelationItem]>;
+        slotSuggestion?: Snippet<[RelationItem]> | undefined;
         input?: HTMLInputAttributes | undefined;
-        class?: string | undefined;
-        classList?: string | undefined;
+        append?: Snippet | undefined;
+        class?: string;
+        classList?: string;
         clear?: (() => Promise<void>) | undefined;
     };
     events(): {
@@ -47,28 +34,27 @@ declare class __sveltets_Render<RelationItem extends {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        append: {};
-        item: {
-            item: RelationItem | null;
-        };
-        suggestion: {
-            item: RelationItem;
-        };
+    slots(): {};
+    bindings(): string;
+    exports(): {
+        clear: () => Promise<void>;
     };
 }
-export type InputRelationProps<RelationItem extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<RelationItem>['props']>;
-export type InputRelationEvents<RelationItem extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<RelationItem>['events']>;
-export type InputRelationSlots<RelationItem extends {
-    id: string;
-}> = ReturnType<__sveltets_Render<RelationItem>['slots']>;
-export default class InputRelation<RelationItem extends {
-    id: string;
-}> extends SvelteComponent<InputRelationProps<RelationItem>, InputRelationEvents<RelationItem>, InputRelationSlots<RelationItem>> {
-    get clear(): () => Promise<void>;
+interface $$IsomorphicComponent {
+    new <RelationItem extends {
+        id: string | number;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<RelationItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<RelationItem>['props']>, ReturnType<__sveltets_Render<RelationItem>['events']>, ReturnType<__sveltets_Render<RelationItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<RelationItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<RelationItem>['exports']>;
+    <RelationItem extends {
+        id: string | number;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<RelationItem>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<RelationItem>['events']>;
+    }): ReturnType<__sveltets_Render<RelationItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const InputRelation: $$IsomorphicComponent;
+type InputRelation<RelationItem extends {
+    id: string | number;
+}> = InstanceType<typeof InputRelation<RelationItem>>;
+export default InputRelation;

package/dist/ui/input/InputRelations.svelte

@@ -1,82 +1,96 @@
-<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 | number}">
+	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 | number)[]; 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 +104,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 +137,7 @@ async function handleBlur() {
 
 						<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
 					</div>
-					<slot name="append" />
+					{@render append?.()}
 				</div>
 			</div>
 
@@ -149,10 +159,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>