fuma 0.0.1

package/dist/ui/input/InputImagePreview.svelte

@@ -0,0 +1,56 @@
+<script>import { InputImage } from "./index.js";
+import { PlaceholderImage } from "../index.js";
+export let key = "";
+export let src = "";
+export let alt = "";
+let klass = "";
+export { klass as class };
+export let title = "Image";
+export let x;
+export let y;
+export let aspect = x / y;
+let crop = null;
+let image = "";
+let scale = 0;
+let preview;
+async function handleSubmit(detail) {
+  crop = detail.crop;
+  image = detail.image;
+  scale = x / crop.width;
+}
+</script>
+
+<InputImage {key} {title} {aspect} on:submit={({ detail }) => handleSubmit(detail)}>
+	{#if crop && image}
+		<div
+			class="relative overflow-hidden rounded-lg border"
+			style:width="{x}px"
+			style:height="{y}px"
+		>
+			<img
+				src={image}
+				alt="preview"
+				bind:this={preview}
+				class="absolute max-w-none"
+				style:margin="-{scale * crop.y}px 0 0 -{scale * crop.x}px"
+				style:width="{scale * preview?.naturalWidth}px"
+				style:height="{scale * preview?.naturalHeight}px"
+			/>
+		</div>
+	{:else if src}
+		<div class="group relative">
+			<span
+				class="
+				absolute inset-[1px] grid
+				place-content-center rounded-lg bg-base-300/30
+				font-medium opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100
+			"
+			>
+				{title}
+			</span>
+			<img class="{klass} rounded-lg border" {src} {alt} width={x} height={y} />
+		</div>
+	{:else}
+		<PlaceholderImage {x} {y}>{title}</PlaceholderImage>
+	{/if}
+</InputImage>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        key?: string | undefined;
+        src?: string | undefined;
+        alt?: string | undefined;
+        class?: string | undefined;
+        title?: string | undefined;
+        x: number;
+        y: number;
+        aspect?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputImagePreviewProps = typeof __propDef.props;
+export type InputImagePreviewEvents = typeof __propDef.events;
+export type InputImagePreviewSlots = typeof __propDef.slots;
+export default class InputImagePreview extends SvelteComponent<InputImagePreviewProps, InputImagePreviewEvents, InputImagePreviewSlots> {
+}
+export {};

package/dist/ui/input/InputNumber.svelte

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

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

@@ -0,0 +1,23 @@
+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: {
+        label_append: {
+            slot: string;
+        };
+    };
+};
+export type InputNumberProps = typeof __propDef.props;
+export type InputNumberEvents = typeof __propDef.events;
+export type InputNumberSlots = typeof __propDef.slots;
+export default class InputNumber extends SvelteComponent<InputNumberProps, InputNumberEvents, InputNumberSlots> {
+}
+export {};

package/dist/ui/input/InputOptionInParam.svelte

