@octane-xplat/pager 0.14.0 → 0.16.0

package/dist/web/Pager.web.tsrx.js

@@ -1,334 +0,0 @@
-import { applyWebProps } from "./platformProps.web.js";
-import { layoutChildProps } from "./layout-child.web.js";
-import { bag4, bagOf, child, clone, drainFrag, forBlock, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, snapshotSpread, template, useEffect, useRef } from "octane";
-import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings, setAriaAttributeIfChanged } from "octane/internal/client";
-//#region src/Pager.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-pager-page\" role=\"group\" aria-roledescription=\"slide\"></div>");
-var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
-var _hs$ = /* @__PURE__ */ hookSlots(8);
-var _key$1 = (item, i) => i;
-function __item$2(item, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	const i = __block.itemIndex;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		const _root = clone(_t$0);
-		_b = bag4(__s, _root, void 0, _root, null, __s);
-	}
-	_b.a = setAriaAttributeIfChanged(`${i + 1} of ${props.items.length}`, _b.a, _b.b, "aria-label");
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, props.renderItem(item, i), "b:a193c343", null, void 0, void 0, void 0, true);
-}
-var _rm$5 = [
-	"s",
-	"p",
-	"o"
-];
-function __then$0(__props, __s, __extra) {
-	const host = __extra[0];
-	const props = __extra[1];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m15, _m16;
-		const _root = clone(_t$1);
-		_m0 = (el) => {
-			host.current = el;
-			applyWebProps(el, props.web);
-		};
-		_m1 = props.id;
-		_m2 = ["vx-pager", props.className];
-		_m3 = snapshotSpread(layoutChildProps(props));
-		_m4 = props.accessibilityRole ?? "group";
-		_m5 = "carousel";
-		_m6 = props.accessibilityLabel;
-		_m7 = props.accessible === false ? true : void 0;
-		_m8 = props.accessibilityHint;
-		_m9 = props.accessibilityValue;
-		_m10 = props.accessibilityState?.disabled;
-		_m11 = props.accessibilityState?.selected;
-		_m12 = props.accessibilityState?.checked;
-		_m13 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
-		_m15 = bindSignalHostPropSources(__s, void 0, _root, [
-			[
-				false,
-				"ref",
-				_m0
-			],
-			[
-				false,
-				"id",
-				_m1
-			],
-			[
-				false,
-				"className",
-				_m2
-			],
-			[true, _m3],
-			[
-				false,
-				"role",
-				_m4
-			],
-			[
-				false,
-				"aria-roledescription",
-				_m5
-			],
-			[
-				false,
-				"aria-label",
-				_m6
-			],
-			[
-				false,
-				"aria-hidden",
-				_m7
-			],
-			[
-				false,
-				"aria-description",
-				_m8
-			],
-			[
-				false,
-				"aria-valuetext",
-				_m9
-			],
-			[
-				false,
-				"aria-disabled",
-				_m10
-			],
-			[
-				false,
-				"aria-selected",
-				_m11
-			],
-			[
-				false,
-				"aria-checked",
-				_m12
-			],
-			[
-				false,
-				"aria-live",
-				_m13
-			]
-		], "b:452923c1", true);
-		markDangerouslySetInnerHTMLChildren(_root);
-		_m16 = child(_root);
-		_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: _root,
-			p: _m15,
-			q: _m16
-		});
-		__s.refFields = _rm$5;
-	} else {
-		{
-			const _v = (el) => {
-				host.current = el;
-				applyWebProps(el, props.web);
-			};
-			if (_b.a !== _v) _b.a = _v;
-		}
-		{
-			const _v = props.id;
-			if (_b.b !== _v) _b.b = _v;
-		}
-		{
-			const _v = ["vx-pager", props.className];
-			if (_b.c !== _v) _b.c = _v;
-		}
-		_b.d = snapshotSpread(layoutChildProps(props));
-		{
-			const _v = props.accessibilityRole ?? "group";
-			if (_b.e !== _v) _b.e = _v;
-		}
-		{
-			const _v = "carousel";
-			if (_b.f !== _v) _b.f = _v;
-		}
-		{
-			const _v = props.accessibilityLabel;
-			if (_b.g !== _v) _b.g = _v;
-		}
-		{
-			const _v = props.accessible === false ? true : void 0;
-			if (_b.h !== _v) _b.h = _v;
-		}
-		{
-			const _v = props.accessibilityHint;
-			if (_b.i !== _v) _b.i = _v;
-		}
-		{
-			const _v = props.accessibilityValue;
-			if (_b.j !== _v) _b.j = _v;
-		}
-		{
-			const _v = props.accessibilityState?.disabled;
-			if (_b.k !== _v) _b.k = _v;
-		}
-		{
-			const _v = props.accessibilityState?.selected;
-			if (_b.l !== _v) _b.l = _v;
-		}
-		{
-			const _v = props.accessibilityState?.checked;
-			if (_b.m !== _v) _b.m = _v;
-		}
-		{
-			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
-			if (_b.n !== _v) _b.n = _v;
-		}
-		_b.p = bindSignalHostPropSources(__s, _b.p, _b.o, [
-			[
-				false,
-				"ref",
-				_b.a
-			],
-			[
-				false,
-				"id",
-				_b.b
-			],
-			[
-				false,
-				"className",
-				_b.c
-			],
-			[true, _b.d],
-			[
-				false,
-				"role",
-				_b.e
-			],
-			[
-				false,
-				"aria-roledescription",
-				_b.f
-			],
-			[
-				false,
-				"aria-label",
-				_b.g
-			],
-			[
-				false,
-				"aria-hidden",
-				_b.h
-			],
-			[
-				false,
-				"aria-description",
-				_b.i
-			],
-			[
-				false,
-				"aria-valuetext",
-				_b.j
-			],
-			[
-				false,
-				"aria-disabled",
-				_b.k
-			],
-			[
-				false,
-				"aria-selected",
-				_b.l
-			],
-			[
-				false,
-				"aria-checked",
-				_b.m
-			],
-			[
-				false,
-				"aria-live",
-				_b.n
-			]
-		], "b:452923c1", true);
-	}
-	forBlock(__s, 1, _b.o, props.items, _key$1, __item$2, 50, [props], null, _b.q, true, "f3hircj");
-}
-function __else$6(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[1];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1;
-		const _root = clone(_t$2);
-		_m0 = __block.parentNode;
-		_m1 = child(_root);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag4(__s, null, _m0, _m1, null, __s);
-	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:8f0f2972", _b.b, true, void 0, true);
-}
-var Pager = function Pager(props, __s, __extra) {
-	const __block = __s.block;
-	const host = useRef(null, _hs$ + 0);
-	const latest = useRef(props, _hs$ + 1);
-	const current = useRef(props.page ?? props.defaultPage ?? 0, _hs$ + 2);
-	const settle = useRef(null, _hs$ + 3);
-	useEffect(() => {
-		latest.current = props;
-	}, [props], _hs$ + 4);
-	useEffect(() => {
-		const el = host.current;
-		if (!el) return;
-		const onScroll = () => {
-			if (settle.current !== null) clearTimeout(settle.current);
-			settle.current = setTimeout(() => {
-				settle.current = null;
-				const el2 = host.current;
-				if (!el2 || el2.clientWidth === 0) return;
-				const max = Math.max(latest.current.items.length - 1, 0);
-				const next = Math.max(0, Math.min(max, Math.round(el2.scrollLeft / el2.clientWidth)));
-				if (next !== current.current) {
-					current.current = next;
-					latest.current.onPageChange?.(next);
-				}
-			}, 90);
-		};
-		el.addEventListener("scroll", onScroll, { passive: true });
-		return () => {
-			el.removeEventListener("scroll", onScroll);
-			if (settle.current !== null) clearTimeout(settle.current);
-		};
-	}, [], _hs$ + 5);
-	useEffect(() => {
-		const el = host.current;
-		if (!el || current.current <= 0) return;
-		el.scrollLeft = current.current * el.clientWidth;
-	}, [], _hs$ + 6);
-	useEffect(() => {
-		const el = host.current;
-		if (!el || props.page === void 0 || props.page === current.current) return;
-		current.current = props.page;
-		el.scrollTo({
-			left: props.page * el.clientWidth,
-			behavior: "smooth"
-		});
-	}, [props.page], _hs$ + 7);
-	ifBlock(__s, 0, __block.parentNode, props.items.length > 0, __then$0, __else$6, __block.endMarker, [host, props], 2);
-};
-//#endregion
-export { Pager };

