fuma 0.5.0 → 1.0.0

package/dist/ui/input/InputSelect.svelte

@@ -1,55 +1,68 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { mdiUnfoldMoreHorizontal } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { DropDown } from "../menu/index.js";
-import { SelectorList, FormControl } from "./index.js";
-import { parseOptions } from "../../utils/options.js";
-$:
-  ({ value: _value, options, tippyProps, placeholder, ...props } = $$props);
-export let value = _value;
-$:
-  _options = parseOptions(options);
-$:
-  selectedOption = _options.find((opt) => opt.value === value);
-let dropDown;
-let button;
-const dispatch = createEventDispatcher();
-let focusIndex = 0;
-onMount(() => {
-  const index = _options.findIndex((opt) => opt.value === value);
-  focusIndex = index === -1 ? 0 : index;
-});
-function onSelect(index) {
-  focusIndex = index;
-  value = _options[index].value;
-  dispatch("input", value);
-  dispatch("select", value);
-  dropDown.hide();
-}
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+	import { mdiUnfoldMoreHorizontal } from '@mdi/js'
+
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { SelectorList, FormControl, type InputProps } from './index.js'
+
+	import { type Options, parseOptions } from '../../utils/options.js'
+	import type { TippyProps } from '../../utils/tippy.js'
+
+	type $$Props = Omit<InputProps, 'input' | 'inputElement'> & {
+		options: Options
+		tippyProps?: TippyProps
+		placeholder?: string
+	}
+	$: ({ value: _value, options, tippyProps, placeholder, ...props } = $$props as $$Props)
+	export let value = _value
+
+	$: _options = parseOptions(options)
+	$: selectedOption = _options.find((opt) => opt.value === value)
+
+	let dropDown: DropDown
+	let button: HTMLButtonElement
+	const dispatch = createEventDispatcher<{ input: string; select: string }>()
+
+	let focusIndex = 0
+	onMount(() => {
+		const index = _options.findIndex((opt) => opt.value === value)
+		focusIndex = index === -1 ? 0 : index
+	})
+
+	function onSelect(index: number) {
+		focusIndex = index
+		value = _options[index].value
+		dispatch('input', value)
+		dispatch('select', value)
+		dropDown.hide()
+	}
 </script>
 
 <DropDown bind:this={dropDown}>
 	<svelte:fragment slot="activator">
