fix: updated eslint config, added vitest

Author: kouts

.eslintignore

@@ -1 +1 @@
-v18
+v20

.eslintrc.js

@@ -1,6 +1,6 @@
-module.exports = {
+export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'body-max-line-length': [1, 'always', 200]
-  }
+    'body-max-line-length': [1, 'always', 200],
+  },
 }

.nvmrc

@@ -1,11 +1,11 @@
+import './styles/styles.scss'
+import { defineClientConfig } from '@vuepress/client'
 import Dataset from '@/Dataset.vue'
 import DatasetInfo from '@/DatasetInfo.vue'
 import DatasetItem from '@/DatasetItem.vue'
 import DatasetPager from '@/DatasetPager.vue'
 import DatasetSearch from '@/DatasetSearch.vue'
 import DatasetShow from '@/DatasetShow.vue'
-import { defineClientConfig } from '@vuepress/client'
-import './styles/styles.scss'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
@@ -19,5 +19,5 @@ export default defineClientConfig({
   setup() {
     // noop
   },
-  rootComponents: []
+  rootComponents: [],
 })

babel.config.js

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <dataset
+    <Dataset
       v-slot="{ ds }"
       :ds-data="users"
       :ds-filter-fields="{}"
@@ -10,15 +10,15 @@
     >
       <div class="row mb-2" :data-page-count="ds.dsPagecount">
         <div class="col-md-6 mb-2 mb-md-0">
-          <dataset-show :ds-show-entries="selected" @changed="selected = $event" />
+          <DatasetShow :ds-show-entries="selected" @changed="selected = $event" />
         </div>
         <div class="col-md-6">
-          <dataset-search ds-search-placeholder="Search..." />
+          <DatasetSearch ds-search-placeholder="Search..." />
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
-          <dataset-item class="form-row mb-3">
+          <DatasetItem class="form-row mb-3">
             <template #default="{ row, rowIndex }">
               <div class="col-md-4">
                 <div class="card mb-2">
@@ -38,14 +38,14 @@
                 <p class="text-center">No results found</p>
               </div>
             </template>
-          </dataset-item>
+          </DatasetItem>
         </div>
       </div>
       <div class="d-flex flex-md-row flex-column justify-content-between align-items-center">
-        <dataset-info class="mb-2 mb-md-0" />
-        <dataset-pager />
+        <DatasetInfo class="mb-2 mb-md-0" />
+        <DatasetPager />
       </div>
-    </dataset>
+    </Dataset>
   </div>
 </template>
 
@@ -61,10 +61,10 @@ export default {
         Active: 'text-success',
         Away: 'text-warning',
         'Do not disturb': 'text-danger',
-        Invisible: 'text-secondary'
+        Invisible: 'text-secondary',
       },
-      selected: 5
+      selected: 5,
     }
-  }
+  },
 }
 </script>

commitlint.config.js

@@ -75,7 +75,7 @@
       </div>
     </div>
     <hr />
-    <dataset
+    <Dataset
       v-slot="{ ds }"
       :ds-data="users"
       :ds-filter-fields="{ onlineStatus: onlineFilter, name: startsWithFilter }"
@@ -86,15 +86,15 @@
     >
       <div class="row mb-2" :data-page-count="ds.dsPagecount">
         <div class="col-md-6 mb-2 mb-md-0">
-          <dataset-show />
+          <DatasetShow />
         </div>
         <div class="col-md-6">
-          <dataset-search ds-search-placeholder="Search..." />
+          <DatasetSearch ds-search-placeholder="Search..." />
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
-          <dataset-item class="form-row mb-3" style="overflow-y: auto; max-height: 400px">
+          <DatasetItem class="form-row mb-3" :style="datasetItemStyle">
             <template #default="{ row, rowIndex }">
               <div class="col-md-4">
                 <div class="card mb-2">
@@ -114,21 +114,21 @@
                 <p class="text-center">No results found</p>
               </div>
             </template>
-          </dataset-item>
+          </DatasetItem>
         </div>
       </div>
       <div class="d-flex flex-md-row flex-column justify-content-between align-items-center">
-        <dataset-info class="mb-2 mb-md-0" />
-        <dataset-pager />
+        <DatasetInfo class="mb-2 mb-md-0" />
+        <DatasetPager />
       </div>
-    </dataset>
+    </Dataset>
   </div>
 </template>
 
 <script>
 import users from '@root/example-data/users.json'
-import { clone, filterList, isoDateToEuroDate, searchAsEuroDate } from '../utilities'
 import { debounce } from '@/helpers'
+import { clone, filterList, isoDateToEuroDate, searchAsEuroDate } from '../utilities'
 
 // const lessUsers = clone(data).slice(0, 2);
 
@@ -143,15 +143,19 @@ export default {
         Active: 'text-success',
         Away: 'text-warning',
         'Do not disturb': 'text-danger',
-        Invisible: 'text-secondary'
+        Invisible: 'text-secondary',
+      },
+      firstNameAsc: true,
+      datasetItemStyle: {
+        overflowY: 'auto',
+        maxHeight: '400px',
       },
