@octane-xplat/ui 0.5.0 → 0.6.0

package/dist/native/Table.native.tsrx.js

@@ -0,0 +1,103 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, universalFor, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Table.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-table-cell vx-table-th" },
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"bindings": [["text", 1]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-table-empty" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-table-cell" },
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [["className", 0], ["onTap", 1]],
+	"children": [{
+		"kind": "slot",
+		"slot": 2
+	}]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-table-head" },
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var Table = defineUniversalComponent("nativescript", function Table(props) {
+	const cellStyle = (col) => ({
+		...col.width != null ? { width: col.width } : { flexGrow: 1 },
+		...col.align ? { textAlignment: col.align } : {}
+	});
+	return universalValue(__octaneUniversalPlan6, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-table", props.className),
+		props.style,
+		universalFor(props.columns, (col, __octaneUniversalIndex) => col.key, (col, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan0, [cellStyle(col), col.label ?? col.key]);
+		}),
+		props.rows.length === 0 && props.empty != null ? universalValue(__octaneUniversalPlan1, [props.empty]) : universalValue(__octaneUniversalPlan5, [universalFor(props.rows.map((row, ri) => ({
+			row,
+			ri
+		})), (e, __octaneUniversalIndex$) => props.keyFor ? props.keyFor(e.row, e.ri) : String(e.ri), (e, __octaneUniversalIndex$) => {
+			return universalValue(__octaneUniversalPlan4, [
+				cx("vx-table-row", props.onRowPress && "vx-table-row--pressable"),
+				props.onRowPress ? () => props.onRowPress(e.row, e.ri) : void 0,
+				universalFor(props.columns, (col, __octaneUniversalIndex$$) => col.key, (col, __octaneUniversalIndex$$) => {
+					return universalValue(__octaneUniversalPlan3, [cellStyle(col), props.renderCell ? props.renderCell(e.row, col, e.ri) : universalValue(__octaneUniversalPlan2, [String(e.row[col.key] ?? "")])]);
+				})
+			]);
+		})])
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Table };

package/dist/native/Tabs.native.tsrx.js

@@ -0,0 +1,163 @@
+import { cx } from "./cx.js";
+import { Text } from "./Text.native.tsrx.js";
+import { Pressable } from "./Pressable.native.tsrx.js";
+import { Icon } from "./Icon.native.tsrx.js";
+import { RouteHost } from "./RouteHost.native.tsrx.js";
+import { layoutsForRoute, screenFor, useRoute } from "./route.native.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalFor, universalIf, universalPlan, universalProps, universalValue, useState, withSlot } from "@nativescript-community/octane";
+//#region src/Tabs.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": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "rows": "auto,*" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"row": 0,
+			"className": "vx-tabbar"
+		},
+		"bindings": [["columns", 3]],
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "host",
+		"type": "gridlayout",
+		"props": { "row": 1 },
+		"bindings": [["className", 5]],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+function screenParams(route) {
+	const params = {
+		...route.params,
+		...route.context ?? {},
+		_stack: route.stack,
+		_pushed: true
+	};
+	if (Object.prototype.hasOwnProperty.call(route, "loaderData")) params.data = route.loaderData;
+	if (Object.prototype.hasOwnProperty.call(route, "loaderError")) params.error = route.loaderError;
+	return params;
+}
+var Tabs = defineUniversalComponent("nativescript", function Tabs(props) {
+	const [internal, setInternal] = useState(0, _h$0);
+	const active = props.selectedIndex ?? internal;
+	const tab = props.tabs[active];
+	const route = withSlot(_h$1, useRoute, tab?.stack ?? "");
+	const Screen = route ? screenFor(route.name) : void 0;
+	const columns = props.tabs.map(() => "*").join(",");
+	return universalValue(__octaneUniversalPlan5, [
+		props.id,
+		cx(props.className),
+		props.style,
+		columns,
+		universalFor(props.tabs, (t, i) => t.title, (t, i) => {
+			return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Pressable, universalProps([
+				[
+					"set",
+					"col",
+					i
+				],
+				[
+					"set",
+					"className",
+					cx("vx-tab", active === i ? "active" : "")
+				],
+				[
+					"set",
+					"onPress",
+					() => {
+						setInternal(i);
+						props.onSelectedIndexChanged?.(i);
+					}
+				]
+			], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan1, [universalIf(t.icon, () => {
+					return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([
+						[
+							"set",
+							"name",
+							t.icon
+						],
+						[
+							"set",
+							"className",
+							"vx-tabicon"
+						],
+						[
+							"set",
+							"size",
+							18
+						]
+					]))]);
+				}), universalComponent("nativescript", Text, universalProps([], t.title))]);
+			})))]);
+		}),
+		cx("vx-tabpane", route?.presentation === "fade" ? "vx-route--fade" : ""),
+		universalIf(route && Screen, () => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", RouteHost, universalProps([
+				[
+					"set",
+					"screen",
+					Screen
+				],
+				[
+					"set",
+					"layouts",
+					layoutsForRoute(route.name)
+				],
+				[
+					"set",
+					"params",
+					screenParams(route)
+				]
+			]))]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan4, [tab?.render()]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Tabs };

