docs: include ecosystem functions

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>

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,
 ]

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

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