-      firstNameAsc: true
     }
   },
   computed: {
     sortFirstName() {
       return this.firstNameAsc ? 'firstName' : '-firstName'
-    }
+    },
   },
   created() {
     this.startWithInput = debounce((e) => {
@@ -172,8 +176,8 @@ export default {
     },
     onUpdate(data) {
       console.log('Filtered data:', data)
-    }
-  }
+    },
+  },
 }
 </script>
 

docs/.vuepress/client.js

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <dataset
+    <Dataset
       v-slot="{ ds }"
       :ds-data="users"
       :ds-sortby="sortBy"
@@ -10,10 +10,10 @@
     >
       <div class="row" :data-page-count="ds.dsPagecount">
         <div class="col-md-6 mb-2 mb-md-0">
-          <dataset-show />
+          <DatasetShow />
         </div>
         <div class="col-md-6">
-          <dataset-search ds-search-placeholder="Search..." />
+          <DatasetSearch ds-search-placeholder="Search..." />
         </div>
       </div>
       <div class="row">
@@ -28,7 +28,7 @@
                   </th>
                 </tr>
               </thead>
-              <dataset-item tag="tbody">
+              <DatasetItem tag="tbody">
                 <template #default="{ row, rowIndex }">
                   <tr>
                     <th scope="row">{{ rowIndex + 1 }}</th>
@@ -37,16 +37,16 @@
                     <td>{{ isoDateToEuroDate(row.birthdate) }}</td>
                   </tr>
                 </template>
-              </dataset-item>
+              </DatasetItem>
             </table>
           </div>
         </div>
       </div>
       <div class="d-flex flex-md-row flex-column justify-content-between align-items-center">
-        <dataset-info class="mb-2 mb-md-0" />
-        <dataset-pager />
+        <DatasetInfo class="mb-2 mb-md-0" />
+        <DatasetPager />
       </div>
-    </dataset>
+    </Dataset>
   </div>
 </template>
 
@@ -63,19 +63,19 @@ export default {
         {
           name: 'Name',
           field: 'name',
-          sort: ''
+          sort: '',
         },
         {
           name: 'Email',
           field: 'email',
-          sort: ''
+          sort: '',
         },
         {
           name: 'Birthdate',
           field: 'birthdate',
-          sort: ''
-        }
-      ]
+          sort: '',
+        },
+      ],
     }
   },
   computed: {
@@ -87,7 +87,7 @@ export default {
 
         return acc
       }, [])
-    }
+    },
   },
   methods: {
     click(event, i) {
@@ -114,8 +114,8 @@ export default {
     },
     isoDateToEuroDate,
     isoDateToDate,
-    searchAsEuroDate
-  }
+    searchAsEuroDate,
+  },
 }
 </script>
 

docs/.vuepress/components/Example1.vue

@@ -1,30 +1,30 @@
+import { webpackBundler } from '@vuepress/bundler-webpack'
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import { defaultTheme } from '@vuepress/theme-default'
 import * as path from 'path'
 import * as url from 'url'
-import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress'
-import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { vueExamplePlugin } from 'vuepress-plugin-vue-example'
-import { webpackBundler } from '@vuepress/bundler-webpack'
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
 export default defineUserConfig({
   plugins: [
     vueExamplePlugin({
-      componentsPath: '/docs/.vuepress/components/'
+      componentsPath: '/docs/.vuepress/components/',
     }),
     docsearchPlugin({
       apiKey: 'a05c686d69be9a09e66f93b07bc7f855',
       indexName: 'next-vue-dataset',
-      appId: 'BAXEDGK9R9'
-    })
+      appId: 'BAXEDGK9R9',
+    }),
   ],
   dest: 'public',
   title: 'vue-dataset',
   description: 'A vue component to display datasets with filtering, paging and sorting capabilities!',
   bundler: webpackBundler({
     postcss: {},
-    vue: {}
+    vue: {},
   }),
   theme: defaultTheme({
     contributors: false,
@@ -34,35 +34,35 @@ export default defineUserConfig({
     sidebar: [
       {
         link: '/',
-        text: 'Introduction'
+        text: 'Introduction',
       },
       {
         link: '/installation/',
-        text: 'Installation'
+        text: 'Installation',
       },
       {
         link: '/components/',
-        text: 'Components'
+        text: 'Components',
       },
       {
         text: 'Examples',
         collapsable: true,
         children: [
           {
             link: '/examples/cards/',
-            text: 'Cards'
+            text: 'Cards',
           },
           {
             link: '/examples/datatable/',
-            text: 'Datatable'
-          }
-        ]
-      }
-    ]
+            text: 'Datatable',
+          },
+        ],
+      },
+    ],
   }),
   alias: {
     '@': path.resolve(__dirname, '../../src'),
     '@playground': path.resolve(__dirname, '../../playground'),
-    '@root': path.resolve(__dirname, '../../')
-  }
+    '@root': path.resolve(__dirname, '../../'),
+  },
 })