@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/web/ui15.js

@@ -1,49 +1,428 @@
-import { hookSlots, useSyncExternalStore } from "octane";
-//#region src/route.web.ts
-var listeners = /* @__PURE__ */ new Set();
-var current = parse();
-function parse() {
-	const parts = location.pathname.split("/").filter(Boolean);
-	if (!parts.length) return null;
-	const [name, stack] = parts.length === 1 ? [parts[0], "root"] : [parts[1], parts[0]];
-	const params = {};
-	new URLSearchParams(location.search).forEach((v, k) => params[k] = v);
-	return {
-		stack,
-		name,
-		params
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bagOf, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Pressable.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"w",
+	"v"
+];
+var Pressable = /* @__PURE__ */ __s(function Pressable(props, __s, __extra) {
+	let timer = null;
+	const cancel = () => {
+		if (timer !== null) {
+			clearTimeout(timer);
+			timer = null;
+		}
 	};
-}
-function build(r) {
-	const q = new URLSearchParams(r.params).toString();
-	return (r.stack === "root" ? "/" + r.name : "/" + r.stack + "/" + r.name) + (q ? "?" + q : "");
-}
-function emit() {
-	listeners.forEach((l) => l());
-}
-function pushRoute(r) {
-	history.pushState(null, "", build(r));
-	current = r;
-	emit();
-}
-window.addEventListener("popstate", () => {
-	current = parse();
-	emit();
+	const down = () => {
+		if (props.disabled || !props.onLongPress) return;
+		cancel();
+		timer = setTimeout(() => {
+			timer = null;
+			props.onLongPress?.();
+		}, 500);
+	};
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16, _m17, _m18, _m19, _m20, _m21, _m22;
+		const _root = clone(_t$0);
+		_m0 = (el) => applyEscapeProps(el, props);
+		_m1 = props.id;
+		_m2 = [
+			"vx-pressable",
+			props.ignoreTouchAnimation ? "vx-pressable-no-feedback" : "",
+			glassClassOf(props.glass),
+			props.className
+		];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.style,
+			...props.hitSlop ? {
+				margin: -props.hitSlop,
+				padding: props.hitSlop
+			} : {}
+		}));
+		_m4 = props.accessibilityRole ?? "button";
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessibilityHint;
+		_m7 = props.accessibilityValue;
+		_m8 = props.accessibilityState?.disabled ?? props.disabled ?? void 0;
+		_m9 = props.accessibilityState?.selected;
+		_m10 = props.accessibilityState?.checked;
+		_m11 = props.accessibilityState?.busy;
+		_m12 = props.accessibilityState?.expanded;
+		_m13 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m14 = props.accessible === false ? true : void 0;
+		_m15 = props.disabled ? void 0 : props.onPress;
+		_m16 = props.disabled ? void 0 : props.onDoublePress;
+		_m17 = (e) => {
+			if (!props.disabled) {
+				props.onPressIn?.();
+				down();
+			}
+		};
+		_m18 = () => {
+			if (!props.disabled) props.onPressOut?.();
+			cancel();
+		};
+		_m19 = () => {
+			if (!props.disabled) props.onPressOut?.();
+			cancel();
+		};
+		_m20 = () => {
+			if (!props.disabled) props.onPressOut?.();
+			cancel();
+		};
+		_m21 = _root;
+		_m22 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-description",
+				_m6
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m7
+			],
+			[
+				false,
+				"aria-disabled",
+				_m8
+			],
+			[
+				false,
+				"aria-selected",
+				_m9
+			],
+			[
+				false,
+				"aria-checked",
+				_m10
+			],
+			[
+				false,
+				"aria-busy",
+				_m11
+			],
+			[
+				false,
+				"aria-expanded",
+				_m12
+			],
+			[
+				false,
+				"aria-live",
+				_m13
+			],
+			[
+				false,
+				"aria-hidden",
+				_m14
+			],
+			[
+				false,
+				"onClick",
+				_m15
+			],
+			[
+				false,
+				"onDoubleClick",
+				_m16
+			],
+			[
+				false,
+				"onPointerDown",
+				_m17
+			],
+			[
+				false,
+				"onPointerUp",
+				_m18
+			],
+			[
+				false,
+				"onPointerLeave",
+				_m19
+			],
+			[
+				false,
+				"onPointerCancel",
+				_m20
+			]
+		], "b:1e96e1c3", true);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: _m16,
+			r: _m17,
+			s: _m18,
+			t: _m19,
+			u: _m20,
+			v: _m21,
+			w: _m22,
+			x: null,
+			y: void 0
+		});
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = (el) => applyEscapeProps(el, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = [
+				"vx-pressable",
+				props.ignoreTouchAnimation ? "vx-pressable-no-feedback" : "",
+				glassClassOf(props.glass),
+				props.className
+			];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.style,
+			...props.hitSlop ? {
+				margin: -props.hitSlop,
+				padding: props.hitSlop
+			} : {}
+		}));
+		{
+			const _v = props.accessibilityRole ?? "button";
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled ?? props.disabled ?? void 0;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.busy;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityState?.expanded;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.n !== _v) _b.n = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.o !== _v) _b.o = _v;
+		}
+		{
+			const _v = props.disabled ? void 0 : props.onPress;
+			if (_b.p !== _v) _b.p = _v;
+		}
+		{
+			const _v = props.disabled ? void 0 : props.onDoublePress;
+			if (_b.q !== _v) _b.q = _v;
+		}
+		{
+			const _v = (e) => {
+				if (!props.disabled) {
+					props.onPressIn?.();
+					down();
+				}
+			};
+			if (_b.r !== _v) _b.r = _v;
+		}
+		{
+			const _v = () => {
+				if (!props.disabled) props.onPressOut?.();
+				cancel();
+			};
+			if (_b.s !== _v) _b.s = _v;
+		}
+		{
+			const _v = () => {
+				if (!props.disabled) props.onPressOut?.();
+				cancel();
+			};
+			if (_b.t !== _v) _b.t = _v;
+		}
+		{
+			const _v = () => {
+				if (!props.disabled) props.onPressOut?.();
+				cancel();
+			};
+			if (_b.u !== _v) _b.u = _v;
+		}
+		_b.w = bindSignalHostPropSources(__s, _b.w, _b.v, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-description",
+				_b.g
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.h
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.i
+			],
+			[
+				false,
+				"aria-selected",
+				_b.j
+			],
+			[
+				false,
+				"aria-checked",
+				_b.k
+			],
+			[
+				false,
+				"aria-busy",
+				_b.l
+			],
+			[
+				false,
+				"aria-expanded",
+				_b.m
+			],
+			[
+				false,
+				"aria-live",
+				_b.n
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.o
+			],
+			[
+				false,
+				"onClick",
+				_b.p
+			],
+			[
+				false,
+				"onDoubleClick",
+				_b.q
+			],
+			[
+				false,
+				"onPointerDown",
+				_b.r
+			],
+			[
+				false,
+				"onPointerUp",
+				_b.s
+			],
+			[
+				false,
+				"onPointerLeave",
+				_b.t
+			],
+			[
+				false,
+				"onPointerCancel",
+				_b.u
+			]
+		], "b:1e96e1c3", true);
+	}
+	_b.z = bindSignalChild(__s, _b.z, 1, _b.v, props.children, "b:42886232", null, void 0, void 0, void 0, true);
 });
