@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/native/ui5.js

@@ -1,78 +1,38 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { layoutChildProps } from "./ui4.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback } from "@nativescript-community/octane";
-//#region src/View.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "flexboxlayout",
-	"propsSlot": 0,
-	"children": [{
-		"kind": "slot",
-		"slot": 1
-	}]
-});
-var PAN_STATE = [
-	"cancelled",
-	"began",
-	"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,
-		vx: 0,
-		vy: 0,
-		state: PAN_STATE[e.state] ?? "moved",
-		target: e.view ?? e.object
-	}), [props.onPan], _h$0);
-	return universalValue(__octaneUniversalPlan0, [universalProps([
-		[
-			"set",
-			"id",
-			props.id
-		],
-		["spread", layoutChildProps(props)],
-		[
-			"set",
-			"ref",
-			(v) => {
-				if (v) {
-					applyEscapeProps(v, props);
-					props.bind?.(v);
-				}
-			}
-		],
-		[
-			"set",
-			"flexDirection",
-			"column"
-		],
-		[
-			"set",
-			"className",
-			cx(props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		[
-			"set",
-			"onPan",
-			props.onPan ? onPan : void 0
-		],
-		[
-			"set",
-			"onSwipe",
-			props.onSwipe
-		]
-	]), props.children]);
-}, { "module": "@nativescript-community/octane" });
+//#region src/layout-child.native.ts
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** NativeScript reads these attributes from each child view during parent
+*  layout. Values are forwarded with NativeScript's own property names.
+*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
+*  the host flexboxlayout itself — its own attributes, not child metadata. */
+function layoutChildProps(props) {
+	const result = {};
+	for (const key of [
+		"row",
+		"col",
+		"rowSpan",
+		"colSpan",
+		"dock",
+		"left",
+		"top",
+		"flexGrow",
+		"flexShrink",
+		"alignSelf",
+		"order"
+	]) if (props[key] !== void 0) result[key] = props[key];
+	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) result.gap = props.gap;
+	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
+	return result;
+}
 //#endregion
-export { View };
+export { layoutChildProps };

package/dist/native/ui50.js

