@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/native/Table.tsrx.js

@@ -0,0 +1,103 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { defineUniversalComponent, universalFor, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Table.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.tsrx.js

@@ -0,0 +1,153 @@
+import { cx } from "./cx.js";
+import { Text } from "./Text.tsrx.js";
+import { Pressable } from "./Pressable.tsrx.js";
+import { Icon } from "./Icon.tsrx.js";
+import { RouteHost, screenParamsFor } from "./RouteHost.mobile.tsrx.js";
+import "./route-host.mobile.js";
+import { layoutsForRoute, screenFor, useRoute } from "./route.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalFor, universalIf, universalPlan, universalProps, universalValue, useState, withSlot } from "@nativescript-community/octane";
+//#region src/Tabs.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
+		}]
+	}]
+});
+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",
+					screenParamsFor(route)
+				]
+			]))]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan4, [tab?.render()]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Tabs };

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

@@ -1,8 +1,8 @@
-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.js";
+import { layoutChildProps } from "./layout-child.js";
 import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
-//#region src/Text.native.tsrx
+//#region src/Text.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "span",
@@ -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.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.js";
+import { writeText } from "./text-write.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);
+//#region src/TextArea.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": "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.tsrx.js}

@@ -1,7 +1,11 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/TextInput.native.tsrx
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { writeText } from "./text-write.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+//#region src/TextInput.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.tsrx.js

@@ -0,0 +1,112 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Icon } from "./Icon.tsrx.js";
+import { defineUniversalComponent, universalComponent, universalFor, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Timeline.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/Tooltip.tsrx.js

@@ -0,0 +1,131 @@
+import { cx } from "./cx.js";
+import { View } from "./View.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+//#region src/Tooltip.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var host = () => globalThis.__xplatAppKit ?? {};
+var TooltipPanel = defineUniversalComponent("nativescript", function TooltipPanel(props) {
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([[
+		"set",
+		"className",
+		cx("vx-tooltip", props.className)
+	], [
+		"set",
+		"style",
+		props.style
+	]], props.body))]);
+}, { "module": "@nativescript-community/octane" });
+var Tooltip = defineUniversalComponent("nativescript", function Tooltip(props) {
+	const anchor = useRef(null, _h$0);
+	const popup = useRef(null, _h$1);
+	const detachHover = useRef(null, _h$2);
+	const openTimer = useRef(null, _h$3);
+	const closeTimer = useRef(null, _h$4);
+	const clearOpen = () => {
+		if (openTimer.current !== null) clearTimeout(openTimer.current);
+		openTimer.current = null;
+	};
+	const clearClose = () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	};
+	const closeNow = () => {
+		clearOpen();
+		clearClose();
+		popup.current?.close();
+		popup.current = null;
+	};
+	const openNow = () => {
+		if (props.disabled || popup.current) return;
+		const view = anchor.current;
+		const show = host().showAnchoredPopup;
+		if (!view || typeof show !== "function") return;
+		popup.current = show({
+			anchor: view,
+			placement: props.placement ?? "top",
+			component: TooltipPanel,
+			props: {
+				body: props.content,
+				className: props.contentClassName,
+				style: props.contentStyle
+			}
+		});
+	};
+	const startOpen = () => {
+		if (props.disabled) return;
+		clearClose();
+		clearOpen();
+		openTimer.current = setTimeout(() => {
+			openTimer.current = null;
+			openNow();
+		}, Math.max(0, props.openDelay ?? 500));
+	};
+	const scheduleClose = () => {
+		clearClose();
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			closeNow();
+		}, Math.max(0, props.closeDelay ?? 100));
+	};
+	const bindAnchor = (view) => {
+		if (view && view === anchor.current && detachHover.current) return;
+		anchor.current = view;
+		detachHover.current?.();
+		detachHover.current = null;
+		if (!view) return;
+		const observe = host().observeHover;
+		if (typeof observe !== "function") return;
+		detachHover.current = observe(view, {
+			enter: startOpen,
+			exit: () => {
+				clearOpen();
+				scheduleClose();
+			}
+		});
+	};
+	useEffect(() => () => {
+		clearOpen();
+		clearClose();
+		detachHover.current?.();
+		popup.current?.close();
+		popup.current = null;
+	}, [], _h$5);
+	return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", View, universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			props.className
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"bind",
+			bindAnchor
+		]
+	], props.trigger))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Tooltip };