@gradin/vue-utils 0.0.5 → 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Gradin Tech Solutions
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# vue-utils
+# vue-utils <!-- omit in toc -->
 
 Useful utilities for Vue projects.
 
@@ -6,7 +6,14 @@ Useful utilities for Vue projects.
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/vue-utils)
 ![npm](https://img.shields.io/npm/dt/@gradin/vue-utils)
 
-## Installation
+Table of Contents:
+<!-- no toc --> 
+- [Installation](#installation)
+- [Features](#features)
+  - [Improved Vue Reactive](#improved-vue-reactive)
+  - [Watch Route Query and Params Changes](#watch-route-query-and-params-changes)
+
+## Installation 
 
 ```sh
 # Using npm
@@ -16,7 +23,7 @@ npm install @gradin/vue-utils
 yarn add @gradin/vue-utils
 ```
 
-## Featurs
+## Features
 
 ### Improved Vue Reactive
 
@@ -24,10 +31,7 @@ The `gReactive` function is a wrapper around Vue's `reactive` function that adds
 - **Reset**: The `reset` method resets the reactive object to its initial state.
 - **Set**: The `set` method sets the reactive object to a new value, merging the new value with the existing value.
 
-Example `reactive` vs `gReactive`
-
-<details>
-<summary>Show Codes</summary>
+Example `reactive` vs `gReactive`:
 
 ```typescript
   // before
@@ -82,4 +86,54 @@ Example `reactive` vs `gReactive`
       })
   }
 ```
-</details>
+
+### Watch Route Query and Params Changes
+
+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.
+
+`whenRouteChange` accepts two arguments:
+- `callback`: The function to be called when the route query or params changes.
+- `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.
+
+| When                                                       | Triggered |
+| :--------------------------------------------------------- | :-------: |
+| Route query changed (e.g /products to /products?page=2)    |    Yes    |
+| Route params changed (e.g /products/1 to /products/2)      |    Yes    |
+| Script setup loaded (using `watch` with `immediate: true`) |    Yes    |
+| Route name changed (e.g /products to /home)                |    No     |
+| Also Route name changed (e.g /products to /product/1)      |    No     |
+
+Usage:
+```typescript
+  import { whenRouteChange } from '@gradin/vue-utils';
+  import { useRoute } from 'vue-router';
+  import axios from 'axios';
+
+  const route = useRoute();
+  const products = ref<Product[]>([]);
+
+  const getData = () => {
+    const response = await axios.get('/api/products', {
+      params: {
+        page: route.query.page,
+        search: route.query.search,
+        category_id: route.query.category_id,
+        sort: route.query.sort,
+      }
+    })
+    products.value = response.data;
+  }
+  
+  whenRouteChange(getData) // will call getData once at the beginning, and again when the route query or params changes.
+
+  // or if you want just to track route query page
+  const highlightMatchesSearch = () => { 
+    //
+  }
+  whenRouteChange(
+    () => {
+      highlightMatchesSearch()
+    },
+    () => route.query.search
+  )
+```

package/dist/index.js

@@ -30,7 +30,8 @@ export const gReactive = resetableReactive; // alias
 export const whenRouteChange = (callback, watchSource) => {
     const route = useRoute();
     const routeName = route.name; // cache route name
-    watch(watchSource !== null && watchSource !== void 0 ? watchSource : (() => route.fullPath), () => {
+    const watchRouteParamsAndQuery = () => JSON.stringify([route.query, route.params]);
+    watch(watchSource !== null && watchSource !== void 0 ? watchSource : watchRouteParamsAndQuery, () => {
         if (route.name === routeName) {
             callback();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradin/vue-utils",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Useful utilities for Vue projects.",
   "type": "module",
   "main": "dist/index.js",
@@ -8,12 +8,17 @@
   "scripts": {
     "build": "tsc",
     "lint": "eslint . --fix",
-    "publish": "npm run build",
-    "publish2": "npm run build && npm publish --access public"
+    "publish": "npm run build"
   },
   "files": [
     "dist"
   ],
+  "np": {
+    "yarn": false,
+    "branch": "main",
+    "contents": "dist",
+    "tests": false
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gradints/vue-utils.git"
@@ -30,15 +35,15 @@
   },
   "homepage": "https://github.com/gradints/vue-utils#readme",
   "dependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "eslint": "^9.26.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.0"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0"
   },
   "peerDependencies": {
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.6.3"
   }
-}
+}