@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/native/ui38.js

@@ -0,0 +1,197 @@
+import { cx } from "./ui2.js";
+import { applyThemeClasses, useThemeScheme } from "./ui31.js";
+import { rootLayoutFor } from "./ui34.js";
+import { applyNativeProps } from "./ui36.js";
+import { positionPopover } from "./ui37.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
+import { GridLayout } from "@nativescript/core";
+//#region src/Popover.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": {
+		"width": "100%",
+		"height": "100%",
+		"className": "vx-popover-backdrop"
+	},
+	"bindings": [["backgroundColor", 0], ["onTap", 1]]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "absolutelayout",
+	"props": {
+		"width": "100%",
+		"height": "100%"
+	},
+	"bindings": [["className", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}, {
+		"kind": "host",
+		"type": "gridlayout",
+		"bindings": [
+			["ref", 2],
+			["left", 3],
+			["top", 4],
+			["opacity", 5],
+			["className", 6],
+			["style", 7],
+			["onLoaded", 8],
+			["onLayoutChanged", 9]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 10
+		}]
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": []
+});
+var PopoverLayer = defineUniversalComponent("nativescript", function PopoverLayer(props) {
+	const panelRef = useRef(null, _h$0);
+	const [position, setPosition] = useState(null, _h$1);
+	const [settled, setSettled] = useState(false, _h$2);
+	const update = () => {
+		const anchor = props.anchorView;
+		const coordinateRoot = anchor?.page?.content;
+		if (!anchor?.getLocationRelativeTo || !coordinateRoot?.getActualSize) return;
+		const point = anchor.getLocationRelativeTo(coordinateRoot);
+		const anchorSize = anchor.getActualSize();
+		const panelSize = panelRef.current?.getActualSize?.();
+		if (!point || !anchorSize) return;
+		const next = positionPopover({
+			left: point.x,
+			top: point.y,
+			width: anchorSize.width,
+			height: anchorSize.height
+		}, {
+			width: panelSize?.width ?? 0,
+			height: panelSize?.height ?? 0
+		}, {
+			left: 0,
+			top: 0,
+			width: coordinateRoot.getActualSize().width,
+			height: coordinateRoot.getActualSize().height
+		}, props.placement ?? "bottom");
+		setPosition((current) => current?.left === next.left && current?.top === next.top && current?.placement === next.placement ? current : next);
+		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
+	};
+	useEffect(() => {
+		const anchor = props.anchorView;
+		if (!props.open || !anchor) return;
+		const listeners = [];
+		let view = anchor;
+		while (view) {
+			for (const event of ["layoutChanged", "scroll"]) {
+				const handler = () => update();
+				view.on?.(event, handler);
+				listeners.push({
+					view,
+					event,
+					handler
+				});
+			}
+			view = view.parent;
+		}
+		update();
+		return () => {
+			for (const listener of listeners) listener.view.off?.(listener.event, listener.handler);
+		};
+	}, [
+		props.open,
+		props.anchorView,
+		props.placement,
+		props.children,
+		props.style
+	], _h$3);
+	useEffect(() => {
+		applyNativeProps(panelRef.current, props);
+	}, [
+		props.ios,
+		props.android,
+		settled
+	], _h$4);
+	const dismiss = () => props.onDismiss?.();
+	return universalValue(__octaneUniversalPlan1, [
+		cx("vx-popover-layer", withSlot(_h$5, useThemeScheme) === "dark" && "ns-dark"),
+		(props.dismissOnOutsideTap ?? true) && universalValue(__octaneUniversalPlan0, ["transparent", dismiss]),
+		panelRef,
+		position?.left ?? 0,
+		position?.top ?? 0,
+		settled ? 1 : 0,
+		cx("vx-popover", props.className),
+		props.style,
+		update,
+		update,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+var Popover = defineUniversalComponent("nativescript", function Popover(props) {
+	const shown = useRef(null, _h$6);
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.open) {
+			if (!cur) return;
+			shown.current = null;
+			cur.unbindTheme?.();
+			const owner = cur.host.parent;
+			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).then(() => cur.root.unmount?.(), (error) => {
+				console.error("[Popover] close failed", error);
+				cur.root.unmount?.();
+			});
+			else cur.root.unmount?.();
+			return;
+		}
+		const anchor = props.anchor?.current;
+		const rl = rootLayoutFor(anchor);
+		if (!anchor || !rl) return;
+		if (cur) {
+			cur.root.render(PopoverLayer, {
+				...props,
+				anchorView: anchor
+			});
+			return;
+		}
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx("vx-popover-host", props.className));
+		host.horizontalAlignment = "stretch";
+		host.verticalAlignment = "stretch";
+		const root = createNativeScriptRoot(host);
+		shown.current = {
+			host,
+			root,
+			unbindTheme
+		};
+		root.render(PopoverLayer, {
+			...props,
+			anchorView: anchor
+		});
+		rl.open(host).catch((error) => {
+			if (shown.current?.host === host) shown.current = null;
+			console.error("[Popover] open failed", error);
+			root.unmount?.();
+		});
+	}, [
+		props.open,
+		props.children,
+		props.placement,
+		props.className,
+		props.style,
+		props.dismissOnOutsideTap
+	], _h$7);
+	return universalValue(__octaneUniversalPlan2, []);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Popover };