-		<FormControl {...props} let:key>
-			<button
-				bind:this={button}
-				id={key}
-				type="button"
-				class="input-bordered flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2 hover:bg-base-200/50"
-			>
-				{#if selectedOption}
-					{#if selectedOption.icon}
-						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+		<FormControl {...props}>
+			{#snippet children({ key })}
+				<button
+					bind:this={button}
+					id={key}
+					type="button"
+					class="input-bordered flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2 hover:bg-base-200/50"
+				>
+					{#if selectedOption}
+						{#if selectedOption.icon}
+							<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+						{/if}
+						<span>{selectedOption.label}</span>
+					{:else if placeholder}
+						<span class="opacity-60">{placeholder}</span>
 					{/if}
-					<span>{selectedOption.label}</span>
-				{:else if placeholder}
-					<span class="opacity-60">{placeholder}</span>
+					<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
+				</button>
+				{#if value !== undefined}
+					<input type="hidden" name={key} {value} />
 				{/if}
-				<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
-			</button>
-			{#if value !== undefined}
-				<input type="hidden" name={key} {value} />
-			{/if}
+			{/snippet}
 		</FormControl>
 	</svelte:fragment>
 

package/dist/ui/input/InputText.svelte

@@ -1,32 +1,33 @@
-<script>import { FormControl, bindValueWithParams } from "./index.js";
-$:
-  ({ input, value: _value, classWrapper, bindWithParams, ...props } = $$props);
-$:
-  ({ class: inputClass, ...inputProps } = input || {});
-export let value = _value;
-export let inputElement = void 0;
+<script lang="ts">
+	import { FormControl, bindValueWithParams, type InputProps } from './index.js'
+
+	type $$Props = InputProps
+	$: ({ input, value: _value, classWrapper, bindWithParams, ...props } = $$props as $$Props)
+	$: ({ class: inputClass, ...inputProps } = input || {})
+	export let value = _value
+	export let inputElement: HTMLInputElement | undefined = undefined
 </script>
 
 <FormControl {...props} enhanceDisabled={props.enhanceDisabled || bindWithParams} let:key>
-	<slot name="label_append" slot="label_append" />
-
-	<div class={classWrapper}>
-		<slot name="prepend" {value} />
-		<input
-			bind:value
-			on:input
-			on:focus
-			on:blur
-			on:keydown
-			on:keyup
-			bind:this={inputElement}
-			use:bindValueWithParams={{ bindEnable: bindWithParams, initValue: (v) => (value = v) }}
-			type="text"
-			name={key}
-			id={key}
-			class="input input-bordered w-full {inputClass || ''}"
-			{...inputProps}
-		/>
-		<slot name="append" {value} />
-	</div>
+	{#snippet children({ key })}
+		<div class={classWrapper}>
+			<slot name="prepend" {value} />
+			<input
+				bind:value
+				on:input
+				on:focus
+				on:blur
+				on:keydown
+				on:keyup
+				bind:this={inputElement}
+				use:bindValueWithParams={{ bindEnable: bindWithParams, initValue: (v) => (value = v) }}
+				type="text"
+				name={key}
+				id={key}
+				class="input input-bordered w-full {inputClass || ''}"
+				{...inputProps}
+			/>
+			<slot name="append" {value} />
+		</div>
+	{/snippet}
 </FormControl>

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

@@ -12,9 +12,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label_append: {
-            slot: string;
-        };
         prepend: {
             value: string | null | undefined;
         };

package/dist/ui/input/InputTextarea.svelte

@@ -1,22 +1,23 @@
-<script>import { FormControl } from "./index.js";
-$:
-  ({ textarea, value: _value, ...props } = $$props);
-$:
-  ({ class: inputClass, ...inputProps } = textarea || {});
-export let value = _value;
+<script lang="ts">
+	import { FormControl, type TextareaProps } from './index.js'
+	type $$Props = TextareaProps
+	$: ({ textarea, value: _value, ...props } = $$props as $$Props)
+	$: ({ class: inputClass, ...inputProps } = textarea || {})
+	export let value = _value
 </script>
 
-<FormControl {...props} let:key>
-	<slot name="label_append" slot="label_append" />
-	<textarea
-		bind:value
-		on:input
-		on:focus
-		on:blur
-		name={key}
-		id={key}
-		class="textarea textarea-bordered {inputClass || ''}"
-		rows="4"
-		{...inputProps}
-	/>
+<FormControl {...props}>
+	{#snippet children({ key })}
+		<textarea
+			bind:value
+			on:input
+			on:focus
+			on:blur
+			name={key}
+			id={key}
+			class="textarea textarea-bordered {inputClass || ''}"
+			rows="4"
+			{...inputProps}
+		></textarea>
+	{/snippet}
 </FormControl>

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

@@ -9,11 +9,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label_append: {
-            slot: string;
-        };
-    };
+    slots: {};
 };
 export type InputTextareaProps = typeof __propDef.props;
 export type InputTextareaEvents = typeof __propDef.events;

package/dist/ui/input/InputTime.svelte

@@ -1,38 +1,46 @@
-<script>import { createEventDispatcher } from "svelte";
-import { FormControl } from "./index.js";
-import dayjs from "dayjs";
-export let value = void 0;
-export let input = {};
-$:
-  ({ class: inputClass = "", ...inputProps } = input);
-const dispatch = createEventDispatcher();
-const onInput = ({ currentTarget }) => {
-  value = getDateTime(currentTarget.value);
-  dispatch("input", value);
-};
-function getDateTime(v) {
-  if (!v)
-    return value;
-  const date = new Date(value || 0);
-  const dateString = [
-    date.getFullYear().toString(),
-    (date.getMonth() + 1).toString().padStart(2, "0"),
-    date.getDate().toString().padStart(2, "0")
-  ].join("-");
-  return /* @__PURE__ */ new Date(`${dateString}T${v}`);
-}
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import type { HTMLInputAttributes, FormEventHandler } from 'svelte/elements'
+	import { FormControl, type InputProps } from './index.js'
+	import dayjs from 'dayjs'
+	type $$Props = InputProps<Date>
+
+	export let value: Date | null | undefined = undefined
+	export let input: HTMLInputAttributes = {}
+
+	$: ({ class: inputClass = '', ...inputProps } = input)
+
+	const dispatch = createEventDispatcher<{ input: Date | null }>()
+
+	const onInput: FormEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+		value = getDateTime(currentTarget.value)
+		dispatch('input', value)
+	}
+
+	function getDateTime(v: string | null | undefined): Date | null | undefined {
+		if (!v) return value
+		const date = new Date(value || 0)
+		const dateString = [
+			date.getFullYear().toString(),
+			(date.getMonth() + 1).toString().padStart(2, '0'),
+			date.getDate().toString().padStart(2, '0')
+		].join('-')
+		return new Date(`${dateString}T${v}`)
+	}
 </script>
 
-<FormControl {...$$restProps} let:key>
-	<input
-		value={value && dayjs(value).format('HH:mm')}
-		on:input={onInput}
-		on:focus
-		on:blur
-		type="time"
-		name={key}
-		id={key}
-		class="input input-bordered {inputClass}"
-		{...inputProps}
-	/>
+<FormControl {...$$restProps}>
+	{#snippet children({ key })}
+		<input
+			value={value && dayjs(value).format('HH:mm')}
+			on:input={onInput}
+			on:focus
+			on:blur
+			type="time"
+			name={key}
+			id={key}
+			class="input input-bordered {inputClass}"
+			{...inputProps}
+		/>
+	{/snippet}
 </FormControl>

package/dist/ui/input/RelationAfter.svelte

@@ -1,12 +1,16 @@
-<script>import { fade } from "svelte/transition";
-import { createEventDispatcher } from "svelte";
-import { mdiLoading, mdiPlus } from "@mdi/js";
-import Icon from "../icon/Icon.svelte";
-export let isLoading;
-export let createUrl = "";
-export let createTitle = "";
-export let createIcon = mdiPlus;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+	import { createEventDispatcher } from 'svelte'
+	import { mdiLoading, mdiPlus } from '@mdi/js'
+
+	import Icon from '../icon/Icon.svelte'
+
+	export let isLoading: boolean
+	export let createUrl = ''
+	export let createTitle = ''
+	export let createIcon = mdiPlus
+
+	const dispatch = createEventDispatcher<{ unselect: void; create: void }>()
 </script>
 
 {#if isLoading}

package/dist/ui/input/SelectorList.svelte

@@ -1,15 +1,19 @@
-<script generics="Item extends {id: string}">import { createEventDispatcher } from "svelte";
-import { selector } from "../../action/selector.js";
-let klass = "";
-export { klass as class };
-export let items;
-export let isError = false;
-export let isLoading = false;
-export let focusIndex = 0;
-export let trigger = void 0;
-export let keyDownEvent = void 0;
-export let keyDownPreventDefault = true;
-const dispatch = createEventDispatcher();
+<script lang="ts" generics="Item extends {id: string}">
+	import { createEventDispatcher } from 'svelte'
+	import { selector } from '../../action/selector.js'
+
+	let klass = ''
+	export { klass as class }
+
+	export let items: Item[]
+	export let isError = false
+	export let isLoading = false
+	export let focusIndex = 0
+	export let trigger: HTMLElement | undefined = undefined
+	export let keyDownEvent: KeyboardEvent | undefined = undefined
+	export let keyDownPreventDefault = true
+
+	const dispatch = createEventDispatcher<{ select: number }>()
 </script>
 
 <ul

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

@@ -11,6 +11,10 @@ declare class __sveltets_Render<Item extends {
         trigger?: HTMLElement | undefined;
         keyDownEvent?: KeyboardEvent | undefined;
         keyDownPreventDefault?: boolean | undefined;
+        children?: import("svelte").Snippet<[{
+            item: Item;
+            index: any;
+        }]> | undefined;
     };
     events(): {
         select: CustomEvent<number>;

package/dist/ui/input/textRich/InputTextRich.svelte

@@ -1,58 +1,67 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { Editor } from "@tiptap/core";
-import debounce from "debounce";
-import { jsonParse } from "../../../utils/jsonParse.js";
-import { FormControl } from "../index.js";
-import ToolsBar from "./ToolsBar.svelte";
-import { extensions } from "./extensions.js";
-export let value = "";
-export let classToolbar = "";
-let element;
-let editor = null;
-const dispatch = createEventDispatcher();
-onMount(() => {
-  initEditor();
-  return () => {
-    if (editor)
-      editor.destroy();
-  };
-});
-function initEditor() {
-  const valueAsHtml = !value.startsWith("{") && value !== "null";
-  editor = new Editor({
-    element,
-    content: valueAsHtml ? value : jsonParse(value, void 0),
-    editorProps: {
-      attributes: {
-        class: "prose max-w-[210mm] mx-auto focus:outline-none"
-      }
-    },
-    extensions,
-    onTransaction() {
-      editor = editor;
-      updateValue();
-    }
-  });
-}
-const updateValue = debounce(() => {
-  if (!editor)
-    return;
-  const newValue = JSON.stringify(editor.getJSON());
-  if (newValue === value)
-    return;
-  value = newValue;
-  dispatch("change");
-}, 120);
+<script lang="ts">
+	import { createEventDispatcher, onMount, type ComponentProps } from 'svelte'
+	import { Editor } from '@tiptap/core'
+	import debounce from 'debounce'
+
+	import { jsonParse } from '../../../utils/jsonParse.js'
+	import { FormControl } from '../index.js'
+	import ToolsBar from './ToolsBar.svelte'
+	import { extensions } from './extensions.js'
+
+	type $$Props = ComponentProps<FormControl> & { value?: string; classToolbar?: string }
+
+	export let value = ''
+	export let classToolbar = ''
+
+	let element: HTMLDivElement
+	let editor: Editor | null = null
+
+	const dispatch = createEventDispatcher<{ change: void }>()
+
+	onMount(() => {
+		initEditor()
+		return () => {
+			if (editor) editor.destroy()
+		}
+	})
+
+	function initEditor() {
+		const valueAsHtml = !value.startsWith('{') && value !== 'null'
+		editor = new Editor({
+			element,
+			content: valueAsHtml ? value : jsonParse(value, undefined),
+			editorProps: {
+				attributes: {
+					class: 'prose max-w-[210mm] mx-auto focus:outline-none'
+				}
+			},
+			extensions,
+			onTransaction() {
+				editor = editor
+				updateValue()
+			}
+		})
+	}
+
+	const updateValue = debounce(() => {
+		if (!editor) return
+		const newValue = JSON.stringify(editor.getJSON())
+		if (newValue === value) return
+		value = newValue
+		dispatch('change')
+	}, 120)
 </script>
 
-<FormControl {...$$restProps} let:key>
-	<div class="bordered relative rounded-lg border">
-		{#if editor}
-			<ToolsBar {editor} class={classToolbar} />
+<FormControl {...$$restProps}>
+	{#snippet children({ key })}
+		<div class="bordered relative rounded-lg border">
+			{#if editor}
+				<ToolsBar {editor} class={classToolbar} />
+			{/if}
+			<div bind:this={element} class="min-h-[20rem] p-4 pb-10"></div>
+		</div>
+		{#if key}
+			<input type="hidden" name={key} {value} />
 		{/if}
-		<div bind:this={element} class="min-h-[20rem] p-4 pb-10" />
-	</div>
-	{#if key}
-		<input type="hidden" name={key} {value} />
-	{/if}
+	{/snippet}
 </FormControl>

package/dist/ui/input/textRich/InputTextRich.svelte.d.ts

@@ -4,13 +4,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;
     } & {
         value?: string | undefined;
         classToolbar?: string | undefined;

package/dist/ui/input/textRich/SuggesionList.svelte

@@ -1,12 +1,16 @@
-<script>import { SelectorList } from "../index.js";
-export let props;
-export let keyDownEvent = void 0;
-function handleSelect(index) {
-  const item = props.items[index];
-  if (!item)
-    return;
-  props.command(item);
-}
+<script lang="ts">
+	import type { SuggestionProps } from '@tiptap/suggestion'
+	import { SelectorList } from '../index.js'
+	import type { SuggestionItem } from './suggestion.js'
+
+	export let props: SuggestionProps<SuggestionItem>
+	export let keyDownEvent: KeyboardEvent | undefined = undefined
+
+	function handleSelect(index: number) {
+		const item = props.items[index]
+		if (!item) return
+		props.command(item)
+	}
 </script>
 
 <SelectorList

package/dist/ui/input/textRich/ToolMark.svelte

@@ -1,12 +1,15 @@
-<script>import { Icon } from "../../icon/index.js";
-import { tip } from "../../../action/tip.js";
-export let editor;
-export let key;
-export let label;
-export let icon;
-export let action;
-$:
-  isActive = editor.isActive(key);
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { Icon } from '../../icon/index.js'
+	import { tip } from '../../../action/tip.js'
+
+	export let editor: Editor
+	export let key: string
+	export let label: string
+	export let icon: string
+	export let action: () => void
+
+	$: isActive = editor.isActive(key)
 </script>
 
 <button

package/dist/ui/input/textRich/ToolMarkColor.svelte

@@ -1,14 +1,18 @@
-<script>import { Icon } from "../../icon/index.js";
-import { tip } from "../../../action/tip.js";
-export let icon;
-export let label;
-export let color;
-export let setColor;
-let inputColor;
-function handleClick() {
-  inputColor.click();
-  setColor(color);
-}
+<script lang="ts">
+	import { Icon } from '../../icon/index.js'
+	import { tip } from '../../../action/tip.js'
+
+	export let icon: string
+	export let label: string
+	export let color: string
+	export let setColor: (color: string) => void
+
+	let inputColor: HTMLInputElement
+
+	function handleClick() {
+		inputColor.click()
+		setColor(color)
+	}
 </script>
 
 <div class="flex align-bottom">
@@ -25,7 +29,7 @@ function handleClick() {
 			<span
 				class="badge indicator-item badge-xs scale-75 border transition-none"
 				style:background={color}
-			/>
+			></span>
 			<Icon path={icon} size={19} class="opacity-70" />
 		</div>
 	</button>