refactor: use defineModel

Author: danielroe

app/components/PackageList.vue

@@ -37,8 +37,6 @@ const props = defineProps<{
   viewMode?: ViewMode
   /** Column configuration for table view */
   columns?: ColumnConfig[]
-  /** Sort option for table header sorting */
-  sortOption?: SortOption
   /** Pagination mode: infinite or paginated */
   paginationMode?: PaginationMode
   /** Current page (1-indexed) for paginated mode */
@@ -61,6 +59,9 @@ const emit = defineEmits<{
 // Reference to WindowVirtualizer for infinite scroll detection
 const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 
+/** Sort option for table header sorting */
+const sortOption = defineModel<SortOption>('sortOption')
+
 // View mode and columns
 const viewMode = computed(() => props.viewMode ?? 'cards')
 const columns = computed(() => props.columns ?? DEFAULT_COLUMNS)
@@ -151,10 +152,9 @@ defineExpose({
       <PackageTable
         :results="displayedResults"
         :columns="columns"
-        :sort-option="sortOption"
+        v-model:sort-option="sortOption"
         :selected-index="selectedIndex"
         :is-loading="isLoading"
-        @update:sort-option="emit('update:sortOption', $event)"
         @select="emit('select', $event)"
         @click-keyword="emit('clickKeyword', $event)"
       />

app/components/PackageListToolbar.vue

@@ -23,11 +23,7 @@ import {
 
 const props = defineProps<{
   filters: StructuredFilters
-  sortOption: SortOption
-  viewMode: ViewMode
   columns: ColumnConfig[]
-  paginationMode: PaginationMode
-  pageSize: PageSize
   totalCount: number
   filteredCount: number
   availableKeywords?: string[]
@@ -36,12 +32,12 @@ const props = defineProps<{
   searchContext?: boolean
 }>()
 
+const sortOption = defineModel<SortOption>('sortOption', { required: true })
+const viewMode = defineModel<ViewMode>('viewMode', { required: true })
+const paginationMode = defineModel<PaginationMode>('paginationMode', { required: true })
+const pageSize = defineModel<PageSize>('pageSize', { required: true })
+
 const emit = defineEmits<{
-  'update:filters': [filters: StructuredFilters]
-  'update:sortOption': [option: SortOption]
-  'update:viewMode': [mode: ViewMode]
-  'update:paginationMode': [mode: PaginationMode]
-  'update:pageSize': [size: PageSize]
   'toggleColumn': [columnId: ColumnId]
   'resetColumns': []
   'clearFilter': [chip: FilterChip]
@@ -54,15 +50,10 @@ const emit = defineEmits<{
   'toggleKeyword': [keyword: string]
 }>()
 
-const viewMode = computed({
-  get: () => props.viewMode,
-  set: (value: ViewMode) => emit('update:viewMode', value),
-})
-
 const showingFiltered = computed(() => props.filteredCount !== props.totalCount)
 
 // Parse current sort option into key and direction
-const currentSort = computed(() => parseSortOption(props.sortOption))
+const currentSort = computed(() => parseSortOption(sortOption.value))
 
 // Get available sort keys based on context
 const availableSortKeys = computed(() => {
@@ -85,13 +76,13 @@ function handleSortKeyChange(event: Event) {
   const newKey = target.value as SortKey
   const config = SORT_KEYS.find(k => k.key === newKey)
   const direction = config?.defaultDirection ?? 'desc'
-  emit('update:sortOption', buildSortOption(newKey, direction))
+  sortOption.value = buildSortOption(newKey, direction)
 }
 
 // Toggle sort direction
 function handleToggleDirection() {
   const { key, direction } = currentSort.value
-  emit('update:sortOption', buildSortOption(key, toggleDirection(direction)))
+  sortOption.value = buildSortOption(key, toggleDirection(direction))
 }
 
 // Map sort key to i18n key

app/components/PackageTable.vue

@@ -6,15 +6,15 @@ import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
-  sortOption?: SortOption
   selectedIndex?: number
   isLoading?: boolean
 }>()
 
+const sortOption = defineModel<SortOption>('sortOption')
+
 const emit = defineEmits<{
-  'update:sortOption': [option: SortOption]
-  'select': [index: number]
-  'clickKeyword': [keyword: string]
+  select: [index: number]
+  clickKeyword: [keyword: string]
 }>()
 
 function isColumnVisible(id: string): boolean {
@@ -48,14 +48,14 @@ const columnDefaultDirection: Record<string, 'asc' | 'desc'> = {
 }
 
 function isColumnSorted(id: string): boolean {
-  const option = props.sortOption
+  const option = sortOption.value
   if (!option) return false
   const { key } = parseSortOption(option)
   return key === columnToSortKey[id]
 }
 
 function getSortDirection(id: string): 'asc' | 'desc' | null {
-  const option = props.sortOption
+  const option = sortOption.value
   if (!option) return null
   if (!isColumnSorted(id)) return null
   const { direction } = parseSortOption(option)
@@ -73,11 +73,11 @@ function toggleSort(id: string) {
   if (!isSorted) {
     // First click - use default direction
     const defaultDir = columnDefaultDirection[id] ?? 'desc'
-    emit('update:sortOption', buildSortOption(sortKey, defaultDir))
+    sortOption.value = buildSortOption(sortKey, defaultDir)
   } else {
     // Toggle direction
     const currentDir = getSortDirection(id) ?? 'desc'
-    emit('update:sortOption', buildSortOption(sortKey, toggleDirection(currentDir)))
+    sortOption.value = buildSortOption(sortKey, toggleDirection(currentDir))
   }
 }
 

app/components/PaginationControls.vue

@@ -3,33 +3,28 @@ import type { PageSize, PaginationMode, ViewMode } from '#shared/types/preferenc
 import { PAGE_SIZE_OPTIONS } from '#shared/types/preferences'
 
 const props = defineProps<{
-  mode: PaginationMode
-  pageSize: PageSize
-  currentPage: number
   totalItems: number
   /** When in table view, force pagination mode (no infinite scroll for tables) */
   viewMode?: ViewMode
 }>()
 
+const mode = defineModel<PaginationMode>('mode', { required: true })
+const pageSize = defineModel<PageSize>('pageSize', { required: true })
+const currentPage = defineModel<number>('currentPage', { required: true })
+
 // Whether we should show pagination controls (table view always uses pagination)
-const shouldShowControls = computed(() => props.viewMode === 'table' || props.mode === 'paginated')
+const shouldShowControls = computed(() => props.viewMode === 'table' || mode.value === 'paginated')
 
 // Table view forces pagination mode, otherwise use the provided mode
 const effectiveMode = computed<PaginationMode>(() =>
   shouldShowControls.value ? 'paginated' : 'infinite',
 )
 
-const emit = defineEmits<{
-  'update:mode': [mode: PaginationMode]
-  'update:pageSize': [size: PageSize]
-  'update:currentPage': [page: number]
-}>()
-
 // When 'all' is selected, there's only 1 page with everything
-const isShowingAll = computed(() => props.pageSize === 'all')
-const effectivePageSize = computed(() => (isShowingAll.value ? props.totalItems : props.pageSize))
+const isShowingAll = computed(() => pageSize.value === 'all')
+const effectivePageSize = computed(() => (isShowingAll.value ? props.totalItems : pageSize.value))
 const totalPages = computed(() =>
-  isShowingAll.value ? 1 : Math.ceil(props.totalItems / (props.pageSize as number)),
+  isShowingAll.value ? 1 : Math.ceil(props.totalItems / (pageSize.value as number)),
 )
 
 // Whether to show the mode toggle (hidden in table view since table always uses pagination)
@@ -38,39 +33,39 @@ const showModeToggle = computed(() => props.viewMode !== 'table')
 const startItem = computed(() => {
   if (props.totalItems === 0) return 0
   if (isShowingAll.value) return 1
-  return (props.currentPage - 1) * (props.pageSize as number) + 1
+  return (currentPage.value - 1) * (pageSize.value as number) + 1
 })
 
 const endItem = computed(() => {
   if (isShowingAll.value) return props.totalItems
-  return Math.min(props.currentPage * (props.pageSize as number), props.totalItems)
+  return Math.min(currentPage.value * (pageSize.value as number), props.totalItems)
 })
 
-const canGoPrev = computed(() => props.currentPage > 1)
-const canGoNext = computed(() => props.currentPage < totalPages.value)
+const canGoPrev = computed(() => currentPage.value > 1)
+const canGoNext = computed(() => currentPage.value < totalPages.value)
 
 function goToPage(page: number) {
   if (page >= 1 && page <= totalPages.value) {
-    emit('update:currentPage', page)
+    currentPage.value = page
   }
 }
 
 function goPrev() {
   if (canGoPrev.value) {
-    emit('update:currentPage', props.currentPage - 1)
+    currentPage.value = currentPage.value - 1
   }
 }
 
 function goNext() {
   if (canGoNext.value) {
-    emit('update:currentPage', props.currentPage + 1)
+    currentPage.value = currentPage.value + 1
   }
 }
 
 // Generate visible page numbers with ellipsis
 const visiblePages = computed(() => {
   const total = totalPages.value
-  const current = props.currentPage
+  const current = currentPage.value
   const pages: (number | 'ellipsis')[] = []
 
   if (total <= 7) {
@@ -112,9 +107,9 @@ function handlePageSizeChange(event: Event) {
   const value = target.value
   // Handle 'all' as a special string value, otherwise parse as number
   const newSize = (value === 'all' ? 'all' : Number(value)) as PageSize
-  emit('update:pageSize', newSize)
+  pageSize.value = newSize
   // Reset to page 1 when changing page size
-  emit('update:currentPage', 1)
+  currentPage.value = 1
 }
 </script>
 
@@ -138,7 +133,7 @@ function handlePageSizeChange(event: Event) {
           class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :class="mode === 'infinite' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="mode === 'infinite'"
-          @click="emit('update:mode', 'infinite')"
+          @click="mode = 'infinite'"
         >
           {{ $t('filters.pagination.infinite') }}
         </button>
@@ -147,7 +142,7 @@ function handlePageSizeChange(event: Event) {
           class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :class="mode === 'paginated' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="mode === 'paginated'"
-          @click="emit('update:mode', 'paginated')"
+          @click="mode = 'paginated'"
         >
           {{ $t('filters.pagination.paginated') }}
         </button>

app/pages/@[org].vue

@@ -223,17 +223,15 @@ defineOgImageComponent('Default', {
       <!-- Enhanced toolbar with filters -->
       <PackageListToolbar
         :filters="filters"
-        :sort-option="sortOption"
-        :view-mode="viewMode"
+        v-model:sort-option="sortOption"
+        v-model:view-mode="viewMode"
         :columns="columns"
-        :pagination-mode="paginationMode"
-        :page-size="pageSize"
+        v-model:pagination-mode="paginationMode"
+        v-model:page-size="pageSize"
         :total-count="packageCount"
         :filtered-count="filteredCount"
         :available-keywords="availableKeywords"
         :active-filters="activeFilters"
-        @update:view-mode="viewMode = $event"
-        @update:sort-option="setSort"
         @toggle-column="toggleColumn"
         @reset-columns="resetColumns"
         @clear-filter="handleClearFilter"
@@ -257,24 +255,20 @@ defineOgImageComponent('Default', {
           :results="sortedPackages"
           :view-mode="viewMode"
           :columns="columns"
-          :sort-option="sortOption"
+          v-model:sort-option="sortOption"
           :pagination-mode="paginationMode"
           :page-size="pageSize"
           :current-page="currentPage"
-          @update:sort-option="handleSortChange"
           @click-keyword="toggleKeyword"
         />
 
         <!-- Pagination controls -->
         <PaginationControls
-          :mode="paginationMode"
-          :page-size="pageSize"
-          :current-page="currentPage"
+          v-model:mode="paginationMode"
+          v-model:page-size="pageSize"
+          v-model:current-page="currentPage"
           :total-items="sortedPackages.length"
           :view-mode="viewMode"
-          @update:mode="paginationMode = $event"
-          @update:page-size="pageSize = $event"
-          @update:current-page="currentPage = $event"
         />
       </template>
     </section>

app/pages/search.vue

@@ -874,18 +874,16 @@ defineOgImageComponent('Default', {
           <div v-if="visibleResults.total > 0" class="mb-6">
             <PackageListToolbar
               :filters="filters"
-              :sort-option="sortOption"
-              :view-mode="viewMode"
+              v-model:sort-option="sortOption"
+              v-model:view-mode="viewMode"
               :columns="columns"
-              :pagination-mode="paginationMode"
-              :page-size="preferredPageSize"
+              v-model:pagination-mode="paginationMode"
+              v-model:page-size="preferredPageSize"
               :total-count="visibleResults.total"
               :filtered-count="displayResults.length"
               :available-keywords="availableKeywords"
               :active-filters="activeFilters"
               search-context
-              @update:view-mode="viewMode = $event"
-              @update:sort-option="setSort"
               @toggle-column="toggleColumn"
               @reset-columns="resetColumns"
               @clear-filter="handleClearFilter"
@@ -971,31 +969,26 @@ defineOgImageComponent('Default', {
             show-publisher
             :has-more="hasMore"
             :is-loading="isLoadingMore || (status === 'pending' && loadedPages > 1)"
-            :page-size="pageSize"
+            :page-size="preferredPageSize"
             :initial-page="initialPage"
             :view-mode="viewMode"
             :columns="columns"
-            :sort-option="sortOption"
+            v-model:sort-option="sortOption"
             :pagination-mode="paginationMode"
             :current-page="currentPage"
             @load-more="loadMore"
             @page-change="handlePageChange"
             @select="handlePackageSelect"
-            @update:sort-option="handleSortChange"
             @click-keyword="toggleKeyword"
           />
 
           <!-- Pagination controls -->
           <PaginationControls
             v-if="displayResults.length > 0"
-            :mode="paginationMode"
-            :page-size="preferredPageSize"
-            :current-page="currentPage"
-            :total-items="displayResults.length"
+            v-model:mode="paginationMode"
+            v-model:page-size="preferredPageSize"
+            v-model:current-page="currentPage"
             :view-mode="viewMode"
-            @update:mode="paginationMode = $event"
-            @update:page-size="preferredPageSize = $event"
-            @update:current-page="currentPage = $event"
           />
         </div>
       </section>