package/dist/native/{ui14.js → Text.native.tsrx.js}

@@ -1,6 +1,6 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./ui3.js";
-import { layoutChildProps } from "./ui5.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
+import { layoutChildProps } from "./layout-child.native.js";
 import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
 //#region src/Text.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
@@ -36,6 +36,7 @@ var Text = defineUniversalComponent("nativescript", function Text(props) {
 	const inText = useContext(InText);
 	const textStyle = {
 		...props.style,
+		...props.ellipsize || props.numberOfLines ? { flexShrink: 1 } : {},
 		...props.ellipsize ? {
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis"

package/dist/native/{ui24.js → TextArea.native.tsrx.js}

@@ -1,11 +1,13 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { writeText } from "./text-write.native.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { Utils } from "@nativescript/core";
 //#region src/TextArea.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+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": "host",
 	"type": "textview",
@@ -14,16 +16,15 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		["ref", 1],
 		["className", 2],
 		["style", 3],
-		["text", 4],
-		["hint", 5],
-		["keyboardType", 6],
-		["returnKeyType", 7],
-		["editable", 8],
-		["onLoaded", 9],
-		["onTextChange", 10],
-		["onReturnPress", 11],
-		["onFocus", 12],
-		["onBlur", 13]
+		["hint", 4],
+		["keyboardType", 5],
+		["returnKeyType", 6],
+		["editable", 7],
+		["onLoaded", 8],
+		["onTextChange", 9],
+		["onReturnPress", 10],
+		["onFocus", 11],
+		["onBlur", 12]
 	]
 });
 var TextArea = defineUniversalComponent("nativescript", function TextArea(props) {
@@ -51,6 +52,7 @@ var TextArea = defineUniversalComponent("nativescript", function TextArea(props)
 		props.maxRows,
 		props.style
 	], _h$1);
+	useEffect(() => writeText(el.current, props.value), [props.value], _h$2);
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
 		(v) => {
@@ -63,13 +65,12 @@ var TextArea = defineUniversalComponent("nativescript", function TextArea(props)
 				native: v
 			});
 		},
-		cx(props.className),
+		cx("vx-textarea", props.className),
 		{
 			...props.style,
 			...props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}
 		},
-		props.value,
-		props.placeholder ?? props.hint,
+		props.placeholder,
 		props.keyboardType === "default" ? void 0 : props.keyboardType,
 		props.returnKeyType,
 		props.editable ?? true,

package/dist/native/{ui23.js → TextInput.native.tsrx.js}

@@ -1,7 +1,11 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { writeText } from "./text-write.native.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 //#region src/TextInput.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": "textfield",
@@ -10,21 +14,23 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		["id", 1],
 		["className", 2],
 		["style", 3],