@@ -0,0 +1,34 @@
+<script>import { Icon } from "../index.js";
+import { parseOptions } from "../../utils/options.js";
+import { urlParam } from "../../store/param.js";
+let klass = "";
+export { klass as class };
+export let key;
+export let options;
+export let removeKeys = [];
+$:
+  _options = parseOptions(options);
+</script>
+
+<div class="join {klass}">
+	{#each _options as opt}
+		{@const active = $urlParam.hasValue(key, opt.value)}
+		<a
+			href={$urlParam.toggle({ [key]: opt.value }, ...removeKeys)}
+			class="btn join-item btn-sm"
+			class:btn-primary={active}
+			class:w-9={opt.icon}
+		>
+			{#if opt.icon}
+				<Icon
+					path={opt.icon}
+					title={opt.label}
+					class={active ? 'fill-primary-content' : 'opacity-70'}
+					size={20}
+				/>
+			{:else}
+				{opt.label}
+			{/if}
+		</a>
+	{/each}
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type Options } from '../../utils/options.js';
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        key: string;
+        options: Options;
+        removeKeys?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputOptionInParamProps = typeof __propDef.props;
+export type InputOptionInParamEvents = typeof __propDef.events;
+export type InputOptionInParamSlots = typeof __propDef.slots;
+export default class InputOptionInParam extends SvelteComponent<InputOptionInParamProps, InputOptionInParamEvents, InputOptionInParamSlots> {
+}
+export {};

package/dist/ui/input/InputOptions.svelte

@@ -0,0 +1,79 @@
+<script>import { slide } from "svelte/transition";
+import { mdiPlus, mdiTrashCanOutline } from "@mdi/js";
+import { toast } from "svelte-sonner";
+import { Icon } from "../index.js";
+import { listEditable } from "../../action/list/index.js";
+export let key;
+export let value = "[]";
+let options = JSON.parse(value);
+let newOption = "";
+let optionInput;
+function handleKeyDown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    createOption();
+  }
+}
+function createOption() {
+  if (!newOption)
+    return;
+  if (options.includes(newOption))
+    return toast.warning("Cette option \xE9xiste d\xE9j\xE0 !");
+  options = [...options, newOption];
+  newOption = "";
+  value = JSON.stringify(options);
+  optionInput.focus();
+}
+function removeOption(index) {
+  options = [...options.slice(0, index), ...options.slice(index + 1)];
+  value = JSON.stringify(options);
+}
+function onChange(newOrder) {
+  options = newOrder;
+  value = JSON.stringify(options);
+}
+</script>
+
+<input type="hidden" name={key} {value} />
+
+<div class="label">
+	<span class="label-text">Options</span>
+</div>
+
+<div class="bordered rounded-box border p-2">
+	<div use:listEditable={{ items: options, onChange }}>
+		{#each options as option, index (option)}
+			<div class="flex items-center gap-2" transition:slide={{ duration: 200 }}>
+				<div class="grow pl-4">
+					{option}
+				</div>
+				<button
+					type="button"
+					class="btn btn-square btn-ghost btn-sm"
+					on:click={() => removeOption(index)}
+				>
+					<Icon path={mdiTrashCanOutline} size={20} class="fill-error" />
+				</button>
+			</div>
+		{/each}
+	</div>
+
+	<div class="join flex pt-2">
+		<input
+			bind:this={optionInput}
+			type="text"
+			placeholder="Nouvelle option"
+			class="input join-item input-bordered grow"
+			bind:value={newOption}
+			on:keydown={handleKeyDown}
+		/>
+		<button
+			type="button"
+			class="btn btn-square join-item"
+			disabled={!newOption}
+			on:click={createOption}
+		>
+			<Icon path={mdiPlus} title="Ajouter" />
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        key: string;
+        value?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputOptionsProps = typeof __propDef.props;
+export type InputOptionsEvents = typeof __propDef.events;
+export type InputOptionsSlots = typeof __propDef.slots;
+export default class InputOptions extends SvelteComponent<InputOptionsProps, InputOptionsEvents, InputOptionsSlots> {
+}
+export {};

package/dist/ui/input/InputPassword.svelte

@@ -0,0 +1,21 @@
+<script>import { FormControl } from "./index.js";
+$:
+  ({ input, value: _value, ...props } = $$props);
+export let value = _value;
+export let autocomplete = "current-password";
+</script>
+
+<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

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        classLabel?: string | undefined;
+        key?: string | undefined;
+        label?: string | undefined;
+        error?: string | undefined;
+        hint?: string | undefined;
+        prefix?: string | number | undefined;
+        prefixFor?: string | number | undefined;
+        enhanceDisabled?: boolean | undefined;
+    } & {
+        input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+        inputElement?: HTMLInputElement | undefined;
+        wrapperClass?: string | undefined;
+        value?: string | undefined;
+        bindWithParams?: boolean | undefined;
+    } & {
+        autocomplete?: string | undefined;
+    };
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputPasswordProps = typeof __propDef.props;
+export type InputPasswordEvents = typeof __propDef.events;
+export type InputPasswordSlots = typeof __propDef.slots;
+export default class InputPassword extends SvelteComponent<InputPasswordProps, InputPasswordEvents, InputPasswordSlots> {
+}
+export {};

package/dist/ui/input/InputRadio.svelte

