docs(directives): fix api sections

packages/api-generator/src/index.js

@@ -69,12 +69,12 @@ const addComponentApiDescriptions = (componentName, api, locales) => {
 }
 
 const addDirectiveApiDescriptions = (directiveName, api, locales) => {
-  if (api.argument) {
+  if (api.argument.length) {
     for (const localeName of locales) {
       const source = loadLocale(directiveName, localeName)
-      if (!api.argument.description) api.argument.description = {}
+      if (!api.argument[0].description) api.argument[0].description = {}
 
-      api.argument.description[localeName] = source.argument || ''
+      api.argument[0].description[localeName] = source.argument || ''
     }
   }
 

packages/api-generator/src/locale/en/v-intersect.json

@@ -1,7 +1,7 @@
 {
-  "options": {
-    "modifiers.once": "Will only invoke the provided user callback on mount and once intersected. If using the **quiet** modifier will only invoke once.",
-    "modifiers.quiet": "Will not automatically invoke the provided callback on bind.",
-    "value": "The function to invoke when the targeted element is intersected."
+  "argument": "The function to invoke when the targeted element is intersected.",
+  "modifiers": {
+    "once": "Will only invoke the provided user callback on mount and once intersected. If using the **quiet** modifier will only invoke once.",
+    "quiet": "Will not automatically invoke the provided callback on bind."
   }
 }

packages/api-generator/src/locale/en/v-resize.json

@@ -1,6 +1,6 @@
 {
-  "options": {
-    "modifiers.quiet": "`v-resize.quiet=\"callback\"` Will **not** automatically invoke the provided callback on bind.",
-    "value": "`v-resize=\"callback\"` The function to invoke on window resize"
+  "argument": "The function to invoke on window resize",
+  "modifiers": {
+    "quiet": "Will **not** automatically invoke the provided callback on bind."
   }
 }

packages/api-generator/src/locale/en/v-ripple.json

@@ -1,6 +1,3 @@
 {
-  "options": {
-    "class": "`v-ripple=\"{ \"class\": 'my-class' }\"` Applies a custom class to the ripple, used for changing color",
-    "center": "`v-ripple=\"{ \"center\": true }\"` Force ripple to originate from the center of the target"
-  }
+  "argument": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target"
 }

packages/api-generator/src/locale/en/v-scroll.json

@@ -1,7 +1,7 @@
 {
-  "options": {
-    "arg:target": "`v-scroll:#target=\"callback\"` The target watched for scroll changes. Defaults to window but can be changed to any valid id selector.",
-    "arg:self": "`v-scroll.self=\"callback\"` Binds to the element that the the directive is attached.",
-    "value": "`v-scroll=\"callback\"` The function to invoke on target scroll"
+  "argument": "The function to invoke on target scroll",
+  "modifiers": {
+    "#target": "The target watched for scroll changes. Defaults to window but can be changed to any valid id selector.",
+    "self": "Binds to the element that the the directive is attached."
   }
 }

packages/api-generator/src/maps/v-click-outside.js

@@ -1,10 +1,10 @@
 module.exports = {
   'v-click-outside': {
-    argument: {
+    argument: [{
       name: 'argument',
       type: ['((e: Event) => void)', 'ClickOutsideBindingArgs'],
       default: undefined,
       example: 'ts_directive_click_outside_value',
-    },
+    }],
   },
 }

packages/api-generator/src/maps/v-intersect.js

@@ -1,6 +1,6 @@
 module.exports = {
   'v-intersect': {
-    argument: {
+    argument: [{
       name: 'value',
       default: undefined,
       type: ['Function', '{ handler: Function, options?: IntersectionObserverInit }'],
@@ -17,7 +17,7 @@ export default {
   }
 }
 </script>`,
-    },
+    }],
     modifiers: [
       {
         name: 'once',

packages/api-generator/src/maps/v-mutate.js

@@ -1,128 +1,128 @@
 module.exports = {
   'v-mutate': {
-    modifiers: [
-      {
-        name: 'once',
-        default: false,
-        type: ['boolean'],
-        snippet: `
+    argument: [{
+      name: 'argument',
+      default: '(): {}',
+      type: ['function', 'object'],
+      snippet: `
 <template>
-  <div v-mutate.once="onMutate">...</div>
+  <div>
+    // By default v-mutate enables all options
+    // available in the Mutation Observer API
+    <v-card v-mutate="onMutate">...</v-card>
+
+    // A custom options object can be provided
+    // in order to override the defaults
+    <v-card v-mutate="mutate">...</v-card>
+  </div>
 </template>
 
 <script>
   export default {
+    data () {
+      return {
+        mutate: {
+          options: {
+            attributes: true,
+            subtree: true,
+          },
+          handler: this.onMutate
+        },
+      }
+    },
+
     methods: {
       onMutate (mutationsList, observer) {}
     }
   }
 </script>`,
+    }],
+    modifiers: [
+      {
+        name: 'once',
+        default: false,
+        type: ['boolean'],
+        snippet: `
+  <template>
+    <div v-mutate.once="onMutate">...</div>
+  </template>
+
+  <script>
+    export default {
+      methods: {
+        onMutate (mutationsList, observer) {}
+      }
+    }
+  </script>`,
       },
       {
         name: 'attr',
         default: true,
         type: ['boolean'],
         snippet: `
-<template>
-  <div v-mutate.attr="onMutate">...</div>
-</template>
+  <template>
+    <div v-mutate.attr="onMutate">...</div>
+  </template>
 
-<script>
-  export default {
-    methods: {
-      onMutate (mutationsList, observer) {}
+  <script>
+    export default {
+      methods: {
+        onMutate (mutationsList, observer) {}
+      }
     }
-  }
-</script>`,
+  </script>`,
       },
       {
         name: 'char',
         default: true,
         type: ['boolean'],
         snippet: `
-<template>
-  <div v-mutate.char="onMutate">...</div>
-</template>
+  <template>
+    <div v-mutate.char="onMutate">...</div>
+  </template>
 
-<script>
-  export default {
-    methods: {
-      onMutate (mutationsList, observer) {}
+  <script>
+    export default {
+      methods: {
+        onMutate (mutationsList, observer) {}
+      }
     }
-  }
-</script>`,
+  </script>`,
       },
       {
         name: 'child',
         default: true,
         type: ['boolean'],
         snippet: `
-<template>
-  <div v-mutate.child="onMutate">...</div>
-</template>
+  <template>
+    <div v-mutate.child="onMutate">...</div>
+  </template>
 
-<script>
-  export default {
-    methods: {
-      onMutate (mutationsList, observer) {}
+  <script>
+    export default {
+      methods: {
+        onMutate (mutationsList, observer) {}
+      }
     }
-  }
-</script>`,
+  </script>`,
       },
       {
         name: 'sub',
         default: true,
         type: ['boolean'],
         snippet: `
-<template>
-  <div v-mutate.attr.char.sub="onMutate">...</div>
-</template>
+  <template>
+    <div v-mutate.attr.char.sub="onMutate">...</div>
+  </template>
 
-<script>
-  export default {
-    methods: {
-      onMutate (mutationsList, observer) {}
+  <script>
+    export default {
+      methods: {
+        onMutate (mutationsList, observer) {}
+      }
     }
-  }
-</script>`,
+  </script>`,
       },
     ],
-    argument: {
-      name: 'argument',
-      default: '(): {}',
-      type: ['function', 'object'],
-      snippet: `
-<template>
-  <div>
-    // By default v-mutate enables all options
-    // available in the Mutation Observer API
-    <v-card v-mutate="onMutate">...</v-card>
-
-    // A custom options object can be provided
-    // in order to override the defaults
-    <v-card v-mutate="mutate">...</v-card>
-  </div>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        mutate: {
-          options: {
-            attributes: true,
-            subtree: true,
-          },
-          handler: this.onMutate
-        },
-      }
-    },
-
-    methods: {
-      onMutate (mutationsList, observer) {}
-    }
-  }
-</script>`,
-    },
   },
 }

packages/api-generator/src/maps/v-resize.js

@@ -1,10 +1,10 @@
 module.exports = {
   'v-resize': {
-    argument: {
+    argument: [{
       name: 'argument',
       type: ['Function'],
       default: undefined,
-    },
+    }],
     modifiers: [
       {
         name: 'quiet',

packages/api-generator/src/maps/v-ripple.js

@@ -1,21 +1,13 @@
 module.exports = {
   'v-ripple': {
-    argument: {
+    argument: [{
       name: 'argument',
       type: ['object'],
       default: undefined,
-    },
-    modifiers: [
-      {
-        name: 'center',
-        default: 'false',
-        type: ['boolean'],
+      example: {
+        center: 'boolean',
+        class: 'string',
       },
-      {
-        name: 'class',
-        default: '',
-        type: ['string'],
-      },
-    ],
+    }],
   },
 }

packages/api-generator/src/maps/v-scroll.js

@@ -1,10 +1,10 @@
 module.exports = {
   'v-scroll': {
-    argument: {
+    argument: [{
       name: 'argument',
       type: ['Function'],
       default: undefined,
-    },
+    }],
     modifiers: [
       {
         name: '#target',

packages/api-generator/src/maps/v-touch.js

@@ -1,6 +1,6 @@
 module.exports = {
   'v-touch': {
-    argument: {
+    argument: [{
       name: 'argument',
       type: ['object'],
       example: {
@@ -13,6 +13,6 @@ module.exports = {
         down: 'Function',
       },
       default: undefined,
-    },
+    }],
   },
 }

packages/docs/src/components/api/ApiTable.vue

@@ -106,6 +106,8 @@
     events: ['name', 'description'],
     sass: ['name', 'default', 'description'],
     functions: ['name', 'signature', 'description'],
+    modifiers: ['name', 'type', 'description'],
+    argument: ['type', 'description'],
   }
 
   export default {
@@ -134,7 +136,7 @@
 
     methods: {
       getType (value) {
-        const type = Array.isArray(value) ? value.join(', ') : value
+        const type = Array.isArray(value) ? value.join(' | ') : value
 
         return Prism.highlight(type, Prism.languages.typescript)
       },