fuma 0.0.1

package/dist/ui/input/InputRelations.svelte

@@ -0,0 +1,138 @@
+<script>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 { FormControl, Icon, DropDown, SelectorList } from "../index.js";
+import RelationAfter from "./RelationAfter.svelte";
+export let key = "";
+export let label = "";
+export let search;
+export let createUrl = "";
+export let createTitle = "";
+export let error = "";
+export let placeholder = "";
+export let flatMode = false;
+let klass = "";
+export { klass as class };
+export let classList = "";
+let proposedItems = [];
+export let items = null;
+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>
+
+<DropDown bind:this={dropdown} disable={flatMode}>
+	<div slot="activator">
+		<FormControl {key} {label} {error} class={klass}>
+			<div class="flex flex-col gap-2">
+				{#if items && items.length}
+					<div class="flex flex-wrap gap-2">
+						{#each items || [] as item, index (item.id)}
+							<div
+								transition:slide|local={{ axis: 'x', duration: 200 }}
+								class="badge badge-outline badge-lg items-center whitespace-nowrap pr-0 text-right"
+							>
+								<slot {item} name="badge">{item.id}</slot>
+								<div
+									class="btn btn-circle btn-ghost btn-xs ml-1 mr-[2px] h-[18px] min-h-[18px] w-[18px]"
+									role="button"
+									tabindex="0"
+									on:click={() => remove(index)}
+									on:keyup={(event) => event.key === 'Enter' && remove(index)}
+								>
+									<Icon path={mdiClose} size={16} />
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+				<div class="flex grow gap-2">
+					<div class="relative flex grow items-center gap-2">
+						<input
+							type="text"
+							id={key}
+							name={key}
+							bind:this={inputSearch}
+							bind:value={searchValue}
+							on:input={(e) => searchItemsDebounce(e.currentTarget.value)}
+							on:focus={handleFocus}
+							on:blur={handleBlur}
+							autocomplete="off"
+							{placeholder}
+							class="input input-bordered grow"
+						/>
+
+						<RelationAfter {isLoading} {createUrl} {createTitle} />
+					</div>
+					<slot name="append" />
+				</div>
+			</div>
+
+			<input type="hidden" name={key} value={JSON.stringify(items?.map(({ id }) => id) || [])} />
+		</FormControl>
+	</div>
+
+	<SelectorList
+		trigger={inputSearch}
+		items={proposedItems}
+		{isError}
+		{isLoading}
+		{focusIndex}
+		let:index
+		class="w-full {classList}"
+		on:select={({ detail }) => select(detail)}
+	>
+		<slot name="listItem" item={proposedItems[index]}>
+			{proposedItems[index].id}
+		</slot>
+	</SelectorList>
+</DropDown>

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

@@ -0,0 +1,49 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<RelationItem extends {
+    id: string;
+}> {
+    props(): {
+        key?: string | undefined;
+        label?: string | undefined;
+        search: (q: string) => Promise<RelationItem[]>;
+        createUrl?: string | undefined;
+        createTitle?: string | undefined;
+        error?: string | undefined;
+        placeholder?: string | undefined;
+        flatMode?: boolean | undefined;
+        class?: string | undefined;
+        classList?: string | undefined;
+        items?: RelationItem[] | null | undefined;
+    };
+    events(): {
+        input: CustomEvent<{
+            value: string[];
+            items: RelationItem[];
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        badge: {
+            item: RelationItem;
+        };
+        append: {};
+        listItem: {
+            item: RelationItem;
+        };
+    };
+}
+export type InputRelationsProps<RelationItem extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<RelationItem>['props']>;
+export type InputRelationsEvents<RelationItem extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<RelationItem>['events']>;
+export type InputRelationsSlots<RelationItem extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<RelationItem>['slots']>;
+export default class InputRelations<RelationItem extends {
+    id: string;
+}> extends SvelteComponent<InputRelationsProps<RelationItem>, InputRelationsEvents<RelationItem>, InputRelationsSlots<RelationItem>> {
+}
+export {};

package/dist/ui/input/InputSearch.svelte

@@ -0,0 +1,43 @@
+<script>import { mdiClose } from "@mdi/js";
+import { browser } from "$app/environment";
+import { page } from "$app/stores";
+import { Icon, 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>
+
+<InputText
+	{key}
+	bind:inputElement
+	bind:value
+	on:blur
+	on:blur
+	on:input
+	on:keydown
+	on:keyup
+	bindWithParams
+	input={{
+		class: 'input-sm pr-8',
+		placeholder: 'Recherche',
+		autocomplete: 'fuck-off',
+		inputmode: 'search'
+	}}
+	wrapperClass="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>
+</InputText>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        key?: string | undefined;
+        value?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputSearchProps = typeof __propDef.props;
+export type InputSearchEvents = typeof __propDef.events;
+export type InputSearchSlots = typeof __propDef.slots;
+export default class InputSearch extends SvelteComponent<InputSearchProps, InputSearchEvents, InputSearchSlots> {
+}
+export {};

package/dist/ui/input/InputSelect.svelte

@@ -0,0 +1,59 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { SelectorList, DropDown, Icon } from "../index.js";
+import { parseOptions } from "../../utils/options.js";
+export let key = "";
+export let value = "";
+export let options;
+export let noBtnClass = false;
+let klass = "";
+export { klass as class };
+$:
+  _options = parseOptions(options);
+$:
+  selectedOption = _options.find((opt) => opt.value === value);
+let dropDown;
+let button;
+const dispatch = createEventDispatcher();
+let focusIndex = 0;
+onMount(() => {
+  const index = _options.findIndex((opt) => opt.value === value);
+  focusIndex = index === -1 ? 0 : index;
+});
+function onSelect(index) {
+  focusIndex = index;
+  value = _options[index].value;
+  dispatch("select", value);
+  dropDown.hide();
+}
+</script>
+
+<input type="hidden" name={key} {value} />
+
+<DropDown bind:this={dropDown}>
+	<button bind:this={button} slot="activator" type="button" class:btn={!noBtnClass} class={klass}>
+		<slot name="btn">
+			{#if selectedOption}
+				{#if selectedOption.icon}
+					<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+				{/if}
+				<span>{selectedOption.label}</span>
+			{:else}
+				<slot name="placeholder">Sélection</slot>
+			{/if}
+		</slot>
+	</button>
+
+	<SelectorList
+		trigger={button}
+		{focusIndex}
+		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={21} class="opacity-70" />
+		{/if}
+		<span class="whitespace-nowrap">{item.label}</span>
+	</SelectorList>
+</DropDown>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type Options } from '../../utils/options.js';
+declare const __propDef: {
+    props: {
+        key?: string | undefined;
+        value?: string | undefined;
+        options: Options;
+        noBtnClass?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        select: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        btn: {};
+        placeholder: {};
+    };
+};
+export type InputSelectProps = typeof __propDef.props;
+export type InputSelectEvents = typeof __propDef.events;
+export type InputSelectSlots = typeof __propDef.slots;
+export default class InputSelect extends SvelteComponent<InputSelectProps, InputSelectEvents, InputSelectSlots> {
+}
+export {};

package/dist/ui/input/InputText.svelte

@@ -0,0 +1,32 @@
+<script>import { FormControl, bindValueWithParams } from "./index.js";
+$:
+  ({ input, value: _value, wrapperClass, bindWithParams, ...props } = $$props);
+export let value = _value;
+export let inputElement = void 0;
+$:
+  ({ class: inputClass, ...inputProps } = input || {});
+</script>
+
+<FormControl {...props} enhanceDisabled={props.enhanceDisabled || bindWithParams} let:key>
+	<slot name="label_append" slot="label_append" />
+
+	<div class={wrapperClass}>
+		<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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import { type InputProps } from './index.js';
+declare const __propDef: {
+    props: InputProps;
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label_append: {
+            slot: string;
+        };
+        prepend: {
+            value: string | undefined;
+        };
+        append: {
+            value: string | undefined;
+        };
+    };
+};
+export type InputTextProps = typeof __propDef.props;
+export type InputTextEvents = typeof __propDef.events;
+export type InputTextSlots = typeof __propDef.slots;
+export default class InputText extends SvelteComponent<InputTextProps, InputTextEvents, InputTextSlots> {
+}
+export {};

package/dist/ui/input/InputTextarea.svelte

@@ -0,0 +1,20 @@
+<script>import { FormControl } from "./index.js";
+$:
+  ({ textarea, value: _value, ...props } = $$props);
+export let value = _value;
+</script>
+
+<FormControl {...props} let:key>
+	<slot name="label_append" slot="label_append" />
+	<textarea
+		bind:value
+		on:input
+		on:focus
+		on:blur
+		name={key}
+		id={key}
+		class="textarea textarea-bordered"
+		rows="4"
+		{...textarea}
+	/>
+</FormControl>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type TextareaProps } from './index.js';
+declare const __propDef: {
+    props: TextareaProps;
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label_append: {
+            slot: string;
+        };
+    };
+};
+export type InputTextareaProps = typeof __propDef.props;
+export type InputTextareaEvents = typeof __propDef.events;
+export type InputTextareaSlots = typeof __propDef.slots;
+export default class InputTextarea extends SvelteComponent<InputTextareaProps, InputTextareaEvents, InputTextareaSlots> {
+}
+export {};

package/dist/ui/input/InputTime.svelte

@@ -0,0 +1,19 @@
+<script>import { FormControl } from "./index.js";
+$:
+  ({ input, value: _value, ...props } = $$props);
+export let value = _value;
+</script>
+
+<FormControl {...props} let:key>
+	<input
+		bind:value
+		on:input
+		on:focus
+		on:blur
+		type="time"
+		name={key}
+		id={key}
+		class="input input-bordered"
+		{...input}
+	/>
+</FormControl>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type InputProps } from './index.js';
+declare const __propDef: {
+    props: InputProps;
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTimeProps = typeof __propDef.props;
+export type InputTimeEvents = typeof __propDef.events;
+export type InputTimeSlots = typeof __propDef.slots;
+export default class InputTime extends SvelteComponent<InputTimeProps, InputTimeEvents, InputTimeSlots> {
+}
+export {};

package/dist/ui/input/RelationAfter.svelte

@@ -0,0 +1,42 @@
+<script>import { fade } from "svelte/transition";
+import { createEventDispatcher } from "svelte";
+import { mdiClose, mdiLoading, mdiPlus } from "@mdi/js";
+import Icon from "../Icon.svelte";
+export let isLoading;
+export let isUnselectable = false;
+export let createUrl = "";
+export let createTitle = "";
+const dispatch = createEventDispatcher();
+</script>
+
+{#if isLoading}
+	<div class="absolute right-1" class:right-10={createUrl} transition:fade|local>
+		<Icon
+			path={mdiLoading}
+			class="w-9"
+			classSVG="animate-spin fill-primary-ligther stroke-primary-ligther"
+		/>
+	</div>
+{/if}
+
+{#if isUnselectable}
+	<div class="ml-[4px] hidden -translate-x-[2px] group-hover:block">
+		<Icon
+			path={mdiClose}
+			on:click={() => dispatch('unselect')}
+			title="Supprimer la sélection"
+			class="outline-primary-light outline outline-2 hover:bg-primary"
+		/>
+	</div>
+{/if}
+
+{#if createUrl}
+	<div class="ml-[4px] -translate-x-[2px]">
+		<Icon
+			path={mdiPlus}
+			on:click={() => dispatch('create')}
+			title={createTitle}
+			class="btn btn-square"
+		/>
+	</div>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isLoading: boolean;
+        isUnselectable?: boolean | undefined;
+        createUrl?: string | undefined;
+        createTitle?: string | undefined;
+    };
+    events: {
+        unselect: CustomEvent<void>;
+        create: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RelationAfterProps = typeof __propDef.props;
+export type RelationAfterEvents = typeof __propDef.events;
+export type RelationAfterSlots = typeof __propDef.slots;
+export default class RelationAfter extends SvelteComponent<RelationAfterProps, RelationAfterEvents, RelationAfterSlots> {
+}
+export {};

package/dist/ui/input/SelectorList.svelte

@@ -0,0 +1,46 @@
+<script>import { createEventDispatcher } from "svelte";
+import { selector } from "../../action/selector.js";
+let klass = "";
+export { klass as class };
+export let items;
+export let isError = false;
+export let isLoading = false;
+export let focusIndex = 0;
+export let trigger = void 0;
+export let keyDownEvent = void 0;
+export let keyDownPreventDefault = true;
+const dispatch = createEventDispatcher();
+</script>
+
+<ul
+	use:selector={{
+		trigger,
+		focusIndex,
+		onSelect: (index) => dispatch('select', index),
+		onFocus: (index) => (focusIndex = index),
+		keyDownEvent,
+		keyDownPreventDefault
+	}}
+	class="flex flex-col gap-1 {klass}"
+>
+	{#if isError}
+		<li class="p-2 text-center">Erreur 🥲</li>
+	{:else}
+		{#each items as item, index (item.id)}
+			{@const isFocused = focusIndex === index}
+			<li
+				role="menuitem"
+				on:click={() => dispatch('select', index)}
+				on:keydown={() => dispatch('select', index)}
+				class="flex cursor-pointer items-center justify-start gap-3 rounded px-3 py-2 hover:bg-base-200"
+				class:bg-base-300={isFocused}
+			>
+				<slot {item} {index} />
+			</li>
+		{:else}
+			<li class="px-3 py-2 rounded opacity-70">
+				{isLoading ? 'Chargement...' : 'Aucun élément'}
+			</li>
+		{/each}
+	{/if}
+</ul>

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        class?: string | undefined;
+        items: Item[];
+        isError?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        focusIndex?: number | undefined;
+        trigger?: HTMLElement | undefined;
+        keyDownEvent?: KeyboardEvent | undefined;
+        keyDownPreventDefault?: boolean | undefined;
+    };
+    events(): {
+        select: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            item: Item;
+            index: any;
+        };
+    };
+}
+export type SelectorListProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type SelectorListEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type SelectorListSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class SelectorList<Item extends {
+    id: string;
+}> extends SvelteComponent<SelectorListProps<Item>, SelectorListEvents<Item>, SelectorListSlots<Item>> {
+}
+export {};

package/dist/ui/input/action.d.ts

@@ -0,0 +1,13 @@
+type BindOptions = {
+    bindEnable?: boolean;
+    listenerType?: 'input' | 'click';
+    debounceTime?: number;
+    initValue?: (initalValue: string) => unknown;
+};
+export declare function bindValueWithParams(node: HTMLInputElement | HTMLButtonElement, { bindEnable, debounceTime, initValue, listenerType }: BindOptions): {
+    destroy(): void;
+} | undefined;
+export declare function bindCheckedWithParams(node: HTMLInputElement, { bindEnable, listenerType, debounceTime, initValue }: BindOptions): {
+    destroy: () => void;
+} | undefined;
+export {};