@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/web/ui13.js

@@ -1,110 +1,279 @@
 import { applyEscapeProps } from "./ui2.js";
-import { __s, bag11, clone, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template, useLayoutEffect, useRef } from "octane";
-import { bindSignalAttribute, bindSignalValue, enableSignalBindings, replaceRef, setBooleanAttributeIfChanged, updateFreshClassName } from "octane/internal/client";
-//#region src/TextArea.web.tsrx
+import { layoutChildProps } from "./ui4.js";
+import { __s, bagOf, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Text.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents([
-	"focusin",
-	"focusout",
-	"input",
-	"keydown"
-]);
-var _t$0 = /* @__PURE__ */ template("<textarea data-octane-input=\"i:8374d32b\"></textarea>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _rm$0 = [
-	"r",
-	"b",
-	"a"
+var _t$0 = /* @__PURE__ */ template("<span></span>");
+var _rm$1 = [
+	"s",
+	"q",
+	"p"
 ];
-var TextArea = /* @__PURE__ */ __s(function TextArea(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useLayoutEffect(() => {
-		const t = el.current;
-		if (!t) return;
-		const cs = getComputedStyle(t);
-		const pad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-		const bord = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-		const adj = cs.boxSizing === "border-box" ? bord : -pad;
-		const line = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;
-		const cap = props.maxRows ? props.maxRows * line + (cs.boxSizing === "border-box" ? pad + bord : 0) : parseFloat(cs.maxHeight) || Infinity;
-		if (props.maxRows) t.style.maxHeight = Math.ceil(cap) + "px";
-		if (props.autoGrow) {
-			t.style.height = "auto";
-			const need = t.scrollHeight + adj;
-			t.style.height = Math.min(need, cap) + "px";
-			t.style.overflowY = need > cap ? "auto" : "hidden";
-		}
-	}, [
-		props.value,
-		props.rows,
-		props.autoGrow,
-		props.maxRows,
-		props.className,
-		props.style
-	], _hs$ + 1);
+var Text = /* @__PURE__ */ __s(function Text(props, __s, __extra) {
+	const textStyle = {
+		...props.style,
+		...props.numberOfLines ? {
+			display: "-webkit-box",
+			WebkitLineClamp: props.numberOfLines,
+			WebkitBoxOrient: "vertical",
+			overflow: "hidden"
+		} : {},
+		...props.selectable === false ? { userSelect: "none" } : props.selectable ? { userSelect: "text" } : {},
+		...props.ellipsize ? {
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			overflow: "hidden"
+		} : {}
+	};
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m5;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (node) => {
-			el.current = node;
-			if (!node) return;
-			applyEscapeProps(node, props);
-			props.bind?.({
-				focus: () => node.focus(),
-				blur: () => node.blur(),
-				native: node
-			});
-		}, _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m5 = bindSignalValue(__s, void 0, _root, props.value, "i:8374d32b");
-		setEventHandler(_root, "$$input", (e) => props.onChange?.(e.target.value));
-		setEventHandler(_root, "$$keydown", (e) => {
-			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) props.onSubmit?.();
+		_m0 = props.id;
+		_m1 = (el) => applyEscapeProps(el, props);
+		_m2 = props.className;
+		_m3 = snapshotSpread(layoutChildProps(props, textStyle));
+		_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.accessibilityState?.busy;
+		_m13 = props.accessibilityState?.expanded;
+		_m14 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m15 = _root;
+		_m16 = 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-busy",
+				_m12
+			],
+			[
+				false,
+				"aria-expanded",
+				_m13
+			],
+			[
+				false,
+				"aria-live",
+				_m14
+			]
+		], "b:3b621770", 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: null,
+			s: void 0
 		});
-		setEventHandler(_root, "$$focusin", props.onFocus);
-		setEventHandler(_root, "$$focusout", props.onBlur);
-		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, void 0, void 0, void 0, void 0, void 0);
-		__s.refFields = _rm$0;
+		__s.refFields = _rm$1;
 	} else {
 		{
-			const _r = (node) => {
-				el.current = node;
-				if (!node) return;
-				applyEscapeProps(node, props);
-				props.bind?.({
-					focus: () => node.focus(),
-					blur: () => node.blur(),
-					native: node
-				});
-			};
-			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
 		}
-		_b.f = bindSignalValue(__s, _b.f, _b.a, props.value, "i:8374d32b");
-		setEventHandler(_b.a, "$$input", (e) => props.onChange?.(e.target.value));
-		setEventHandler(_b.a, "$$keydown", (e) => {
-			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) props.onSubmit?.();
-		});
-		setEventHandler(_b.a, "$$focusin", props.onFocus);
-		setEventHandler(_b.a, "$$focusout", props.onBlur);
-	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:016c5af0", "attr");
-	_b.d = updateFreshClassName(["vx-textarea", props.className], _b.d, _b.a);
-	{
-		const _v = {
-			...props.style,
-			...props.placeholderTextColor ? { "--placeholder-color": props.placeholderTextColor } : {}
-		};
-		if (_b.e !== _v) {
-			setStyle(_b.a, _v, _b.e);
-			_b.e = _v;
+		{
+			const _v = (el) => applyEscapeProps(el, props);
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.className;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, textStyle));
+		{
+			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.accessibilityState?.busy;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		{
+			const _v = props.accessibilityState?.expanded;
+			if (_b.n !== _v) _b.n = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.o !== _v) _b.o = _v;
 		}
+		_b.q = bindSignalHostPropSources(__s, _b.q, _b.p, [
+			[
+				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-busy",
+				_b.m
+			],
+			[
+				false,
+				"aria-expanded",
+				_b.n
+			],
+			[
+				false,
+				"aria-live",
+				_b.o
+			]
+		], "b:3b621770", true);
 	}
-	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "inputMode", props.keyboardType === "number" ? "numeric" : props.keyboardType === "phone" ? "tel" : props.keyboardType === "default" ? "text" : props.keyboardType, "b:5c730abe", "attr");
-	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "enterKeyHint", props.returnKeyType, "b:a6a3a77f", "attr");
-	_b.i = setBooleanAttributeIfChanged(props.editable === false, _b.i, _b.a, "readonly");
-	_b.j = bindSignalAttribute(__s, _b.j, _b.a, "placeholder", props.placeholder ?? props.hint, "b:df751435", "attr");
-	_b.k = bindSignalAttribute(__s, _b.k, _b.a, "rows", props.rows ?? (props.autoGrow ? 1 : 3), "b:dfee7c66", "attr");
+	_b.t = bindSignalChild(__s, _b.t, 1, _b.p, props.children, "b:152a7b75", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { TextArea };
+export { Text };

package/dist/web/ui14.js

@@ -1,108 +1,98 @@
-import { __s, bag4, bag6, child, clone, drainFrag, forBlock, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useLayoutEffect, useRef } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/List.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui4.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
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(3);
-function __empty$1(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
+var _t$0 = /* @__PURE__ */ template("<span></span>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var RichText = /* @__PURE__ */ __s(function RichText(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1;
+		let _m0, _m1, _m2, _m3, _m4, _m5;
 		const _root = clone(_t$0);
-		_m0 = __block.parentNode;
-		_m1 = child(_root);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag4(__s, null, _m0, _m1, null, void 0);
+		_m0 = props.id;
+		_m1 = (el) => applyEscapeProps(el, props);
+		_m2 = ["vx-rich-text", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, props.style));
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"ref",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3]
+		], "b:e9859754", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = (el) => applyEscapeProps(el, props);
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-rich-text", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, props.style));
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"ref",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:e9859754", true);
 	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:00ed4516", _b.b, true, void 0, true, void 0);
