Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Commit 6223570

Browse files
Merge pull request #4 from protonemedia/vue3
Support for Vue 3
2 parents 86127d5 + 09d54a2 commit 6223570

File tree

8 files changed

+163
-24
lines changed

8 files changed

+163
-24
lines changed

‎.github/workflows/js.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ jobs:
2626
node-version: ${{ matrix.node-version }}
2727
- run: npm ci
2828
- run: npm install
29-
- run: npm run test
29+
- run: npm run test:2
30+
- run: npm run test:3

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,14 @@ We proudly support the community by developing Laravel packages and giving them
2727

2828
## Compatibility
2929

30-
* [Vue 2.6](https://vuejs.org/v2/guide/installation.html)
30+
* [Vue 2.6](https://vuejs.org/v2/guide/installation.html) and [Vue 3](https://v3.vuejs.org/guide/installation.html)
3131
* [Laravel 8](https://laravel.com/)
3232
* [Inertia.js](https://inertiajs.com/)
3333
* [Tailwind CSS v2](https://tailwindcss.com/) + [Forms plugin](https://github.com/tailwindlabs/tailwindcss-forms)
3434
* PHP 7.4 + 8.0
3535

3636
## Roadmap
3737

38-
* Support for Vue 3
3938
* Remove @tailwindcss/forms dependency
4039
* Debounce delay for inputs
4140
* Convert Table.vue styling to proper Tailwind syntax
@@ -44,7 +43,7 @@ We proudly support the community by developing Laravel packages and giving them
4443

4544
## Installation
4645

47-
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.
46+
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.
4847

4948
### Server-side installation (Laravel)
5049

‎js/Components/ButtonWithDropdown.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ export default {
4848
},
4949
5050
mounted() {
51-
if (!this.$refs.button || !this.$refs.tooltip) {
52-
return;
53-
}
54-
5551
this.popper = createPopper(this.$refs.button, this.$refs.tooltip, {
5652
placement: this.placement,
5753
modifiers: [flip, preventOverflow],

‎js/Components/OnClickOutside.vue

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
1+
<template>
2+
<div>
3+
<slot />
4+
</div>
5+
</template>
6+
17
<script>
28
export default {
3-
props: ["do"],
9+
props: {
10+
do: {
11+
type: Function,
12+
required: true,
13+
},
14+
},
15+
16+
data() {
17+
return {
18+
listener: null,
19+
};
20+
},
421
522
mounted() {
6-
constlistener = (e) => {
23+
this.listener = (e) => {
724
if (e.target === this.$el || this.$el.contains(e.target)) {
825
return;
926
}
1027
1128
this.do();
1229
};
1330
14-
document.addEventListener("click", listener);
15-
document.addEventListener("touchstart", listener);
16-
17-
this.$once("hook:beforeDestroy", () => {
18-
document.removeEventListener("click", listener);
19-
document.removeEventListener("touchstart", listener);
20-
});
31+
document.addEventListener("click", this.listener);
32+
document.addEventListener("touchstart", this.listener);
2133
},
2234
23-
render() {
24-
return this.$slots.default[0];
35+
beforeUnmount() {
36+
document.removeEventListener("click", this.listener);
37+
document.removeEventListener("touchstart", this.listener);
2538
},
2639
};
2740
</script>

‎js/Components/TableSearchRows.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,13 @@ export default {
3131
},
3232
3333
focus(key) {
34-
this.$refs[key][0].focus();
34+
const keyRef = this.$refs[key];
35+
36+
if (keyRef.length === 1) {
37+
return keyRef[0].focus();
38+
}
39+
40+
keyRef.focus();
3541
},
3642
},
3743

‎js/InteractsWithQueryBuilder.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525
columns: this.getColumnsForQuery(this.queryBuilderProps.columns || {}),
2626
};
2727
28-
return { queryBuilderData };
28+
return { queryBuilderData, queryBuilderDataIteration:0 };
2929
},
3030
3131
methods: {
@@ -85,12 +85,14 @@ export default {
8585
page = 1;
8686
}
8787
88-
this.$set(this, "queryBuilderData", {
88+
this.queryBuilderData= {
8989
page,
9090
sort: this.queryBuilderData.sort || "",
9191
filter,
9292
columns: this.getColumnsForQuery(data.columns || {}),
93-
});
93+
};
94+
95+
this.queryBuilderDataIteration++;
9496
},
9597
},
9698

‎package-lock.json

Lines changed: 109 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
"description": "Inertia.js Front-end Components for Spatie's Laravel Query Builder",
55
"main": "js/index.js",
66
"scripts": {
7-
"test": "jest"
7+
"test:2": "vue-demi-switch 2 && jest",
8+
"test:3": "vue-demi-switch 3 vue3 && jest"
89
},
910
"author": "Pascal Baljet",
1011
"license": "MIT",
1112
"dependencies": {
1213
"@popperjs/core": "^2.9.2",
14+
"@vue/composition-api": "^1.0.0-rc.6",
1315
"lodash-es": "^4.17.21",
1416
"qs": "^6.10.1"
1517
},
@@ -25,9 +27,20 @@
2527
"expect": "^26.6.2",
2628
"jest": "^26.6.3",
2729
"vue": "^2.6.12",
30+
"vue3": "npm:vue@3",
31+
"vue-demi": "^0.7.4",
2832
"vue-jest": "^3.0.7",
2933
"vue-template-compiler": "^2.6.12"
3034
},
35+
"peerDependencies": {
36+
"@vue/composition-api": "^1.0.0-rc.6",
37+
"vue": "^2.6.12 || >=3.0.0"
38+
},
39+
"peerDependenciesMeta": {
40+
"@vue/composition-api": {
41+
"optional": true
42+
}
43+
},
3144
"jest": {
3245
"moduleFileExtensions": [
3346
"js",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /