fuma 2.0.49 → 2.1.0

package/dist/action/index.d.ts

@@ -1,6 +1,3 @@
-export * from './selector.js';
-export * from './tip.js';
-export * from './portal.js';
-export * from './list/index.js';
 export * from './autoSubmit.js';
-export * from './heightScreen.js';
+export * from './list/index.js';
+export * from './tip.js';

package/dist/action/index.js

@@ -1,6 +1,3 @@
-export * from './selector.js';
-export * from './tip.js';
-export * from './portal.js';
-export * from './list/index.js';
 export * from './autoSubmit.js';
-export * from './heightScreen.js';
+export * from './list/index.js';
+export * from './tip.js';

package/dist/action/list/handlers.d.ts

@@ -7,14 +7,14 @@ export type Position = {
 export type DragHandler = ReturnType<typeof createDragHandler>;
 export declare function createDragHandler<Type = unknown>(listElement: HTMLDivElement | HTMLUListElement, itemElement: HTMLElement, options: ListEditableOptions<Type>): {
     on: <K extends "dragStart" | "dragMove" | "dragEnd">(eventKey: K, callback: (arg: {
-        dragStart: void;
-        dragMove: void;
-        dragEnd: void;
+        dragStart: undefined;
+        dragMove: undefined;
+        dragEnd: undefined;
     }[K]) => unknown) => () => void;
     off: <K extends "dragStart" | "dragMove" | "dragEnd">(eventKey: K, callback: (arg: {
-        dragStart: void;
-        dragMove: void;
-        dragEnd: void;
+        dragStart: undefined;
+        dragMove: undefined;
+        dragEnd: undefined;
     }[K]) => unknown) => void;
     start(position: Position): void;
     move(position?: Position): void;

package/dist/action/list/handlers.js

@@ -1,9 +1,9 @@
 import './index.css';
+import { createEventEmitter } from '../../utils/eventEmitter.js';
 import { CLASSNAME_DRAG_ACTIVE } from './index.js';
-import { initDragStyle, resetDragStyle } from './style.js';
-import { createPlaceholder, computeLimits, getNewOrderIndex, getListItemIndex } from './utils.js';
 import { scroll } from './store.js';
-import { createEventEmitter } from '../../utils/eventEmitter.js';
+import { initDragStyle, resetDragStyle } from './style.js';
+import { computeLimits, createPlaceholder, getListItemIndex, getNewOrderIndex } from './utils.js';
 export function createDragHandler(listElement, itemElement, options) {
     let originMouseY = 0;
     let limits = null;
@@ -67,11 +67,12 @@ export function createDragHandler(listElement, itemElement, options) {
             if (options.onReindex)
                 options.onReindex(newOrderIndex);
             if (options.onChange) {
-                if (!options.items) {
+                const { items } = options;
+                if (!items) {
                     console.error('WARNING', 'The option "onChange" require "items"');
                     return;
                 }
-                const newOrderItems = newOrderIndex.map((index) => options.items[index]);
+                const newOrderItems = newOrderIndex.map((index) => items[index]);
                 options.onChange(newOrderItems);
                 options.items = newOrderItems;
             }

package/dist/action/list/index.d.ts

@@ -1,4 +1,4 @@
-import { mouseDragTrigger, touchDragTrigger, scrollTrigger } from './trigger.js';
+import { mouseDragTrigger, scrollTrigger, touchDragTrigger } from './trigger.js';
 export declare const CLASSNAME_LIST = "editable-list";
 export declare const CLASSNAME_DRAG_ACTIVE = "drag-active";
 export declare const CLASSNAME_PLACEHOLDER = "item-placeholder";

package/dist/action/list/index.js

@@ -1,5 +1,5 @@
 import { createDragHandler } from './handlers.js';
-import { mouseDragTrigger, touchDragTrigger, scrollTrigger } from './trigger.js';
+import { mouseDragTrigger, scrollTrigger, touchDragTrigger } from './trigger.js';
 export const CLASSNAME_LIST = 'editable-list';
 export const CLASSNAME_DRAG_ACTIVE = 'drag-active';
 export const CLASSNAME_PLACEHOLDER = 'item-placeholder';
@@ -16,7 +16,7 @@ export function listEditable(node, options = {}) {
         const dragElements = [
             ...(dragElementsSelector ? node.querySelectorAll(dragElementsSelector) : itemElements)
         ];
-        const dragHandlers = dragElements.map((d, index) => createDragHandler(node, itemElements[index], options));
+        const dragHandlers = dragElements.map((_element, index) => createDragHandler(node, itemElements[index], options));
         mouseListeners = dragElements.map((dragElement, index) => mouseDragTrigger(dragElement, dragHandlers[index]));
         touchListeners = dragElements.map((dragElement, index) => touchDragTrigger(dragElement, dragHandlers[index]));
         const scrollContainer = node.parentElement;
@@ -25,9 +25,15 @@ export function listEditable(node, options = {}) {
         }
     }
     function removeListeners() {
-        mouseListeners.forEach((listener) => listener.destroy());
-        touchListeners.forEach((listener) => listener.destroy());
-        scrollListeners.forEach((listener) => listener.destroy());
+        mouseListeners.forEach((listener) => {
+            listener.destroy();
+        });
+        touchListeners.forEach((listener) => {
+            listener.destroy();
+        });
+        scrollListeners.forEach((listener) => {
+            listener.destroy();
+        });
     }
     return {
         destroy() {

package/dist/action/list/trigger.js

@@ -109,7 +109,9 @@ export function scrollTrigger(handler, scrollContainer) {
         listeners = [createScrollListener(), createMouseListener()];
     }
     function dragEnd() {
-        listeners.forEach(({ destroy }) => destroy());
+        listeners.forEach(({ destroy }) => {
+            destroy();
+        });
         listeners = [];
     }
     handler.on('dragStart', dragStart);
@@ -118,7 +120,9 @@ export function scrollTrigger(handler, scrollContainer) {
         destroy() {
             handler.off('dragStart', dragStart);
             handler.off('dragEnd', dragEnd);
-            listeners.forEach(({ destroy }) => destroy());
+            listeners.forEach(({ destroy }) => {
+                destroy();
+            });
         }
     };
 }

package/dist/action/list/utils.js

@@ -1,6 +1,6 @@
 import { CLASSNAME_PLACEHOLDER } from './index.js';
 export function getListItemIndex(listElement, itemEl) {
-    return [...listElement.children].findIndex((item) => item === itemEl);
+    return [...listElement.children].indexOf(itemEl);
 }
 export function createPlaceholder({ listElement, itemElement, indexFrom }) {
     const itemsEl = [...listElement.children];

package/dist/action/tip.js

@@ -2,8 +2,8 @@ import { tippy } from '../utils/tippy.js';
 export function tip(node, options = { disable: false }) {
     let _tip = null;
     init(options);
-    function init({ disable, ...tippyProps }) {
-        _tip = disable ? null : tippy(node, tippyProps);
+    function init({ disable, content, ...tippyProps }) {
+        _tip = disable || !content ? null : tippy(node, { ...tippyProps, content });
     }
     return {
         destroy() {

package/dist/command/command.svelte.d.ts

@@ -0,0 +1,16 @@
+type CommandOptions = {
+    isEnable?: () => boolean;
+    onSelect?: (index: number) => unknown;
+    onFocus?: (index: number) => unknown;
+};
+export declare function useCommand({ onSelect, onFocus, isEnable }?: CommandOptions): {
+    readonly focusIndex: number;
+    readonly selectedIndex: number;
+    trigger: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+    item: (index: number, scrollMargin?: string) => {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+};
+export {};

package/dist/command/command.svelte.js

@@ -0,0 +1,68 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { on } from 'svelte/events';
+export function useCommand({ onSelect, onFocus, isEnable = () => true } = {}) {
+    let focusIndex = $state(0);
+    let selectedIndex = $state(-1);
+    const items = [];
+    function onKeydown(event) {
+        if (!isEnable())
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelect?.(focusIndex);
+            selectedIndex = focusIndex;
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            focusIndex--;
+            if (focusIndex < 0)
+                focusIndex = items.length - 1;
+            onFocus?.(focusIndex);
+            scrollFocusIntoView();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            focusIndex++;
+            if (focusIndex > items.length - 1)
+                focusIndex = 0;
+            onFocus?.(focusIndex);
+            scrollFocusIntoView();
+            return;
+        }
+    }
+    function scrollFocusIntoView() {
+        items.at(focusIndex)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+    return {
+        get focusIndex() {
+            return focusIndex;
+        },
+        get selectedIndex() {
+            return selectedIndex;
+        },
+        trigger: {
+            [createAttachmentKey()]: (node) => {
+                return on(node, 'keydown', onKeydown);
+            }
+        },
+        item: (index, scrollMargin = '8px') => ({
+            [createAttachmentKey()]: (node) => {
+                node.style.scrollMargin = scrollMargin;
+                if (!items.includes(node))
+                    items.splice(index, 0, node);
+                const cleanup = on(node, 'click', () => {
+                    focusIndex = selectedIndex = items.indexOf(node);
+                    onSelect?.(selectedIndex);
+                });
+                return () => {
+                    cleanup();
+                    const i = items.indexOf(node);
+                    if (i !== -1)
+                        items.splice(i, 1);
+                };
+            }
+        })
+    };
+}

package/dist/command/index.d.ts

@@ -0,0 +1 @@
+export * from './command.svelte.ts';

package/dist/command/index.js

@@ -0,0 +1 @@
+export * from './command.svelte.ts';

package/dist/data.d.ts

@@ -0,0 +1,87 @@
+import z from 'zod';
+export declare const users: User[];
+export type UserGender = (typeof userGenders)[number];
+export type UserTag = (typeof userTags)[number];
+export type User = {
+    id: string;
+    name: string;
+    age: number;
+    level: number;
+    cv: string;
+    isValided: boolean;
+    subscribeAt: string;
+    gender: UserGender;
+    gender2: UserGender;
+    loveId?: string | null;
+};
+export declare const userGenders: readonly ["male", "female", "other"];
+export declare const userTags: readonly ["rider", "biker", "skier"];
+export declare const schemaUser: z.ZodObject<{
+    name: z.ZodString;
+    age: z.ZodNumber;
+    level: z.ZodNumber;
+    cv: z.ZodString;
+    isValided: z.ZodLiteral<true>;
+    subscribeAt: z.z.ZodISODate;
+    gender: z.ZodEnum<{
+        other: "other";
+        female: "female";
+        male: "male";
+    }>;
+    gender2: z.ZodEnum<{
+        other: "other";
+        female: "female";
+        male: "male";
+    }>;
+    loveId: z.ZodOptional<z.ZodString>;
+}, z.z.core.$strip>;
+export declare const userGenderOptions: {
+    male: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    female: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    other: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+};
+export declare const userTagOptions: {
+    biker: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    rider: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    skier: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+};
+export declare const fruitsOptions: {
+    apple: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    banana: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    cherry: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    citrus: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+    grape: {
+        label: string;
+        icon: import("svelte").Component<import("@lucide/svelte").LucideProps, {}, "">;
+    };
+};

package/dist/data.js

@@ -0,0 +1,51 @@
+import { faker } from '@faker-js/faker/locale/fr_CH';
+import { AppleIcon, BananaIcon, BikeIcon, CableCarIcon, CherryIcon, CitrusIcon, GrapeIcon, MarsIcon, MotorbikeIcon, VenusAndMarsIcon, VenusIcon } from '@lucide/svelte';
+import z from 'zod';
+// NOT A PART OF PACKAGE
+function createRandomUser() {
+    return {
+        id: Math.random().toString().slice(-16),
+        name: faker.person.fullName(),
+        age: Math.round(Math.random() * 100),
+        level: Math.round(Math.random() * 100),
+        cv: faker.person.bio(),
+        isValided: Math.random() < 0.5,
+        subscribeAt: faker.date.past().toISOString(),
+        gender: faker.person.sexType(),
+        gender2: faker.person.sexType()
+    };
+}
+export const users = faker.helpers.multiple(createRandomUser, {
+    count: 40
+});
+export const userGenders = ['male', 'female', 'other'];
+export const userTags = ['rider', 'biker', 'skier'];
+export const schemaUser = z.object({
+    name: z.string().min(3),
+    age: z.number().min(18).max(120),
+    level: z.number().min(0).max(100),
+    cv: z.string(),
+    isValided: z.literal(true, 'Validation requise'),
+    subscribeAt: z.iso.date(),
+    gender: z.enum(userGenders),
+    gender2: z.enum(userGenders),
+    loveId: z.string().optional()
+    // tags: z.array(z.enum(userTags)).default([]),
+});
+export const userGenderOptions = {
+    male: { label: 'Homme', icon: MarsIcon },
+    female: { label: 'Femme', icon: VenusIcon },
+    other: { label: 'Autre', icon: VenusAndMarsIcon }
+};
+export const userTagOptions = {
+    biker: { label: 'Biker', icon: BikeIcon },
+    rider: { label: 'Rider', icon: MotorbikeIcon },
+    skier: { label: 'Skier', icon: CableCarIcon }
+};
+export const fruitsOptions = {
+    apple: { label: 'Apple', icon: AppleIcon },
+    banana: { label: 'Banana', icon: BananaIcon },
+    cherry: { label: 'Cherry', icon: CherryIcon },
+    citrus: { label: 'Citrus', icon: CitrusIcon },
+    grape: { label: 'Grape', icon: GrapeIcon }
+};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export * from './ui/index.js';
-export * from './utils/index.js';
-export * from './store/index.js';
-export * from './validation/index.js';
-export * from './action/index.js';
+export * from './action/index.ts';
+export * from './state/index.ts';
+export * from './ui/index.ts';
+export * from './utils/index.ts';
+export * from './validation/index.ts';

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from './ui/index.js';
-export * from './utils/index.js';
-export * from './store/index.js';
-export * from './validation/index.js';
-export * from './action/index.js';
+export * from './action/index.ts';
+export * from './state/index.ts';
+export * from './ui/index.ts';
+export * from './utils/index.ts';
+export * from './validation/index.ts';

package/dist/input/InputBoolean.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { CheckIcon } from '@lucide/svelte'
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import Issues from './Issues.svelte'
+	import type { InputProps } from './type.ts'
+
+	let {
+		field,
+		label,
+		checked = $bindable(),
+		hint,
+		variant = 'checkbox',
+		class: klass,
+		...props
+	}: {
+		label: string
+		field?: RemoteFormField<boolean>
+		checked?: boolean
+		hint?: string
+		variant?: 'checkbox' | 'switch'
+	} & InputProps = $props()
+
+	let isChecked = $derived(field?.value() ?? checked)
+</script>
+
+<div>
+	<label
+		class={[
+			'input block not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
+			'group h-auto min-h-10'
+		]}
+	>
+		<div class="flex h-(--size) items-center gap-2">
+			<div class="grow">{label}</div>
+			{#if field}
+				<input {...field.as('checkbox')} class={['peer w-0']} {...props} />
+			{:else}
+				<input type="checkbox" class={['peer w-0']} bind:checked {...props} />
+			{/if}
+			{#if variant === 'checkbox'}
+				{@render variantCheckbox()}
+			{:else}
+				{@render variantSwitch()}
+			{/if}
+		</div>
+		{#if hint}
+			<div
+				class={[
+					'-translate-y-2.5 text-xs text-wrap opacity-70',
+					variant === 'checkbox' ? 'pr-8' : 'pr-10'
+				]}
+			>
+				{hint}
+			</div>
+		{/if}
+	</label>
+	<Issues {field} />
+</div>
+
+{#snippet variantCheckbox()}
+	<div class={['squircle h-5 w-5 outline', 'bg-base-100']}>
+		<div
+			class={[
+				'squircle grid h-5 w-5 place-content-center',
+				'bg-base-content',
+				'ease scale-0 opacity-0',
+				isChecked && 'scale-[80%] opacity-100'
+			]}
+		>
+			<CheckIcon size={18} class={['stroke-base-100']} strokeWidth={4} />
+		</div>
+	</div>
+{/snippet}
+
+{#snippet variantSwitch()}
+	<div class={['h-5 w-9 rounded-full bg-base-100 p-1 outline-1']}>
+		<div
+			class={[
+				'grid h-3 w-3 place-content-center rounded-full bg-base-100 outline-1',
+				'ease translate-x-0',
+				isChecked ? 'translate-x-4 bg-base-content' : 'opacity-100'
+			]}
+		>
+			<CheckIcon size={11} class={['stroke-base-100']} strokeWidth={4} />
+		</div>
+	</div>
+{/snippet}
+
+<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/InputBoolean.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import type { InputProps } from './type.ts';
+type $$ComponentProps = {
+    label: string;
+    field?: RemoteFormField<boolean>;
+    checked?: boolean;
+    hint?: string;
+    variant?: 'checkbox' | 'switch';
+} & InputProps;
+declare const InputBoolean: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type InputBoolean = ReturnType<typeof InputBoolean>;
+export default InputBoolean;

package/dist/input/InputNumber.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import Issues from './Issues.svelte'
+	import type { InputProps } from './type.ts'
+
+	let {
+		label,
+		field,
+		value = $bindable(),
+		class: klass,
+		...props
+	}: {
+		label: string
+		field?: RemoteFormField<number>
+		value?: number
+	} & InputProps = $props()
+</script>
+
+<label class="floating-label">
+	<span class="label">{label}</span>
+	{#if field}
+		<input placeholder={label} class={['input', klass]} {...field.as('number')} {...props} />
+	{:else}
+		<input placeholder={label} class={['input', klass]} type="number" bind:value {...props} />
+	{/if}
+	<Issues {field} />
+</label>
+
+<style>
+	input[aria-invalid='true'] {
+		--input-color: var(--color-error);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import type { InputProps } from './type.ts';
+type $$ComponentProps = {
+    label: string;
+    field?: RemoteFormField<number>;
+    value?: number;
+} & InputProps;
+declare const InputNumber: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputNumber = ReturnType<typeof InputNumber>;
+export default InputNumber;

package/dist/input/InputRadio.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import { type Options, parseOptions } from '../utils/index.ts'
+	import Issues from './Issues.svelte'
+
+	let {
+		field,
+		label,
+		value = $bindable(),
+		options: optionsProp
+	}: {
+		field?: RemoteFormField<string>
+		label: string
+		value?: string
+		options: Options
+	} = $props()
+
+	const options = $derived(parseOptions(optionsProp))
+</script>
+
+<div class="flex flex-col gap-1">
+	<span class="label px-3 text-sm">{label}</span>
+	<div class="join join-vertical">
+		{#each options as option}
+			{@const { class: klass, ...props } = option}
+			<label class="input join-item not-disabled:cursor-pointer not-disabled:hover:bg-base-200">
+				{#if option.icon}
+					<option.icon size={18} opacity={0.8} />
+				{/if}
+				<span>{option.label}</span>
+				{#if field}
+					<input
+						{...field.as('radio', option.value)}
+						class={['radio ml-auto radio-sm', klass]}
+						{...props}
+					/>
+				{:else}
+					<input
+						type="radio"
+						checked={value === option.value}
+						onchange={() => (value = option.value)}
+						class={['radio ml-auto radio-sm', klass]}
+						{...props}
+					/>
+				{/if}
+			</label>
+		{/each}
+	</div>
+	<Issues {field} />
+</div>
+
+<style>
+	input {
+		--input-color: var(--color-base-content);
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import { type Options } from '../utils/index.ts';
+type $$ComponentProps = {
+    field?: RemoteFormField<string>;
+    label: string;
+    value?: string;
+    options: Options;
+};
+declare const InputRadio: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputRadio = ReturnType<typeof InputRadio>;
+export default InputRadio;