feat: apply suggestions to selects

Author: alexdln

app/components/Org/MembersPanel.vue

@@ -467,7 +467,7 @@ watch(lastExecutionTime, () => {
               :label="$t('org.members.change_role_for', { name: member.name })"
               hidden-label
               :id="`role-${member.name}`"
-              v-model="member.role"
+              :model-value="member.role"
               :name="`role-${member.name}`"
               block
               size="sm"
@@ -477,12 +477,7 @@ watch(lastExecutionTime, () => {
                 { label: getRoleLabel('owner'), value: 'owner' },
               ]"
               :value="member.role"
-              @change="
-                handleChangeRole(
-                  member.name,
-                  ($event.target as HTMLSelectElement).value as 'developer' | 'admin' | 'owner',
-                )
-              "
+              @update:modelValue="value => handleChangeRole(member.name, value as MemberRole)"
             />
             <!-- Remove button -->
             <button

app/components/Package/ListToolbar.vue

@@ -77,13 +77,14 @@ const availableSortKeys = computed(() => {
 })
 
 // Handle sort key change from dropdown
-function handleSortKeyChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const newKey = target.value as SortKey
-  const config = SORT_KEYS.find(k => k.key === newKey)
-  const direction = config?.defaultDirection ?? 'desc'
-  sortOption.value = buildSortOption(newKey, direction)
-}
+const sortKeyModel = computed<SortKey>({
+  get: () => currentSort.value.key,
+  set: newKey => {
+    const config = SORT_KEYS.find(k => k.key === newKey)
+    const direction = config?.defaultDirection ?? 'desc'
+    sortOption.value = buildSortOption(newKey, direction)
+  },
+})
 
 // Toggle sort direction
 function handleToggleDirection() {
@@ -166,8 +167,7 @@ function getSortKeyLabelKey(key: SortKey): string {
             :label="$t('filters.sort.label')"
             hidden-label
             id="sort-select"
-            v-model="currentSort.key"
-            @change="handleSortKeyChange"
+            v-model="sortKeyModel"
             :items="
               availableSortKeys.map(keyConfig => ({
                 label: getSortKeyLabelKey(keyConfig.key),

app/pages/settings.vue

@@ -78,7 +78,6 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 {{ $t('settings.theme') }}
               </label>
               <SelectField
-                :value="colorMode.preference"
                 id="theme-select"
                 v-model="colorMode.preference"
                 block
@@ -222,7 +221,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                   id="language-select"
                   :items="locales.map(loc => ({ label: loc.name ?? '', value: loc.code }))"
                   v-model="locale"
-                  @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
+                  @update:modelValue="setLocale($event as typeof locale)"
                   block
                   size="sm"
                   class="max-w-48"