-		["text", 4],
-		["hint", 5],
-		["secure", 6],
-		["keyboardType", 7],
-		["returnKeyType", 8],
-		["editable", 9],
-		["onTextChange", 10],
-		["onReturnPress", 11],
-		["onFocus", 12],
-		["onBlur", 13]
+		["hint", 4],
+		["secure", 5],
+		["keyboardType", 6],
+		["returnKeyType", 7],
+		["editable", 8],
+		["onTextChange", 9],
+		["onReturnPress", 10],
+		["onFocus", 11],
+		["onBlur", 12]
 	]
 });
 var TextInput = defineUniversalComponent("nativescript", function TextInput(props) {
+	const el = useRef(null, _h$0);
+	useEffect(() => writeText(el.current, props.value), [props.value], _h$1);
 	return universalValue(__octaneUniversalPlan0, [
 		(v) => {
+			el.current = v;
 			if (!v) return;
 			applyEscapeProps(v, props);
 			props.bind?.({
@@ -34,13 +40,12 @@ var TextInput = defineUniversalComponent("nativescript", function TextInput(prop
 			});
 		},
 		props.id,
-		cx(props.className),
+		cx("vx-input", props.className),
 		{
 			...props.style,
 			...props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}
 		},
-		props.value,
-		props.placeholder ?? props.hint,
+		props.placeholder,
 		props.secure,
 		props.keyboardType === "default" ? void 0 : props.keyboardType,
 		props.returnKeyType,

package/dist/native/Timeline.native.tsrx.js

@@ -0,0 +1,112 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { Icon } from "./Icon.native.tsrx.js";
+import { defineUniversalComponent, universalComponent, universalFor, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Timeline.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-timeline-line" }
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-timeline-time" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-timeline-title" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-timeline-desc" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-timeline-item" },
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-timeline-rail" },
+		"children": [{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "className": "vx-timeline-dot" },
+			"children": [{
+				"kind": "slot",
+				"slot": 0
+			}]
+		}, {
+			"kind": "slot",
+			"slot": 1
+		}]
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-timeline-body" },
+		"children": [
+			{
+				"kind": "slot",
+				"slot": 2
+			},
+			{
+				"kind": "slot",
+				"slot": 3
+			},
+			{
+				"kind": "slot",
+				"slot": 4
+			}
+		]
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var Timeline = defineUniversalComponent("nativescript", function Timeline(props) {
+	return universalValue(__octaneUniversalPlan6, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-timeline", props.className),
+		props.style,
+		universalFor(props.items.map((item, i) => ({
+			item,
+			i
+		})), (e, __octaneUniversalIndex) => e.item.key, (e, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan5, [
+				e.item.icon ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([[
+					"set",
+					"name",
+					e.item.icon
+				]]))]) : null,
+				e.i < props.items.length - 1 ? universalValue(__octaneUniversalPlan1, []) : null,
+				e.item.time != null ? universalValue(__octaneUniversalPlan2, [e.item.time]) : null,
+				e.item.title != null ? universalValue(__octaneUniversalPlan3, [e.item.title]) : null,
+				e.item.description != null ? universalValue(__octaneUniversalPlan4, [e.item.description]) : null
+			]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Timeline };

package/dist/native/Tree.native.tsrx.js

@@ -0,0 +1,140 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+//#region src/Tree.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-tree-node" },
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [
+			["className", 0],
+			["style", 1],
+			["onTap", 2]
+		],
+		"children": [{
+			"kind": "host",
+			"type": "label",
+			"props": { "className": "vx-tree-caret" },
+			"bindings": [["text", 3]]
+		}, {
+			"kind": "host",
+			"type": "label",
+			"props": { "className": "vx-tree-label" },
+			"bindings": [["text", 4]]
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var TreeRow = defineUniversalComponent("nativescript", function TreeRow(props) {
+	const node = props.node;
+	const kids = node.children ?? [];
+	const isOpen = props.open.has(node.key);
+	return universalValue(__octaneUniversalPlan1, [
+		cx("vx-tree-row", node.disabled && "vx-tree-row--disabled"),
+		{ paddingLeft: props.depth * 16 },
+		node.disabled ? void 0 : () => kids.length ? props.toggle(node) : props.onSelect?.(node),
+		kids.length ? isOpen ? "▾" : "▸" : "",
+		node.label ?? node.key,
+		isOpen && kids.map((kid) => universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", TreeRow, universalProps([
+			[
+				"set",
+				"node",
+				kid
+			],
+			[
+				"set",
+				"depth",
+				props.depth + 1
+			],
+			[
+				"set",
+				"open",
+				props.open
+			],
+			[
+				"set",
+				"toggle",
+				props.toggle
+			],
+			[
+				"set",
+				"onSelect",
+				props.onSelect
+			]
+		]))]))
+	]);
+}, { "module": "@nativescript-community/octane" });
+var Tree = defineUniversalComponent("nativescript", function Tree(props) {
+	const [open, setOpen] = useState(new Set(props.defaultExpanded ?? []), _h$0);
+	const toggle = (node) => {
+		const next = new Set(open);
+		const willOpen = !next.has(node.key);
+		if (willOpen) next.add(node.key);
+		else next.delete(node.key);
+		setOpen(next);
+		props.onToggle?.(node.key, willOpen);
+	};
+	return universalValue(__octaneUniversalPlan3, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-tree", props.className),
+		props.style,
+		props.nodes.map((node) => universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", TreeRow, universalProps([
+			[
+				"set",
+				"node",
+				node
+			],
+			[
+				"set",
+				"depth",
+				0
+			],
+			[
+				"set",
+				"open",
+				open
+			],
+			[
+				"set",
+				"toggle",
+				toggle
+			],
+			[
+				"set",
+				"onSelect",
+				props.onSelect
+			]
+		]))]))
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Tree };