@gradin/vue-utils 0.0.7 → 1.0.0

package/README.md

@@ -12,6 +12,8 @@ Table of Contents:
 - [Features](#features)
   - [Improved Vue Reactive](#improved-vue-reactive)
   - [Watch Route Query and Params Changes](#watch-route-query-and-params-changes)
+  - [Helpers for Years](#helpers-for-years)
+- [Development](#development)
 
 ## Installation 
 
@@ -126,7 +128,7 @@ Usage:
   
   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
+  // or if you want to track just the route query.search
   const highlightMatchesSearch = () => { 
     //
   }
@@ -137,3 +139,31 @@ Usage:
     () => route.query.search
   )
 ```
+
+### Helpers for Years
+
+Usage:
+```typescript
+import {
+  currentYear, // the current year (e.g. 2026)
+  releaseYear, // e.g 2024
+  footerYear, // e.g 2024-2026
+  yearsSinceRelease, // e.g [2024, 2025, 2026]
+} from '@gradin/vue-utils';
+```
+
+To use `releaseYear`, `footerYear`, `yearsSinceRelease`, you need to set the `VITE_APP_RELEASE_YEAR` environment variable to the year your project was released. If not set, it will default to the current year.
+
+## Development
+
+To Deploy:
+
+```sh
+npm run build
+npm publish
+```
+
+To Authenticate:
+```sh
+npm login
+```

package/dist/footer-year.js

@@ -0,0 +1,7 @@
+var _a;
+export const currentYear = new Date().getFullYear();
+export const releaseYear = Number((_a = import.meta.env.VITE_APP_RELEASE_YEAR) !== null && _a !== void 0 ? _a : 0) || currentYear;
+export const footerYear = releaseYear === currentYear ? `${currentYear}` : `${releaseYear}-${currentYear}`;
+export const yearsSinceRelease = currentYear - releaseYear > 0
+    ? Array.from({ length: currentYear - releaseYear + 1 }, (_, i) => currentYear - i)
+    : [currentYear];

package/dist/index.js

@@ -1,39 +1,5 @@
-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;
-};
+import { resetableReactive } from "./resetable-reactive";
+export { resetableReactive } from "./resetable-reactive";
 export const gReactive = resetableReactive; // alias
-/**
- * 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
-    const watchRouteParamsAndQuery = () => JSON.stringify([route.query, route.params]);
-    watch(watchSource !== null && watchSource !== void 0 ? watchSource : watchRouteParamsAndQuery, () => {
-        if (route.name === routeName) {
-            callback();
-        }
-    }, { immediate: true });
-};
+export { currentYear, footerYear, releaseYear, yearsSinceRelease } from "./footer-year";
+export { whenRouteChange } from "./when-route-change";

package/dist/resetable-reactive.js

@@ -0,0 +1,22 @@
+import { reactive } from "vue";
+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;
+};

package/dist/types/footer-year.d.ts

@@ -0,0 +1,4 @@
+export declare const currentYear: number;
+export declare const releaseYear: number;
+export declare const footerYear: string;
+export declare const yearsSinceRelease: number[];

package/dist/types/index.d.ts

@@ -1,14 +1,7 @@
-export declare const resetableReactive: <T extends object>(data: T) => T & {
-    reset: () => void;
-    set: (newValue: Partial<T>) => void;
-};
+export { resetableReactive } from "./resetable-reactive";
 export declare const gReactive: <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;
+export { currentYear, footerYear, releaseYear, yearsSinceRelease } from "./footer-year";
+export { whenRouteChange } from "./when-route-change";

package/dist/types/resetable-reactive.d.ts

@@ -0,0 +1,4 @@
+export declare const resetableReactive: <T extends object>(data: T) => T & {
+    reset: () => void;
+    set: (newValue: Partial<T>) => void;
+};

package/dist/types/when-route-change.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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/dist/when-route-change.js

@@ -0,0 +1,17 @@
+import { watch } from "vue";
+import { useRoute } from 'vue-router';
+/**
+ * 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
+    const watchRouteParamsAndQuery = () => JSON.stringify([route.query, route.params]);
+    watch(watchSource !== null && watchSource !== void 0 ? watchSource : watchRouteParamsAndQuery, () => {
+        if (route.name === routeName) {
+            callback();
+        }
+    }, { immediate: true });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradin/vue-utils",
-  "version": "0.0.7",
+  "version": "1.0.0",
   "description": "Useful utilities for Vue projects.",
   "type": "module",
   "main": "dist/index.js",
@@ -35,15 +35,16 @@
   },
   "homepage": "https://github.com/gradints/vue-utils#readme",
   "dependencies": {
-    "vue": "^3.5.24"
+    "vue": "^3.5.30"
   },
   "devDependencies": {
-    "eslint": "^9.39.1",
+    "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.47.0"
+    "typescript-eslint": "^8.57.2"
   },
   "peerDependencies": {
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3 || ^5.0.0"
   }
 }