Merge branch 'main' into feature/useAsyncValidator

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: "\U0001F41E Bug report"
+name: 🐞 Bug report
 description: Report an issue with VueUse
 labels: [pending triage]
 body:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,6 @@
-name: "\U0001F680 New feature proposal"
+name: 🚀 New feature proposal
 description: Propose a new feature to be added to VueUse
-labels: ["enhancement"]
+labels: [enhancement]
 body:
   - type: markdown
     attributes:
@@ -10,14 +10,14 @@ body:
     id: feature-description
     attributes:
       label: Clear and concise description of the problem
-      description: "As a developer using VueUse I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!"
+      description: 'As a developer using VueUse I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
     validations:
       required: true
   - type: textarea
     id: suggested-solution
     attributes:
       label: Suggested solution
-      description: "In module [xy] we could provide following implementation..."
+      description: 'In module [xy] we could provide following implementation...'
     validations:
       required: true
   - type: textarea

.github/workflows/ci.yml

@@ -15,13 +15,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           cache: pnpm
@@ -44,13 +44,13 @@ jobs:
       fail-fast: false
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node version to ${{ matrix.node }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
           cache: pnpm

.github/workflows/export-size.yml

@@ -12,7 +12,7 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: antfu/export-size-action@main
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish.yml

@@ -10,21 +10,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6.24.3
+        uses: pnpm/action-setup@v2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           registry-url: https://registry.npmjs.org/
-          cache: "pnpm"
+          cache: pnpm
 
       - run: pnpm install
 
@@ -36,5 +34,5 @@ jobs:
       - run: pnpm run publish:ci
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-          NODE_OPTIONS: '--max-old-space-size=6144'
+          NODE_OPTIONS: --max-old-space-size=6144
 

.vscode/extensions.json

@@ -2,6 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "bierner.lit-html",
-    "antfu.vite",
+    "antfu.vite"
   ]
 }

README.md

@@ -1,5 +1,11 @@
 <p align="center">
-<a href="https://github.com/vueuse/vueuse"><img src="https://raw.githubusercontent.com/vueuse/vueuse/main/packages/public/logo-vertical.png" alt="VueUse - Collection of essential Vue Composition Utilities" width="300"></a><br>
+<a href="https://github.com/vueuse/vueuse#gh-light-mode-only">
+  <img src="https://raw.githubusercontent.com/vueuse/vueuse/main/packages/public/logo-vertical.png#gh-light-mode-only" alt="VueUse - Collection of essential Vue Composition Utilities" width="300">
+</a>
+<a href="https://github.com/vueuse/vueuse#gh-dark-mode-only">
+  <img src="https://raw.githubusercontent.com/vueuse/vueuse/main/packages/public/logo-vertical-dark.png#gh-dark-mode-only" alt="VueUse - Collection of essential Vue Composition Utilities" width="300">
+</a>
+<br>
 Collection of essential Vue Composition Utilities
 </p>
 

meta/ecosystem-functions.ts

@@ -71,8 +71,26 @@ export const sound: VueUseFunction[] = [
   },
 ]
 
+export const schemaOrg: VueUseFunction[] = [
+  {
+    name: 'createSchemaOrg',
+    package: 'schema-org',
+    description: 'create the schema.org manager instance.',
+    category: '@SchemaOrg',
+    external: 'https://vue-schema-org.netlify.app/api/core/create-schema-org.html',
+  },
+  {
+    name: 'useSchemaOrg',
+    package: 'schema-org',
+    description: 'update schema.org reactively.',
+    category: '@SchemaOrg',
+    external: 'https://vue-schema-org.netlify.app/api/core/use-schema-org.html',
+  },
+]
+
 export const ecosystemFunctions = [
   ...head,
   ...motion,
+  ...schemaOrg,
   ...sound,
 ]

meta/packages.ts

