[feat] General On This Page Index

addon/components/api/x-class/component.js

@@ -1,12 +1,14 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { or } from '@ember/object/computed';
 import { capitalize } from '@ember/string';
 import { memberFilter }  from '../../../utils/computed';
 
 import layout from './template';
 
 export default Component.extend({
   layout,
+  tagName: '',
 
   showInherited: false,
   showProtected: false,
@@ -17,6 +19,13 @@ export default Component.extend({
   methods: memberFilter('class', 'methods'),
   fields: memberFilter('class', 'fields'),
 
+  hasToggles: or(
+    'component.hasInherited',
+    'component.hasProtected',
+    'component.hasPrivate',
+    'component.hasDeprecated',
+  ),
+
   hasContents: computed('class', {
     get() {
       let klass = this.get('class');

addon/components/api/x-class/template.hbs

@@ -4,32 +4,23 @@
 <div data-test-class-description>{{{class.description}}}</div>
 
 {{#if hasContents}}
-  <div class="flex flex-row-reverse">
-    {{api/x-index
-      options=(hash
-        inherited=inherited
-        protected=protected
-        private=private
-        deprecated=deprecated
-      )
-
-      onOptionToggle=(action 'updateFilter')
-
-      sections=(hash
-        constructors=constructors
-        fields=fields
-        accessors=accessors
-        methods=methods
+  {{#if hasToggles}}
+    {{api/x-toggles
+      toggles=(hash
+        inherited=(if component.hasInherited showInherited)
+        protected=(if component.hasProtected showProtected)
+        private=(if component.hasPrivate showPrivate)
+        deprecated=(if component.hasDeprecated showDeprecated)
       )
     }}
+  {{/if}}
 
-    {{api/x-sections
-      sections=(hash
-        constructors=class.constructors
-        fields=class.fields
-        accessors=class.accessors
-        methods=class.methods
-      )
-    }}
-  </div>
+  {{api/x-sections
+    sections=(hash
+      constructors=class.constructors
+      fields=class.fields
+      accessors=class.accessors
+      methods=class.methods
+    )
+  }}
 {{/if}}

addon/components/api/x-component/component.js

@@ -1,13 +1,14 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { alias, or } from '@ember/object/computed';
 import { capitalize } from '@ember/string';
 import { memberFilter }  from '../../../utils/computed';
 
 import layout from './template';
 
 export default Component.extend({
   layout,
+  tagName: '',
 
   showInherited: false,
   showInternal: false,
@@ -22,6 +23,14 @@ export default Component.extend({
   methods: memberFilter('component', 'methods'),
   fields: memberFilter('component', 'fields'),
 
+  hasToggles: or(
+    'component.hasInherited',
+    'component.hasInternal',
+    'component.hasProtected',
+    'component.hasPrivate',
+    'component.hasDeprecated',
+  ),
+
   hasContents: computed('component', {
     get() {
       let component = this.get('component');

addon/components/api/x-component/template.hbs

@@ -4,37 +4,28 @@
 <div data-test-component-name>{{{component.description}}}</div>
 
 {{#if hasContents}}
-  <div class="flex flex-row-reverse">
-    {{api/x-index
-      options=(hash
-        inherited=(hash shouldShow=component.hasInherited value=showInherited)
-        internal=(hash shouldShow=component.hasInternal value=showInternal)
-        protected=(hash shouldShow=component.hasProtected value=showProtected)
-        private=(hash shouldShow=component.hasPrivate value=showPrivate)
-        deprecated=(hash shouldShow=component.hasDeprecated value=showDeprecated)
+  {{#if hasToggles}}
+    {{api/x-toggles
+      toggles=(hash
+        inherited=(if component.hasInherited showInherited)
+        internal=(if component.hasInternal showInternal)
+        protected=(if component.hasProtected showProtected)
+        private=(if component.hasPrivate showPrivate)
+        deprecated=(if component.hasDeprecated showDeprecated)
       )
 
-      onOptionToggle=(action 'updateFilter')
-
-      sections=(hash
-        constructors=constructors
-        yields=yields
-        arguments=arguments
-        fields=fields
-        accessors=accessors
-        methods=methods
-      )
+      onToggle=(action 'updateFilter')
     }}
+  {{/if}}
 
-    {{api/x-sections
-      sections=(hash
-        constructors=constructors
-        yields=yields
-        arguments=arguments
-        fields=fields
-        accessors=accessors
-        methods=methods
-      )
-    }}
-  </div>
+  {{api/x-sections
+    sections=(hash
+      constructors=constructors
+      yields=yields
+      arguments=arguments
+      fields=fields
+      accessors=accessors
+      methods=methods
+    )
+  }}
 {{/if}}

addon/components/api/x-module/component.js

@@ -2,5 +2,6 @@ import Component from '@ember/component';
 import layout from './template';
 
 export default Component.extend({
-  layout
+  layout,
+  tagName: '',
 });

addon/components/api/x-module/template.hbs

@@ -1,19 +1,8 @@
-<div class="flex flex-row-reverse">
-  {{api/x-index
-    sections=(hash
-      classes=module.classes
-      components=module.components
-      functions=module.functions
-      variables=module.variables
-    )
-  }}
-
-  {{api/x-sections
-    sections=(hash
-      classes=module.classes
-      components=module.components
-      functions=module.functions
-      variables=module.variables
-    )
-  }}
-</div>
+{{api/x-sections
+  sections=(hash
+    classes=module.classes
+    components=module.components
+    functions=module.functions
+    variables=module.variables
+  )
+}}

addon/components/api/x-sections/style.scss

@@ -16,26 +16,9 @@
 }
 
 .item-section__item-header {
-  margin-left: -1em;
-
   a {
     color: #333;
     text-decoration: none;
-
-    &:before {
-      content: '\B6';
-      cursor: pointer;
-      display: block;
-      float: left;
-      width: 1em;
-      visibility: hidden;
-
-      color: #aaa;
-    }
-
-    &:hover:before {
-      visibility: visible;
-    }
   }
 }
 

addon/components/api/x-sections/template.hbs

@@ -1,48 +1,46 @@
-<div class="flex-1">
-  {{#each-in sections as |section items|}}
-    {{#if items}}
-      <section data-test-api-section class="item-section">
-        <h2 data-test-section-header={{section}} class='docs-h2'>
-          {{capitalize section}}
-        </h2>
+{{#each-in sections as |section items|}}
+  {{#if items}}
+    <section data-test-api-section class="item-section">
+      <h2 data-test-section-header={{section}} class='docs-h2'>
+        {{capitalize section}}
+      </h2>
 
-        {{#each items as |item|}}
-          <div data-test-item>
-            {{#if (or item.isClass item.isComponent)}}
-              <h3 id={{item.name}} data-test-item-header class="item-section__class-header mb-1">
-                {{#link-to 'docs.api.item' (concat 'root/' item.id)}}
-                  {{#if (eq item.exportType 'default')}}
-                    <span class="item-section__default-label">Default</span>
-                  {{/if}}
-                  {{item.name}}
-                {{/link-to}}
-              </h3>
+      {{#each items as |item|}}
+        <div data-test-item>
+          {{#if (or item.isClass item.isComponent)}}
+            <h3 id={{item.name}} data-test-item-header class="item-section__class-header mb-1">
+              {{#link-to 'docs.api.item' (concat 'root/' item.id)}}
+                {{#if (eq item.exportType 'default')}}
+                  <span class="item-section__default-label">Default</span>
+                {{/if}}
+                {{item.name}}
+              {{/link-to}}
+            </h3>
 
-              {{{item.description}}}
-            {{else}}
-              <h3 id={{item.name}} data-test-item-header class="item-section__item-header mb-1">
-                <a href="#{{item.name}}">
-                  {{#if (eq item.exportType 'default')}}
-                    <span class="item-section__default-label">Default</span>
-                  {{/if}}
+            {{{item.description}}}
+          {{else}}
+            <h3 id={{item.name}} data-test-item-header data-text="{{item.name}}" class="docs-h3 mb-1">
+              <a href="#{{item.name}}" class="docs-header-link">
+                {{#if (eq item.exportType 'default')}}
+                  <span class="item-section__default-label">Default</span>
+                {{/if}}
 
-                  {{type-signature item}}
-                </a>
-              </h3>
+                {{type-signature item}}
+              </a>
+            </h3>
 
-              {{#if item.exportType}}
-                {{api/x-import-path data-test-import-path=true item=item}}
-              {{/if}}
+            {{#if item.exportType}}
+              {{api/x-import-path data-test-import-path=true item=item}}
+            {{/if}}
 
-              <p data-test-item-description>
-                {{{item.description}}}
-              </p>
+            <p data-test-item-description>
+              {{{item.description}}}
+            </p>
 
-              {{api/x-params data-test-item-params=true params=item.params}}
-            {{/if}}
-          </div>
-        {{/each}}
-      </section>
-    {{/if}}
-  {{/each-in}}
-</div>
+            {{api/x-params data-test-item-params=true params=item.params}}
+          {{/if}}
+        </div>
+      {{/each}}
+    </section>
+  {{/if}}
+{{/each-in}}

addon/components/api/x-toggles/template.hbs

@@ -0,0 +1,19 @@
+Show:
+
+<ul class="list-reset inline">
+  {{#each-in toggles as |key toggle|}}
+    {{#if (not-eq toggle undefined)}}
+      <li class="inline ml-4">
+        <label data-test-toggle>
+          <input type="checkbox"
+            checked={{toggle}}
+            onclick={{action onToggle key}}
+            class='mr-1'
+          >
+
+          {{capitalize key}}
+        </label>
+      </li>
+    {{/if}}
+  {{/each-in}}
+</ul>

addon/components/docs-viewer/component.js

@@ -67,5 +67,4 @@ export default Component.extend(EKMixin, {
   searchIsNotFocused() {
     return !(document.querySelector('[data-search-box-input]') === document.activeElement);
   }
-
 });

addon/components/docs-viewer/template.hbs

@@ -1,6 +1,8 @@
 <div class="docs-container lg:flex w-full mt-4">
   {{yield (hash
     nav=(component 'docs-viewer/x-nav')
-    main=(component 'docs-viewer/x-main')
+    main=(component 'docs-viewer/x-main' onReindex=(action (mut pageIndex)))
   )}}
+
+  {{docs-viewer/x-page-index pageIndex=pageIndex}}
 </div>