-/** Current route if it targets `stack`, else null. */
-function routeFor(stack) {
-	return current && current.stack === stack ? current : null;
-}
-/** The route active at boot — for deep-link tab selection. */
-function currentRoute() {
-	return current;
-}
-function useRoute(stack) {
-	return useSyncExternalStore((cb) => {
-		listeners.add(cb);
-		return () => listeners.delete(cb);
-	}, () => routeFor(stack), _h$0);
-}
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 //#endregion
-export { currentRoute, pushRoute, routeFor, useRoute };
+export { Pressable };

package/dist/web/ui16.js

@@ -1,101 +1,20 @@
-import { useRoute } from "./ui15.js";
-import { __s, bag3, bag4, bag9, child, clone, delegateEvents, forBlock, hookSlots, ifBlock, setEventHandler, setStyle, sibling, template, useState, withSlot } from "octane";
-import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/Tabs.web.tsrx
+import { __s, bag6, clone, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, setPlainAttribute, setURLAttribute } from "octane/internal/client";
+//#region src/Link.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["click"]);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-route\"></div>");
-var _t$1 = /* @__PURE__ */ template("<button></button>");
-var _t$2 = /* @__PURE__ */ template("<div><div class=\"vx-tabbar\"><!></div><div class=\"vx-tabpane\"></div></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(4);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-function __then$0(__props, __s, __extra) {
-	const props = __extra[2];
-	const rootRoute = __extra[3];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = props.resolveScreen(rootRoute.name, rootRoute.params);
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
-	}
-}
-var _key$3 = (t) => t.title;
-function __item$4(t, __s, __extra) {
-	const active = __extra[0];
-	const props = __extra[1];
-	const setInternal = __extra[2];
+var _t$0 = /* @__PURE__ */ template("<a rel=\"noreferrer\"></a>", 3);
+var Link = /* @__PURE__ */ __s(function Link(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1;
-		const _root = clone(_t$1);
-		_m1 = _root;
-		setEventHandler(_root, "$$click", () => {
-			const i = props.tabs.indexOf(t);
-			setInternal(i);
-			props.onSelectedIndexChanged?.(i);
-		});
-		_b = bag4(__s, _root, void 0, _m1, null, void 0);
-	} else setEventHandler(_b.b, "$$click", () => {
-		const i = props.tabs.indexOf(t);
-		setInternal(i);
-		props.onSelectedIndexChanged?.(i);
-	});
-	_b.a = updateFreshClassName(["vx-tab", active === props.tabs.indexOf(t) ? "active" : ""], _b.a, _b.b);
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, t.title, "b:6a83ceed", null, void 0, void 0, void 0, true);
-}
-function __else$2(__props, __s, __extra) {
-	const active = __extra[0];
-	const paneRoute = __extra[1];
-	const props = __extra[2];
-	const setInternal = __extra[4];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4, _m5, _m6;
-		const _root = clone(_t$2);
+		const _root = clone(_t$0);
 		_m1 = _root;
-		const _el0 = child(_root);
-		_m4 = _el0;
-		_m5 = child(_el0);
-		_m6 = sibling(_el0, 1);
-		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, null, void 0);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:dd012c22", "attr");
-	_b.c = updateFreshClassName(["vx-tabs", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
-		}
+		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, null, void 0);
 	}
