wally-ui 1.0.17 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -4
- package/package.json +1 -1
- package/playground/showcase/src/app/app.routes.ts +1 -1
- package/playground/showcase/src/app/components/breadcrumb/breadcrumb.html +18 -0
- package/playground/showcase/src/app/components/breadcrumb/breadcrumb.ts +20 -0
- package/playground/showcase/src/app/components/button/button.html +1 -1
- package/playground/showcase/src/app/components/button/button.ts +7 -1
- package/playground/showcase/src/app/pages/components/breadcrumb/breadcrumb-docs.html +176 -0
- package/playground/showcase/src/app/pages/components/breadcrumb/breadcrumb-docs.ts +29 -0
- package/playground/showcase/src/app/pages/components/button/button-docs.css +0 -0
- package/playground/showcase/src/app/pages/components/button/button-docs.html +343 -0
- package/playground/showcase/src/app/pages/components/button/{button.spec.ts → button-docs.spec.ts} +5 -5
- package/playground/showcase/src/app/pages/components/button/button-docs.ts +27 -0
- package/playground/showcase/src/app/pages/components/components.html +126 -9
- package/playground/showcase/src/app/pages/components/components.routes.ts +5 -1
- package/playground/showcase/src/app/pages/components/components.ts +6 -2
- package/playground/showcase/src/app/pages/home/home.html +13 -4
- package/playground/showcase/src/app/pages/components/button/button.html +0 -192
- package/playground/showcase/src/app/pages/components/button/button.ts +0 -12
- /package/playground/showcase/src/app/pages/components/{button/button.css → breadcrumb/breadcrumb-docs.css} +0 -0
package/README.md
CHANGED
|
@@ -1,10 +1,79 @@
|
|
|
1
1
|
# Wally UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern Angular component library built with standalone components and Tailwind CSS. Wally UI provides a collection of reusable, accessible components that integrate seamlessly into your Angular applications.
|
|
4
4
|
|
|
5
5
|
**[Live Demo](https://wally-ui.com/)**
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Built for Angular 17+ with standalone component architecture
|
|
10
|
+
- Server-Side Rendering (SSR) support
|
|
11
|
+
- Dark mode support out of the box
|
|
12
|
+
- Tailwind CSS v3/v4 styling
|
|
13
|
+
- TypeScript interfaces and type safety
|
|
14
|
+
- Individual component installation
|
|
15
|
+
- Zero configuration setup
|
|
16
|
+
|
|
17
|
+
## Requirements
|
|
18
|
+
|
|
19
|
+
- Angular 17+ (required for standalone component support)
|
|
20
|
+
- Tailwind CSS v3 or v4
|
|
21
|
+
- Node.js 18+
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
Install components individually using the CLI:
|
|
26
|
+
|
|
8
27
|
```bash
|
|
9
|
-
|
|
10
|
-
npx wally-ui
|
|
28
|
+
# Install specific component
|
|
29
|
+
npx wally-ui add button
|
|
30
|
+
|
|
31
|
+
# List all available components
|
|
32
|
+
npx wally-ui list
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Project Structure
|
|
36
|
+
|
|
37
|
+
When installing a component, Wally UI creates the following structure:
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
src/
|
|
41
|
+
└── app/
|
|
42
|
+
└── components/
|
|
43
|
+
└── wally-ui/
|
|
44
|
+
└── button/
|
|
45
|
+
├── button.ts
|
|
46
|
+
└── button.html
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Quick Start
|
|
50
|
+
|
|
51
|
+
1. Install a component:
|
|
52
|
+
```bash
|
|
53
|
+
npx wally-ui add button
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
2. Import and use in your component:
|
|
57
|
+
```typescript
|
|
58
|
+
import { Component } from '@angular/core';
|
|
59
|
+
import { Button } from './components/wally-ui/button/button';
|
|
60
|
+
|
|
61
|
+
@Component({
|
|
62
|
+
selector: 'app-example',
|
|
63
|
+
imports: [Button],
|
|
64
|
+
template: `<wally-button text="Click me"></wally-button>`
|
|
65
|
+
})
|
|
66
|
+
export class ExampleComponent {}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Development Status
|
|
70
|
+
|
|
71
|
+
Wally UI is currently in experimental development. Components are being actively developed and new features are continuously added. More components will be available soon.
|
|
72
|
+
|
|
73
|
+
## Documentation
|
|
74
|
+
|
|
75
|
+
Visit [wally-ui.com](https://wally-ui.com/) for complete documentation, examples, and component API references.
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT
|
package/package.json
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<nav class="">
|
|
2
|
+
<div class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-400">
|
|
3
|
+
@for (item of items(); track item.label; let isLast = $last) {
|
|
4
|
+
@if (!isLast && item.url) {
|
|
5
|
+
<a
|
|
6
|
+
[routerLink]="item.url"
|
|
7
|
+
class="hover:text-blue-500 transition-colors">
|
|
8
|
+
{{ item.label }}
|
|
9
|
+
</a>
|
|
10
|
+
<span class="text-gray-400 dark:text-gray-600">/</span>
|
|
11
|
+
} @else {
|
|
12
|
+
<span class="text-[#0a0a0a] dark:text-white font-medium">
|
|
13
|
+
{{ item.label }}
|
|
14
|
+
</span>
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
</div>
|
|
18
|
+
</nav>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Component, input, InputSignal } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { RouterModule } from '@angular/router';
|
|
4
|
+
|
|
5
|
+
export interface BreadcrumbItem {
|
|
6
|
+
label: string;
|
|
7
|
+
url?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@Component({
|
|
11
|
+
selector: 'wally-breadcrumb',
|
|
12
|
+
imports: [
|
|
13
|
+
CommonModule,
|
|
14
|
+
RouterModule
|
|
15
|
+
],
|
|
16
|
+
templateUrl: './breadcrumb.html',
|
|
17
|
+
})
|
|
18
|
+
export class Breadcrumb {
|
|
19
|
+
items: InputSignal<BreadcrumbItem[]> = input<BreadcrumbItem[]>([]);
|
|
20
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, input, InputSignal } from '@angular/core';
|
|
1
|
+
import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
|
|
4
4
|
@Component({
|
|
@@ -15,4 +15,10 @@ export class Button {
|
|
|
15
15
|
disabled: InputSignal<boolean> = input<boolean>(false);
|
|
16
16
|
loading: InputSignal<boolean> = input<boolean>(false);
|
|
17
17
|
showNotification: InputSignal<boolean> = input<boolean>(false);
|
|
18
|
+
|
|
19
|
+
click: OutputEmitterRef<void> = output<void>();
|
|
20
|
+
|
|
21
|
+
handleClick(): void {
|
|
22
|
+
this.click.emit();
|
|
23
|
+
}
|
|
18
24
|
}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
<div class="font-mono">
|
|
2
|
+
<div class="max-w-4xl mx-auto p-6">
|
|
3
|
+
<div class="mb-4">
|
|
4
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
8
|
+
Breadcrumb
|
|
9
|
+
</h1>
|
|
10
|
+
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
11
|
+
A navigation component that shows the current page location within a hierarchy.
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<!-- Installation -->
|
|
15
|
+
<section class="mb-8">
|
|
16
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
|
|
17
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
18
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
19
|
+
npx wally-ui add breadcrumb
|
|
20
|
+
</code>
|
|
21
|
+
</div>
|
|
22
|
+
</section>
|
|
23
|
+
|
|
24
|
+
<!-- Preview -->
|
|
25
|
+
<section class="mb-8">
|
|
26
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
27
|
+
Preview
|
|
28
|
+
</h2>
|
|
29
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] h-60">
|
|
30
|
+
<div class="flex items-center justify-center h-full">
|
|
31
|
+
<wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</section>
|
|
35
|
+
|
|
36
|
+
<!-- Import -->
|
|
37
|
+
<section class="mb-8">
|
|
38
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
39
|
+
<div class="space-y-4">
|
|
40
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
41
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
42
|
+
import {{ '{' }} Breadcrumb, BreadcrumbItem {{ '}' }} from './components/wally-ui/breadcrumb/breadcrumb';
|
|
43
|
+
</code>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
47
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
48
|
+
@Component({{ '{' }}<br>
|
|
49
|
+
selector: 'app-example',<br>
|
|
50
|
+
imports: [Breadcrumb],<br>
|
|
51
|
+
templateUrl: './example.html',<br>
|
|
52
|
+
styleUrl: './example.css'<br>
|
|
53
|
+
{{ '}' }})
|
|
54
|
+
</code>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</section>
|
|
58
|
+
|
|
59
|
+
<!-- Basic Usage -->
|
|
60
|
+
<section class="mb-8">
|
|
61
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
|
|
62
|
+
|
|
63
|
+
<div class="space-y-8">
|
|
64
|
+
<div>
|
|
65
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
66
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
67
|
+
{{ '<' }}wally-breadcrumb [items]="breadcrumbItems"{{ '>' }}{{ '<' }}/wally-breadcrumb{{ '>' }}
|
|
68
|
+
</code>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
71
|
+
<wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</section>
|
|
76
|
+
|
|
77
|
+
<!-- Examples -->
|
|
78
|
+
<section class="mb-8">
|
|
79
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Examples</h2>
|
|
80
|
+
|
|
81
|
+
<div class="space-y-8">
|
|
82
|
+
<!-- Multi-level Breadcrumb -->
|
|
83
|
+
<div>
|
|
84
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Multi-level Navigation</h3>
|
|
85
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
86
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
87
|
+
breadcrumbItems: BreadcrumbItem[] = [<br>
|
|
88
|
+
{{ '{' }} label: 'Home', url: '/' {{ '}' }},<br>
|
|
89
|
+
{{ '{' }} label: 'Components', url: '/components' {{ '}' }},<br>
|
|
90
|
+
{{ '{' }} label: 'Button' {{ '}' }}<br>
|
|
91
|
+
];
|
|
92
|
+
</code>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
95
|
+
<wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<!-- Single Item -->
|
|
100
|
+
<div>
|
|
101
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Single Item</h3>
|
|
102
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
103
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
104
|
+
breadcrumbItems: BreadcrumbItem[] = [<br>
|
|
105
|
+
{{ '{' }} label: 'Components' {{ '}' }}<br>
|
|
106
|
+
];
|
|
107
|
+
</code>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
110
|
+
<wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</section>
|
|
115
|
+
|
|
116
|
+
<!-- Properties -->
|
|
117
|
+
<section class="mb-8">
|
|
118
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
119
|
+
|
|
120
|
+
<div class="space-y-4">
|
|
121
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
122
|
+
<div class="font-mono text-sm mb-2">
|
|
123
|
+
<span class="text-blue-600 dark:text-blue-400">items</span><span class="text-[#0a0a0a] dark:text-white">:
|
|
124
|
+
</span>
|
|
125
|
+
<span class="text-purple-600 dark:text-purple-400">BreadcrumbItem[]</span> <span
|
|
126
|
+
class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
127
|
+
<span class="text-green-600 dark:text-green-400">[]</span>
|
|
128
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
129
|
+
</div>
|
|
130
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Array of breadcrumb items to display</p>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
<!-- Interface -->
|
|
136
|
+
<section class="mb-8">
|
|
137
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Interface</h2>
|
|
138
|
+
|
|
139
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
140
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
141
|
+
interface BreadcrumbItem {{ '{' }}<br>
|
|
142
|
+
label: string;<br>
|
|
143
|
+
url?: string;<br>
|
|
144
|
+
{{ '}' }}
|
|
145
|
+
</code>
|
|
146
|
+
</div>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
<!-- Under Construction -->
|
|
150
|
+
<section class="mb-8">
|
|
151
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Under Construction</h2>
|
|
152
|
+
|
|
153
|
+
<div class="space-y-4">
|
|
154
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
155
|
+
<div class="flex items-center gap-2 mb-2">
|
|
156
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Custom Separators</h3>
|
|
157
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
158
|
+
</div>
|
|
159
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
160
|
+
Support for custom separator characters and icons between breadcrumb items.
|
|
161
|
+
</p>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
165
|
+
<div class="flex items-center gap-2 mb-2">
|
|
166
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Dropdown Overflow</h3>
|
|
167
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
168
|
+
</div>
|
|
169
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
170
|
+
Collapse breadcrumb items into a dropdown when there are too many to display.
|
|
171
|
+
</p>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</section>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
|
|
3
|
+
import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
|
|
4
|
+
|
|
5
|
+
@Component({
|
|
6
|
+
selector: 'app-breadcrumb-docs',
|
|
7
|
+
imports: [
|
|
8
|
+
Breadcrumb
|
|
9
|
+
],
|
|
10
|
+
templateUrl: './breadcrumb-docs.html',
|
|
11
|
+
styleUrl: './breadcrumb-docs.css'
|
|
12
|
+
})
|
|
13
|
+
export class BreadcrumbDocs {
|
|
14
|
+
breadcrumbItems: BreadcrumbItem[] = [
|
|
15
|
+
{ label: 'Home', url: '/' },
|
|
16
|
+
{ label: 'Components', url: '/components' },
|
|
17
|
+
{ label: 'Breadcrumb' }
|
|
18
|
+
];
|
|
19
|
+
|
|
20
|
+
exampleBreadcrumbs: BreadcrumbItem[] = [
|
|
21
|
+
{ label: 'Home', url: '/' },
|
|
22
|
+
{ label: 'Components', url: '/components' },
|
|
23
|
+
{ label: 'Breadcrumb' }
|
|
24
|
+
];
|
|
25
|
+
|
|
26
|
+
simpleBreadcrumbs: BreadcrumbItem[] = [
|
|
27
|
+
{ label: 'Components' }
|
|
28
|
+
];
|
|
29
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
<div class="font-mono">
|
|
2
|
+
<div class="max-w-4xl mx-auto p-6">
|
|
3
|
+
<div class="mb-4">
|
|
4
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
8
|
+
Button
|
|
9
|
+
</h1>
|
|
10
|
+
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
11
|
+
A versatile button component with loading states, notifications, and customizable text.
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<!-- Installation -->
|
|
15
|
+
<section class="mb-8">
|
|
16
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
|
|
17
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
18
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
19
|
+
npx wally-ui add button
|
|
20
|
+
</code>
|
|
21
|
+
</div>
|
|
22
|
+
</section>
|
|
23
|
+
|
|
24
|
+
<!-- Preview -->
|
|
25
|
+
<section class="mb-8">
|
|
26
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
|
|
27
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] text-center">
|
|
28
|
+
<div class="flex flex-col gap-4">
|
|
29
|
+
<wally-button></wally-button>
|
|
30
|
+
<wally-button text="Disabled" [disabled]="true"></wally-button>
|
|
31
|
+
<wally-button text="Loading" [loading]="true"></wally-button>
|
|
32
|
+
<wally-button text="Messages" [showNotification]="true"></wally-button>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<!-- Import -->
|
|
38
|
+
<section class="mb-8">
|
|
39
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
40
|
+
<div class="space-y-4">
|
|
41
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
42
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
43
|
+
import {{ '{' }} Button {{ '}' }} from './components/wally-ui/button/button';
|
|
44
|
+
</code>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
48
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
49
|
+
@Component({{ '{' }}<br>
|
|
50
|
+
selector: 'app-example',<br>
|
|
51
|
+
imports: [Button],<br>
|
|
52
|
+
templateUrl: './example.html',<br>
|
|
53
|
+
styleUrl: './example.css'<br>
|
|
54
|
+
{{ '}' }})
|
|
55
|
+
</code>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</section>
|
|
59
|
+
|
|
60
|
+
<!-- Basic Usage -->
|
|
61
|
+
<section class="mb-8">
|
|
62
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
63
|
+
Basic Usage
|
|
64
|
+
</h2>
|
|
65
|
+
|
|
66
|
+
<div class="space-y-8">
|
|
67
|
+
<div>
|
|
68
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
69
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
70
|
+
{{ '<' }}wally-button{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
71
|
+
</code>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
74
|
+
<wally-button></wally-button>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
|
|
80
|
+
<!-- Custom Text -->
|
|
81
|
+
<section class="mb-8">
|
|
82
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
83
|
+
Custom Text
|
|
84
|
+
</h2>
|
|
85
|
+
|
|
86
|
+
<div class="space-y-8">
|
|
87
|
+
<div>
|
|
88
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
89
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
90
|
+
{{ '<' }}wally-button text="Save Changes"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
91
|
+
</code>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
94
|
+
<wally-button text="Save Changes"></wally-button>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
100
|
+
<!-- States -->
|
|
101
|
+
<section class="mb-8">
|
|
102
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
103
|
+
States
|
|
104
|
+
</h2>
|
|
105
|
+
|
|
106
|
+
<div class="space-y-8">
|
|
107
|
+
<!-- Disabled -->
|
|
108
|
+
<div>
|
|
109
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
110
|
+
Disabled
|
|
111
|
+
</h3>
|
|
112
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
113
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
114
|
+
{{ '<' }}wally-button text="Disabled" [disabled]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
115
|
+
</code>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
118
|
+
<wally-button text="Disabled" [disabled]="true"></wally-button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<!-- Loading -->
|
|
123
|
+
<div>
|
|
124
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
125
|
+
Loading
|
|
126
|
+
</h3>
|
|
127
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
128
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
129
|
+
{{ '<' }}wally-button text="Loading" [loading]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
130
|
+
</code>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
133
|
+
<wally-button text="Loading" [loading]="true"></wally-button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<!-- With Notification -->
|
|
138
|
+
<div>
|
|
139
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
140
|
+
With Notification Badge
|
|
141
|
+
</h3>
|
|
142
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
143
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
144
|
+
{{ '<' }}wally-button text="Messages" [showNotification]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
145
|
+
</code>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
148
|
+
<wally-button text="Messages" [showNotification]="true"></wally-button>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</section>
|
|
153
|
+
|
|
154
|
+
<!-- Button Types -->
|
|
155
|
+
<section class="mb-8">
|
|
156
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
157
|
+
Button Types
|
|
158
|
+
</h2>
|
|
159
|
+
|
|
160
|
+
<div class="space-y-8">
|
|
161
|
+
<div>
|
|
162
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
|
|
163
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
164
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
165
|
+
{{ '<' }}wally-button text="Submit Form" type="submit"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
166
|
+
</code>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
169
|
+
<wally-button text="Submit Form" type="submit"></wally-button>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</section>
|
|
174
|
+
|
|
175
|
+
<!-- Click Events -->
|
|
176
|
+
<section class="mb-8">
|
|
177
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
178
|
+
Click Events
|
|
179
|
+
</h2>
|
|
180
|
+
|
|
181
|
+
<div class="space-y-8">
|
|
182
|
+
<div>
|
|
183
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Handling Click Events</h3>
|
|
184
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
185
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
186
|
+
{{ '<' }}wally-button text="Click Me" (click)="handleClick()"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}<br><br>
|
|
187
|
+
handleClick() {{ '{' }}<br>
|
|
188
|
+
this.clickMessage.set('Button clicked!');<br>
|
|
189
|
+
{{ '}' }}
|
|
190
|
+
</code>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
193
|
+
<div class="space-y-4 text-center">
|
|
194
|
+
<wally-button text="Click Me" (click)="handleClick()"></wally-button>
|
|
195
|
+
@if (clickMessage()) {
|
|
196
|
+
<p class="text-sm text-green-600 dark:text-green-400 font-medium mt-4">
|
|
197
|
+
{{ clickMessage() }}
|
|
198
|
+
</p>
|
|
199
|
+
}
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</section>
|
|
205
|
+
|
|
206
|
+
<!-- Properties -->
|
|
207
|
+
<section class="mb-8">
|
|
208
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
209
|
+
|
|
210
|
+
<div class="space-y-4">
|
|
211
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
212
|
+
<div class="font-mono text-sm mb-2">
|
|
213
|
+
<span class="text-blue-600 dark:text-blue-400">text</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
214
|
+
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
215
|
+
<span class="text-green-600 dark:text-green-400">'Wally Button'</span>
|
|
216
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
217
|
+
</div>
|
|
218
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">The text displayed on the button</p>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
222
|
+
<div class="font-mono text-sm mb-2">
|
|
223
|
+
<span class="text-blue-600 dark:text-blue-400">type</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
224
|
+
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
225
|
+
<span class="text-green-600 dark:text-green-400">'button'</span>
|
|
226
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
227
|
+
</div>
|
|
228
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
232
|
+
<div class="font-mono text-sm mb-2">
|
|
233
|
+
<span class="text-blue-600 dark:text-blue-400">disabled</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
234
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
235
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
236
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
237
|
+
</div>
|
|
238
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
242
|
+
<div class="font-mono text-sm mb-2">
|
|
243
|
+
<span class="text-blue-600 dark:text-blue-400">loading</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
244
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
245
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
246
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
247
|
+
</div>
|
|
248
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
252
|
+
<div class="font-mono text-sm mb-2">
|
|
253
|
+
<span class="text-blue-600 dark:text-blue-400">showNotification</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
254
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
255
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
256
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
257
|
+
</div>
|
|
258
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</section>
|
|
262
|
+
|
|
263
|
+
<!-- Under Construction -->
|
|
264
|
+
<section class="mb-8">
|
|
265
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Under Construction</h2>
|
|
266
|
+
|
|
267
|
+
<div class="space-y-4">
|
|
268
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
269
|
+
<div class="flex items-center gap-2 mb-2">
|
|
270
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Button with Icon</h3>
|
|
271
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
272
|
+
</div>
|
|
273
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
274
|
+
Support for icons within buttons. This will include leading and trailing icon positions with proper spacing.
|
|
275
|
+
</p>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
279
|
+
<div class="flex items-center gap-2 mb-2">
|
|
280
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Button Variants</h3>
|
|
281
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
282
|
+
</div>
|
|
283
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
284
|
+
Multiple button styles including outline, ghost, destructive, and secondary variants.
|
|
285
|
+
</p>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
291
|
+
<div class="flex items-center gap-2 mb-2">
|
|
292
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
|
|
293
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
294
|
+
</div>
|
|
295
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
296
|
+
ARIA labels, keyboard navigation, and screen reader support for better accessibility.
|
|
297
|
+
</p>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
301
|
+
<div class="flex items-center gap-2 mb-2">
|
|
302
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Ripple Effect</h3>
|
|
303
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
304
|
+
</div>
|
|
305
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
306
|
+
Visual feedback with ripple animation on button press for enhanced user experience.
|
|
307
|
+
</p>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
311
|
+
<div class="flex items-center gap-2 mb-2">
|
|
312
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Tooltip Support</h3>
|
|
313
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
314
|
+
</div>
|
|
315
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
316
|
+
Built-in tooltip integration for providing additional context and information.
|
|
317
|
+
</p>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
321
|
+
<div class="flex items-center gap-2 mb-2">
|
|
322
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Link Button</h3>
|
|
323
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
324
|
+
</div>
|
|
325
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
326
|
+
Button that functions as a link with href support while maintaining button styling.
|
|
327
|
+
</p>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
331
|
+
<div class="flex items-center gap-2 mb-2">
|
|
332
|
+
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Button Group</h3>
|
|
333
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
334
|
+
</div>
|
|
335
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
336
|
+
Group multiple buttons together with proper spacing and border handling.
|
|
337
|
+
</p>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</section>
|
|
341
|
+
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
package/playground/showcase/src/app/pages/components/button/{button.spec.ts → button-docs.spec.ts}
RENAMED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { ButtonDocs } from './button-docs';
|
|
4
4
|
|
|
5
5
|
describe('Button', () => {
|
|
6
|
-
let component:
|
|
7
|
-
let fixture: ComponentFixture<
|
|
6
|
+
let component: ButtonDocs;
|
|
7
|
+
let fixture: ComponentFixture<ButtonDocs>;
|
|
8
8
|
|
|
9
9
|
beforeEach(async () => {
|
|
10
10
|
await TestBed.configureTestingModule({
|
|
11
|
-
imports: [
|
|
11
|
+
imports: [ButtonDocs]
|
|
12
12
|
})
|
|
13
13
|
.compileComponents();
|
|
14
14
|
|
|
15
|
-
fixture = TestBed.createComponent(
|
|
15
|
+
fixture = TestBed.createComponent(ButtonDocs);
|
|
16
16
|
component = fixture.componentInstance;
|
|
17
17
|
fixture.detectChanges();
|
|
18
18
|
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, signal, WritableSignal } from '@angular/core';
|
|
2
|
+
|
|
3
|
+
import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
|
|
4
|
+
import { Button } from '../../../components/button/button';
|
|
5
|
+
|
|
6
|
+
@Component({
|
|
7
|
+
selector: 'app-button-docs',
|
|
8
|
+
imports: [
|
|
9
|
+
Button,
|
|
10
|
+
Breadcrumb
|
|
11
|
+
],
|
|
12
|
+
templateUrl: './button-docs.html',
|
|
13
|
+
styleUrl: './button-docs.css'
|
|
14
|
+
})
|
|
15
|
+
export class ButtonDocs {
|
|
16
|
+
breadcrumbItems: BreadcrumbItem[] = [
|
|
17
|
+
{ label: 'Home', url: '/' },
|
|
18
|
+
{ label: 'Components', url: '/components' },
|
|
19
|
+
{ label: 'Button' }
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
clickMessage: WritableSignal<string> = signal<string>('');
|
|
23
|
+
|
|
24
|
+
handleClick(): void {
|
|
25
|
+
this.clickMessage.set('Button clicked!');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,16 +1,133 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
<div class="max-w-4xl mx-auto p-6 font-mono">
|
|
2
|
+
<div class="mb-4">
|
|
3
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
4
|
+
</div>
|
|
5
|
+
|
|
6
|
+
<h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
7
|
+
Components
|
|
8
|
+
</h1>
|
|
9
|
+
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
10
|
+
Explore our collection of reusable Angular components.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<!-- Requirements -->
|
|
14
|
+
<div id="requirements" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
|
|
15
|
+
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Requirements</h3>
|
|
16
|
+
|
|
17
|
+
<div class="space-y-3">
|
|
18
|
+
<div>
|
|
19
|
+
<p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Angular Version</p>
|
|
20
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
21
|
+
Angular 17+ required for standalone component support
|
|
22
|
+
</p>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div>
|
|
26
|
+
<p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Tailwind CSS</p>
|
|
27
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
|
|
28
|
+
Tailwind CSS v3 or v4 must be installed in your project.
|
|
29
|
+
</p>
|
|
30
|
+
<a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank"
|
|
31
|
+
class="text-xs text-blue-500 underline hover:text-blue-700">
|
|
32
|
+
Learn about Tailwind v4
|
|
33
|
+
</a>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div>
|
|
37
|
+
<p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Installation</p>
|
|
38
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
|
|
39
|
+
Components are standalone and can be installed individually:
|
|
40
|
+
</p>
|
|
41
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white block">
|
|
42
|
+
npx wally-ui add {{ '<' }}component{{ '>' }}
|
|
43
|
+
</code>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<!-- Important Notice -->
|
|
49
|
+
<div id="important-notice"
|
|
50
|
+
class="bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-700 p-4 rounded-lg mb-6">
|
|
51
|
+
<h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Experimental Project</h3>
|
|
52
|
+
<p class="text-sm text-yellow-700 dark:text-yellow-300">
|
|
53
|
+
Wally UI is currently in experimental development. Components may change and new features are being actively
|
|
54
|
+
developed. Use in production with caution.
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<!-- List Components -->
|
|
59
|
+
<div id="list-components" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
|
|
60
|
+
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">List Available Components</h3>
|
|
61
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
62
|
+
npx wally-ui list
|
|
63
|
+
</code>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<!-- File Structure -->
|
|
67
|
+
<div id="installation-structure" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-8">
|
|
68
|
+
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Installation Structure</h3>
|
|
69
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
70
|
+
When installing a component, Wally UI will create the following folder structure:
|
|
71
|
+
</p>
|
|
72
|
+
<div class="font-mono text-sm text-[#0a0a0a] dark:text-white">
|
|
73
|
+
<div>src/</div>
|
|
74
|
+
<div>└── app/</div>
|
|
75
|
+
<div> └── components/</div>
|
|
76
|
+
<div> └── wally-ui/</div>
|
|
77
|
+
<div> └── button/</div>
|
|
78
|
+
<div> ├── button.ts
|
|
79
|
+
</div>
|
|
80
|
+
<div> └──
|
|
81
|
+
button.html</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- Available Components -->
|
|
86
|
+
<div id="available-components" class="space-y-4">
|
|
87
|
+
<h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Available Components</h3>
|
|
88
|
+
|
|
89
|
+
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
|
|
90
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
91
|
+
More components are being built and will be added soon. Stay tuned for updates!
|
|
9
92
|
</p>
|
|
93
|
+
</div>
|
|
10
94
|
|
|
11
|
-
|
|
95
|
+
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
96
|
+
<div class="flex items-center gap-2 mb-2">
|
|
97
|
+
<h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Button</h4>
|
|
98
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
99
|
+
</div>
|
|
100
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
101
|
+
A versatile button component with loading states, notifications, and customizable text. Currently being refined
|
|
102
|
+
and improved.
|
|
103
|
+
</p>
|
|
104
|
+
<a href="/components/button" class="text-blue-500 underline hover:text-blue-700 text-sm">
|
|
12
105
|
View Documentation
|
|
13
106
|
</a>
|
|
14
107
|
</div>
|
|
108
|
+
|
|
109
|
+
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
110
|
+
<div class="flex items-center gap-2 mb-2">
|
|
111
|
+
<h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Breadcrumb</h4>
|
|
112
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
113
|
+
</div>
|
|
114
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
115
|
+
A navigation component that shows the current page location within a hierarchy.
|
|
116
|
+
</p>
|
|
117
|
+
<a href="/components/breadcrumb" class="text-blue-500 underline hover:text-blue-700 text-sm">
|
|
118
|
+
View Documentation
|
|
119
|
+
</a>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 opacity-60">
|
|
123
|
+
<div class="flex items-center gap-2 mb-2">
|
|
124
|
+
<h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Input Text</h4>
|
|
125
|
+
<span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
|
|
126
|
+
</div>
|
|
127
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
128
|
+
A flexible input component with validation, placeholder support, and various styling options. Next in
|
|
129
|
+
development.
|
|
130
|
+
</p>
|
|
131
|
+
</div>
|
|
15
132
|
</div>
|
|
16
133
|
</div>
|
|
@@ -7,6 +7,10 @@ export const componentsRoutes: Routes = [
|
|
|
7
7
|
},
|
|
8
8
|
{
|
|
9
9
|
path: 'button',
|
|
10
|
-
loadComponent: () => import('./button/button').then(m => m.ButtonDocs)
|
|
10
|
+
loadComponent: () => import('./button/button-docs').then(m => m.ButtonDocs)
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
path: 'breadcrumb',
|
|
14
|
+
loadComponent: () => import('./breadcrumb/breadcrumb-docs').then(m => m.BreadcrumbDocs)
|
|
11
15
|
}
|
|
12
16
|
];
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { Component } from '@angular/core';
|
|
2
|
+
import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
|
|
2
3
|
|
|
3
4
|
@Component({
|
|
4
5
|
selector: 'wally-components',
|
|
5
|
-
imports: [],
|
|
6
|
+
imports: [Breadcrumb],
|
|
6
7
|
templateUrl: './components.html',
|
|
7
8
|
styleUrl: './components.css'
|
|
8
9
|
})
|
|
9
10
|
export class Components {
|
|
10
|
-
|
|
11
|
+
breadcrumbItems: BreadcrumbItem[] = [
|
|
12
|
+
{ label: 'Home', url: '/' },
|
|
13
|
+
{ label: 'Components' }
|
|
14
|
+
];
|
|
11
15
|
}
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
</h2>
|
|
10
10
|
<p class="mt-4 text-gray-700 dark:text-gray-400">
|
|
11
11
|
Stop searching for the perfect Angular components. Wally UI brings you a
|
|
12
|
-
collection of ready-to-use, beautifully crafted components
|
|
13
|
-
seamlessly with your projects.
|
|
12
|
+
collection of ready-to-use, beautifully crafted Angular components built with
|
|
13
|
+
standalone architecture and Tailwind CSS that integrate seamlessly with your projects.
|
|
14
14
|
</p>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
@@ -22,10 +22,19 @@
|
|
|
22
22
|
</code>
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
|
-
<div class="mt-4 w-full max-w-md">
|
|
26
|
-
<a href="/components
|
|
25
|
+
<div class="mt-4 w-full max-w-md flex flex-col gap-2">
|
|
26
|
+
<a href="/components" class="text-blue-500 underline">
|
|
27
27
|
Documentation
|
|
28
28
|
</a>
|
|
29
|
+
|
|
30
|
+
<div class="flex gap-4 mt-2">
|
|
31
|
+
<a href="https://github.com/WalissonCF/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
|
|
32
|
+
GitHub
|
|
33
|
+
</a>
|
|
34
|
+
<a href="https://www.npmjs.com/package/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
|
|
35
|
+
NPM
|
|
36
|
+
</a>
|
|
37
|
+
</div>
|
|
29
38
|
</div>
|
|
30
39
|
</div>
|
|
31
40
|
</div>
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
<div class="font-mono">
|
|
2
|
-
<div class="max-w-4xl mx-auto p-6">
|
|
3
|
-
<h1 class="text-4xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
4
|
-
Button
|
|
5
|
-
</h1>
|
|
6
|
-
<p class="text-lg mb-12 text-gray-700 dark:text-gray-400">
|
|
7
|
-
A versatile button component with loading states, notifications, and customizable text.
|
|
8
|
-
</p>
|
|
9
|
-
|
|
10
|
-
<!-- Basic Usage -->
|
|
11
|
-
<section class="mb-12">
|
|
12
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
13
|
-
Basic Usage
|
|
14
|
-
</h2>
|
|
15
|
-
|
|
16
|
-
<div class="space-y-8">
|
|
17
|
-
<div>
|
|
18
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
19
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
20
|
-
{{ '<' }}wally-button{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
21
|
-
</code>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
24
|
-
<wally-button></wally-button>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
</section>
|
|
29
|
-
|
|
30
|
-
<!-- Custom Text -->
|
|
31
|
-
<section class="mb-12">
|
|
32
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
33
|
-
Custom Text
|
|
34
|
-
</h2>
|
|
35
|
-
|
|
36
|
-
<div class="space-y-8">
|
|
37
|
-
<div>
|
|
38
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
39
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
40
|
-
{{ '<' }}wally-button text="Save Changes"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
41
|
-
</code>
|
|
42
|
-
</div>
|
|
43
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
44
|
-
<wally-button text="Save Changes"></wally-button>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</section>
|
|
49
|
-
|
|
50
|
-
<!-- States -->
|
|
51
|
-
<section class="mb-12">
|
|
52
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
53
|
-
States
|
|
54
|
-
</h2>
|
|
55
|
-
|
|
56
|
-
<div class="space-y-8">
|
|
57
|
-
<!-- Disabled -->
|
|
58
|
-
<div>
|
|
59
|
-
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
60
|
-
Disabled
|
|
61
|
-
</h3>
|
|
62
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
63
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
64
|
-
{{ '<' }}wally-button text="Disabled" [disabled]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
65
|
-
</code>
|
|
66
|
-
</div>
|
|
67
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
68
|
-
<wally-button text="Disabled" [disabled]="true"></wally-button>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
|
|
72
|
-
<!-- Loading -->
|
|
73
|
-
<div>
|
|
74
|
-
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
75
|
-
Loading
|
|
76
|
-
</h3>
|
|
77
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
78
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
79
|
-
{{ '<' }}wally-button text="Loading" [loading]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
80
|
-
</code>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
83
|
-
<wally-button text="Loading" [loading]="true"></wally-button>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- With Notification -->
|
|
88
|
-
<div>
|
|
89
|
-
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
90
|
-
With Notification Badge
|
|
91
|
-
</h3>
|
|
92
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
93
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
94
|
-
{{ '<' }}wally-button text="Messages" [showNotification]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
95
|
-
</code>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
98
|
-
<wally-button text="Messages" [showNotification]="true"></wally-button>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
</section>
|
|
103
|
-
|
|
104
|
-
<!-- Button Types -->
|
|
105
|
-
<section class="mb-12">
|
|
106
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
107
|
-
Button Types
|
|
108
|
-
</h2>
|
|
109
|
-
|
|
110
|
-
<div class="space-y-8">
|
|
111
|
-
<div>
|
|
112
|
-
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
|
|
113
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
114
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
115
|
-
{{ '<' }}wally-button text="Submit Form" type="submit"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
116
|
-
</code>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
119
|
-
<wally-button text="Submit Form" type="submit"></wally-button>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
</section>
|
|
124
|
-
|
|
125
|
-
<!-- Properties -->
|
|
126
|
-
<section class="mb-12">
|
|
127
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
128
|
-
|
|
129
|
-
<div class="space-y-4">
|
|
130
|
-
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
131
|
-
<div class="font-mono text-sm mb-2">
|
|
132
|
-
<span class="text-blue-600 dark:text-blue-400">text</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
133
|
-
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
134
|
-
<span class="text-green-600 dark:text-green-400">'Wally Button'</span>
|
|
135
|
-
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
136
|
-
</div>
|
|
137
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">The text displayed on the button</p>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
141
|
-
<div class="font-mono text-sm mb-2">
|
|
142
|
-
<span class="text-blue-600 dark:text-blue-400">type</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
143
|
-
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
144
|
-
<span class="text-green-600 dark:text-green-400">'button'</span>
|
|
145
|
-
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
146
|
-
</div>
|
|
147
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
151
|
-
<div class="font-mono text-sm mb-2">
|
|
152
|
-
<span class="text-blue-600 dark:text-blue-400">disabled</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
153
|
-
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
154
|
-
<span class="text-green-600 dark:text-green-400">false</span>
|
|
155
|
-
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
156
|
-
</div>
|
|
157
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
161
|
-
<div class="font-mono text-sm mb-2">
|
|
162
|
-
<span class="text-blue-600 dark:text-blue-400">loading</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
163
|
-
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
164
|
-
<span class="text-green-600 dark:text-green-400">false</span>
|
|
165
|
-
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
166
|
-
</div>
|
|
167
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
|
|
168
|
-
</div>
|
|
169
|
-
|
|
170
|
-
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
171
|
-
<div class="font-mono text-sm mb-2">
|
|
172
|
-
<span class="text-blue-600 dark:text-blue-400">showNotification</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
173
|
-
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
174
|
-
<span class="text-green-600 dark:text-green-400">false</span>
|
|
175
|
-
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
176
|
-
</div>
|
|
177
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</section>
|
|
181
|
-
|
|
182
|
-
<!-- Import -->
|
|
183
|
-
<section class="mb-12">
|
|
184
|
-
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
185
|
-
<div class="p-4 rounded-lg bg-gray-200 dark:bg-[#121212]">
|
|
186
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
187
|
-
import {{ '{' }} Button {{ '}' }} from './components/button/button';
|
|
188
|
-
</code>
|
|
189
|
-
</div>
|
|
190
|
-
</section>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { Button as WallyButton } from '../../../components/button/button';
|
|
3
|
-
|
|
4
|
-
@Component({
|
|
5
|
-
selector: 'app-button-docs',
|
|
6
|
-
imports: [WallyButton],
|
|
7
|
-
templateUrl: './button.html',
|
|
8
|
-
styleUrl: './button.css'
|
|
9
|
-
})
|
|
10
|
-
export class ButtonDocs {
|
|
11
|
-
|
|
12
|
-
}
|
|
File without changes
|