Merge branch 'main' into feat-useStorage

.tazerc.json

@@ -3,7 +3,6 @@
     "eslint-plugin-markdown",
     "rxjs",
     "electron",
-    "firebase",
     "vue-demi"
   ]
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.1",
   "private": true,
-  "packageManager": "pnpm@7.1.7",
+  "packageManager": "pnpm@7.6.0",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu<https://github.com/antfu>",
   "license": "MIT",
@@ -35,67 +35,71 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.2",
-    "@antfu/ni": "^0.16.3",
-    "@iconify/json": "^2.1.75",
+    "@antfu/ni": "^0.17.2",
+    "@iconify/json": "^2.1.80",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@type-challenges/utils": "^0.1.1",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.0.3",
+    "@types/node": "^18.0.6",
     "@types/prettier": "^2.6.3",
     "@types/semver": "^7.3.10",
     "@types/sharp": "^0.30.4",
-    "@vitest/ui": "^0.18.0",
+    "@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",
     "axios": "^0.27.2",
     "bumpp": "^8.2.1",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
     "esbuild-register": "^3.3.3",
-    "eslint": "^8.19.0",
+    "eslint": "^8.20.0",
     "esno": "^0.16.3",
     "export-size": "^0.5.2",
     "fast-glob": "^3.2.11",
-    "firebase": "^8.10.0",
+    "firebase": "^9.9.0",
     "fs-extra": "^10.1.0",
     "fuse.js": "^6.6.2",
     "google-font-installer": "^1.2.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "markdown-table": "^3.0.2",
     "md5": "^2.3.0",
-    "msw": "^0.43.1",
-    "node-fetch": "^3.2.6",
+    "msw": "^0.44.2",
+    "node-fetch": "^3.2.9",
     "ohmyfetch": "^0.4.18",
-    "pnpm": "^7.5.0",
+    "pnpm": "^7.5.2",
     "postcss": "^8.4.14",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",
-    "prism-theme-vars": "^0.2.3",
+    "prism-theme-vars": "^0.2.4",
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.76.0",
+    "rollup": "^2.77.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.9.1",
     "sharp": "^0.30.7",
     "simple-git": "^3.10.0",
     "simple-git-hooks": "^2.8.0",
     "typescript": "4.7.4",
-    "unocss": "^0.44.0",
+    "unocss": "^0.44.5",
     "unplugin-icons": "^0.14.7",
     "unplugin-vue-components": "^0.21.1",
-    "vite": "^2.9.14",
-    "vite-plugin-inspect": "^0.5.1",
-    "vite-plugin-pwa": "^0.12.2",
+    "vite": "^3.0.2",
+    "vite-plugin-inspect": "^0.6.0",
+    "vite-plugin-pwa": "^0.12.3",
     "vitepress": "^1.0.0-alpha.4",
-    "vitest": "^0.18.0",
+    "vitest": "^0.18.1",
     "vue": "^3.2.37",
-    "vue2": "npm:vue@^2.7.4"
+    "vue2": "npm:vue@^2.7.7"
   },
   "pnpm": {
     "neverBuiltDependencies": [

packages/.vitepress/plugins/markdownTransform.ts

@@ -118,7 +118,7 @@ import Demo from \'./demo.vue\'
 `
     : ''
   const packageNote = packages.find(p => p.name === pkg)!.addon
-    ? `available in add-on <a href="/${pkg}/README">@vueuse/${pkg}</a>\n`
+    ? `Available in the <a href="/${pkg}/README">@vueuse/${pkg}</a> add-on.\n`
     : ''
 
   const footer = `${typingSection}\n\n${sourceSection}\n${ContributorsSection}\n${changelogSection}\n`

packages/.vitepress/theme/styles/vars.css

@@ -19,6 +19,18 @@
   --vp-c-text-dark-2: rgba(235, 235, 235, 0.60);
 }
 
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-code-line-highlight-color: rgba(125, 125, 125, 0.2);
+}
+
+.dark {
+  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+}
+
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */

packages/components/package.json

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

packages/contributors.ts

@@ -82,7 +82,7 @@ const coreTeamMembers: CoreTeam[] = [
     twitter: 'alex_kozack',
     sponsors: false,
     functions: ['useMediaControls'],
-    description: '',
+    description: 'Open Source Contributor from Ukraine',
   },
   {
     avatar: contributorsAvatars.scottbedard,

packages/core/onClickOutside/demo.vue

@@ -76,6 +76,7 @@ onClickOutside(
   padding: 0.5em;
   position: absolute;
   left: 0;
+  z-index: 10;
   border-radius: 5px;
   border: 1px solid var(--vp-c-divider-light);
   box-shadow: 2px 2px 5px rgba(10, 10, 10, 0.1);

packages/core/onClickOutside/index.ts

@@ -33,7 +33,7 @@ export interface OnClickOutsideOptions extends ConfigurableWindow {
  */
 export function onClickOutside<T extends OnClickOutsideOptions>(
   target: MaybeElementRef,
-  handler: <E = T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent>(evt: E) => void,
+  handler: (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void,
   options: T = {} as T,
 ) {
   const { window = defaultWindow, ignore, capture = true, detectIframe = false } = options
@@ -84,7 +84,7 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
         document.activeElement?.tagName === 'IFRAME'
         && !el?.contains(document.activeElement)
       )
-        handler(event)
+        handler(event as any)
     }),
   ].filter(Boolean) as Fn[]
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/core",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.1",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
@@ -39,7 +39,7 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@types/web-bluetooth": "^0.0.14",
+    "@types/web-bluetooth": "^0.0.15",
     "@vueuse/metadata": "workspace:*",
     "@vueuse/shared": "workspace:*",
     "vue-demi": "*"

packages/core/useClipboard/index.md

@@ -4,7 +4,7 @@ category: Browser
 
 # useClipboard
 
-Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API without user permission, reading or altering the clipboard contents is not permitted.
+Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API). Without user permission, reading or altering the clipboard contents is not permitted.
 
 ## Usage
 

packages/core/useColorMode/index.ts

@@ -25,6 +25,13 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> extend
    */
   attribute?: string
 
+  /**
+   * The initial color mode
+   *
+   * @default 'auto'
+   */
+  initialValue?: T | BasicColorSchema
+
   /**
    * Prefix when adding value to the attribute
    */
@@ -82,6 +89,7 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
   const {
     selector = 'html',
     attribute = 'class',
+    initialValue = 'auto',
     window = defaultWindow,
     storage,
     storageKey = 'vueuse-color-scheme',
@@ -101,8 +109,8 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
   const preferredMode = computed(() => preferredDark.value ? 'dark' : 'light')
 
   const store = storageRef || (storageKey == null
-    ? ref('auto') as Ref<T | BasicColorSchema>
-    : useStorage<T | BasicColorSchema>(storageKey, 'auto', storage, { window, listenToStorageChanges }))
+    ? ref(initialValue) as Ref<T | BasicColorSchema>
+    : useStorage<T | BasicColorSchema>(storageKey, initialValue as BasicColorSchema, storage, { window, listenToStorageChanges }))
 
   const state = computed<T | BasicColorSchema>({
     get() {