feat: add table selection

Author: MatteoGabriele

app/components/Package/Card.vue

@@ -16,8 +16,9 @@ const props = defineProps<{
   searchQuery?: string
 }>()
 
-const selected = defineModel<boolean>('selected', {
-  default: false,
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result)
 })
 
 const emit = defineEmits<{
@@ -43,7 +44,7 @@ const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
-  <BaseCard :selected :isExactMatch="isExactMatch">
+  <BaseCard :selected="isSelected" :isExactMatch="isExactMatch">
     <header class="mb-4 flex items-baseline justify-between gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -64,16 +65,14 @@ const numberFormatter = useNumberFormatter()
         >
       </component>
 
-      <div class="flex items-center gap-4">
-        <div class="relative z-1">
-          <input
-            data-package-card-checkbox
-            class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
-            type="checkbox"
-            :checked="!!selected"
-            v-model="selected"
-          />
-        </div>
+      <div class="relative z-1">
+        <input
+          data-package-card-checkbox
+          class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
+          type="checkbox"
+          :checked="isSelected"
+          @change="togglePackageSelection(result)"
+        />
       </div>
     </header>
 

app/components/Package/List.vue

@@ -147,8 +147,6 @@ function scrollToIndex(index: number, smooth = true) {
 defineExpose({
   scrollToIndex,
 })
-
-const { isPackageSelected, togglePackageSelection } = usePackageSelection()
 </script>
 
 <template>
@@ -190,8 +188,6 @@ const { isPackageSelected, togglePackageSelection } = usePackageSelection()
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :filters="filters"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                :selected="isPackageSelected(item)"
-                @update:selected="togglePackageSelection(item)"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>

app/components/Package/Table.vue

@@ -102,6 +102,7 @@ const columnLabels = computed(() => ({
   maintenanceScore: t('filters.columns.maintenance_score'),
   combinedScore: t('filters.columns.combined_score'),
   security: t('filters.columns.security'),
+  selection: t('filters.columns.selection'),
 }))
 
 function getColumnLabel(id: ColumnId): string {
@@ -299,6 +300,9 @@ function getColumnLabel(id: ColumnId): string {
           >
             {{ getColumnLabel('security') }}
           </th>
+          <th class="w-8">
+            <span class="sr-only">{{ getColumnLabel('selection') }}</span>
+          </th>
         </tr>
       </thead>
       <tbody>

app/components/Package/TableRow.vue

@@ -17,6 +17,10 @@ const pkg = computed(() => props.result.package)
 const score = computed(() => props.result.score)
 
 const updatedDate = computed(() => props.result.package.date)
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result)
+})
 
 function formatDownloads(count?: number): string {
   if (count === undefined) return '-'
@@ -196,6 +200,18 @@ const allMaintainersText = computed(() => {
       </span>
       <span v-else class="text-fg-subtle"> - </span>
     </td>
+
+    <td class="pe-2 relative z-1">
+      <div class="flex items-center justify-center h-full">
+        <input
+          data-package-card-checkbox
+          class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
+          type="checkbox"
+          :checked="isSelected"
+          @change="togglePackageSelection(result)"
+        />
+      </div>
+    </td>
   </tr>
 </template>
 

i18n/locales/en.json

@@ -807,7 +807,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",

i18n/schema.json

@@ -2427,6 +2427,9 @@
             },
             "security": {
               "type": "string"
+            },
+            "selection": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -806,7 +806,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",

lunaria/files/en-US.json

@@ -806,7 +806,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",

shared/types/preferences.ts

@@ -20,6 +20,7 @@ export type ColumnId =
   | 'maintenanceScore'
   | 'combinedScore'
   | 'security'
+  | 'selection'
 
 export interface ColumnConfig {
   id: ColumnId