fuma 0.3.48 → 0.3.49

package/dist/ui/card/CardCollapse.svelte

@@ -3,59 +3,61 @@ 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 = "";
+export let classSubtitle = "";
 $:
   isOpen = $urlParam.hasValue("section", value);
-let card;
+let section;
 let timeout;
-function handleClick() {
+async function handleClick() {
+  await goto($urlParam.toggle({ section: value }), { noScroll: true, keepFocus: true });
+  if (!section)
+    return;
+  const bound = section.getBoundingClientRect();
+  window.scrollTo({ top: bound.top, behavior: "smooth" });
   timeout = setTimeout(() => {
-    if (!card)
-      return;
-    const bound = card.getBoundingClientRect();
-    window.scrollTo({ top: bound.top, behavior: "smooth" });
-  }, 250);
+  }, 225);
 }
 onDestroy(() => {
   clearTimeout(timeout);
 });
 </script>
 
-<div class="card bordered border bg-base-100 shadow-md {klass}" bind:this={card}>
-	<div class="flex gap-2">
-		<slot name="logo" />
-
-		<a
-			id={value}
-			class="min-w-0 grow p-2 md:p-8 {$$slots.logo ? 'pl-0 md:pl-0' : ''}"
-			href={$urlParam.toggle({ section: value })}
-			data-sveltekit-noscroll
-			data-sveltekit-replacestate
-			on:click={handleClick}
-		>
-			<div class="flex gap-2">
-				<div class="title min-w-0 overflow-hidden text-ellipsis">
-					<slot name="title" />
-				</div>
-				<Icon
-					path={mdiChevronRight}
-					class="ml-auto transition-transform {isOpen ? 'rotate-90' : ''}"
-				/>
+<section class="card bordered border bg-base-100 shadow-md {klass}" bind:this={section}>
+	<div
+		id={value}
+		tabindex="0"
+		class="min-w-0 grow cursor-pointer p-2 sm:px-5 sm:py-3 {classHeader}"
+		role="link"
+		on:click={handleClick}
+		on:keydown={(e) => e.key === ' ' && handleClick()}
+	>
+		<div class="flex gap-2">
+			<div class="min-w-0 overflow-hidden text-ellipsis font-medium {classTitle}">
+				<slot name="title" />
 			</div>
+			<Icon
+				path={mdiChevronRight}
+				class="ml-auto opacity-80 transition-transform {isOpen ? 'rotate-90' : ''}"
+			/>
+		</div>
 
-			{#if $$slots.subtitle}
-				<div class="mt-2 text-sm opacity-80">
-					<slot name="subtitle" />
-				</div>
-			{/if}
-		</a>
+		{#if $$slots.subtitle}
+			<div class="text-sm {classSubtitle}">
+				<slot name="subtitle" />
+			</div>
+		{/if}
 	</div>
 
 	{#if isOpen}
-		<div class="card-body p-4 pt-0 md:p-8 md:pt-0" transition:slide={{ duration: 200 }}>
+		<div class="card-body p-4 pt-0 md:p-8 md:pt-0 {classBody}" transition:slide={{ duration: 200 }}>
 			<slot />
 		</div>
 	{/if}
-</div>
+</section>

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

@@ -3,12 +3,15 @@ declare const __propDef: {
     props: {
         value: string;
         class?: string | undefined;
+        classHeader?: string | undefined;
+        classBody?: string | undefined;
+        classTitle?: string | undefined;
+        classSubtitle?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        logo: {};
         title: {};
         subtitle: {};
         default: {};

package/dist/ui/period/PeriodPicker.svelte

@@ -34,7 +34,6 @@ async function initTimePicker() {
     setup: (picker2) => {
       picker2.on("selected", (date1, date2) => {
         const start = `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(period?.start)}`;
-        console.log(start);
         period = {
           start: /* @__PURE__ */ new Date(
             `${getAbsoluteDate(date1.dateInstance)}T${getAbsoluteTime(period?.start)}`
@@ -43,7 +42,6 @@ async function initTimePicker() {
             `${getAbsoluteDate(date2.dateInstance)}T${getAbsoluteTime(period?.end, "23:59:00")}`
           )
         };
-        console.log(period);
         dispatch("change", period);
       });
     }
@@ -53,7 +51,6 @@ const getAbsoluteDate = (date) => [date.getFullYear(), date.getMonth() + 1, date
 const getAbsoluteTime = (date, defaultTime = "00:00:00") => {
   if (!date)
     return defaultTime;
-  console.log(date.getHours());
   return [date.getHours(), date.getMinutes(), date.getSeconds()].map((n) => n.toString().padStart(2, "0")).join(":");
 };
 </script>

package/package.json

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