minor fixes to drawer and modal (#1724)

* minor fixes to drawer and modal

* bug: outsideclosed not passed to dialog

Author: jjagielka

src/lib/avatar/theme.ts

@@ -15,7 +15,7 @@ export const avatar = tv({
       false: ""
     },
     stacked: {
-      true: "border-2 -ms-4 border-white dark:border-gray-800",
+      true: "border-2 not-first:-ms-4 border-white dark:border-gray-800",
       false: ""
     },
     size: {

src/lib/dialog/Dialog.svelte

@@ -39,7 +39,6 @@
       rect = dlg.getBoundingClientRect(),
       clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
 
-    // if (outsideclose && ev.target === dlg) {
     if (outsideclose && !clickedInContent) {
       return cancel(dlg);
     }

src/lib/drawer/Drawer.svelte

@@ -7,7 +7,7 @@
   import { fly } from "svelte/transition";
   import { drawer } from ".";
 
-  let { children, open = $bindable(false), hidden = $bindable(), width, dismissable = false, placement = "left", class: className, classes, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+  let { children, open = $bindable(false), hidden = $bindable(), width, dismissable = false, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
 
   // back compatibility
   if (hidden !== undefined) console.warn("'hidden' property is deprecated. Please use the 'open' property to manage 'Drawer'.");

src/lib/drawer/theme.ts

@@ -2,7 +2,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 import type { Classes } from "$lib/theme/themeUtils";
 import { dialog } from "$lib/dialog/theme";
 
-export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer>;
+export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer> & Classes<typeof dialog>;
 
 export const drawer = tv({
   extend: dialog,

src/lib/modal/Modal.svelte

@@ -6,7 +6,7 @@
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from ".";
 
-  let { children, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, classes, transitionParams, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
+  let { children, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, size = "md", placement, class: className, classes, transitionParams, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
 
   // form, header, footer, body, close
   warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
@@ -20,7 +20,7 @@
   const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
 </script>
 
-<Dialog bind:open {transition} dismissable={dismissable && !title && !permanent} transitionParams={paramsOptions} {...restProps} class={base({ fullscreen, class: clsx(theme?.base, className) })}>
+<Dialog bind:open {transition} dismissable={dismissable && !title && !permanent} transitionParams={paramsOptions} {classes} {...restProps} class={base({ fullscreen, class: clsx(theme?.base, className) })}>
   {#if title || header}
     <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
       {#if title}
@@ -60,7 +60,6 @@
 @prop headerClass
 @prop bodyClass
 @prop footerClass
-@prop outsideclose = true
 @prop size = "md"
 @prop placement
 @prop class: className

src/routes/docs/components/drawer.md

@@ -182,7 +182,7 @@ Use this example if you want to add form elements inside the drawer component in
 
 ```svelte example
 <script>
-  import { Drawer, CardPlaceholder, Button, Label, Input, Textarea } from "flowbite-svelte";
+  import { Avatar, Drawer, CardPlaceholder, Button, Label, Input, Textarea } from "flowbite-svelte";
   import { InfoCircleSolid, UserAddOutline, CalendarEditSolid } from "flowbite-svelte-icons";
 
   let open4 = $state(false);
@@ -192,40 +192,35 @@ Use this example if you want to add form elements inside the drawer component in
   <Button onclick={() => (open4 = true)}>Show drawer form</Button>
   <CardPlaceholder size="2xl" class="mt-6" />
 </div>
-<Drawer bind:open={open4}>
+<Drawer form bind:open={open4} classes={{ form: "space-y-6 mb-6" }}>
   <h5 class="mb-6 inline-flex items-center text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
     <InfoCircleSolid class="me-2.5 h-5 w-5" />New event
   </h5>
-  <form method="dialog" class="mb-6">
-    <div class="mb-6">
-      <Label for="title" class="mb-2 block">Title</Label>
-      <Input id="title" name="title" required placeholder="Apple Keynote" />
-    </div>
-    <div class="mb-6">
-      <Label for="description" class="mb-2">Description</Label>
-      <Textarea id="message" placeholder="Write event description..." rows={4} name="message" class="w-full" />
-    </div>
-    <div class="mb-6">
-      <Input id="date" name="date" required type="date" />
-    </div>
-    <div class="mb-4">
-      <div class="relative">
-        <Input id="search" placeholder="Add guest email" class="p-3" />
-        <Button class="bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 absolute end-2 bottom-2 inline-flex items-center rounded-lg px-3 py-1 text-sm font-medium text-white focus:ring-4 focus:outline-hidden" type="submit">
-          <UserAddOutline class="me-1.5 h-3 w-3 text-white" />Add
-        </Button>
-      </div>
-    </div>
-    <div class="mb-4 flex -space-x-4 rtl:space-x-reverse">
-      <img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800" src="/images/profile-picture-1.webp" alt="" />
-      <img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800" src="/images/profile-picture-2.webp" alt="" />
-      <img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800" src="/images/profile-picture-3.webp" alt="" />
-      <img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800" src="/images/profile-picture-4.webp" alt="" />
-    </div>
-    <Button type="submit" class="w-full">
-      <CalendarEditSolid class="me-2.5 h-3.5 w-3.5 text-white" /> Create event
-    </Button>
-  </form>
+  <Label>
+    Title
+    <Input name="title" class="mt-2" required placeholder="Apple Keynote" />
+  </Label>
+  <Label>
+    Description
+    <Textarea placeholder="Write event description..." rows={4} name="message" class="mt-2 w-full font-normal" />
+  </Label>
+  <Input name="date" required type="date" />
+  <Input placeholder="Add guest email">
+    {#snippet right()}
+      <Button size="xs">
+        <UserAddOutline class="me-1.5 h-4 w-4 text-white" />Add
+      </Button>
+    {/snippet}
+  </Input>
+  <div class="mb-4 flex">
+    <Avatar src="/images/profile-picture-1.webp" stacked size="sm" />
+    <Avatar src="/images/profile-picture-2.webp" stacked size="sm" />
+    <Avatar src="/images/profile-picture-3.webp" stacked size="sm" />
+    <Avatar src="/images/profile-picture-4.webp" stacked size="sm" />
+  </div>
+  <Button type="submit" class="w-full">
+    <CalendarEditSolid class="me-2.5 h-3.5 w-3.5 text-white" /> Create event
+  </Button>
 </Drawer>
 ```