fix(template): improve api display for empty properties and spacing

docgeni · Dec 17, 2021 · 801a0db · 801a0db
1 parent 5b428a0
commit 801a0db
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 32 deletions.
diff --git a/packages/a-lib/layout/layout.component.ts b/packages/a-lib/layout/layout.component.ts
@@ -1,18 +1,54 @@
-import { Component, OnInit, HostBinding, Input } from '@angular/core';
+import { Component, OnInit, HostBinding, Input, Output, EventEmitter } from '@angular/core';
 
+/**
+ * Layout container component. it is required that all child components should be placed inside.
+ */
 @Component({
-    selector: 'alib-layout',
+    selector: 'alib-layout, [alibLayout]',
     template: `
         <ng-content></ng-content>
-    `
+    `,
+    exportAs: 'alibLayout'
 })
 export class AlibLayoutComponent implements OnInit {
     @HostBinding(`class.alib-layout`) isLayout = true;
 
     /**
-     * Direction `vertical`
+     * Direction of Layout, `vertical` and `horizontal`
+     * @type string
+     * @default horizontal
      */
-    @Input() thyDirection: 'vertical' | 'horizontal';
+    @Input() thyDirection: 'vertical' | 'horizontal' = 'vertical';
+
+    /**
+     * Layout changed
+     */
+    @Output() thyChanged = new EventEmitter<string>();
+
+    constructor() {}
+
+    ngOnInit(): void {}
+}
+
+@Component({
+    selector: 'alib-sidebar, [alibSidebar]',
+    template: `
+        <ng-content></ng-content>
+    `,
+    exportAs: 'alibSidebar'
+})
+export class AlibSidebarComponent implements OnInit {
+    /**
+     * Direction of Layout, `vertical` and `horizontal`
+     * @type string
+     * @default horizontal
+     */
+    @Input() thyDirection: 'vertical' | 'horizontal' = 'vertical';
+
+    /**
+     * Layout changed
+     */
+    @Output() thyChanged = new EventEmitter<string>();
 
     constructor() {}
 

diff --git a/packages/template/src/pages/component-viewer/api/component-api.component.html b/packages/template/src/pages/component-viewer/api/component-api.component.html
@@ -5,32 +5,67 @@
       <span class="name">{{ apiDeclaration.name }}</span>
       <label class="type-label dg-label {{ apiDeclaration.type }}">{{ apiDeclaration.type }}</label>
     </div>
-    <div *ngIf="apiDeclaration.description" class="dg-api-class-description" [innerHTML]="apiDeclaration.description"></div>
+    <div *ngIf="apiDeclaration.description" class="dg-api-description" [innerHTML]="apiDeclaration.description"></div>
 
-    <table class="dg-api-properties-table" *ngIf="apiDeclaration.properties && apiDeclaration.properties.length > 0">
-      <thead>
-        <tr class="dg-api-properties-header-row">
-          <th class="dg-api-properties-name-th">Name</th>
-          <th class="dg-api-properties-type-th">Type</th>
-          <th class="dg-api-properties-default-th">Default</th>
-          <th class="dg-api-properties-description-th">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="dg-api-properties-row" *ngFor="let property of apiDeclaration.properties">
-          <td class="dg-api-properties-name-cell">
-            <label class="dg-label dg-label-sm dg-label-outline-primary">{{ property.name }}</label>
-          </td>
-          <td class="dg-api-properties-type-cell">
-            <label class=""> {{ property.type.name || property.type }}</label>
-          </td>
-          <td class="dg-api-properties-default-cell">
-            {{ property.default || '-' }}
-          </td>
-          <td class="dg-api-property-description" [innerHTML]="property.description"></td>
-        </tr>
-      </tbody>
-    </table>
+    <!-- <div *ngIf="apiDeclaration.selector">Selector: <code>{{apiDeclaration.selector}}</code></div>
+    <div *ngIf="apiDeclaration.exportAs">Exported as: {{apiDeclaration.exportAs}}</div> -->
+
+    <div class="dg-section">
+      <div class="section-title">Properties</div>
+      <table class="dg-api-properties-table" *ngIf="apiDeclaration.properties">
+        <thead>
+          <tr class="dg-api-properties-header-row">
+            <th class="dg-api-properties-name-th">Name</th>
+            <th class="dg-api-properties-type-th">Type</th>
+            <th class="dg-api-properties-default-th">Default</th>
+            <th class="dg-api-properties-description-th">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="dg-api-properties-row" *ngFor="let property of apiDeclaration.properties">
+            <td class="dg-api-properties-name-cell">
+              <label class="dg-label dg-label-sm dg-label-outline-primary">{{ property.name }}</label>
+            </td>
+            <td class="dg-api-properties-type-cell">
+              <label class="">{{ property.type.name || property.type }}</label>
+            </td>
+            <td class="dg-api-properties-default-cell">
+              {{ property.default || '-' }}
+            </td>
+            <td class="dg-api-property-description" [innerHTML]="property.description"></td>
+          </tr>
+          <tr *ngIf="!apiDeclaration.properties || apiDeclaration.properties.length === 0">
+            <td colspan="4">None</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="dg-section" *ngIf="apiDeclaration.methods">
+      <div class="section-title">Methods</div>
+      <table class="dg-api-properties-table">
+        <thead>
+          <tr class="dg-api-properties-header-row">
+            <th class="dg-api-properties-name-th">Name</th>
+            <th class="dg-api-properties-type-th">Type</th>
+            <th class="dg-api-properties-description-th">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="dg-api-properties-row" *ngFor="let method of apiDeclaration.methods">
+            <td class="dg-api-properties-name-cell">
+              <label class="dg-label dg-label-sm dg-label-outline-primary">{{ method.name }}</label>
+            </td>
+            <td class="dg-api-properties-type-cell">
+              <label class=""> {{ method.params }}</label>
+            </td>
+            <td class="dg-api-property-description" [innerHTML]="method.description"></td>
+          </tr>
+          <tr *ngIf="!apiDeclaration.methods || apiDeclaration.methods.length === 0">
+            <td colspan="3">None</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </ng-container>
 </ng-container>
 

diff --git a/packages/template/src/styles/doc.scss b/packages/template/src/styles/doc.scss
@@ -99,6 +99,7 @@ $dg-service-color: #8e24aa;
                     font-weight: 400;
                     text-transform: uppercase;
                     margin-left: 8px;
+                    margin-top: 3px;
 
                     &.directive {
                         background-color: rgba($color: $dg-directive-color, $alpha: 0.8);
@@ -115,25 +116,39 @@ $dg-service-color: #8e24aa;
                 }
             }
 
-            .dg-api-class-description {
+            .dg-api-description {
                 color: $dg-gray-700;
                 margin: 6px 0px 6px 0px;
                 font-size: $dg-font-size-base;
             }
 
+            .dg-section {
+                margin-top: 10px;
+                .section-title {
+                    padding: 2px 0px;
+                    font-weight: 500;
+                }
+            }
+            .dg-section + .dg-section {
+                margin-top: 20px;
+            }
+
             .dg-api-properties-table {
                 margin-top: 14px;
                 display: table;
                 width: 100%;
                 max-width: 100%;
 
+                th {
+                    text-align: left;
+                }
                 .dg-api-properties-header-row {
                     .dg-api-properties-name-th {
                         width: 100px;
                     }
 
                     .dg-api-properties-type-th {
-                        width: 80px;
+                        width: 150px;
                     }
 
                     .dg-api-properties-default-th {