package/dist/native/ui39.js

@@ -0,0 +1,105 @@
+import { applyThemeClasses } from "./ui31.js";
+import { topRootLayout } from "./ui34.js";
+import { createNativeScriptRoot, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/toast.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var queue = [];
+var active = null;
+var ToastBody = defineUniversalComponent("nativescript", function ToastBody(props) {
+	return universalValue(__octaneUniversalPlan2, [universalIf(typeof props.content === "string", () => {
+		return universalValue(__octaneUniversalPlan0, [props.content]);
+	}, () => {
+		const Component = props.content;
+		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Component, universalProps([]))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+function finishToast(entry) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const rootLayout = topRootLayout();
+	const finish = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+	if (rootLayout && rootLayout?.hasChild?.(entry.host)) rootLayout.close(entry.host).then(finish, (error) => {
+		console.error("[Toast] close failed", error);
+		finish();
+	});
+	else finish();
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift();
+	const rootLayout = topRootLayout();
+	if (!rootLayout) {
+		console.warn("[Toast] RootLayout is not mounted; toast was skipped");
+		return;
+	}
+	const host = new GridLayout();
+	const unbindTheme = applyThemeClasses(host, "vx-toast-host");
+	host.horizontalAlignment = "stretch";
+	host.verticalAlignment = entry.options.position === "top" ? "top" : "bottom";
+	host.marginTop = entry.options.position === "top" ? 24 : 0;
+	host.marginBottom = entry.options.position === "top" ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : void 0);
+	const root = createNativeScriptRoot(host);
+	const current = {
+		...entry,
+		host,
+		root,
+		timer: null,
+		unbindTheme
+	};
+	active = current;
+	root.render(ToastBody, { content: entry.content });
+	const open = () => {
+		rootLayout.open(host).then(() => {
+			if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
+		}, (error) => {
+			console.error("[Toast] open failed", error);
+			root.unmount?.();
+			if (active === current) active = null;
+			showNext();
+		});
+	};
+	if (rootLayout.hasChild?.(host)) rootLayout.close(host).then(open, (error) => {
+		console.error("[Toast] stale host close failed", error);
+		if (active === current) active = null;
+		showNext();
+	});
+	else open();
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
+}
+//#endregion
+export { showToast };

package/dist/native/ui4.js

@@ -1,49 +1,24 @@
-import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
-//#region src/Text.native.tsrx
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "span",
-	"bindings": [["className", 0], ["style", 1]],
-	"children": [{
-		"kind": "slot",
-		"slot": 2
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "label",
-	"bindings": [["className", 0], ["style", 1]],
-	"children": [{
-		"kind": "slot",
-		"slot": 2
-	}]
-});
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-var InText = createContext(false);
-var TextScope = defineUniversalComponent("nativescript", function TextScope(props) {
-	return InText({
-		value: true,
-		children: props.children
-	});
-}, { "module": "@nativescript-community/octane" });
-var Text = defineUniversalComponent("nativescript", function Text(props) {
-	const inText = useContext(InText);
-	return universalValue(__octaneUniversalPlan2, [universalIf(inText, () => {
-		return universalValue(__octaneUniversalPlan0, [
-			props.className,
-			props.style,
-			props.children
-		]);
-	}, () => {
-		return universalValue(__octaneUniversalPlan1, [
-			props.className,
-			props.style,
-			universalComponent("nativescript", TextScope, universalProps([], props.children))
-		]);
-	})]);
-}, { "module": "@nativescript-community/octane" });
+//#region src/glass.ts
+/** Normalize the `glass` surface prop into the config object handed to
+*  `iosGlassEffect` on native. Always returns an object — the upstream
+*  string shorthand silently drops `interactive` on the layout's update
+*  path, and an empty config defaults the variant to 'regular' here rather
+*  than upstream's own fallback. `false`/'none'/'identity' → no glass. */
+function glassConfigOf(glass) {
+	if (!glass || glass === "none" || glass === "identity") return;
+	const c = typeof glass === "string" ? { variant: glass } : glass === true ? {} : glass;
+	if (c.variant === "none" || c.variant === "identity") return;
+	return {
+		variant: "regular",
+		...c
+	};
+}
+/** `vx-glass` classes shared by web (real styling) and native (hook for
+*  app-supplied fallback CSS on non-glass OSes). */
+function glassClassOf(glass) {
+	const c = glassConfigOf(glass);
+	if (!c) return;
+	return c.variant === "clear" ? "vx-glass vx-glass--clear" : "vx-glass";
+}
 //#endregion
-export { Text };
+export { glassClassOf, glassConfigOf };

package/dist/native/ui40.js

@@ -0,0 +1,58 @@
+import { hookSlots, useRef } from "@nativescript-community/octane";
+import { cancelAnimationFrame, requestAnimationFrame } from "@nativescript/core/animation-frame";
+//#region src/anim.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function createAnimated(initial, prop) {
+	let view = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v) => {
+		current = v;
+		if (view) view[prop] = v;
+	};
+	const run = (step) => {
+		cancelAnimationFrame(raf);
+		const start = Date.now();
+		const tick = () => {
+			const v = step(Date.now() - start);
+			if (v === null) return;
+			apply(v);
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+	};
+	return {
+		get value() {
+			return current;
+		},
+		bind(v) {
+			view = v;
+			if (view) view[prop] = current;
+		},
+		to(target, opts) {
+			const dur = opts?.duration ?? 300;
+			const from = current;
+			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
+		},
+		spring(target, opts) {
+			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
+			let v = 0, x = current;
+			run(() => {
+				const dt = 1 / 60;
+				v += (-stiffness * (x - target) - damping * v) * dt;
+				x += v * dt;
+				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
+			});
+		},
+		stop() {
+			cancelAnimationFrame(raf);
+		}
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
+}
+//#endregion
+export { useAnimation };

package/dist/native/ui41.js

@@ -0,0 +1,19 @@
+import "@nativescript-community/octane";
+import { defineUniversalComponent as defineUniversalComponent$1, universalComponent as universalComponent$1 } from "octane/universal/native";
+//#region src/styled.native.tsrx
+function styled(Base, def) {
+	function Styled(props) {
+		const cls = [def.base];
+		const rest = { ...props };
+		for (const k of Object.keys(def.variants ?? {})) {
+			if (props[k]) cls.push(def.variants[k]);
+			delete rest[k];
+		}
+		if (props.className) cls.push(props.className);
+		rest.className = cls;
+		return universalComponent$1("nativescript", Base, rest);
+	}
+	return defineUniversalComponent$1("nativescript", Styled);
+}
+//#endregion
+export { styled };

package/dist/native/ui42.js

@@ -0,0 +1,8 @@
+import { Application } from "@nativescript/core";
+//#region src/windows.native.ts
+/** Open another NativeScript window and pass app-owned data to its resolver. */
+function openWindow(options = {}) {
+	Application.openWindow(options);
+}
+//#endregion
+export { openWindow };

package/dist/native/ui43.js

@@ -0,0 +1,38 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { registerRootLayout, unregisterRootLayout } from "./ui34.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Screen.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "rootlayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["onLoaded", 2],
+		["onUnloaded", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["className", 4], ["style", 5]],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+var Screen = defineUniversalComponent("nativescript", function Screen(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(v) => applyEscapeProps(v, props),
+		(e) => registerRootLayout(e.object),
+		(e) => unregisterRootLayout(e.object),
+		cx(props.className),
+		props.style,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Screen };