-	forBlock(__s, 1, _b.e, props.tabs, _key$3, __item$4, 26, [
-		active,
-		props,
-		setInternal
-	], null, _b.f, true);
-	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, paneRoute && props.resolveScreen ? props.resolveScreen(paneRoute.name, paneRoute.params) : props.tabs[active]?.render(), "b:945751f6", null, void 0, void 0, void 0, true);
-}
-var Tabs = /* @__PURE__ */ __s(function Tabs(props, __s, __extra) {
-	const __block = __s.block;
-	const [internal, setInternal] = useState(0, _hs$ + 0);
-	const active = props.selectedIndex ?? internal;
-	const rootRoute = withSlot(_h$1, useRoute, "root");
-	const paneRoute = withSlot(_h$2, useRoute, props.tabs[active]?.stack ?? "");
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	ifBlock(__s, 0, __block.parentNode, rootRoute && props.resolveScreen, __then$0, __else$2, __block.endMarker, [
-		active,
-		paneRoute,
-		props,
-		rootRoute,
-		setInternal
-	]);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "href", props.href, "b:72eb02fd", setURLAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "target", props.target ?? "_blank", "b:8bb4cc0f", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "class", props.className, "b:e1c761ba", "class");
+	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:664239d9", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Tabs };
+export { Link };