Skip to content

Commit f431b91

Browse files
alexdlnalexdln
authored
feat: add selects to ui library (#1290)
1 parent c139ddb commit f431b91

File tree

13 files changed

+579
-218
lines changed

13 files changed

+579
-218
lines changed

‎app/components/Input/Base.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ defineExpose({
3535
v-bind="props.noCorrect ? noCorrect : undefined"
3636
@focus="emit('focus', $event)"
3737
@blur="emit('blur', $event)"
38-
class="bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
38+
class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
3939
:class="{
4040
'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
4141
'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
42-
'text-base leading-none px-6 py-3.5 h-14 rounded-xl': size === 'large',
42+
'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
4343
}"
4444
:disabled="
4545
/** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */

‎app/components/Org/MembersPanel.vue‎

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const isLoadingTeams = shallowRef(false)
3535
// Search/filter
3636
const searchQuery = shallowRef('')
3737
const filterRole = shallowRef<MemberRoleFilter>('all')
38-
const filterTeam = shallowRef<string | null>(null)
38+
const filterTeam = shallowRef<string>('')
3939
const sortBy = shallowRef<'name' | 'role'>('name')
4040
const sortOrder = shallowRef<'asc' | 'desc'>('asc')
4141
@@ -362,18 +362,19 @@ watch(lastExecutionTime, () => {
362362
</div>
363363
<!-- Team filter -->
364364
<div v-if="teamNames.length > 0">
365-
<label for="team-filter" class="sr-only">{{ $t('org.members.filter_by_team') }}</label>
366-
<select
365+
<SelectField
366+
:label="$t('org.members.filter_by_team')"
367+
hidden-label
367368
id="team-filter"
368369
v-model="filterTeam"
369370
name="team-filter"
370-
class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
371-
>
372-
<option :value="null">{{ $t('org.members.all_teams') }}</option>
373-
<option v-for="team in teamNames" :key="team" :value="team">
374-
{{ team }}
375-
</option>
376-
</select>
371+
block
372+
size="sm"
373+
:items="[
374+
{ label: $t('org.members.all_teams'), value: '' },
375+
...teamNames.map(team => ({ label: team, value: team })),
376+
]"
377+
/>
377378
</div>
378379
<div
379380
class="flex items-center gap-1 text-xs"
@@ -462,22 +463,22 @@ watch(lastExecutionTime, () => {
462463
<label :for="`role-${member.name}`" class="sr-only">{{
463464
$t('org.members.change_role_for', { name: member.name })
464465
}}</label>
465-
<select
466+
<SelectField
467+
:label="$t('org.members.change_role_for', { name: member.name })"
468+
hidden-label
466469
:id="`role-${member.name}`"
467-
:value="member.role"
470+
:model-value="member.role"
468471
:name="`role-${member.name}`"
469-
class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
470-
@change="
471-
handleChangeRole(
472-
member.name,
473-
($event.target as HTMLSelectElement).value as 'developer' | 'admin' | 'owner',
474-
)
475-
"
476-
>
477-
<option value="developer">{{ getRoleLabel('developer') }}</option>
478-
<option value="admin">{{ getRoleLabel('admin') }}</option>
479-
<option value="owner">{{ getRoleLabel('owner') }}</option>
480-
</select>
472+
block
473+
size="sm"
474+
:items="[
475+
{ label: getRoleLabel('developer'), value: 'developer' },
476+
{ label: getRoleLabel('admin'), value: 'admin' },
477+
{ label: getRoleLabel('owner'), value: 'owner' },
478+
]"
479+
:value="member.role"
480+
@update:modelValue="value => handleChangeRole(member.name, value as MemberRole)"
481+
/>
481482
<!-- Remove button -->
482483
<button
483484
type="button"
@@ -528,30 +529,36 @@ watch(lastExecutionTime, () => {
528529
size="small"
529530
/>
530531
<div class="flex items-center gap-2">
531-
<label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
532-
<select
532+
<SelectField
533+
:label="$t('org.members.role_label')"
534+
hidden-label
533535
id="new-member-role"
534536
v-model="newRole"
535537
name="new-member-role"
536-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
537-
>
538-
<option value="developer">{{ $t('org.members.role.developer') }}</option>
539-
<option value="admin">{{ $t('org.members.role.admin') }}</option>
540-
<option value="owner">{{ $t('org.members.role.owner') }}</option>
541-
</select>
538+
block
539+
class="flex-1"
540+
size="sm"
541+
:items="[
542+
{ label: $t('org.members.role.developer'), value: 'developer' },
543+
{ label: $t('org.members.role.admin'), value: 'admin' },
544+
{ label: $t('org.members.role.owner'), value: 'owner' },
545+
]"
546+
/>
542547
<!-- Team selection -->
543-
<label for="new-member-team" class="sr-only">{{ $t('org.members.team_label') }}</label>
544-
<select
548+
<SelectField
549+
:label="$t('org.members.team_label')"
550+
hidden-label
545551
id="new-member-team"
546552
v-model="newTeam"
547553
name="new-member-team"
548-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
549-
>
550-
<option value="">{{ $t('org.members.no_team') }}</option>
551-
<option v-for="team in teamNames" :key="team" :value="team">
552-
{{ team }}
553-
</option>
554-
</select>
554+
block
555+
class="flex-1"
556+
size="sm"
557+
:items="[
558+
{ label: $t('org.members.no_team'), value: '' },
559+
...teamNames.map(team => ({ label: team, value: team })),
560+
]"
561+
/>
555562
<button
556563
type="submit"
557564
:disabled="!newUsername.trim() || isAddingMember"

‎app/components/Package/AccessControls.vue‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -243,41 +243,39 @@ watch(
243243
<div v-if="showGrantAccess">
244244
<form class="space-y-2" @submit.prevent="handleGrantAccess">
245245
<div class="flex items-center gap-2">
246-
<label for="grant-team-select" class="sr-only">{{
247-
$t('package.access.select_team_label')
248-
}}</label>
249-
<select
246+
<SelectField
247+
:label="$t('package.access.select_team_label')"
248+
hidden-label
250249
id="grant-team-select"
251250
v-model="selectedTeam"
252251
name="grant-team"
253-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
252+
block
253+
size="sm"
254254
:disabled="isLoadingTeams"
255-
>
256-
<option value="" disabled>
257-
{{
258-
isLoadingTeams
255+
:items="[
256+
{
257+
label: isLoadingTeams
259258
? $t('package.access.loading_teams')
260-
: $t('package.access.select_team')
261-
}}
262-
</option>
263-
<option v-for="team in teams" :key="team" :value="team">
264-
{{ orgName }}:{{ team }}
265-
</option>
266-
</select>
267-
</div>
268-
<div class="flex items-center gap-2">
269-
<label for="grant-permission-select" class="sr-only">{{
270-
$t('package.access.permission_label')
271-
}}</label>
272-
<select
259+
: $t('package.access.select_team'),
260+
value: '',
261+
disabled: true,
262+
},
263+
...teams.map(team => ({ label: `${orgName}:${team}`, value: team })),
264+
]"
265+
/>
266+
<SelectField
267+
:label="$t('package.access.permission_label')"
268+
hidden-label
273269
id="grant-permission-select"
274270
v-model="permission"
275271
name="grant-permission"
276-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
277-
>
278-
<option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
279-
<option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
280-
</select>
272+
block
273+
size="sm"
274+
:items="[
275+
{ label: $t('package.access.permission.read_only'), value: 'read-only' },
276+
{ label: $t('package.access.permission.read_write'), value: 'read-write' },
277+
]"
278+
/>
281279
<button
282280
type="submit"
283281
:disabled="!selectedTeam || isGranting"

‎app/components/Package/DownloadAnalytics.vue‎

Lines changed: 14 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1580,44 +1580,24 @@ const chartConfig = computed(() => {
15801580
<div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
15811581
<div class="w-full mb-4 flex flex-col gap-3">
15821582
<div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
1583-
<div class="flex flex-col gap-1 sm:shrink-0">
1584-
<label
1585-
for="granularity"
1586-
class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
1587-
>
1588-
{{ $t('package.trends.granularity') }}
1589-
</label>
1590-
1591-
<div
1592-
class="flex items-center bg-bg-subtle border border-border rounded-md overflow-hidden"
1593-
>
1594-
<select
1595-
id="granularity"
1596-
v-model="selectedGranularity"
1597-
:disabled="pending"
1598-
class="w-full px-4 py-3 leading-none bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
1599-
>
1600-
<option value="daily">
1601-
{{ $t('package.trends.granularity_daily') }}
1602-
</option>
1603-
<option value="weekly">
1604-
{{ $t('package.trends.granularity_weekly') }}
1605-
</option>
1606-
<option value="monthly">
1607-
{{ $t('package.trends.granularity_monthly') }}
1608-
</option>
1609-
<option value="yearly">
1610-
{{ $t('package.trends.granularity_yearly') }}
1611-
</option>
1612-
</select>
1613-
</div>
1614-
</div>
1583+
<SelectField
1584+
:label="$t('package.trends.granularity')"
1585+
id="granularity"
1586+
v-model="selectedGranularity"
1587+
:disabled="pending"
1588+
:items="[
1589+
{ label: $t('package.trends.granularity_daily'), value: 'daily' },
1590+
{ label: $t('package.trends.granularity_weekly'), value: 'weekly' },
1591+
{ label: $t('package.trends.granularity_monthly'), value: 'monthly' },
1592+
{ label: $t('package.trends.granularity_yearly'), value: 'yearly' },
1593+
]"
1594+
/>
16151595

16161596
<div class="grid grid-cols-2 gap-2 flex-1">
16171597
<div class="flex flex-col gap-1">
16181598
<label
16191599
for="startDate"
1620-
class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
1600+
class="text-2xs font-mono text-fg-subtle tracking-wide uppercase"
16211601
>
16221602
{{ $t('package.trends.start_date') }}
16231603
</label>
@@ -1638,7 +1618,7 @@ const chartConfig = computed(() => {
16381618
</div>
16391619

16401620
<div class="flex flex-col gap-1">
1641-
<label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
1621+
<label for="endDate" class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
16421622
{{ $t('package.trends.end_date') }}
16431623
</label>
16441624
<div class="relative flex items-center">

‎app/components/Package/ListControls.vue‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -73,26 +73,14 @@ const showFilteredCount = computed(() => {
7373
</div>
7474

7575
<!-- Sort select -->
76-
<div class="relative shrink-0 flex">
77-
<label for="package-sort" class="sr-only">{{ $t('package.list.sort_label') }}</label>
78-
<div class="relative">
79-
<select
80-
id="package-sort"
81-
v-model="sortValue"
82-
class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-3 leading-none font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
83-
>
84-
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
85-
{{ option.label }}
86-
</option>
87-
</select>
88-
<div
89-
class="absolute inset-ie-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
90-
aria-hidden="true"
91-
>
92-
<div class="i-carbon:chevron-down w-4 h-4" />
93-
</div>
94-
</div>
95-
</div>
76+
<SelectField
77+
:label="$t('package.list.sort_label')"
78+
hidden-label
79+
id="package-sort"
80+
class="relative shrink-0"
81+
v-model="sortValue"
82+
:items="sortOptions.map(option => ({ label: option.label, value: option.value }))"
83+
/>
9684
</div>
9785

9886
<!-- Filtered count indicator -->

‎app/components/Package/ListToolbar.vue‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,14 @@ const availableSortKeys = computed(() => {
7777
})
7878
7979
// Handle sort key change from dropdown
80-
function handleSortKeyChange(event: Event) {
81-
const target = event.target as HTMLSelectElement
82-
const newKey = target.value as SortKey
83-
const config = SORT_KEYS.find(k => k.key === newKey)
84-
const direction = config?.defaultDirection ?? 'desc'
85-
sortOption.value = buildSortOption(newKey, direction)
86-
}
80+
const sortKeyModel = computed<SortKey>({
81+
get: () => currentSort.value.key,
82+
set: newKey => {
83+
const config = SORT_KEYS.find(k => k.key === newKey)
84+
const direction = config?.defaultDirection ?? 'desc'
85+
sortOption.value = buildSortOption(newKey, direction)
86+
},
87+
})
8788
8889
// Toggle sort direction
8990
function handleToggleDirection() {
@@ -162,30 +163,19 @@ function getSortKeyLabelKey(key: SortKey): string {
162163
<!-- Sort controls -->
163164
<div class="flex items-center gap-1 shrink-0 order-1 sm:order-1">
164165
<!-- Sort key dropdown -->
165-
<div class="relative">
166-
<label for="sort-select" class="sr-only">{{ $t('filters.sort.label') }}</label>
167-
<select
168-
id="sort-select"
169-
:value="currentSort.key"
170-
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
171-
@change="handleSortKeyChange"
172-
>
173-
<option
174-
v-for="keyConfig in availableSortKeys"
175-
:key="keyConfig.key"
176-
:value="keyConfig.key"
177-
:disabled="keyConfig.disabled"
178-
>
179-
{{ getSortKeyLabelKey(keyConfig.key) }}
180-
</option>
181-
</select>
182-
<div
183-
class="flex items-center absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
184-
aria-hidden="true"
185-
>
186-
<span class="i-carbon-chevron-down w-4 h-4" />
187-
</div>
188-
</div>
166+
<SelectField
167+
:label="$t('filters.sort.label')"
168+
hidden-label
169+
id="sort-select"
170+
v-model="sortKeyModel"
171+
:items="
172+
availableSortKeys.map(keyConfig => ({
173+
label: getSortKeyLabelKey(keyConfig.key),
174+
value: keyConfig.key,
175+
disabled: keyConfig.disabled,
176+
}))
177+
"
178+
/>
189179

190180
<!-- Sort direction toggle -->
191181
<button

0 commit comments

Comments
 (0)