Fix state data attribute in Vue (#2787)

* Add tests

* Fix state data attribute in Vue

Author: thecrypticace

packages/@headlessui-vue/src/utils/render.test.ts

@@ -6,9 +6,21 @@ import { render } from './render'
 let Dummy = defineComponent({
   props: {
     as: { type: [Object, String], default: 'div' },
+    slot: { type: Object, default: () => ({}) },
   },
   setup(props, { attrs, slots }) {
-    return () => render({ theirProps: props, ourProps: {}, slots, attrs, slot: {}, name: 'Dummy' })
+    return () => {
+      let { slot, ...rest } = props
+
+      return render({
+        theirProps: rest,
+        ourProps: {},
+        slots,
+        attrs,
+        slot,
+        name: 'Dummy',
+      })
+    }
   },
 })
 
@@ -120,3 +132,38 @@ describe('Validation', () => {
     expect(document.getElementById('result')).toHaveAttribute('data-test', '123')
   })
 })
+
+describe('State Data Attributes', () => {
+  it('as=element', () => {
+    renderTemplate({
+      template: html`
+        <Dummy id="result" as="div" :slot="{active: true, selected: true}">
+          <div>test</div>
+        </Dummy>
+      `,
+    })
+
+    expect(document.getElementById('result')).toHaveAttribute(
+      'data-headlessui-state',
+      'active selected'
+    )
+  })
+
+  it('as=template', () => {
+    renderTemplate({
+      template: html`
+        <Dummy as="template" class="abc" :slot="{active: true, selected: true}">
+          <div id="result">test</div>
+        </Dummy>
+      `,
+    })
+
+    expect(document.getElementById('result')).toHaveClass('abc')
+
+    // NOTE: Removing class="abc" causes this assertion to fail
+    expect(document.getElementById('result')).toHaveAttribute(
+      'data-headlessui-state',
+      'active selected'
+    )
+  })
+})

packages/@headlessui-vue/src/utils/render.ts

@@ -139,7 +139,7 @@ function _render({
         )
       }
 
-      let mergedProps = mergeProps(firstChild.props ?? {}, incomingProps)
+      let mergedProps = mergeProps(firstChild.props ?? {}, incomingProps, dataAttributes)
       let cloned = cloneVNode(firstChild, mergedProps, true)
       // Explicitly override props starting with `on`. This is for event handlers, but there are
       // scenario's where we set them to `undefined` explicitly (when `aria-disabled="true"` is
@@ -155,6 +155,7 @@ function _render({
     }
 
     if (Array.isArray(children) && children.length === 1) {
+      // TODO: Do we need to cloneVNode + dataAttributes here?
       return children[0]
     }