@octane-xplat/ui 0.2.1 → 0.3.0

package/dist/web/ui10.js

@@ -1,43 +1,199 @@
-import { __s, bag4, clone, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, template, useEffect, useRef } from "octane";
-import { childTextHoleUpdate, replaceRef } from "octane/internal/client";
-//#region src/Modal.web.tsrx
-delegateEvents(["close"]);
-var _t$0 = /* @__PURE__ */ template("<dialog class=\"vx-modal\"></dialog>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui3.js";
+import { __s, bag15, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Text.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span></span>");
 var _rm$1 = [
-	"r",
-	"b",
-	"a"
+	"s",
+	"m",
+	"l"
 ];
-var Modal = /* @__PURE__ */ __s(function Modal(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useEffect(() => {
-		const d = el.current;
-		if (!d) return;
-		if (props.open && !d.open) d.showModal();
-		else if (!props.open && d.open) d.close();
-	}, [props.open], _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;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = el, _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		setEventHandler(_root, "$$close", props.onClose);
-		_b = bag4(__s, _root, _m0, _m1, null, void 0);
+		_m0 = (el) => applyEscapeProps(el, props);
+		_m1 = props.className;
+		_m2 = snapshotSpread(layoutChildProps(props, textStyle));
+		_m3 = props.accessibilityHint;
+		_m4 = props.accessibilityValue;
+		_m5 = props.accessibilityState?.disabled;
+		_m6 = props.accessibilityState?.selected;
+		_m7 = props.accessibilityState?.checked;
+		_m8 = props.accessibilityState?.busy;
+		_m9 = props.accessibilityState?.expanded;
+		_m10 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m11 = _root;
+		_m12 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[true, _m2],
+			[
+				false,
+				"aria-description",
+				_m3
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m4
+			],
+			[
+				false,
+				"aria-disabled",
+				_m5
+			],
+			[
+				false,
+				"aria-selected",
+				_m6
+			],
+			[
+				false,
+				"aria-checked",
+				_m7
+			],
+			[
+				false,
+				"aria-busy",
+				_m8
+			],
+			[
+				false,
+				"aria-expanded",
+				_m9
+			],
+			[
+				false,
+				"aria-live",
+				_m10
+			]
+		], "b:d6d287c8", true);
+		_b = bag15(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
 		{
-			const _r = el;
-			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+			const _v = (el) => applyEscapeProps(el, props);
+			if (_b.a !== _v) _b.a = _v;
 		}
-		setEventHandler(_b.a, "$$close", props.onClose);
-	}
-	{
-		const _v = props.children;
-		_b.c = childTextHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d);
-		_b.d = _v;
+		{
+			const _v = props.className;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(layoutChildProps(props, textStyle));
+		{
+			const _v = props.accessibilityHint;
+			if (_b.d !== _v) _b.d = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityState?.busy;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.expanded;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		_b.m = bindSignalHostPropSources(__s, _b.m, _b.l, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[true, _b.c],
+			[
+				false,
+				"aria-description",
+				_b.d
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.e
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.f
+			],
+			[
+				false,
+				"aria-selected",
+				_b.g
+			],
+			[
+				false,
+				"aria-checked",
+				_b.h
+			],
+			[
+				false,
+				"aria-busy",
+				_b.i
+			],
+			[
+				false,
+				"aria-expanded",
+				_b.j
+			],
+			[
+				false,
+				"aria-live",
+				_b.k
+			]
+		], "b:d6d287c8", true);
 	}
+	_b.p = bindSignalChild(__s, _b.p, 1, _b.l, props.children, "b:1285f2ba", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Modal };
+export { Text };

package/dist/web/ui11.js

@@ -1,57 +1,423 @@
-import { hookSlots, useRef } from "octane";
-//#region src/anim.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function createAnimated(initial, prop) {
-	let el = null;
-	let current = initial;
-	let raf = 0;
-	const apply = (v) => {
-		current = v;
-		if (el) el.style.transform = `translateX(${v}px)`;
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui3.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;
+		}
 	};
-	const run = (step) => {
-		cancelAnimationFrame(raf);
-		const start = Date.now();
-		const tick = () => {
-			const v = step(Date.now() - start);
-			if (v === null) return;
-			apply(v);
-			raf = requestAnimationFrame(tick);
-		};
-		raf = requestAnimationFrame(tick);
+	const down = () => {
+		if (props.disabled || !props.onLongPress) return;
+		cancel();
+		timer = setTimeout(() => {
+			timer = null;
+			props.onLongPress?.();
+		}, 500);
 	};
-	return {
-		get value() {
-			return current;
-		},
-		bind(e) {
-			el = e;
-			if (el) el.style.transform = `translateX(${current}px)`;
-		},
-		to(target, opts) {
-			const dur = opts?.duration ?? 300;
-			const from = current;
-			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
-		},
-		spring(target, opts) {
-			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
-			let v = 0, x = current;
-			run(() => {
-				const dt = 1 / 60;
-				v += (-stiffness * (x - target) - damping * v) * dt;
-				x += v * dt;
-				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
-			});
-		},
-		stop() {
-			cancelAnimationFrame(raf);
+	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" : "",
+			props.className
+		];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...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:b8f90cd3", 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;
 		}
-	};
-}
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
-}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = [
+				"vx-pressable",
+				props.ignoreTouchAnimation ? "vx-pressable-no-feedback" : "",
+				props.className
+			];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...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:b8f90cd3", true);
+	}
+	_b.z = bindSignalChild(__s, _b.z, 1, _b.v, props.children, "b:1d318b77", null, void 0, void 0, void 0, true);
+});
 //#endregion
-export { useAnimation };
+export { Pressable };