@@ -0,0 +1,72 @@
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useState, withSlot } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/KeyboardAvoiding.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "scrollview",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["ref", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["style", 4]],
+		"children": [{
+			"kind": "slot",
+			"slot": 5
+		}]
+	}]
+});
+function useKeyboardInset() {
+	const [inset, setInset] = useState(0, _h$0);
+	useEffect(() => {
+		if (!Application.ios) return;
+		const center = NSNotificationCenter.defaultCenter;
+		const token = center.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
+			const frame = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
+			const screenHeight = UIScreen.mainScreen.bounds.size.height;
+			setInset(Math.max(0, screenHeight - frame.origin.y));
+		});
+		return () => center.removeObserver(token);
+	}, [], _h$1);
+	return inset;
+}
+function useAndroidResize() {
+	useEffect(() => {
+		const nativeWindow = Application.android?.foregroundActivity?.window;
+		if (!nativeWindow) return;
+		const params = android.view.WindowManager.LayoutParams;
+		const previous = nativeWindow.attributes.softInputMode;
+		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
+		nativeWindow.setSoftInputMode(adjusted);
+		return () => nativeWindow.setSoftInputMode(previous);
+	}, [], _h$2);
+}
+var KeyboardAvoiding = defineUniversalComponent("nativescript", function KeyboardAvoiding(props) {
+	const keyboardInset = withSlot(_h$3, useKeyboardInset);
+	withSlot(_h$4, useAndroidResize);
+	const platformProps = Application.ios != null ? props.ios : props.android;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx("vx-keyboard-avoiding", props.className),
+		props.style,
+		(host) => {
+			if (host && platformProps) Object.assign(host, platformProps);
+		},
+		keyboardInset ? { paddingBottom: keyboardInset } : void 0,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { KeyboardAvoiding };

package/dist/native/ui51.js

@@ -0,0 +1,66 @@
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalIf, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+import { Drawer, install } from "@nativescript-community/ui-drawer";
+//#region src/Drawer.native.tsrx
+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": "gridlayout",
+	"props": { "hostSlot": "leftDrawer" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "drawer",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": { "hostSlot": "mainContent" },
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+install();
+registerElement("drawer", Drawer);
+var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
+	const host = useRef(null, _h$0);
+	const platformProps = Application.ios != null ? props.ios : props.android;
+	useEffect(() => {
+		const d = host.current;
+		if (!d) return;
+		if (props.open && !d.isOpened("left")) d.open("left").catch(() => {});
+		else if (!props.open && d.isOpened("left")) d.close("left").catch(() => {});
+	}, [props.open], _h$1);
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		(d) => {
+			host.current = d;
+			if (d && platformProps) Object.assign(d, platformProps);
+		},
+		cx("vx-drawer", props.className),
+		props.style,
+		props.main,
+		universalIf(props.drawer != null, () => {
+			return universalValue(__octaneUniversalPlan0, [props.drawer]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/native/ui52.js

@@ -0,0 +1,64 @@
+import { hookSlots, useCallback, useEffect, useState } from "@nativescript-community/octane";
+//#region src/useMeasure.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+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);
+function readBounds(view) {
+	const point = view?.getLocationOnScreen?.();
+	const size = view?.getActualSize?.();
+	if (!point || !size) return null;
+	return {
+		x: point.x,
+		y: point.y,
+		width: size.width,
+		height: size.height
+	};
+}
+function useMeasure(options = {}) {
+	const [view, setView] = useState(null, _h$0);
+	const [bounds, setBounds] = useState(null, _h$1);
+	const observe = options.observe ?? true;
+	const bind = useCallback((next) => {
+		setView((current) => current === next ? current : next);
+	}, [], _h$2);
+	useEffect(() => {
+		if (!view) {
+			setBounds(null);
+			return;
+		}
+		const update = () => {
+			const next = readBounds(view);
+			if (next) setBounds(next);
+		};
+		const onLoaded = update;
+		view.on?.("loaded", onLoaded);
+		update();
+		if (observe) {
+			view.on?.("layoutChanged", update);
+			let parent = view.parent;
+			while (parent) {
+				parent.on?.("scroll", update);
+				parent = parent.parent;
+			}
+		}
+		return () => {
+			view.off?.("loaded", onLoaded);
+			if (observe) {
+				view.off?.("layoutChanged", update);
+				let parent = view.parent;
+				while (parent) {
+					parent.off?.("scroll", update);
+					parent = parent.parent;
+				}
+			}
+		};
+	}, [view, observe], _h$3);
+	return {
+		bind,
+		bounds
+	};
+}
+//#endregion
+export { useMeasure };

package/dist/native/ui53.js

@@ -0,0 +1,27 @@
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/ActivityIndicator.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "activityindicator",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["busy", 3],
+		["ref", 4]
+	]
+});
+var ActivityIndicator = defineUniversalComponent("nativescript", function ActivityIndicator(props) {
+	if (props.busy === false) return null;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.busy ?? true,
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ActivityIndicator };

package/dist/native/ui54.js

@@ -0,0 +1,13 @@
+//#region src/meter-math.ts
+/** Clamp a progress value to its declared range for drawing and accessibility. */
+function meterRange(value, max) {
+	const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+	const safeValue = Number.isFinite(value) ? Math.min(safeMax, Math.max(0, value)) : 0;
+	return {
+		max: safeMax,
+		value: safeValue,
+		ratio: safeValue / safeMax
+	};
+}
+//#endregion
+export { meterRange };

package/dist/native/ui55.js

@@ -0,0 +1,92 @@
+import { cx } from "./ui2.js";
+import { meterRange } from "./ui54.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { AccessibilityRole } from "@nativescript/core";
+import { CanvasView, Cap, Paint, Style } from "@nativescript-community/ui-canvas";
+//#region src/Meter.native.tsrx
+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": "canvasview",
+	"props": { "accessible": true },
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["onDraw", 4],
+		["accessibilityRole", 5],
+		["accessibilityLabel", 6],
+		["accessibilityValue", 7]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"horizontalAlignment": "center",
+			"verticalAlignment": "middle"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 8
+		}]
+	}]
+});
+registerElement("canvasview", CanvasView);
+var Meter = defineUniversalComponent("nativescript", function Meter(props) {
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? "#3376cc";
+	const trackColor = props.trackColor ?? "#e1ecf7";
+	const canvasRef = useRef(null, _h$0);
+	useEffect(() => {
+		canvasRef.current?.invalidate();
+	}, [
+		value,
+		rangeMax,
+		strokeWidth,
+		color,
+		trackColor
+	], _h$1);
+	const draw = (event) => {
+		const canvas = event.canvas;
+		const width = canvas.getWidth();
+		const height = canvas.getHeight();
+		const diameter = Math.max(0, Math.min(width, height) - strokeWidth);
+		const left = (width - diameter) / 2;
+		const top = (height - diameter) / 2;
+		const right = left + diameter;
+		const bottom = top + diameter;
+		const paint = new Paint();
+		paint.style = Style.STROKE;
+		paint.strokeCap = Cap.ROUND;
+		paint.strokeWidth = strokeWidth;
+		paint.setColor(trackColor);
+		canvas.drawArc(left, top, right, bottom, -90, 360, false, paint);
+		if (ratio > 0) {
+			paint.setColor(color);
+			canvas.drawArc(left, top, right, bottom, -90, ratio * 360, false, paint);
+		}
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		canvasRef,
+		cx("vx-meter", props.className),
+		{
+			width: size,
+			height: size,
+			...props.style
+		},
+		draw,
+		AccessibilityRole.ProgressBar,
+		props.accessibilityLabel,
+		`${value} of ${rangeMax}`,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Meter };

package/dist/native/ui56.js

@@ -0,0 +1,34 @@
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Slider.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "slider",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["value", 3],
+		["minValue", 4],
+		["maxValue", 5],
+		["isEnabled", 6],
+		["onValueChange", 7],
+		["ref", 8]
+	]
+});
+var Slider = defineUniversalComponent("nativescript", function Slider(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.value,
+		props.minValue ?? 0,
+		props.maxValue ?? 100,
+		props.disabled ? false : true,
+		(e) => props.onValueChange?.(e.value),
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Slider };

package/dist/native/ui57.js

@@ -0,0 +1,19 @@
+//#region src/icons.ts
+/**
+* App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
+* markup string). `src` can carry an image or an SVG source; the leaves only
+* infer SVG from inline markup, SVG data URIs, and `.svg` paths/URLs. Native
+* `font` glyphs render only when the app ships and registers that font.
+*/
+var icons = /* @__PURE__ */ new Map();
+function registerIcon(name, glyph) {
+	icons.set(name, glyph);
+}
+function registerIcons(record) {
+	for (const [name, glyph] of Object.entries(record)) icons.set(name, glyph);
+}
+function getIcon(name) {
+	return icons.get(name);
+}
+//#endregion
+export { getIcon, registerIcon, registerIcons };

package/dist/native/ui58.js

@@ -0,0 +1,156 @@
+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 { Icon };