@@ -74,6 +74,7 @@ export const packages: PackageManifest[] = [
       'nprogress',
       'jwt-decode',
       'focus-trap',
+      'change-case',
       'drauu',
       '@vueuse/core',
       '@vueuse/shared',

netlify.toml

@@ -5,7 +5,7 @@
 
 [build]
   publish = "packages/.vitepress/dist"
-  command = "npx pnpm i --store=node_modules/.pnpm-store && npm run docs:build"
+  command = "npx pnpm i --store=node_modules/.pnpm-store && npm run install-fonts && npm run docs:build"
 
 [[redirects]]
   from = "https://vueuse.js.org/*"

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "8.2.5",
+  "version": "8.4.2",
   "private": true,
-  "packageManager": "pnpm@6.32.3",
+  "packageManager": "pnpm@7.0.0",
   "description": "Collection of essential Vue Composition Utilities",
   "license": "MIT",
   "author": "Anthony Fu<https://github.com/antfu>",
@@ -16,11 +16,12 @@
     "docs": "vitepress dev packages --open",
     "docs:build": "nr update:full && vitepress build packages && nr build:redirects && esno scripts/post-docs.ts",
     "docs:serve": "vitepress serve packages",
-    "lint": "eslint --ext=js,ts,tsx,vue,md,json .",
+    "lint": "eslint .",
     "lint:fix": "nr lint --fix",
     "publish:ci": "esno scripts/publish.ts",
+    "install-fonts": "gfi install Inter && gfi install Fira Code",
     "release": "esno scripts/release.ts && git push --follow-tags",
-    "size": " esno scripts/export-size.ts",
+    "size": "esno scripts/export-size.ts",
     "test": "nr test:3",
     "test:2": "vue-demi-switch 2 vue2 && vitest run --silent",
     "test:3": "vue-demi-switch 3 && vitest run",
@@ -33,69 +34,72 @@
     "watch": "esno scripts/build.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.20.2",
-    "@antfu/ni": "^0.14.0",
-    "@iconify/json": "^2.1.25",
+    "@antfu/eslint-config": "^0.23.0",
+    "@antfu/ni": "^0.16.2",
+    "@iconify/json": "^2.1.35",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "^17.0.23",
-    "@types/prettier": "^2.4.4",
+    "@types/node": "^17.0.31",
+    "@types/prettier": "^2.6.0",
     "@types/semver": "^7.3.9",
-    "@vitest/ui": "^0.9.0",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/composition-api": "^1.4.9",
-    "@vue/test-utils": "^2.0.0-rc.19",
-    "@vue/theme": "^1.0.1",
-    "axios": "^0.26.1",
+    "@types/sharp": "^0.30.2",
+    "@vitest/ui": "^0.10.2",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/composition-api": "^1.6.0",
+    "@vue/test-utils": "^2.0.0-rc.21",
+    "@vue/theme": "^1.0.2",
+    "axios": "^0.27.2",
     "bumpp": "^7.1.1",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.0",
     "esbuild-register": "^3.3.2",
-    "eslint": "^8.12.0",
+    "eslint": "^8.14.0",
     "esno": "^0.14.1",
     "export-size": "^0.5.2",
     "fast-glob": "^3.2.11",
     "firebase": "^8.10.0",
-    "fs-extra": "^10.0.1",
-    "fuse.js": "^6.5.3",
+    "fs-extra": "^10.1.0",
+    "fuse.js": "^6.6.0",
+    "google-font-installer": "^1.2.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^19.0.0",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^12.4.1",
     "markdown-table": "^3.0.2",
     "md5": "^2.3.0",
     "msw": "^0.39.2",
-    "node-fetch": "^3.2.3",
-    "ohmyfetch": "^0.4.15",
-    "pnpm": "^6.32.4",
-    "postcss": "^8.4.12",
+    "node-fetch": "^3.2.4",
+    "ohmyfetch": "^0.4.16",
+    "pnpm": "^7.0.0",
+    "postcss": "^8.4.13",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.6.2",
     "prism-theme-vars": "^0.2.2",
+    "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.70.1",
-    "rollup-plugin-dts": "^4.2.0",
+    "rollup": "^2.71.1",
+    "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-esbuild": "^4.9.1",
-    "simple-git": "^3.5.0",
+    "sharp": "^0.30.4",
+    "simple-git": "^3.7.1",
     "simple-git-hooks": "^2.7.0",
-    "typescript": "4.6.3",
-    "unocss": "^0.30.11",
-    "unplugin-icons": "^0.14.1",
-    "unplugin-vue-components": "^0.18.5",
-    "vite": "^2.9.1",
-    "vite-plugin-inspect": "^0.4.3",
-    "vite-plugin-pwa": "^0.11.13",
+    "typescript": "4.6.4",
+    "unocss": "^0.32.9",
+    "unplugin-icons": "^0.14.3",
+    "unplugin-vue-components": "^0.19.3",
+    "vite": "^2.9.7",
+    "vite-plugin-inspect": "^0.5.0",
+    "vite-plugin-pwa": "^0.12.0",
     "vitepress": "^0.22.3",
-    "vitest": "^0.9.0",
-    "vue": "^3.2.31",
+    "vitest": "^0.10.2",
+    "vue": "^3.2.33",
     "vue2": "npm:vue@^2.6.14"
   },
   "lint-staged": {
-    "{packages,.vitepress,scripts,meta}/**/*.{js,ts,tsx,vue,md}": [
+    "*.{js,ts,tsx,vue,md}": [
       "eslint --fix"
     ]
   },

packages/.vitepress/config.ts

@@ -4,7 +4,7 @@ import { currentVersion, versions } from '../../meta/versions'
 import { addonCategoryNames, categoryNames, coreCategoryNames, metadata } from '../../packages/metadata/metadata'
 import highlight from './plugins/highlight'
 
-const themeConfig = async() => {
+const themeConfig = async () => {
   const config = await base()
   config.markdown.highlight = await highlight()
   return config
@@ -121,14 +121,14 @@ const config = {
             text: 'Versions',
             items: versions.map(i => i.version === currentVersion
               ? {
-                text: `${i.version} (Current)`,
-                activeMatch: '/', // always active
-                link: '/',
-              }
+                  text: `${i.version} (Current)`,
+                  activeMatch: '/', // always active
+                  link: '/',
+                }
               : {
-                text: i.version,
-                link: i.link,
-              },
+                  text: i.version,
+                  link: i.link,
+                },
             ),
           },
         ],

