fix(Datatable): handle selection using correct event

rotki · Oct 11, 2023 · 8141fbf · 8141fbf
1 parent bc61b90
commit 8141fbf
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
@@ -706,7 +706,7 @@ onBeforeMount(() => {
               variant="outlined"
               color="primary"
               hide-details
-              @update:model-value="onSearch($event, i)"
+              @input="onSearch($event, i)"
             />
             <span v-if="table.value"> selected: {{ table.value.length }} </span>
           </div>
@@ -715,6 +715,7 @@ onBeforeMount(() => {
               objectOmit(table, ['value', 'pagination', 'sort', 'search'])
             "
             v-model="table.value"
+            :loading="table.loading"
             :pagination-modifiers="{ external: true }"
             :sort-modifiers="{ external: true }"
             :pagination="table.pagination"

diff --git a/src/components/overlays/Teleport.vue b/src/components/overlays/Teleport.vue
@@ -108,4 +108,3 @@ onBeforeUnmount(() => {
 <template>
   <div data-rui-teleport class="hidden" />
 </template>
-./teleport-container
diff --git a/src/components/tables/DataTable.vue b/src/components/tables/DataTable.vue
@@ -42,7 +42,7 @@ export interface Props {
    */
   value?: string[];
   /**
-   * model for insternal searching
+   * model for internal searching
    */
   search?: string;
   /**
@@ -87,7 +87,7 @@ export interface Props {
    */
   columnAttr?: string;
   /**
-   * flag to show a more or less spaceous table
+   * flag to show a more or less spacious table
    */
   dense?: boolean;
   /**
@@ -96,7 +96,7 @@ export interface Props {
   outlined?: boolean;
   /**
    * flag to show loading state of the table
-   * triggers an indefinite progress at the bottom of the table header
+   * triggers indefinite progress at the bottom of the table header
    */
   loading?: boolean;
   /**
@@ -518,18 +518,18 @@ const slots = useSlots();
     ]"
   >
     <div :class="css.scroller">
-      <table :class="[css.table, { [css.dense]: dense }]">
+      <table :class="[css.table, { [css.dense]: dense }]" aria-label="">
         <thead :class="css.thead">
           <tr :class="css.tr">
             <th v-if="selectedData" scope="col" :class="css.checkbox">
               <Checkbox
-                :model-value="isAllSelected"
+                :value="isAllSelected"
                 :indeterminate="indeterminate"
                 :disabled="!filtered?.length"
                 hide-details
                 color="primary"
                 data-cy="table-toggle-check-all"
-                @update:model-value="onToggleAll($event)"
+                @input="onToggleAll($event)"
               />
             </th>
 
@@ -625,11 +625,11 @@ const slots = useSlots();
           >
             <td v-if="selectedData" :class="css.checkbox">
               <Checkbox
-                :model-value="isSelected(row[rowAttr])"
+                :value="isSelected(row[rowAttr])"
                 hide-details
                 color="primary"
                 :data-cy="`table-toggle-check-${index}`"
-                @update:model-value="onSelect($event, row[rowAttr])"
+                @input="onSelect($event, row[rowAttr])"
               />
             </td>