@@ -8,8 +8,8 @@ import type {
88} from ' #shared/types/preferences'
99import {
1010 DOWNLOAD_RANGES ,
11- SEARCH_SCOPE_OPTIONS ,
12- SECURITY_FILTER_OPTIONS ,
11+ SEARCH_SCOPE_VALUES ,
12+ SECURITY_FILTER_VALUES ,
1313 UPDATED_WITHIN_OPTIONS ,
1414} from ' #shared/types/preferences'
1515
@@ -205,20 +205,20 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
205205 :aria-label =" $t('filters.search_scope')"
206206 >
207207 <button
208- v-for =" option in SEARCH_SCOPE_OPTIONS "
209- :key =" option.value "
208+ v-for =" scope in SEARCH_SCOPE_VALUES "
209+ :key =" scope "
210210 type =" button"
211211 class =" px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
212212 :class ="
213- filters.searchScope === option.value
213+ filters.searchScope === scope
214214 ? 'bg-bg-muted text-fg'
215215 : 'text-fg-muted hover:text-fg'
216216 "
217- :aria-pressed =" filters.searchScope === option.value "
218- :title =" $t(getScopeDescriptionKey(option.value ))"
219- @click =" emit('update:searchScope', option.value )"
217+ :aria-pressed =" filters.searchScope === scope "
218+ :title =" $t(getScopeDescriptionKey(scope ))"
219+ @click =" emit('update:searchScope', scope )"
220220 >
221- {{ $t(getScopeLabelKey(option.value )) }}
221+ {{ $t(getScopeLabelKey(scope )) }}
222222 </button >
223223 </div >
224224 </div >
@@ -243,22 +243,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
243243 role =" radiogroup"
244244 :aria-label =" $t('filters.weekly_downloads')"
245245 >
246- <button
246+ <TagClickable
247247 v-for =" range in DOWNLOAD_RANGES"
248248 :key =" range.value"
249249 type =" button"
250250 role =" radio"
251251 :aria-checked =" filters.downloadRange === range.value"
252- class =" tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
253- :class ="
254- filters.downloadRange === range.value
255- ? 'bg-fg text-bg border-fg hover:text-bg/50'
256- : ''
257- "
252+ :status =" filters.downloadRange === range.value ? 'active' : 'default'"
258253 @click =" emit('update:downloadRange', range.value)"
259254 >
260255 {{ $t(getDownloadRangeLabelKey(range.value)) }}
261- </button >
256+ </TagClickable >
262257 </div >
263258 </fieldset >
264259
@@ -272,22 +267,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
272267 role =" radiogroup"
273268 :aria-label =" $t('filters.updated_within')"
274269 >
275- <button
270+ <TagClickable
276271 v-for =" option in UPDATED_WITHIN_OPTIONS"
277272 :key =" option.value"
278273 type =" button"
279274 role =" radio"
280275 :aria-checked =" filters.updatedWithin === option.value"
281- class =" tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
282- :class ="
283- filters.updatedWithin === option.value
284- ? 'bg-fg text-bg border-fg hover:text-bg/70'
285- : ''
286- "
276+ :status =" filters.updatedWithin === option.value ? 'active' : 'default'"
287277 @click =" emit('update:updatedWithin', option.value)"
288278 >
289279 {{ $t(getUpdatedWithinLabelKey(option.value)) }}
290- </button >
280+ </TagClickable >
291281 </div >
292282 </fieldset >
293283
@@ -300,20 +290,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
300290 </span >
301291 </legend >
302292 <div class =" flex flex-wrap gap-2" role =" radiogroup" :aria-label =" $t('filters.security')"
303- <button
304- v-for =" option in SECURITY_FILTER_OPTIONS "
305- :key =" option.value "
293+ <TagClickable
294+ v-for =" security in SECURITY_FILTER_VALUES "
295+ :key =" security "
306296 type =" button"
307297 role =" radio"
308298 disabled
309- :aria-checked =" filters.security === option.value"
310- class =" tag transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
311- :class ="
312- filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
313- "
299+ :aria-checked =" filters.security === security"
300+ :status =" filters.security === security ? 'active' : 'default'"
314301 >
315- {{ $t(getSecurityLabelKey(option.value )) }}
316- </button >
302+ {{ $t(getSecurityLabelKey(security )) }}
303+ </TagClickable >
317304 </div >
318305 </fieldset >
319306
@@ -323,19 +310,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
323310 {{ $t('filters.keywords') }}
324311 </legend >
325312 <div class =" flex flex-wrap gap-1.5" role =" group" :aria-label =" $t('filters.keywords')"
326- <button
313+ <TagClickable
327314 v-for =" keyword in displayedKeywords"
328315 :key =" keyword"
329316 type =" button"
330317 :aria-pressed =" filters.keywords.includes(keyword)"
331- class =" tag text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
332- :class ="
333- filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
334- "
318+ :status =" filters.keywords.includes(keyword) ? 'active' : 'default'"
335319 @click =" emit('toggleKeyword', keyword)"
336320 >
337321 {{ keyword }}
338- </button >
322+ </TagClickable >
339323 <button
340324 v-if =" hasMoreKeywords"
341325 type =" button"
0 commit comments