Swappable edge (#1729)

* wip

* shadow dialog

* only one dialog

* pre-release

* with key directive

* drawer with offet (edge swappable)

* drawer with offset (edge swappable) and docs

* coderabbit corrections

* coderabbit performance suggestions

* coderabbit: final tweaks

* touch classes for handler

* docs: css value for drawer handle

* trigger playwright check

Author: jjagielka

src/lib/dialog/Dialog.svelte

@@ -36,12 +36,15 @@
   }
 
   function _onclick(ev: MouseEvent & { currentTarget: HTMLDialogElement }) {
-    const dlg: HTMLDialogElement = ev.currentTarget,
-      rect = dlg.getBoundingClientRect(),
-      clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
+    const dlg: HTMLDialogElement = ev.currentTarget;
+    if (ev.target === dlg) {
+      // click outside - backdrop is dialog
+      const rect = dlg.getBoundingClientRect(),
+        clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
 
-    if (outsideclose && !clickedInContent) {
-      return cancel(dlg);
+      if (outsideclose && !clickedInContent) {
+        return cancel(dlg);
+      }
     }
 
     if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {

src/lib/drawer/Drawer.svelte

@@ -6,8 +6,15 @@
   import { sineIn } from "svelte/easing";
   import { fly } from "svelte/transition";
   import { drawer } from ".";
+  import { setContext } from "svelte";
 
-  let { children, open = $bindable(false), hidden = $bindable(), width, dismissable = false, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+  let { children, open = $bindable(false), hidden = $bindable(), modal, offset, width, dismissable = offset ? false : undefined, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+
+  setContext("drawer", {
+    get placement() {
+      return placement;
+    }
+  });
 
   // back compatibility
   if (hidden !== undefined) console.warn("'hidden' property is deprecated. Please use the 'open' property to manage 'Drawer'.");
@@ -35,23 +42,51 @@
 
   const theme = getTheme("drawer");
 
-  const { base } = $derived(drawer({ placement, width, modal: restProps.modal }));
+  let shifted = $state(true);
 
-  let innerWidth: number = $state(-1);
-  let innerHeight: number = $state(-1);
-  // let startX = $derived(position === 'fixed'? 0: )
-  let x = $derived(placement === "left" ? -320 : placement === "right" ? innerWidth + 320 : undefined);
-  let y = $derived(placement === "top" ? -100 : placement === "bottom" ? innerHeight + 100 : undefined);
+  const { base } = $derived(drawer({ placement, width, modal: offset && !open ? false : modal, shifted }));
 
-  let transition_params = $derived(transitionParams ?? Object.assign({}, { x, y, duration: 200, easing: sineIn }));
-</script>
+  let x = $state(),
+    y = $state();
+
+  let transition_params = $derived({ x, y, duration: 300, easing: sineIn, opacity: 1, ...transitionParams });
+
+  function init(node: HTMLDialogElement) {
+    // set initial offset, later it will be switched on/off by onintrostart
+    if (offset) node.style[placement] = offset;
+  }
 
-<svelte:window bind:innerWidth bind:innerHeight />
+  function onintrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    // set the values for transition start position
+    const dlg = ev.currentTarget;
+    const { innerWidth = 0, innerHeight = 0 } = dlg.ownerDocument.defaultView ?? {};
 
-<Dialog bind:open {transition} {dismissable} {outsideclose} transitionParams={transition_params} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    const rect = dlg.getBoundingClientRect();
+
+    x = placement === "left" ? rect.left : placement === "right" ? rect.right - innerWidth : undefined;
+    y = placement === "top" ? rect.top : placement === "bottom" ? rect.bottom - innerHeight : undefined;
+    // remove shift for transition end position
+    shifted = false;
+
+    // add offset if closed, remove it when open
+    if (offset) dlg.style[placement] = open ? "" : offset;
+  }
+
+  function onoutrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    shifted = true;
+  }
+</script>
+
+<Dialog {@attach init} bind:open {modal} {dismissable} {transition} {onintrostart} {onoutrostart} {outsideclose} transitionParams={transition_params} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {@render children?.()}
 </Dialog>
 
+{#if offset && !open}
+  <Dialog {@attach init} open modal={false} {dismissable} {outsideclose} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    {@render children?.()}
+  </Dialog>
+{/if}
+
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
@@ -62,7 +97,7 @@
 @prop open = $bindable(false)
 @prop hidden = $bindable()
 @prop width
-@prop dismissable = false
+@prop dismissable 
 @prop placement = "left"
 @prop class: className
 @prop transitionParams

src/lib/drawer/DrawerHandle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getTheme } from "$lib/theme/themeUtils";
+  import type { DrawerHandleProps } from "$lib/types";
+  import clsx from "clsx";
+  import { drawerhandle } from "./theme";
+  import { getContext } from "svelte";
+
+  let { children, placement, "aria-label": ariaLabel, class: className, classes, ...restProps }: DrawerHandleProps = $props();
+
+  const ctx = getContext<{ placement: DrawerHandleProps["placement"] } | undefined>("drawer");
+
+  const theme = getTheme("drawerhandle");
+  let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
+</script>
+
+<button type="button" aria-label={ariaLabel} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {@render children?.()}
+  <span class={handle({ class: clsx(theme?.handle, classes?.handle) })}></span>
+</button>

src/lib/drawer/index.ts

@@ -1,3 +1,4 @@
 export { default as Drawer } from "./Drawer.svelte";
 export { default as Drawerhead } from "./Drawerhead.svelte";
-export { drawer, drawerhead } from "./theme";
+export { default as DrawerHandle } from "./DrawerHandle.svelte";
+export { drawer, drawerhead, drawerhandle } from "./theme";

src/lib/drawer/theme.ts

@@ -7,7 +7,7 @@ export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer
 export const drawer = tv({
   extend: dialog,
   slots: {
-    base: "p-4 max-h-none max-w-none"
+    base: "p-4 max-h-none max-w-none border border-gray-200 dark:border-gray-700 transform-gpu will-change-transform"
   },
   variants: {
     placement: {
@@ -24,11 +24,43 @@ export const drawer = tv({
     modal: {
       false: { base: "fixed inset-0" },
       true: { base: "" }
+    },
+    shifted: {
+      true: {},
+      false: {}
     }
   },
+  compoundVariants: [
+    {
+      shifted: false,
+      modal: false,
+      class: { base: "z-50" }
+    },
+    {
+      shifted: true,
+      placement: 'left',
+      class: { base: "-translate-x-full" }
+    },
+    {
+      shifted: true,
+      placement: 'right',
+      class: { base: "translate-x-full" }
+    },
+    {
+      shifted: true,
+      placement: 'top',
+      class: { base: "-translate-y-full" }
+    },
+    {
+      shifted: true,
+      placement: 'bottom',
+      class: { base: "translate-y-full" }
+    },
+  ],
   defaultVariants: {
     placement: "left",
-    width: "default"
+    width: "default",
+    modal: true
   }
 });
 
@@ -41,3 +73,20 @@ export const drawerhead = tv({
     svg: "h-4 w-4"
   }
 });
+
+export type DrawerHandleVariants = VariantProps<typeof drawerhandle> & Classes<typeof drawerhandle>;
+
+export const drawerhandle = tv({
+  slots: {
+    base: "p-4 absolute flex select-none cursor-grab active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 dark:focus-visible:ring-offset-gray-800",
+    handle: "absolute rounded-lg bg-gray-300 dark:bg-gray-600"
+  },
+  variants: {
+    placement: {
+      left: { base: "inset-y-0 right-0 touch-pan-y", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+      right: { base: "inset-y-0 left-0 touch-pan-y", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+      top: { base: "inset-x-0 bottom-0 touch-pan-x", handle: "w-8 h-1 left-1/2 -translate-x-1/2" },
+      bottom: { base: "inset-x-0 top-0 touch-pan-x", handle: "w-8 h-1 left-1/2 -translate-x-1/2" }
+    },
+  },
+});

src/lib/theme/themes.ts

@@ -13,7 +13,7 @@ export { clipboard } from "../clipboard";
 export { darkmode } from "../darkmode";
 export { datepicker } from "../datepicker";
 export { android, desktop, ios, tablet } from "../device-mockups";
-export { drawer } from "../drawer";
+export { drawer, drawerhandle } from "../drawer";
 export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "../dropdown";
 export { footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup } from "../footer";
 export { gallery } from "../gallery";

src/lib/types.ts

@@ -15,7 +15,7 @@ import type { ButtonVariants, GradientButtonVariantes, gradientButton } from "$l
 import type { CardVariants } from "$lib/card/theme";
 import type Slide from "$lib/carousel/Slide.svelte";
 import type { CarouselVariants, SlideVariants } from "$lib/carousel/theme";
-import type { DrawerVariants, DrawerheadVariants } from "$lib/drawer/theme";
+import type { DrawerHandleVariants, DrawerVariants, DrawerheadVariants } from "$lib/drawer/theme";
 import type { DropdownItemVariants } from "$lib/dropdown/theme";
 import type { DatepickerVariants } from "$lib/datepicker/theme";
 import type { FooterCopyrightVariants, FooterLinkVariants } from "$lib/footer/theme";
@@ -569,13 +569,16 @@ export interface DialogProps extends DialogVariants, HTMLDialogAttributes {
 }
 
 // drawer
-export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden"> {
+export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden" | "classes" | "shifted"> {
   /** @deprecated Use `outsideclose` instead. Will be removed in next minor version. */
   activateClickOutside?: boolean;
   /** @deprecated Use `open` instead. Will be removed in next minor version. */
   hidden?: boolean | null;
+  offset?: string;
 }
 
+export interface DrawerHandleProps extends DrawerHandleVariants, HTMLButtonAttributes { }
+
 export interface DrawerheadProps extends DrawerheadVariants, HTMLButtonAttributes {
   closeIcon?: Snippet;
   buttonClass?: ClassValue;
@@ -737,7 +740,7 @@ export interface FloatingLabelInputProps extends FloatingLabelInputVaratiants, O
 }
 
 // helper
-export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> {}
+export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> { }
 
 // input
 export type InputValue = string | number | string[] | undefined;
@@ -931,7 +934,7 @@ export interface TimepickerProps {
   timeIntervals?: string[];
   columns?: ColumnCount;
   // Callback props instead of events
-  onselect?: (data: { time: string; endTime: string; [key: string]: string }) => void;
+  onselect?: (data: { time: string; endTime: string;[key: string]: string }) => void;
 }
 
 // textarea
@@ -1120,7 +1123,7 @@ export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLD
   end?: Snippet;
 }
 
-export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> {}
+export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> { }
 
 export type ToolbarButtonProps = ToolbarButtonVariants &
   AnchorButtonAttributes & {
@@ -1430,7 +1433,7 @@ export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivE
   size?: SkeletonVariants["size"];
 }
 
-export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 export interface TextPlaceholderProps extends TextPlaceholderVariants, HTMLAttributes<HTMLDivElement> {
   size?: TextPlaceholderVariants["size"];
@@ -1440,7 +1443,7 @@ export interface VideoPlaceholderProps extends VideoPlaceholderVariants, HTMLAtt
   size?: VideoPlaceholderVariants["size"];
 }
 
-export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 // speeddial
 export interface SpeedCtxType {