feat(VDataTable): port to v3 (#16235)

resolves #13479 Co-authored-by: John Leider <john@vuetifyjs.com> Co-authored-by: Elijah Kotyluk <elijah@elijahkotyluk.com> Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Jan 3, 2023 · 807e729 · 807e729
1 parent 22f591b
commit 807e729
Show file tree

Hide file tree

Showing 123 changed files with 4,399 additions and 3,129 deletions.
diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
@@ -243,6 +243,7 @@ const allowedRefs = [
   'SelectStrategyFn',
   'SubmitEventPromise',
   'ValidationRule',
+  'SortItem',
 ]
 
 function formatDefinition (definition: Definition) {

diff --git a/packages/docs/src/components/app/list/List.vue b/packages/docs/src/components/app/list/List.vue
@@ -55,6 +55,7 @@
     divider?: boolean
     to?: RouteLocationRaw
     href?: string
+    subfolder?: boolean
   }
 
   function generateApiItems (locale: string) {
@@ -88,9 +89,10 @@
         type: 'subheader',
       }
     } else if (item.items) {
+      const p = item.subfolder ? `${item.subfolder}/${item.title}` : path
       return {
         title: t(item.title!),
-        children: item.items.map(item => generateListItem(item, path, locale, t)),
+        children: item.items.map(item => generateListItem(item, p, locale, t)),
       }
     }
 

diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
@@ -77,7 +77,7 @@
           class="pa-4 rounded-b"
           with-background
         >
-          <component :is="ExampleComponent" v-if="isLoaded" />
+          <component :is="ExampleComponent" v-if="isLoaded" :file="file" />
         </v-theme-provider>
       </div>
     </v-sheet>

diff --git a/packages/docs/src/components/examples/ExampleMissing.vue b/packages/docs/src/components/examples/ExampleMissing.vue
@@ -1,12 +1,21 @@
 <template>
-  <app-md
+  <app-markdown
     class="v-example-missing text-center"
-    v-text="parent.$t('missing', data.attrs)"
+    v-text="t('missing', { file })"
   />
 </template>
 
 <script setup>
