fuma 0.5.0 → 1.0.0

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -25,6 +25,22 @@ declare const __propDef: {
             invalidateAll?: boolean | undefined;
             state?: App.PageState | undefined;
         } | undefined) => Promise<void>) | undefined;
+        children?: import("svelte").Snippet<[{
+            open: (value?: number, options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
+            close: (options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/form/Form.svelte

@@ -1,92 +1,110 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+	import type { z } from 'zod'
+	import type { FormDataInput } from './form.js'
+</script>
 
 <script
-
+	lang="ts"
 	generics="
 		Shape extends z.ZodRawShape,
 		ReturnData extends Record<string, unknown> = FormDataInput<Shape>,
 		Data extends FormDataInput<Shape> = FormDataInput<Shape>
 	"
->import { createEventDispatcher, onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { page } from "$app/stores";
-import { contextContainer } from "../context.js";
-import {
-  initData,
-  getFieldType,
-  useHandleInput
-} from "./form.js";
-import ButtonDelete from "../button/ButtonDelete.svelte";
-import { useForm } from "../../validation/form.js";
-import FormInput from "./FormInput.svelte";
-import FormSection from "./FormSection.svelte";
-let klass = "";
-export { klass as class };
-export let classSection = "";
-export let classAction = "";
-export let model = void 0;
-export let fields = [];
-export let sections = [{}];
-export let action = "";
-export let actionCreate = "_create";
-export let actionDelete = "_delete";
-export let actionUpdate = "_update";
-export let simpleAction = false;
-export let options = {};
-let dataInput = initData(fields);
-export { dataInput as data };
-let data = dataInput;
-export function set(key, value) {
-  isDirty.set(true);
-  data[key] = value;
-}
-export function update(updater) {
-  isDirty.set(true);
-  data = updater(data);
-}
-const dispatch = createEventDispatcher();
-const { enhance, setError } = useForm({
-  ...options,
-  async onSuccess(url, data2) {
-    if (options.onSuccess)
-      await options.onSuccess(url, data2);
-    dispatch("success", { action: url, data: data2 });
-    const actionPath = url.pathname + url.search;
-    if (actionPath.includes(action + actionDelete))
-      dispatch("deleted");
-    if (!data2)
-      return;
-    if (actionPath.includes(action + actionCreate))
-      dispatch("created", data2);
-    if (actionPath.includes(action + actionUpdate))
-      dispatch("updated", data2);
-  }
-});
-const { handleInput, isDirty } = useHandleInput({ model, setError });
-onMount(lookupValueFromParams);
-$:
-  $isDirty ? dataInput = data : data = dataInput;
-function lookupValueFromParams() {
-  fields.flat().forEach(({ key }) => {
-    if (data[key])
-      return;
-    const value = $page.url.searchParams.get(key);
-    if (value && key in data)
-      data[key] = value;
-  });
-}
-const actionPadding = getActionPadding();
-function getActionPadding() {
-  const container = contextContainer.get();
-  if (container === "drawer")
-    return "bottom-0 -ml-8 -mr-4 pl-8 pr-4";
-  if (container === "card")
-    return "bottom-0 -mx-2 sm:-mx-8 px-2 sm:px-8";
-  if (container === "dialog")
-    return "-bottom-4 -mx-4 px-4";
-  return "bottom-0";
-}
-const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === void 0 ? !!bool : !!bool(_data);
+>
+	import { createEventDispatcher, onMount } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import { page } from '$app/stores'
+	import { contextContainer } from '../context.js'
+	import {
+		initData,
+		type FormField,
+		type FormSectionProps,
+		type BoolOrFunction,
+		type Nullable,
+		getFieldType,
+		useHandleInput
+	} from './form.js'
+	import ButtonDelete from '../button/ButtonDelete.svelte'
+
+	import { useForm, type UseFormOptions } from '../../validation/form.js'
+	import FormInput from './FormInput.svelte'
+	import FormSection from './FormSection.svelte'
+
+	let klass = ''
+	export { klass as class }
+	export let classSection = ''
+	export let classAction = ''
+	export let model: Shape | undefined = undefined
+	export let fields: FormField<Shape>[][] = []
+	export let sections: FormSectionProps<Shape>[] = [{}]
+	export let action = ''
+	export let actionCreate = '_create'
+	export let actionDelete = '_delete'
+	export let actionUpdate = '_update'
+
+	/** Ignore actionCreate, actionDelete and actionUpdate */
+	export let simpleAction = false
+
+	export let options: UseFormOptions<ReturnData> = {}
+	let dataInput: Nullable<Data> = initData<Shape, Data>(fields)
+	export { dataInput as data }
+
+	let data = dataInput
+
+	export function set<K extends keyof Shape>(key: K, value: Nullable<Data>[K]) {
+		isDirty.set(true)
+		data[key] = value
+	}
+	export function update(updater: (currentData: Nullable<Data>) => Nullable<Data>) {
+		isDirty.set(true)
+		data = updater(data)
+	}
+
+	const dispatch = createEventDispatcher<{
+		success: { action: URL; data?: ReturnData }
+		created: ReturnData
+		updated: ReturnData
+		deleted: void
+	}>()
+
+	const { enhance, setError } = useForm<ReturnData>({
+		...options,
+		async onSuccess(url, data) {
+			if (options.onSuccess) await options.onSuccess(url, data)
+			dispatch('success', { action: url, data })
+			const actionPath = url.pathname + url.search
+			if (actionPath.includes(action + actionDelete)) dispatch('deleted')
+			if (!data) return
+			if (actionPath.includes(action + actionCreate)) dispatch('created', data)
+			if (actionPath.includes(action + actionUpdate)) dispatch('updated', data)
+		}
+	})
+	const { handleInput, isDirty } = useHandleInput({ model, setError })
+
+	onMount(lookupValueFromParams)
+	$: $isDirty ? (dataInput = data) : (data = dataInput)
+
+	function lookupValueFromParams() {
+		fields.flat().forEach(({ key }) => {
+			if (data[key]) return
+			const value = $page.url.searchParams.get(key)
+			// TODO: fix data[key] type
+			// @ts-ignore
+			if (value && key in data) data[key] = value
+		})
+	}
+
+	const actionPadding = getActionPadding()
+	function getActionPadding(): string {
+		const container = contextContainer.get()
+		if (container === 'drawer') return 'bottom-0 -ml-8 -mr-4 pl-8 pr-4'
+		if (container === 'card') return 'bottom-0 -mx-2 sm:-mx-8 px-2 sm:px-8'
+		if (container === 'dialog') return '-bottom-4 -mx-4 px-4'
+		return 'bottom-0'
+	}
+
+	const getBoolean = (bool?: BoolOrFunction<Shape>) => (_data: Nullable<Data>) =>
+		typeof bool === 'boolean' || bool === undefined ? !!bool : !!bool(_data)
 </script>
 
 <form
@@ -138,7 +156,7 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 		"
 	>
 		<button class="btn btn-primary"> Valider </button>
-		<div class="grow" />
+		<div class="grow"></div>
 		{#if !simpleAction && data.id && actionDelete}
 			{@const formaction = `${action}${actionDelete}`}
 			<slot name="delete" {formaction}>

package/dist/ui/form/Form.svelte.d.ts

@@ -20,6 +20,7 @@ declare class __sveltets_Render<Shape extends z.ZodRawShape, ReturnData extends
         data?: Nullable<Data> | undefined;
         set?: (<K extends keyof Shape>(key: K, value: Nullable<Data>[K]) => void) | undefined;
         update?: ((updater: (currentData: Nullable<Data>) => Nullable<Data>) => void) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events(): {
         success: CustomEvent<{

package/dist/ui/form/FormInput.svelte

@@ -1,9 +1,15 @@
-<script generics="InputType extends FormInputsType">import { formInputs } from "./formInput.js";
-let inputType;
-export { inputType as type };
-export let value;
-$:
-  component = formInputs[inputType];
+<script lang="ts" generics="InputType extends FormInputsType">
+	import { formInputs, type FormInputProps, type FormInputsType } from './formInput.js'
+
+	type $$Props = FormInputProps<InputType> & {
+		type: InputType
+		value: FormInputProps<InputType>['value']
+	}
+
+	let inputType: InputType
+	export { inputType as type }
+	export let value: FormInputProps<InputType>['value']
+	$: component = formInputs[inputType] as any
 </script>
 
 <svelte:component this={component} bind:value {...$$restProps} />

package/dist/ui/form/FormInput.svelte.d.ts

@@ -39,15 +39,21 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     hide?: (() => void) | undefined;
                     show?: (() => void) | undefined;
                     setTippyProps?: ((props: Partial<import("tippy.js").Props>) => void) | undefined;
+                    children?: import("svelte").Snippet<[]> | undefined;
                 } | undefined;
                 flatMode?: boolean | undefined;
-                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
-                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotItem: import("svelte").Snippet<[any]>;
+                slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
                 input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+                append?: import("svelte").Snippet<[]> | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 clear?: (() => Promise<void>) | undefined;
             }>): import("../index.js").InputRelation<any>;
+            element?: {
+                new (): HTMLElement;
+                prototype: HTMLElement;
+            } | undefined;
         };
         readonly relations: {
             new (options: import("svelte").ComponentConstructorOptions<{
@@ -60,13 +66,18 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                 error?: string | undefined;
                 placeholder?: string | undefined;
                 flatMode?: boolean | undefined;
-                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
-                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotItem: import("svelte").Snippet<[any]>;
+                slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
                 input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+                append?: import("svelte").Snippet<[]> | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 value?: any[] | null | undefined;
             }>): import("../index.js").InputRelations<any>;
+            element?: {
+                new (): HTMLElement;
+                prototype: HTMLElement;
+            } | undefined;
         };
     }[InputType]>> & {
         type: InputType;
@@ -108,15 +119,21 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                         hide?: (() => void) | undefined;
                         show?: (() => void) | undefined;
                         setTippyProps?: ((props: Partial<import("tippy.js").Props>) => void) | undefined;
+                        children?: import("svelte").Snippet<[]> | undefined;
                     } | undefined;
                     flatMode?: boolean | undefined;
-                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
-                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotItem: import("svelte").Snippet<[any]>;
+                    slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
                     input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+                    append?: import("svelte").Snippet<[]> | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     clear?: (() => Promise<void>) | undefined;
                 }>): import("../index.js").InputRelation<any>;
+                element?: {
+                    new (): HTMLElement;
+                    prototype: HTMLElement;
+                } | undefined;
             };
             readonly relations: {
                 new (options: import("svelte").ComponentConstructorOptions<{
@@ -129,13 +146,18 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     error?: string | undefined;
                     placeholder?: string | undefined;
                     flatMode?: boolean | undefined;
-                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
-                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotItem: import("svelte").Snippet<[any]>;
+                    slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
                     input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
+                    append?: import("svelte").Snippet<[]> | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     value?: any[] | null | undefined;
                 }>): import("../index.js").InputRelations<any>;
+                element?: {
+                    new (): HTMLElement;
+                    prototype: HTMLElement;
+                } | undefined;
             };
         }[InputType]>>["value"];
     };

