fuma 0.5.0 → 1.0.0

package/dist/private/Meta.svelte

@@ -1,30 +1,35 @@
-<script>import {} from "svelte";
-import { slide } from "svelte/transition";
-import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
-import { Card } from "../ui/card/index.js";
-import { Table } from "../ui/table/index.js";
-import { Icon } from "../ui/icon/index.js";
-export let name = "";
-export let description = "";
-export let component;
-let props = [];
-let isPropsVisible = false;
-$:
-  initMeta(component);
-function initMeta(c) {
-  if (!c)
-    return;
-  updateComponentMeta(c);
-  component.$$.after_update.push(() => updateComponentMeta(c));
-}
-function updateComponentMeta(c) {
-  const ctx = c.$$.ctx;
-  const propsIndex = Object.entries(c.$$.props);
-  props = propsIndex.map(([id, index]) => ({
-    id,
-    value: ctx[index]
-  }));
-}
+<script lang="ts">
+	import { type SvelteComponent } from 'svelte'
+	import { slide } from 'svelte/transition'
+	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js'
+	import { Card } from '../ui/card/index.js'
+	import { Table } from '../ui/table/index.js'
+	import { Icon } from '../ui/icon/index.js'
+
+	export let name = ''
+	export let description = ''
+	export let component: SvelteComponent
+
+	type Props = { id: string; value: string }[]
+	let props: Props = []
+	let isPropsVisible = false
+
+	$: initMeta(component)
+
+	function initMeta(c: SvelteComponent | undefined) {
+		if (!c) return
+		updateComponentMeta(c)
+		component.$$.after_update.push(() => updateComponentMeta(c))
+	}
+
+	function updateComponentMeta(c: SvelteComponent) {
+		const ctx = c.$$.ctx
+		const propsIndex = Object.entries<number>(c.$$.props)
+		props = propsIndex.map(([id, index]) => ({
+			id,
+			value: ctx[index] as string
+		}))
+	}
 </script>
 
 <Card class="mx-auto mb-6 max-w-4xl">

package/dist/private/Meta.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         name?: string | undefined;
         description?: string | undefined;
         component: SvelteComponent;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/private/api.d.ts

@@ -29,7 +29,7 @@ export declare const apiConfig: {
         };
     };
 };
