@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/web/ui35.js

@@ -1,57 +1,142 @@
-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)`;
-	};
-	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);
+import { cx } from "./ui28.js";
+import { applyThemeClasses } from "./ui29.js";
+import { Popover } from "./ui33.js";
+import { bag1, bag3, clone, componentSlot, componentSlotVoid, createRoot, ifBlock, markChildrenBlock, template } from "octane";
+import { childTextHoleUpdate } from "octane/internal/client";
+//#region src/toast-anchor.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-toast\"></div>");
+function __then$3(__props, __s, __extra) {
+	const props = __extra[0];
+	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.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$5(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:46bd91a2");
+}
+var __childrenBody = {};
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$2(__props, __s, __extra) {
+		const __block = __s.block;
+		ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$3, __else$5, __block.endMarker, [props]);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Popover, {
+		"open": props.open,
+		"anchor": props.options.anchor,
+		"placement": props.options.placement ?? placementFor(props.options.position),
+		"dismissOnOutsideTap": false,
+		"children": markChildrenBlock(__children$2, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb0a2e5d");
+}
+function __then$9(__props, __s, __extra) {
+	const props = __extra[0];
+	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.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$11(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:75cbf224");
+}
+function __else$8(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$9, __else$11, __block.endMarker, __extra);
+}
+var queue = [];
+var active = false;
+var ToastBody = function ToastBody(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, props.options.anchor, __then$0, __else$8, __block.endMarker, [props]);
+};
+function placementFor(position = "bottom") {
+	return position.startsWith("top") ? "top" : "bottom";
+}
+function applyWebProps(host, props) {
+	for (const [key, value] of Object.entries(props ?? {})) if (key.includes("-")) host.setAttribute(key, String(value));
+	else host[key] = value;
+}
+function alignmentFor(position = "bottom") {
+	if (position.endsWith("-start")) return "flex-start";
+	if (position.endsWith("-end")) return "flex-end";
+	return "center";
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift();
+	const anchored = Boolean(entry.options.anchor);
+	const host = document.createElement("div");
+	const position = entry.options.position ?? "bottom";
+	const unbindTheme = applyThemeClasses(host, cx("vx-toast-host", placementFor(position) === "top" ? "vx-toast-top" : "vx-toast-bottom"));
+	applyWebProps(host, entry.options.web);
+	if (anchored) host.style.display = "none";
+	else host.style.justifyContent = alignmentFor(position);
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, {
+		...entry,
+		open: true
+	});
+	const finish = () => {
+		const cleanup = () => {
+			unbindTheme();
+			root.unmount();
+			host.remove();
+			active = false;
+			showNext();
 		};
-		raf = requestAnimationFrame(tick);
-	};
-	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;
+		if (anchored) {
+			root.render(ToastBody, {
+				...entry,
+				open: false
 			});
-		},
-		stop() {
-			cancelAnimationFrame(raf);
-		}
+			setTimeout(cleanup, 0);
+		} else cleanup();
 	};
+	setTimeout(finish, Math.max(0, entry.options.duration ?? 3e3));
 }
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
 }
 //#endregion
-export { useAnimation };
+export { showToast };

package/dist/web/ui36.js

@@ -1,22 +1,90 @@
-import { componentSlot } from "octane";
-//#region src/styled.web.tsrx
-function styled(Base, def) {
-	function Styled(props, __s, __extra) {
-		const __block = __s.block;
-		const cls = [def.base];
-		const rest = { ...props };
-		for (const k of Object.keys(def.variants ?? {})) {
-			if (props[k]) cls.push(def.variants[k]);
-			delete rest[k];
+import { hookSlots, useRef } from "octane";
+//#region src/anim.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var transformProps = {
+	translateX: (v) => `translateX(${v}px)`,
+	translateY: (v) => `translateY(${v}px)`,
+	translateZ: (v) => `translateZ(${v}px)`,
+	scale: (v) => `scale(${v})`,
+	scaleX: (v) => `scaleX(${v})`,
+	scaleY: (v) => `scaleY(${v})`,
+	rotate: (v) => `rotate(${v}deg)`,
+	rotateX: (v) => `rotateX(${v}deg)`,
+	rotateY: (v) => `rotateY(${v}deg)`,
+	skewX: (v) => `skewX(${v}deg)`,
+	skewY: (v) => `skewY(${v}deg)`
+};
+var transformStates = /* @__PURE__ */ new WeakMap();
+function writeAnimatedValue(el, prop, value) {
+	if (Object.prototype.hasOwnProperty.call(transformProps, prop)) {
+		const transformProp = prop;
+		let state = transformStates.get(el);
+		if (!state) {
+			const computed = getComputedStyle(el).transform;
+			state = {
+				base: computed === "none" ? "" : computed,
+				values: /* @__PURE__ */ new Map()
+			};
+			transformStates.set(el, state);
 		}
-		if (props.className) cls.push(props.className);
-		if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-		componentSlot(__s, 0, __block.parentNode, Base, {
-			...rest,
-			"className": cls
-		}, __block.endMarker, void 0, void 0, true, void 0, "c:2dad67ff");
+		state.values.set(transformProp, value);
+		const transforms = Object.entries(transformProps).filter(([name]) => state.values.has(name)).map(([name, toTransform]) => toTransform(state.values.get(name)));
+		el.style.transform = [state.base, ...transforms].filter(Boolean).join(" ");
+		return;
 	}
-	return Styled;
+	el.style[prop] = value;
+}
+function createAnimated(initial, prop) {
+	let el = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v) => {
+		current = v;
+		if (el) writeAnimatedValue(el, prop, v);
+	};
+	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);
+	};
+	return {
+		get value() {
+			return current;
+		},
+		bind(e) {
+			el = e;
+			if (el) writeAnimatedValue(el, prop, current);
+		},
+		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);
+		}
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
 }
 //#endregion
-export { styled };
+export { useAnimation };

package/dist/web/ui37.js

@@ -1,7 +1,22 @@
-//#region src/windows.web.ts
-/** Open a browser window using the current route unless a URL is supplied. */
-function openWindow(options = {}) {
-	return window.open(options.url ?? window.location.href, "_blank");
+import { componentSlot } from "octane";
+//#region src/styled.web.tsrx
+function styled(Base, def) {
+	function Styled(props, __s, __extra) {
+		const __block = __s.block;
+		const cls = [def.base];
+		const rest = { ...props };
+		for (const k of Object.keys(def.variants ?? {})) {
+			if (props[k]) cls.push(def.variants[k]);
+			delete rest[k];
+		}
+		if (props.className) cls.push(props.className);
+		if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+		componentSlot(__s, 0, __block.parentNode, Base, {
+			...rest,
+			"className": cls
+		}, __block.endMarker, void 0, void 0, true, void 0, "c:2dad67ff");
+	}
+	return Styled;
 }
 //#endregion
-export { openWindow };
+export { styled };

package/dist/web/ui38.js

@@ -1,38 +1,7 @@
-import { applyEscapeProps } from "./ui2.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
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _rm$1 = [
-	"r",
-	"c",
-	"b"
-];
-var Screen = /* @__PURE__ */ __s(function Screen(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m2;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		queueRefAttach(__s, _m2 = (e) => applyEscapeProps(e, props), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (e) => applyEscapeProps(e, props);
-		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:4057121c", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-screen", props.className], _b.d, _b.b);
-	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.b, _v, _b.e);
-			_b.e = _v;
-		}
-	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:80ad049e", null, void 0, void 0, void 0, true);
-});
+//#region src/windows.web.ts
+/** Open a browser window using the current route unless a URL is supplied. */
+function openWindow(options = {}) {
+	return window.open(options.url ?? window.location.href, "_blank");
+}
 //#endregion
-export { Screen };
+export { openWindow };

package/dist/web/ui39.js

@@ -1,154 +1,38 @@
-import { canGoBack, layoutsFor, popRoute, screenFor, useModalRoute, useRoute } from "./ui18.js";
-import { __s, bag3, bag4, bag9, child, clone, createScopedElement, createScopedValue, delegateEvents, evt0, evt0u, forBlock, hookSlots, ifBlock, setEventHandler, setStyle, sibling, template, useState, withSlot } from "octane";
-import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
-//#region src/Tabs.web.tsrx
+import { applyEscapeProps } from "./ui2.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
 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 _t$3 = /* @__PURE__ */ template("<div class=\"vx-modalroute\"><button class=\"vx-modalroute-shade\" aria-label=\"Dismiss\"></button><div class=\"vx-modalroute-body\"></div></div>");
-var _t$4 = /* @__PURE__ */ template("<div class=\"vx-tabsroot\" style=\"display: contents;\"><!><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(5);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
-function __then$0(__props, __s, __extra) {
-	const routed = __extra[5];
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"c",
+	"b"
+];
+var Screen = /* @__PURE__ */ __s(function Screen(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0;
+		let _m1, _m2;
 		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = routed;
-		_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];
-	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:c6e07647", 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 resolve = __extra[3];
-	const routeProps = __extra[4];
-	const setInternal = __extra[6];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4, _m5, _m6;
-		const _root = clone(_t$2);
 		_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);
+		queueRefAttach(__s, _m2 = (e) => applyEscapeProps(e, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (e) => applyEscapeProps(e, props);
+		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:feaba283", setPlainAttribute);
-	_b.c = updateFreshClassName(["vx-tabs", props.className], _b.c, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:4057121c", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-screen", props.className], _b.d, _b.b);
 	{
 		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
 		}
 	}
-	forBlock(__s, 1, _b.e, props.tabs, _key$3, __item$4, 58, [
-		active,
-		props,
-		setInternal
-	], null, _b.f, true, "f3hhxv5");
-	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, (paneRoute ? resolve(paneRoute.name, routeProps(paneRoute)) : null) ?? props.tabs[active]?.render(), "b:c35ce047", null, void 0, void 0, void 0, true);
-}
-function __then$9(__props, __s, __extra) {
-	const modalContent = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1;
-		const _root = clone(_t$3);
-		const _el0 = child(_root);
-		_m0 = evt0(_el0, "$$click", popRoute);
-		_m1 = sibling(_el0, 1);
-		_b = bag4(__s, _root, _m0, _m1, null, void 0);
-	} else evt0u(_b.a, popRoute);
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, modalContent, "b:38e2e707", null, void 0, void 0, void 0, true);
-}
-var Tabs = /* @__PURE__ */ __s(function Tabs(props, __s, __extra) {
-	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
-	let __hk = __memoRegion.hooks;
-	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
-	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 ?? "");
-	const modal = withSlot(_h$3, useModalRoute);
-	const resolve = (name, params) => {
-		const C = screenFor(name);
-		const el = props.resolveScreen ? props.resolveScreen(name, params) : C ? createScopedValue(() => createElementFromConfig("c:3fc4e2ff", C, { ...params })) : null;
-		return layoutsFor(name).reduceRight((child, L) => createScopedElement(L, {}, () => child, "c:65a1fb32"), el);
-	};
-	const routeProps = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (route) => ({
-		...route.params,
-		...route.context ?? {},
-		_pushed: canGoBack(route.stack),
-		...Object.prototype.hasOwnProperty.call(route, "loaderData") ? { data: route.loaderData } : {},
-		...Object.prototype.hasOwnProperty.call(route, "loaderError") ? { error: route.loaderError } : {}
-	}));
-	const routed = rootRoute ? resolve(rootRoute.name, routeProps(rootRoute)) : null;
-	const modalContent = modal ? resolve(modal.name, {
-		...routeProps(modal),
-		close: () => popRoute()
-	}) : null;
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m2;
-		const _root = clone(_t$4);
-		_m0 = _root;
-		const _el0 = child(_root);
-		_m1 = _el0;
-		_m2 = sibling(_el0, 1);
-		_b = bag3(__s, _root, _m0, _m1, _m2);
-	}
-	ifBlock(__s, 1, _b.a, routed, __then$0, __else$2, _b.b, [
-		active,
-		paneRoute,
-		props,
-		resolve,
-		routeProps,
-		routed,
-		setInternal
-	]);
-	{
-		const __ifCondition = modalContent;
-		ifBlock(__s, 2, _b.a, __ifCondition, __then$9, null, _b.c, __ifCondition ? [modalContent] : void 0);
-	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:80ad049e", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Tabs };
+export { Screen };