packages/.vitepress/plugins/highlight.ts

@@ -12,7 +12,7 @@ function escapeHtml(html: string) {
   return html.replace(/[&<>"']/g, chr => htmlEscapes[chr])
 }
 
-export default async() => {
+export default async () => {
   const highlighter = await getHighlighter({
     themes: [
       'vitesse-dark',

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

@@ -5,9 +5,9 @@ import { computed } from 'vue'
 import type { CommitInfo } from '../@vueuse/metadata'
 import { renderCommitMessage } from '../utils'
 
-const allCommits = changelog as CommitInfo[]
 const props = defineProps<{ fn: string }>()
 
+const allCommits = changelog as CommitInfo[]
 const commits = computed(() => {
   const commits = allCommits.filter(c => c.version || c.functions?.includes(props.fn))
   return commits.filter((i, idx) => {

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

@@ -32,7 +32,7 @@ const link = computed(() => {
   <div text="sm" class="whitespace-nowrap overflow-hidden overflow-ellipsis">
     <a v-bind="link" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded items-center" flex="inline gap-1">
       <span v-html="styledName(fn.name)" />
-      <carbon-launch v-if="fn.external" class="opacity-80 text-xs" />
+      <i v-if="fn.external" i-carbon-launch class="opacity-80 text-xs" />
     </a>
     -
     <span class="overflow-hidden overflow-ellipsis" v-html="renderMarkdown(fn.description)" />

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

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
+import { useTimeAgo } from '@vueuse/core'
 import { computed } from 'vue'
 import { functions } from '../../../../packages/metadata/metadata'
 
-dayjs.extend(relativeTime)
-
 const props = defineProps<{ fn: string }>()
 
 const info = computed(() => functions.find(i => i.name === props.fn))
-const format = (ts: number) => dayjs(ts).fromNow()
+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 getFunctionLink = (fn: string) => {
@@ -34,7 +32,7 @@ const getFunctionLink = (fn: string) => {
       <div opacity="50">
         Last Changed
       </div>
-      <div>{{ format(info.lastUpdated) }}</div>
+      <div>{{ lastUpdated }}</div>
     </template>
     <template v-if="info.alias?.length">
       <div opacity="50">