package/dist/web/index.js

@@ -1,2 +0,0 @@
-import { Pager } from "./Pager.web.tsrx.js";
-export { Pager };

package/dist/web/layout-child.web.js

@@ -1,47 +0,0 @@
-//#region src/layout-child.web.ts
-/** The shared contract is "numbers are dips" (RN semantics), but octane's DOM
-*  renderer keeps React's unitless list — lineHeight is unitless there, so
-*  `style={{lineHeight: 40}}` would render a 40× multiplier instead of 40px.
-*  lineHeight is the one unitless-in-React prop that is a length in the
-*  shared vocabulary; force the px suffix. */
-function normStyle(style) {
-	if (style && typeof style.lineHeight === "number") return {
-		...style,
-		lineHeight: style.lineHeight + "px"
-	};
-	return style;
-}
-var FLEX_JUSTIFY = {
-	start: "flex-start",
-	end: "flex-end"
-};
-var FLEX_ALIGN = {
-	start: "flex-start",
-	end: "flex-end"
-};
-/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
-*  attribute has no CSS equivalent and is ignored on web. Grid indices are
-*  zero-based in the shared API, matching NativeScript. */
-function layoutChildProps(props, baseStyle = props.style) {
-	const style = { ...normStyle(baseStyle) };
-	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
-	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
-	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
-	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
-	if (props.left !== void 0) style.left = props.left;
-	if (props.top !== void 0) style.top = props.top;
-	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
-	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
-	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
-	if (props.order !== void 0) style.order = props.order;
-	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
-	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
-	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
-	if (props.gap !== void 0) style.gap = props.gap;
-	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
-	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
-	if (typeof style.lineHeight === "number") style.lineHeight = style.lineHeight + "px";
-	return { style };
-}
-//#endregion
-export { layoutChildProps, normStyle };

