Skip to content

Commit 8d9f314

Browse files
eryue0220serhalp
eryue0220
and
serhalp
authored
fix: fix html-validation error (#1658)
Co-authored-by: Philippe Serhal <philippe.serhal@gmail.com>
1 parent c138141 commit 8d9f314

4 files changed

Lines changed: 34 additions & 32 deletions

File tree

‎app/components/Package/ManagerSelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function handleKeydown(event: KeyboardEvent) {
101101
:aria-expanded="isOpen"
102102
aria-haspopup="listbox"
103103
:aria-label="$t('package.get_started.pm_label')"
104-
:aria-controls="listboxId"
104+
:aria-controls="isOpen ? listboxId : undefined"
105105
@click="toggle"
106106
@keydown="handleKeydown"
107107
>

‎app/components/ReadmeTocDropdown.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ watch(
169169
:aria-expanded="isOpen"
170170
aria-haspopup="listbox"
171171
:aria-label="$t('package.readme.toc_title')"
172-
:aria-controls="listboxId"
172+
:aria-controls="isOpen ? listboxId : undefined"
173173
@click="toggle"
174174
@keydown="handleKeydown"
175175
classicon="i-lucide:list"
@@ -201,7 +201,9 @@ watch(
201201
ref="listRef"
202202
role="listbox"
203203
:aria-activedescendant="
204-
highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
204+
highlightedIndex >= 0 && toc[highlightedIndex]?.id
205+
? `${listboxId}-${toc[highlightedIndex]?.id}`
206+
: undefined
205207
"
206208
:aria-label="$t('package.readme.toc_title')"
207209
:style="getDropdownStyle()"
@@ -252,7 +254,7 @@ watch(
252254
:aria-selected="activeId === grandchild.id"
253255
class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
254256
:class="[
255-
activeId === grandchild.id ? 'text-fg font-medium' : 'text-fg-subtle',
257+
grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
256258
highlightedIndex === getIndex(grandchild.id)
257259
? 'bg-bg-elevated'
258260
: 'hover:bg-bg-elevated',

‎docs/app/components/BadgeGenerator.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const copyToClipboard = async () => {
2222
class="my-8 p-5 rounded-xl border border-gray-200/60 dark:border-white/5 bg-gray-50/50 dark:bg-white/2 flex flex-col sm:flex-row items-end gap-4"
2323
>
2424
<div class="flex flex-col gap-1.5 flex-1 w-full">
25-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
25+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
2626
>Package Name</label
2727
>
2828
<input
@@ -36,7 +36,7 @@ const copyToClipboard = async () => {
3636
</div>
3737

3838
<div class="flex flex-col gap-1.5 flex-1 w-full">
39-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
39+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
4040
>Badge Type</label
4141
>
4242
<div class="relative">
@@ -49,20 +49,20 @@ const copyToClipboard = async () => {
4949
</option>
5050
</select>
5151
<span
52-
class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
52+
class="absolute inset-ie-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
5353
/>
5454
</div>
5555
</div>
5656

5757
<div class="flex flex-col gap-1.5 flex-2 w-full">
58-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
58+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
5959
>Preview & Action</label
6060
>
6161
<div
6262
class="flex items-center bg-white dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg h-10.5 overflow-hidden"
6363
>
6464
<div
65-
class="flex-1 flex items-center justify-center px-3 border-r border-gray-200 dark:border-white/10 h-full bg-gray-50/50 dark:bg-transparent"
65+
class="flex-1 flex items-center justify-center px-3 border-ie border-gray-200 dark:border-white/10 h-full bg-gray-50/50 dark:bg-transparent"
6666
>
6767
<img
6868
v-if="isValid"
@@ -71,15 +71,15 @@ const copyToClipboard = async () => {
7171
alt="Badge Preview"
7272
@error="isValid = false"
7373
/>
74-
<span v-else class="text-[10px] font-bold text-red-500 uppercase tracking-tighter"
74+
<span v-else class="text-3xs font-bold text-red-500 uppercase tracking-tighter"
7575
>Invalid</span
7676
>
7777
</div>
7878

7979
<button
8080
@click="copyToClipboard"
8181
:disabled="!isValid || !pkg"
82-
class="px-4 h-full text-[11px] font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-21.25 hover:bg-gray-50 dark:hover:bg-white/5"
82+
class="px-4 h-full text-2xs font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-21.25 hover:bg-gray-50 dark:hover:bg-white/5"
8383
:class="
8484
copied
8585
? 'text-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/10'

‎docs/app/components/BadgeGeneratorParameters.vue‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const copyToClipboard = async () => {
7070
>
7171
<div class="flex flex-col lg:flex-row items-end gap-4">
7272
<div class="flex flex-col gap-1.5 flex-1 w-full">
73-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
73+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
7474
>Package Name</label
7575
>
7676
<input
@@ -82,7 +82,7 @@ const copyToClipboard = async () => {
8282
</div>
8383

8484
<div class="flex flex-col gap-1.5 flex-1 w-full">
85-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
85+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
8686
>Badge Type</label
8787
>
8888
<div class="relative">
@@ -95,20 +95,20 @@ const copyToClipboard = async () => {
9595
</option>
9696
</select>
9797
<span
98-
class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
98+
class="absolute inset-ie-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
9999
/>
100100
</div>
101101
</div>
102102

103103
<div class="flex flex-col gap-1.5 flex-2 w-full">
104-
<label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
104+
<label class="text-2xs font-bold uppercase tracking-wider text-gray-400 ms-1"
105105
>Preview & Action</label
106106
>
107107
<div
108108
class="flex items-center bg-white dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg h-10.5 overflow-hidden"
109109
>
110110
<div
111-
class="flex-1 flex items-center justify-center px-3 border-r border-gray-200 dark:border-white/10 h-full bg-gray-50/10 dark:bg-transparent"
111+
class="flex-1 flex items-center justify-center px-3 border-ie border-gray-200 dark:border-white/10 h-full bg-gray-50/10 dark:bg-transparent"
112112
>
113113
<img
114114
v-if="isValid && isInputValid"
@@ -117,14 +117,14 @@ const copyToClipboard = async () => {
117117
alt="Badge Preview"
118118
@error="isValid = false"
119119
/>
120-
<span v-else class="text-[10px] font-bold text-red-500 uppercase tracking-tighter">
120+
<span v-else class="text-3xs font-bold text-red-500 uppercase tracking-tighter">
121121
{{ !isInputValid ? 'Invalid Parameters' : 'Not Found' }}
122122
</span>
123123
</div>
124124
<button
125125
@click="copyToClipboard"
126126
:disabled="!isValid || !isInputValid || !pkg"
127-
class="px-6 h-full text-[11px] font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-24 hover:bg-gray-50 dark:hover:bg-white/5"
127+
class="px-6 h-full text-2xs font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-24 hover:bg-gray-50 dark:hover:bg-white/5"
128128
:class="
129129
copied
130130
? 'text-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/10'
@@ -141,15 +141,15 @@ const copyToClipboard = async () => {
141141

142142
<div class="grid grid-cols-1 sm:grid-cols-4 gap-6">
143143
<div class="flex flex-col gap-1.5">
144-
<label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Text</label>
144+
<label class="text-3xs font-bold uppercase text-gray-400 ms-1">Label Text</label>
145145
<div class="relative group">
146146
<input
147147
v-model="labelText"
148148
:disabled="usePkgName"
149149
type="text"
150150
placeholder="Custom Label"
151151
class="w-full px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 disabled:cursor-not-allowed transition-all"
152-
:class="{ 'opacity-50 grayscale pl-3': usePkgName }"
152+
:class="{ 'opacity-50 grayscale ps-3': usePkgName }"
153153
/>
154154

155155
<transition
@@ -162,10 +162,10 @@ const copyToClipboard = async () => {
162162
>
163163
<div
164164
v-if="usePkgName"
165-
class="absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none"
165+
class="absolute inset-ie-1.5 top-1/2 -translate-y-1/2 pointer-events-none"
166166
>
167167
<span
168-
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-emerald-500/10 dark:bg-emerald-500/20 text-emerald-500 text-[9px] font-bold uppercase tracking-tighter border border-emerald-500/20"
168+
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-emerald-500/10 dark:bg-emerald-500/20 text-emerald-500 text-4xs font-bold uppercase tracking-tighter border border-emerald-500/20"
169169
>
170170
Auto
171171
</span>
@@ -175,7 +175,7 @@ const copyToClipboard = async () => {
175175
</div>
176176

177177
<div class="flex flex-col gap-1.5">
178-
<label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Badge Value</label>
178+
<label class="text-3xs font-bold uppercase text-gray-400 ms-1">Badge Value</label>
179179
<input
180180
v-model="badgeValue"
181181
type="text"
@@ -185,7 +185,7 @@ const copyToClipboard = async () => {
185185
</div>
186186

187187
<div class="flex flex-col gap-1.5">
188-
<label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Color</label>
188+
<label class="text-3xs font-bold uppercase text-gray-400 ms-1">Label Color</label>
189189
<div
190190
class="flex items-center px-3 rounded-lg border bg-white dark:bg-black/20 transition-all"
191191
:class="
@@ -194,7 +194,7 @@ const copyToClipboard = async () => {
194194
: 'border-red-500 ring-1 ring-red-500/20'
195195
"
196196
>
197-
<span class="text-gray-400 text-xs font-mono mr-1">#</span>
197+
<span class="text-gray-400 text-xs font-mono me-1">#</span>
198198
<input
199199
v-model="labelColor"
200200
type="text"
@@ -203,13 +203,13 @@ const copyToClipboard = async () => {
203203
/>
204204
<span
205205
v-if="!isLabelHexValid"
206-
class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ml-1"
206+
class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ms-1"
207207
/>
208208
</div>
209209
</div>
210210

211211
<div class="flex flex-col gap-1.5">
212-
<label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Badge Color</label>
212+
<label class="text-3xs font-bold uppercase text-gray-400 ms-1">Badge Color</label>
213213
<div
214214
class="flex items-center px-3 rounded-lg border bg-white dark:bg-black/20 transition-all"
215215
:class="
@@ -218,7 +218,7 @@ const copyToClipboard = async () => {
218218
: 'border-red-500 ring-1 ring-red-500/20'
219219
"
220220
>
221-
<span class="text-gray-400 text-xs font-mono mr-1">#</span>
221+
<span class="text-gray-400 text-xs font-mono me-1">#</span>
222222
<input
223223
v-model="badgeColor"
224224
type="text"
@@ -227,7 +227,7 @@ const copyToClipboard = async () => {
227227
/>
228228
<span
229229
v-if="!isBadgeHexValid"
230-
class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ml-1"
230+
class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ms-1"
231231
/>
232232
</div>
233233
</div>
@@ -239,16 +239,16 @@ const copyToClipboard = async () => {
239239
<label class="relative inline-flex items-center cursor-pointer group">
240240
<input v-model="usePkgName" type="checkbox" class="sr-only peer" />
241241
<div
242-
class="w-9 h-5 bg-gray-200 peer-focus:outline-none dark:bg-white/10 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500 rounded-full"
242+
class="w-9 h-5 bg-gray-200 peer-focus:outline-none dark:bg-white/10 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:inset-is-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500 rounded-full"
243243
></div>
244244
<span
245-
class="ml-3 text-[10px] font-bold uppercase text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
245+
class="ms-3 text-3xs font-bold uppercase text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
246246
>Use package name as label</span
247247
>
248248
</label>
249249

250250
<div class="flex items-center gap-3">
251-
<label class="text-[10px] font-bold uppercase text-gray-400 whitespace-nowrap"
251+
<label class="text-3xs font-bold uppercase text-gray-400 whitespace-nowrap"
252252
>Badge Style</label
253253
>
254254
<select

0 commit comments

Comments
 (0)