@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/web/{ui14.js → RichText.web.tsrx.js}

@@ -1,5 +1,5 @@
-import { applyEscapeProps } from "./ui2.js";
-import { layoutChildProps } from "./ui4.js";
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
 import { __s, bag5, bag8, clone, delegateEvents, setEventHandler, setStyle, snapshotSpread, template } from "octane";
 import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
 //#region src/RichText.web.tsrx

package/dist/web/Row.web.tsrx.js

@@ -0,0 +1,250 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { usePan } from "./pan.web.tsrx.js";
+import { __s, bagOf, clone, hookSlots, snapshotSpread, template, useRef, withSlot } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Row.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _rm$1 = [
+	"s",
+	"o",
+	"n"
+];
+var Row = /* @__PURE__ */ __s(function Row(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	withSlot(_h$1, usePan, el, props.onPan);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	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;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = (e) => {
+			el.current = e;
+			if (e) {
+				applyEscapeProps(e, props);
+				props.bind?.(e);
+			}
+		};
+		_m2 = ["vx-row", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, props.style));
+		_m4 = props.accessibilityRole;
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = _root;
+		_m14 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"ref",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			]
+		], "b:fc465be0", 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: null,
+			q: void 0
+		});
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = (e) => {
+				el.current = e;
+				if (e) {
+					applyEscapeProps(e, props);
+					props.bind?.(e);
+				}
+			};
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-row", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, props.style));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		_b.o = bindSignalHostPropSources(__s, _b.o, _b.n, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"ref",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			]
+		], "b:fc465be0", true);
+	}
+	_b.r = bindSignalChild(__s, _b.r, 1, _b.n, props.children, "b:5955e15b", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { Row };

package/dist/web/{ui43.js → SafeArea.web.tsrx.js}

@@ -1,4 +1,4 @@
-import { useSafeAreaInsets } from "./ui42.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
 import { __s, bag12, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template, withSlot } from "octane";
 import { bindSignalAttribute, bindSignalChild, canSplitStyleProperties, enableSignalBindings, replaceRef, setPlainAttribute, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
 //#region src/SafeArea.web.tsrx
@@ -16,7 +16,13 @@ function applyWebProps(node, bag) {
 	else node[key] = value;
 }
 var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
-	const insets = withSlot(_h$0, useSafeAreaInsets);
+	const measuredInsets = withSlot(_h$0, useSafeAreaInsets);
+	const insets = props.ignoreSafeArea ? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	} : measuredInsets;
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
@@ -31,7 +37,7 @@ var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
 		const _r = (node) => applyWebProps(node, props.web);
 		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:65ed48f3", setPlainAttribute);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:675a8c5d", setPlainAttribute);
 	_b.d = updateFreshClassName(["vx-safe-area", props.className], _b.d, _b.b);
 	{
 		const __styleSpread = { ...props.style };
@@ -70,7 +76,7 @@ var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
 		_b.i = __styleValue$2;
 		_b.j = __styleValue$3;
 	}
