feat(select): doc

matheusdavidson · Apr 29, 2022 · 2865954 · 2865954
1 parent 583f9bb
commit 2865954
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 9 deletions.
diff --git a/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.html b/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.html
@@ -1,3 +1,89 @@
+<article class="prose max-w-none lg:px-8">
+    <h1 id="select">
+        Progress Bar
+    </h1>
+
+    <p>To use the select component you need to load it in the module you'll use it:</p>
+
+    <markdown [data]="markdownLoad"></markdown>
+
+    <h2>Demo</h2>
+    <h3 id="basic-usage">Basic usage</h3>
+
+    <div class="demo-container">
+
+        <div class="demo-row">
+            <div class="demo-row-title">Basic</div>
+
+            <div class="demo-row-content md:flex-1">
+                <tw-select
+                    class="w-64 max-w-full"
+                    [formControl]="selectControl"
+                >
+                    <tw-option>Select an option</tw-option>
+                    <tw-option
+                        *ngFor="let item of options"
+                        [value]="item.value"
+                    >
+                        {{item.label}}
+                    </tw-option>
+                </tw-select>
+            </div>
+
+            <div class="md:flex-1">
+                Selected Value: {{ selectControl.value ? selectControl.value : '---' }}
+            </div>
+        </div>
+
+        <div class="demo-row">
+            <div class="demo-row-title">Compare with</div>
+
+            <div class="demo-row-content md:flex-1">
+                <tw-select
+                    class="w-64 max-w-full"
+                    [formControl]="selectCompareWithControl"
+                    [compareWith]="compareWith"
+                >
+                    <tw-option>Select an option</tw-option>
+                    <tw-option
+                        *ngFor="let item of options"
+                        [value]="item"
+                    >
+                        {{item.label}}
+                    </tw-option>
+                </tw-select>
+            </div>
+
+            <div class="md:flex-1">
+                Selected Value: {{ selectCompareWithControl.value ? (selectCompareWithControl.value | json) : '---' }}
+            </div>
+        </div>
+
+        <div class="demo-row">
+            <div class="demo-row-title">Compare with <br> Initial value</div>
+            <div class="demo-row-content md:flex-1">
+                <tw-select
+                    class="w-64 max-w-full"
+                    [formControl]="selectCompareWithInitialValueControl"
+                    [compareWith]="compareWith"
+                >
+                    <tw-option>Select an option</tw-option>
+                    <tw-option
+                        *ngFor="let item of options"
+                        [value]="item"
+                    >
+                        {{item.label}}
+                    </tw-option>
+                </tw-select>
+            </div>
+
+            <div class="md:flex-1">
+                Selected Value: {{ selectCompareWithInitialValueControl.value ? (selectCompareWithInitialValueControl.value | json) : '---' }}
+            </div>
+        </div>
+    </div>
+</article>
+
 <div class="content-footer">
     <div class="bottom-navigation-container">
         <span [hidden]="bottomNavigation?.first !== null"></span>

diff --git a/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.ts b/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'app-c-select-route',
@@ -14,7 +15,48 @@ export class CSelectRouteComponent implements OnInit {
         last: null,
     };
 
+    public markdownLoad = `
+        \`\`\`typescript
+        import { TwSelectModule } from 'ng-tw';
+
+        @NgModule({
+            imports: [..., TwSelectModule],
+        });
+        \`\`\`
+    `;
+
+    public options: any[] = [
+        { label: 'One', value: 'value-1' },
+        { label: 'Two', value: 'value-2' },
+        { label: 'Three', value: 'value-3' },
+        { label: 'Four', value: 'value-4' },
+        { label: 'Five', value: 'value-5' },
+        { label: 'Six', value: 'value-6' },
+        { label: 'Seven', value: 'value-7' },
+        { label: 'Eight', value: 'value-8' },
+        { label: 'Nine', value: 'value-9' },
+        { label: 'Ten', value: 'value-10' },
+        { label: 'Eleven', value: 'value-11' },
+        { label: 'Twelve', value: 'value-12' },
+        { label: 'Thirteen', value: 'value-13' },
+        { label: 'Fourteen', value: 'value-14' },
+        { label: 'Fifteen', value: 'value-15' },
+        { label: 'Sixteen', value: 'value-16' },
+        { label: 'Seventeen', value: 'value-17' },
+        { label: 'Eighteen', value: 'value-18' },
+        { label: 'Nineteen', value: 'value-19' },
+        { label: 'Twenty', value: 'value-20' },
+    ];
+
+    public selectControl: FormControl = new FormControl({ value: 'value-1', disabled: false });
+    public selectCompareWithControl: FormControl = new FormControl({ value: null, disabled: false });
+    public selectCompareWithInitialValueControl: FormControl = new FormControl({ value: null, disabled: false });
+
     constructor() {}
 
     ngOnInit(): void {}
+
+    compareWith(option: any, value: any): boolean {
+        return option?.value && value?.value ? option.value === value.value : option === value;
+    }
 }
diff --git a/projects/sandbox/src/app/routes/c-select-route/c-select-route.module.ts b/projects/sandbox/src/app/routes/c-select-route/c-select-route.module.ts
@@ -3,6 +3,9 @@ import { CommonModule } from '@angular/common';
 import { CSelectSideRouteComponent } from '../c-select-side-route/c-select-side-route.component';
 import { CSelectRouteComponent } from './c-select-route.component';
 import { Routes, RouterModule } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
+import { TwSelectModule } from 'ng-tw';
+import { ReactiveFormsModule } from '@angular/forms';
 
 const routes: Routes = [
     {
@@ -18,6 +21,6 @@ const routes: Routes = [
 
 @NgModule({
     declarations: [CSelectSideRouteComponent, CSelectRouteComponent],
-    imports: [CommonModule, RouterModule.forChild(routes)],
+    imports: [CommonModule, RouterModule.forChild(routes), MarkdownModule, TwSelectModule, ReactiveFormsModule],
 })
 export class CSelectRouteModule {}
diff --git a/projects/sandbox/src/app/routes/c-select-side-route/c-select-side-route.component.html b/projects/sandbox/src/app/routes/c-select-side-route/c-select-side-route.component.html
@@ -1 +1,15 @@
-<p>c-select-side-route works!</p>
+<nav class="side-navigation-container">
+    <p class="title">On this page</p>
+    <ul>
+        <li *ngFor="let item of navigation">
+            <a
+                [routerLink]="[item.link]"
+                [routerLinkActive]="'active'"
+                [routerLinkActiveOptions]="{ matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact' }"
+                [fragment]="item.fragment || null"
+            >
+                {{ item.label }}
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/projects/sandbox/src/app/routes/c-select-side-route/c-select-side-route.component.ts b/projects/sandbox/src/app/routes/c-select-side-route/c-select-side-route.component.ts
@@ -1,15 +1,27 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-c-select-side-route',
-  templateUrl: './c-select-side-route.component.html',
-  styleUrls: ['./c-select-side-route.component.scss']
+    selector: 'app-c-select-side-route',
+    templateUrl: './c-select-side-route.component.html',
+    styleUrls: ['./c-select-side-route.component.scss'],
 })
 export class CSelectSideRouteComponent implements OnInit {
+    public navigation: any[] = [
+        {
+            label: 'Select',
+            alt: '',
+            fragment: 'select',
+            link: '/components/select',
+        },
+        {
+            label: 'Basic Usage',
+            alt: '',
+            fragment: 'basic-usage',
+            link: '/components/select',
+        },
+    ];
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+    constructor() {}
 
+    ngOnInit(): void {}
 }