@vesperjs/vue 0.7.1 → 0.8.0

package/dist/index.mjs

@@ -3,9 +3,12 @@ import { computed, ref } from "@vue/reactivity";
 import { persistentAtom } from "@nanostores/persistent";
 import { ofetch } from "ofetch";
 import { createI18n } from "vue-i18n";
+import { format, parse, tzDate } from "@formkit/tempo";
 //#region src/stores/nano/base-url.ts
 const $baseUrl = persistentAtom("baseURL", "");
-persistentAtom("timeZone", "");
+//#endregion
+//#region src/stores/nano/time-zone.ts
+const $timeZone = persistentAtom("timeZone", void 0);
 //#endregion
 //#region src/stores/use-base-url-store.ts
 const useBaseUrlStore = function() {
@@ -75,13 +78,111 @@ const useLocale = function() {
 	};
 };
 //#endregion
+//#region src/stores/use-time-zone-store.ts
+const useTimeZoneStore = function() {
+	return { serverTZ: computed({
+		get() {
+			return $timeZone.get();
+		},
+		set(value) {
+			$timeZone.set(value);
+		}
+	}) };
+};
+//#endregion
+//#region src/composables/use-datetime-local.ts
+const useDatetimeLocal = function(fmtDT = "YYYY/MM/DD HH:mm") {
+	const { locale } = useLocale();
+	const fmtISO8601 = "YYYY-MM-DDTHH:mm";
+	const parseDT = (datetime, format) => {
+		return parse(datetime, format, locale.value);
+	};
+	const toISO8601 = (datetime) => {
+		return format(parseDT(datetime, fmtDT), fmtISO8601, locale.value);
+	};
+	const fromISO8601 = (datetime) => {
+		return format(parseDT(datetime, fmtISO8601), fmtDT, locale.value);
+	};
+	const upDTL = (datetime) => {
+		return datetime ? toISO8601(datetime) : null;
+	};
+	const downDTL = (datetime) => {
+		return datetime ? fromISO8601(datetime) : "";
+	};
+	const formatHTML = (datetime, fmt) => {
+		return datetime ? format(parseDT(datetime, fmtDT), fmt, locale.value) : "";
+	};
+	return {
+		upDTL,
+		downDTL,
+		toISO8601,
+		formatHTML
+	};
+};
+//#endregion
+//#region src/composables/use-time-zone.ts
+const useTimeZone = function(fmtDT = "YYYY/MM/DD HH:mm") {
+	const { locale } = useLocale();
+	const { toISO8601, formatHTML } = useDatetimeLocal(fmtDT);
+	const { serverTZ } = useTimeZoneStore();
+	const clientTZ = computed(() => Intl.DateTimeFormat().resolvedOptions().timeZone);
+	const timeZone = computed(() => ({
+		client: clientTZ.value,
+		server: serverTZ.value ? serverTZ.value : clientTZ.value
+	}));
+	const tzOptions = computed(() => Intl.supportedValuesOf("timeZone").map((e) => ({
+		text: e,
+		value: e
+	})));
+	const tzServerDate = (datetime) => {
+		return tzDate(toISO8601(datetime), timeZone.value.server);
+	};
+	const tzClientDate = (datetime) => {
+		return tzDate(toISO8601(datetime), timeZone.value.client);
+	};
+	const upTZ = (datetime) => {
+		return timeZone.value.client === timeZone.value.server ? datetime ?? "" : datetime ? format({
+			date: tzServerDate(datetime),
+			format: fmtDT,
+			locale: locale.value,
+			tz: timeZone.value.client
+		}) : "";
+	};
+	const downTZ = (datetime) => {
+		return timeZone.value.client === timeZone.value.server ? datetime ?? "" : datetime ? format({
+			date: tzClientDate(datetime),
+			format: fmtDT,
+			locale: locale.value,
+			tz: timeZone.value.server
+		}) : "";
+	};
+	const formatHtmlTZ = (datetime, fmt) => {
+		return timeZone.value.client === timeZone.value.server ? formatHTML(datetime, fmt) : datetime ? format({
+			date: tzServerDate(datetime),
+			format: fmt,
+			locale: locale.value,
+			tz: timeZone.value.client
+		}) : "";
+	};
+	return {
+		timeZone,
+		serverTZ,
+		tzOptions,
+		upTZ,
+		downTZ,
+		formatHtmlTZ
+	};
+};
+//#endregion
 //#region src/composables/backend/api/use-http-headers.ts
 const useHttpHeaders = function() {
 	const { locale } = useLocale();
+	const { timeZone } = useTimeZone();
 	return { commonHeaders: computed(() => ({
 		"X-Requested-With": "XMLHttpRequest",
 		Accept: "application/json",
-		"Accept-Language": locale.value
+		"Accept-Language": locale.value,
+		"Time-Zone": timeZone.value.client
 	})) };
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesperjs/vue",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "keywords": [
     "vue.js"
   ],
@@ -22,7 +22,7 @@
     "@formkit/tempo": "^1.1.0",
     "@nanostores/persistent": "^1.3.4",
     "@nanostores/router": "^1.0.0",
-    "@vesperjs/shared": "0.7.1",
+    "@vesperjs/shared": "0.8.0",
     "nanostores": "^1.3.0",
     "ofetch": "^1.5.1",
     "undici": "^8.2.0",
@@ -30,12 +30,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.59.2",
-    "@typescript-eslint/parser": "^8.59.2",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
     "@vue/eslint-config-typescript": "^14.7.0",
     "eslint": "^10.3.0",
     "eslint-plugin-vue": "^10.9.1",
-    "oxfmt": "^0.48.0",
+    "oxfmt": "^0.50.0",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.3"
   },
@@ -43,7 +43,7 @@
     "@vue/reactivity": "^3.5.34 || ^3.6.0-beta.11",
     "@vue/runtime-core": "^3.5.34 || ^3.6.0-beta.11",
     "@vue/runtime-dom": "^3.5.34 || ^3.6.0-beta.11",
-    "typescript-eslint": "^8.59.2",
+    "typescript-eslint": "^8.59.3",
     "vue": "^3.5.34 || ^3.6.0-beta.11"
   },
   "scripts": {