-	_b.m = bindSignalChild(__s, _b.m, 1, _b.b, props.children, "b:30587aa9", null, void 0, void 0, void 0, true);
+	_b.m = bindSignalChild(__s, _b.m, 1, _b.b, props.children, "b:550ed9ac", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { SafeArea };

package/dist/web/{ui39.js → Screen.web.tsrx.js}

@@ -1,4 +1,4 @@
-import { applyEscapeProps } from "./ui2.js";
+import { applyEscapeProps } from "./escape-props.web.js";
 import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
 import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/Screen.web.tsrx

package/dist/web/{ui24.js → ScrollBox.web.tsrx.js}

@@ -1,4 +1,4 @@
-import { ScrollView } from "./ui23.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
 import { bag4, child, clone, componentSlotVoid, drainFrag, markChildrenBlock, template } from "octane";
 import { textHoleUpdate } from "octane/internal/client";
 //#region src/ScrollBox.web.tsrx

package/dist/web/ScrollView.web.tsrx.js

@@ -0,0 +1,388 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { createPullToRefresh } from "./refresh.web.js";
+import { __s, bagOf, child, clone, componentSlotVoid, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, markWarm, queueRefAttach, queueRefDetach, registerWarmPlan, setAriaAttribute, setStyleProperty, sibling, snapshotSpread, template, useEffect, useRef, warmChild } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, enableSignalBindings, replaceRef, setPlainAttribute } from "octane/internal/client";
+//#region src/ScrollView.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div><div class=\"vx-refresh\" aria-hidden=\"true\"></div><div class=\"vx-scroll\" style=\"overflow-y: auto;\"></div></div>");
+var _t$1 = /* @__PURE__ */ template("<div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _rm$2 = [
+	"s",
+	"d",
+	"c",
+	"r",
+	"f",
+	"e",
+	"r",
+	"i",
+	"h"
+];
+function __then$3(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlotVoid(__s, 0, __block.parentNode, ScrollViewRefreshable, { ...props }, __block.endMarker, void 0, void 0, void 0, void 0, "c:8976cd5d");
+}
+var _rm$7 = [
+	"s",
+	"o",
+	"n"
+];
+function __else$5(__props, __s, __extra) {
+	const props = __extra[0];
+	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;
+		const _root = clone(_t$1);
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = props.id;
+		_m2 = ["vx-scroll", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		_m4 = props.accessibilityRole;
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = _root;
+		_m14 = 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-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			]
+		], "b:69cc9953", 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: null,
+			q: void 0
+		});
+		__s.refFields = _rm$7;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-scroll", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		_b.o = bindSignalHostPropSources(__s, _b.o, _b.n, [
+			[
+				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-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			]
+		], "b:69cc9953", true);
+	}
+	_b.r = bindSignalChild(__s, _b.r, 1, _b.n, props.children, "b:94fea255", null, void 0, void 0, void 0, true);
+}
+var ScrollViewRefreshable = /* @__PURE__ */ __s(/* @__PURE__ */ markWarm(function ScrollViewRefreshable(props, __s, __extra) {
+	const cfg = useRef({}, _hs$ + 0);
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold
+	};
+	const ctl = useRef(null, _hs$ + 1);
+	const scroller = useRef(null, _hs$ + 2);
+	const indicator = useRef(null, _hs$ + 3);
+	useEffect(() => {
+		if (!scroller.current || !indicator.current) return;
+		ctl.current = createPullToRefresh({
+			scroller: scroller.current,
+			indicator: indicator.current,
+			cfg
+		});
+		return () => {
+			ctl.current?.detach();
+			ctl.current = null;
+		};
+	}, [], _hs$ + 4);
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing], _hs$ + 5);
+	const __warmPlan = ScrollViewRefreshable.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		warmChild(ActivityIndicator, {});
+	}, void 0);
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m7, _m8;
+		const _root = clone(_t$0);
+		_m0 = snapshotSpread(layoutChildProps(props, { ...props.style }));
+		_m1 = ["vx-refresh-wrap", props.className];
+		_m2 = _root;
+		_m3 = bindSignalHostPropSources(__s, void 0, _root, [[true, _m0], [
+			false,
+			"className",
+			_m1
+		]], "b:c490abcf", true);
+		const _el0 = child(_root);
+		queueRefAttach(__s, _m5 = (el) => {
+			indicator.current = el;
+		}, _m4 = _el0);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.f, _b.e));
+		const _el1 = sibling(_el0, 1);
+		queueRefAttach(__s, _m8 = (el) => {
+			scroller.current = el;
+			applyEscapeProps(el, props);
+		}, _m7 = _el1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.i, _b.h));
+		markDangerouslySetInnerHTMLChildren(_root);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: __s,
+			h: _m7,
+			i: _m8,
+			j: void 0,
+			k: void 0,
+			l: void 0,
+			m: void 0,
+			n: void 0,
+			o: void 0,
+			p: void 0,
+			q: void 0,
+			r: void 0,
+			s: void 0,
+			t: null,
+			u: void 0
+		});
+		__s.refFields = _rm$2;
+	} else {
+		_b.a = snapshotSpread(layoutChildProps(props, { ...props.style }));
+		{
+			const _v = ["vx-refresh-wrap", props.className];
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.d = bindSignalHostPropSources(__s, _b.d, _b.c, [[true, _b.a], [
+			false,
+			"className",
+			_b.b
+		]], "b:c490abcf", true);
+		{
+			const _r = (el) => {
+				indicator.current = el;
+			};
+			if (_r !== _b.f) _b.f = replaceRef(__s, _b.f, _r, _b.e);
+		}
+		{
+			const _r = (el) => {
+				scroller.current = el;
+				applyEscapeProps(el, props);
+			};
+			if (_r !== _b.i) _b.i = replaceRef(__s, _b.i, _r, _b.h);
+		}
+	}
+	{
+		const _v = `translateY(-64px)`;
+		if (_b.g !== _v) {
+			setStyleProperty(_b.e, "transform", _v, "", _b.g);
+			_b.g = _v;
+		}
+	}
+	_b.j = bindSignalAttribute(__s, _b.j, _b.h, "id", props.id, "b:385c8dc5", setPlainAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.h, "role", props.accessibilityRole, "b:d0d22c7a", setPlainAttribute);
+	_b.l = bindSignalAttribute(__s, _b.l, _b.h, "aria-label", props.accessibilityLabel, "b:8ebcb2ce", setAriaAttribute);
+	_b.m = bindSignalAttribute(__s, _b.m, _b.h, "aria-hidden", props.accessible === false ? true : void 0, "b:991aa8dd", setAriaAttribute);
+	_b.n = bindSignalAttribute(__s, _b.n, _b.h, "aria-description", props.accessibilityHint, "b:38b7eabf", setAriaAttribute);
+	_b.o = bindSignalAttribute(__s, _b.o, _b.h, "aria-valuetext", props.accessibilityValue, "b:baa07d0d", setAriaAttribute);
+	_b.p = bindSignalAttribute(__s, _b.p, _b.h, "aria-disabled", props.accessibilityState?.disabled, "b:5767cf4c", setAriaAttribute);
+	_b.q = bindSignalAttribute(__s, _b.q, _b.h, "aria-selected", props.accessibilityState?.selected, "b:6f1e362a", setAriaAttribute);
+	_b.r = bindSignalAttribute(__s, _b.r, _b.h, "aria-checked", props.accessibilityState?.checked, "b:16ae215e", setAriaAttribute);
+	_b.s = bindSignalAttribute(__s, _b.s, _b.h, "aria-live", props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion, "b:12f701bb", setAriaAttribute);
+	componentSlotVoid(__s, 1, _b.e, ActivityIndicator, {}, void 0, void 0, 2, void 0, void 0, "c:656d80e2");
+	_b.v = bindSignalChild(__s, _b.v, 2, _b.h, props.children, "b:bafcef6e", null, void 0, void 0, void 0, true);
+}, (__wp) => {
+	warmChild(ActivityIndicator, {});
+}));
+var ScrollView = function ScrollView(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, !props.horizontal && (props.onRefresh != null || props.refreshing != null), __then$3, __else$5, __block.endMarker, [props]);
+};
+//#endregion
+export { ScrollView };