From b8a26678de12f0720f05e04082659df433682ccd Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 14 Feb 2022 18:52:34 +0800
Subject: [PATCH] docs: include ecosystem functions

---
 README.md                                     |  2 +-
 meta/ecosystem-functions.ts                   | 62 +++++++++++++++++--
 meta/types.ts                                 |  2 +-
 .../theme/components/FunctionsList.vue        |  2 +-
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 3e07cfc7b7f1..33136244cb7d 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-189%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-196%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>
diff --git a/meta/ecosystem-functions.ts b/meta/ecosystem-functions.ts
index 244e29fd9b8d..bd735232ec9c 100644
--- a/meta/ecosystem-functions.ts
+++ b/meta/ecosystem-functions.ts
@@ -4,21 +4,75 @@ export const head: VueUseFunction[] = [
   {
     name: 'createHead',
     package: 'head',
-    lastUpdated: 0,
-    description: 'Create the head manager instance.',
+    description: 'create the head manager instance.',
     category: '@Head',
     external: 'https://github.com/vueuse/head#api',
   },
   {
     name: 'useHead',
     package: 'head',
-    lastUpdated: 0,
-    description: 'Update head meta tags reactively.',
+    description: 'update head meta tags reactively.',
     category: '@Head',
     external: 'https://github.com/vueuse/head#api',
   },
 ]
 
+const motionDefaults = {
+  package: 'motion',
+  category: '@Motion',
+}
+
+export const motion: VueUseFunction[] = [
+  {
+    ...motionDefaults,
+    name: 'useMotion',
+    description: 'putting your components in motion.',
+    external: 'https://motion.vueuse.org/api/use-motion.html',
+  },
+  {
+    ...motionDefaults,
+    name: 'useSpring',
+    description: 'spring animations.',
+    external: 'https://motion.vueuse.org/api/use-spring.html',
+  },
+  {
+    ...motionDefaults,
+    name: 'useMotionProperties',
+    description: 'access Motion Properties for a target element.',
+    external: 'https://motion.vueuse.org/api/use-motion-properties.html',
+  },
+  {
+    ...motionDefaults,
+    name: 'useMotionVariants',
+    description: 'handle the Variants state and selection.',
+    external: 'https://motion.vueuse.org/api/use-motion-variants.html',
+  },
+  {
+    ...motionDefaults,
+    name: 'useElementStyle',
+    description: 'sync a reactive object to a target element CSS styling',
+    external: 'https://motion.vueuse.org/api/use-element-style.html',
+  },
+  {
+    ...motionDefaults,
+    name: 'useElementTransform',
+    description: 'sync a reactive object to a target element CSS transform.',
+    external: 'https://motion.vueuse.org/api/use-element-transform.html',
+  },
+]
+
+export const sound: VueUseFunction[] = [
+  {
+    name: 'useSound',
+    package: 'sound',
+    description: 'play sound effects reactively.',
+    category: '@Sound',
+    external: 'https://github.com/vueuse/sound#examples',
+  },
+]
+
 export const ecosystemFunctions = [
   ...head,
+  ...motion,
+  ...sound,
 ]
diff --git a/meta/types.ts b/meta/types.ts
index bdabe6a773c5..ad0b631ad425 100644
--- a/meta/types.ts
+++ b/meta/types.ts
@@ -20,7 +20,7 @@ export interface PackageManifest {
 export interface VueUseFunction {
   name: string
   package: string
-  lastUpdated: number
+  lastUpdated?: number
   category?: string
   description?: string
   docs?: string
diff --git a/packages/.vitepress/theme/components/FunctionsList.vue b/packages/.vitepress/theme/components/FunctionsList.vue
index 7c441b4d5e29..1bad3babc8b3 100644
--- a/packages/.vitepress/theme/components/FunctionsList.vue
+++ b/packages/.vitepress/theme/components/FunctionsList.vue
@@ -34,7 +34,7 @@ const result = computed(() => {
   else {
     const fns = [...items.value]
     if (sortMethod.value === 'updated')
-      fns.sort((a, b) => b.lastUpdated - a.lastUpdated)
+      fns.sort((a, b) => (b.lastUpdated) || 0 - (a.lastUpdated || 0))
     else if (sortMethod.value === 'name')
       fns.sort((a, b) => a.name.localeCompare(b.name))
     else