package/dist/ui/form/FormSection.svelte

@@ -1,19 +1,26 @@
-<script>import { slide } from "svelte/transition";
-import { mdiChevronRight } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-export let title = "";
-export let isActive = false;
-export let isReducible = false;
-let klass = "";
-export { klass as class };
-export let contentClass = "";
-function open() {
-  isActive = true;
-}
-function toggle(event) {
-  event.stopPropagation();
-  isActive = !isActive;
-}
+<script lang="ts">
+	import { slide } from 'svelte/transition'
+	import { mdiChevronRight } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+	type Props = { isActive?: boolean; class?: string; contentClass?: string }
+	type $$Props = Props &
+		({ isReducible: true; title: string } | { isReducible?: false; title?: string })
+
+	export let title = ''
+	export let isActive = false
+	export let isReducible = false
+
+	let klass = ''
+	export { klass as class }
+	export let contentClass = ''
+
+	function open() {
+		isActive = true
+	}
+	function toggle(event: Event) {
+		event.stopPropagation()
+		isActive = !isActive
+	}
 </script>
 
 <div>
@@ -44,7 +51,7 @@ function toggle(event) {
 				{/if}
 			</slot>
 			{#if isReducible}
-				<div class="grow" />
+				<div class="grow"></div>
 				<button
 					type="button"
 					on:click={toggle}

package/dist/ui/form/formInput.d.ts

@@ -60,11 +60,13 @@ export declare function relationProps<Item extends {
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         setTippyProps?: ((props: Partial<import("tippy.js").Props>) => void) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     } | undefined;
     flatMode?: boolean | undefined;
-    slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
-    slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    slotItem: import("svelte").Snippet<[Item]>;
+    slotSuggestion?: import("svelte").Snippet<[Item]> | undefined;
     input?: import("svelte/elements").HTMLInputAttributes | undefined;
+    append?: import("svelte").Snippet<[]> | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     clear?: (() => Promise<void>) | undefined;
@@ -81,9 +83,10 @@ export declare function relationsProps<Item extends {
     error?: string | undefined;
     placeholder?: string | undefined;
     flatMode?: boolean | undefined;
-    slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
-    slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    slotItem: import("svelte").Snippet<[Item]>;
+    slotSuggestion?: import("svelte").Snippet<[Item]> | undefined;
     input?: import("svelte/elements").HTMLInputAttributes | undefined;
+    append?: import("svelte").Snippet<[]> | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     value?: Item[] | null | undefined;

package/dist/ui/icon/Icon.svelte

@@ -1,35 +1,38 @@
-<script>import { tippy } from "../../utils/tippy.js";
-import { onMount } from "svelte";
-export let path;
-export let title = "";
-export let size = 22;
-let klass = "";
-export { klass as class };
-export let style = "";
-export let classSVG = "";
-export let tippyProps = {};
-export let disableTitlePropagation = false;
-const viewWidth = 24;
-const viewHeight = 24;
-let icon;
-let tip = null;
-$:
-  tip?.setContent(title);
-onMount(() => {
-  if (!title)
-    return;
-  const parent = icon.parentElement;
-  const isButton = parent?.tagName === "BUTTON" || parent?.tagName === "A";
-  const target = parent && isButton && !disableTitlePropagation ? parent : icon;
-  tip = tippy(target || icon, {
-    content: title,
-    trigger: "mouseenter",
-    ...tippyProps
-  });
-  return () => {
-    tip?.destroy();
-  };
-});
+<script lang="ts">
+	import { tippy, type TippyProps, type TippyInstance } from '../../utils/tippy.js'
+	import { onMount } from 'svelte'
+
+	export let path: string
+	export let title = ''
+	export let size = 22
+	let klass = ''
+	export { klass as class }
+	export let style = ''
+	export let classSVG = ''
+	export let tippyProps: Partial<TippyProps> = {}
+	export let disableTitlePropagation = false
+	const viewWidth = 24
+	const viewHeight = 24
+
+	let icon: HTMLElement
+
+	let tip: TippyInstance | null = null
+	$: tip?.setContent(title)
+
+	onMount(() => {
+		if (!title) return
+		const parent = icon.parentElement
+		const isButton = parent?.tagName === 'BUTTON' || parent?.tagName === 'A'
+		const target = parent && isButton && !disableTitlePropagation ? parent : icon
+		tip = tippy(target || icon, {
+			content: title,
+			trigger: 'mouseenter',
+			...tippyProps
+		})
+		return () => {
+			tip?.destroy()
+		}
+	})
 </script>
 
 <i bind:this={icon} class="grid place-content-center fill-base-content {klass}" {style}>

package/dist/ui/index.d.ts

@@ -11,7 +11,6 @@ export * from './dialog/index.js';
 export * from './placeholder/index.js';
 export * from './icon/index.js';
 export * from './login/index.js';
-export * from './slot/index.js';
 export * from './pagination/index.js';
 export * from './mode/index.js';
 export * from './badge/index.js';

package/dist/ui/index.js

@@ -11,7 +11,6 @@ export * from './dialog/index.js';
 export * from './placeholder/index.js';
 export * from './icon/index.js';
 export * from './login/index.js';
-export * from './slot/index.js';
 export * from './pagination/index.js';
 export * from './mode/index.js';
 export * from './badge/index.js';

package/dist/ui/input/FormControl.svelte

@@ -1,35 +1,41 @@
-<script>import { slide } from "svelte/transition";
-import { onMount } from "svelte";
-import { formContext } from "../../validation/form.js";
-import { Slot } from "../index.js";
-let klass = "";
-export { klass as class };
-export let classLabel = "";
-export let key = "";
-export let label = "";
-export let error = "";
-export let hint = "";
-export let prefix = "";
-export let prefixFor = "";
-export let enhanceDisabled = false;
-export let labelPosition = "top";
-$:
-  _key = prefix && key ? `${prefix}_${key}` : key || "";
-if (!enhanceDisabled) {
-  const { setError } = formContext.get();
-  setError[key] = (err) => error = err;
-}
-let formControl;
-onMount(() => {
-  const input = formControl.querySelector("input, textarea");
-  if (!input)
-    return;
-  const handleInput = () => error = "";
-  input.addEventListener("input", handleInput);
-  return () => {
-    input.removeEventListener("input", handleInput);
-  };
-});
+<script lang="ts">
+	import { slide } from 'svelte/transition'
+	import { onMount, type Snippet } from 'svelte'
+	import { formContext } from '../../validation/form.js'
+
+	let klass = ''
+	export { klass as class }
+	export let classLabel = ''
+	export let key = ''
+	export let label: Snippet | string = ''
+	export let labelAppend: Snippet | null = null
+	export let error = ''
+	export let hint = ''
+	export let prefix: string | number = ''
+	export let prefixFor: string | number = ''
+	export let enhanceDisabled = false
+	export let labelPosition: LabelPosition = 'top'
+	export let children: Snippet<[{ key: string }]> | undefined = undefined
+
+	type LabelPosition = 'top' | 'left' | 'right'
+
+	$: _key = prefix && key ? `${prefix}_${key}` : key || ''
+
+	if (!enhanceDisabled) {
+		const { setError } = formContext.get()
+		setError[key] = (err) => (error = err)
+	}
+
+	let formControl: HTMLDivElement
+	onMount(() => {
+		const input = formControl.querySelector('input, textarea')
+		if (!input) return
+		const handleInput = () => (error = '')
+		input.addEventListener('input', handleInput)
+		return () => {
+			input.removeEventListener('input', handleInput)
+		}
+	})
 </script>
 
 <div class="form-control {klass}" bind:this={formControl}>
@@ -44,15 +50,21 @@ onMount(() => {
 		{#if label}
 			<label for="{prefixFor}{_key}" class="label cursor-pointer {classLabel}">
 				<span class="label-text">
-					<Slot slot={label} />
+					{#if typeof label === 'string'}
+						{label}
+					{:else}
+						{@render label()}
+					{/if}
 				</span>
-				<slot name="label_append" />
+				{#if labelAppend}
+					{@render labelAppend()}
+				{/if}
 			</label>
 		{/if}
-
-		<slot key={_key} />
 	</div>
 
+	{@render children?.({ key: _key })}
+
 	{#if error}
 		<label for="{prefixFor}{_key}" class="label" transition:slide>
 			<span class="label-text-alt text-warning">{error}</span>