Using a Drawer inside a Modal post v1.12.0

[RightAngler]

Hey there,

We recently updated the packages in our app, so flowbite-svelte was upgraded from 1.10.20 to 1.12.6. This broke our usage of the Drawer component. We were using it inside a Modal we designed for CRUD operations. The Drawer was used to show some example data within the Modal. Now that the Drawer has been redesigned as a Modal, we are unable to use it for this case as the Drawer attaches directly to the document instead of the Modal it is rendered under. What is your recommendation to get back to previous functionality? Is there a certain setup of props we are missing that would allow this to function inside the Modal? Is there an alternative slide out component that isn't a dialog?

[jjagielka]

In majority of cases Drawer is like dialog (backdrop, Esc to cancel, toplevel). Your case is quite unusual, but indeed interesting.

Try that:

<script>
  import Button from "$lib/buttons/Button.svelte";
  import Drawer from "$lib/drawer/Drawer.svelte";
  import DrawerHandle from "$lib/drawer/DrawerHandle.svelte";
  import Modal from "$lib/modal/Modal.svelte";

  let open = $state(false);
  let innerOpen = $state(false);

  let parent = $state();
  let transitionParams = $state({ x: 0 });

  const init = (node) => (parent = node);

  function onintrostart(ev) {
    const rect = ev.currentTarget.getBoundingClientRect(),
      parentRect = parent.getBoundingClientRect();

    transitionParams.x = rect.left - parentRect.left;
  }

  function openDrawer() {
    innerOpen = !innerOpen;
  }
</script>

<Button onclick={() => (open = !open)}>Open</Button>
<Modal {@attach init} bind:open>
  <Drawer {onintrostart} modal={false} offset="3em" bind:open={innerOpen} class="absolute" {transitionParams}>
    Drawer
    <DrawerHandle onclick={openDrawer} />
  </Drawer>
  <p class="ml-12 h-96">Something inside</p>
  <Button class="ms-96" onclick={openDrawer}>Drawer</Button>
</Modal>

Crucial points:

• requires v1.13.3
• modal={false}
• class="absolute"
• transitionParams initial position

[RightAngler]

Thanks for the example! It does work and we'll try to figure out how to adapt it to our framework.