Skip to content

Commit

Permalink
feat: introduce components & directives (vitest-dev#486)
Browse files Browse the repository at this point in the history
Co-authored-by: Anthony Fu <[email protected]>
  • Loading branch information
wheatjs and antfu authored May 25, 2021
1 parent 89e1526 commit 5bede93
Show file tree
Hide file tree
Showing 76 changed files with 853 additions and 20 deletions.
37 changes: 37 additions & 0 deletions indexes.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
"description": "Collection of essential Vue Composition Utilities",
"dir": "packages/core"
},
"components": {
"name": "components",
"display": "Components",
"description": "Renderless components for VueUse",
"author": "Wheat<https://github.com/wheatjs>",
"dir": "packages/components"
},
"router": {
"name": "router",
"display": "Router",
Expand Down Expand Up @@ -371,6 +378,7 @@
{
"name": "onClickOutside",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/onClickOutside/",
"category": "Sensors",
"description": "listen for clicks outside of an element"
Expand Down Expand Up @@ -413,6 +421,7 @@
{
"name": "useActiveElement",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useActiveElement/",
"category": "Browser",
"description": "reactive `document.activeElement`"
Expand All @@ -427,6 +436,7 @@
{
"name": "useBattery",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useBattery/",
"category": "Sensors",
"description": "reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)"
Expand All @@ -441,6 +451,7 @@
{
"name": "useBrowserLocation",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useBrowserLocation/",
"category": "Browser",
"description": "reactive browser location"
Expand All @@ -462,69 +473,79 @@
{
"name": "useDark",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDark/",
"category": "Browser",
"description": "reactive dark mode with auto data persistence"
},
{
"name": "useDeviceLight",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDeviceLight/",
"category": "Sensors",
"description": "reactive [DeviceLightEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent)"
},
{
"name": "useDeviceMotion",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDeviceMotion/",
"category": "Sensors",
"description": "reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)"
},
{
"name": "useDeviceOrientation",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDeviceOrientation/",
"category": "Sensors",
"description": "reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)"
},
{
"name": "useDevicePixelRatio",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDevicePixelRatio/",
"category": "Sensors",
"description": "reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/ru/docs/Web/API/Window/devicePixelRatio)"
},
{
"name": "useDevicesList",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDevicesList/",
"category": "Sensors",
"description": "reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing avaliable input/output devices"
},
{
"name": "useDocumentVisibility",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useDocumentVisibility/",
"category": "Sensors",
"description": "reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)"
},
{
"name": "useElementBounding",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useElementBounding/",
"category": "Sensors",
"description": "reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element"
},
{
"name": "useElementSize",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useElementSize/",
"category": "Sensors",
"description": "reactive size of an HTML element"
},
{
"name": "useElementVisibility",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useElementVisibility/",
"category": "Sensors",
"description": "tracks the visibility of an element within the viewport"
Expand Down Expand Up @@ -560,20 +581,23 @@
{
"name": "useFullscreen",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useFullscreen/",
"category": "Browser",
"description": "reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)"
},
{
"name": "useGeolocation",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useGeolocation/",
"category": "Sensors",
"description": "reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)"
},
{
"name": "useIdle",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useIdle/",
"category": "Sensors",
"description": "tracks whether the user is being inactive"
Expand Down Expand Up @@ -623,20 +647,23 @@
{
"name": "useMouse",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useMouse/",
"category": "Sensors",
"description": "reactive mouse position"
},
{
"name": "useMouseInElement",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useMouseInElement/",
"category": "Sensors",
"description": "reactive mouse position related to an element"
},
{
"name": "useMousePressed",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useMousePressed/",
"category": "Sensors",
"description": "reactive mouse pressing state"
Expand All @@ -651,27 +678,31 @@
{
"name": "useNetwork",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useNetwork/",
"category": "Sensors",
"description": "reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)"
},
{
"name": "useNow",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useNow/",
"category": "Animation",
"description": "reactive current Date instance"
},
{
"name": "useOnline",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useOnline/",
"category": "Sensors",
"description": "reactive online state"
},
{
"name": "usePageLeave",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/usePageLeave/",
"category": "Sensors",
"description": "reactive state to show whether the mouse leaves the page"
Expand All @@ -693,20 +724,23 @@
{
"name": "usePreferredColorScheme",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/usePreferredColorScheme/",
"category": "Browser",
"description": "reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query"
},
{
"name": "usePreferredDark",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/usePreferredDark/",
"category": "Browser",
"description": "reactive dark theme preference"
},
{
"name": "usePreferredLanguages",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/usePreferredLanguages/",
"category": "Browser",
"description": "reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages)"
Expand Down Expand Up @@ -777,13 +811,15 @@
{
"name": "useTimeAgo",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useTimeAgo/",
"category": "Formatters",
"description": "reactive time ago"
},
{
"name": "useTimestamp",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useTimestamp/",
"category": "Animation",
"description": "reactive current timestamp"
Expand Down Expand Up @@ -861,6 +897,7 @@
{
"name": "useWindowSize",
"package": "core",
"component": true,
"docs": "https://vueuse.org/core/useWindowSize/",
"category": "Sensors",
"description": "reactive window size"
Expand Down
12 changes: 12 additions & 0 deletions meta/packages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@ export const packages: PackageManifest[] = [
display: 'VueUse',
description: 'Collection of essential Vue Composition Utilities',
},
{
name: 'components',
display: 'Components',
description: 'Renderless components for VueUse',
author: 'Wheat<https://github.com/wheatjs>',
external: [
'@vueuse/core',
'@vueuse/shared',
],
},
{
name: 'router',
display: 'Router',
Expand All @@ -34,13 +44,15 @@ export const packages: PackageManifest[] = [
'http',
'nprogress',
'jwt-decode',
'focus-trap',
],
globals: {
'axios': 'axios',
'universal-cookie': 'UniversalCookie',
'qrcode': 'QRCode',
'nprogress': 'nprogress',
'jwt-decode': 'jwt_decode',
'focus-trap': 'focusTrap',
},
},
{
Expand Down
1 change: 1 addition & 0 deletions meta/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export interface VueUseFunction {
docs?: string
depreacted?: boolean
internal?: boolean
component?: boolean
}

export interface VueUsePackage extends PackageManifest {
Expand Down
30 changes: 30 additions & 0 deletions packages/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
export * from '../core/onClickOutside/component'
export * from '../core/useActiveElement/component'
export * from '../core/useBattery/component'
export * from '../core/useBrowserLocation/component'
export * from '../core/useDark/component'
export * from '../core/useDeviceLight/component'
export * from '../core/useDeviceMotion/component'
export * from '../core/useDeviceOrientation/component'
export * from '../core/useDevicePixelRatio/component'
export * from '../core/useDevicesList/component'
export * from '../core/useDocumentVisibility/component'
export * from '../core/useElementBounding/component'
export * from '../core/useElementSize/component'
export * from '../core/useElementVisibility/component'
export * from '../core/useFullscreen/component'
export * from '../core/useGeolocation/component'
export * from '../core/useIdle/component'
export * from '../core/useMouse/component'
export * from '../core/useMouseInElement/component'
export * from '../core/useMousePressed/component'
export * from '../core/useNetwork/component'
export * from '../core/useNow/component'
export * from '../core/useOnline/component'
export * from '../core/usePageLeave/component'
export * from '../core/usePreferredColorScheme/component'
export * from '../core/usePreferredDark/component'
export * from '../core/usePreferredLanguages/component'
export * from '../core/useTimeAgo/component'
export * from '../core/useTimestamp/component'
export * from '../core/useWindowSize/component'
41 changes: 41 additions & 0 deletions packages/components/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"name": "@vueuse/components",
"version": "5.0.0-beta.1",
"description": "Renderless components for VueUse",
"keywords": [
"vue",
"vue-use",
"utils"
],
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vueuse/vueuse.git"
},
"author": "Wheat<https://github.com/wheatjs>",
"files": [
"dist"
],
"exports": {
".": {
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs.js"
},
"./*": "./*"
},
"main": "./dist/index.cjs.js",
"types": "./dist/index.d.ts",
"module": "./dist/index.esm.js",
"unpkg": "./dist/index.iife.min.js",
"jsdelivr": "./dist/index.iife.min.js",
"sideEffects": false,
"bugs": {
"url": "https://github.com/vueuse/vueuse/issues"
},
"homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
"dependencies": {
"@vueuse/core": "5.0.0-beta.1",
"@vueuse/shared": "5.0.0-beta.1",
"vue-demi": "*"
}
}
18 changes: 18 additions & 0 deletions packages/core/onClickOutside/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { h, ref, defineComponent } from 'vue-demi'
import { onClickOutside } from '@vueuse/core'

export const OnClickOutside = defineComponent({
name: 'OnClickOutside',
emits: ['trigger'],
setup(props, { slots, emit }) {
const target = ref()
onClickOutside(target, (e) => {
emit('trigger', e)
})

return () => {
if (slots.default)
return h('div', { ref: target }, slots.default())
}
},
})
9 changes: 9 additions & 0 deletions packages/core/onClickOutside/directive.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { FunctionDirective } from 'vue-demi'
import { onClickOutside, OnClickOutsideEvents } from '.'

/**
* TODO: Test that this actually works
*/
export const VOnClickOutside: FunctionDirective<any, (evt: OnClickOutsideEvents['pointerdown']) => void> = (el, binding) => {
onClickOutside(el, binding.value)
}
Loading

0 comments on commit 5bede93

Please sign in to comment.