Merge pull request #4 from protonemedia/vue3

Support for Vue 3

Author: pascalbaljet

.github/workflows/js.yml

@@ -26,4 +26,5 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm install
-    - run: npm run test
+    - run: npm run test:2
+    - run: npm run test:3

README.md

@@ -27,15 +27,14 @@ We proudly support the community by developing Laravel packages and giving them
 
 ## Compatibility
 
-* [Vue 2.6](https://vuejs.org/v2/guide/installation.html)
+* [Vue 2.6](https://vuejs.org/v2/guide/installation.html) and [Vue 3](https://v3.vuejs.org/guide/installation.html)
 * [Laravel 8](https://laravel.com/)
 * [Inertia.js](https://inertiajs.com/)
 * [Tailwind CSS v2](https://tailwindcss.com/) + [Forms plugin](https://github.com/tailwindlabs/tailwindcss-forms)
 * PHP 7.4 + 8.0
 
 ## Roadmap
 
-* Support for Vue 3
 * Remove @tailwindcss/forms dependency
 * Debounce delay for inputs
 * Convert Table.vue styling to proper Tailwind syntax
@@ -44,7 +43,7 @@ We proudly support the community by developing Laravel packages and giving them
 
 ## Installation
 
-You need to install both the server-side package as well as the client-side package. Note that this package is only compatible with Laravel 8, Vue 2.6 and requires the Tailwind Forms plugin.
+You need to install both the server-side package as well as the client-side package. Note that this package is only compatible with Laravel 8, Vue 2.6 + 3.0 and requires the Tailwind Forms plugin.
 
 ### Server-side installation (Laravel)
 

js/Components/ButtonWithDropdown.vue

@@ -48,10 +48,6 @@ export default {
   },
 
   mounted() {
-    if (!this.$refs.button || !this.$refs.tooltip) {
-      return;
-    }
-
     this.popper = createPopper(this.$refs.button, this.$refs.tooltip, {
       placement: this.placement,
       modifiers: [flip, preventOverflow],

js/Components/OnClickOutside.vue

@@ -1,27 +1,40 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
 <script>
 export default {
-  props: ["do"],
+  props: {
+    do: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      listener: null,
+    };
+  },
 
   mounted() {
-    const listener = (e) => {
+    this.listener = (e) => {
       if (e.target === this.$el || this.$el.contains(e.target)) {
         return;
       }
 
       this.do();
     };
 
-    document.addEventListener("click", listener);
-    document.addEventListener("touchstart", listener);
-
-    this.$once("hook:beforeDestroy", () => {
-      document.removeEventListener("click", listener);
-      document.removeEventListener("touchstart", listener);
-    });
+    document.addEventListener("click", this.listener);
+    document.addEventListener("touchstart", this.listener);
   },
 
-  render() {
-    return this.$slots.default[0];
+  beforeUnmount() {
+    document.removeEventListener("click", this.listener);
+    document.removeEventListener("touchstart", this.listener);
   },
 };
 </script>

js/Components/TableSearchRows.vue

@@ -31,7 +31,13 @@ export default {
     },
 
     focus(key) {
-      this.$refs[key][0].focus();
+      const keyRef = this.$refs[key];
+
+      if (keyRef.length === 1) {
+        return keyRef[0].focus();
+      }
+
+      keyRef.focus();
     },
   },
 

js/InteractsWithQueryBuilder.vue

@@ -25,7 +25,7 @@ export default {
       columns: this.getColumnsForQuery(this.queryBuilderProps.columns || {}),
     };
 
-    return { queryBuilderData };
+    return { queryBuilderData, queryBuilderDataIteration: 0 };
   },
 
   methods: {
@@ -85,12 +85,14 @@ export default {
         page = 1;
       }
 
-      this.$set(this, "queryBuilderData", {
+      this.queryBuilderData = {
         page,
         sort: this.queryBuilderData.sort || "",
         filter,
         columns: this.getColumnsForQuery(data.columns || {}),
-      });
+      };
+
+      this.queryBuilderDataIteration++;
     },
   },
 

package-lock.json

@@ -4,12 +4,14 @@
   "description": "Inertia.js Front-end Components for Spatie's Laravel Query Builder",
   "main": "js/index.js",
   "scripts": {
-    "test": "jest"
+    "test:2": "vue-demi-switch 2 && jest",
+    "test:3": "vue-demi-switch 3 vue3 && jest"
   },
   "author": "Pascal Baljet",
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.9.2",
+    "@vue/composition-api": "^1.0.0-rc.6",
     "lodash-es": "^4.17.21",
     "qs": "^6.10.1"
   },
@@ -25,9 +27,20 @@
     "expect": "^26.6.2",
     "jest": "^26.6.3",
     "vue": "^2.6.12",
+    "vue3": "npm:vue@3",
+    "vue-demi": "^0.7.4",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12"
   },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.6",
+    "vue": "^2.6.12 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
   "jest": {
     "moduleFileExtensions": [
       "js",