feat: vue 3 support

Author: kouts

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['eslint-config-kouts/vue2']
+  extends: ['eslint-config-kouts/vue3']
 }

CHANGELOG.md

@@ -1,14 +1,14 @@
-# vue-dataset <a href="https://npm.im/vue-dataset"><img src="https://badgen.net/npm/v/vue-dataset"></a> ![](https://img.badgesize.io/kouts/vue-dataset/master/dist/umd/VueDataset.min.js.svg) ![](https://img.badgesize.io/kouts/vue-dataset/master/dist/umd/VueDataset.min.js.svg?compression=gzip)
+# vue-dataset <a href="https://npm.im/vue-dataset"><img src="https://badgen.net/npm/v/vue-dataset/next"></a> ![](https://img.badgesize.io/kouts/vue-dataset/next/dist/vue-dataset.umd.js) ![](https://img.badgesize.io/kouts/vue-dataset/next/dist/vue-dataset.umd.js.svg?compression=gzip)
 
 
 ---
 
-:fire: **HEADS UP!** You're currently looking at vue-dataset branch for **Vue.js 2**.  
-If you're looking for a Vue.js 3 compatible version of vue-dataset, [please check out the `next` branch](https://github.com/kouts/vue-dataset/tree/next).
+:fire: **HEADS UP!** You're currently looking at vue-dataset `next` branch for **Vue.js 3**.  
+If you're looking for a Vue.js 2 compatible version of vue-dataset, [please check out the `master` branch](https://github.com/kouts/vue-dataset/tree/master).
 
 ---
 
-A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!  
+A set of Vue.js 3 components to display datasets (lists) with filtering, paging, and sorting capabilities!  
 Created with reusability in mind, so that one doesn't have to recreate the same functionality for lists over and over again.
 
 > vue-dataset does not impose any structure or layout limitations on your HTML, you can use divs, tables or anything you like to present your data.
@@ -27,12 +27,12 @@ Created with reusability in mind, so that one doesn't have to recreate the same
 
 ## Browsers support
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
 | --------- | --------- | --------- | --------- | --------- |
-| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 Documentation and examples
-https://vue-dataset-demo.netlify.app/
+https://vue-dataset-demo-next.netlify.app/
 
 # Development
 

README.md

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

commitlint.config.js

@@ -0,0 +1,18 @@
+import Dataset from '@/Dataset.vue'
+import DatasetSearch from '@/DatasetSearch.vue'
+import DatasetShow from '@/DatasetShow.vue'
+import DatasetPager from '@/DatasetPager.vue'
+import DatasetItem from '@/DatasetItem.vue'
+import DatasetInfo from '@/DatasetInfo.vue'
+import './styles/styles.scss'
+
+import { defineClientAppEnhance } from '@vuepress/client'
+
+export default defineClientAppEnhance(({ app, router, siteData }) => {
+  app.component('Dataset', Dataset)
+  app.component('DatasetShow', DatasetShow)
+  app.component('DatasetSearch', DatasetSearch)
+  app.component('DatasetPager', DatasetPager)
+  app.component('DatasetItem', DatasetItem)
+  app.component('DatasetInfo', DatasetInfo)
+})

docs/.vuepress/clientAppEnhance.js

