feat: added 'as' prop to renderable components (vitest-dev#742)

packages/core/onClickOutside/component.ts

@@ -1,8 +1,10 @@
 import { h, ref, defineComponent } from 'vue-demi'
 import { onClickOutside } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export const OnClickOutside = defineComponent({
+export const OnClickOutside = defineComponent<RenderableComponent>({
   name: 'OnClickOutside',
+  props: ['as'] as unknown as undefined,
   emits: ['trigger'],
   setup(props, { slots, emit }) {
     const target = ref()
@@ -12,7 +14,7 @@ export const OnClickOutside = defineComponent({
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default())
+        return h(props.as || 'div', { ref: target }, slots.default())
     }
   },
 })

packages/core/types.ts

@@ -5,4 +5,13 @@ export interface Position {
   y: number
 }
 
+export interface RenderableComponent {
+  /**
+   * The elment that the component should be rendered as
+   *
+   * @default 'div'
+   */
+  as?: Object | string
+}
+
 export type PointerType = 'mouse' | 'touch' | 'pen'

packages/core/useDraggable/component.ts

@@ -1,7 +1,8 @@
 import { defineComponent, h, reactive, ref, unref } from 'vue-demi'
 import { useDraggable, UseDraggableOptions, useStorage } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export interface UseDraggableProps extends UseDraggableOptions {
+export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
   /**
    * When provided, use `useStorage` to preserve element's position
    */
@@ -23,6 +24,7 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
     'exact',
     'preventDefault',
     'pointerTypes',
+    'as',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
@@ -41,7 +43,7 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data))
+        return h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data))
     }
   },
 })

packages/core/useElementBounding/component.ts

@@ -1,17 +1,18 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useElementBounding } from '@vueuse/core'
 import { ResizeObserverOptions } from '../useResizeObserver'
+import { RenderableComponent } from '../types'
 
-export const UseElementBounding = defineComponent<ResizeObserverOptions>({
+export const UseElementBounding = defineComponent<ResizeObserverOptions & RenderableComponent>({
   name: 'UseElementBounding',
-  props: ['box'] as unknown as undefined,
+  props: ['box', 'as'] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
-    const data = reactive(useElementBounding(target, props))
+    const data = reactive(useElementBounding(target, { box: props.box, window: props.window }))
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })

packages/core/useElementSize/component.ts

@@ -1,8 +1,9 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useElementSize, ElementSize } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 import { ResizeObserverOptions } from '../useResizeObserver'
 
-export const UseElementSize = defineComponent<ElementSize & ResizeObserverOptions>({
+export const UseElementSize = defineComponent<ElementSize & ResizeObserverOptions & RenderableComponent>({
   name: 'UseElementSize',
   props: ['width', 'height', 'box'] as unknown as undefined,
   setup(props, { slots }) {
@@ -11,7 +12,7 @@ export const UseElementSize = defineComponent<ElementSize & ResizeObserverOption
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })

packages/core/useElementVisibility/component.ts

@@ -1,8 +1,10 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useElementVisibility } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export const UseElementVisibility = defineComponent({
+export const UseElementVisibility = defineComponent<RenderableComponent>({
   name: 'UseElementVisibility',
+  as: ['as'] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
     const data = reactive({
@@ -11,7 +13,7 @@ export const UseElementVisibility = defineComponent({
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })

packages/core/useFullscreen/component.ts

@@ -1,15 +1,17 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useFullscreen } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export const UseFullscreen = defineComponent({
+export const UseFullscreen = defineComponent<RenderableComponent>({
   name: 'UseFullscreen',
+  props: ['as'] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
     const data = reactive(useFullscreen(target))
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })

packages/core/useMouseInElement/component.ts

@@ -1,16 +1,17 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useMouseInElement, MouseInElementOptions } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export const UseMouseInElement = defineComponent<MouseInElementOptions>({
+export const UseMouseInElement = defineComponent<MouseInElementOptions & RenderableComponent>({
   name: 'UseMouseElement',
-  props: ['handleOutside'] as unknown as undefined,
+  props: ['handleOutside', 'as'] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
     const data = reactive(useMouseInElement(target, props))
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })

packages/core/useMousePressed/component.ts

@@ -1,16 +1,17 @@
 import { h, ref, defineComponent, reactive } from 'vue-demi'
 import { useMousePressed, MousePressedOptions } from '@vueuse/core'
+import { RenderableComponent } from '../types'
 
-export const UseMousePressed = defineComponent<Omit<MousePressedOptions, 'target'>>({
+export const UseMousePressed = defineComponent<Omit<MousePressedOptions, 'target'> & RenderableComponent>({
   name: 'UseMousePressed',
-  props: ['touch', 'initialValue'] as unknown as undefined,
+  props: ['touch', 'initialValue', 'as'] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
     const data = reactive(useMousePressed({ ...props, target }))
 
     return () => {
       if (slots.default)
-        return h('div', { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
 })