fix: #74, #75

Author: shinokada

src/lib/banner/Banner.svelte

@@ -7,7 +7,7 @@
 
   let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, innerClass, transition = fade, params, ...restProps }: Props = $props();
 
-  const { base, insideDiv, dismissable: dismissableClass } = banner({ type, color });
+  const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 </script>
 
 {#if open}

src/lib/carousel/Carousel.svelte

@@ -12,7 +12,7 @@
   type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
   const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
 
-  let { children, slide, images, index = $bindable(), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, ...restProps }: Props = $props();
+  let { children, slide, images, index = $bindable(0), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, ...restProps }: Props = $props();
 
   const { set, subscribe, update } = writable<State>({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
 

src/lib/carousel/type.ts

@@ -17,12 +17,12 @@ interface CarouselProps extends CarouselVariants, Omit<HTMLAttributes<HTMLDivEle
   children?: Snippet<[number]>;
   slide?: Snippet<[{ index: number; Slide: typeof Slide }]>;
   images: HTMLImgAttributes[];
-  index: number;
-  slideDuration: number;
+  index?: number;
+  slideDuration?: number;
   transition?: TransitionFunc;
-  duration: number;
-  disableSwipe: boolean;
-  imgClass: string;
+  duration?: number;
+  disableSwipe?: boolean;
+  imgClass?: string;
   onchange?: (x: HTMLImgAttributes) => {};
 }
 

src/routes/builder/banner/+page.svelte

@@ -19,22 +19,19 @@
   // interactive example
   // position, bannerType, color, class:divClass
   const colors = Object.keys(banner.variants.color);
-  let position: BannerProps["position"] = $state("sticky");
-  const changePosition = () => {
-    position = position === "sticky" ? "absolute" : "sticky";
-    if (position === "sticky") {
-      bannerType = "default";
-    }
-  };
-  let bannerType: BannerProps["bannerType"] = $state("default");
-  const changeBannerType = () => {
-    bannerType = bannerType === "default" ? "cta" : "default";
-    if (bannerType === "cta") {
-      position = "absolute";
-    }
-  };
+  // let position: BannerProps["type"] = $state("top");
+  // const changePosition = () => {
+  //   position = position === "top" ? "bottom" : "top";
+  // };
+  // let bannerType: BannerProps["type"] = $state("top");
+  // const changeBannerType = () => {
+  //   bannerType = bannerType === "default" ? "cta" : "default";
+  //   if (bannerType === "cta") {
+  //   }
+  // };
   let color: BannerProps["color"] = $state("primary");
-  let bannerClass: BannerProps["class"] = $state("");
+  $inspect('color', color);
+  let bannerClass: BannerProps["class"] = $state("absolute");
   const changeClass = () => {
     bannerClass = bannerClass === "" ? "mt-4" : "";
   };
@@ -66,8 +63,6 @@
       // position, bannerType color, class
       let props = [];
       if (color !== "primary") props.push(` color="${color}"`);
-      if (bannerType !== "default") props.push(` bannerType="${bannerType}"`);
-      if (position !== "sticky") props.push(` position="${position}"`);
       if (bannerClass) props.push(` class="${bannerClass}"`);
       if (!bannerStatus) props.push(" bannerStatus={false}");
       if (currentTransition !== transitions[0]) {
@@ -120,7 +115,7 @@
       <Skeleton class="py-4" />
       <ImagePlaceholder class="py-4" />
     </div>
-    <Banner id="sample-banner" {position} {bannerType} {color} class={bannerClass} bind:bannerStatus transition={currentTransition.transition} params={currentTransition.params}>
+    <Banner id="sample-banner" {color} bind:open={bannerStatus} class={bannerClass} transition={currentTransition.transition} params={currentTransition.params}>
       <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
         <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
           <BullhornOutline class="h-3 w-3 text-gray-500 dark:text-gray-400" />
@@ -148,11 +143,6 @@
         <Radio labelClass="w-16 my-1" name="interactive_transition" bind:group={selectedTransition} value={transition.name}>{transition.name}</Radio>
       {/each}
     </div>
-    <div class="flex flex-wrap justify-center gap-2 md:justify-start">
-      <Button class="w-40" onclick={changePosition}>Position: {position === "sticky" ? "absolute" : "sticky"}</Button>
-      <Button class="w-40" color="blue" onclick={changeBannerType}>Type: {bannerType === "default" ? "cta" : "default"}</Button>
-      <Button class="w-40" color="green" onclick={changeClass}>{bannerClass ? "Remove class" : "Add class"}</Button>
-    </div>
   </div>
   {#snippet codeblock()}
     <DynamicCodeBlockHighlight handleExpandClick={handleBuilderExpandClick} expand={builderExpand} showExpandButton={showBuilderExpandButton} code={generatedCode} />

src/routes/docs/components/popover.md

@@ -238,22 +238,25 @@ Dynamically show the password strength progress when creating a new password pos
 <script lang="ts">
   import { Popover, Label, Input, Checkbox, Button } from "flowbite-svelte";
   import { CheckOutline, CloseOutline } from "flowbite-svelte-icons";
-  function preventDefault<E extends Event>(fn: (event: E) => void) {
+  const preventDefault = <E extends Event>(fn: (event: E) => void) => {
     return function (this: any, event: E) {
       event.preventDefault();
       fn.call(this, event);
     };
   }
+  const handler = ()=>{
+    alert('Submitted!')
+  }
 </script>
 
-<form onsubmit={preventDefault} class="mb-8">
+<form onsubmit={preventDefault(handler)} class="mb-8">
   <div class="mb-6">
     <Label for="email" class="mb-2">Your email</Label>
-    <Input type="email" id="email" placeholder="name@flowbite.com" required="" />
+    <Input type="email" id="email" placeholder="name@flowbite.com" />
   </div>
   <div class="mb-6">
     <Label for="password" class="mb-2">Your password</Label>
-    <Input type="password" id="password" required="" />
+    <Input type="password" id="password" />
   </div>
   <Checkbox class="mb-6">Remember me</Checkbox>
   <Button type="submit">Submit</Button>