@gradin/vue-utils 0.0.1

package/README.md

@@ -0,0 +1,85 @@
+# vue-utils
+
+Useful utilities for Vue projects.
+
+[![npm (scoped)](https://img.shields.io/npm/v/@gradin/vue-utils)](https://www.npmjs.com/package/@gradin/vue-utils)
+![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/vue-utils)
+![npm](https://img.shields.io/npm/dt/@gradin/vue-utils)
+
+## Installation
+
+```sh
+# Using npm
+npm install @gradin/vue-utils
+
+# Using Yarn
+yarn add @gradin/vue-utils
+```
+
+## Featurs
+
+### Improved Vue Reactive
+
+The `gReactive` function is a wrapper around Vue's `reactive` function that adds some useful features.
+- **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>
+
+```typescript
+  // before
+  import { reactive } from 'vue';
+  const form = reactive({
+    name: '',
+    sku: '',
+    description: '',
+    price: 0,
+    category_id: <number|null> null,
+  })
+
+  const resetForm = () => {
+    form.name = '';
+    form.sku = '';
+    form.description = '';
+    form.price = 0;
+    form.category_id = null;
+  }
+
+  const setFormForUpdate = (product: Product) => {
+    form.name = product.name;
+    form.sku = product.sku;
+    form.description = product.description;
+    form.price = product.price;
+    form.category_id = product.category_id;
+  }
+
+  const submitForm = () => {
+    axios.post('/api/products', form)
+      .then(response => {
+        // handle success
+      })
+  }
+
+  // after
+  import { gReactive } from '@gradin/vue-utils';
+  const form = gReactive({ // almost the same as vue reactive
+    name: '',
+    sku: '',
+    description: '',
+    price: 0,
+    category_id: <number|null> null,
+  })
+  form.reset(); // reset the form
+  form.set(product); // set the form for update
+
+  const submitForm = () => { // exactly the same as before
+    axios.post('/api/products', form)
+      .then(response => {
+        // handle success
+      })
+  }
+```
+</details>

package/dist/index.js

@@ -0,0 +1,37 @@
+import { reactive, watch } from "vue";
+import { useRoute } from 'vue-router';
+export const resetableReactive = (data) => {
+    const initialValue = Object.assign({}, data);
+    const form = reactive(data);
+    Object.defineProperty(form, 'reset', {
+        value: () => {
+            Object.assign(form, initialValue);
+        },
+        enumerable: false, // <== this hides it from JSON.stringify and Object.keys
+    });
+    Object.defineProperty(form, 'set', {
+        value: (newValue) => {
+            for (const key in initialValue) {
+                if (key in newValue) {
+                    form[key] = newValue[key];
+                }
+            }
+        },
+        enumerable: false, // <== this hides it from JSON.stringify and Object.keys
+    });
+    return form;
+};
+/**
+ * Watch the route full path, and trigger callback when query / params change
+ * but don't trigger when route name change (move away to other page).
+ * Optional watchSource to watch just specific part of the route (not fullPath).
+ */
+export const whenRouteChange = (callback, watchSource) => {
+    const route = useRoute();
+    const routeName = route.name; // cache route name
+    watch(watchSource !== null && watchSource !== void 0 ? watchSource : (() => route.fullPath), () => {
+        if (route.name === routeName) {
+            callback();
+        }
+    }, { immediate: true });
+};

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+export declare const resetableReactive: <T extends object>(data: T) => T & {
+    reset: () => void;
+    set: (newValue: Partial<T>) => void;
+};
+/**
+ * Watch the route full path, and trigger callback when query / params change
+ * but don't trigger when route name change (move away to other page).
+ * Optional watchSource to watch just specific part of the route (not fullPath).
+ */
+export declare const whenRouteChange: (callback: () => void, watchSource?: () => unknown) => void;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@gradin/vue-utils",
+  "version": "0.0.1",
+  "description": "Useful utilities for Vue projects.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint . --fix"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradints/vue-utils.git"
+  },
+  "keywords": [
+    "vue",
+    "javascript",
+    "typescript"
+  ],
+  "author": "Christhofer",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gradints/vue-utils/issues"
+  },
+  "homepage": "https://github.com/gradints/vue-utils#readme",
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "eslint": "^9.26.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.0"
+  },
+  "peerDependencies": {
+    "vue-router": "^4.5.1"
+  }
+}