forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add clear button to search input (#101)
+10
-1
+10
-1
app/pages/search.vue
+10
-1
app/pages/search.vue
···
370
370
autocomplete="off"
371
371
autocorrect="off"
372
372
spellcheck="false"
373
-
class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-4 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:(border-border-hover outline-none) appearance-none"
373
+
class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:(border-border-hover outline-none) appearance-none"
374
374
@focus="isSearchFocused = true"
375
375
@blur="isSearchFocused = false"
376
376
@keydown="handleResultsKeydown"
377
377
/>
378
+
<button
379
+
v-show="inputValue"
380
+
type="button"
381
+
class="absolute right-3 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
382
+
aria-label="Clear search"
383
+
@click="inputValue = ''"
384
+
>
385
+
<span class="i-carbon-close-large block w-3.5 h-3.5" aria-hidden="true" />
386
+
</button>
378
387
<!-- Hidden submit button for accessibility (form must have submit button per WCAG) -->
379
388
<button type="submit" class="sr-only">Search</button>
380
389
</div>