-export declare const api: import("../api/config.js").ApiClient<Prisma.TypeMap<import("@prisma/client/runtime/library").DefaultArgs>, {
+export declare const api: import("../api/config.js").ApiClient<Prisma.TypeMap<import("@prisma/client/runtime/library").DefaultArgs, {}>, {
     Tag: (search: string) => {
         where: {
             name: {

package/dist/ui/badge/Badge.svelte

@@ -1,6 +1,7 @@
-<script>let klass = "";
-export { klass as class };
-export let content;
+<script lang="ts">
+	let klass = ''
+	export { klass as class }
+	export let content: string
 </script>
 
 <span class="badge mr-1 whitespace-nowrap {klass}">

package/dist/ui/button/ButtonCopy.svelte

@@ -1,33 +1,39 @@
-<script>import { mdiClipboardTextOutline } from "@mdi/js";
-import { toast } from "svelte-sonner";
-import { Icon } from "../icon/index.js";
-let valueOrGetValue;
-export { valueOrGetValue as value };
-export let title = "";
-export let icon = mdiClipboardTextOutline;
-export let successMessage = "Copied";
-let isLoading = false;
-async function loadValue() {
-  if (typeof valueOrGetValue === "string")
-    return valueOrGetValue;
-  return valueOrGetValue();
-}
-async function handleClick() {
-  if (isLoading)
-    return;
-  isLoading = true;
-  const value = await loadValue().finally(() => isLoading = false);
-  navigator.clipboard.writeText(value).then(() => {
-    toast.success(successMessage);
-  }).catch((error) => {
-    toast.error(error);
-  });
-}
+<script lang="ts">
+	import { mdiClipboardTextOutline } from '@mdi/js'
+	import { toast } from 'svelte-sonner'
+	import { Icon } from '../icon/index.js'
+	let valueOrGetValue: string | (() => Promise<string>)
+	export { valueOrGetValue as value }
+	export let title = ''
+	export let icon = mdiClipboardTextOutline
+	export let successMessage = 'Copied'
+
+	let isLoading = false
+
+	async function loadValue(): Promise<string> {
+		if (typeof valueOrGetValue === 'string') return valueOrGetValue
+		return valueOrGetValue()
+	}
+
+	async function handleClick() {
+		if (isLoading) return
+		isLoading = true
+		const value = await loadValue().finally(() => (isLoading = false))
+
+		navigator.clipboard
+			.writeText(value)
+			.then(() => {
+				toast.success(successMessage)
+			})
+			.catch((error) => {
+				toast.error(error)
+			})
+	}
 </script>
 
 <div class="relative">
 	{#if isLoading}
-		<span class="loading loading-spinner absolute left-1 top-1 scale-125 opacity-25" />
+		<span class="loading loading-spinner absolute left-1 top-1 scale-125 opacity-25"></span>
 	{/if}
 	<button
 		class="btn btn-square btn-sm"

package/dist/ui/button/ButtonDelete.svelte

@@ -1,24 +1,26 @@
-<script>let klass = "";
-export { klass as class };
-export let formaction;
-export let disabled = false;
-export let btn = true;
-let button;
-let width = 0;
-let ready = false;
-let timeout;
-function handleClick(event) {
-  if (ready)
-    return;
-  width = button.offsetWidth;
-  event.preventDefault();
-  ready = true;
-  timeout = setTimeout(() => ready = false, 2e3);
-}
-function handleLeave() {
-  ready = false;
-  clearTimeout(timeout);
-}
+<script lang="ts">
+	let klass = ''
+	export { klass as class }
+	export let formaction: string
+	export let disabled = false
+	export let btn = true
+
+	let button: HTMLButtonElement
+	let width = 0
+	let ready = false
+	let timeout: NodeJS.Timeout
+	function handleClick(event: MouseEvent) {
+		if (ready) return
+		width = button.offsetWidth
+		event.preventDefault()
+		ready = true
+		timeout = setTimeout(() => (ready = false), 2000)
+	}
+
+	function handleLeave() {
+		ready = false
+		clearTimeout(timeout)
+	}
 </script>
 
 <button

package/dist/ui/button/ButtonDelete.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         formaction: string;
         disabled?: boolean | undefined;
         btn?: boolean | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/card/Card.svelte

@@ -1,13 +1,16 @@
-<script>import { mdiArrowLeft } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { contextContainer } from "../context.js";
-let klass = "";
-export { klass as class };
-export let bodyClass = "";
-export let headerClass = "";
-export let returnUrl = "";
-export let style = "";
-contextContainer.set("card");
+<script lang="ts">
+	import { mdiArrowLeft } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+	import { contextContainer } from '../context.js'
+
+	let klass = ''
+	export { klass as class }
+	export let bodyClass = ''
+	export let headerClass = ''
+	export let returnUrl = ''
+	export let style = ''
+
+	contextContainer.set('card')
 </script>
 
 <div class="card bordered border bg-base-100 shadow-lg {klass}" {style}>

package/dist/ui/card/Card.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         headerClass?: string | undefined;
         returnUrl?: string | undefined;
         style?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/card/CardBasic.svelte

@@ -1,7 +1,8 @@
-<script>export let title = "";
-let klass = "";
-export { klass as class };
-export let style = "";
+<script lang="ts">
+	export let title = ''
+	let klass = ''
+	export { klass as class }
+	export let style = ''
 </script>
 
 <div class="{klass} bg-base-100 border rounded-lg p-2 sm:p-5" {style}>

package/dist/ui/card/CardBasic.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         title?: string | undefined;
         class?: string | undefined;
         style?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/card/CardCollapse.svelte

@@ -1,34 +1,38 @@
-<script>import { onDestroy } from "svelte";
-import { slide } from "svelte/transition";
-import { mdiChevronRight } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { urlParam } from "../../store/index.js";
-import { goto } from "$app/navigation";
-export let value;
-let klass = "";
-export { klass as class };
-export let classHeader = "";
-export let classBody = "";
-export let classTitle = "";
-$:
-  isOpen = $urlParam.hasValue("section", value);
-let header;
-let timeout;
-async function handleClick(event) {
-  if (isClickOnInteractiveElement(event))
-    return;
-  await goto($urlParam.toggle({ section: value }), { noScroll: true, keepFocus: true });
-}
-function isClickOnInteractiveElement(event) {
-  if (!event)
-    return false;
-  const target = event.target;
-  const elements = [...header.querySelectorAll("a, button")];
-  return !!elements.filter((element) => element.contains(target)).length;
-}
-onDestroy(() => {
-  clearTimeout(timeout);
-});
+<script lang="ts">
+	import { onDestroy } from 'svelte'
+	import { slide } from 'svelte/transition'
+	import { mdiChevronRight } from '@mdi/js'
+
+	import { Icon } from '../icon/index.js'
+	import { urlParam } from '../../store/index.js'
+	import { goto } from '$app/navigation'
+
+	export let value: string
+	let klass = ''
+	export { klass as class }
+	export let classHeader = ''
+	export let classBody = ''
+	export let classTitle = ''
+
+	$: isOpen = $urlParam.hasValue('section', value)
+	let header: HTMLDivElement
+
+	let timeout: NodeJS.Timeout
+	async function handleClick(event: MouseEvent | null) {
+		if (isClickOnInteractiveElement(event)) return
+		await goto($urlParam.toggle({ section: value }), { noScroll: true, keepFocus: true })
+	}
+
+	function isClickOnInteractiveElement(event: MouseEvent | null) {
+		if (!event) return false
+		const target = event.target as HTMLElement
+		const elements = [...header.querySelectorAll('a, button')]
+		return !!elements.filter((element) => element.contains(target)).length
+	}
+
+	onDestroy(() => {
+		clearTimeout(timeout)
+	})
 </script>
 
 <section class="card bordered border bg-base-100 shadow-md {klass}">

package/dist/ui/card/CardCollapse.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         classHeader?: string | undefined;
         classBody?: string | undefined;
         classTitle?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/card/CardFullScreen.svelte

@@ -1,9 +1,11 @@
-<script>import { mdiArrowCollapse, mdiArrowExpand } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { Card } from "./index.js";
-export let isFullScreen = false;
-let klass = "";
-export { klass as class };
+<script lang="ts">
+	import { mdiArrowCollapse, mdiArrowExpand } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+	import { Card } from './index.js'
+
+	export let isFullScreen = false
+	let klass = ''
+	export { klass as class }
 </script>
 
 <Card

package/dist/ui/card/CardFullScreen.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         isFullScreen?: boolean | undefined;
         class?: string | undefined;
+        children?: import("svelte").Snippet<[{
+            isFullScreen: boolean;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/card/CardLink.svelte

@@ -1,7 +1,8 @@
-<script>export let href;
-export let title = "";
-let klass = "";
-export { klass as class };
+<script lang="ts">
+	export let href: string
+	export let title = ''
+	let klass = ''
+	export { klass as class }
 </script>
 
 <div

package/dist/ui/card/CardLink.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         href: string;
         title?: string | undefined;
         class?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/dialog/Dialog.svelte

@@ -1,37 +1,44 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { mdiClose } from "@mdi/js";
-import { Icon } from "../icon/index.js";
-import { contextContainer } from "../context.js";
-export let dialog;
-export let hideCloseButton = false;
-let klass = "";
-export { klass as class };
-const dispatch = createEventDispatcher();
-contextContainer.set("dialog");
-onMount(() => {
-  const inputsSelector = 'input:not([type=hidden], [tabindex="-1"])';
-  const inputs = dialog.querySelectorAll(inputsSelector);
-  const buttons = dialog.querySelectorAll("button");
-  inputs.forEach((input) => input.tabIndex = -1);
-  buttons.forEach((button) => button.tabIndex = -1);
-  function onDialogOpen() {
-    dispatch("open");
-    inputs.forEach((input) => input.tabIndex = 0);
-    buttons.forEach((button) => button.tabIndex = 0);
-    if (!inputs[0])
-      return;
-    inputs[0].focus();
-    inputs[0].select();
-  }
-  function onDialogClose() {
-    dispatch("close");
-    inputs.forEach((input) => input.tabIndex = -1);
-    buttons.forEach((button) => button.tabIndex = -1);
-  }
-  const observer = new MutationObserver(() => dialog.open ? onDialogOpen() : onDialogClose());
-  observer.observe(dialog, { attributeFilter: ["open"] });
-  return () => observer.disconnect();
-});
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+	import { mdiClose } from '@mdi/js'
+	import { Icon } from '../icon/index.js'
+	import { contextContainer } from '../context.js'
+
+	export let dialog: HTMLDialogElement
+	export let hideCloseButton = false
+	let klass = ''
+	export { klass as class }
+
+	const dispatch = createEventDispatcher<{ open: void; close: void }>()
+	contextContainer.set('dialog')
+
+	onMount(() => {
+		const inputsSelector = 'input:not([type=hidden], [tabindex="-1"])'
+		const inputs = dialog.querySelectorAll<HTMLInputElement>(inputsSelector)
+		const buttons = dialog.querySelectorAll<HTMLButtonElement>('button')
+
+		inputs.forEach((input) => (input.tabIndex = -1))
+		buttons.forEach((button) => (button.tabIndex = -1))
+
+		function onDialogOpen() {
+			dispatch('open')
+			inputs.forEach((input) => (input.tabIndex = 0))
+			buttons.forEach((button) => (button.tabIndex = 0))
+			if (!inputs[0]) return
+			inputs[0].focus()
+			inputs[0].select()
+		}
+
+		function onDialogClose() {
+			dispatch('close')
+			inputs.forEach((input) => (input.tabIndex = -1))
+			buttons.forEach((button) => (button.tabIndex = -1))
+		}
+
+		const observer = new MutationObserver(() => (dialog.open ? onDialogOpen() : onDialogClose()))
+		observer.observe(dialog, { attributeFilter: ['open'] })
+		return () => observer.disconnect()
+	})
 </script>
 
 <dialog bind:this={dialog} class="modal" tabindex="-1">

package/dist/ui/dialog/Dialog.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         dialog: HTMLDialogElement;
         hideCloseButton?: boolean | undefined;
         class?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         open: CustomEvent<void>;

package/dist/ui/dialog/DialogConfirm.svelte

@@ -1,7 +1,9 @@
-<script>import { Dialog } from "./index.js";
-let dialog;
-let klass = "";
-export { klass as class };
+<script lang="ts">
+	import { Dialog } from './index.js'
+
+	let dialog: HTMLDialogElement
+	let klass = ''
+	export { klass as class }
 </script>
 
 <button type="button" on:click={() => dialog.showModal()} class="btn btn-ghost {klass}">

package/dist/ui/dialog/DialogConfirm.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         class?: string | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/drawer/Drawer.svelte

@@ -1,40 +1,49 @@
-<script>import { onDestroy, onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { mdiClose } from "@mdi/js";
-import { goto } from "$app/navigation";
-import { urlParam } from "../../store/param.js";
-import { Icon } from "../icon/index.js";
-import { subscibeDrawerLayers } from "./layers.js";
-import { contextContainer } from "../context.js";
-import { drawerFly } from "./drawerFly.js";
-export let title = "";
-export let key;
-let klass = "";
-export { klass as class };
-export let maxWidth = "32rem";
-export let classHeader = "";
-export let classBody = "";
-export let duration = 180;
-export let noOverlay = false;
-export let transitionX = 0;
-export let zIndex = 50;
-export function open(value = 1, options = {}) {
-  return goto($urlParam.with({ [key]: value }), {
-    ...options,
-    replaceState: true,
-    noScroll: true
-  });
-}
-export function close(options = {}) {
-  return goto($urlParam.without(key), { ...options, replaceState: true, noScroll: true });
-}
-const { offset, index, destroy, isActive } = subscibeDrawerLayers(key);
-onDestroy(destroy);
-contextContainer.set("drawer");
-let clientWidth = 0;
-onMount(() => {
-  transitionX = $isActive ? clientWidth : 0;
-});
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import { mdiClose } from '@mdi/js'
+
+	import { goto } from '$app/navigation'
+	import { urlParam } from '../../store/param.js'
+	import { Icon } from '../icon/index.js'
+	import { subscibeDrawerLayers } from './layers.js'
+	import { contextContainer } from '../context.js'
+	import { drawerFly } from './drawerFly.js'
+
+	export let title = ''
+	/** Key used in url query params */
+	export let key: string
+
+	let klass = ''
+	export { klass as class }
+	export let maxWidth = '32rem'
+	export let classHeader = ''
+	export let classBody = ''
+	export let duration = 180
+	export let noOverlay = false
+	export let transitionX = 0
+	export let zIndex = 50
+
+	type GotoOptions = Parameters<typeof goto>[1]
+	export function open(value = 1, options: GotoOptions = {}) {
+		return goto($urlParam.with({ [key]: value }), {
+			...options,
+			replaceState: true,
+			noScroll: true
+		})
+	}
+	export function close(options: GotoOptions = {}) {
+		return goto($urlParam.without(key), { ...options, replaceState: true, noScroll: true })
+	}
+
+	const { offset, index, destroy, isActive } = subscibeDrawerLayers(key)
+	onDestroy(destroy)
+	contextContainer.set('drawer')
+	let clientWidth = 0
+
+	onMount(() => {
+		transitionX = $isActive ? clientWidth : 0
+	})
 </script>
 
 {#if !noOverlay && $isActive}
@@ -45,7 +54,7 @@ onMount(() => {
 		transition:fade={{ duration }}
 		style="z-index: {zIndex + $index};"
 		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
-	/>
+	></div>
 {/if}
 
 {#if $isActive}