-}
-function __item$3(item, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	const i = __block.itemIndex;
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:f9a8f27a", null, void 0, void 0, void 0, true);
+});
+var RichTextSpan = /* @__PURE__ */ (() => (delegateEvents(["click"]), /* @__PURE__ */ __s(function RichTextSpan(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1;
+		let _m1;
 		const _root = clone(_t$0);
-		_m0 = __block.parentNode;
-		_m1 = child(_root);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag4(__s, null, _m0, _m1, null, void 0);
-	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderItem(item, i), "b:3e351c68", _b.b, true, void 0, true, void 0);
-}
-var _rm$6 = [
-	"r",
-	"c",
-	"b"
-];
-var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	const reachedEnd = useRef(false, _hs$ + 1);
-	useLayoutEffect(() => {
-		const node = el.current;
-		if (!node) return;
-		for (const [name, value] of Object.entries(props.web ?? {})) if (name.includes("-")) {
-			if (value == null) node.removeAttribute(name);
-			else node.setAttribute(name, String(value));
-		} else node[name] = value;
-		let frame = 0;
-		const checkEnd = () => {
-			frame = 0;
-			if (node.scrollHeight - node.scrollTop - node.clientHeight > node.clientHeight) reachedEnd.current = false;
-			else if (!reachedEnd.current) {
-				reachedEnd.current = true;
-				props.onEndReached?.();
-			}
-		};
-		const onScroll = () => {
-			if (!frame) frame = requestAnimationFrame(checkEnd);
-		};
-		node.addEventListener("scroll", onScroll, { passive: true });
-		checkEnd();
-		return () => {
-			node.removeEventListener("scroll", onScroll);
-			if (frame) cancelAnimationFrame(frame);
-		};
-	}, [
-		props.onEndReached,
-		props.web,
-		props.items
-	], _hs$ + 2);
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m2, _m5;
-		const _root = clone(_t$1);
 		_m1 = _root;
-		queueRefAttach(__s, _m2 = el, _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_m5 = child(_root);
-		_b = bag6(__s, _root, void 0, _m1, _m2, void 0, void 0, _m5);
-		__s.refFields = _rm$6;
-	} else {
-		const _r = el;
-		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:6c896629", "attr");
-	_b.d = updateFreshClassName(["vx-list", props.className], _b.d, _b.b);
+		setEventHandler(_root, "$$click", () => props.onPress?.());
+		_b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
+	} else setEventHandler(_b.b, "$$click", () => props.onPress?.());
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:76166c9b", "class");
 	{
-		const _v = Object.assign({
-			display: "flex",
-			flexDirection: "column",
-			flexWrap: "nowrap",
-			alignItems: "stretch",
-			overflowY: "auto",
-			minHeight: 0
-		}, props.style);
-		if (_b.e !== _v) {
-			setStyle(_b.b, _v, _b.e);
-			_b.e = _v;
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
 		}
 	}
-	forBlock(__s, 1, _b.b, props.items, (item, i) => props.keyFor?.(item) ?? item.id, __item$3, 0, [props], __empty$1, _b.f, true);
-});
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.b, props.text ?? props.children, "b:f71ea880", null, void 0, void 0, void 0, true);
+})))();
 //#endregion
-export { List };
+export { RichText, RichTextSpan };