fuma 0.3.35 → 0.3.37

package/dist/private/store.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+export declare let drawerTransitionX: import("svelte/store").Writable<number>;

package/dist/private/store.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export let drawerTransitionX = writable(0);

package/dist/ui/drawer/Drawer.svelte

@@ -1,11 +1,13 @@
 <script>import { onDestroy } from "svelte";
-import { fade, fly } from "svelte/transition";
+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";
+import { writable } from "svelte/store";
 export let title = "";
 export let key;
 let klass = "";
@@ -13,6 +15,9 @@ 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 function open(value = 1, options = {}) {
   return goto($urlParam.with({ [key]: value }), {
     ...options,
@@ -26,27 +31,40 @@ export function close(options = {}) {
 const { offset, index, destroy, isActive } = subscibeDrawerLayers(key);
 onDestroy(destroy);
 contextContainer.set("drawer");
+let clientWidth = 0;
 </script>
 
-{#if $isActive}
+{#if !noOverlay && $isActive}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		on:click={() => close()}
 		on:keyup={() => close()}
-		transition:fade={{ duration: 200 }}
+		transition:fade={{ duration }}
 		style="z-index: {10 + $index};"
 		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
 	/>
+{/if}
 
+{#if $isActive}
 	<aside
-		transition:fly|local={{ x: 500, duration: 200, opacity: 1 }}
+		bind:clientWidth
+		transition:drawerFly|local={{
+			x: clientWidth,
+			duration,
+			opacity: 1,
+			onTransition(pos) {
+				transitionX = pos.x
+			}
+		}}
 		style="
 			z-index: {10 + $index};
 			max-width: min(100%, {maxWidth});
 			transform: translateX({-$offset * 4}rem);
+			transition-duration: {duration}ms;
 		"
-		class="{klass}
-      fixed bottom-0 right-0 top-0 z-10 flex
+		class:border-l={noOverlay}
+		class="{klass} fixed
+      bottom-0 right-0 top-0 z-10 flex
 			w-full flex-col overflow-y-scroll bg-base-100
 			transition-transform
     "
@@ -54,10 +72,10 @@ contextContainer.set("drawer");
 		<div
 			class="{classHeader}
 				sticky top-0 z-20 flex items-center
-				justify-between gap-32 border-b bg-base-100 p-4 pl-8
+				justify-between gap-2 border-b bg-base-100 p-4 pl-8
 			"
 		>
-			<h2 class="title">{title}</h2>
+			<h2 class="title min-w-0 overflow-hidden">{title}</h2>
 			<button on:click={() => close()} class="btn btn-square btn-sm">
 				<Icon path={mdiClose} title="annuler" />
 			</button>

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

@@ -7,6 +7,9 @@ declare const __propDef: {
         maxWidth?: string | undefined;
         classHeader?: string | undefined;
         classBody?: string | undefined;
+        duration?: number | undefined;
+        noOverlay?: boolean | undefined;
+        transitionX?: number | undefined;
         open?: ((value?: number, options?: {
             replaceState?: boolean | undefined;
             noScroll?: boolean | undefined;

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

@@ -0,0 +1,10 @@
+/// <reference types="svelte" />
+import type { FlyParams, TransitionConfig } from 'svelte/transition';
+export type DrawerFlyParams = FlyParams & {
+    onTransition?: (pos: {
+        x: number;
+        y: number;
+    }) => unknown;
+};
+export declare function drawerFly(node: HTMLElement, { delay, duration, easing, x, y, opacity, onTransition }?: DrawerFlyParams): TransitionConfig;
+export declare function split_css_unit(value: number | string): [number, string];

package/dist/ui/drawer/drawerFly.js

@@ -0,0 +1,24 @@
+import { cubicOut } from 'svelte/easing';
+export function drawerFly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0, onTransition = () => { } } = {}) {
+    const style = getComputedStyle(node);
+    const target_opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const od = target_opacity * (1 - opacity);
+    const [xValue, xUnit] = split_css_unit(x);
+    const [yValue, yUnit] = split_css_unit(y);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t, u) => `
+			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
+			opacity: ${target_opacity - od * u}`,
+        tick: (t, u) => {
+            onTransition({ x: t * xValue, y: t * yValue });
+        }
+    };
+}
+export function split_css_unit(value) {
+    const split = typeof value === 'string' && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+    return split ? [parseFloat(split[1]), split[2] || 'px'] : [value, 'px'];
+}

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

@@ -1 +1,2 @@
 export { default as Drawer } from './Drawer.svelte';
+export * from './drawerFly.js';

package/dist/ui/drawer/index.js

@@ -1 +1,2 @@
 export { default as Drawer } from './Drawer.svelte';
+export * from './drawerFly.js';

package/dist/ui/form/Form.svelte

@@ -78,13 +78,13 @@ function lookupValueFromParams() {
 const actionPadding = getActionPadding();
 function getActionPadding() {
   const container = contextContainer.get();
-  if (container === "card")
-    return "-mx-2 sm:-mx-8 px-2 sm:px-8";
   if (container === "drawer")
-    return "-ml-8 -mr-4 pl-8 pr-4";
+    return "bottom-0 -ml-8 -mr-4 pl-8 pr-4";
+  if (container === "card")
+    return "-bottom-4 -mx-2 sm:-mx-8 px-2 sm:px-8";
   if (container === "dialog")
     return "-bottom-4 -mx-4 px-4";
-  return "";
+  return "bottom-0";
 }
 const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === void 0 ? !!bool : !!bool(_data);
 </script>
@@ -134,7 +134,7 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 	<div
 		class="
 			{classAction} {actionPadding}
-			sticky bottom-0 col-span-full mt-2 flex flex-row-reverse gap-2 border-t py-4 backdrop-blur-sm
+			sticky col-span-full mt-2 flex flex-row-reverse gap-2 border-t py-4 backdrop-blur-sm
 		"
 	>
 		<button class="btn btn-primary"> Valider </button>

package/dist/utils/eventEmitter.js

@@ -21,7 +21,6 @@ export function createEventEmitter() {
         emit(...args) {
             if (!events[args[0]])
                 events[args[0]] = [];
-            // @ts-ignore
             events[args[0]].forEach((callback) => callback(args[1]));
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.3.35",
+  "version": "0.3.37",
   "description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
   "author": {
     "name": "Jonas Voisard",