@lingxia/vue 0.20.1 → 0.21.0

package/dist/hook.d.ts

@@ -1,6 +1,6 @@
-import { type Ref } from "vue";
+import { type MaybeRefOrGetter, type Ref } from "vue";
 import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
-import { type LxHost } from "@lingxia/bridge";
+import { type LxHost, type LxLeaveHandler } from "@lingxia/bridge";
 import { type ChannelIn, type ChannelOut, type MethodParams, type OptionsArg, type ParamsOption, type ParamsSource, type StreamData, type StreamResult } from "@lingxia/bridge/invocation";
 import { type ActionMap, type PageActions, type DeepReadonly, type Snapshot } from "@lingxia/page-runtime";
 type MethodSource<T> = T | Ref<T>;
@@ -24,6 +24,14 @@ export declare function useLxPage<TData = Snapshot, TActions extends ActionMap =
  * `--lx-page-chrome-*` and container queries. Callable anywhere.
  */
 export declare function useLxHost(): Readonly<LxHost>;
+/**
+ * Hold the page against user back and home while `dirty` — unsaved changes.
+ * When the user tries to leave, `onRequest` is asked: return `true` to let
+ * them go, `false` to stay (or a promise of either, after a dialog).
+ * Released when `dirty` turns false or the component unmounts. Call from
+ * `setup`.
+ */
+export declare function useLxLeaveGuard(dirty: MaybeRefOrGetter<boolean>, onRequest: LxLeaveHandler): void;
 type StreamMethod = (...args: any[]) => LxStream<any, any>;
 type ChannelMethod = (...args: any[]) => Promise<LxChannel<any, any>>;
 export type LxStreamOptions<TMethod> = ParamsOption<TMethod, ParamsSource<MethodParams<TMethod>>> & {

package/dist/hook.js

@@ -1,5 +1,5 @@
-import { onUnmounted, reactive, readonly, ref, unref, watch, } from "vue";
-import { getHost, subscribeHost } from "@lingxia/bridge";
+import { onUnmounted, reactive, readonly, ref, toValue, unref, watch, } from "vue";
+import { getHost, holdLeaveGuard, subscribeHost, } from "@lingxia/bridge";
 import { getMethodKey, invokeMethod, resolveParams, stableParamKey, toBridgeError, } from "@lingxia/bridge/invocation";
 import { getPageActions, getPageSnapshot, subscribePageSnapshot, } from "@lingxia/page-runtime";
 function resolveMethod(source) {
@@ -58,6 +58,31 @@ export function useLxHost() {
     }
     return readonly(hostState);
 }
+/**
+ * Hold the page against user back and home while `dirty` — unsaved changes.
+ * When the user tries to leave, `onRequest` is asked: return `true` to let
+ * them go, `false` to stay (or a promise of either, after a dialog).
+ * Released when `dirty` turns false or the component unmounts. Call from
+ * `setup`.
+ */
+export function useLxLeaveGuard(dirty, onRequest) {
+    let release;
+    const stop = watch(() => toValue(dirty), (value) => {
+        if (value) {
+            if (!release)
+                release = holdLeaveGuard(onRequest);
+        }
+        else if (release) {
+            release();
+            release = undefined;
+        }
+    }, { immediate: true });
+    onUnmounted(() => {
+        stop();
+        if (release)
+            release();
+    });
+}
 export function useLxStream(method, options) {
     const data = ref((options?.reduce ? options.initial : undefined));
     const result = ref(undefined);

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { useLxPage, useLxHost, useLxStream, useLxChannel, type LxStreamOptions, type LxReducedStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, } from "./hook.js";
-export type { LxHost } from "@lingxia/bridge";
+export { useLxPage, useLxHost, useLxLeaveGuard, useLxStream, useLxChannel, type LxStreamOptions, type LxReducedStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, } from "./hook.js";
+export type { LxHost, LxLeaveHandler, LxLeaveReason, LxLeaveRequest } from "@lingxia/bridge";
 export type { DeepReadonly } from "@lingxia/page-runtime";
 export { default as LxVideo } from "./LxVideo.vue";
 export { default as LxNativeRoot } from "./LxNativeRoot.vue";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { useLxPage, useLxHost, useLxStream, useLxChannel, } from "./hook.js";
+export { useLxPage, useLxHost, useLxLeaveGuard, useLxStream, useLxChannel, } from "./hook.js";
 export { default as LxVideo } from "./LxVideo.vue";
 export { default as LxNativeRoot } from "./LxNativeRoot.vue";
 export { default as LxNativeView } from "./LxNativeView.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/vue",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "private": false,
   "description": "LingXia Vue runtime and components for lxapp pages",
   "type": "module",
@@ -25,9 +25,9 @@
     "test:hooks": "rolldown -c tests/rolldown.hooks.config.mjs && node tests/page-hooks.mjs"
   },
   "dependencies": {
-    "@lingxia/bridge": "~0.20.1",
-    "@lingxia/elements": "~0.20.1",
-    "@lingxia/page-runtime": "~0.20.1"
+    "@lingxia/bridge": "~0.21.0",
+    "@lingxia/elements": "~0.21.0",
+    "@lingxia/page-runtime": "~0.21.0"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"