fuma 0.1.13 → 0.1.16

package/dist/ui/drawer/Drawer.svelte

@@ -0,0 +1,70 @@
+<script>import { onDestroy } from "svelte";
+import { fade, fly } from "svelte/transition";
+import { mdiClose } from "@mdi/js";
+import { goto } from "$app/navigation";
+import { urlParam } from "../../store/param.js";
+import { Icon } from "../index.js";
+import { subscibeDrawerLayers } from "./layers.js";
+export let title = "";
+export let key;
+export let value = "1";
+let klass = "";
+export { klass as class };
+export let maxWidth = "32rem";
+export function open() {
+  goto($urlParam.with({ key: value }), { replaceState: true });
+}
+export function close() {
+  console.log("close");
+  goto($urlParam.without(key), { replaceState: true });
+}
+const { offset, destroy, isActive } = subscibeDrawerLayers(key, value);
+onDestroy(destroy);
+</script>
+
+<svelte:head>
+	{#if $isActive}
+		<style>
+			:root {
+				scrollbar-width: none;
+			}
+		</style>
+	{/if}
+</svelte:head>
+
+{#if $isActive}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		on:click={close}
+		on:keyup={close}
+		transition:fade={{ duration: 200 }}
+		class="
+			fixed inset-0 z-10 bg-black/25 backdrop-blur-[1.5px]
+			 dark:bg-white/25"
+	/>
+
+	<aside
+		transition:fly|local={{ x: 500, duration: 200 }}
+		style="max-width: min(100%, {maxWidth}); transform: translateX({-$offset * 4}rem);"
+		class="{klass}
+      fixed bottom-0 right-0 top-0 z-10 flex
+			flex-col overflow-y-scroll bg-base-100 transition-transform
+    "
+	>
+		<div
+			class="
+				sticky top-0 z-10 flex items-center
+				justify-between gap-32 border-b bg-base-100 p-4 pl-8
+			"
+		>
+			<h2 class="title">{title}</h2>
+			<button on:click={close} class="btn btn-square btn-sm">
+				<Icon path={mdiClose} title="annuler" />
+			</button>
+		</div>
+
+		<div class="grow">
+			<slot />
+		</div>
+	</aside>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        /** Key used in url query params */ key: string;
+        /** Value need to match in url query params*/ value?: string | undefined;
+        class?: string | undefined;
+        maxWidth?: string | undefined;
+        open?: (() => void) | undefined;
+        close?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
+    get open(): () => void;
+    get close(): () => void;
+}
+export {};

package/dist/ui/drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/ui/drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/ui/drawer/layers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+import { type Readable } from 'svelte/store';
+export declare function subscibeDrawerLayers(key: string, value: string): {
+    isActive: Readable<boolean>;
+    offset: Readable<number>;
+    destroy(): void;
+};

package/dist/ui/drawer/layers.js

@@ -0,0 +1,34 @@
+import { derived, writable } from 'svelte/store';
+import { page } from '$app/stores';
+const layers = writable([]);
+const layersOffset = derived(layers, (ids) => {
+    const nbDrawer = ids.length;
+    return ids.reduce((acc, id, index) => {
+        const drawerOffset = nbDrawer - index - 1;
+        return { ...acc, [id]: drawerOffset };
+    }, {});
+});
+export function subscibeDrawerLayers(key, value) {
+    const layerId = Math.random().toString().slice(2, 12);
+    const isActive = derived(page, ({ url }) => url.searchParams.get(key) === value);
+    const isActiveUnsubscribe = isActive.subscribe((_isActive) => {
+        if (_isActive)
+            layers.update((ids) => [...ids, layerId]);
+        else
+            removeLayer();
+    });
+    function removeLayer() {
+        layers.update((ids) => {
+            const index = ids.indexOf(layerId);
+            return ids.toSpliced(index, 1);
+        });
+    }
+    return {
+        isActive,
+        offset: derived(layersOffset, (drawers) => drawers[layerId]),
+        destroy() {
+            removeLayer();
+            isActiveUnsubscribe();
+        }
+    };
+}

package/dist/ui/form/Form.svelte

@@ -0,0 +1,96 @@
+<script>import {
+  initData,
+  getFieldType
+} from "./form.js";
+import { createEventDispatcher, onMount } from "svelte";
+import { fade } from "svelte/transition";
+import { page } from "$app/stores";
+import { useForm } from "../../validation/form.js";
+import Input from "./Input.svelte";
+import FormSection from "./FormSection.svelte";
+let klass = "";
+export { klass as class };
+export let classSection = "";
+export let fields = [];
+export let sections = [{}];
+export let data = initData(fields);
+export let action = "";
+export let actionDelete = "";
+export let actionPrefix = "";
+export let successMessage = "Succ\xE8s";
+export function set(key, value) {
+  data[key] = value;
+}
+const dispatch = createEventDispatcher();
+const { enhance } = useForm({
+  onSuccess(action2, data2) {
+    dispatch("success", { action: action2, data: data2 });
+  },
+  successMessage
+});
+onMount(lookupValueFromParams);
+function lookupValueFromParams() {
+  fields.flat().forEach(({ key }) => {
+    if (data[key])
+      return;
+    const value = $page.url.searchParams.get(key);
+    if (value)
+      data[key] = value;
+  });
+}
+const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === void 0 ? !!bool : !!bool(_data);
+</script>
+
+<form
+	method="post"
+	action="{actionPrefix}{action}"
+	enctype="multipart/form-data"
+	class="{klass} flex flex-col gap-4"
+	use:enhance
+>
+	{#if data.id}
+		<input type="hidden" name="id" value={data.id} />
+	{/if}
+
+	{#each fields as groupFields, groupIndex}
+		{@const section = sections[groupIndex] || {}}
+		{#if !getBoolean(section?.hide)(data)}
+			<div class="contents" in:fade|local={{ duration: 200 }}>
+				<FormSection {...section} class="{classSection} {section.class || ''} max-w-full">
+					<div class="grid grid-cols-4 gap-x-4 gap-y-2">
+						{#each groupFields as field (field.key)}
+							{#if !getBoolean(field.hide)(data)}
+								{@const inputType = getFieldType(field)}
+								<div
+									style={`grid-column: span ${field.colSpan || 2};`}
+									in:fade|local={{ duration: 200 }}
+								>
+									<Input
+										key={field.key}
+										type={inputType}
+										bind:value={data[field.key]}
+										{...field[inputType]}
+									/>
+								</div>
+							{/if}
+						{/each}
+					</div>
+				</FormSection>
+			</div>
+		{/if}
+	{/each}
+
+	<div class="sticky bottom-0 col-span-full mt-2 flex gap-2 border-t px-4 py-4 backdrop-blur-sm">
+		{#if actionDelete}
+			<button
+				class="btn-ghos btn text-error"
+				type="button"
+				formaction="{actionPrefix}{actionDelete}"
+			>
+				Supprimer
+			</button>
+		{/if}
+		<div class="grow" />
+		<button class="btn btn-primary"> Valider </button>
+	</div>
+</form>

package/dist/ui/form/FormSection.svelte

@@ -0,0 +1,71 @@
+<script>import { slide } from "svelte/transition";
+import { mdiChevronRight } from "@mdi/js";
+import { Icon } from "../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>
+
+<div>
+	{#if isReducible && isActive}
+		<div class="h-4" transition:slide></div>
+	{/if}
+
+	<section class="{klass} flex flex-col bg-base-100">
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			on:click={open}
+			on:keyup={open}
+			class="flex items-center gap-2 py-2
+				{isReducible && !isActive ? 'cursor-pointer rounded-lg hover:bg-base-200/40' : ''}
+			"
+			class:rounded-lg={!isActive}
+			class:border={isReducible && !isActive}
+		>
+			<slot name="title">
+				{#if isReducible || title}
+					<h2
+						class="title-md origin-left pl-1 transition-transform"
+						class:translate-x-4={isReducible && !isActive}
+						class:scale-105={isReducible && isActive}
+					>
+						{title}
+					</h2>
+				{/if}
+			</slot>
+			{#if isReducible}
+				<div class="grow" />
+				<button
+					type="button"
+					on:click={toggle}
+					class="btn btn-square btn-ghost btn-sm transition-transform"
+					class:-translate-x-2={isReducible && !isActive}
+				>
+					<Icon path={mdiChevronRight} class="transition-transform {isActive ? 'rotate-90' : ''}" />
+				</button>
+			{/if}
+		</div>
+
+		{#if !isReducible || isActive}
+			<div transition:slide|local={{ duration: 200 }} class="{contentClass} grow py-4">
+				<slot />
+			</div>
+		{:else}
+			<div class="hidden"><slot /></div>
+		{/if}
+	</section>
+
+	{#if isReducible && isActive}
+		<div class="h-8" transition:slide></div>
+	{/if}
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isActive?: boolean | undefined;
+        class?: string | undefined;
+        contentClass?: string | undefined;
+    } & ({
+        isReducible: true;
+        title: string;
+    } | {
+        isReducible?: false | undefined;
+        title?: string | undefined;
+    });
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export type FormSectionProps = typeof __propDef.props;
+export type FormSectionEvents = typeof __propDef.events;
+export type FormSectionSlots = typeof __propDef.slots;
+export default class FormSection extends SvelteComponent<FormSectionProps, FormSectionEvents, FormSectionSlots> {
+}
+export {};

package/dist/ui/form/Input.svelte

@@ -0,0 +1,41 @@
+<script context="module">import {
+  InputText,
+  InputTextarea,
+  InputBoolean,
+  InputDate,
+  InputDatetime,
+  InputNumber,
+  InputPassword,
+  InputRadio,
+  InputSelect,
+  InputRelation,
+  InputRelations
+} from "../input/index.js";
+export const inputs = {
+  text: InputText,
+  textarea: InputTextarea,
+  boolean: InputBoolean,
+  date: InputDate,
+  datetime: InputDatetime,
+  number: InputNumber,
+  password: InputPassword,
+  radio: InputRadio,
+  select: InputSelect,
+  relation: InputRelation,
+  relations: InputRelations
+};
+export const inputsType = Object.keys(inputs);
+export function relationProps(props) {
+  return props;
+}
+export function relationsProps(props) {
+  return props;
+}
+</script>
+
+<script>let inputType;
+export { inputType as type };
+export let value;
+</script>
+
+<svelte:component this={inputs[inputType]} bind:value {...$$restProps} />

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

@@ -0,0 +1,24 @@
+import type { z } from 'zod';
+import type { ComponentProps } from 'svelte';
+import { type InputsProps, type InputsType } from './Input.svelte';
+import type FormSection from './FormSection.svelte';
+type Shape = z.ZodRawShape;
+type PickOne<T> = {
+    [P in keyof T]: Record<P, T[P]> & Partial<Record<Exclude<keyof T, P>, undefined>>;
+}[keyof T];
+export type BoolOrFunction<M extends Shape> = boolean | ((data: FormData<M>) => unknown);
+export type FormData<M extends Shape> = Partial<z.infer<z.ZodObject<M>>>;
+export type FormField<M extends Shape> = {
+    key: string & keyof M;
+    /** number col used by field */
+    colSpan?: number;
+    /** hide field if true */
+    hide?: BoolOrFunction<M>;
+} & PickOne<InputsProps>;
+export type FormSectionProps<M extends Shape> = ComponentProps<FormSection> & {
+    /** hide group if true */
+    hide?: BoolOrFunction<M>;
+};
+export declare function initData<M extends Shape>(fields: FormField<M>[][]): FormData<M>;
+export declare function getFieldType<M extends Shape>(field: FormField<M>): InputsType;
+export {};

package/dist/ui/form/form.js

@@ -0,0 +1,15 @@
+import { inputsType } from './Input.svelte';
+export function initData(fields) {
+    // @ts-ignore
+    return fields.flat().reduce((acc, cur) => {
+        const inputType = getFieldType(cur);
+        // @ts-ignore
+        return { ...acc, [cur.key]: cur[inputType]?.value };
+    }, {});
+}
+export function getFieldType(field) {
+    const inputType = inputsType.find((t) => field[t]);
+    if (!inputType)
+        return 'text';
+    return inputType;
+}

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

@@ -0,0 +1,2 @@
+export { default as Input, relationProps, relationsProps } from './Input.svelte';
+export { default as Form } from './Form.svelte';

package/dist/ui/form/index.js

@@ -0,0 +1,2 @@
+export { default as Input, relationProps, relationsProps } from './Input.svelte';
+export { default as Form } from './Form.svelte';

package/dist/ui/index.d.ts

@@ -1,9 +1,11 @@
-export * from './menu/index.js';
-export * from './tabs/index.js';
 export * from './card/index.js';
+export * from './drawer/index.js';
+export * from './form/index.js';
 export * from './input/index.js';
-export * from './table/index.js';
+export * from './menu/index.js';
 export * from './period/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
 export { default as ButtonCopy } from './ButtonCopy.svelte';
 export { default as ButtonDelete } from './ButtonDelete.svelte';
 export { default as Dialog } from './Dialog.svelte';

package/dist/ui/index.js

@@ -1,9 +1,11 @@
-export * from './menu/index.js';
-export * from './tabs/index.js';
 export * from './card/index.js';
+export * from './drawer/index.js';
+export * from './form/index.js';
 export * from './input/index.js';
-export * from './table/index.js';
+export * from './menu/index.js';
 export * from './period/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
 export { default as ButtonCopy } from './ButtonCopy.svelte';
 export { default as ButtonDelete } from './ButtonDelete.svelte';
 export { default as Dialog } from './Dialog.svelte';

package/dist/ui/input/InputCombo.svelte

@@ -3,6 +3,8 @@ import { parseOptions } from "../../utils/options.js";
 import { FormControl, DropDown, Icon, SelectorList } from "../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;
@@ -44,8 +46,9 @@ async function select(index = focusIndex) {
 						on:blur={() => (searchValue = '')}
 						on:input={(e) => filterOptions(e.currentTarget.value)}
 						autocomplete="off"
-						class="input input-bordered grow"
-						{...input}
+						size={1}
+						class="input input-bordered grow {inputClass || {}}"
+						{...inputProps}
 					/>
 				</div>
 				<slot name="append" />

package/dist/ui/input/InputDate.svelte

@@ -3,6 +3,8 @@ import dayjs from "dayjs";
 import { FormControl } from "./index.js";
 $:
   ({ input, value: _value, ...props } = $$props);
+$:
+  ({ class: inputClass, ...inputProps } = input || {});
 export let value = _value;
 const dispatch = createEventDispatcher();
 const handleInput = ({ currentTarget }) => {
@@ -20,7 +22,8 @@ const handleInput = ({ currentTarget }) => {
 		type="date"
 		name={key}
 		id={key}
-		class="input input-bordered"
-		{...input}
+		size={1}
+		class="input input-bordered {inputClass || {}}"
+		{...inputProps}
 	/>
 </FormControl>

package/dist/ui/input/InputDatetime.svelte

@@ -1,6 +1,8 @@
 <script>import { FormControl } from "./index.js";
 $:
   ({ input, value: _value, ...props } = $$props);
+$:
+  ({ class: inputClass, ...inputProps } = input || {});
 export let value = _value;
 </script>
 
@@ -15,7 +17,8 @@ export let value = _value;
 		on:blur
 		type="datetime-local"
 		id={key}
-		class="input input-bordered"
-		{...input}
+		size={1}
+		class="input input-bordered {inputClass || {}}"
+		{...inputProps}
 	/>
 </FormControl>

package/dist/ui/input/InputNumber.svelte

@@ -1,6 +1,8 @@
 <script>import { FormControl } from "./index.js";
 $:
   ({ input, value: _value, ...props } = $$props);
+$:
+  ({ class: inputClass, ...inputProps } = input || {});
 export let value = _value;
 </script>
 
@@ -15,8 +17,9 @@ export let value = _value;
 		type="number"
 		name={key}
 		id={key}
-		class="input input-bordered"
+		size={1}
 		inputmode="numeric"
-		{...input}
+		class="input input-bordered {inputClass || ''}"
+		{...inputProps}
 	/>
 </FormControl>

package/dist/ui/input/InputRelation.svelte

@@ -77,6 +77,7 @@ async function handleBlur() {
 						autocomplete="off"
 						{placeholder}
 						class="grow"
+						size={1}
 					/>
 
 					<RelationAfter {isLoading} {createUrl} {createTitle} />

package/dist/ui/input/InputRelations.svelte

@@ -116,6 +116,7 @@ async function handleBlur() {
 							autocomplete="off"
 							{placeholder}
 							class="grow"
+							size={1}
 						/>
 
 						<RelationAfter {isLoading} {createUrl} {createTitle} />

package/dist/ui/input/InputSelect.svelte

@@ -3,7 +3,7 @@ import { SelectorList, DropDown, Icon, FormControl } from "../index.js";
 import { parseOptions } from "../../utils/options.js";
 import { mdiUnfoldMoreHorizontal } from "@mdi/js";
 $:
-  ({ input, value: _value, options, tippyProps, placeholder, ...props } = $$props);
+  ({ value: _value, options, tippyProps, placeholder, ...props } = $$props);
 export let value = _value;
 $:
   _options = parseOptions(options);

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

@@ -3,7 +3,7 @@ import { type InputProps } from '../index.js';
 import { type Options } from '../../utils/options.js';
 import type { TippyProps } from '../../index.js';
 declare const __propDef: {
-    props: Omit<InputProps, "inputElement"> & {
+    props: Omit<InputProps, "input" | "inputElement"> & {
         options: Options;
         tippyProps?: TippyProps | undefined;
         placeholder?: string | undefined;

package/dist/ui/input/InputText.svelte

@@ -1,10 +1,10 @@
 <script>import { FormControl, bindValueWithParams } from "./index.js";
 $:
   ({ input, value: _value, wrapperClass, bindWithParams, ...props } = $$props);
-export let value = _value;
-export let inputElement = void 0;
 $:
   ({ class: inputClass, ...inputProps } = input || {});
+export let value = _value;
+export let inputElement = void 0;
 </script>
 
 <FormControl {...props} enhanceDisabled={props.enhanceDisabled || bindWithParams} let:key>
@@ -24,6 +24,7 @@ $:
 			type="text"
 			name={key}
 			id={key}
+			size={1}
 			class="input input-bordered w-full {inputClass || ''}"
 			{...inputProps}
 		/>

package/dist/ui/input/InputTextarea.svelte

@@ -1,6 +1,8 @@
 <script>import { FormControl } from "./index.js";
 $:
   ({ textarea, value: _value, ...props } = $$props);
+$:
+  ({ class: inputClass, ...inputProps } = textarea || {});
 export let value = _value;
 </script>
 
@@ -13,8 +15,8 @@ export let value = _value;
 		on:blur
 		name={key}
 		id={key}
-		class="textarea textarea-bordered"
+		class="textarea textarea-bordered {inputClass || ''}"
 		rows="4"
-		{...textarea}
+		{...inputProps}
 	/>
 </FormControl>

package/dist/ui/input/InputTime.svelte

@@ -1,6 +1,8 @@
 <script>import { FormControl } from "./index.js";
 $:
   ({ input, value: _value, ...props } = $$props);
+$:
+  ({ class: inputClass, ...inputProps } = input || {});
 export let value = _value;
 </script>
 
@@ -13,7 +15,8 @@ export let value = _value;
 		type="time"
 		name={key}
 		id={key}
-		class="input input-bordered"
-		{...input}
+		size={1}
+		class="input input-bordered {inputClass || ''}"
+		{...inputProps}
 	/>
 </FormControl>

package/dist/ui/table/field.d.ts

@@ -49,7 +49,7 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     $visible: boolean;
     key: string;
     label: string;
-    type: "string" | "number" | "boolean" | "textarea" | "date";
+    type: "string" | "number" | "boolean" | "date" | "textarea";
     options?: Options | undefined;
     hint?: string | undefined;
     locked?: boolean | undefined;

package/dist/validation/form.js

@@ -30,6 +30,10 @@ export function useForm({ onSubmit, onSuccess, onResetError, onError, onFail, su
                 }
                 setError[key](issue.message);
             });
+            const issuesKeys = issues
+                .map(({ path }) => path[0])
+                .filter((k, i, self) => self.indexOf(k) === i);
+            toast.warning('Invalid form', { description: issuesKeys.join(', ') });
         }
         if (message) {
             toast.warning(message);

package/dist/validation/zod.d.ts

@@ -164,7 +164,7 @@ export declare const z: {
         map: "map";
         set: "set";
     };
-    getParsedType: (data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "map" | "set" | "nan" | "integer" | "float" | "date" | "null" | "array" | "unknown" | "promise" | "void" | "never";
+    getParsedType: (data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "nan" | "integer" | "float" | "date" | "null" | "array" | "unknown" | "promise" | "void" | "never" | "map" | "set";
     ZodType: typeof zod.ZodType;
     ZodString: typeof zod.ZodString;
     ZodNumber: typeof zod.ZodNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",