package/dist/web/octane-client-build.json

@@ -1,8 +0,0 @@
-{
-  "version": 1,
-  "buildId": "a4e920b0-d311-42b3-ad90-36799b27d84f",
-  "mode": "production",
-  "capabilities": {
-    "independentHydration": false
-  }
-}

package/dist/web/platformProps.web.js

@@ -1,9 +0,0 @@
-//#region src/platformProps.web.ts
-/** Apply a web escape-hatch bag after the primitive's standard props. */
-function applyWebProps(el, props) {
-	if (!el || !props) return;
-	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
-	else el[name] = value;
-}
-//#endregion
-export { applyWebProps };

package/src/Pager.web.test.tsrx

@@ -1,83 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, createRoot } from 'octane';
-import { Pager } from './Pager.web.tsrx';
-
-// jsdom has no layout — clientWidth is always 0 — so the leaf's scroll math
-// is exercised against a stubbed page width. scrollTo is unimplemented in
-// jsdom; the stub records controlled-page writes.
-
-const items = ['a', 'b', 'c'];
-const renderItem = (item: string) => <span class="pg">{item}</span>;
-
-function mount(extra: any = {}) {
-	const el = document.createElement('div');
-	document.body.appendChild(el);
-	const root = createRoot(el);
-	act(() => root.render(<Pager items={items} renderItem={renderItem} {...extra} />));
-	const pager = el.querySelector('.vx-pager') as any;
-	Object.defineProperty(pager, 'clientWidth', { value: 100, configurable: true });
-	pager.scrollTo = vi.fn((opts: any) => {
-		pager.scrollLeft = opts.left;
-		pager.dispatchEvent(new Event('scroll'));
-	});
-
-	return { el, root, pager };
-}
-
-describe('Pager (web leaf)', () => {
-	afterEach(() => {
-		vi.useRealTimers();
-	});
-
-	it('renders one snap page per item, plus renderEmpty', () => {
-		const { el, root, pager } = mount();
-		expect(pager.className).toContain('vx-pager');
-		expect(el.querySelectorAll('.vx-pager-page')).toHaveLength(3);
-		expect(el.querySelectorAll('.pg')).toHaveLength(3);
-		root.unmount();
-		el.remove();
-	});
-
-	it('fires onPageChange once the scroll settles', () => {
-		vi.useFakeTimers();
-		const onPageChange = vi.fn();
-		const { el, root, pager } = mount({ onPageChange });
-		pager.scrollLeft = 200;
-		pager.dispatchEvent(new Event('scroll'));
-		vi.advanceTimersByTime(200);
-		expect(onPageChange).toHaveBeenCalledTimes(1);
-		expect(onPageChange).toHaveBeenCalledWith(2);
-		root.unmount();
-		el.remove();
-	});
-
-	it('suppresses the echo of its own controlled writes', () => {
-		vi.useFakeTimers();
-		const onPageChange = vi.fn();
-		const el = document.createElement('div');
-		document.body.appendChild(el);
-		const root = createRoot(el);
-		const set = { page: 0 };
-		function Host() @{
-			<Pager items={items} renderItem={renderItem} page={set.page} onPageChange={onPageChange} />;
-		}
-
-		act(() => root.render(<Host />));
-		const pager = el.querySelector('.vx-pager') as any;
-		Object.defineProperty(pager, 'clientWidth', { value: 100, configurable: true });
-		pager.scrollTo = vi.fn((opts: any) => {
-			pager.scrollLeft = opts.left;
-			pager.dispatchEvent(new Event('scroll'));
-		});
-
-		set.page = 1;
-		act(() => root.render(<Host />));
-		expect(pager.scrollTo).toHaveBeenCalledWith({ left: 100, behavior: 'smooth' });
-		vi.advanceTimersByTime(200);
-		// The programmatic scroll must not report back as a user swipe.
-		expect(onPageChange).not.toHaveBeenCalled();
-		root.unmount();
-		el.remove();
-	});
-});

package/src/cx.mobile.ts

@@ -1,9 +0,0 @@
-/** Native renderers now normalize the declarative `className` prop, but
- *  imperative `view.className` writes still need a pre-joined string — NS
- *  splits on ' ' only. Native leaves keep normalizing through cx() before
- *  handing className to an intrinsic so both paths accept the same values.
- *  (The DOM renderer already flattens arrays, so web leaves don't need
- *  this.) */
-export function cx(...parts: any[]): string {
-	return parts.flat(Infinity).filter(Boolean).join(' ')
-}