feat(docs): Filtering for API cards

Author: rstoenescu

README.md

@@ -139,6 +139,6 @@ Until Quasar reaches a 1.0 release (soon), breaking changes will be released wit
 
 ## License
 
-Copyright (c) 2016-present Razvan Stoenescu
+Copyright (c) 2015-present Razvan Stoenescu
 
 [MIT License](http://en.wikipedia.org/wiki/MIT_License)

docs/build/md-loader-utils.js

@@ -14,11 +14,11 @@ module.exports.getVueComponent = function (rendered, data, toc) {
       meta: {
         title: \`${data.title}\`
       },
-      methods: {
-        copyHeading
-      },
       preFetch ({ store }) {
         store.commit('updateToc', ${toc})
+      },
+      methods: {
+        copyHeading
       }
     }
     </script>`

docs/src/components/ApiRows.js

@@ -220,8 +220,7 @@ export default {
         : child
     },
 
-    props (h) {
-      const props = this.api.props
+    props (h, props) {
       const child = []
 
       for (let propName in props) {
@@ -233,8 +232,7 @@ export default {
       return child
     },
 
-    slots (h) {
-      const slots = this.api.slots
+    slots (h, slots) {
       const child = []
 
       for (let slot in slots) {
@@ -249,8 +247,7 @@ export default {
       return child
     },
 
-    scopedSlots (h) {
-      const scopedSlots = this.api.scopedSlots
+    scopedSlots (h, scopedSlots) {
       const child = []
 
       for (let slot in scopedSlots) {
@@ -262,8 +259,7 @@ export default {
       return child
     },
 
-    events (h) {
-      const events = this.api.events
+    events (h, events) {
       const child = []
 
       for (let eventName in events) {
@@ -303,15 +299,14 @@ export default {
       return child
     },
 
-    methods (h) {
-      const methods = this.api.methods
+    methods (h, methods) {
       const child = []
 
       for (let methodName in methods) {
         const method = methods[methodName]
 
         const nodes = [
-          this.getDiv(h, 12, 'Name', `@${methodName}${getMethodParams(method)}${getMethodReturnValue(method)}`),
+          this.getDiv(h, 12, 'Name', `${methodName}${getMethodParams(method)}${getMethodReturnValue(method)}`),
           this.getDiv(h, 12, 'Description', method.desc)
         ]
 
@@ -356,24 +351,23 @@ export default {
       return child
     },
 
-    value (h) {
+    value (h, value) {
       return [
         h('div', { staticClass: 'api-row row' }, [
-          this.getDiv(h, 12, 'Type', getStringType(this.api.value.type))
-        ].concat(this.getProp(h, this.api.value, void 0, true)))
+          this.getDiv(h, 12, 'Type', getStringType(value.type))
+        ].concat(this.getProp(h, value, void 0, true)))
       ]
     },
 
-    arg (h) {
+    arg (h, arg) {
       return [
         h('div', { staticClass: 'api-row row' }, [
-          this.getDiv(h, 12, 'Type', getStringType(this.api.arg.type))
-        ].concat(this.getProp(h, this.api.arg, void 0, true)))
+          this.getDiv(h, 12, 'Type', getStringType(arg.type))
+        ].concat(this.getProp(h, arg, void 0, true)))
       ]
     },
 
-    modifiers (h) {
-      const modifiers = this.api.modifiers
+    modifiers (h, modifiers) {
       const child = []
 
       for (let modifierName in modifiers) {
@@ -393,16 +387,15 @@ export default {
       return child
     },
 
-    injection (h) {
+    injection (h, injection) {
       return [
         h('div', { staticClass: 'api-row row' }, [
-          this.getDiv(h, 12, 'Name', this.api.injection)
+          this.getDiv(h, 12, 'Name', injection)
         ])
       ]
     },
 
-    quasarConfOptions (h) {
-      const conf = this.api.quasarConfOptions
+    quasarConfOptions (h, conf) {
       const child = []
 
       for (let def in conf.definition) {
@@ -429,6 +422,16 @@ export default {
   },
 
   render (h) {
-    return h('div', { staticClass: 'api-rows' }, this[this.which](h))
+    const api = this.api[this.which]
+
+    const content = Object.keys(api).length !== 0
+      ? this[this.which](h, api)
+      : [
+        h('div', { staticClass: 'q-pa-md text-grey-7' }, [
+          'No matching entries found. Please refine the filter.'
+        ])
+      ]
+
+    return h('div', { staticClass: 'api-rows' }, content)
   }
 }

docs/src/components/DocApi.vue

@@ -6,7 +6,7 @@ q-card.doc-api.q-my-lg(v-if="ready")
 
   q-separator
 
-  div.bg-grey-2.text-grey-7.flex.items-center.no-wrap
+  div.bg-grey-2.text-grey-7.flex.no-wrap
     q-tabs(v-model="currentTab", align="left", dense)
       q-tab(
         v-for="tab in tabs"
@@ -15,11 +15,25 @@ q-card.doc-api.q-my-lg(v-if="ready")
         :label="tab"
       )
 
+    q-input.col.q-mx-sm(
+      ref="input",
+      v-model="filter",
+      dense,
+      input-class="text-right",
+      borderless,
+      placeholder="Filter..."
+    )
+      q-icon.cursor-pointer(
+        slot="append",
+        :name="filter !== '' ? 'clear' : 'search'"
+        @click="onFilterClick"
+      )
+
   q-separator
 
   q-tab-panels(v-model="currentTab", animated)
     q-tab-panel(v-for="tab in tabs", :name="tab", :key="tab" class="q-pa-none")
-      ApiRows(:which="tab", :api="api")
+      ApiRows(:which="tab", :api="filteredApi")
 </template>
 
 <script>
@@ -45,19 +59,63 @@ export default {
     return {
       ready: false,
       currentTab: null,
-      filter: ''
+      filter: '',
+      filteredApi: {}
+    }
+  },
+
+  watch: {
+    filter (val) {
+      val = val.trim().toLowerCase()
+
+      if (val === '') {
+        this.filteredApi = this.api
+        return
+      }
+
+      const api = {}
+
+      this.tabs.forEach(tab => {
+        if (tab === 'injection') {
+          api[tab] = this.api[tab]
+          return
+        }
+
+        api[tab] = {}
+        const tabApi = this.api[tab]
+
+        Object.keys(tabApi).forEach(name => {
+          if (
+            (name.indexOf(val) > -1) ||
+            (tabApi[name].desc !== void 0 && tabApi[name].desc.toLowerCase().indexOf(val) > -1)
+          ) {
+            console.log(tabApi[name])
+            api[tab][name] = tabApi[name]
+          }
+        })
+      })
+
+      this.filteredApi = api
     }
   },
 
   methods: {
     parseJson (name, { type, ...api }) {
       this.api = api
+      this.filteredApi = api
       this.apiType = type
 
       this.name = name
       this.type = `${type === 'plugin' ? 'Quasar' : 'Vue'} ${type.charAt(0).toUpperCase()}${type.substring(1)}`
       this.tabs = Object.keys(api)
       this.currentTab = this.tabs[0]
+    },
+
+    onFilterClick () {
+      if (this.filter !== '') {
+        this.filter = ''
+      }
+      this.$refs.input.focus()
     }
   },
 

docs/src/pages/quasar-plugins/addressbar-color.md

@@ -53,3 +53,6 @@ export default {
 ::: tip
 Calling `set()` with no parameters will use the primary color.
 :::
+
+## API
+<doc-api file="AddressbarColor" />

docs/src/pages/quasar-plugins/cookies.md

@@ -49,13 +49,13 @@ this.$q.cookies.get('cookie_name')
 // outside of a Vue file
 import { Cookies } from 'quasar'
 
-var cookies = Cookies.all()
+var cookies = Cookies.getAll()
 ```
 `cookies` variable will be an object with key-value pairs (cookie_name : cookie_value).
 
 ```js
 // inside of a Vue file
-this.$q.cookies.all()
+this.$q.cookies.getAll()
 ```
 
 ## Verify if Cookie is Set
@@ -131,3 +131,6 @@ Cookies.remove('cookie_name')
 // inside of a Vue file
 this.$q.cookies.remove('cookie_name')
 ```
+
+## API
+<doc-api file="Cookies" />

quasar/dev/components/other/cookies.vue

@@ -30,12 +30,12 @@
 export default {
   data () {
     return {
-      cookies: this.$q.cookies.all()
+      cookies: this.$q.cookies.getAll()
     }
   },
   methods: {
     refresh () {
-      this.cookies = this.$q.cookies.all()
+      this.cookies = this.$q.cookies.getAll()
     },
     add (name) {
       this.$q.cookies.set(name, 'val')

quasar/src/plugins/Cookies.js

@@ -148,7 +148,7 @@ export function getObject (ctx = {}) {
     set: (key, val, opts) => set(key, val, opts, ssr),
     has: key => has(key, ssr),
     remove: (key, options) => remove(key, options, ssr),
-    all: () => get(null, ssr)
+    getAll: () => get(null, ssr)
   }
 }
 

quasar/src/plugins/Cookies.json

@@ -19,6 +19,17 @@
       }
     },
 
+    "getAll": {
+      "desc": "Get all cookies",
+      "returns": {
+        "type": "Object",
+        "desc": "Object with cookie names (as keys) and their values",
+        "examples": [
+          "{ userId: 'john12', XFrame: 'x534' }"
+        ]
+      }
+    },
+
     "set": {
       "desc": "Set cookie",
       "params": {
@@ -121,17 +132,6 @@
       }
     },
 
-    "all": {
-      "desc": "Get all cookies",
-      "returns": {
-        "type": "Object",
-        "desc": "Object with cookie names (as keys) and their values",
-        "examples": [
-          "{ userId: 'john12', XFrame: 'x534' }"
-        ]
-      }
-    },
-
     "parseSSR": {
       "desc": "For SSR usage only, and only on the global import (not on $q.cookies)",
       "params": {