fuma 2.1.6 → 2.5.0

package/dist/_doc/data.d.ts

@@ -12,6 +12,7 @@ export type User = {
     subscribeAt: string;
     gender: UserGender;
     gender2: UserGender;
+    friendIds: string[];
     loveId?: string | null;
 };
 export declare const userGenders: readonly ["male", "female", "other"];
@@ -21,7 +22,7 @@ export declare const schemaUser: z.ZodObject<{
     age: z.ZodNumber;
     level: z.ZodNumber;
     cv: z.ZodString;
-    isValided: z.ZodLiteral<true>;
+    isValided: z.ZodPipe<z.ZodOptional<z.ZodBoolean>, z.ZodLiteral<true>>;
     subscribeAt: z.z.ZodISODate;
     gender: z.ZodEnum<{
         other: "other";
@@ -33,6 +34,7 @@ export declare const schemaUser: z.ZodObject<{
         female: "female";
         male: "male";
     }>;
+    friendIds: z.ZodArray<z.ZodString>;
     loveId: z.ZodOptional<z.ZodString>;
 }, z.z.core.$strip>;
 export declare const userGenderOptions: {

package/dist/_doc/data.js

@@ -12,7 +12,8 @@ function createRandomUser() {
         isValided: Math.random() < 0.5,
         subscribeAt: faker.date.past().toISOString(),
         gender: faker.person.sexType(),
-        gender2: faker.person.sexType()
+        gender2: faker.person.sexType(),
+        friendIds: []
     };
 }
 export const users = faker.helpers.multiple(createRandomUser, {
@@ -25,10 +26,13 @@ export const schemaUser = z.object({
     age: z.number().min(18).max(120),
     level: z.number().min(0).max(100),
     cv: z.string(),
-    isValided: z.literal(true, 'Validation requise'),
+    // Une case non cochée n'envoie rien: `form()` de kit refuse au typage tout booléen non
+    // optionnel. L'entrée est donc optionnelle, et le `pipe` rétablit l'exigence à l'exécution.
+    isValided: z.boolean().optional().pipe(z.literal(true, 'Validation requise')),
     subscribeAt: z.iso.date(),
     gender: z.enum(userGenders),
     gender2: z.enum(userGenders),
+    friendIds: z.array(z.string()),
     loveId: z.string().optional()
     // tags: z.array(z.enum(userTags)).default([]),
 });

package/dist/command/index.d.ts

@@ -1 +1 @@
-export * from './command.svelte.js';
+export * from './useCommand.svelte.js';

package/dist/command/index.js

@@ -1 +1 @@
-export * from './command.svelte.js';
+export * from './useCommand.svelte.js';

package/dist/command/{command.svelte.js → useCommand.svelte.js}

@@ -8,7 +8,7 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true, hotKey }
     function onKeydown(event) {
         if (!isEnable())
             return;
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (event.key === 'Enter') {
             event.preventDefault();
             onSelect?.(focusIndex);
             selectedIndex = focusIndex;

package/dist/input/InputBoolean.svelte

@@ -3,19 +3,29 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		field,
 		label,
 		checked = $bindable(),
 		hint,
+		labelAppend,
 		variant = 'checkbox',
+		class: klass,
+		disabled,
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<boolean>
+		/**
+		 * Sans `field`, l'état lié. Avec, l'état initial du champ — celui-ci prend ensuite
+		 * le relais et devient la source de vérité.
+		 */
 		checked?: boolean
 		hint?: string
+		/** Rendu à droite du libellé, dans le `label`: un clic dessus bascule la case. */
+		labelAppend?: Snippet
 		variant?: 'checkbox' | 'switch'
 	} & InputProps = $props()
 
@@ -26,15 +36,27 @@
 	<label
 		class={[
 			'input block not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
-			'group h-auto min-h-10'
+			'group h-auto min-h-10 w-full',
+			klass
 		]}
 	>
-		<div class="flex h-(--size) items-center gap-2">
-			<div class="grow">{label}</div>
+		<!-- `.input` de daisyUI pose `white-space: nowrap`: sans `text-wrap`, un libellé un peu
+		     long déborde de la ligne au lieu de passer à la suivante. La hauteur suit donc le
+		     contenu, `--size` n'étant plus qu'un plancher. -->
+		<div class="flex min-h-(--size) items-center gap-2 py-1.5">
+			<div class="grow text-wrap">{label}</div>
+			{@render labelAppend?.()}
 			{#if field}
-				<input {...field.as('checkbox')} class={['peer w-0']} {...props} />
+				<!-- `as('checkbox')` sans valeur pose `checked: undefined`: la case d'un champ
+				     déjà à `true` partirait décochée, alors que la coche dessinée, elle, suit
+				     `checked`. Les deux ne se contredisent que si l'état initial n'est pas transmis. -->
+				{#if checked === undefined}
+					<input {...field.as('checkbox')} class={['peer w-0']} {disabled} {...props} />
+				{:else}
+					<input {...field.as('checkbox', checked)} class={['peer w-0']} {disabled} {...props} />
+				{/if}
 			{:else}
-				<input type="checkbox" class={['peer w-0']} bind:checked {...props} />
+				<input type="checkbox" class={['peer w-0']} bind:checked {disabled} {...props} />
 			{/if}
 			{#if variant === 'checkbox'}
 				{@render variantCheckbox()}
@@ -53,20 +75,27 @@
 			</div>
 		{/if}
 	</label>
+	{#if field && !isChecked && !disabled}
+		<!-- Une case décochée ne transmet rien: sans ce relais, le serveur ne distinguerait pas
+		     « décochée » de « champ non rendu », et une valeur ne pourrait jamais repasser à faux.
+		     Il porte la clé de la case, d'où l'exclusion mutuelle — SvelteKit refuse un formulaire
+		     où une clé apparaît deux fois. Un contrôle désactivé, lui, ne transmet toujours rien. -->
+		<input {...field.as('hidden', false)} />
+	{/if}
 	<Issues {field} />
 </div>
 
 {#snippet variantCheckbox()}
 	<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape  -->
-	<div class={['h-5 w-5 rounded-full outline', 'bg-base-100']} style="corner-shape: squircle;">
+	<div class={['squircle', 'h-5 w-5 outline', 'bg-base-100']}>
 		<div
 			class={[
-				'squircle grid h-5 w-5 place-content-center',
+				'squircle',
+				'grid h-5 w-5 place-content-center',
 				'bg-base-content',
 				'ease scale-0 opacity-0',
 				isChecked && 'scale-[80%] opacity-100'
 			]}
-			style="corner-shape: squircle"
 		>
 			<CheckIcon size={18} class={['stroke-base-100']} strokeWidth={4} />
 		</div>
@@ -93,6 +122,10 @@
 		transition-timing-function: cubic-bezier(0.275, 0.485, 0.515, 1.45);
 		transition-duration: 200ms;
 	}
+	.squircle {
+		corner-shape: squircle;
+		border-radius: 100%;
+	}
 
 	label:has(input[aria-invalid='true']) {
 		--input-color: var(--color-error);

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

@@ -1,10 +1,17 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<boolean>;
+    /**
+     * Sans `field`, l'état lié. Avec, l'état initial du champ — celui-ci prend ensuite
+     * le relais et devient la source de vérité.
+     */
     checked?: boolean;
     hint?: string;
+    /** Rendu à droite du libellé, dans le `label`: un clic dessus bascule la case. */
+    labelAppend?: Snippet;
     variant?: 'checkbox' | 'switch';
 } & InputProps;
 declare const InputBoolean: import("svelte").Component<$$ComponentProps, {}, "checked">;

package/dist/input/InputCheckboxes.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { CheckIcon } from '@lucide/svelte'
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import { type Options, parseOptions } from '../utils/index.js'
+	import Issues from './Issues.svelte'
+	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
+
+	let {
+		field,
+		label,
+		value = $bindable([]),
+		options: optionsProp,
+		labelAppend,
+		...props
+	}: {
+		field?: RemoteFormField<string[]>
+		label: string
+		/**
+		 * Sans `field`, les valeurs liées. Avec, les valeurs initiales: les cases restent
+		 * pilotées par `value`, `field.as('checkbox', …)` ne servant qu'à les nommer.
+		 */
+		value?: string[]
+		options: Options
+		/** Rendu à droite du libellé. */
+		labelAppend?: Snippet
+	} & InputProps = $props()
+
+	const options = $derived(parseOptions(optionsProp))
+
+	function toggle(optionValue: string, checked: boolean) {
+		value = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue)
+		// Les cases suffisent à soumettre; `set` garde la validation du formulaire à jour.
+		field?.set(value)
+	}
+</script>
+
+<div class="flex flex-col gap-1">
+	<span class="label text-xs text-wrap">
+		<span>{label}</span>
+		{@render labelAppend?.()}
+	</span>
+	<div class="join join-vertical">
+		{#each options as option (option.value)}
+			{@const {
+				class: klass,
+				value: optionValue,
+				label: optionLabel,
+				icon: Icon,
+				...optionProps
+			} = option}
+			{@const checked = value.includes(optionValue)}
+			<label
+				class={[
+					'input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
+					'group h-auto min-h-10'
+				]}
+			>
+				<div class="flex h-(--size) grow items-center gap-2">
+					{#if Icon}
+						<Icon size={18} opacity={0.8} />
+					{/if}
+					<span class="grow">{optionLabel}</span>
+					<!-- Le `checked` explicite prime sur celui de `as()`, qui lit `field.value()`:
+					     sans lui les valeurs initiales ne partiraient pas tant que rien n'a été
+					     coché, et le visuel ci-dessous s'en écarterait. -->
+					<input
+						{...field?.as('checkbox', optionValue)}
+						type="checkbox"
+						{checked}
+						onchange={({ currentTarget }) => toggle(optionValue, currentTarget.checked)}
+						class={['w-0']}
+						{...props}
+						{...optionProps}
+					/>
+					<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape  -->
+					<div
+						class={[
+							'squircle',
+							'ml-auto h-5 w-5 outline',
+							'bg-base-100',
+							!checked && 'outline-base-content/20',
+							klass
+						]}
+					>
+						<div
+							class={[
+								'squircle',
+								'grid h-5 w-5 place-content-center',
+								'bg-base-content',
+								'ease scale-0 opacity-0',
+								checked && 'scale-[80%] opacity-100'
+							]}
+						>
+							<CheckIcon size={18} class={['stroke-base-100']} strokeWidth={4} />
+						</div>
+					</div>
+				</div>
+			</label>
+		{/each}
+	</div>
+	<Issues {field} />
+</div>
+
+<style>
+	.ease {
+		transition-property: translate background-color opacity;
+		transition-timing-function: cubic-bezier(0.275, 0.485, 0.515, 1.45);
+		transition-duration: 200ms;
+	}
+	.squircle {
+		corner-shape: squircle;
+		border-radius: 100%;
+	}
+
+	label:has(input[aria-invalid='true']) {
+		--input-color: var(--color-error);
+	}
+	label:has(input:disabled) {
+		cursor: not-allowed;
+		border-color: var(--input-color);
+	}
+</style>

package/dist/input/InputCheckboxes.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import { type Options } from '../utils/index.js';
+import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    field?: RemoteFormField<string[]>;
+    label: string;
+    /**
+     * Sans `field`, les valeurs liées. Avec, les valeurs initiales: les cases restent
+     * pilotées par `value`, `field.as('checkbox', …)` ne servant qu'à les nommer.
+     */
+    value?: string[];
+    options: Options;
+    /** Rendu à droite du libellé. */
+    labelAppend?: Snippet;
+} & InputProps;
+declare const InputCheckboxes: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputCheckboxes = ReturnType<typeof InputCheckboxes>;
+export default InputCheckboxes;

package/dist/input/InputDateTime.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { MinusIcon, PlusIcon } from '@lucide/svelte'
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import dayjs, { type Dayjs } from 'dayjs'
+	import timezonePlugin from 'dayjs/plugin/timezone.js'
+	import utcPlugin from 'dayjs/plugin/utc.js'
+	import Issues from './Issues.svelte'
+	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
+
+	dayjs.extend(utcPlugin)
+	dayjs.extend(timezonePlugin)
+
+	let {
+		label,
+		field,
+		name,
+		value = $bindable(),
+		timezone,
+		layout = 'split',
+		variant = 'block',
+		hint,
+		labelAppend,
+		transform = (v) => v,
+		onchange,
+		class: klass,
+		...props
+	}: {
+		label: string
+		/** La date part en ISO dans un champ caché: au schéma de la reconstruire. */
+		field?: RemoteFormField<string>
+		/** Sans `field`, le nom du champ caché. Sans l'un ni l'autre, rien n'est soumis. */
+		name?: string
+		value?: Date | null
+		/** Zone IANA d'affichage et de saisie; à défaut, celle du navigateur. */
+		timezone?: string
+		/** `split`: l'heure au-dessus de la date, avec ses boutons ±jour. */
+		layout?: 'split' | 'datetime'
+		/** Sans effet sur `split`, dont la ligne de label porte le `hint`. */
+		variant?: 'floating' | 'block'
+		hint?: string
+		/** Rendu à droite du libellé, après le `hint`. */
+		labelAppend?: Snippet
+		/** Ajuste la valeur avant qu'elle ne soit posée — borne, arrondi, décalage. */
+		transform?: (value: Date) => Date
+		onchange?: (value: Date) => void
+	} & InputProps = $props()
+
+	const inputId = $props.id()
+	const inputProps = $derived({ id: inputId, class: 'input w-full', ...props })
+
+	const current = $derived.by(() => {
+		if (!value) return null
+		const date = inZone(dayjs(value))
+		// Une date illisible se traite comme une absence de valeur: `format` rendrait
+		// « Invalid Date » dans les champs, et `toJSON` un `null` que le champ caché refuse.
+		return date.isValid() ? date : null
+	})
+
+	function inZone(date: Dayjs) {
+		return timezone ? date.tz(timezone) : date
+	}
+
+	/** Une saisie partielle sur un champ vide se raccroche à maintenant. */
+	function base() {
+		return current ?? inZone(dayjs())
+	}
+
+	function setTime(time: string) {
+		if (!time) return
+		const [h, m] = time.split(':').map(Number)
+		setValue(base().set('h', h).set('m', m))
+	}
+
+	function setDate(date: string) {
+		if (!date) return
+		const [y, m, d] = date.split('-').map(Number)
+		setValue(
+			base()
+				.set('y', y)
+				.set('M', m - 1)
+				.set('D', d)
+		)
+	}
+
+	function setDateTime(datetime: string) {
+		if (!datetime) return
+		const [date, time] = datetime.split('T')
+		const [y, M, d] = date.split('-').map(Number)
+		const [h, m] = time.split(':').map(Number)
+		setValue(
+			base()
+				.set('y', y)
+				.set('M', M - 1)
+				.set('D', d)
+				.set('h', h)
+				.set('m', m)
+				.startOf('m')
+		)
+	}
+
+	function setValue(newValue: Dayjs) {
+		const date = transform(newValue.toDate())
+		value = date
+		// Le champ caché suffit à soumettre; `set` garde la validation du formulaire à jour.
+		field?.set(date.toJSON())
+		onchange?.(date)
+	}
+</script>
+
+<!-- Par `current` et non `value`: la valeur passée n'est pas toujours la `Date` annoncée par le
+     type — une date qui a fait l'aller-retour par JSON revient en chaîne ISO. -->
+{#if current}
+	{#if field}
+		<input {...field.as('hidden', current.toJSON())} />
+	{:else if name}
+		<input type="hidden" {name} value={current.toJSON()} />
+	{/if}
+{/if}
+
+{#snippet inputDateTime()}
+	<input
+		{...inputProps}
+		type="datetime-local"
+		value={current ? current.format('YYYY-MM-DDTHH:mm') : ''}
+		oninput={(event) => setDateTime(event.currentTarget.value)}
+	/>
+{/snippet}
+
+{#snippet inputSplit()}
+	<div>
+		<input
+			{...inputProps}
+			type="time"
+			value={current ? current.format('HH:mm') : ''}
+			oninput={(event) => setTime(event.currentTarget.value)}
+		/>
+
+		<div class="join mt-1 flex w-full">
+			<!-- `preventDefault` sur le `mousedown`: le bouton ne prend pas le focus, donc aucun
+			     `focusout` n'est émis. Dans un popover, ce focus qui se déplace est ce qui déclenche
+			     la fermeture; le focus reste sur le champ, ce qui permet aussi d'enchaîner les pas. -->
+			<button
+				type="button"
+				class="btn join-item btn-square bg-base-200/30 btn-xs"
+				disabled={!current}
+				onmousedown={(event) => event.preventDefault()}
+				onclick={() => current && setValue(current.add(-1, 'day'))}
+			>
+				<MinusIcon size={12} />
+			</button>
+			<input
+				type="date"
+				class="border-soft input join-item border-x-0 input-ghost input-xs"
+				value={current ? current.format('YYYY-MM-DD') : ''}
+				oninput={(event) => setDate(event.currentTarget.value)}
+			/>
+			<button
+				type="button"
+				class="btn join-item btn-square bg-base-200/30 btn-xs"
+				disabled={!current}
+				onmousedown={(event) => event.preventDefault()}
+				onclick={() => current && setValue(current.add(1, 'day'))}
+			>
+				<PlusIcon size={12} />
+			</button>
+		</div>
+	</div>
+{/snippet}
+
+{#if layout === 'datetime' && variant === 'floating'}
+	<label class={['floating-label', klass]}>
+		<span>{label}</span>
+		{@render inputDateTime()}
+		<Issues {field} />
+	</label>
+{:else}
+	<fieldset class={['fieldset', klass]}>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{#if hint}
+				<span class="ml-auto">{hint}</span>
+			{/if}
+			{@render labelAppend?.()}
+		</label>
+		{#if layout === 'datetime'}
+			{@render inputDateTime()}
+		{:else}
+			{@render inputSplit()}
+		{/if}
+		<Issues {field} />
+	</fieldset>
+{/if}
+
+<style>
+	input[aria-invalid='true'] {
+		--input-color: var(--color-error);
+	}
+</style>

package/dist/input/InputDateTime.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    /** La date part en ISO dans un champ caché: au schéma de la reconstruire. */
+    field?: RemoteFormField<string>;
+    /** Sans `field`, le nom du champ caché. Sans l'un ni l'autre, rien n'est soumis. */
+    name?: string;
+    value?: Date | null;
+    /** Zone IANA d'affichage et de saisie; à défaut, celle du navigateur. */
+    timezone?: string;
+    /** `split`: l'heure au-dessus de la date, avec ses boutons ±jour. */
+    layout?: 'split' | 'datetime';
+    /** Sans effet sur `split`, dont la ligne de label porte le `hint`. */
+    variant?: 'floating' | 'block';
+    hint?: string;
+    /** Rendu à droite du libellé, après le `hint`. */
+    labelAppend?: Snippet;
+    /** Ajuste la valeur avant qu'elle ne soit posée — borne, arrondi, décalage. */
+    transform?: (value: Date) => Date;
+    onchange?: (value: Date) => void;
+} & InputProps;
+declare const InputDateTime: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputDateTime = ReturnType<typeof InputDateTime>;
+export default InputDateTime;