ark-vue: allow Trigger outside of Root

[tve]

I'm liking ark-vue but one thing that I wish it allowed is to place XxxTrigger outside of XxxRoot. I know one can get half way there by not using XxxTrigger and controlling XxxRoot. But then one misses out on the aria and other attrs set by XxxTrigger.

An example structure I use a lot is:

<table v-for="....">
  ...
  <td><button @click="openDialog">action</button></td>
  ...
</table>

<Dialog.Root v-model:open="...">
  <!-- dialog to perform action -->
</Dialog.Root>

In this case I have many triggers for one dialog. I often also have multiple Dialogs for one table where each table row contains a trigger button for each.

I looked at the code and this seems easy to arrange, the idea is for XxxRoot to emit the context and then to let the outer component pass the context into XxxTrigger explicitly. So it would look something like this:

<table v-for="....">
  ...
  <td><Dialog.Trigger :ctx="dialogCtx">action</Dialog.Trigger></td>
  ...
</table>

<Dialog.Root @context="dialogCtx=$event">
  <!-- dialog to perform action -->
</Dialog.Root>

Making this happen is a rather small code change and obviously it would be an optional alternative to the current way of nesting components, not a replacement. Does this make sense or is there a different way to accomplish what I'm looking for?

[juliomuhlbauer]

I think would be really cool to have the same api of the toast component:

import { Toast, createToaster } from '@ark-ui/react'

const Basic = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button onClick={() => toast.create({ title: 'Title', description: 'Description' })}>
        Toast
      </button>
      <Toaster />
    </>
  )
}