toggle inherited elements

packages/vuepress/vuepress-plugin-apidocs/components/EventList.vue

@@ -4,7 +4,8 @@
       <a href="#events" class="header-anchor">#</a> Events
     </h2>
 
-    <div v-for="(event, index) in events" :key="event.name">
+    <div v-for="(event, index) in events" :key="event.name" :class="isInherited(event.inherits)">
+      <small class="inherited" v-if="event.inherits !== undefined">inherited from {{event.inherits}}</small>
       <div class="member-header" :id="`${event.name.toLowerCase()}`">
         <h3 :id="`events_${event.name.toLowerCase()}`">
           <a :href="`#${event.name.toLowerCase()}`" class="header-anchor">#</a> {{event.name}} <Badge v-if="event.deprecated" text="DEPRECATED" type="warn"/>
@@ -54,6 +55,13 @@ export default {
       type: Array,
       default: () => []
     }
+  },
+  methods: {
+    isInherited(value) {
+      if (value != undefined) {
+        return "isInherited"
+      }
+    }
   }
 }
 </script>

packages/vuepress/vuepress-plugin-apidocs/components/MethodList.vue

@@ -4,7 +4,8 @@
       <a href="#methods" class="header-anchor">#</a> Methods
     </h2>
 
-    <div v-for="(method, index) in methods" :key="method.name">
+    <div v-for="(method, index) in methods" :key="method.name" :class="isInherited(method.inherits)">
+      <small class="inherited" v-if="method.inherits !== undefined">inherited from {{method.inherits}}</small>
       <div class="member-header" :id="`${method.name.toLowerCase()}`">
         <h3 :id="`methods_${method.name.toLowerCase()}`">
           <a :href="`#${method.name.toLowerCase()}`" class="header-anchor">#</a> {{method.name}} <Badge v-if="method.deprecated" text="DEPRECATED" type="warn"/>
@@ -64,6 +65,13 @@ export default {
       type: Array,
       default: () => []
     }
+  },
+  methods: {
+    isInherited(value) {
+      if (value != undefined) {
+        return "isInherited"
+      }
+    }
   }
 }
 </script>

packages/vuepress/vuepress-plugin-apidocs/components/PropertyList.vue

@@ -4,9 +4,10 @@
       <a href="#properties" class="header-anchor">#</a> Properties
     </h2>
 
-    <div v-for="(property, index) in properties" :key="property.name">
-      <div class="member-header" :id="`${property.name.toLowerCase()}`">
-        <h3 :id="`properties_${property.name.toLowerCase()}`">
+    <div v-for="(property, index) in properties" :key="property.name" :class="isInherited(property.inherits)">
+      <small class="inherited" v-if="property.inherits !== undefined">inherited from {{property.inherits}}</small>
+      <div class="member-header">
+        <h3 :id="property.name.toLowerCase()">
           <a :href="`#${property.name.toLowerCase()}`" class="header-anchor">#</a> {{property.name}} <Badge v-if="property.permission === 'read-only'" text="READONLY" type="light"/><Badge v-if="property.availability === 'creation'" text="CREATION ONLY" type="info"/><Badge v-if="property.deprecated" text="DEPRECATED" type="warn"/>
         </h3>
         <AvailabilityInfo :platforms="property.platforms"/>
@@ -44,6 +45,11 @@ export default {
     }
   },
   methods: {
+    isInherited(value) {
+      if (value != undefined) {
+        return "isInherited"
+      }
+    },
     normalizeType (type) {
       const typeName = typeof type
       switch (typeName) {

packages/vuepress/vuepress-plugin-apidocs/lib/metadata/processor.js

@@ -108,7 +108,8 @@ class MetadataProcessor {
       headers.push({
         level: 3,
         title: memberMetadata.name,
-        slug: memberType + "_" + memberMetadata.name.toLowerCase()
+        slug: memberType + "_" + memberMetadata.name.toLowerCase(),
+        inherited: memberMetadata.inherits != undefined
       })
     })
     if (headers.length) {

packages/vuepress/vuepress-plugin-apidocs/styles/main.styl

@@ -28,4 +28,4 @@
   .parameter-description
     div
       p
-        margin 0
+        margin 0

packages/vuepress/vuepress-theme-titanium/components/ContentSidebar.vue

@@ -2,6 +2,7 @@
   <div class="content-sidebar-wrapper">
     <div ref="sidebar" class="content-sidebar">
       <p class="content-sidebar-title">{{ title }}</p>
+      <label id="inheritToggle" for="inherited" v-if="isAPI">Hide inherited</label><input type="checkbox" id="inherited" name="inherited" v-model="checkedValue" v-if="isAPI"/>
       <ul class="content-sidebar-links" v-if="items.length">
         <li v-for="(item, i) in items" :key="i">
           <ContentSidebarLink :item="item"/>
@@ -38,7 +39,9 @@ export default {
     title () {
       return this.$themeConfig.contentSidebarTitle || 'Contents'
     },
-
+    isAPI () {
+      return this.$route.path.includes("/api/")
+    },
     items () {
       const headers = groupHeaders(this.$page.headers || [])
       return headers.map(header => {
@@ -57,6 +60,24 @@ export default {
           })
         }
       })
+    },
+    checkedValue: {
+        get() {
+          return this.currentState
+        },
+        set(newValue) {
+          this.currentState = newValue;
+          var elements = document.querySelectorAll(".isInherited");
+          if (newValue) {
+            for (const el of elements) {
+              el.style.display = "none";
+            }
+          } else {
+            for (const el of elements) {
+              el.style.display = "block";
+            }
+          }
+        }
     }
   },
 
@@ -74,6 +95,12 @@ export default {
   height "calc(100vh - %s)" % ($navbarHeight + 4rem)
   overflow-y auto
 
+  #inheritToggle
+    padding 0.4rem 0.4rem 0 0.7rem
+    border-left 1px solid $borderColor
+    cursor pointer
+    display inline-block
+
   ul
     padding 0
     margin 0

packages/vuepress/vuepress-theme-titanium/components/ContentSidebarLink.vue

@@ -38,7 +38,7 @@ function renderLink (h, to, text, active) {
 function renderChildren (h, children, path, route, maxDepth, depth = 1) {
   if (!children || depth > maxDepth) return null
   return h('ul', { class: 'content-sidebar-sub-headers' }, children.map(c => {
-    return h('li', { class: 'content-sidebar-sub-header' }, [
+    return h('li', { class: 'content-sidebar-sub-header' + (c.inherited ? ' isInherited' : '') }, [
       renderLink(h, path + '#' + c.slug, c.title, c.active),
       renderChildren(h, c.children, path, route, maxDepth, depth + 1)
     ])