@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/native/ui51.js

@@ -1,13 +1,66 @@
-//#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
-	};
-}
+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 { meterRange };
+export { Drawer$1 as Drawer };

package/dist/native/ui52.js

@@ -1,92 +1,64 @@
-import { cx } from "./ui2.js";
-import { meterRange } from "./ui51.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);
+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 __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);
+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(() => {
-		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);
+		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
 	};
-	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 };
+export { useMeasure };

package/dist/native/ui53.js

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

package/dist/native/ui54.js

@@ -1,17 +1,13 @@
-//#region src/icons.ts
-/**
-* App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
-* markup string). Native `font` glyphs render only when the app ships 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);
+//#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 { getIcon, registerIcon, registerIcons };
+export { meterRange };

package/dist/native/ui55.js

@@ -1,156 +1,92 @@
 import { cx } from "./ui2.js";
-import { glyphSvgMarkup, isSvgSrc, svgSource } from "./ui28.js";
-import { applyNativeProps } from "./ui36.js";
-import { getIcon } from "./ui54.js";
-import { defineUniversalComponent, universalIf, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Icon.native.tsrx
+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": "svgview",
-	"props": { "stretch": "aspectFit" },
+	"type": "canvasview",
+	"props": { "accessible": true },
 	"bindings": [
 		["id", 0],
-		["className", 1],
-		["src", 2],
+		["ref", 1],
+		["className", 2],
 		["style", 3],
-		["ref", 4]
-	]
+		["onDraw", 4],
+		["accessibilityRole", 5],
+		["accessibilityLabel", 6],
+		["accessibilityValue", 7]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"horizontalAlignment": "center",
+			"verticalAlignment": "middle"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 8
+		}]
+	}]
 });
-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;
+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 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)
-					]);
-				})]);
-			})]);
-		})]);
-	})]);
+	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 { Icon };
+export { Meter };

package/dist/native/ui56.js

@@ -1,33 +1,34 @@
 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
+//#region src/Slider.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "label",
+	"type": "slider",
 	"bindings": [
 		["id", 0],
 		["className", 1],
 		["style", 2],
-		["accessibilityRole", 3],
-		["ref", 4]
-	],
-	"children": [{
-		"kind": "slot",
-		"slot": 5
-	}]
+		["value", 3],
+		["minValue", 4],
+		["maxValue", 5],
+		["isEnabled", 6],
+		["onValueChange", 7],
+		["ref", 8]
+	]
 });
-var Heading = defineUniversalComponent("nativescript", function Heading(props) {
-	const level = props.level ?? 2;
+var Slider = defineUniversalComponent("nativescript", function Slider(props) {
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		cx(`vx-h${level}`, props.className),
+		cx(props.className),
 		props.style,
-		AccessibilityRole.Header,
-		(el) => applyNativeProps(el, props),
-		props.children
+		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 { Heading };
+export { Slider };

package/dist/native/ui57.js

@@ -1,14 +1,19 @@
-import { cx } from "./ui2.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/PlatformBadge.native.tsrx
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "label",
-	"props": { "text": "ios|android" },
-	"bindings": [["className", 0]]
-});
-var PlatformBadge = defineUniversalComponent("nativescript", function PlatformBadge(props) {
-	return universalValue(__octaneUniversalPlan0, [cx(props.className)]);
-}, { "module": "@nativescript-community/octane" });
+//#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 { PlatformBadge };
+export { getIcon, registerIcon, registerIcons };