wally-ui 1.11.0 → 1.11.1
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 +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
|
@@ -1,178 +1,250 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="max-w-4xl mx-auto
|
|
3
|
-
|
|
1
|
+
<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
|
|
3
|
+
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
4
6
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
-
</
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
7
|
+
</nav>
|
|
8
|
+
|
|
9
|
+
<!-- Header -->
|
|
10
|
+
<header class="mb-12" role="banner">
|
|
11
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
12
|
+
<span aria-hidden="true">>_ </span>Breadcrumb
|
|
13
|
+
</h1>
|
|
14
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
|
|
15
|
+
A navigation component that shows the current page location within a hierarchy using semantic HTML.
|
|
16
|
+
</p>
|
|
17
|
+
</header>
|
|
18
|
+
|
|
19
|
+
<!-- AI Assistant Links -->
|
|
20
|
+
<section class="mb-12" aria-labelledby="ai-links-heading">
|
|
21
|
+
<h2 id="ai-links-heading" class="sr-only">AI Assistant Integration Links</h2>
|
|
22
|
+
<div class="flex flex-wrap gap-0 border-2 border-neutral-300 dark:border-neutral-700" role="list"
|
|
23
|
+
aria-label="Open component in AI coding assistants">
|
|
24
|
+
<a [href]="claudeUrl" target="_blank"
|
|
25
|
+
class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] border-b-2 sm:border-b-0 sm:border-r-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
26
|
+
role="listitem"
|
|
27
|
+
aria-label="Open Breadcrumb component documentation in Claude AI assistant (opens in new tab)">
|
|
28
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
30
|
+
viewBox="0 0 24 24">
|
|
31
|
+
<path fill="currentColor"
|
|
32
|
+
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" />
|
|
33
|
+
</svg>
|
|
34
|
+
<span
|
|
35
|
+
class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
|
|
36
|
+
Open in Claude
|
|
37
|
+
</span>
|
|
38
|
+
</a>
|
|
39
|
+
|
|
40
|
+
<a [href]="chatGptUrl" target="_blank"
|
|
41
|
+
class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
42
|
+
role="listitem"
|
|
43
|
+
aria-label="Open Breadcrumb component documentation in ChatGPT AI assistant (opens in new tab)">
|
|
44
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
46
|
+
viewBox="0 0 48 48">
|
|
47
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
48
|
+
d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
|
|
49
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
50
|
+
d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
|
|
51
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
52
|
+
d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
|
|
53
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
54
|
+
d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
|
|
55
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
56
|
+
d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
|
|
57
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
58
|
+
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
59
|
+
</svg>
|
|
60
|
+
<span
|
|
61
|
+
class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
|
|
62
|
+
Open in ChatGPT
|
|
63
|
+
</span>
|
|
64
|
+
</a>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
45
67
|
|
|
46
68
|
<!-- Installation -->
|
|
47
|
-
<section class="mb-
|
|
48
|
-
<h2
|
|
49
|
-
|
|
50
|
-
|
|
69
|
+
<section id="installation" class="mb-12" aria-labelledby="installation-heading">
|
|
70
|
+
<h2 id="installation-heading"
|
|
71
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
72
|
+
[ Installation ]
|
|
73
|
+
</h2>
|
|
74
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
75
|
+
<pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
51
76
|
</div>
|
|
52
77
|
</section>
|
|
53
78
|
|
|
54
79
|
<!-- Preview -->
|
|
55
|
-
<section class="mb-
|
|
56
|
-
<h2
|
|
57
|
-
|
|
80
|
+
<section id="preview" class="mb-12" aria-labelledby="preview-heading">
|
|
81
|
+
<h2 id="preview-heading"
|
|
82
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
83
|
+
[ Preview ]
|
|
58
84
|
</h2>
|
|
59
|
-
<div class="p-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
85
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] min-h-[240px]" role="img"
|
|
86
|
+
aria-label="Live preview of breadcrumb component with multi-level navigation">
|
|
87
|
+
<div class="flex items-center justify-center h-full">
|
|
88
|
+
<wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
|
|
89
|
+
</div>
|
|
63
90
|
</div>
|
|
64
91
|
</section>
|
|
65
92
|
|
|
66
93
|
<!-- Import -->
|
|
67
|
-
<section class="mb-
|
|
68
|
-
<h2
|
|
94
|
+
<section id="import" class="mb-12" aria-labelledby="import-heading">
|
|
95
|
+
<h2 id="import-heading"
|
|
96
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
97
|
+
[ Import ]
|
|
98
|
+
</h2>
|
|
69
99
|
<div class="space-y-4">
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
|
|
100
|
+
<article aria-labelledby="interface-import-heading">
|
|
101
|
+
<h3 id="interface-import-heading" class="sr-only">Import breadcrumb item interface</h3>
|
|
102
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
103
|
+
<pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
104
|
+
</div>
|
|
105
|
+
</article>
|
|
73
106
|
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
107
|
+
<article aria-labelledby="component-import-heading">
|
|
108
|
+
<h3 id="component-import-heading" class="sr-only">Import breadcrumb component</h3>
|
|
109
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
110
|
+
<pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
111
|
+
</div>
|
|
112
|
+
</article>
|
|
77
113
|
</div>
|
|
78
114
|
</section>
|
|
79
115
|
|
|
80
116
|
<!-- Basic Usage -->
|
|
81
|
-
<section class="mb-
|
|
82
|
-
<h2
|
|
117
|
+
<section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
|
|
118
|
+
<h2 id="basic-usage-heading"
|
|
119
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
120
|
+
[ Basic Usage ]
|
|
121
|
+
</h2>
|
|
83
122
|
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
|
|
123
|
+
<article class="mb-8" aria-labelledby="simple-breadcrumb-heading">
|
|
124
|
+
<h3 id="simple-breadcrumb-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
125
|
+
<span aria-hidden="true">> </span>Simple Breadcrumb
|
|
126
|
+
</h3>
|
|
127
|
+
|
|
128
|
+
<div class="space-y-4">
|
|
129
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
130
|
+
<pre><code [innerHTML]="basicSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
88
131
|
</div>
|
|
89
|
-
<div class="bg-
|
|
90
|
-
<pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
132
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
133
|
+
<pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
91
134
|
</div>
|
|
92
|
-
<div class="p-
|
|
135
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
136
|
+
aria-label="Live example of simple breadcrumb with single item">
|
|
93
137
|
<wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
|
|
94
138
|
</div>
|
|
95
139
|
</div>
|
|
96
|
-
</
|
|
140
|
+
</article>
|
|
97
141
|
</section>
|
|
98
142
|
|
|
99
143
|
<!-- Examples -->
|
|
100
|
-
<section class="mb-
|
|
101
|
-
<h2
|
|
144
|
+
<section id="examples" class="mb-12" aria-labelledby="examples-heading">
|
|
145
|
+
<h2 id="examples-heading"
|
|
146
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
147
|
+
[ Examples ]
|
|
148
|
+
</h2>
|
|
102
149
|
|
|
103
150
|
<div class="space-y-8">
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
151
|
+
<article aria-labelledby="multi-level-heading">
|
|
152
|
+
<h3 id="multi-level-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
153
|
+
<span aria-hidden="true">> </span>Multi-level Navigation
|
|
154
|
+
</h3>
|
|
155
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
156
|
+
<pre><code [innerHTML]="multiLevelSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
109
157
|
</div>
|
|
110
|
-
<div class="p-
|
|
158
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
159
|
+
aria-label="Live example of multi-level breadcrumb with 4 items">
|
|
111
160
|
<wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
|
|
112
161
|
</div>
|
|
113
|
-
</
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
162
|
+
</article>
|
|
163
|
+
|
|
164
|
+
<article aria-labelledby="single-item-heading">
|
|
165
|
+
<h3 id="single-item-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
166
|
+
<span aria-hidden="true">> </span>Single Item
|
|
167
|
+
</h3>
|
|
168
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
169
|
+
<pre><code [innerHTML]="singleItemSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
120
170
|
</div>
|
|
121
|
-
<div class="p-
|
|
171
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
172
|
+
aria-label="Live example of single item breadcrumb">
|
|
122
173
|
<wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
|
|
123
174
|
</div>
|
|
124
|
-
</
|
|
175
|
+
</article>
|
|
125
176
|
</div>
|
|
126
177
|
</section>
|
|
127
178
|
|
|
128
179
|
<!-- Properties -->
|
|
129
|
-
<section class="mb-
|
|
130
|
-
<h2
|
|
180
|
+
<section id="properties" class="mb-12" aria-labelledby="properties-heading">
|
|
181
|
+
<h2 id="properties-heading"
|
|
182
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
183
|
+
[ Properties ]
|
|
184
|
+
</h2>
|
|
131
185
|
|
|
132
|
-
<
|
|
186
|
+
<article aria-labelledby="items-property-heading">
|
|
187
|
+
<h3 id="items-property-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
188
|
+
<span aria-hidden="true">> </span>Items Property
|
|
189
|
+
</h3>
|
|
133
190
|
<div class="space-y-2">
|
|
134
|
-
<div class="bg-
|
|
135
|
-
<pre><code [innerHTML]="propertyItemsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
191
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
192
|
+
<pre><code [innerHTML]="propertyItemsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
136
193
|
</div>
|
|
137
|
-
<p class="text-sm text-
|
|
194
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Array of breadcrumb items to display</p>
|
|
138
195
|
</div>
|
|
139
|
-
</
|
|
196
|
+
</article>
|
|
140
197
|
</section>
|
|
141
198
|
|
|
142
199
|
<!-- Interface -->
|
|
143
|
-
<section class="mb-
|
|
144
|
-
<h2
|
|
200
|
+
<section id="interface" class="mb-12" aria-labelledby="interface-heading">
|
|
201
|
+
<h2 id="interface-heading"
|
|
202
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
203
|
+
[ Interface ]
|
|
204
|
+
</h2>
|
|
145
205
|
|
|
146
|
-
<div class="bg-
|
|
147
|
-
<pre><code [innerHTML]="interfaceCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
206
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
207
|
+
<pre><code [innerHTML]="interfaceCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
148
208
|
</div>
|
|
149
209
|
</section>
|
|
150
210
|
|
|
151
211
|
<!-- Under Construction -->
|
|
152
|
-
<section class="mb-
|
|
153
|
-
<h2
|
|
212
|
+
<section id="under-construction" class="mb-12" aria-labelledby="construction-heading">
|
|
213
|
+
<h2 id="construction-heading"
|
|
214
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
215
|
+
[ Under Construction ]
|
|
216
|
+
</h2>
|
|
154
217
|
|
|
155
|
-
<div class="space-y-
|
|
156
|
-
<
|
|
218
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
219
|
+
<article class="p-6 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]"
|
|
220
|
+
aria-labelledby="custom-separators-heading">
|
|
157
221
|
<div class="flex items-center gap-2 mb-2">
|
|
158
|
-
<h3 class="text-
|
|
159
|
-
|
|
222
|
+
<h3 id="custom-separators-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">
|
|
223
|
+
<span aria-hidden="true">> </span>Custom Separators
|
|
224
|
+
</h3>
|
|
225
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 font-bold" aria-label="Feature under construction">
|
|
226
|
+
UNDER CONSTRUCTION
|
|
227
|
+
</span>
|
|
160
228
|
</div>
|
|
161
|
-
<p class="text-sm text-
|
|
229
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
162
230
|
Support for custom separator characters and icons between breadcrumb items.
|
|
163
231
|
</p>
|
|
164
|
-
</
|
|
232
|
+
</article>
|
|
165
233
|
|
|
166
|
-
<
|
|
234
|
+
<article class="p-6 bg-white dark:bg-[#0a0a0a]" aria-labelledby="dropdown-overflow-heading">
|
|
167
235
|
<div class="flex items-center gap-2 mb-2">
|
|
168
|
-
<h3 class="text-
|
|
169
|
-
|
|
236
|
+
<h3 id="dropdown-overflow-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">
|
|
237
|
+
<span aria-hidden="true">> </span>Dropdown Overflow
|
|
238
|
+
</h3>
|
|
239
|
+
<span class="text-xs bg-yellow-500 text-black px-2 py-1 font-bold" aria-label="Feature under construction">
|
|
240
|
+
UNDER CONSTRUCTION
|
|
241
|
+
</span>
|
|
170
242
|
</div>
|
|
171
|
-
<p class="text-sm text-
|
|
243
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
172
244
|
Collapse breadcrumb items into a dropdown when there are too many to display.
|
|
173
245
|
</p>
|
|
174
|
-
</
|
|
246
|
+
</article>
|
|
175
247
|
</div>
|
|
176
248
|
</section>
|
|
177
249
|
</div>
|
|
178
|
-
</
|
|
250
|
+
</main>
|
|
@@ -225,4 +225,118 @@ export const ButtonCodeExamples = {
|
|
|
225
225
|
<p id="save-description" class="sr-only">
|
|
226
226
|
Saves your changes permanently
|
|
227
227
|
</p>`,
|
|
228
|
+
|
|
229
|
+
// === EDGE CASES & ADVANCED ===
|
|
230
|
+
|
|
231
|
+
// Form Integration
|
|
232
|
+
formIntegration: `<!-- Button with form validation -->
|
|
233
|
+
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
|
|
234
|
+
<!-- form fields -->
|
|
235
|
+
|
|
236
|
+
<wally-button
|
|
237
|
+
type="submit"
|
|
238
|
+
[disabled]="!myForm.valid"
|
|
239
|
+
[loading]="isSubmitting()">
|
|
240
|
+
Submit
|
|
241
|
+
</wally-button>
|
|
242
|
+
</form>`,
|
|
243
|
+
|
|
244
|
+
formIntegrationTs: `export class MyComponent {
|
|
245
|
+
myForm = new FormGroup({
|
|
246
|
+
name: new FormControl('', Validators.required)
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
isSubmitting = signal(false);
|
|
250
|
+
|
|
251
|
+
onSubmit() {
|
|
252
|
+
if (this.myForm.valid) {
|
|
253
|
+
this.isSubmitting.set(true);
|
|
254
|
+
// API call...
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}`,
|
|
258
|
+
|
|
259
|
+
// Router Integration
|
|
260
|
+
routerExample: `<!-- Using with Angular Router -->
|
|
261
|
+
<wally-button variant="link" href="/dashboard">
|
|
262
|
+
Go to Dashboard
|
|
263
|
+
</wally-button>
|
|
264
|
+
|
|
265
|
+
<!-- Programmatic navigation -->
|
|
266
|
+
<wally-button (click)="navigateToProfile()">
|
|
267
|
+
View Profile
|
|
268
|
+
</wally-button>`,
|
|
269
|
+
|
|
270
|
+
routerExampleTs: `constructor(private router: Router) {}
|
|
271
|
+
|
|
272
|
+
navigateToProfile() {
|
|
273
|
+
this.router.navigate(['/profile', this.userId]);
|
|
274
|
+
}`,
|
|
275
|
+
|
|
276
|
+
// Loading + Disabled behavior
|
|
277
|
+
loadingDisabledExample: `<!-- Loading takes precedence over disabled -->
|
|
278
|
+
<wally-button
|
|
279
|
+
[disabled]="formInvalid()"
|
|
280
|
+
[loading]="isSaving()">
|
|
281
|
+
Save
|
|
282
|
+
</wally-button>
|
|
283
|
+
|
|
284
|
+
<!-- Result: When loading=true, button is disabled regardless of disabled prop -->`,
|
|
285
|
+
|
|
286
|
+
// Icon recommendations
|
|
287
|
+
iconRecommendations: `<!-- Recommended: Heroicons with size-5 (20px) -->
|
|
288
|
+
<wally-button>
|
|
289
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
290
|
+
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
291
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="..." />
|
|
292
|
+
</svg>
|
|
293
|
+
Action
|
|
294
|
+
</wally-button>
|
|
295
|
+
|
|
296
|
+
<!-- Also works with: Lucide, Phosphor, Font Awesome SVG -->`,
|
|
297
|
+
|
|
298
|
+
// Signals pattern
|
|
299
|
+
signalsPattern: `<!-- Using Angular Signals (reactive) -->
|
|
300
|
+
export class MyComponent {
|
|
301
|
+
isLoading = signal(false);
|
|
302
|
+
isDisabled = computed(() => !this.form.valid);
|
|
303
|
+
|
|
304
|
+
async handleSubmit() {
|
|
305
|
+
this.isLoading.set(true);
|
|
306
|
+
await this.api.save();
|
|
307
|
+
this.isLoading.set(false);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
<!-- Template -->
|
|
312
|
+
<wally-button
|
|
313
|
+
[loading]="isLoading()"
|
|
314
|
+
[disabled]="isDisabled()"
|
|
315
|
+
(click)="handleSubmit()">
|
|
316
|
+
Submit
|
|
317
|
+
</wally-button>`,
|
|
318
|
+
|
|
319
|
+
// Button vs type="button"
|
|
320
|
+
buttonTypeExplained: `<!-- GOOD: Explicit type prevents accidental form submission -->
|
|
321
|
+
<wally-button type="button" (click)="openModal()">
|
|
322
|
+
Open
|
|
323
|
+
</wally-button>
|
|
324
|
+
|
|
325
|
+
<!-- CAUTION: Default type="button" is safe, but explicit is better -->
|
|
326
|
+
<wally-button (click)="openModal()">Open</wally-button>
|
|
327
|
+
|
|
328
|
+
<!-- GOOD: Use type="submit" for form submission -->
|
|
329
|
+
<form (ngSubmit)="save()">
|
|
330
|
+
<wally-button type="submit">Save</wally-button>
|
|
331
|
+
</form>`,
|
|
332
|
+
|
|
333
|
+
// Href without link variant
|
|
334
|
+
hrefBehavior: `<!-- href only works with variant="link" -->
|
|
335
|
+
|
|
336
|
+
<!-- CORRECT: Works as expected -->
|
|
337
|
+
<wally-button variant="link" href="/page">Link</wally-button>
|
|
338
|
+
|
|
339
|
+
<!-- INCORRECT: href is ignored, just a regular button -->
|
|
340
|
+
<wally-button href="/page">Button</wally-button>`,
|
|
341
|
+
|
|
228
342
|
};
|