@@ -0,0 +1,79 @@
+<script>import { onMount } from "svelte";
+import { slide } from "svelte/transition";
+import { parseOptions } from "../../utils/options.js";
+import { formContext } from "../../validation/form.js";
+import { FormControl, bindValueWithParams } from "./index.js";
+$:
+  ({
+    input,
+    value: _value,
+    error: _error,
+    options,
+    optionsClass = "",
+    hint,
+    class: klass,
+    ...props
+  } = $$props);
+export let value = _value;
+export let error = _error;
+$:
+  _options = parseOptions(options);
+let formControl;
+const { setError } = formContext.get();
+onMount(() => {
+  if (props.key)
+    setError[props.key] = (err) => error = err;
+  const inputs = formControl.querySelectorAll("input");
+  const handleInput = () => error = "";
+  inputs.forEach((input2) => input2.addEventListener("input", handleInput));
+  return () => {
+    inputs.forEach((input2) => input2.removeEventListener("input", handleInput));
+  };
+});
+</script>
+
+<div class={klass} bind:this={formControl}>
+	{#if props.label}
+		<div class="label">
+			<span class="label-text">{props.label}</span>
+			<slot name="label_append" />
+		</div>
+	{/if}
+
+	<div class={optionsClass}>
+		{#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"
+			>
+				<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>
+
+	{#if error}
+		<div class="label" transition:slide>
+			<span class="label-text-alt text-warning">{error}</span>
+		</div>
+	{:else if hint}
+		<div class="label" transition:slide>
+			<span class="label-text-alt text-info">{hint}</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import { type Options } from '../../utils/options.js';
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        classLabel?: string | undefined;
+        key?: string | undefined;
+        label?: string | undefined;
+        error?: string | undefined;
+        hint?: string | undefined;
+        prefix?: string | number | undefined;
+        prefixFor?: string | number | undefined;
+        enhanceDisabled?: boolean | undefined;
+    } & {
+        input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+        inputElement?: HTMLInputElement | undefined;
+        wrapperClass?: string | undefined;
+        value?: string | undefined;
+        bindWithParams?: boolean | undefined;
+    } & {
+        options: Options;
+        optionsClass?: string | undefined;
+    };
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label_append: {};
+    };
+};
+export type InputRadioProps = typeof __propDef.props;
+export type InputRadioEvents = typeof __propDef.events;
+export type InputRadioSlots = typeof __propDef.slots;
+export default class InputRadio extends SvelteComponent<InputRadioProps, InputRadioEvents, InputRadioSlots> {
+}
+export {};

package/dist/ui/input/InputRelation.svelte

@@ -0,0 +1,114 @@
+<script>import { createEventDispatcher, tick } from "svelte";
+import debounce from "debounce";
+import { toast } from "svelte-sonner";
+import { mdiClose } from "@mdi/js";
+import { FormControl, DropDown, Icon, 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 item = null;
+export let error = "";
+export let placeholder = "";
+export let tippyProps = {};
+export let flatMode = false;
+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>
+
+<DropDown {tippyProps} disable={flatMode}>
+	<div class="contents" slot="activator">
+		<FormControl {key} {label} {error} class={klass} let:key>
+			<div class="flex grow gap-2" class:hidden={item}>
+				<div class="relative flex grow items-center gap-2">
+					<input
+						type="text"
+						id={key}
+						name={key}
+						bind:this={inputElement}
+						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>
+
+			{#if item}
+				<div class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2">
+					<div class="grow">
+						<slot name="item" {item}>
+							{item.id}
+						</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={item.id} />
+			{/if}
+		</FormControl>
+	</div>
+
+	<SelectorList
+		items={proposedItems}
+		trigger={inputElement}
+		{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/InputRelation.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponent } from "svelte";
+import type { TippyProps } from '../../utils/tippy.js';
+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;
+        item?: RelationItem | null | undefined;
+        error?: string | undefined;
+        placeholder?: string | undefined;
+        tippyProps?: Partial<TippyProps> | undefined;
+        flatMode?: boolean | undefined;
+        class?: string | undefined;
+        classList?: string | undefined;
+        clear?: (() => Promise<void>) | undefined;
+    };
+    events(): {
+        input: CustomEvent<{
+            value: RelationItem;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        append: {};
+        item: {
+            item: RelationItem | null;
+        };
+        listItem: {
+            item: RelationItem;
+        };
+    };
+}
+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>;
+}
+export {};