@gradin/vue-utils 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -8
- package/dist/index.js +2 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# vue-utils
|
|
1
|
+
# vue-utils <!-- omit in toc -->
|
|
2
2
|
|
|
3
3
|
Useful utilities for Vue projects.
|
|
4
4
|
|
|
@@ -6,7 +6,14 @@ Useful utilities for Vue projects.
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Table of Contents:
|
|
10
|
+
<!-- no toc -->
|
|
11
|
+
- [Installation](#installation)
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Improved Vue Reactive](#improved-vue-reactive)
|
|
14
|
+
- [Watch Route Query and Params Changes](#watch-route-query-and-params-changes)
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
10
17
|
|
|
11
18
|
```sh
|
|
12
19
|
# Using npm
|
|
@@ -16,7 +23,7 @@ npm install @gradin/vue-utils
|
|
|
16
23
|
yarn add @gradin/vue-utils
|
|
17
24
|
```
|
|
18
25
|
|
|
19
|
-
##
|
|
26
|
+
## Features
|
|
20
27
|
|
|
21
28
|
### Improved Vue Reactive
|
|
22
29
|
|
|
@@ -24,10 +31,7 @@ The `gReactive` function is a wrapper around Vue's `reactive` function that adds
|
|
|
24
31
|
- **Reset**: The `reset` method resets the reactive object to its initial state.
|
|
25
32
|
- **Set**: The `set` method sets the reactive object to a new value, merging the new value with the existing value.
|
|
26
33
|
|
|
27
|
-
Example `reactive` vs `gReactive
|
|
28
|
-
|
|
29
|
-
<details>
|
|
30
|
-
<summary>Show Codes</summary>
|
|
34
|
+
Example `reactive` vs `gReactive`:
|
|
31
35
|
|
|
32
36
|
```typescript
|
|
33
37
|
// before
|
|
@@ -82,4 +86,54 @@ Example `reactive` vs `gReactive`
|
|
|
82
86
|
})
|
|
83
87
|
}
|
|
84
88
|
```
|
|
85
|
-
|
|
89
|
+
|
|
90
|
+
### Watch Route Query and Params Changes
|
|
91
|
+
|
|
92
|
+
The `whenRouteChange` will allow you to do something changes but still on the same page. It is also triggered on the first mount of the component.
|
|
93
|
+
|
|
94
|
+
`whenRouteChange` accepts two arguments:
|
|
95
|
+
- `callback`: The function to be called when the route query or params changes.
|
|
96
|
+
- `watchSource`: Optional. A function that returns the value to be watched. If not provided, it will watch the entire route query and route params object.
|
|
97
|
+
|
|
98
|
+
| When | Triggered |
|
|
99
|
+
| :--------------------------------------------------------- | :-------: |
|
|
100
|
+
| Route query changed (e.g /products to /products?page=2) | Yes |
|
|
101
|
+
| Route params changed (e.g /products/1 to /products/2) | Yes |
|
|
102
|
+
| Script setup loaded (using `watch` with `immediate: true`) | Yes |
|
|
103
|
+
| Route name changed (e.g /products to /home) | No |
|
|
104
|
+
| Also Route name changed (e.g /products to /product/1) | No |
|
|
105
|
+
|
|
106
|
+
Usage:
|
|
107
|
+
```typescript
|
|
108
|
+
import { whenRouteChange } from '@gradin/vue-utils';
|
|
109
|
+
import { useRoute } from 'vue-router';
|
|
110
|
+
import axios from 'axios';
|
|
111
|
+
|
|
112
|
+
const route = useRoute();
|
|
113
|
+
const products = ref<Product[]>([]);
|
|
114
|
+
|
|
115
|
+
const getData = () => {
|
|
116
|
+
const response = await axios.get('/api/products', {
|
|
117
|
+
params: {
|
|
118
|
+
page: route.query.page,
|
|
119
|
+
search: route.query.search,
|
|
120
|
+
category_id: route.query.category_id,
|
|
121
|
+
sort: route.query.sort,
|
|
122
|
+
}
|
|
123
|
+
})
|
|
124
|
+
products.value = response.data;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
whenRouteChange(getData) // will call getData once at the beginning, and again when the route query or params changes.
|
|
128
|
+
|
|
129
|
+
// or if you want just to track route query page
|
|
130
|
+
const highlightMatchesSearch = () => {
|
|
131
|
+
//
|
|
132
|
+
}
|
|
133
|
+
whenRouteChange(
|
|
134
|
+
() => {
|
|
135
|
+
highlightMatchesSearch()
|
|
136
|
+
},
|
|
137
|
+
() => route.query.search
|
|
138
|
+
)
|
|
139
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -30,7 +30,8 @@ export const gReactive = resetableReactive; // alias
|
|
|
30
30
|
export const whenRouteChange = (callback, watchSource) => {
|
|
31
31
|
const route = useRoute();
|
|
32
32
|
const routeName = route.name; // cache route name
|
|
33
|
-
|
|
33
|
+
const watchRouteParamsAndQuery = () => JSON.stringify([route.query, route.params]);
|
|
34
|
+
watch(watchSource !== null && watchSource !== void 0 ? watchSource : watchRouteParamsAndQuery, () => {
|
|
34
35
|
if (route.name === routeName) {
|
|
35
36
|
callback();
|
|
36
37
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradin/vue-utils",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "Useful utilities for Vue projects.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"build": "tsc",
|
|
10
10
|
"lint": "eslint . --fix",
|
|
11
|
-
"publish": "npm run build
|
|
11
|
+
"publish": "npm run build"
|
|
12
12
|
},
|
|
13
13
|
"files": [
|
|
14
14
|
"dist"
|