Other ways to invoque

[gsabater]

Hello,

Is there any way we can invoke the sheet externally? For example, it would be useful to have without trigger, and call something like this.$refs.vaul.open()

Having events to interact with it would be cool as well.

Thanks

[94726]

Hi there,

Is there any way we can invoke the sheet externally?

you can open it just like you'd open a radix-vue Dialog externally using the open prop (and the corresponding @update:open event)

e. g.

<script setup>
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent } from 'aioli';

const modalOpen = ref(false)
</script>

<template>
<input type="checkbox" v-model="modalOpen" />

<DialogRoot v-model:open="modalOpen">
  <DialogPortal>
    <DialogContent>
      Content
    </DialogContent>
    <DialogOverlay />
  </DialogPortal>
</DialogRoot>
</template>

Having events to interact with it would be cool as well.

Is there anything specific you're missing? Would be happy to add some if applicable :)

[gsabater]

The example is very useful, I will try again and see how it works.

What I found as well is that if the site don't have tailwind already, the vaul don't have any default styles to work.

I feel that the previous example and the tailwind requeriment should be on the readme.

Thanks for your amazing work

[94726]

The drawer is supposed to be unstyled. Tailwind is just what I happen to be using. You should be able to achive the same with regular CSS. I plan on adding some more documentation on it some time tough.