-  //
+  import { useI18n } from 'vue-i18n'
+
+  defineProps({
+    file: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const { t } = useI18n()
 </script>
 
 <style lang="sass">

diff --git a/packages/docs/src/data/nav-alpha.json b/packages/docs/src/data/nav-alpha.json
@@ -191,7 +191,23 @@
     "inactiveIcon": "mdi-beaker-outline",
     "activeIcon": "mdi-beaker",
     "items": [
-      "introduction"
+      "introduction",
+      {
+        "title": "data-tables",
+        "subfolder": "components",
+        "activeIcon": "",
+        "inactiveIcon": "",
+        "items": [
+          "basics",
+          "headers",
+          "sorting",
+          "pagination",
+          "filtering",
+          "grouping",
+          "virtual-tables",
+          "server-side-tables"
+        ]
+      }
     ]
   },
   {

diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
@@ -62,10 +62,8 @@
   ],
   "components/data-tables": [
     "v-data-table",
-    "v-data-table-header",
-    "v-data-footer",
-    "v-edit-dialog",
-    "v-simple-checkbox"
+    "v-data-table-server",
+    "v-data-table-virtual"
   ],
   "components/date-pickers-month": ["v-date-picker"],
   "components/date-pickers": ["v-date-picker"],

diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -5,8 +5,7 @@
       v-model:page="page"
       :items="items"
       :search="search"
-      :sort-by="sortBy.toLowerCase()"
-      :sort-desc="sortDesc"
+      :sort-by="sortBy"
       hide-default-footer
     >
       <template v-slot:header>
@@ -172,7 +171,7 @@
         sortDesc: false,
         page: 1,
         itemsPerPage: 4,
-        sortBy: 'name',
+        sortBy: [{ key: 'name', order: 'asc' }],
         keys: [
           'Name',
           'Calories',

diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue
@@ -6,8 +6,7 @@
       :items="items"
       :page="page"
       :search="search"
-      :sort-by="sortBy.toLowerCase()"
-      :sort-desc="sortDesc"
+      :sort-by="sortBy"
       v-bind="$attrs"
     >
       <template v-slot:header>
@@ -28,7 +27,7 @@
           <template v-if="$vuetify.breakpoint.mdAndUp">
             <v-spacer></v-spacer>
             <v-select
-              v-model="sortBy"
+              v-model="sortKey"
               class="mx-2"
               flat
               solo-inverted
@@ -164,10 +163,10 @@
     data: () => ({
       itemsPerPageOptions: [4, 8, 12],
       search: '',
+      sortKey: 'name',
       sortDesc: false,
       page: 1,
       itemsPerPage: 4,
-      sortBy: 'name',
       keys: [
         'Name',
         'Calories',
@@ -296,5 +295,11 @@
       },
       tabs: [],
     }),
+
+    computed: {
+      sortBy () {
+        return [{ key: this.sortKey, order: this.sortDesc ? 'desc' : 'asc' }]
+      },
+    },
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/misc-crud.vue b/packages/docs/src/examples/v-data-table/misc-crud.vue
@@ -2,7 +2,7 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
-    sort-by="calories"
+    :sort-by="[{ key: 'calories', order: 'asc' }]"
     class="elevation-1"
   >
     <template v-slot:top>
@@ -20,13 +20,12 @@
           v-model="dialog"
           max-width="500px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-btn
               color="primary"
               dark
               class="mb-2"
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
             >
               New Item
             </v-btn>
@@ -129,13 +128,13 @@
       <v-icon
         size="small"
         class="mr-2"
-        @click="editItem(item)"
+        @click="editItem(item.raw)"
       >
         mdi-pencil
       </v-icon>
       <v-icon
         size="small"
-        @click="deleteItem(item)"
+        @click="deleteItem(item.raw)"
       >
         mdi-delete
       </v-icon>
@@ -158,16 +157,16 @@
       dialogDelete: false,
       headers: [
         {
-          text: 'Dessert (100g serving)',
+          title: 'Dessert (100g serving)',
           align: 'start',
           sortable: false,
-          value: 'name',
+          key: 'name',
         },
-        { text: 'Calories', value: 'calories' },
-        { text: 'Fat (g)', value: 'fat' },
-        { text: 'Carbs (g)', value: 'carbs' },
-        { text: 'Protein (g)', value: 'protein' },
-        { text: 'Actions', value: 'actions', sortable: false },
+        { title: 'Calories', key: 'calories' },
+        { title: 'Fat (g)', key: 'fat' },
+        { title: 'Carbs (g)', key: 'carbs' },
+        { title: 'Protein (g)', key: 'protein' },
+        { title: 'Actions', key: 'actions', sortable: false },
       ],
       desserts: [],
       editedIndex: -1,

diff --git a/packages/docs/src/examples/v-data-table/misc-expand.vue b/packages/docs/src/examples/v-data-table/misc-expand.vue
@@ -1,29 +1,23 @@
-<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <v-data-table
     v-model:expanded="expanded"
     :headers="dessertHeaders"
     :items="desserts"
-    :single-expand="singleExpand"
-    item-key="name"
+    item-value="name"
     show-expand
     class="elevation-1"
   >
     <template v-slot:top>
       <v-toolbar flat>
         <v-toolbar-title>Expandable Table</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-switch
-          v-model="singleExpand"
-          label="Single expand"
-          class="mt-2"
-        ></v-switch>
       </v-toolbar>
     </template>
-    <template v-slot:expanded-item="{ headers, item }">
-      <td :colspan="headers.length">
-        More info about {{ item.name }}
-      </td>
+    <template v-slot:expanded-row="{ columns, item }">
+      <tr>
+        <td :colspan="columns.length">
+          More info about {{ item.raw.name }}
+        </td>
+      </tr>
     </template>
   </v-data-table>
 </template>
@@ -36,17 +30,17 @@
         singleExpand: false,
         dessertHeaders: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
-          { text: '', value: 'data-table-expand' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
+          { title: '', key: 'data-table-expand' },
         ],
         desserts: [
           {

diff --git a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
@@ -1,50 +1,55 @@
 <template>
-  <div>
-    <v-data-table
-      v-model:page="page"
-      :headers="headers"
-      :items="desserts"
-      :items-per-page="itemsPerPage"
-      hide-default-footer
-      class="elevation-1"
-      @page-count="pageCount = $event"
-    ></v-data-table>
-    <div class="text-center pt-2">
-      <v-pagination
-        v-model="page"
-        :length="pageCount"
-      ></v-pagination>
-      <v-text-field
-        :model-value="itemsPerPage"
-        label="Items per page"
-        type="number"
-        min="-1"
-        max="15"
-        @update:model-value="itemsPerPage = parseInt($event, 10)"
-      ></v-text-field>
-    </div>
-  </div>
+  <v-data-table
+    v-model:page="page"
+    :headers="headers"
+    :items="desserts"
+    :items-per-page="itemsPerPage"
+    hide-default-footer
+    class="elevation-1"
+    @update:options="options = $event"
+  >
+    <template v-slot:bottom>
+      <div class="text-center pt-2">
+        <v-pagination
+          v-model="page"
+          :length="options.pageCount"
+        ></v-pagination>
+        <v-text-field
+          :model-value="itemsPerPage"
+          class="pa-2"
+          label="Items per page"
+          type="number"
+          min="-1"
+          max="15"
+          hide-details
+          @update:model-value="itemsPerPage = parseInt($event, 10)"
+        ></v-text-field>
+      </div>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
   export default {
     data () {
       return {
+        options: {
+          pageCount: 1,
+        },
         page: 1,
-        pageCount: 0,
-        itemsPerPage: 10,
+        itemsPerPage: 5,
         headers: [
           {
-            text: 'Dessert (100g serving)',
             align: 'start',
+            key: 'name',
             sortable: false,
-            value: 'name',
+            title: 'Dessert (100g serving)',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {