@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/Button.web.tsrx.js

@@ -1,45 +1,144 @@
+import { applyWebProps } from "./platformProps.web.js";
 import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
 import { Pressable } from "./Pressable.web.tsrx.js";
-import { Fragment, bag4, child, clone, componentSlotVoid, createScopedElement, drainFrag, markChildrenBlock, positionalChildren, template } from "octane";
-import { createElementFromConfig, textHoleUpdate } from "octane/internal/client";
+import { Icon } from "./Icon.web.tsrx.js";
+import { useButtonGroup } from "./button-group-context.js";
+import { sanitizeUrl } from "./safe-url.js";
+import { Fragment, bag14, bag4, child, clone, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, drainFrag, hookSlots, ifBlock, markChildrenBlock, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, template, useState, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, setURLAttribute } from "octane/internal/client";
 //#region src/Button.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<a></a>", 3);
+var _t$1 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _rm$2 = [
+	"r",
+	"l",
+	"b"
+];
+function __then$0(__props, __s, __extra) {
+	const cls = __extra[0];
+	const content = __extra[1];
+	const disabled = __extra[2];
+	const props = __extra[3];
+	const runPress = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m11;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", runPress);
+		queueRefAttach(__s, _m11 = (el) => applyWebProps(el, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.l, _b.b));
+		_b = bag14(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m11, null, void 0);
+		__s.refFields = _rm$2;
+	} else {
+		setEventHandler(_b.b, "$$click", runPress);
+		{
+			const _r = (el) => applyWebProps(el, props.web);
+			if (_r !== _b.l) _b.l = replaceRef(__s, _b.l, _r, _b.b);
+		}
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:6ab5c2a1", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", cls, "b:2bfe33fe", "class");
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "href", sanitizeUrl(props.href) ?? void 0, "b:3bf71412", setURLAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "target", props.target, "b:5ca5c61b", setPlainAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "rel", props.target === "_blank" ? "noreferrer" : void 0, "b:d4faf8d8", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.b, "title", props.tooltip, "b:1a5e7af0", setPlainAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.b, "aria-label", props.accessibilityLabel ?? (props.isIconOnly ? props.label : void 0), "b:59292de3", setAriaAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.b, "aria-disabled", disabled || void 0, "b:2cfbcbf7", setAriaAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.b, "tabindex", disabled ? -1 : void 0, "b:701e43b7", setPlainAttribute);
+	_b.o = bindSignalChild(__s, _b.o, 1, _b.b, content, "b:8671f0cc", null, void 0, void 0, void 0, true);
+}
 var __childrenBody = {};
-var Button = function Button(props, __s, __extra) {
+function __else$3(__props, __s, __extra) {
 	const __block = __s.block;
-	const disabled = props.disabled || props.loading;
-	function __children$1(__props, __s, __extra) {
+	const cls = __extra[0];
+	const content = __extra[1];
+	const disabled = __extra[2];
+	const props = __extra[3];
+	const runPress = __extra[4];
+	function __children$5(__props, __s, __extra) {
 		const __block = __s.block;
 		let _b = __s.slots[0];
 		if (_b === void 0) {
 			let _m0, _m1;
-			const _root = clone(_t$0);
+			const _root = clone(_t$1);
 			_m0 = __block.parentNode;
 			_m1 = child(_root);
 			drainFrag(_root, __block.parentNode, __block.endMarker);
 			_b = bag4(__s, null, _m0, _m1, null, void 0);
 		}
-		{
-			const _v = props.loading ? createElementFromConfig("c:b2cf3c5f", ActivityIndicator, {}) : createScopedElement(Fragment, {}, () => positionalChildren([
-				props.leading,
-				props.children,
-				props.trailing
-			]));
-			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-			_b.d = _v;
-		}
+		_b.e = bindSignalChild(__s, _b.e, 1, _b.a, content, "b:268a0846", _b.b, true, void 0, true, void 0);
 	}
 	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
 		...props,
 		"disabled": disabled,
-		"className": [
-			"vx-button",
-			props.loading ? "vx-button--loading" : void 0,
-			props.className
-		],
+		"onPress": runPress,
+		"className": cls,
 		"accessibilityRole": props.accessibilityRole ?? "button",
-		"children": markChildrenBlock(__children$1, __childrenBody)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:ed4bf1f1");
+		"accessibilityLabel": props.accessibilityLabel ?? (props.isIconOnly ? props.label : void 0),
+		"web": {
+			title: props.tooltip,
+			...props.web
+		},
+		"children": markChildrenBlock(__children$5, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:a4fb58d6");
+}
+var Button = function Button(props, __s, __extra) {
+	const __block = __s.block;
+	const group = withSlot(_h$0, useButtonGroup);
+	const [actionPending, setActionPending] = useState(false, _hs$ + 1);
+	const disabled = !!(props.disabled || props.isDisabled || props.isLoading || props.loading || group?.isDisabled);
+	const loading = !!(props.loading || props.isLoading || actionPending);
+	const size = props.size ?? group?.size ?? "md";
+	const icon = typeof props.icon === "string" ? createScopedValue(() => createElementFromConfig("c:c7f8fa8c", Icon, { name: props.icon })) : props.icon;
+	const labelEl = props.label != null ? createScopedElement("span", { className: "vx-button-label" }, () => props.label) : null;
+	const content = loading ? createElementFromConfig("c:44c39de9", ActivityIndicator, {}) : props.isIconOnly ? icon ?? props.children ?? labelEl : createScopedElement(Fragment, {}, () => positionalChildren([
+		icon ?? props.leading,
+		props.children ?? labelEl,
+		props.endContent ?? props.trailing
+	]));
+	const cls = [
+		"vx-button",
+		`vx-button--${props.variant ?? "secondary"}`,
+		size && `vx-button--size-${size}`,
+		props.elevation && props.elevation !== "none" && `vx-button--elev-${props.elevation}`,
+		props.isIconOnly && "vx-button--icon",
+		loading && "vx-button--loading",
+		disabled && "vx-button--disabled",
+		group && `vx-button--group-${group.position}`,
+		props.className
+	];
+	const runPress = (e) => {
+		if (disabled || actionPending && !props.isInterruptible) {
+			e?.preventDefault?.();
+			return;
+		}
+		props.onPress?.();
+		const action = props.clickAction?.();
+		if (action && typeof action.then === "function") {
+			setActionPending(true);
+			Promise.resolve(action).then(() => setActionPending(false), () => setActionPending(false));
+		}
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	ifBlock(__s, 0, __block.parentNode, props.href != null, __then$0, __else$3, __block.endMarker, [
+		cls,
+		content,
+		disabled,
+		props,
+		runPress
+	]);
 };
 //#endregion
 export { Button };

package/dist/web/ButtonGroup.web.tsrx.js

@@ -0,0 +1,98 @@
+import { ButtonGroupProvider } from "./button-group-context.js";
+import { bag8, clone, componentSlot, delegateEvents, hookSlots, markChildrenBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, template, useEffect, useRef } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/ButtonGroup.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["keydown"]);
+var _t$0 = /* @__PURE__ */ template("<div role=\"group\"></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _rm$3 = [
+	"r",
+	"b",
+	"a"
+];
+var __childrenBody = {};
+var ButtonGroup = function ButtonGroup(props, __s, __extra) {
+	const __block = __s.block;
+	const orientation = props.orientation ?? "horizontal";
+	const groupRef = useRef(null, _hs$ + 0);
+	const value = {
+		orientation,
+		isDisabled: !!props.isDisabled,
+		size: props.size ?? "md",
+		position: "only"
+	};
+	useEffect(() => {
+		const root = groupRef.current;
+		if (!root) return;
+		const members = () => Array.from(root.querySelectorAll("button:not([disabled]), [role=\"button\"]:not([aria-disabled=\"true\"]), a[href]"));
+		const update = (active) => {
+			const enabled = members();
+			for (const member of enabled) member.tabIndex = member === active || !active && member === enabled[0] ? 0 : -1;
+		};
+		update();
+		const focus = (event) => {
+			const target = event.target;
+			if (members().includes(target)) update(target);
+		};
+		root.addEventListener("focusin", focus);
+		return () => root.removeEventListener("focusin", focus);
+	}, [props.children, props.isDisabled], _hs$ + 1);
+	const onKeyDown = (event) => {
+		const keys = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		if (![
+			...keys,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const enabled = Array.from(groupRef.current?.querySelectorAll("button:not([disabled]), [role=\"button\"]:not([aria-disabled=\"true\"]), a[href]") ?? []);
+		if (!enabled.length) return;
+		event.preventDefault();
+		const index = enabled.indexOf(document.activeElement);
+		const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === keys[0] ? -1 : 1)));
+		updateTabStops(next, enabled);
+		enabled[next].focus();
+	};
+	function __children$1(__props, __s, __extra) {
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$0);
+			queueRefAttach(__s, _m1 = (node) => groupRef.current = node, _m0 = _root);
+			(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+			setEventHandler(_root, "$$keydown", onKeyDown);
+			_b = bag8(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, null, void 0);
+			__s.refFields = _rm$3;
+		} else {
+			{
+				const _r = (node) => groupRef.current = node;
+				if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+			}
+			setEventHandler(_b.a, "$$keydown", onKeyDown);
+		}
+		_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:b42e71c7", setPlainAttribute);
+		_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-label", props.label, "b:46a701c5", setAriaAttribute);
+		_b.e = updateFreshClassName([
+			"vx-button-group",
+			`vx-button-group--${orientation}`,
+			props.className
+		], _b.e, _b.a);
+		{
+			const _v = props.style;
+			if (_b.f !== _v) {
+				setStyle(_b.a, _v, _b.f);
+				_b.f = _v;
+			}
+		}
+		_b.i = bindSignalChild(__s, _b.i, 1, _b.a, props.children, "b:6eb0559a", null, void 0, void 0, void 0, true);
+	}
+	componentSlot(__s, 0, __block.parentNode, ButtonGroupProvider, {
+		"value": value,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:01e7970e");
+};
+function updateTabStops(index, members) {
+	for (let i = 0; i < members.length; i++) members[i].tabIndex = i === index ? 0 : -1;
+}
+//#endregion
+export { ButtonGroup };