@antcde/vue-utils 0.2.14-rc.00a441c → 0.2.14-rc.1d0df62

package/dist/index.js

@@ -1,10 +1,64 @@
 import { objectOmit as e, objectPick as t, useAsyncState as n, useColorMode as r, useMagicKeys as i, watchDebounced as a, whenever as o } from "@vueuse/core";
 import { computed as s, inject as c, onBeforeUnmount as l, onMounted as u, onUnmounted as d, readonly as f, ref as p, shallowRef as m, watch as h } from "vue";
 import { useI18n as g } from "vue-i18n";
-import { newCommsClient as _, newCommsHost as v } from "@antcde/connect-ts";
-import { BehaviorSubject as y, Subject as b, concat as x, concatMap as S, debounceTime as C, distinctUntilChanged as w, filter as T, map as E } from "rxjs";
+import { clone as _, newCommsClient as v, newCommsHost as y } from "@antcde/connect-ts";
+import { BehaviorSubject as b, Subject as x, concat as S, concatMap as C, debounceTime as w, distinctUntilChanged as T, filter as E, map as D } from "rxjs";
+//#region src/formatDate.ts
+var O = "nl", k = {
+	short: {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	},
+	medium: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	long: {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	},
+	monthDay: {
+		day: "numeric",
+		month: "short"
+	},
+	shortDateTime: {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: !1
+	},
+	mediumDateTime: {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: !1
+	}
+}, A = new Set(["short", "shortDateTime"]);
+function j(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function M(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function N(e, t = {}) {
+	let { preset: n = "short", locale: r = O, fallback: i = "" } = t;
+	if (e == null || e === "") return i;
+	let a = j(e);
+	if (Number.isNaN(a.getTime())) return i;
+	if (n === "iso") return M(a);
+	let o = A.has(n) && /^en\b/i.test(r) ? O : r;
+	return new Intl.DateTimeFormat(o, k[n]).format(a);
+}
+//#endregion
 //#region src/useAntColorMode.ts
-function D(e, n) {
+function P(e, n) {
 	let i = r(n), a = s(() => e.context.value.darkMode), o = s(() => {
 		switch (a.value) {
 			case null: return "auto";
@@ -30,14 +84,37 @@ function D(e, n) {
 }
 //#endregion
 //#region src/useAntI18n.ts
-function O(e, t) {
+function F(e, t) {
 	let n = g(t);
 	return h(() => e.context.value.user?.language, (e) => n.locale.value = e ?? "en", { immediate: !0 }), n;
 }
 //#endregion
+//#region src/useAppTourMode.ts
+var I = p(!1), L = p(null);
+function R() {
+	function e(e) {
+		h(() => e.value.tourMode, (e) => {
+			I.value = !!e, e || (L.value = null);
+		}, { immediate: !0 });
+	}
+	function t(e) {
+		I.value && (L.value = e);
+	}
+	function n() {
+		I.value = !1, L.value = null;
+	}
+	return {
+		isActive: f(I),
+		activeZoneId: f(L),
+		connectContext: e,
+		setActiveZone: t,
+		exit: n
+	};
+}
+//#endregion
 //#region src/useCommsClient.ts
-function k(t, n, r) {
-	let i = p({}), a = _({
+function z(t, n, r) {
+	let i = p({}), a = v({
 		parent: window.parent,
 		connect: t,
 		manifest: r
@@ -45,17 +122,17 @@ function k(t, n, r) {
 		get: () => o.value,
 		set: (e) => a.appState.set(e)
 	});
-	return a.context.subscribe((e) => i.value = e), x(a.appState.get(), a.appState).subscribe((e) => o.value = e), j(a.signal, a, n), l(() => a.unsubscribe()), Object.assign(e(a, [
+	return a.context.subscribe((e) => i.value = e), S(a.appState.get(), a.appState).subscribe((e) => o.value = e), V(a.signal, a, n), l(() => a.unsubscribe()), Object.assign(e(a, [
 		"context",
 		"toolbar",
 		"appState"
 	]), {
 		context: i,
-		toolbar: A(a),
+		toolbar: B(a),
 		appState: c
 	});
 }
-function A(e) {
+function B(e) {
 	let t = p(""), n = {
 		title: s({
 			get: () => e.toolbar.get().title,
@@ -106,23 +183,23 @@ function A(e) {
 			}))
 		})
 	};
-	return e.toolbar.pipe(E((e) => e.search.input ?? ""), w(), C(300)).forEach((e) => t.value = e), n;
+	return e.toolbar.pipe(D((e) => e.search.input ?? ""), T(), w(300)).forEach((e) => t.value = e), n;
 }
-function j(e, t, n) {
-	let r = i(), a = r.ctrl ?? s(() => !1), c = r.shift ?? s(() => !1), l = new b(), u = l.pipe(S(n ?? ((e) => Promise.resolve(e))), S((t) => e(t))).subscribe();
+function V(e, t, n) {
+	let r = i(), a = r.ctrl ?? s(() => !1), c = r.shift ?? s(() => !1), l = new x(), u = l.pipe(C(n ?? ((e) => Promise.resolve(e))), C((t) => e(t))).subscribe();
 	return t.add(u), u.add(o(a, () => l.next({ hotkeys: { ctrl: !0 } }))), u.add(o(c, () => l.next({ hotkeys: { shift: !0 } }))), u;
 }
 //#endregion
 //#region src/useCommsHost.ts
-function M(e) {
-	let { context: t } = e, n = new y({}), r = (e) => n.next(e(n.value)), i = p(), o = new y(void 0), c = h(i, (e) => o.next(e), { immediate: !0 }), l = o.asObservable().pipe(E((e) => e?.contentWindow), T((e) => !!e)), u = v({
+function H(e) {
+	let { context: t } = e, n = new b({}), r = (e) => n.next(e(n.value)), i = p(), o = new b(void 0), c = h(i, (e) => o.next(e), { immediate: !0 }), l = o.asObservable().pipe(D((e) => e?.contentWindow), E((e) => !!e)), u = y({
 		...e,
 		contextChanges: n,
 		windowChanges: l
 	});
 	Object.entries(t).map(([e, t]) => h(t, (t) => r((n) => ({
 		...n,
-		[e]: t
+		[e]: _(t)
 	})), { immediate: !0 })).forEach((e) => u.scope.add(e)), u.toolbar.subscribe((t) => {
 		let n = e.toolbar;
 		n.title.value = t.title, n.subtitle.value = t.subtitle, n.searchEnabled.value = t.search?.enabled ?? !1, n.search.value = t.search?.input, n.menu.value = t.menu, n.isLoading.value = t?.isLoading ?? !1;
@@ -139,23 +216,23 @@ function M(e) {
 	u.appState.changes.subscribe((e) => f.value = e);
 	let g = p(!1);
 	u.isConnectionInitialized.subscribe((e) => g.value = e);
-	let _ = p(null);
-	u.manifest?.subscribe((e) => _.value = e);
-	let { unsubscribe: b, signal: x, closed: S } = u;
+	let v = p(null);
+	u.manifest?.subscribe((e) => v.value = e);
+	let { unsubscribe: x, signal: S, closed: C } = u;
 	return {
 		...e,
 		client: i,
 		appState: m,
 		isConnectionInitialized: g,
-		manifest: _,
-		unsubscribe: b,
-		signal: x,
-		closed: S
+		manifest: v,
+		unsubscribe: x,
+		signal: S,
+		closed: C
 	};
 }
 //#endregion
 //#region src/usePermissions.ts
-function N(e) {
+function U(e) {
 	let t = s(() => e.value?.user), n = s(() => e.value?.license), r = s(() => e.value?.project), i = s(() => !!t.value?.is_admin), a = s(() => !!n.value?.user_is_admin), o = s(() => !!r.value?.user_is_admin || a.value);
 	function c(e) {
 		return !t.value || !n.value ? !1 : i.value || a.value ? !0 : (n.value.user_roles ?? []).some((t) => t.name === e);
@@ -181,7 +258,7 @@ function N(e) {
 }
 //#endregion
 //#region src/useTemplateVersioning.ts
-function P(e) {
+function W(e) {
 	let t = m(null), n = m(null), r = m(null), i = m(null), a = m([]), o = m(null), c = p(!1), l = p(!1), u = p(!1), d = p(!1), f = p(!1), h = p(!1), g = s(() => t.value?.has_update ?? !1), _ = s(() => t.value?.current_version ?? null), v = s(() => t.value?.latest_version ?? null), y = s(() => n.value ? n.value.added.length + n.value.removed.length + n.value.modified.length + n.value.relations_added.length + n.value.relations_removed.length : 0);
 	async function b(n) {
 		c.value = !0;
@@ -321,18 +398,18 @@ function P(e) {
 }
 //#endregion
 //#region src/utils.ts
-function F(e = "comms") {
-	let [t, n] = I(e, () => k(), (e) => e.unsubscribe());
+function G(e = "comms") {
+	let [t, n] = K(e, () => z(), (e) => e.unsubscribe());
 	return {
 		provideComms: t,
 		injectComms: n
 	};
 }
-function I(e, t, n) {
+function K(e, t, n) {
 	let r, i = () => (!r && (r = t()), r);
 	return [(t) => (t.onUnmount(() => n && r && n(r)), t.provide(e, i)), () => c(e)()];
 }
-function L(t, r, i) {
+function q(t, r, i) {
 	let a = n(t, r, {
 		immediate: !1,
 		...i
@@ -342,9 +419,9 @@ function L(t, r, i) {
 		executeDelayed: a.execute
 	});
 }
-function R(e) {
+function J(e) {
 	let t, n = p(void 0);
 	return u(() => t = e.signal.receive((e) => n.value = e)), d(() => t?.()), [f(n), () => t?.()];
 }
 //#endregion
-export { D as useAntColorMode, O as useAntI18n, L as useApi, k as useCommsClient, M as useCommsHost, F as useCommsInjection, N as usePermissions, R as useSignal, I as useSingleton, P as useTemplateVersioning };
+export { N as formatDate, P as useAntColorMode, F as useAntI18n, q as useApi, R as useAppTourMode, z as useCommsClient, H as useCommsHost, G as useCommsInjection, U as usePermissions, J as useSignal, K as useSingleton, W as useTemplateVersioning };

package/dist/types/formatDate.d.ts

@@ -0,0 +1,22 @@
+export type DateFormatPreset = 'short' | 'medium' | 'long' | 'monthDay' | 'shortDateTime' | 'mediumDateTime' | 'iso';
+export interface FormatDateOptions {
+    /** Display preset. Default: 'short' (DD-MM-YYYY numeric). */
+    preset?: DateFormatPreset;
+    /** BCP-47 locale tag. Default: 'nl' (Dutch DD-MM-YYYY notation). */
+    locale?: string;
+    /** Returned when value is null/undefined/empty/invalid. Default: ''. */
+    fallback?: string;
+}
+/**
+ * Format a date for display across the ANT environment.
+ *
+ * Default is the Dutch DD-MM-YYYY notation. German callers get DD.MM.YYYY
+ * via native Intl. English (`en`, `en-US`, `en-GB`, ...) is intentionally
+ * mapped to the Dutch numeric pattern for the `short`/`shortDateTime`
+ * presets to keep the project-wide DD-MM-YYYY default even when the host
+ * runs in English.
+ *
+ * Storage stays ISO everywhere — use the `iso` preset only for payload
+ * serialisation, never for display.
+ */
+export declare function formatDate(value: Date | string | number | null | undefined, options?: FormatDateOptions): string;

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
+export { type DateFormatPreset, formatDate, type FormatDateOptions } from './formatDate';
 export { useAntColorMode, type UseAntColorModeOptions, type UseAntColorModeReturn } from './useAntColorMode';
 export { useAntI18n, type UseAntI18nReturn } from './useAntI18n';
+export { useAppTourMode } from './useAppTourMode';
 export { type UseCommsClient, useCommsClient } from './useCommsClient';
 export { type CommsHostArgs, type UseCommsHost, useCommsHost } from './useCommsHost';
 export { type UsePermissions, usePermissions } from './usePermissions';

package/dist/types/useAppTourMode.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'vue';
+/**
+ * Iframe-side tour mode — mirrors the OS `useTourMode` API.
+ *
+ * Call `connectContext(context)` once in App.vue to wire the OS context stream.
+ * Then call `useAppTourMode()` anywhere to read state and set the active zone.
+ *
+ * @example
+ * ```typescript
+ * // App.vue — one-time wiring
+ * const { comms } = injectContext()
+ * useAppTourMode().connectContext(comms.context)
+ *
+ * // Any component
+ * const { isActive, activeZoneId, setActiveZone } = useAppTourMode()
+ * ```
+ */
+export declare function useAppTourMode(): {
+    isActive: Readonly<Ref<boolean, boolean>>;
+    activeZoneId: Readonly<Ref<string | null, string | null>>;
+    connectContext: (context: Ref<{
+        tourMode?: boolean | null;
+    }>) => void;
+    setActiveZone: (id: string | null) => void;
+    exit: () => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antcde/vue-utils",
   "type": "module",
-  "version": "0.2.14-rc.00a441c",
+  "version": "0.2.14-rc.1d0df62",
   "description": "Helper to use ANT Comms in Vue 3",
   "author": "CollaborAll",
   "exports": {
@@ -31,16 +31,16 @@
     "vue-i18n": "^11.1.12"
   },
   "dependencies": {
-    "@antcde/connect-ts": "0.4.18-rc.00a441c"
+    "@antcde/connect-ts": "0.4.18-rc.1d0df62"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^22.19.19",
+    "@types/node": "^22.19.21",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",
     "typescript": "~6.0.3",
-    "vite": "^8.0.14",
+    "vite": "^8.0.16",
     "vite-plugin-dts": "^4.5.4",
-    "vue-tsc": "^3.3.2"
+    "vue-tsc": "^3.3.5"
   }
 }