@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import users from '../../../example-data/users.json'
+import users from '@root/example-data/users.json'
 
 export default {
   name: 'Example1',

docs/.vuepress/components/Example1.vue

@@ -125,9 +125,9 @@
 </template>
 
 <script>
-import users from '../../../example-data/users.json'
+import users from '@root/example-data/users.json'
 import { filterList, clone, isoDateToEuroDate, searchAsEuroDate } from '../utilities'
-import { debounce } from '../../../src/helpers'
+import { debounce } from '@/helpers'
 
 // const lessUsers = clone(data).slice(0, 2);
 

docs/.vuepress/components/Example2.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import users from '../../../example-data/users.json'
+import users from '@root/example-data/users.json'
 import { isoDateToEuroDate, isoDateToDate, searchAsEuroDate } from '../utilities'
 
 export default {

docs/.vuepress/components/Example3.vue

@@ -1,4 +1,5 @@
-const VueExamplePlugin = require('vuepress-plugin-vue-example')
+const path = require('path')
+const VueExamplePlugin = require('../../vuepress-plugin-vue-example/index.js')
 
 module.exports = {
   plugins: [
@@ -10,26 +11,40 @@ module.exports = {
   title: 'vue-dataset',
   description: 'A vue component to display datasets with filtering, paging and sorting capabilities!',
   themeConfig: {
-    nav: [{ text: 'Github', link: 'https://github.com/kouts/vue-dataset' }],
+    repo: 'https://github.com/kouts/vue-dataset',
+    darkMode: false,
     sidebar: [
-      ['/', 'Introduction'],
-      ['/installation/', 'Installation'],
-      ['/components/', 'Components'],
       {
-        title: 'Examples',
+        link: '/',
+        text: 'Introduction'
+      },
+      {
+        link: '/installation/',
+        text: 'Installation'
+      },
+      {
+        link: '/components/',
+        text: 'Components'
+      },
+      {
+        text: 'Examples',
         collapsable: true,
         children: [
-          ['/examples/cards/', 'Cards'],
-          ['/examples/datatable/', 'Datatable']
+          {
+            link: '/examples/cards/',
+            text: 'Cards'
+          },
+          {
+            link: '/examples/datatable/',
+            text: 'Datatable'
+          }
         ]
       }
     ]
   },
-  head: [
-    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }],
-    ['script', { src: 'https://polyfill.io/v3/polyfill.min.js?features=Array.from' }],
-    ['script', { src: 'https://polyfill.io/v3/polyfill.min.js?features=Promise' }],
-    ['script', { src: 'https://polyfill.io/v3/polyfill.min.js?features=NodeList.prototype.forEach' }],
-    ['script', { src: 'https://polyfill.io/v3/polyfill.min.js?features=Object.assign' }]
-  ]
+  alias: {
+    '@': path.resolve(__dirname, '../../src'),
+    '@playground': path.resolve(__dirname, '../../playground'),
+    '@root': path.resolve(__dirname, '../../')
+  }
 }

docs/.vuepress/config.js

@@ -102,4 +102,15 @@ blockquote p {color: #777;}
 .theme-container .theme-default-content:not(.custom) > h5, 
 .theme-container .theme-default-content:not(.custom) > h6 {
   margin-bottom: 1rem !important;
+}
+
+/* Fix footer nav links */
+.page-nav .nav-link, .page-meta .nav-link {
+  display: inline;
+  padding: 0;
+}
+
+/* Fix stripped table rows colors */
+.table.table-striped tr:nth-child(2n) {
+  background-color: #f6f8fa;
 }

docs/.vuepress/enhanceApp.js

@@ -131,10 +131,10 @@ sortAsDate: function (isoDate) {
 
 ### Provides
 
-Dataset `provides` functions that return computed data, data and methods to the child components.  
+Dataset `provides` reactive data and methods to the child components.  
 You can leverage these using `inject` to create your own **custom child components**.
 
-##### Functions that return computed data
+##### Reactive data provided by `vue-dataset`
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -145,68 +145,40 @@ You can leverage these using `inject` to create your own **custom child componen
   </thead>
   <tbody>
     <tr>
-      <td>rdsRows</td>
+      <td>dsRows</td>
       <td>Array</td>
       <td>The indexes of the data rows currently displaying</td>
     </tr>
     <tr>
-      <td>rdsPages</td>
+      <td>dsPages</td>
       <td>Array</td>
       <td>The array used to create pagination links</td>
     </tr>
     <tr>
-      <td>rdsResultsNumber</td>
+      <td>dsResultsNumber</td>
       <td>Number</td>
       <td>The number of rows currently displaying</td>
     </tr>
     <tr>
-      <td>rdsPagecount</td>
+      <td>dsPagecount</td>
       <td>Number</td>
       <td>The number of pagination pages</td>
     </tr>
     <tr>
-      <td>rdsFrom</td>
+      <td>dsFrom</td>
       <td>Number</td>
       <td>The item "from" of paginated items currently displaying</td>
     </tr>
     <tr>
-      <td>rdsTo</td>
+      <td>dsTo</td>
       <td>Number</td>
       <td>The item "to" of paginated items currently displaying</td>
     </tr>
     <tr>
-      <td>rdsPage</td>
+      <td>dsPage</td>
       <td>Number</td>
       <td>The number of the current page in pagination</td>
-    </tr>         
-  </tbody>
-</table>
-
-> In order to use the functions that provide computed data you'll need to setup a computed property
-> as the example below.
-
-Example:
-``` js
-  ...
-  inject: ['rdsPage'],
-  computed: {
-    dsPage () {
-      return this.rdsPage()
-    }
-  }
-  ... 
-```
-
-##### Data
-<table class="table table-bordered">
-  <thead>
-    <tr>
-      <th>Property</th>
-      <th>Type</th>
-      <th>Description</th>
     </tr>
-  </thead>
-  <tbody>
     <tr>
       <td>dsData</td>
       <td>Array of Objects</td>
@@ -216,9 +188,34 @@ Example:
       <td>datasetI18n</td>
       <td>Object</td>
       <td>An object containing translation strings</td>
-    </tr>    
+    </tr>
   </tbody>
-</table>  
+</table>
+
+Example:
+``` vue
+<template>
+  <div>
+    {{ dsRows }} - {{ dsPages }}
+  </div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+export default {
+  setup(props) {
+    const dsRows = inject('dsRows')
+    const dsPages = inject('dsPages')
+
+    return {
+      dsRows,
+      dsPages
+    }
+  }
+}
+</script>
+```
 
 ##### Methods
 <table class="table table-bordered w-100 d-block d-md-table">