Skip to content

Commit 870fa07

Browse files
immohammadjavedimmohammadjaved
committed
docs(input): Add docs for input component
1 parent ec24bb4 commit 870fa07

File tree

5 files changed

+119
-0
lines changed

5 files changed

+119
-0
lines changed

‎projects/docs/src/app/components.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,5 +52,9 @@ export const routes: Routes = [
5252
{
5353
path: 'separator',
5454
loadComponent: () => import('./pages/docs/components/separator/separator.component').then(c => c.SeparatorComponent)
55+
},
56+
{
57+
path: 'input',
58+
loadComponent: () => import('./pages/docs/components/input/input.component').then(c => c.InputComponent)
5559
}
5660
];

‎projects/docs/src/app/components/sidenav/sidenav.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export class SidenavComponent {
4242
{ name: 'Card', path: 'card' },
4343
{ name: 'Toast', path: 'toast' },
4444
{ name: 'Separator', path: 'separator' },
45+
{ name: 'Input', path: 'input' },
4546
]
4647
}
4748
];

‎projects/docs/src/app/pages/docs/components/input/input.component.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<p
2+
class="from-indigo-700 to-blue-500 mb-2 inline-block bg-gradient-to-r bg-clip-text text-sm font-medium text-transparent">
3+
Components
4+
</p>
5+
<h1 class="text-2xl font-semibold">Input</h1>
6+
7+
<p class="mt-4 text-md text-muted-foreground">
8+
Displays a form input field or a component that looks like an input field.
9+
</p>
10+
<ng-container [formGroup]="form">
11+
<div class="mt-5">
12+
<docs-example [code]="INPUT_CODES.DEFAULT">
13+
<div class="grid w-full max-w-sm items-center gap-1.5">
14+
<input formControlName="name" type="text" uiInput placeholder="Enter text here" />
15+
</div>
16+
</docs-example>
17+
</div>
18+
19+
20+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="installation">Installation</h2>
21+
<docs-installation-guide [cliCode]="cliCode" [npmCode]="INPUT_CODES.DEFAULT"></docs-installation-guide>
22+
23+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="usage">Usage</h2>
24+
25+
<docs-code-view [code]="importCode"></docs-code-view>
26+
<docs-code-view class="mt-5 block" [code]="usageCode" language="html"></docs-code-view>
27+
28+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="examples">Examples</h2>
29+
30+
<div class="mt-5">
31+
<h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
32+
<docs-example [code]="INPUT_CODES.DEFAULT">
33+
<div class="grid w-full max-w-sm items-center gap-1.5">
34+
<input formControlName="name" type="text" uiInput placeholder="Enter text here" />
35+
</div>
36+
</docs-example>
37+
</div>
38+
39+
<div class="mt-5">
40+
<h3 class="text-lg font-semibold mb-3" id="file">File</h3>
41+
<docs-example [code]="INPUT_CODES.DEFAULT">
42+
<div class="grid w-full max-w-sm items-center gap-1.5">
43+
<input formControlName="file" type="file" uiInput />
44+
</div>
45+
</docs-example>
46+
</div>
47+
48+
<div class="mt-5">
49+
<h3 class="text-lg font-semibold mb-3" id="disabled">Disabled</h3>
50+
<docs-example [code]="INPUT_CODES.DEFAULT">
51+
<div class="grid w-full max-w-sm items-center gap-1.5">
52+
<input formControlName="disabled" type="text" placeholder="Enter text here" uiInput />
53+
</div>
54+
</docs-example>
55+
</div>
56+
57+
<div class="mt-5">
58+
<h3 class="text-lg font-semibold mb-3" id="withLabel">With Label</h3>
59+
<docs-example [code]="INPUT_CODES.DEFAULT">
60+
<!-- <div class="w-full grid gap-4"> -->
61+
<div class="grid w-full max-w-sm items-center gap-1.5" uiFormField>
62+
<label uiLabel>Full Name</label>
63+
<input formControlName="label" type="text" placeholder="Enter text here" uiInput />
64+
</div>
65+
<!-- </div> -->
66+
</docs-example>
67+
</div>
68+
</ng-container>

‎projects/docs/src/app/pages/docs/components/input/input.component.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
3+
import { ExampleComponent } from '../../../../components/example/example.component';
4+
import { CodeViewComponent } from '../../../../components/code-view/code-view.component';
5+
import { InstallationGuideComponent } from '../../../../components/installation-guide/installation-guide.component';
6+
import { InputCodeConstants } from './input.constants';
7+
import { UiFormField, UiInput, UiLabel } from '@angularui/core';
8+
9+
@Component({
10+
selector: 'docs-input',
11+
imports: [ExampleComponent, CodeViewComponent, InstallationGuideComponent, UiInput, UiLabel, UiFormField, ReactiveFormsModule, FormsModule],
12+
templateUrl: './input.component.html'
13+
})
14+
export class InputComponent {
15+
16+
importCode = `import { UiInput } from '@angularui/core';`
17+
usageCode = `<input formControlName="name" type="text" uiInput placeholder="Enter text here" />`;
18+
19+
cliCode = `ng g @angularui/core:component input`;
20+
21+
INPUT_CODES = InputCodeConstants;
22+
23+
form: FormGroup = new FormGroup({
24+
name: new FormControl(''),
25+
file: new FormControl(null),
26+
text: new FormControl(null),
27+
label: new FormControl(null),
28+
disabled: new FormControl({ value: '', disabled: true })
29+
});
30+
31+
text: string = '';
32+
33+
}

‎projects/docs/src/app/pages/docs/components/input/input.constants.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export class InputCodeConstants {
2+
static readonly DEFAULT = `
3+
import { Component } from '@angular/core';
4+
import { UiInput } from '@angularui/core';
5+
6+
@Component({
7+
selector: 'input-demo',
8+
imports: [UiInput],
9+
template: \` <input formControlName="name" type="text" uiInput placeholder="Enter text here" /> \`
10+
})
11+
export class InputComponent {}
12+
`;
13+
}

0 commit comments

Comments
 (0)