fuma 0.5.0 → 1.0.0

package/dist/ui/input/InputDate.svelte

@@ -1,33 +1,40 @@
-<script>import { createEventDispatcher } from "svelte";
-import dayjs from "dayjs";
-import { FormControl } from "./index.js";
-import { USE_COERCE_DATE } from "../../utils/constant.js";
-export let value = void 0;
-export let input = {};
-$:
-  ({ class: inputClass = "", ...inputProps } = input);
-const dispatch = createEventDispatcher();
-const handleInput = ({ currentTarget }) => {
-  const newValue = currentTarget.valueAsDate;
-  if (newValue === null)
-    value = null;
-  newValue?.setHours(value?.getHours() || 0, value?.getMinutes() || 0, value?.getSeconds() || 0);
-  value = newValue;
-  dispatch("input", value);
-};
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import type { FormEventHandler, HTMLInputAttributes } from 'svelte/elements'
+	import dayjs from 'dayjs'
+
+	import { FormControl, type InputProps } from './index.js'
+	import { USE_COERCE_DATE } from '../../utils/constant.js'
+
+	type $$Props = InputProps<Date | null | undefined>
+	export let value: Date | null | undefined = undefined
+	export let input: HTMLInputAttributes = {}
+	$: ({ class: inputClass = '', ...inputProps } = input)
+
+	const dispatch = createEventDispatcher<{ input: Date | null }>()
+
+	const handleInput: FormEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+		const newValue = currentTarget.valueAsDate
+		if (newValue === null) value = null
+		newValue?.setHours(value?.getHours() || 0, value?.getMinutes() || 0, value?.getSeconds() || 0)
+		value = newValue
+		dispatch('input', value)
+	}
 </script>
 
-<FormControl {...$$restProps} let:key>
-	<input
-		value={value && dayjs(value).format('YYYY-MM-DD')}
-		on:input={handleInput}
-		on:focus
-		on:blur
-		type="date"
-		id={key}
-		class="input input-bordered {inputClass}"
-		{...inputProps}
-	/>
+<FormControl {...$$restProps}>
+	{#snippet children({ key })}
+		<input
+			value={value && dayjs(value).format('YYYY-MM-DD')}
+			on:input={handleInput}
+			on:focus
+			on:blur
+			type="date"
+			id={key}
+			class="input input-bordered {inputClass}"
+			{...inputProps}
+		/>
 
-	<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+	{/snippet}
 </FormControl>

package/dist/ui/input/InputDateTime.svelte

@@ -1,34 +1,41 @@
-<script>import { USE_COERCE_DATE } from "../../utils/constant.js";
-import { FormControl } from "./index.js";
-import { createEventDispatcher } from "svelte";
-import dayjs from "dayjs";
-export let value = void 0;
-export let input = {};
-$:
-  ({ class: inputClass = "", ...inputProps } = input);
-const dispatch = createEventDispatcher();
-const handleInput = ({ currentTarget }) => {
-  value = getDateTime(currentTarget.value);
-  dispatch("input", value);
-};
-function getDateTime(v) {
-  if (typeof v !== "string")
-    return null;
-  return new Date(v);
-}
+<script lang="ts">
+	import type { FormEventHandler, HTMLInputAttributes } from 'svelte/elements'
+	import { USE_COERCE_DATE } from '../../utils/constant.js'
+	import { FormControl, type InputProps } from './index.js'
+	import { createEventDispatcher } from 'svelte'
+	import dayjs from 'dayjs'
+
+	type $$Props = InputProps<Date | null | undefined>
+	export let value: Date | null | undefined = undefined
+	export let input: HTMLInputAttributes = {}
+	$: ({ class: inputClass = '', ...inputProps } = input)
+
+	const dispatch = createEventDispatcher<{ input: Date | null }>()
+
+	const handleInput: FormEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+		value = getDateTime(currentTarget.value)
+		dispatch('input', value)
+	}
+
+	function getDateTime(v: string | null | undefined): Date | null {
+		if (typeof v !== 'string') return null
+		return new Date(v)
+	}
 </script>
 
