Merge branch 'main' into pr/edumudu/2022

.eslintrc.js

@@ -1,5 +1,19 @@
 const { resolve } = require('path')
 
+const restricted = [
+  'vue',
+  '@vue/composition-api',
+  '..',
+  '../..',
+  resolve(__dirname, 'packages/core/index.ts'),
+  resolve(__dirname, 'packages/shared/index.ts'),
+  {
+    name: 'vue-demi',
+    importNames: ['onMounted', 'onUnmounted'],
+    message: 'Use tryOnMounted and tryOnScopeDispose instead.',
+  },
+]
+
 module.exports = {
   root: true,
   env: {
@@ -19,18 +33,7 @@ module.exports = {
     'no-restricted-imports': [
       'error',
       {
-        paths: [
-          'vue',
-          '@vue/composition-api',
-          '..',
-          '../..',
-          resolve(__dirname, 'packages/core/index.ts'),
-          {
-            name: 'vue-demi',
-            importNames: ['onMounted', 'onUnmounted'],
-            message: 'Use tryOnMounted and tryOnScopeDispose instead.',
-          },
-        ],
+        paths: restricted,
       },
     ],
     'node/no-callback-literal': 'off',
@@ -40,6 +43,19 @@ module.exports = {
     'import/no-named-as-default-member': 'off',
   },
   overrides: [
+    {
+      files: ['packages/shared/**/*.ts'],
+      rules: {
+        'no-restricted-imports': ['error',
+          {
+            paths: [
+              ...restricted,
+              '@vueuse/shared',
+            ],
+          },
+        ],
+      },
+    },
     {
       files: ['**/*.md', '**/*.md/*.*', 'demo.vue', 'scripts/*.ts', '*.test.ts'],
       rules: {

.gitignore

@@ -12,5 +12,6 @@ packages/*/LICENSE
 packages/contributing.md
 packages/core/README.md
 packages/public/badge-*
+packages/*/index.mjs
 playgrounds/*/pnpm-lock.yaml
 types

meta/packages.ts

@@ -125,10 +125,14 @@ export const packages: PackageManifest[] = [
     external: [
       'firebase',
       'firebase/app',
+      'firebase/database',
+      'firebase/firestore',
     ],
     globals: {
       'firebase': 'firebase',
       'firebase/app': 'firebase',
+      'firebase/database': 'firebase',
+      'firebase/firestore': 'firebase',
     },
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "private": true,
   "packageManager": "pnpm@7.6.0",
   "description": "Collection of essential Vue Composition Utilities",
@@ -50,10 +50,10 @@
     "@vitest/ui": "^0.18.1",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
-    "@vueuse/core": "link:packages/core",
-    "@vueuse/integrations": "link:packages/integrations",
-    "@vueuse/math": "link:packages/math",
-    "@vueuse/shared": "link:packages/shared",
+    "@vueuse/core": "workspace:*",
+    "@vueuse/integrations": "workspace:*",
+    "@vueuse/math": "workspace:*",
+    "@vueuse/shared": "workspace:*",
     "axios": "^0.27.2",
     "bumpp": "^8.2.1",
     "consola": "^2.15.3",

packages/.vitepress/config.ts

@@ -30,7 +30,7 @@ const Links = [
   { text: 'Add-ons', link: '/add-ons' },
   { text: 'Ecosystem', link: '/ecosystem' },
   { text: 'Export Size', link: '/export-size' },
-  { text: 'Recent Updated', link: '/recent-updated' },
+  { text: 'Recent Updated', link: '/functions.html#sort=updated' },
 ]
 
 const DefaultSideBar = [
@@ -141,8 +141,6 @@ export default defineConfig({
       '/ecosystem': DefaultSideBar,
       '/guidelines': DefaultSideBar,
       '/export-size': DefaultSideBar,
-      '/recent-updated': DefaultSideBar,
-
       '/functions': FunctionsSideBar,
       '/core/': FunctionsSideBar,
       '/shared/': FunctionsSideBar,
@@ -151,6 +149,7 @@ export default defineConfig({
       '/rxjs/': FunctionsSideBar,
       '/integrations/': FunctionsSideBar,
       '/firebase/': FunctionsSideBar,
+      '/math/': FunctionsSideBar,
     },
   },
   head: [

packages/.vitepress/theme/components/Changelog.vue

@@ -2,16 +2,21 @@
 // @ts-expect-error virtual
 import changelog from '/virtual-changelog'
 import { computed } from 'vue'
-import type { CommitInfo } from '../@vueuse/metadata'
+import type { CommitInfo } from '@vueuse/metadata'
 import { renderCommitMessage } from '../utils'
+import { functions } from '@vueuse/metadata'
 
 const props = defineProps<{ fn: string }>()
+const info = computed(() => functions.find(i => i.name === props.fn))
 
 const allCommits = changelog as CommitInfo[]
+
+const names = computed(() => [props.fn, ...info.value.alias || []])
 const commits = computed(() => {
-  const commits = allCommits.filter(c => c.version || c.functions?.includes(props.fn))
-  return commits.filter((i, idx) => {
-    if (i.version && (!commits[idx + 1] || commits[idx + 1]?.version))
+  const related = allCommits
+    .filter(c => c.version || c.functions?.some(i => names.value.includes(i)))
+  return related.filter((i, idx) => {
+    if (i.version && (!related[idx + 1] || related[idx + 1]?.version))
       return false
     return true
   })

packages/.vitepress/theme/components/FunctionBadge.vue

@@ -29,8 +29,14 @@ const link = computed(() => {
 </script>
 
 <template>
-  <div text="sm" flex="~ gap1" items-center>
-    <a v-bind="link" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded items-center" flex="inline gap-1 none" my-auto>
+  <div
+    text="sm" flex="~ gap1" items-center
+    :class="fn.deprecated ? 'op80 saturate-0' : ''"
+  >
+    <a
+      v-bind="link" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded items-center" flex="inline gap-1 none" my-auto
+      :class="fn.deprecated ? 'line-through !decoration-solid' : ''"
+    >
       <span v-html="styledName(fn.name)" />
       <i v-if="fn.external" i-carbon-launch class="opacity-80 text-xs" />
     </a>

packages/.vitepress/theme/components/FunctionInfo.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
 import { computed } from 'vue'
-import { functions } from '../../../../packages/metadata/metadata'
+import { functions } from '@vueuse/metadata'
+import exportSizes from '../../../export-size.json'
 
 const props = defineProps<{ fn: string }>()
-
 const info = computed(() => functions.find(i => i.name === props.fn))
 const format = (ts: number) => ago(-1, 'day')
 const lastUpdated = useTimeAgo(new Date(info.value?.lastUpdated || 0))
 const link = computed(() => `/functions\#category=${encodeURIComponent(info.value.category)}`)
 
+const exportSize = exportSizes[info.value?.name]
 const getFunctionLink = (fn: string) => {
   const info = functions.find(i => i.name === fn)
   return info?.docs.replace(/https?:\/\/vueuse\.org\//g, '/')
@@ -22,6 +23,10 @@ const getFunctionLink = (fn: string) => {
       Category
     </div>
     <div><a :href="link">{{ info.category }}</a></div>
+    <div opacity="50">
+      Export Size
+    </div>
+    <div> {{ exportSize }}</div>
     <template v-if="info.package !== 'core' && info.package !== 'shared'">
       <div opacity="50">
         Package

packages/components/index.ts

@@ -38,8 +38,10 @@ export * from '../core/useOnline/component'
 export * from '../core/usePageLeave/component'
 export * from '../core/usePointer/component'
 export * from '../core/usePreferredColorScheme/component'
+export * from '../core/usePreferredContrast/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
+export * from '../core/usePreferredReducedMotion/component'
 export * from '../core/useScreenSafeArea/component'
 export * from '../core/useScroll/directive'
 export * from '../core/useScrollLock/directive'

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",

packages/core/computedAsync/index.ts

@@ -16,7 +16,7 @@ export interface AsyncComputedOptions {
    *
    * @default false
    */
-  lazy?: Boolean
+  lazy?: boolean
 
   /**
    * Ref passed to receive the updated of async evaluation

packages/core/index.ts

@@ -18,6 +18,7 @@ export * from './useBroadcastChannel'
 export * from './useBrowserLocation'
 export * from './useCached'
 export * from './useClipboard'
+export * from './useCloned'
 export * from './useColorMode'
 export * from './useConfirmDialog'
 export * from './useCssVar'
@@ -81,8 +82,10 @@ export * from './usePermission'
 export * from './usePointer'
 export * from './usePointerSwipe'
 export * from './usePreferredColorScheme'
+export * from './usePreferredContrast'
 export * from './usePreferredDark'
 export * from './usePreferredLanguages'
+export * from './usePreferredReducedMotion'
 export * from './useRafFn'
 export * from './useRefHistory'
 export * from './useResizeObserver'

packages/core/onKeyStroke/demo.vue

@@ -7,22 +7,18 @@ const translateY = ref(0)
 
 onKeyStroke(['w', 'W', 'ArrowUp'], (e: KeyboardEvent) => {
   translateY.value -= 10
-  e.preventDefault()
 })
 
 onKeyStroke(['s', 'S', 'ArrowDown'], (e: KeyboardEvent) => {
   translateY.value += 10
-  e.preventDefault()
 })
 
 onKeyStroke(['a', 'A', 'ArrowLeft'], (e: KeyboardEvent) => {
   translateX.value -= 10
-  e.preventDefault()
 })
 
 onKeyStroke(['d', 'D', 'ArrowRight'], (e: KeyboardEvent) => {
   translateX.value += 10
-  e.preventDefault()
 })
 </script>
 

packages/core/onLongPress/index.ts

@@ -31,12 +31,12 @@ export function onLongPress(
 ) {
   const elementRef = computed(() => unrefElement(target))
 
-  let timeout: number | null = null
+  let timeout: ReturnType<typeof setTimeout> | undefined
 
   function clear() {
-    if (timeout != null) {
+    if (timeout) {
       clearTimeout(timeout)
-      timeout = null
+      timeout = undefined
     }
   }
 
@@ -55,7 +55,7 @@ export function onLongPress(
     timeout = setTimeout(
       () => handler(ev),
       options?.delay ?? DEFAULT_DELAY,
-    ) as unknown as number
+    )
   }
 
   const listenerOptions: AddEventListenerOptions = {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/core",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",

packages/core/ssr-handlers.ts

@@ -13,7 +13,7 @@ export interface StorageLike {
 }
 
 /**
- * @expiremental The API is not finalized yet. It might not follow semver.
+ * @experimental The API is not finalized yet. It might not follow semver.
  */
 export interface SSRHandlersMap {
   getDefaultStorage: () => StorageLike | undefined

packages/core/useActiveElement/index.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue-demi'
+import { computedWithControl } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
@@ -11,16 +11,15 @@ import { defaultWindow } from '../_configurable'
  */
 export function useActiveElement<T extends HTMLElement>(options: ConfigurableWindow = {}) {
   const { window = defaultWindow } = options
-  const counter = ref(0)
+  const activeElement = computedWithControl(
+    () => null,
+    () => window?.document.activeElement as T | null | undefined,
+  )
 
   if (window) {
-    useEventListener(window, 'blur', () => counter.value += 1, true)
-    useEventListener(window, 'focus', () => counter.value += 1, true)
+    useEventListener(window, 'blur', activeElement.trigger, true)
+    useEventListener(window, 'focus', activeElement.trigger, true)
   }
 
-  return computed(() => {
-    // eslint-disable-next-line no-unused-expressions
-    counter.value
-    return window?.document.activeElement as T | null | undefined
-  })
+  return activeElement
 }

packages/core/useBreakpoints/demo.vue

@@ -3,7 +3,10 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
+const smWidth = breakpointsTailwind.sm
+
 const sm = breakpoints.smaller('sm')
+const sme = breakpoints.smallerOrEqual('sm')
 const md = breakpoints.between('sm', 'md')
 const lg = breakpoints.between('md', 'lg')
 const xl = breakpoints.between('lg', 'xl')
@@ -13,7 +16,8 @@ const xxxl = breakpoints['2xl']
 
 <template>
   <div class="font-mono">
-    <div> sm: <BooleanDisplay :value="sm" /></div>
+    <div> sm(&lt;{{ smWidth }}px): <BooleanDisplay :value="sm" /></div>
+    <div> sm(&lt;={{ smWidth }}px): <BooleanDisplay :value="sme" /></div>
     <div> md: <BooleanDisplay :value="md" /></div>
     <div> lg: <BooleanDisplay :value="lg" /></div>
     <div> xl: <BooleanDisplay :value="xl" /></div>

packages/core/useBreakpoints/index.md

@@ -13,7 +13,10 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const smAndLarger = breakpoints.greater('sm')
+const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
+const largerThanSm = breakpoints.greater('sm') // only larger than sm
+const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
+const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
 ```
 
 ```js