Expose element ref from styled component

.changeset/old-pandas-lose.md

@@ -0,0 +1,5 @@
+---
+'@teiler/vue': patch
+---
+
+Expose `element` ref from styled component

packages/vue/src/Styled.ts

@@ -1,19 +1,23 @@
 import type { HTMLElements, Sheet, StyleDefinition } from '@teiler/core'
 
 import { DefaultTheme, insert } from '@teiler/core'
-import { defineComponent, h, inject, toRaw } from 'vue'
+import { defineComponent, h, inject, ref, toRaw } from 'vue'
 import { context } from './ThemeProvider'
 import { getStyleSheet } from './sheet'
 
 export default function <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>) {
   const component = defineComponent({
     inheritAttrs: false,
     styleDefinition,
-    setup() {
+    setup(_, { expose }) {
       const styleSheet: Sheet = getStyleSheet()
       const theme = inject<DefaultTheme>(context, {})
 
-      return { styleSheet, theme }
+      const element = ref<HTMLElement | null>(null)
+
+      expose({ element })
+
+      return { styleSheet, theme, element }
     },
     render() {
       const slots = this.$slots
@@ -30,7 +34,7 @@ export default function <Target extends HTMLElements, Props>(styleDefinition: St
       const defaultSlot = slots.default ? slots.default() : undefined
 
       if (styleDefinition.tag) {
-        return h(styleDefinition.tag, { ...filtredProps, class: className }, defaultSlot)
+        return h(styleDefinition.tag, { ...filtredProps, class: className, ref: 'element' }, defaultSlot)
       } else {
         return null
       }

packages/vue/src/component.ts

@@ -7,7 +7,7 @@ import { component, global, keyframes, styled, tags } from '@teiler/core'
 
 type ElementAttributes<Target extends HTMLElements> = Target extends keyof IntrinsicElementAttributes ? IntrinsicElementAttributes[Target] : {}
 
-type VueRawBindings = { styleSheet: Sheet; theme: DefaultTheme }
+type VueRawBindings = { styleSheet: Sheet; theme: DefaultTheme; element: HTMLElement | null }
 type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props, VueRawBindings, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, ElementAttributes<Target>>
 
 const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): VueTeilerComponent<Target, Props> => {

packages/vue/src/index.test.ts

@@ -64,6 +64,9 @@ describe('component', () => {
       setup: expect.any(Function),
     })
 
+    expect(wrapper.vm.element).toBeDefined()
+    expect(wrapper.vm.element).not.toBeNull()
+
     expect(wrapper.html()).toBe('<div class="teiler-1r77qux t1r77qux"></div>')
   })