-<FormControl {...$$restProps} let:key>
-	<input
-		value={value && dayjs(value).format('YYYY-MM-DDTHH:mm')}
-		on:input={handleInput}
-		on:focus
-		on:blur
-		type="datetime-local"
-		id={key}
-		class="input input-bordered {inputClass}"
-		{...inputProps}
-	/>
+<FormControl {...$$restProps}>
+	{#snippet children({ key })}
+		<input
+			value={value && dayjs(value).format('YYYY-MM-DDTHH:mm')}
+			on:input={handleInput}
+			on:focus
+			on:blur
+			type="datetime-local"
+			id={key}
+			class="input input-bordered {inputClass}"
+			{...inputProps}
+		/>
 
-	<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
+	{/snippet}
 </FormControl>

package/dist/ui/input/InputImage.svelte

@@ -1,49 +1,56 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+	export type Crop = { width: number; height: number; x: number; y: number }
+</script>
+
+<script lang="ts">
+	import { onMount, createEventDispatcher } from 'svelte'
+	import Cropper from 'svelte-easy-crop'
+	import { mdiTrayArrowUp } from '@mdi/js'
+
+	import type { TippyInstance } from '../../utils/tippy.js'
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { Dialog } from '../dialog/index.js'
+
+	export let aspect = 1
+	export let title = 'Image'
+	export let formaction: string | undefined = undefined
+	export let key = ''
+	let dialog: HTMLDialogElement
+	let tip: TippyInstance
+	let image = ''
+	let crop: Crop | undefined = undefined
+	let inputFile: HTMLInputElement
+
+	const dispatch = createEventDispatcher<{ submit: { crop: Crop; image: string } }>()
+
+	function onFileSelected() {
+		if (!inputFile.files) return
+		const file = inputFile.files[0]
+		const reader = new FileReader()
+		reader.onload = ({ target }) => {
+			image = (target?.result || '') as string
+			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()
+	}
 
-<script>import { onMount, createEventDispatcher } from "svelte";
-import Cropper from "svelte-easy-crop";
-import { mdiTrayArrowUp } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { DropDown } from "../menu/index.js";
-import { Dialog } from "../dialog/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 });
-}
+	function handleValidation() {
+		close()
+		if (crop && image) dispatch('submit', { crop, image })
+	}
 </script>
 
 <DropDown tippyProps={{ arrow: true }} hideOnBlur bind:tip>

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         formaction?: string | undefined;
         key?: string | undefined;
         close?: (() => void) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         submit: CustomEvent<{

package/dist/ui/input/InputImagePreview.svelte

@@ -1,23 +1,27 @@
-<script>import { InputImage } from "./index.js";
-import { PlaceholderImage } from "../placeholder/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 lang="ts">
+	import { InputImage, type Crop } from './index.js'
+	import { PlaceholderImage } from '../placeholder/index.js'
+
+	export let key = ''
+	export let src = ''
+	export let alt = ''
+	let klass = ''
+	export { klass as class }
+	export let title = 'Image'
+	export let x: number
+	export let y: number
+	export let aspect = x / y
+
+	let crop: Crop | null = null
+	let image = ''
+	let scale = 0
+	let preview: HTMLImageElement
+
+	async function handleSubmit(detail: { crop: Crop; image: string }) {
+		crop = detail.crop
+		image = detail.image
+		scale = x / crop.width
+	}
 </script>
 
 <InputImage {key} {title} {aspect} on:submit={({ detail }) => handleSubmit(detail)}>

package/dist/ui/input/InputNumber.svelte

@@ -1,25 +1,31 @@
-<script>import { USE_COERCE_NUMBER } from "../../utils/constant.js";
-import { FormControl } from "./index.js";
-export let value = void 0;
-export let input = void 0;
-export let inputElement = void 0;
+<script lang="ts">
+	import { USE_COERCE_NUMBER } from '../../utils/constant.js'
+	import { FormControl, type InputProps } from './index.js'
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type $$Props = InputProps<number>
+
+	export let value: number | null | undefined = undefined
+	export let input: HTMLInputAttributes | undefined = undefined
+	export let inputElement: HTMLInputElement | undefined = undefined
 </script>
 
-<FormControl {...$$restProps} let:key>
-	<slot name="label_append" slot="label_append" />
-	<input
-		bind:value
-		bind:this={inputElement}
-		on:input
-		on:focus
-		on:blur
-		type="number"
-		id={key}
-		inputmode="numeric"
-		class="input input-bordered"
-		{...input}
-	/>
-	{#if value !== undefined}
-		<input type="hidden" name={key} value="{USE_COERCE_NUMBER}{value}" />
-	{/if}
+<FormControl {...$$restProps}>
+	{#snippet children({ key })}
+		<input
+			bind:value
+			bind:this={inputElement}
+			on:input
+			on:focus
+			on:blur
+			type="number"
+			id={key}
+			inputmode="numeric"
+			class="input input-bordered"
+			{...input}
+		/>
+		{#if value !== undefined}
+			<input type="hidden" name={key} value="{USE_COERCE_NUMBER}{value}" />
+		{/if}
+	{/snippet}
 </FormControl>

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

@@ -9,11 +9,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label_append: {
-            slot: string;
-        };
-    };
+    slots: {};
 };
 export type InputNumberProps = typeof __propDef.props;
 export type InputNumberEvents = typeof __propDef.events;

package/dist/ui/input/InputOptionInParam.svelte

@@ -1,13 +1,15 @@
-<script>import { Icon } from "../icon/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 lang="ts">
+	import { Icon } from '../icon/index.js'
+	import { parseOptions, type Options } from '../../utils/options.js'
+	import { urlParam } from '../../store/param.js'
+
+	let klass = ''
+	export { klass as class }
+	export let key: string
+	export let options: Options
+	export let removeKeys: string[] = []
+
+	$: _options = parseOptions(options)
 </script>
 
 <div class="join {klass}">

package/dist/ui/input/InputOptions.svelte

@@ -1,37 +1,43 @@
-<script>import { slide } from "svelte/transition";
-import { mdiPlus, mdiTrashCanOutline } from "@mdi/js";
-import { toast } from "svelte-sonner";
-import { Icon } from "../icon/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 lang="ts">
+	import { slide } from 'svelte/transition'
+	import { mdiPlus, mdiTrashCanOutline } from '@mdi/js'
+	import { toast } from 'svelte-sonner'
+
+	import { Icon } from '../icon/index.js'
+	import { listEditable } from '../../action/list/index.js'
+
+	export let key: string
+	export let value: string | undefined | null = '[]'
+
+	let options: string[] = JSON.parse(value || '[]')
+	let newOption = ''
+	let optionInput: HTMLInputElement
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			createOption()
+		}
+	}
+
+	function createOption() {
+		if (!newOption) return
+		if (options.includes(newOption)) return toast.warning('Cette option éxiste déjà !')
+		options = [...options, newOption]
+		newOption = ''
+		value = JSON.stringify(options)
+		optionInput.focus()
+	}
+
+	function removeOption(index: number) {
+		options = [...options.slice(0, index), ...options.slice(index + 1)]
+		value = JSON.stringify(options)
+	}
+
+	function onChange(newOrder: string[]) {
+		options = newOrder
+		value = JSON.stringify(options)
+	}
 </script>
 
 <input type="hidden" name={key} {value} />

package/dist/ui/input/InputPassword.svelte

@@ -1,21 +1,25 @@
-<script>import { FormControl } from "./index.js";
-$:
-  ({ input, value: _value, ...props } = $$props);
-export let value = _value;
-export let autocomplete = "current-password";
+<script lang="ts">
+	import { FormControl, type InputProps } from './index.js'
+
+	type $$Props = InputProps & { autocomplete?: string }
+	$: ({ input, value: _value, ...props } = $$props as $$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 {...props}>
+	{#snippet children({ key })}
+		<input
+			bind:value
+			on:input
+			on:focus
+			on:blur
+			type="password"
+			name={key}
+			id={key}
+			class="input input-bordered"
+			{autocomplete}
+			{...input}
+		/>
+	{/snippet}
 </FormControl>

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

@@ -4,13 +4,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/InputRadio.svelte

@@ -1,35 +1,39 @@
-<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 lang="ts">
+	import { onMount } from 'svelte'
+	import { slide } from 'svelte/transition'
+
+	import { type Options, parseOptions } from '../../utils/options.js'
+	import { formContext } from '../../validation/form.js'
+	import { FormControl, bindValueWithParams, type InputProps } from './index.js'
+
+	type $$Props = InputProps & { options: Options; optionsClass?: string }
+	$: ({
+		input,
+		value: _value,
+		error: _error,
+		options,
+		optionsClass = '',
+		hint,
+		class: klass,
+		...props
+	} = $$props as $$Props)
+	export let value = _value
+	export let error = _error
+
+	$: _options = parseOptions(options)
+
+	let formControl: HTMLDivElement
+	const { setError } = formContext.get()
+	onMount(() => {
+		if (props.key) setError[props.key] = (err) => (error = err)
+
+		const inputs = formControl.querySelectorAll('input')
+		const handleInput = () => (error = '')
+		inputs.forEach((input) => input.addEventListener('input', handleInput))
+		return () => {
+			inputs.forEach((input) => input.removeEventListener('input', handleInput))
+		}
+	})
 </script>
 
 <div class={klass} bind:this={formControl}>
@@ -44,25 +48,26 @@ onMount(() => {
 		{#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}
-				/>
+				{#snippet children({ key })}
+					<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}
+					/>
+				{/snippet}
 			</FormControl>
 		{/each}
 	</div>