@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/native/ui58.js

@@ -1,22 +1,156 @@
-//#region src/store.ts
-function createStore(initial) {
-	let value = initial;
-	const listeners = /* @__PURE__ */ new Set();
-	return {
-		get: () => value,
-		set(next) {
-			const v = typeof next === "function" ? next(value) : next;
-			if (Object.is(v, value)) return;
-			value = v;
-			for (const l of [...listeners]) l();
-		},
-		subscribe(notify) {
-			listeners.add(notify);
-			return () => {
-				listeners.delete(notify);
-			};
-		}
-	};
-}
+import { cx } from "./ui2.js";
+import { glyphSvgMarkup, isSvgSrc, svgSource } from "./ui28.js";
+import { applyNativeProps } from "./ui36.js";
+import { getIcon } from "./ui57.js";
+import { defineUniversalComponent, universalIf, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Icon.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "svgview",
+	"props": { "stretch": "aspectFit" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["text", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "svgview",
+	"props": { "stretch": "aspectFit" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "image",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["text", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Icon = defineUniversalComponent("nativescript", function Icon(props) {
+	const glyph = getIcon(props.name);
+	if (!glyph) return null;
+	const size = props.size ?? 24;
+	const markup = glyphSvgMarkup(glyph, props.color);
+	return universalValue(__octaneUniversalPlan9, [universalIf(markup, () => {
+		return universalValue(__octaneUniversalPlan0, [
+			props.id,
+			cx(props.className),
+			markup,
+			{
+				width: size,
+				height: size
+			},
+			(el) => applyNativeProps(el, props)
+		]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan8, [universalIf(glyph.font, () => {
+			return universalValue(__octaneUniversalPlan1, [
+				props.id,
+				cx(props.className),
+				glyph.font.glyph,
+				{
+					fontFamily: glyph.font.family,
+					fontSize: size,
+					color: props.color
+				},
+				(el) => applyNativeProps(el, props)
+			]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan7, [universalIf(glyph.src, () => {
+				return universalValue(__octaneUniversalPlan4, [universalIf(isSvgSrc(glyph.src), () => {
+					return universalValue(__octaneUniversalPlan2, [
+						props.id,
+						cx(props.className),
+						svgSource(glyph.src),
+						{
+							width: size,
+							height: size
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				}, () => {
+					return universalValue(__octaneUniversalPlan3, [
+						props.id,
+						cx(props.className),
+						glyph.src,
+						{
+							width: size,
+							height: size
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				})]);
+			}, () => {
+				return universalValue(__octaneUniversalPlan6, [universalIf(glyph.text, () => {
+					return universalValue(__octaneUniversalPlan5, [
+						props.id,
+						cx(props.className),
+						glyph.text,
+						{
+							fontSize: size,
+							color: props.color
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				})]);
+			})]);
+		})]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { createStore };
+export { Icon };

package/dist/native/ui59.js

@@ -1,8 +1,33 @@
-import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
-//#region src/use-store.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function useStore(store, select) {
-	return useSyncExternalStore(store.subscribe, select === void 0 ? store.get : () => select(store.get()), _h$0);
-}
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { AccessibilityRole } from "@nativescript/core";
+//#region src/Heading.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessibilityRole", 3],
+		["ref", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var Heading = defineUniversalComponent("nativescript", function Heading(props) {
+	const level = props.level ?? 2;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(`vx-h${level}`, props.className),
+		props.style,
+		AccessibilityRole.Header,
+		(el) => applyNativeProps(el, props),
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { useStore };
+export { Heading };

package/dist/native/ui6.js

@@ -2,9 +2,12 @@ import { cx } from "./ui2.js";
 import { applyEscapeProps } from "./ui3.js";
 import { glassClassOf, glassConfigOf } from "./ui4.js";
 import { layoutChildProps } from "./ui5.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useRef } from "@nativescript-community/octane";
+import { Utils } from "@nativescript/core";
 //#region src/View.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
@@ -20,17 +23,56 @@ var PAN_STATE = [
 	"moved",
 	"ended"
 ];
-var View = defineUniversalComponent("nativescript", function View(props) {
-	const onPan = useCallback((e) => props.onPan?.({
-		x: e.deltaX,
-		y: e.deltaY,
-		dx: e.deltaX,
-		dy: e.deltaY,
+function panVelocity(e, state, trackerRef) {
+	const recognizer = e.ios;
+	const nativeView = e.view?.nativeViewProtected;
+	if (recognizer?.velocityInView && nativeView) {
+		const velocity = recognizer.velocityInView(nativeView);
+		return {
+			vx: velocity.x,
+			vy: velocity.y
+		};
+	}
+	const motionEvent = e.android?.current;
+	const velocityTrackerClass = globalThis.android?.view?.VelocityTracker;
+	if (!motionEvent || !velocityTrackerClass) return {
 		vx: 0,
-		vy: 0,
-		state: PAN_STATE[e.state] ?? "moved",
-		target: e.view ?? e.object
-	}), [props.onPan], _h$0);
+		vy: 0
+	};
+	if (state === 1 || !trackerRef.current) {
+		trackerRef.current?.recycle?.();
+		trackerRef.current = velocityTrackerClass.obtain();
+	}
+	const tracker = trackerRef.current;
+	tracker.addMovement(motionEvent);
+	tracker.computeCurrentVelocity(1e3);
+	const density = Utils.layout.getDisplayDensity();
+	const velocity = {
+		vx: tracker.getXVelocity() / density,
+		vy: tracker.getYVelocity() / density
+	};
+	if (state === 0 || state === 3) {
+		tracker.recycle?.();
+		trackerRef.current = null;
+	}
+	return velocity;
+}
+var View = defineUniversalComponent("nativescript", function View(props) {
+	const velocityTracker = useRef(null, _h$0);
+	const onPan = useCallback((e) => {
+		const state = PAN_STATE[e.state] ?? "moved";
+		const velocity = panVelocity(e, e.state, velocityTracker);
+		props.onPan?.({
+			x: e.deltaX,
+			y: e.deltaY,
+			dx: e.deltaX,
+			dy: e.deltaY,
+			vx: velocity.vx,
+			vy: velocity.vy,
+			state,
+			target: e.view ?? e.object
+		});
+	}, [props.onPan], _h$1);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",

package/dist/native/ui60.js

@@ -1,108 +1,14 @@
 import { cx } from "./ui2.js";
-import { applyThemeClasses } from "./ui31.js";
-import { rootLayoutFor } from "./ui34.js";
-import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
-//#region src/Sheet.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(3);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/PlatformBadge.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "stacklayout",
-	"bindings": [["ref", 0], ["style", 1]]
+	"type": "label",
+	"props": { "text": "ios|android" },
+	"bindings": [["className", 0]]
 });
-var SheetBody = defineUniversalComponent("nativescript", function SheetBody(props) {
-	return universalValue(__octaneUniversalPlan0, [props.children]);
-}, { "module": "@nativescript-community/octane" });
-var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
-	const sentinel = useRef(null, _h$0);
-	const shown = useRef(null, _h$1);
-	useEffect(() => {
-		const cur = shown.current;
-		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.programmatic = true;
-			cur.unbindTheme?.();
-			cur.root.unmount?.();
-			const owner = cur.host.parent;
-			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).catch((error) => {
-				console.error("[Sheet] close failed", error);
-			});
-			return;
-		}
-		const rl = rootLayoutFor(sentinel.current);
-		if (!rl) return;
-		if (cur) {
-			cur.root.render(SheetBody, { children: props.children });
-			return;
-		}
-		const host = new GridLayout();
-		const unbindTheme = applyThemeClasses(host, cx("vx-sheet-host", props.className));
-		host.horizontalAlignment = "stretch";
-		host.verticalAlignment = "bottom";
-		if (props.style) Object.assign(host.style, props.style);
-		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
-		const root = createNativeScriptRoot(host);
-		const opened = {
-			host,
-			root,
-			unbindTheme,
-			programmatic: false
-		};
-		shown.current = opened;
-		root.render(SheetBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			if (!opened.programmatic) props.onDismiss?.();
-		});
-		rl.open(host, {
-			...props.shadeCover ?? true ? { shadeCover: {
-				opacity: .4,
-				tapToClose: true
-			} } : {},
-			animation: {
-				enterFrom: {
-					translateY: 400,
-					duration: 250
-				},
-				exitTo: {
-					translateY: 400,
-					duration: 200
-				}
-			}
-		}).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			console.error("[Sheet] open failed", error);
-		});
-	}, [
-		props.open,
-		props.children,
-		props.className,
-		props.style,
-		props.shadeCover,
-		props.ios,
-		props.android
-	], _h$2);
-	return universalValue(__octaneUniversalPlan1, [(v) => {
-		sentinel.current = v;
-	}, {
-		width: 0,
-		height: 0
-	}]);
+var PlatformBadge = defineUniversalComponent("nativescript", function PlatformBadge(props) {
+	return universalValue(__octaneUniversalPlan0, [cx(props.className)]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Sheet };
+export { PlatformBadge };

package/dist/native/ui61.js

@@ -1,76 +1,22 @@
-import { applyThemeClasses } from "./ui31.js";
-import { topRootLayout } from "./ui34.js";
-import { createNativeScriptRoot } from "@nativescript-community/octane";
-import { GridLayout } from "@nativescript/core";
-//#region src/sheet-service.native.ts
-var active = /* @__PURE__ */ new Set();
-/** The most recently opened sheet's host view — for harness asserts (view
-*  identity beats tree search; the owning rootlayout may unload/reload). */
-function sheetHost() {
-	return [...active].pop()?.host ?? null;
-}
-/** Close the most recently opened sheet (resolve with `result`). */
-function closeSheet(result) {
-	[...active].pop()?.finish(result);
-}
-/** Imperative in-window sheet: a dedicated Octane root on a bottom-docked
-*  GridLayout host opened on the CURRENT rootlayout (topRootLayout — the
-*  service has no declaring view). Resolves when the sheet closes. */
-var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
-	const rl = topRootLayout();
-	if (!rl) {
-		console.warn("[openSheet] no RootLayout mounted — sheet skipped");
-		resolve(void 0);
-		return;
-	}
-	const host = new GridLayout();
-	const unbindTheme = applyThemeClasses(host, "vx-sheet-host");
-	host.horizontalAlignment = "stretch";
-	host.verticalAlignment = "bottom";
-	const root = createNativeScriptRoot(host);
-	let finished = false;
-	const finish = (result) => {
-		if (finished) return;
-		finished = true;
-		active.delete(entry);
-		unbindTheme();
-		root.unmount?.();
-		const owner = host.parent;
-		if (owner?.hasChild?.(host)) owner.close(host).catch((error) => {
-			console.error("[openSheet] close failed", error);
-		});
-		resolve(result);
-	};
-	const entry = {
-		host,
-		root,
-		finish
-	};
-	host.on("closed", () => finish());
-	root.render(Component, {
-		params,
-		close: finish
-	});
-	active.add(entry);
-	rl.open(host, {
-		...options.shadeCover ?? true ? { shadeCover: {
-			opacity: .4,
-			tapToClose: true
-		} } : {},
-		animation: {
-			enterFrom: {
-				translateY: 400,
-				duration: 250
-			},
-			exitTo: {
-				translateY: 400,
-				duration: 200
-			}
+//#region src/store.ts
+function createStore(initial) {
+	let value = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => value,
+		set(next) {
+			const v = typeof next === "function" ? next(value) : next;
+			if (Object.is(v, value)) return;
+			value = v;
+			for (const l of [...listeners]) l();
+		},
+		subscribe(notify) {
+			listeners.add(notify);
+			return () => {
+				listeners.delete(notify);
+			};
 		}
-	}).catch((error) => {
-		console.error("[openSheet] open failed", error);
-		finish();
-	});
-});
+	};
+}
 //#endregion
-export { closeSheet, openSheet, sheetHost };
+export { createStore };

package/dist/native/ui62.js

@@ -0,0 +1,8 @@
+import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
+//#region src/use-store.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useStore(store, select) {
+	return useSyncExternalStore(store.subscribe, select === void 0 ? store.get : () => select(store.get()), _h$0);
+}
+//#endregion
+export { useStore };

package/dist/native/ui63.js

@@ -0,0 +1,108 @@
+import { cx } from "./ui2.js";
+import { applyThemeClasses } from "./ui31.js";
+import { rootLayoutFor } from "./ui34.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/Sheet.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "stacklayout",
+	"bindings": [["ref", 0], ["style", 1]]
+});
+var SheetBody = defineUniversalComponent("nativescript", function SheetBody(props) {
+	return universalValue(__octaneUniversalPlan0, [props.children]);
+}, { "module": "@nativescript-community/octane" });
+var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
+	const sentinel = useRef(null, _h$0);
+	const shown = useRef(null, _h$1);
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.open) {
+			if (!cur) return;
+			shown.current = null;
+			cur.programmatic = true;
+			cur.unbindTheme?.();
+			cur.root.unmount?.();
+			const owner = cur.host.parent;
+			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).catch((error) => {
+				console.error("[Sheet] close failed", error);
+			});
+			return;
+		}
+		const rl = rootLayoutFor(sentinel.current);
+		if (!rl) return;
+		if (cur) {
+			cur.root.render(SheetBody, { children: props.children });
+			return;
+		}
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx("vx-sheet-host", props.className));
+		host.horizontalAlignment = "stretch";
+		host.verticalAlignment = "bottom";
+		if (props.style) Object.assign(host.style, props.style);
+		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
+		const root = createNativeScriptRoot(host);
+		const opened = {
+			host,
+			root,
+			unbindTheme,
+			programmatic: false
+		};
+		shown.current = opened;
+		root.render(SheetBody, { children: props.children });
+		host.on("closed", () => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			opened.root.unmount?.();
+			if (!opened.programmatic) props.onDismiss?.();
+		});
+		rl.open(host, {
+			...props.shadeCover ?? true ? { shadeCover: {
+				opacity: .4,
+				tapToClose: true
+			} } : {},
+			animation: {
+				enterFrom: {
+					translateY: 400,
+					duration: 250
+				},
+				exitTo: {
+					translateY: 400,
+					duration: 200
+				}
+			}
+		}).catch((error) => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			opened.root.unmount?.();
+			console.error("[Sheet] open failed", error);
+		});
+	}, [
+		props.open,
+		props.children,
+		props.className,
+		props.style,
+		props.shadeCover,
+		props.ios,
+		props.android
+	], _h$2);
+	return universalValue(__octaneUniversalPlan1, [(v) => {
+		sentinel.current = v;
+	}, {
+		width: 0,
+		height: 0
+	}]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Sheet };