fuma 0.0.1

package/dist/ui/input/InputBoolean.svelte

@@ -0,0 +1,29 @@
+<script>import { createEventDispatcher } from "svelte";
+import { FormControl, bindCheckedWithParams } from "./index.js";
+$:
+  ({ input, value: _value, bindWithParams, label, ...props } = $$props);
+export let value = _value;
+const dispatch = createEventDispatcher();
+</script>
+
+<FormControl {...props} let:key>
+	<div class="flex items-center gap-2">
+		<input type="hidden" name={key} value={value ? 'true' : ''} />
+		<input
+			bind:checked={value}
+			use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
+			on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
+			on:focus
+			on:blur
+			type="checkbox"
+			id={key}
+			class="checkbox"
+			{...input}
+		/>
+		<label for={key} class="label cursor-pointer">
+			<span class="label-text">
+				<slot>{label}</slot>
+			</span>
+		</label>
+	</div>
+</FormControl>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type InputProps } from './index.js';
+declare const __propDef: {
+    props: InputProps<boolean>;
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<boolean>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InputBooleanProps = typeof __propDef.props;
+export type InputBooleanEvents = typeof __propDef.events;
+export type InputBooleanSlots = typeof __propDef.slots;
+export default class InputBoolean extends SvelteComponent<InputBooleanProps, InputBooleanEvents, InputBooleanSlots> {
+}
+export {};

package/dist/ui/input/InputCheckboxs.svelte

@@ -0,0 +1,68 @@
+<script>import { slide } from "svelte/transition";
+import { FormControl } from "./index.js";
+import { parseOptions } from "../../utils/options.js";
+$:
+  ({
+    input,
+    value: _value,
+    options: _1,
+    class: klass,
+    checkboxesClass,
+    hint,
+    error,
+    ...props
+  } = $$props);
+export let value = _value || [];
+export let options;
+if (!value)
+  value = [];
+$:
+  _options = parseOptions(options);
+</script>
+
+<div class={klass}>
+	{#if props.label}
+		<div class="label">
+			<span class="label-text">{props.label}</span>
+			<slot name="label_append" />
+		</div>
+	{/if}
+
+	<div class={checkboxesClass}>
+		{#each _options as option, index}
+			<FormControl
+				{...props}
+				let:key
+				label={option.label}
+				prefixFor={index}
+				class="flex-row-reverse items-center justify-end gap-2"
+			>
+				<input
+					bind:group={value}
+					on:change
+					on:input
+					on:focus
+					on:blur
+					value={option.value}
+					type="checkbox"
+					name={key}
+					id="{index}{key}"
+					class="checkbox"
+					{...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>
+
+<input type="hidden" name={props.key} value={JSON.stringify(value)} />

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

@@ -0,0 +1,41 @@
+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;
+        checkboxesClass?: string | undefined;
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label_append: {};
+    };
+};
+export type InputCheckboxsProps = typeof __propDef.props;
+export type InputCheckboxsEvents = typeof __propDef.events;
+export type InputCheckboxsSlots = typeof __propDef.slots;
+export default class InputCheckboxs extends SvelteComponent<InputCheckboxsProps, InputCheckboxsEvents, InputCheckboxsSlots> {
+}
+export {};

package/dist/ui/input/InputCheckboxsMenu.svelte

@@ -0,0 +1,93 @@
+<script>import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { mdiClose } from "@mdi/js";
+import { urlParam } from "../../store/index.js";
+import { jsonParse, parseOptions } from "../../utils/index.js";
+import { DropDown, Icon } from "../index.js";
+import { FormControl } from "./index.js";
+$:
+  ({
+    input,
+    value: _value,
+    options: _1,
+    class: klass,
+    label,
+    right,
+    btnClass,
+    badgePrimary,
+    ...props
+  } = $$props);
+export let key;
+export let options;
+export let value = _value || jsonParse($page.url.searchParams.get(key), []);
+let dropdown;
+$:
+  _options = parseOptions(options);
+function handleSubmit() {
+  if (!dropdown)
+    return;
+  if (!value.length) {
+    goto($urlParam.without(key), { replaceState: true, noScroll: true });
+    return;
+  }
+  goto($urlParam.with({ [key]: JSON.stringify(value) }), { replaceState: true, noScroll: true });
+}
+function handleReset() {
+  dropdown.hide();
+  value = [];
+  goto($urlParam.without(key), { replaceState: true });
+}
+</script>
+
+<input type="hidden" name={key} value={JSON.stringify(value)} />
+
+<DropDown bind:this={dropdown} tippyProps={{ onHide: handleSubmit }} wrapperClass="mb-[-2px]">
+	<div class="join" class:ml-2={value.length} slot="activator">
+		<button class="btn indicator join-item btn-sm {btnClass || ''}">
+			<slot name="label">
+				<span>{label}</span>
+			</slot>
+			{#if value.length > 0}
+				<span
+					class="
+						badge indicator-item badge-sm indicator-start
+						{badgePrimary ? 'badge-primary' : 'badge-outline bg-base-100'}
+					"
+				>
+					{value.length}
+				</span>
+			{/if}
+		</button>
+		{#if value.length}
+			<button class="btn btn-square join-item btn-sm" on:click={handleReset}>
+				<Icon path={mdiClose} class="fill-base-content" />
+			</button>
+		{/if}
+	</div>
+
+	<div class={klass}>
+		{#each _options as option, index (option.value)}
+			<FormControl
+				{...props}
+				let:key
+				label={option.label}
+				prefixFor={index}
+				class="flex-row-reverse items-center justify-end gap-2 whitespace-nowrap"
+			>
+				<input
+					bind:group={value}
+					on:input
+					on:focus
+					on:blur
+					value={option.value}
+					type="checkbox"
+					id="{index}{key}"
+					class="checkbox"
+					{...input}
+				/>
+			</FormControl>
+		{:else}
+			<div class="px-3 py-2 rounded opacity-70">Aucun élément</div>
+		{/each}
+	</div>
+</DropDown>

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

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+import { type Options } from '../../utils/index.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;
+    } & {
+        key: string;
+        options: Options;
+        right?: boolean | undefined;
+        btnClass?: string | undefined;
+        badgePrimary?: boolean | undefined;
+    };
+    events: {
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+    };
+};
+export type InputCheckboxsMenuProps = typeof __propDef.props;
+export type InputCheckboxsMenuEvents = typeof __propDef.events;
+export type InputCheckboxsMenuSlots = typeof __propDef.slots;
+export default class InputCheckboxsMenu extends SvelteComponent<InputCheckboxsMenuProps, InputCheckboxsMenuEvents, InputCheckboxsMenuSlots> {
+}
+export {};

package/dist/ui/input/InputCheckboxsTree.svelte

@@ -0,0 +1,15 @@
+<script>import InputCheckboxsTreeNodes, {
+} from "./InputCheckboxsTreeNodes.svelte";
+export let label;
+export let options;
+let klass = "";
+export { klass as class };
+</script>
+
+<div class={klass}>
+	<div class="label">
+		<span class="label-text">{label}</span>
+		<slot name="label_append" />
+	</div>
+	<InputCheckboxsTreeNodes {options} />
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type OptionsNode } from './InputCheckboxsTreeNodes.svelte';
+declare const __propDef: {
+    props: {
+        label: string;
+        options: OptionsNode;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label_append: {};
+    };
+};
+export type InputCheckboxsTreeProps = typeof __propDef.props;
+export type InputCheckboxsTreeEvents = typeof __propDef.events;
+export type InputCheckboxsTreeSlots = typeof __propDef.slots;
+export default class InputCheckboxsTree extends SvelteComponent<InputCheckboxsTreeProps, InputCheckboxsTreeEvents, InputCheckboxsTreeSlots> {
+}
+export {};

package/dist/ui/input/InputCheckboxsTreeNodes.svelte

@@ -0,0 +1,60 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { InputBoolean } from "./index.js";
+export let options;
+const dispatch = createEventDispatcher();
+function handleChange(newValue, option) {
+  if (newValue === true)
+    dispatch("setTrue");
+  else if (option.options) {
+    option.options = setFalse(option.options);
+  }
+}
+function setFalse(_options) {
+  if (!_options)
+    return void 0;
+  return Object.entries(_options).reduce(
+    (acc, [key, opt]) => ({
+      ...acc,
+      [key]: {
+        label: opt.label,
+        value: false,
+        options: setFalse(opt.options)
+      }
+    }),
+    {}
+  );
+}
+</script>
+
+{#each Object.keys(options) as key (key)}
+	<InputBoolean
+		{key}
+		label={options[key].label}
+		bind:value={options[key].value}
+		on:change={({ detail }) => handleChange(detail, options[key])}
+	/>
+
+	{#if options[key].options}
+		<div class="flex">
+			<div class="relative -mt-[6px] ml-3 w-3">
+				{#each Object.keys(options[key].options || {}) as k, index}
+					<div
+						style:height="{24 + index * 36}px"
+						class="t-0 bordered absolute w-3 rounded-bl-lg border-b-2 border-l-2"
+					/>
+				{/each}
+			</div>
+			<div>
+				<svelte:self
+					options={options[key].options}
+					on:setTrue={() => {
+						options[key].value = true
+						dispatch('setTrue')
+					}}
+				/>
+			</div>
+		</div>
+	{/if}
+{/each}

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+export type OptionsNode = Record<string, {
+    label: string;
+    value?: boolean;
+    options?: OptionsNode;
+}>;
+declare const __propDef: {
+    props: {
+        options: OptionsNode;
+    };
+    events: {
+        setTrue: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputCheckboxsTreeNodesProps = typeof __propDef.props;
+export type InputCheckboxsTreeNodesEvents = typeof __propDef.events;
+export type InputCheckboxsTreeNodesSlots = typeof __propDef.slots;
+export default class InputCheckboxsTreeNodes extends SvelteComponent<InputCheckboxsTreeNodesProps, InputCheckboxsTreeNodesEvents, InputCheckboxsTreeNodesSlots> {
+}
+export {};

package/dist/ui/input/InputDate.svelte

@@ -0,0 +1,26 @@
+<script>import { createEventDispatcher } from "svelte";
+import dayjs from "dayjs";
+import { FormControl } from "./index.js";
+$:
+  ({ input, value: _value, ...props } = $$props);
+export let value = _value;
+const dispatch = createEventDispatcher();
+const handleInput = ({ currentTarget }) => {
+  value = currentTarget.valueAsDate || null;
+  dispatch("input", value);
+};
+</script>
+
+<FormControl {...props} let:key>
+	<input
+		value={value && dayjs(value).format('YYYY-MM-DD')}
+		on:input={handleInput}
+		on:focus
+		on:blur
+		type="date"
+		name={key}
+		id={key}
+		class="input input-bordered"
+		{...input}
+	/>
+</FormControl>

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

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

package/dist/ui/input/InputDatetime.svelte

@@ -0,0 +1,21 @@
+<script>import { FormControl } from "./index.js";
+$:
+  ({ input, value: _value, ...props } = $$props);
+export let value = _value;
+</script>
+
+<FormControl {...props} let:key>
+	{#if value}
+		<input type="hidden" name={key} value={new Date(value).toJSON()} />
+	{/if}
+	<input
+		bind:value
+		on:input
+		on:focus
+		on:blur
+		type="datetime-local"
+		id={key}
+		class="input input-bordered"
+		{...input}
+	/>
+</FormControl>

package/dist/ui/input/InputDatetime.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 InputDatetimeProps = typeof __propDef.props;
+export type InputDatetimeEvents = typeof __propDef.events;
+export type InputDatetimeSlots = typeof __propDef.slots;
+export default class InputDatetime extends SvelteComponent<InputDatetimeProps, InputDatetimeEvents, InputDatetimeSlots> {
+}
+export {};

package/dist/ui/input/InputImage.svelte

@@ -0,0 +1,107 @@
+<script context="module"></script>
+
+<script>import { onMount, createEventDispatcher } from "svelte";
+import Cropper from "svelte-easy-crop";
+import { mdiTrayArrowUp } from "@mdi/js";
+import { Dialog, DropDown, Icon } from "../index.js";
+export let aspect = 1;
+export let title = "Image";
+export let formaction = void 0;
+export let key = "";
+let dialog;
+let tip;
+let image = "";
+let crop = void 0;
+let inputFile;
+const dispatch = createEventDispatcher();
+function onFileSelected() {
+  if (!inputFile.files)
+    return;
+  const file = inputFile.files[0];
+  const reader = new FileReader();
+  reader.onload = ({ target }) => {
+    image = target?.result || "";
+    dialog?.showModal();
+  };
+  reader.readAsDataURL(file);
+}
+export function close() {
+  tip?.hide();
+  dialog?.close();
+}
+onMount(() => {
+  if (!$$slots.actions)
+    tip.disable();
+});
+function handleClickActivator() {
+  if (!$$slots.actions)
+    inputFile.click();
+}
+function handleValidation() {
+  close();
+  if (crop && image)
+    dispatch("submit", { crop, image });
+}
+</script>
+
+<DropDown tippyProps={{ arrow: true }} hideOnBlur bind:tip>
+	<button
+		slot="activator"
+		type="button"
+		class="block overflow-hidden rounded-lg transition-shadow hover:shadow-lg"
+		on:click={handleClickActivator}
+	>
+		<slot>image</slot>
+	</button>
+	{#if $$slots.actions}
+		<div class="flex flex-col">
+			<button
+				type="button"
+				class="menu-item relative"
+				on:click={() => {
+					inputFile.click()
+				}}
+			>
+				<Icon path={mdiTrayArrowUp} class="opacity-70" size={20} />
+				<span>Charger une image</span>
+			</button>
+			<slot name="actions" />
+		</div>
+	{/if}
+</DropDown>
+
+<Dialog bind:dialog>
+	<h2 slot="header" class="card-title">
+		{title}
+	</h2>
+
+	<div class="relative aspect-square overflow-hidden rounded-lg">
+		<Cropper
+			{image}
+			{aspect}
+			showGrid={false}
+			zoomSpeed={0.2}
+			on:cropcomplete={(e) => (crop = e.detail.pixels)}
+		/>
+	</div>
+	<div class="mt-2 flex justify-end">
+		<input type="hidden" name="{key ? `${key}_` : ''}crop" value={JSON.stringify(crop)} />
+		<input
+			class="hidden"
+			type="file"
+			name="{key ? `${key}_` : ''}image"
+			accept="image/jpeg, image/png, image/webp, image/gif, image/avif, image/tiff"
+			bind:this={inputFile}
+			on:change={onFileSelected}
+		/>
+
+		<button
+			{formaction}
+			type={formaction ? 'submit' : 'button'}
+			class="btn btn-primary"
+			on:click={handleValidation}
+		>
+			Valider
+		</button>
+	</div>
+</Dialog>

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

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+export type Crop = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+declare const __propDef: {
+    props: {
+        aspect?: number | undefined;
+        title?: string | undefined;
+        formaction?: string | undefined;
+        key?: string | undefined;
+        close?: (() => void) | undefined;
+    };
+    events: {
+        submit: CustomEvent<{
+            crop: Crop;
+            image: string;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        actions: {};
+    };
+};
+export type InputImageProps = typeof __propDef.props;
+export type InputImageEvents = typeof __propDef.events;
+export type InputImageSlots = typeof __propDef.slots;
+export default class InputImage extends SvelteComponent<InputImageProps, InputImageEvents, InputImageSlots> {
+    get close(): () => void;
+}
+export {};