wally-ui 1.9.0 → 1.11.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/package.json +1 -1
- package/playground/showcase/src/app/components/button/button.html +4 -26
- package/playground/showcase/src/app/components/button/button.ts +30 -1
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +179 -26
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +519 -285
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +30 -10
- package/playground/showcase/src/app/pages/documentation/documentation.html +83 -79
- package/playground/showcase/src/app/pages/documentation/documentation.ts +5 -1
- package/playground/showcase/src/app/pages/home/home.html +69 -45
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/index.html +68 -10
package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html
CHANGED
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
+
<!-- Header -->
|
|
7
8
|
<h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
8
9
|
Button
|
|
9
10
|
</h1>
|
|
10
11
|
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
11
|
-
A
|
|
12
|
+
A production-ready button component with multiple variants, loading states, notifications, and comprehensive
|
|
13
|
+
accessibility support. Built with Angular Signals and optimized for modern applications.
|
|
12
14
|
</p>
|
|
13
15
|
|
|
14
16
|
<!-- AI Prompts -->
|
|
@@ -19,7 +21,6 @@
|
|
|
19
21
|
<path fill="currentColor"
|
|
20
22
|
d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
|
|
21
23
|
</svg>
|
|
22
|
-
|
|
23
24
|
Open in Claude
|
|
24
25
|
</a>
|
|
25
26
|
|
|
@@ -39,7 +40,6 @@
|
|
|
39
40
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
40
41
|
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
41
42
|
</svg>
|
|
42
|
-
|
|
43
43
|
Open in ChatGPT
|
|
44
44
|
</a>
|
|
45
45
|
</div>
|
|
@@ -52,56 +52,6 @@
|
|
|
52
52
|
</div>
|
|
53
53
|
</section>
|
|
54
54
|
|
|
55
|
-
<!-- Preview -->
|
|
56
|
-
<section class="mb-8">
|
|
57
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
|
|
58
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] text-center">
|
|
59
|
-
<div class="flex flex-col gap-4">
|
|
60
|
-
<wally-button>Wally Button</wally-button>
|
|
61
|
-
<wally-button>
|
|
62
|
-
Send
|
|
63
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
64
|
-
stroke="currentColor" class="size-5">
|
|
65
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
66
|
-
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
67
|
-
</svg>
|
|
68
|
-
</wally-button>
|
|
69
|
-
<wally-button [disabled]="true">Disabled</wally-button>
|
|
70
|
-
<wally-button [loading]="true">
|
|
71
|
-
Loading
|
|
72
|
-
</wally-button>
|
|
73
|
-
|
|
74
|
-
<div class="w-full flex justify-center items-center gap-2">
|
|
75
|
-
<div class="w-full">
|
|
76
|
-
<wally-button [showNotification]="true">
|
|
77
|
-
Messages
|
|
78
|
-
</wally-button>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<div class="flex justify-center">
|
|
82
|
-
<wally-button [showNotification]="true">
|
|
83
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
84
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
85
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
86
|
-
d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
|
|
87
|
-
</svg>
|
|
88
|
-
</wally-button>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
<div class="flex justify-center">
|
|
92
|
-
<wally-button [showNotification]="true">
|
|
93
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
94
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
95
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
96
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
97
|
-
</svg>
|
|
98
|
-
</wally-button>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</section>
|
|
104
|
-
|
|
105
55
|
<!-- Import -->
|
|
106
56
|
<section class="mb-8">
|
|
107
57
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
@@ -109,7 +59,6 @@
|
|
|
109
59
|
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
110
60
|
<pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
111
61
|
</div>
|
|
112
|
-
|
|
113
62
|
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
114
63
|
<pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
115
64
|
</div>
|
|
@@ -118,155 +67,218 @@
|
|
|
118
67
|
|
|
119
68
|
<!-- Basic Usage -->
|
|
120
69
|
<section class="mb-8">
|
|
121
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<div class="
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
70
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
|
|
71
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
72
|
+
<pre><code [innerHTML]="basicUsageTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
75
|
+
<wally-button>Click me</wally-button>
|
|
76
|
+
</div>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<!-- All Variants Preview -->
|
|
80
|
+
<section class="mb-8">
|
|
81
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">All Variants</h2>
|
|
82
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
83
|
+
<div class="flex flex-col gap-4">
|
|
84
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
85
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
86
|
+
<wally-button variant="destructive">Destructive</wally-button>
|
|
87
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
88
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
89
|
+
<wally-button variant="link" href="/components">Link</wally-button>
|
|
133
90
|
</div>
|
|
134
91
|
</div>
|
|
135
92
|
</section>
|
|
136
93
|
|
|
137
|
-
<!--
|
|
94
|
+
<!-- Variants Documentation -->
|
|
138
95
|
<section class="mb-8">
|
|
139
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<wally-button [disabled]="true">Disabled</wally-button>
|
|
96
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Variants</h2>
|
|
97
|
+
|
|
98
|
+
<!-- Primary -->
|
|
99
|
+
<div class="mb-6">
|
|
100
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Primary (Default)</h3>
|
|
101
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
102
|
+
High emphasis. Use for main actions and CTAs.
|
|
103
|
+
</p>
|
|
104
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
105
|
+
<pre><code [innerHTML]="primaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
108
|
+
<div class="flex flex-col gap-2">
|
|
109
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
110
|
+
<wally-button variant="primary" [disabled]="true">Disabled</wally-button>
|
|
111
|
+
<wally-button variant="primary" [loading]="true">Loading</wally-button>
|
|
154
112
|
</div>
|
|
155
113
|
</div>
|
|
114
|
+
</div>
|
|
156
115
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
116
|
+
<!-- Secondary -->
|
|
117
|
+
<div class="mb-6">
|
|
118
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Secondary</h3>
|
|
119
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
120
|
+
Medium emphasis. Use for secondary actions.
|
|
121
|
+
</p>
|
|
122
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
123
|
+
<pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
126
|
+
<div class="flex flex-col gap-2">
|
|
127
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
128
|
+
<wally-button variant="secondary" [disabled]="true">Disabled</wally-button>
|
|
129
|
+
<wally-button variant="secondary" [loading]="true">Loading</wally-button>
|
|
167
130
|
</div>
|
|
168
131
|
</div>
|
|
132
|
+
</div>
|
|
169
133
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
134
|
+
<!-- Destructive -->
|
|
135
|
+
<div class="mb-6">
|
|
136
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Destructive</h3>
|
|
137
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
138
|
+
Use for dangerous actions like delete or remove.
|
|
139
|
+
</p>
|
|
140
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
141
|
+
<pre><code [innerHTML]="destructiveVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
144
|
+
<div class="flex flex-col gap-2">
|
|
145
|
+
<wally-button variant="destructive">Delete</wally-button>
|
|
146
|
+
<wally-button variant="destructive" [disabled]="true">Disabled</wally-button>
|
|
147
|
+
<wally-button variant="destructive" [loading]="true">Deleting...</wally-button>
|
|
177
148
|
</div>
|
|
178
|
-
|
|
179
|
-
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<!-- Outline -->
|
|
153
|
+
<div class="mb-6">
|
|
154
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Outline</h3>
|
|
155
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
156
|
+
Low emphasis with border. Use for tertiary actions.
|
|
157
|
+
</p>
|
|
158
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
159
|
+
<pre><code [innerHTML]="outlineVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
162
|
+
<div class="flex flex-col gap-2">
|
|
163
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
164
|
+
<wally-button variant="outline" [disabled]="true">Disabled</wally-button>
|
|
165
|
+
<wally-button variant="outline" [loading]="true">Loading</wally-button>
|
|
180
166
|
</div>
|
|
181
167
|
</div>
|
|
182
168
|
</div>
|
|
183
|
-
</section>
|
|
184
169
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
170
|
+
<!-- Ghost -->
|
|
171
|
+
<div class="mb-6">
|
|
172
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Ghost</h3>
|
|
173
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
174
|
+
Minimal styling. Use for less prominent actions.
|
|
175
|
+
</p>
|
|
176
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
177
|
+
<pre><code [innerHTML]="ghostVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
180
|
+
<div class="flex flex-col gap-2">
|
|
181
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
182
|
+
<wally-button variant="ghost" [disabled]="true">Disabled</wally-button>
|
|
183
|
+
<wally-button variant="ghost" [loading]="true">Loading</wally-button>
|
|
196
184
|
</div>
|
|
197
|
-
|
|
198
|
-
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<!-- Link -->
|
|
189
|
+
<div class="mb-6">
|
|
190
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Link</h3>
|
|
191
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
192
|
+
Styled as a link. Supports internal routing and external URLs.
|
|
193
|
+
</p>
|
|
194
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
195
|
+
<pre><code [innerHTML]="linkVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
198
|
+
<div class="flex flex-col gap-2">
|
|
199
|
+
<wally-button variant="link" href="/components">Internal Link</wally-button>
|
|
200
|
+
<wally-button variant="link" href="https://github.com">External Link</wally-button>
|
|
201
|
+
<wally-button variant="link" [disabled]="true">Disabled</wally-button>
|
|
199
202
|
</div>
|
|
200
203
|
</div>
|
|
201
204
|
</div>
|
|
202
205
|
</section>
|
|
203
206
|
|
|
204
|
-
<!--
|
|
207
|
+
<!-- Production Examples -->
|
|
205
208
|
<section class="mb-8">
|
|
206
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
<div>
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
209
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Production Examples</h2>
|
|
210
|
+
|
|
211
|
+
<!-- CTA -->
|
|
212
|
+
<div class="mb-6">
|
|
213
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Call-to-Action Button</h3>
|
|
214
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
215
|
+
<pre><code [innerHTML]="ctaExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
218
|
+
<wally-button>
|
|
219
|
+
Get Started Free
|
|
220
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
221
|
+
stroke="currentColor" class="size-5">
|
|
222
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
223
|
+
</svg>
|
|
224
|
+
</wally-button>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<!-- Login Form -->
|
|
229
|
+
<div class="mb-6">
|
|
230
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Login Form</h3>
|
|
231
|
+
<div class="space-y-4">
|
|
232
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
233
|
+
<pre><code [innerHTML]="loginExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
215
234
|
</div>
|
|
216
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg
|
|
217
|
-
<pre><code [innerHTML]="
|
|
235
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
236
|
+
<pre><code [innerHTML]="loginExampleTsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
218
237
|
</div>
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
{{ clickMessage() }}
|
|
225
|
-
</p>
|
|
226
|
-
}
|
|
227
|
-
</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] mt-4">
|
|
240
|
+
<div class="flex gap-2">
|
|
241
|
+
<wally-button type="submit">Sign In</wally-button>
|
|
242
|
+
<wally-button variant="secondary">Create Account</wally-button>
|
|
228
243
|
</div>
|
|
229
244
|
</div>
|
|
230
245
|
</div>
|
|
231
|
-
</section>
|
|
232
246
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
244
|
-
<pre><code [innerHTML]="iconCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
247
|
+
<!-- Delete Confirmation -->
|
|
248
|
+
<div class="mb-6">
|
|
249
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Delete Confirmation Modal</h3>
|
|
250
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
251
|
+
<pre><code [innerHTML]="deleteExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
254
|
+
<div class="flex gap-2 justify-end">
|
|
255
|
+
<wally-button variant="ghost">Cancel</wally-button>
|
|
256
|
+
<wally-button variant="destructive">Delete Account</wally-button>
|
|
245
257
|
</div>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<!-- Dashboard Actions -->
|
|
262
|
+
<div class="mb-6">
|
|
263
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Dashboard Actions</h3>
|
|
264
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
265
|
+
<pre><code [innerHTML]="dashboardExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
268
|
+
<div class="flex gap-2">
|
|
269
|
+
<wally-button variant="outline">
|
|
270
|
+
Export
|
|
249
271
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
250
272
|
stroke="currentColor" class="size-5">
|
|
251
273
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
252
|
-
d="
|
|
274
|
+
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
253
275
|
</svg>
|
|
254
276
|
</wally-button>
|
|
255
|
-
</div>
|
|
256
|
-
</div>
|
|
257
|
-
|
|
258
|
-
<!-- Icon Only -->
|
|
259
|
-
<div>
|
|
260
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</h3>
|
|
261
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
262
|
-
<pre><code [innerHTML]="iconNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
263
|
-
</div>
|
|
264
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
265
277
|
<wally-button>
|
|
266
|
-
|
|
278
|
+
Create New
|
|
279
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
267
280
|
stroke="currentColor" class="size-5">
|
|
268
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
269
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
281
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
270
282
|
</svg>
|
|
271
283
|
</wally-button>
|
|
272
284
|
</div>
|
|
@@ -274,169 +286,391 @@
|
|
|
274
286
|
</div>
|
|
275
287
|
</section>
|
|
276
288
|
|
|
277
|
-
<!--
|
|
289
|
+
<!-- States -->
|
|
278
290
|
<section class="mb-8">
|
|
279
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
291
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">States</h2>
|
|
280
292
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
<
|
|
284
|
-
|
|
285
|
-
<
|
|
286
|
-
<pre><code [innerHTML]="ariaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
287
|
-
</div>
|
|
288
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
289
|
-
<wally-button ariaLabel="Save document">
|
|
290
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
291
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
|
|
292
|
-
</svg>
|
|
293
|
-
</wally-button>
|
|
294
|
-
</div>
|
|
293
|
+
<!-- Disabled -->
|
|
294
|
+
<div class="mb-6">
|
|
295
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Disabled</h3>
|
|
296
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
297
|
+
<pre><code [innerHTML]="disabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
295
298
|
</div>
|
|
299
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
300
|
+
<wally-button [disabled]="true">Disabled Button</wally-button>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
296
303
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
Toggle Setting
|
|
306
|
-
</wally-button>
|
|
307
|
-
</div>
|
|
304
|
+
<!-- Loading -->
|
|
305
|
+
<div class="mb-6">
|
|
306
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading</h3>
|
|
307
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
308
|
+
<pre><code [innerHTML]="loadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
311
|
+
<wally-button [loading]="true">Loading...</wally-button>
|
|
308
312
|
</div>
|
|
313
|
+
</div>
|
|
309
314
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
</
|
|
315
|
+
<!-- Notification -->
|
|
316
|
+
<div class="mb-6">
|
|
317
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">With Notification Badge</h3>
|
|
318
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
319
|
+
<pre><code [innerHTML]="notificationButtonCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
322
|
+
<wally-button [showNotification]="true" ariaLabel="View messages">
|
|
323
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
324
|
+
stroke="currentColor" class="size-5">
|
|
325
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
326
|
+
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
327
|
+
</svg>
|
|
328
|
+
</wally-button>
|
|
324
329
|
</div>
|
|
325
330
|
</div>
|
|
326
331
|
</section>
|
|
327
332
|
|
|
328
|
-
<!--
|
|
333
|
+
<!-- Button Types -->
|
|
329
334
|
<section class="mb-8">
|
|
330
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
335
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Button Types</h2>
|
|
331
336
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
|
|
337
|
+
<!-- Submit -->
|
|
338
|
+
<div class="mb-6">
|
|
339
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
|
|
340
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
341
|
+
<pre><code [innerHTML]="submitCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
338
342
|
</div>
|
|
343
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
344
|
+
<wally-button type="submit">Submit Form</wally-button>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
339
347
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
<
|
|
348
|
+
<!-- Reset -->
|
|
349
|
+
<div class="mb-6">
|
|
350
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Reset Button</h3>
|
|
351
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
352
|
+
<pre><code [innerHTML]="resetCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
355
|
+
<wally-button type="reset" variant="ghost">Reset</wally-button>
|
|
345
356
|
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</section>
|
|
346
359
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
360
|
+
<!-- Events -->
|
|
361
|
+
<section class="mb-8">
|
|
362
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Click Events</h2>
|
|
363
|
+
|
|
364
|
+
<div class="space-y-4">
|
|
365
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
366
|
+
<pre><code [innerHTML]="clickCodeHTML" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
369
|
+
<pre><code [innerHTML]="clickCodeTs" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
352
370
|
</div>
|
|
371
|
+
</div>
|
|
353
372
|
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
<p class="text-sm text-
|
|
373
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] mt-4">
|
|
374
|
+
<div class="flex flex-col gap-2 text-center">
|
|
375
|
+
<wally-button (click)="handleClick()">Click Me</wally-button>
|
|
376
|
+
@if (clickMessage()) {
|
|
377
|
+
<p class="text-sm text-green-600 dark:text-green-400 font-medium">
|
|
378
|
+
{{ clickMessage() }}
|
|
379
|
+
</p>
|
|
380
|
+
}
|
|
359
381
|
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</section>
|
|
360
384
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
385
|
+
<!-- Icons -->
|
|
386
|
+
<section class="mb-8">
|
|
387
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Button with Icons</h2>
|
|
388
|
+
|
|
389
|
+
<!-- Icon with Text -->
|
|
390
|
+
<div class="mb-6">
|
|
391
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon with Text</h3>
|
|
392
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
393
|
+
<pre><code [innerHTML]="iconCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
366
394
|
</div>
|
|
395
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
396
|
+
<wally-button>
|
|
397
|
+
Save Changes
|
|
398
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
399
|
+
stroke="currentColor" class="size-5">
|
|
400
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
401
|
+
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
402
|
+
</svg>
|
|
403
|
+
</wally-button>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
367
406
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
<
|
|
407
|
+
<!-- Icon Only -->
|
|
408
|
+
<div class="mb-6">
|
|
409
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</h3>
|
|
410
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
411
|
+
<pre><code [innerHTML]="iconOnlyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
412
|
+
</div>
|
|
413
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
414
|
+
<wally-button ariaLabel="Notifications">
|
|
415
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
416
|
+
stroke="currentColor" class="size-5">
|
|
417
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
418
|
+
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
419
|
+
</svg>
|
|
420
|
+
</wally-button>
|
|
373
421
|
</div>
|
|
422
|
+
</div>
|
|
374
423
|
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
<
|
|
424
|
+
<!-- Icon Left -->
|
|
425
|
+
<div class="mb-6">
|
|
426
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Left</h3>
|
|
427
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
428
|
+
<pre><code [innerHTML]="iconLeftCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
431
|
+
<wally-button>
|
|
432
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
433
|
+
stroke="currentColor" class="size-5">
|
|
434
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
435
|
+
</svg>
|
|
436
|
+
Back
|
|
437
|
+
</wally-button>
|
|
380
438
|
</div>
|
|
381
439
|
</div>
|
|
382
440
|
</section>
|
|
383
441
|
|
|
384
|
-
<!--
|
|
442
|
+
<!-- Accessibility -->
|
|
385
443
|
<section class="mb-8">
|
|
386
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
444
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Accessibility</h2>
|
|
387
445
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
446
|
+
<!-- ARIA Label -->
|
|
447
|
+
<div class="mb-6">
|
|
448
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Label (Essential for Icon-Only
|
|
449
|
+
Buttons)</h3>
|
|
450
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
451
|
+
<pre><code [innerHTML]="ariaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
454
|
+
<wally-button ariaLabel="Save document">
|
|
455
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
456
|
+
stroke="currentColor" class="size-5">
|
|
457
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
458
|
+
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
|
|
459
|
+
</svg>
|
|
460
|
+
</wally-button>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
|
|
464
|
+
<!-- Toggle Button -->
|
|
465
|
+
<div class="mb-6">
|
|
466
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Toggle Button with ARIA Pressed</h3>
|
|
467
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
468
|
+
<pre><code [innerHTML]="ariaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
469
|
+
</div>
|
|
470
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
471
|
+
<wally-button [ariaPressed]="toggleState()">
|
|
472
|
+
{{ toggleState() ? 'On' : 'Off' }}
|
|
473
|
+
</wally-button>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<!-- Loading State ARIA -->
|
|
478
|
+
<div class="mb-6">
|
|
479
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading State (Automatic ARIA Busy)</h3>
|
|
480
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
481
|
+
<pre><code [innerHTML]="ariaBusyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
484
|
+
<wally-button [loading]="true">Processing...</wally-button>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<!-- ARIA Described By -->
|
|
489
|
+
<div class="mb-6">
|
|
490
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Described By</h3>
|
|
491
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
492
|
+
<pre><code [innerHTML]="ariaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
495
|
+
<wally-button ariaDescribedBy="save-description">Save</wally-button>
|
|
496
|
+
<p id="save-description" class="text-xs text-gray-600 dark:text-gray-400 mt-2">
|
|
497
|
+
Saves your changes permanently
|
|
396
498
|
</p>
|
|
397
499
|
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</section>
|
|
398
502
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
503
|
+
<!-- API Reference -->
|
|
504
|
+
<section class="mb-8">
|
|
505
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">API Reference</h2>
|
|
506
|
+
|
|
507
|
+
<!-- Input Properties -->
|
|
508
|
+
<div class="mb-6">
|
|
509
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Input Properties</h3>
|
|
510
|
+
<div
|
|
511
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
512
|
+
<div class="overflow-x-auto">
|
|
513
|
+
<table class="w-full text-sm">
|
|
514
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
515
|
+
<tr>
|
|
516
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
517
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
518
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
|
|
519
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
520
|
+
</tr>
|
|
521
|
+
</thead>
|
|
522
|
+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
523
|
+
<tr>
|
|
524
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
|
|
525
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
526
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
|
|
527
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">HTML button type: 'button', 'submit', or 'reset'
|
|
528
|
+
</td>
|
|
529
|
+
</tr>
|
|
530
|
+
<tr>
|
|
531
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
|
|
532
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary' |
|
|
533
|
+
'destructive' | 'outline' | 'ghost' | 'link'</td>
|
|
534
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
|
|
535
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Visual style variant of the button</td>
|
|
536
|
+
</tr>
|
|
537
|
+
<tr>
|
|
538
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">href</td>
|
|
539
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
540
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
541
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">URL for navigation (used with variant="link").
|
|
542
|
+
Supports internal routes and external URLs</td>
|
|
543
|
+
</tr>
|
|
544
|
+
<tr>
|
|
545
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
|
|
546
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
547
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
548
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Disables the button, preventing user interaction
|
|
549
|
+
</td>
|
|
550
|
+
</tr>
|
|
551
|
+
<tr>
|
|
552
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
|
|
553
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
554
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
555
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button.
|
|
556
|
+
Automatically sets aria-busy="true"</td>
|
|
557
|
+
</tr>
|
|
558
|
+
<tr>
|
|
559
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
|
|
560
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
561
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
562
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows animated notification badge in top-right
|
|
563
|
+
corner</td>
|
|
564
|
+
</tr>
|
|
565
|
+
<tr>
|
|
566
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
|
|
567
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
568
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
569
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers. Essential for
|
|
570
|
+
icon-only buttons</td>
|
|
571
|
+
</tr>
|
|
572
|
+
<tr>
|
|
573
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
|
|
574
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
|
|
575
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
|
|
576
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons. Use
|
|
577
|
+
true/false for toggle functionality</td>
|
|
578
|
+
</tr>
|
|
579
|
+
<tr>
|
|
580
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
|
|
581
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
582
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
583
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">ID(s) of element(s) that describe the button for
|
|
584
|
+
screen readers</td>
|
|
585
|
+
</tr>
|
|
586
|
+
</tbody>
|
|
587
|
+
</table>
|
|
403
588
|
</div>
|
|
404
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
405
|
-
Visual feedback with ripple animation on button press for enhanced user experience.
|
|
406
|
-
</p>
|
|
407
589
|
</div>
|
|
590
|
+
</div>
|
|
408
591
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
592
|
+
<!-- Output Events -->
|
|
593
|
+
<div class="mb-6">
|
|
594
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Output Events</h3>
|
|
595
|
+
<div
|
|
596
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
597
|
+
<div class="overflow-x-auto">
|
|
598
|
+
<table class="w-full text-sm">
|
|
599
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
600
|
+
<tr>
|
|
601
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Event</th>
|
|
602
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Payload</th>
|
|
603
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
604
|
+
</tr>
|
|
605
|
+
</thead>
|
|
606
|
+
<tbody>
|
|
607
|
+
<tr>
|
|
608
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">click</td>
|
|
609
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
610
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked. Also handles
|
|
611
|
+
navigation for link variant</td>
|
|
612
|
+
</tr>
|
|
613
|
+
</tbody>
|
|
614
|
+
</table>
|
|
413
615
|
</div>
|
|
414
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
415
|
-
Built-in tooltip integration for providing additional context and information.
|
|
416
|
-
</p>
|
|
417
616
|
</div>
|
|
617
|
+
</div>
|
|
418
618
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
619
|
+
<!-- Methods -->
|
|
620
|
+
<div class="mb-6">
|
|
621
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Methods</h3>
|
|
622
|
+
<div
|
|
623
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
624
|
+
<div class="overflow-x-auto">
|
|
625
|
+
<table class="w-full text-sm">
|
|
626
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
627
|
+
<tr>
|
|
628
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Method</th>
|
|
629
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Parameters</th>
|
|
630
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Return</th>
|
|
631
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
632
|
+
</tr>
|
|
633
|
+
</thead>
|
|
634
|
+
<tbody>
|
|
635
|
+
<tr>
|
|
636
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">handleClick()</td>
|
|
637
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">event: MouseEvent</td>
|
|
638
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
639
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Internal click handler. Manages navigation for link
|
|
640
|
+
variant and emits click event</td>
|
|
641
|
+
</tr>
|
|
642
|
+
</tbody>
|
|
643
|
+
</table>
|
|
423
644
|
</div>
|
|
424
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
425
|
-
Button that functions as a link with href support while maintaining button styling.
|
|
426
|
-
</p>
|
|
427
645
|
</div>
|
|
646
|
+
</div>
|
|
428
647
|
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
648
|
+
<!-- Computed Properties -->
|
|
649
|
+
<div class="mb-6">
|
|
650
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Computed Properties</h3>
|
|
651
|
+
<div
|
|
652
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
653
|
+
<div class="overflow-x-auto">
|
|
654
|
+
<table class="w-full text-sm">
|
|
655
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
656
|
+
<tr>
|
|
657
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
658
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
659
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
660
|
+
</tr>
|
|
661
|
+
</thead>
|
|
662
|
+
<tbody>
|
|
663
|
+
<tr>
|
|
664
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variantClasses</td>
|
|
665
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">Signal<string></td>
|
|
666
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Computed signal that returns CSS classes based on
|
|
667
|
+
variant. Automatically updates when variant changes</td>
|
|
668
|
+
</tr>
|
|
669
|
+
</tbody>
|
|
670
|
+
</table>
|
|
433
671
|
</div>
|
|
434
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
435
|
-
Group multiple buttons together with proper spacing and border handling.
|
|
436
|
-
</p>
|
|
437
672
|
</div>
|
|
438
673
|
</div>
|
|
439
674
|
</section>
|
|
440
|
-
|
|
441
675
|
</div>
|
|
442
|
-
</div>
|
|
676
|
+
</div>
|