fuma 0.5.1 → 1.0.0

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

@@ -1,28 +1,26 @@
 import { SvelteComponent } from "svelte";
-import { type ComponentType } from 'svelte';
-import type { ComponentAndProps } from '../../utils/index.js';
+import { type Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | ComponentType | ComponentAndProps | undefined;
+        label?: string | Snippet<[]> | undefined;
+        labelAppend?: 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?: Snippet<[{
+            key: string;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label_append: {};
-        default: {
-            key: string;
-        };
-    };
+    slots: {};
 };
 export type FormControlProps = typeof __propDef.props;
 export type FormControlEvents = typeof __propDef.events;

package/dist/ui/input/InputBoolean.svelte

@@ -1,26 +1,33 @@
-<script>import { createEventDispatcher } from "svelte";
-import { FormControl, bindCheckedWithParams } from "./index.js";
-import { USE_COERCE_BOOLEAN } from "../../utils/constant.js";
-export let value = false;
-export let input = {};
-export let inputElement = void 0;
-export let bindWithParams = false;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import type { HTMLInputAttributes } from 'svelte/elements'
+	import { FormControl, type InputProps, bindCheckedWithParams } from './index.js'
+	import { USE_COERCE_BOOLEAN } from '../../utils/constant.js'
+
+	type $$Props = InputProps<boolean> & { isRow?: boolean }
+	export let value: boolean | null | undefined = false
+	export let input: HTMLInputAttributes = {}
+	export let inputElement: HTMLInputElement | undefined = undefined
+	export let bindWithParams: boolean = false
+
+	const dispatch = createEventDispatcher<{ change: boolean }>()
 </script>
 
-<FormControl {...$$restProps} let:key class="">
-	<input
-		bind:this={inputElement}
-		bind:checked={value}
-		use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
-		on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
-		on:focus
-		on:blur
-		type="checkbox"
-		id={key}
-		class="checkbox ml-1"
-		{...input}
-	/>
+<FormControl {...$$restProps} class="">
+	{#snippet children({ key })}
+		<input
+			bind:this={inputElement}
+			bind:checked={value}
+			use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
+			on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
+			on:focus
+			on:blur
+			type="checkbox"
+			id={key}
+			class="checkbox ml-1"
+			{...input}
+		/>
 
-	<input type="hidden" name={key} value="{USE_COERCE_BOOLEAN}{value}" />
+		<input type="hidden" name={key} value="{USE_COERCE_BOOLEAN}{value}" />
+	{/snippet}
 </FormControl>

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

@@ -5,13 +5,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?: HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;

package/dist/ui/input/InputCheckboxs.svelte

@@ -1,23 +1,25 @@
-<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 lang="ts">
+	import { slide } from 'svelte/transition'
+	import { FormControl, type InputProps } from './index.js'
+	import { type Options, parseOptions } from '../../utils/options.js'
+
+	type $$Props = InputProps<string[]> & { options: Options; checkboxesClass?: string }
+	$: ({
+		input,
+		value: _value,
+		options: _1,
+		class: klass,
+		checkboxesClass,
+		hint,
+		error,
+		...props
+	} = $$props as $$Props)
+	export let value: string[] | null | undefined = _value || []
+	export let options: Options
+
+	if (!value) value = []
+
+	$: _options = parseOptions(options)
 </script>
 
 <div class={klass}>
@@ -32,24 +34,25 @@ $:
 		{#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}
-				/>
+				{#snippet children({ key })}
+					<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}
+					/>
+				{/snippet}
 			</FormControl>
 		{/each}
 	</div>

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

@@ -5,13 +5,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/InputCheckboxsMenu.svelte

@@ -1,38 +1,54 @@
-<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 { Icon } from "../icon/index.js";
-import { DropDown } from "../menu/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);
-async function writeUrl() {
-  const url = value?.length ? $urlParam.with({ [key]: JSON.stringify(value) }) : $urlParam.without(key);
-  return goto(url, { replaceState: true, noScroll: true });
-}
-function handleReset() {
-  dropdown.hide();
-  value = [];
-  goto($urlParam.without(key), { replaceState: true });
-}
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import { mdiClose } from '@mdi/js'
+
+	import { urlParam } from '../../store/index.js'
+	import { jsonParse, type Options, parseOptions } from '../../utils/index.js'
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { FormControl, type InputProps } from './index.js'
+
+	type $$Props = InputProps<string[]> & {
+		key: string
+		options: Options
+		right?: boolean
+		btnClass?: string
+		badgePrimary?: boolean
+	}
+	$: ({
+		input,
+		value: _value,
+		options: _1,
+		class: klass,
+		label,
+		right,
+		btnClass,
+		badgePrimary,
+		...props
+	} = $$props as $$Props)
+
+	export let key: string
+	export let options: Options
+	export let value: string[] | null | undefined =
+		_value || jsonParse($page.url.searchParams.get(key), [])
+
+	let dropdown: DropDown
+
+	$: _options = parseOptions(options)
+
+	async function writeUrl() {
+		const url = value?.length
+			? $urlParam.with({ [key]: JSON.stringify(value) })
+			: $urlParam.without(key)
+		return goto(url, { 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)} />
@@ -65,22 +81,23 @@ function handleReset() {
 		{#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}
-				/>
+				{#snippet children({ key })}
+					<input
+						bind:group={value}
+						on:input
+						on:focus
+						on:blur
+						value={option.value}
+						type="checkbox"
+						id="{index}{key}"
+						class="checkbox"
+						{...input}
+					/>
+				{/snippet}
 			</FormControl>
 		{:else}
 			<div class="px-3 py-2 rounded opacity-70">Aucun élément</div>

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

@@ -5,13 +5,17 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").ComponentType | import("../../utils/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/InputCheckboxsTree.svelte

@@ -1,9 +1,12 @@
-<script>import InputCheckboxsTreeNodes, {
-} from "./InputCheckboxsTreeNodes.svelte";
-export let label;
-export let options;
-let klass = "";
-export { klass as class };
+<script lang="ts">
+	import InputCheckboxsTreeNodes, {
+		type OptionsNode
+	} from './InputCheckboxsTreeNodes.svelte'
+
+	export let label: string
+	export let options: OptionsNode
+	let klass = ''
+	export { klass as class }
 </script>
 
 <div class={klass}>

package/dist/ui/input/InputCheckboxsTreeNodes.svelte

@@ -1,31 +1,39 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+	export type OptionsNode = Record<
+		string,
+		{ label: string; value?: boolean; options?: OptionsNode }
+	>
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import { InputBoolean } from './index.js'
+	export let options: OptionsNode
+
+	type Events = { setTrue: void }
+	const dispatch = createEventDispatcher<Events>()
+
+	function handleChange(newValue: boolean, option: OptionsNode[string]) {
+		if (newValue === true) dispatch('setTrue')
+		else if (option.options) {
+			option.options = setFalse(option.options)
+		}
+	}
 
-<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)
-      }
-    }),
-    {}
-  );
-}
+	function setFalse(_options?: OptionsNode): OptionsNode | undefined {
+		if (!_options) return undefined
+		return Object.entries(_options).reduce<OptionsNode>(
+			(acc, [key, opt]) => ({
+				...acc,
+				[key]: {
+					label: opt.label,
+					value: false,
+					options: setFalse(opt.options)
+				}
+			}),
+			{}
+		)
+	}
 </script>
 
 {#each Object.keys(options) as key (key)}
@@ -43,7 +51,7 @@ function setFalse(_options) {
 					<div
 						style:height="{24 + index * 36}px"
 						class="t-0 bordered absolute w-3 rounded-bl-lg border-b-2 border-l-2"
-					/>
+					></div>
 				{/each}
 			</div>
 			<div>

package/dist/ui/input/InputCombo.svelte

@@ -1,74 +1,85 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { parseOptions } from "../../utils/options.js";
-import { FormControl, SelectorList } from "./index.js";
-import { DropDown } from "../menu/index.js";
-import { Icon } from "../icon/index.js";
-$:
-  ({ input, value: _value, options, tippyProps, ...props } = $$props);
-$:
-  ({ class: inputClass, ...inputProps } = input || {});
-export let value = _value;
-export let inputElement = void 0;
-let focusIndex = 0;
-let searchValue = "";
-const dispatch = createEventDispatcher();
-let filteredOptions = [];
-$:
-  _options = parseOptions(options);
-$:
-  selectedOption = _options.find((opt) => opt.value === value);
-function filterOptions(value2) {
-  const reg = new RegExp(value2, "i");
-  filteredOptions = _options.filter((opt) => opt.label.match(reg) || opt.value.match(reg)).map((opt) => ({ id: opt.value, ...opt }));
-}
-export async function clear() {
-  searchValue = "";
-  value = "";
-  filterOptions("");
-  await tick();
-  inputElement?.focus();
-}
-async function select(index = focusIndex) {
-  value = _options[index].value;
-  dispatch("input", value);
-}
+<script lang="ts">
+	import { createEventDispatcher, tick } from 'svelte'
+
+	import type { InputProps } from './types.js'
+	import type { TippyProps } from '../../utils/tippy.js'
+	import { type Options, type Option, parseOptions } from '../../utils/options.js'
+	import { FormControl, SelectorList } from './index.js'
+	import { DropDown } from '../menu/index.js'
+	import { Icon } from '../icon/index.js'
+
+	type $$Props = InputProps & { options: Options; tippyProps?: TippyProps }
+	$: ({ input, value: _value, options, tippyProps, ...props } = $$props as $$Props)
+	$: ({ class: inputClass, ...inputProps } = input || {})
+	export let value = _value
+	export let inputElement: HTMLInputElement | undefined = undefined
+
+	let focusIndex = 0
+	let searchValue = ''
+
+	const dispatch = createEventDispatcher<{ input: string }>()
+	let filteredOptions: (Option & { id: string })[] = []
+	$: _options = parseOptions(options)
+	$: selectedOption = _options.find((opt) => opt.value === value)
+
+	function filterOptions(value: string) {
+		const reg = new RegExp(value, 'i')
+		filteredOptions = _options
+			.filter((opt) => opt.label.match(reg) || opt.value.match(reg))
+			.map((opt) => ({ id: opt.value, ...opt }))
+	}
+
+	export async function clear() {
+		searchValue = ''
+		value = ''
+		filterOptions('')
+		await tick()
+		inputElement?.focus()
+	}
+
+	async function select(index = focusIndex) {
+		value = _options[index].value
+		dispatch('input', value)
+	}
 </script>
 
 <DropDown {tippyProps}>
 	<div class="contents" slot="activator">
-		<FormControl {...props} let:key>
-			<div class="flex grow gap-2" class:hidden={selectedOption}>
-				<div class="relative flex grow items-center gap-2">
-					<input
-						type="text"
-						id={key}
-						bind:this={inputElement}
-						bind:value={searchValue}
-						on:focus={() => filterOptions('')}
-						on:blur={() => (searchValue = '')}
-						on:input={(e) => filterOptions(e.currentTarget.value)}
-						autocomplete="off"
-						class="input input-bordered grow {inputClass || {}}"
-						{...inputProps}
-					/>
+		<FormControl {...props}>
+			{#snippet children({ key })}
+				<div class="flex grow gap-2" class:hidden={selectedOption}>
+					<div class="relative flex grow items-center gap-2">
+						<input
+							type="text"
+							id={key}
+							bind:this={inputElement}
+							bind:value={searchValue}
+							on:focus={() => filterOptions('')}
+							on:blur={() => (searchValue = '')}
+							on:input={(e) => filterOptions(e.currentTarget.value)}
+							autocomplete="off"
+							class="input input-bordered grow {inputClass || {}}"
+							{...inputProps}
+						/>
+					</div>
+					<slot name="append" />
 				</div>
-				<slot name="append" />
-			</div>
 
-			{#if selectedOption}
-				<button
-					type="button"
-					class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
-					on:click={clear}
-					on:focus={clear}
-				>
-					{#if selectedOption.icon}
-						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
-					{/if}
-					<span>{selectedOption.label}</span>
-				</button>
-				<input type="hidden" name={key} value={selectedOption.value} />
-			{/if}
+				{#if selectedOption}
+					<button
+						type="button"
+						class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
+						on:click={clear}
+						on:focus={clear}
+					>
+						{#if selectedOption.icon}
+							<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+						{/if}
+						<span>{selectedOption.label}</span>
+					</button>
+					<input type="hidden" name={key} value={selectedOption.value} />
+				{/if}
+			{/snippet}
 		</FormControl>
 	</div>
 

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

@@ -8,13 +8,17 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").ComponentType | import("../..").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").HTMLInputAttributes | undefined;
         inputElement?: HTMLInputElement | undefined;