From e557fa074d7a92f0eaef0de447909c2acbe4624a Mon Sep 17 00:00:00 2001 From: wheat Date: Fri, 17 Sep 2021 02:28:43 -0400 Subject: [PATCH] feat: added 'as' prop to renderable components (#742) --- packages/core/onClickOutside/component.ts | 6 ++++-- packages/core/types.ts | 9 +++++++++ packages/core/useDraggable/component.ts | 6 ++++-- packages/core/useElementBounding/component.ts | 9 +++++---- packages/core/useElementSize/component.ts | 5 +++-- packages/core/useElementVisibility/component.ts | 6 ++++-- packages/core/useFullscreen/component.ts | 6 ++++-- packages/core/useMouseInElement/component.ts | 7 ++++--- packages/core/useMousePressed/component.ts | 7 ++++--- 9 files changed, 41 insertions(+), 20 deletions(-) diff --git a/packages/core/onClickOutside/component.ts b/packages/core/onClickOutside/component.ts index 4d1259a0adad..bb118df1b82a 100644 --- a/packages/core/onClickOutside/component.ts +++ b/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({ 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()) } }, }) diff --git a/packages/core/types.ts b/packages/core/types.ts index e4045f9f240a..95da0202e813 100644 --- a/packages/core/types.ts +++ b/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' diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts index 4eced839864f..b3d0f654dc2b 100644 --- a/packages/core/useDraggable/component.ts +++ b/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({ 'exact', 'preventDefault', 'pointerTypes', + 'as', ] as unknown as undefined, setup(props, { slots }) { const target = ref() @@ -41,7 +43,7 @@ export const UseDraggable = defineComponent({ 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)) } }, }) diff --git a/packages/core/useElementBounding/component.ts b/packages/core/useElementBounding/component.ts index dc7deaadfb83..527de32b860b 100644 --- a/packages/core/useElementBounding/component.ts +++ b/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({ +export const UseElementBounding = defineComponent({ 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)) } }, }) diff --git a/packages/core/useElementSize/component.ts b/packages/core/useElementSize/component.ts index fe30ebe03c41..97449e5520aa 100644 --- a/packages/core/useElementSize/component.ts +++ b/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({ +export const UseElementSize = defineComponent({ name: 'UseElementSize', props: ['width', 'height', 'box'] as unknown as undefined, setup(props, { slots }) { @@ -11,7 +12,7 @@ export const UseElementSize = defineComponent { if (slots.default) - return h('div', { ref: target }, slots.default(data)) + return h(props.as || 'div', { ref: target }, slots.default(data)) } }, }) diff --git a/packages/core/useElementVisibility/component.ts b/packages/core/useElementVisibility/component.ts index 783d445aab76..297aa6191ac0 100644 --- a/packages/core/useElementVisibility/component.ts +++ b/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({ 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)) } }, }) diff --git a/packages/core/useFullscreen/component.ts b/packages/core/useFullscreen/component.ts index 84a06e210b69..a593468b73d9 100644 --- a/packages/core/useFullscreen/component.ts +++ b/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({ 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)) } }, }) diff --git a/packages/core/useMouseInElement/component.ts b/packages/core/useMouseInElement/component.ts index 2263ba27f6cc..2651e832f2b0 100644 --- a/packages/core/useMouseInElement/component.ts +++ b/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({ +export const UseMouseInElement = defineComponent({ 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)) } }, }) diff --git a/packages/core/useMousePressed/component.ts b/packages/core/useMousePressed/component.ts index 30fbada3aace..b6d48293b084 100644 --- a/packages/core/useMousePressed/component.ts +++ b/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>({ +export const UseMousePressed = defineComponent & 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)) } }, })