fuma 2.0.49 → 2.1.0

package/dist/input/InputRange.svelte

@@ -0,0 +1,30 @@
+<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>
+	<div class="flex gap-2 px-3 text-sm">
+		<span class="label">{label}</span>
+		<span class="ml-auto">{field?.value() ?? value}</span>
+	</div>
+	{#if field}
+		<input class={['range range-sm', klass]} {...field.as('range')} {...props} />
+	{:else}
+		<input class={['range range-sm', klass]} type="range" bind:value {...props} />
+	{/if}
+	<Issues {field} />
+</label>

package/dist/input/InputRange.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 InputRange: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputRange = ReturnType<typeof InputRange>;
+export default InputRange;

package/dist/input/InputRelation.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="Item">
+	import { ChevronsUpDownIcon } from '@lucide/svelte'
+	import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit'
+	import type { Snippet } from 'svelte'
+	import { useCommand } from '../command/command.svelte.ts'
+	import { usePopover } from '../popover/popover.svelte.ts'
+	import Issues from './Issues.svelte'
+
+	let {
+		label,
+		searchItems,
+		getValue,
+		selected,
+		proposal,
+		field,
+		value = $bindable()
+	}: {
+		label: string
+		searchItems: RemoteQueryFunction<{ search: string }, Item[]>
+		getValue: (item: Item) => string
+		selected?: Snippet<[Item]>
+		proposal?: Snippet<[Item, { isSelected: boolean; isFocus: boolean }]>
+		field?: RemoteFormField<string>
+		value?: string
+	} = $props()
+
+	let search = $state('')
+	const items = $derived.by(() => searchItems({ search }))
+
+	let selectedItem = $state<Item | undefined>(undefined)
+
+	$effect(() => {
+		const targetValue = field?.value() ?? value
+		selectedItem = items.current?.find((item) => getValue(item) === targetValue)
+	})
+
+	const popover = usePopover({ listenFocus: false })
+	const command = useCommand({
+		isEnable: () => popover.isOpen,
+		onSelect: (index) => {
+			popover.hide()
+			const item = items.current?.[index]
+			if (!item) return
+			selectedItem = item
+			if (field) {
+				field.set(getValue(item))
+			} else {
+				value = getValue(item)
+			}
+		}
+	})
+</script>
+
+{#if field?.value() !== undefined}
+	<input {...field.as('hidden', field.value() as string)} />
+{/if}
+
+<div>
+	<label class="floating-label">
+		<span>{label}</span>
+		<button
+			class={['input', field?.issues.length && 'input-error']}
+			{...popover.trigger}
+			type="button"
+		>
+			<div class="grow text-left">
+				{#if !selectedItem}
+					<span class="opacity-60">Select a value</span>
+				{:else if selected}
+					<!-- item.icon not rerender if not wrapped in #key -->
+					{#key selectedItem}{@render selected(selectedItem)}{/key}
+				{:else}
+					{getValue(selectedItem)}
+				{/if}
+			</div>
+			<ChevronsUpDownIcon size={14} />
+		</button>
+	</label>
+
+	<div
+		{...popover.content}
+		class={['my-2 rounded-box border bg-base-100 shadow-xl']}
+		style="min-width: anchor-size(width);"
+		tabindex="-1"
+	>
+		<div class="sticky top-0 z-10 bg-base-100 p-2">
+			<input type="search" {...command.trigger} class="input input-sm" bind:value={search} />
+		</div>
+
+		<ul class="menu max-h-80 w-full flex-nowrap pt-0">
+			{#each items.current as item, index (item)}
+				{@const isSelected = index === command.selectedIndex}
+				{@const isFocus = index === command.focusIndex}
+				<li>
+					<button
+						{...command.item(index, '')}
+						class={[isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
+						type="button"
+						tabindex="-1"
+						role="option"
+					>
+						{#if proposal}
+							{@render proposal(item, { isSelected, isFocus })}
+						{:else}
+							{getValue(item)}
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<Issues {field} />
+</div>
+
+<style>
+	div[popover] {
+		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { RemoteFormField, RemoteQueryFunction } from '@sveltejs/kit';
+import type { Snippet } from 'svelte';
+declare function $$render<Item>(): {
+    props: {
+        label: string;
+        searchItems: RemoteQueryFunction<{
+            search: string;
+        }, Item[]>;
+        getValue: (item: Item) => string;
+        selected?: Snippet<[Item]>;
+        proposal?: Snippet<[Item, {
+            isSelected: boolean;
+            isFocus: boolean;
+        }]>;
+        field?: RemoteFormField<string>;
+        value?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const InputRelation: $$IsomorphicComponent;
+type InputRelation<Item> = InstanceType<typeof InputRelation<Item>>;
+export default InputRelation;

package/dist/input/InputSelect.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" generics="Item">
+	import { ChevronsUpDownIcon } from '@lucide/svelte'
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import type { Snippet } from 'svelte'
+	import { useCommand } from '../command/command.svelte.ts'
+	import { usePopover } from '../popover/popover.svelte.ts'
+	import Issues from './Issues.svelte'
+
+	let {
+		label,
+		items,
+		getValue,
+		selected,
+		proposal,
+		field,
+		value = $bindable()
+	}: {
+		label: string
+		items: Item[]
+		getValue: (item: Item) => string
+		selected?: Snippet<[Item]>
+		proposal?: Snippet<[Item, { isSelected: boolean; isFocus: boolean }]>
+		field?: RemoteFormField<string>
+		value?: string
+	} = $props()
+
+	let selectedItem = $state<Item | undefined>(undefined)
+
+	$effect(() => {
+		const targetValue = field?.value() ?? value
+		selectedItem = items.find((item) => getValue(item) === targetValue)
+	})
+
+	const popover = usePopover({ listenFocus: false })
+	const command = useCommand({
+		isEnable: () => popover.isOpen,
+		onSelect: (index) => {
+			popover.hide()
+			const item = items[index]
+			if (!item) return
+			selectedItem = item
+			if (field) {
+				field.set(getValue(item))
+			} else {
+				value = getValue(item)
+			}
+		}
+	})
+</script>
+
+{#if field?.value() !== undefined}
+	<input {...field.as('hidden', field.value() as string)} />
+{/if}
+
+<div>
+	<label class="floating-label">
+		<span>{label}</span>
+		<button
+			type="button"
+			class={['input', field?.issues.length && 'input-error']}
+			{...popover.trigger}
+			{...command.trigger}
+		>
+			<div class="grow text-left">
+				{#if !selectedItem}
+					<span class="opacity-60">Select a value</span>
+				{:else if selected}
+					<!-- item.icon not rerender if not wrapped in #key -->
+					{#key selectedItem}{@render selected(selectedItem)}{/key}
+				{:else}
+					{getValue(selectedItem)}
+				{/if}
+			</div>
+			<ChevronsUpDownIcon size={14} />
+		</button>
+	</label>
+
+	<div
+		{...popover.content}
+		class={['my-2 rounded-box border bg-base-100 shadow-xl']}
+		style="width: anchor-size(width);"
+		tabindex="-1"
+	>
+		<ul class="menu max-h-80 w-full flex-nowrap">
+			{#each items as item, index (item)}
+				{@const isSelected = index === command.selectedIndex}
+				{@const isFocus = index === command.focusIndex}
+				<li>
+					<button
+						{...command.item(index)}
+						class={[isFocus && 'menu-focus']}
+						type="button"
+						tabindex="-1"
+						role="option"
+					>
+						{#if proposal}
+							{@render proposal(item, { isSelected, isFocus })}
+						{:else}
+							{getValue(item)}
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<Issues {field} />
+</div>
+
+<style>
+	div[popover] {
+		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import type { Snippet } from 'svelte';
+declare function $$render<Item>(): {
+    props: {
+        label: string;
+        items: Item[];
+        getValue: (item: Item) => string;
+        selected?: Snippet<[Item]>;
+        proposal?: Snippet<[Item, {
+            isSelected: boolean;
+            isFocus: boolean;
+        }]>;
+        field?: RemoteFormField<string>;
+        value?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const InputSelect: $$IsomorphicComponent;
+type InputSelect<Item> = InstanceType<typeof InputSelect<Item>>;
+export default InputSelect;

package/dist/input/InputSelectNative.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import { type Options, parseOptions } from '../index.ts'
+	import Issues from './Issues.svelte'
+	import type { SelectProps } from './type.ts'
+
+	let {
+		label,
+		field,
+		value = $bindable(),
+		options: optionsProp,
+		class: klass,
+		multiple,
+		...props
+	}: {
+		label: string
+		options: Options
+		field?: RemoteFormField<string | string[]>
+		value?: string | string[]
+	} & SelectProps = $props()
+
+	const options = $derived(parseOptions(optionsProp))
+</script>
+
+<div>
+	<label class="floating-label">
+		<span>{label}</span>
+		<select
+			class={['select', klass]}
+			{...field?.as(multiple !== true ? 'select' : 'select multiple')}
+			bind:value
+			{...props}
+		>
+			{#each options as option}
+				<option value={option.value} class={['', option.class]} disabled={option.disabled}>
+					{#if option.icon}
+						<option.icon size={18} opacity={0.8} />
+					{/if}
+					<span class="grow">{option.label}</span>
+				</option>
+			{/each}
+		</select>
+	</label>
+	<Issues {field} />
+</div>
+
+<style>
+	option::checkmark {
+		order: 1;
+		margin-left: auto;
+	}
+
+	select[aria-invalid='true'] {
+		--input-color: var(--color-error);
+	}
+</style>

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

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

package/dist/input/InputString.svelte

@@ -0,0 +1,48 @@
+<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(),
+		type = 'text',
+		class: klass,
+		...props
+	}: {
+		label: string
+		field?: RemoteFormField<string>
+		value?: string
+		type?:
+			| 'text'
+			| 'email'
+			| 'password'
+			| 'url'
+			| 'tel'
+			| 'search'
+			| 'date'
+			| 'datetime-local'
+			| 'time'
+			| 'month'
+			| 'week'
+			| 'color'
+			| 'select'
+	} & InputProps = $props()
+</script>
+
+<label class="floating-label">
+	<span>{label}</span>
+	{#if field}
+		<input placeholder={label} class={['input', klass]} {...field.as(type)} {...props} />
+	{:else}
+		<input placeholder={label} class={['input', klass]} {type} bind:value {...props} />
+	{/if}
+	<Issues {field} />
+</label>
+
+<style>
+	input[aria-invalid='true'] {
+		--input-color: var(--color-error);
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+import type { InputProps } from './type.ts';
+type $$ComponentProps = {
+    label: string;
+    field?: RemoteFormField<string>;
+    value?: string;
+    type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'select';
+} & InputProps;
+declare const InputString: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputString = ReturnType<typeof InputString>;
+export default InputString;

package/dist/input/InputTextarea.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import { TextareaAutosize } from 'runed'
+	import Issues from './Issues.svelte'
+	import type { TextareaProps } from './type.ts'
+
+	let {
+		label,
+		field,
+		value = $bindable(),
+		class: klass,
+		maxHeight = 200,
+		...props
+	}: {
+		label: string
+		field?: RemoteFormField<string>
+		value?: string
+		maxHeight?: number
+	} & TextareaProps = $props()
+
+	let textarea = $state<HTMLTextAreaElement>()
+	new TextareaAutosize({
+		element: () => textarea,
+		input: () => field?.value() || value || '',
+		// svelte-ignore state_referenced_locally
+		maxHeight
+	})
+</script>
+
+<label class="floating-label">
+	<span>{label}</span>
+	<textarea
+		placeholder={label}
+		class={['textarea', klass]}
+		bind:this={textarea}
+		{...field?.as('text')}
+		bind:value
+		{...props}
+	></textarea>
+	<Issues {field} />
+</label>
+
+<style>
+	textarea[aria-invalid='true'] {
+		--input-color: var(--color-error);
+	}
+</style>

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

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

package/dist/input/Issues.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { RemoteFormField } from '@sveltejs/kit'
+	import { slide } from 'svelte/transition'
+
+	let {
+		field
+	}: {
+		// biome-ignore lint/suspicious/noExplicitAny: Wathever then value type... we use just field.issues()
+		field: RemoteFormField<any> | undefined
+	} = $props()
+</script>
+
+{#if field?.issues()?.length}
+	<div class="my-1 flex flex-col text-xs text-error" transition:slide={{ duration: 200 }}>
+		{#each field.issues() as issue}
+			<span>
+				{issue.message}
+			</span>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { RemoteFormField } from '@sveltejs/kit';
+type $$ComponentProps = {
+    field: RemoteFormField<any> | undefined;
+};
+declare const Issues: import("svelte").Component<$$ComponentProps, {}, "">;
+type Issues = ReturnType<typeof Issues>;
+export default Issues;

package/dist/input/index.d.ts

@@ -0,0 +1,11 @@
+export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputNumber } from './InputNumber.svelte';
+export { default as InputRadio } from './InputRadio.svelte';
+export { default as InputRange } from './InputRange.svelte';
+export { default as InputRelation } from './InputRelation.svelte';
+export { default as InputSelect } from './InputSelect.svelte';
+export { default as InputSelectNative } from './InputSelectNative.svelte';
+export { default as InputString } from './InputString.svelte';
+export { default as InputTextarea } from './InputTextarea.svelte';
+export { default as Issues } from './Issues.svelte';
+export type * from './type.ts';

package/dist/input/index.js

@@ -0,0 +1,10 @@
+export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputNumber } from './InputNumber.svelte';
+export { default as InputRadio } from './InputRadio.svelte';
+export { default as InputRange } from './InputRange.svelte';
+export { default as InputRelation } from './InputRelation.svelte';
+export { default as InputSelect } from './InputSelect.svelte';
+export { default as InputSelectNative } from './InputSelectNative.svelte';
+export { default as InputString } from './InputString.svelte';
+export { default as InputTextarea } from './InputTextarea.svelte';
+export { default as Issues } from './Issues.svelte';

package/dist/input/type.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes, HTMLOptionAttributes, HTMLSelectAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+export type InputProps = Omit<HTMLInputAttributes, 'name' | 'value' | 'aria-invalid' | 'type'>;
+export type TextareaProps = Omit<HTMLTextareaAttributes, 'name' | 'value' | 'aria-invalid'>;
+export type OptionProps = Omit<HTMLOptionAttributes, 'name' | 'value' | 'aria-invalid'>;
+export type SelectProps = Omit<HTMLSelectAttributes, 'name' | 'value' | 'aria-invalid'>;

package/dist/input/type.js

@@ -0,0 +1 @@
+export {};

package/dist/popover/Popover.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import type { ClassValue } from 'svelte/elements'
+	import {
+		type Placement,
+		type PopoverOptions,
+		type PopoverType,
+		usePopover
+	} from './popover.svelte.ts'
+
+	let {
+		children,
+		trigger,
+		class: klass = '',
+		style = '',
+		...popoverOptions
+	}: {
+		children: Snippet<[PopoverType]>
+		trigger: Snippet<[PopoverType]>
+		placement?: Placement
+		class?: ClassValue
+		style?: string
+	} & PopoverOptions = $props()
+
+	let popover = usePopover((() => popoverOptions)())
+</script>
+
+{@render trigger(popover)}
+
+<div {...popover.content} {style} class={['rounded-box border bg-base-100 shadow-xl', klass]}>
+	{@render children(popover)}
+</div>
+
+<style>
+	div[popover] {
+		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+	}
+
+	div[popover]:popover-open {
+		inset: 5px;
+		transition-property: opacity, scale;
+		transition-duration: 150ms;
+		opacity: 1;
+		scale: 1;
+		@starting-style {
+			opacity: 0;
+			scale: 0.95;
+		}
+	}
+</style>

package/dist/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.svelte';
+export * from './popover.svelte.ts';

package/dist/popover/index.js

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.svelte';
+export * from './popover.svelte.ts';