@octane-xplat/ui 0.5.0 → 0.7.0

package/src/NavLink.tsrx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { NavLinkProps } from './props';
+import { Pressable } from './Pressable.tsrx';
+import { pushRoute, useRoute } from './route';
+import { cx } from './cx';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	<Pressable
+		className={cx(props.className, active ? props.activeClassName : undefined)}
+		onPress={() => pushRoute(props.route)}
+	>
+		<flexboxlayout flexDirection="row">{props.children}</flexboxlayout>
+	</Pressable>
+}

package/src/NavLink.web.tsrx

@@ -0,0 +1,23 @@
+import type { NavLinkProps } from './props';
+import { hrefFor, pushRoute, useRoute } from './route.web';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	const href = hrefFor(props.route);
+	const navigate = (event: any) => {
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		event.preventDefault();
+		pushRoute(props.route);
+	};
+
+	<a href={href} className={[props.className, active ? props.activeClassName : '']} onClick={navigate}>
+		{props.children}
+	</a>
+}

package/src/NavigationMenu.macos.tsrx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { NavigationMenuProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal === false ? 'column' : 'row'}
+		className={cx('vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout
+				className={cx('vx-navmenu-item', item.active && 'vx-navmenu-item--on', item.disabled && 'vx-navmenu-item--disabled')}
+				flexDirection="row"
+				alignItems="center"
+				style={{ padding: '6px 10px', borderRadius: 4, ...(item.active ? { backgroundColor: '#eaeaea' } : {}), ...(item.disabled ? { opacity: 0.5 } : {}) }}
+				onTap={item.disabled ? undefined : item.onSelect}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <label className="vx-navmenu-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/NavigationMenu.tsrx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { NavigationMenuProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal === false ? 'column' : 'row'}
+		className={cx('vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout
+				className={cx('vx-navmenu-item', item.active && 'vx-navmenu-item--on', item.disabled && 'vx-navmenu-item--disabled')}
+				onTap={item.disabled ? undefined : item.onSelect}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <label className="vx-navmenu-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/NavigationMenu.web.tsrx

@@ -0,0 +1,31 @@
+import type { NavigationMenuProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel}
+	>
+		{props.items.map((item: any) => (
+			<span
+				key={item.key}
+				role="link"
+				aria-current={item.active ? 'page' : undefined}
+				aria-disabled={item.disabled || undefined}
+				tabIndex={item.disabled ? undefined : 0}
+				className={['vx-navmenu-item', item.active ? 'vx-navmenu-item--on' : undefined, item.disabled ? 'vx-navmenu-item--disabled' : undefined]}
+				onClick={item.disabled ? undefined : item.onSelect}
+				onKeyDown={(e: any) => { if (!item.disabled && e.key === 'Enter') item.onSelect?.(); }}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <span className="vx-navmenu-label">{item.label}</span> : null}
+			</span>
+		))}
+	</nav>
+}

package/src/Overlay.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { OverlayProps } from './props'
+import { cx } from './cx'
+
+export function Overlay(props: OverlayProps) @{
+	@if (props.open) {
+		<flexboxlayout flexDirection="column" className={cx('vx-overlay', props.className)} style={props.style}>
+			{props.children}
+		</flexboxlayout>
+	}
+}

package/src/Overlay.tsrx

@@ -0,0 +1,84 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { OverlayProps } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout.mobile';
+
+function OverlayBody(props: { children?: any }) @{
+	<>{props.children}</>
+}
+
+type OpenOverlay = { host: GridLayout; root: any; dismissOnClose: boolean; unbindTheme?: () => void };
+
+/** Renders children in a separate RootLayout root above the current screen. */
+export function Overlay(props: OverlayProps) @{
+	const shown = useRef<OpenOverlay | null>(null);
+	const hostView = useRef<any>(null);
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+
+	const rootLayout = () => rootLayoutFor(hostView.current);
+
+	useEffect(() => {
+		const current = shown.current;
+		if (!props.open) {
+			if (!current) return;
+			current.dismissOnClose = false;
+			shown.current = null;
+			const rl = rootLayout();
+			if (rl && (rl as any)?.hasChild?.(current.host)) {
+				rl.close(current.host).then(
+					() => current.root.unmount?.(),
+					(error) => { console.error('[Overlay] close failed', error); current.root.unmount?.(); },
+				);
+			} else current.root.unmount?.();
+
+			return;
+		}
+
+		if (current) {
+			current.root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+			current.unbindTheme = applyThemeClasses(current.host, cx('vx-overlay-host', props.className));
+			if (props.style) Object.assign(current.host.style, props.style);
+			Object.assign(current.host, isIOS ? props.ios : isAndroid ? props.android : undefined);
+			return;
+		}
+
+		const rl = rootLayout();
+		if (!rl) return;
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx('vx-overlay-host', props.className));
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'stretch';
+		if (props.style) Object.assign(host.style, props.style);
+		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
+		const root = createNativeScriptRoot(host);
+		const opened = { host, root, dismissOnClose: true, unbindTheme };
+		shown.current = opened;
+		root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+		host.on('closed', () => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			root.unmount?.();
+			if (opened.dismissOnClose) dismiss.current?.();
+		});
+
+		const open = () => rl.open(host, props.shadeCover ? {
+			shadeCover: { opacity: 0.45, color: '#000000', tapToClose: true },
+		} : {}).catch((error: unknown) => {
+			if (shown.current === opened) shown.current = null;
+			console.error('[Overlay] open failed', error);
+			root.unmount?.();
+		});
+
+		if ((rl as any).hasChild?.(host)) {
+			rl.close(host).then(open, (error) => console.error('[Overlay] stale host close failed', error));
+		} else open();
+	}, [props.open, props.children, props.shadeCover, props.className, props.style, props.ios, props.android]);
+
+	<stacklayout ref={(v: any) => { hostView.current = v; }} style={{ width: 0, height: 0 }} />
+}

package/src/Overlay.web.tsrx

@@ -0,0 +1,23 @@
+import { createPortal } from 'octane';
+import type { OverlayProps } from './props';
+import { useThemeScheme } from './theme/theme-scheme';
+import { cx } from './cx';
+
+/** Renders an in-window overlay through the DOM renderer's body portal. */
+export function Overlay(props: OverlayProps) @{
+	const dark = useThemeScheme() === 'dark';
+
+	@if (props.open) {
+		<>{createPortal(
+			<div className={cx('vx-overlay', dark && 'dark', props.className)} style={{ ...props.style, position: 'fixed', inset: 0 }} {...props.web}>
+				@if (props.shadeCover) {
+					<div className="vx-overlay-shade" onClick={props.onDismiss} />
+				}
+				<div className="vx-overlay-content" onClick={(event: any) => event.stopPropagation()}>
+					{props.children}
+				</div>
+			</div>,
+			document.body,
+		)}</>
+	}
+}

package/src/Pagination.macos.tsrx

@@ -0,0 +1,54 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PaginationProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: { key: string; page: number | null }[] = [];
+	let lastEllipsis = false;
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push({ key: String(p), page: p });
+			lastEllipsis = false;
+		} else if (!lastEllipsis) {
+			pages.push({ key: 'e' + p, page: null });
+			lastEllipsis = true;
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		alignItems="center"
+		className={cx('vx-pagination', props.disabled && 'vx-pagination--disabled', props.className)}
+		style={props.style}
+	>
+		<flexboxlayout className="vx-page-btn" justifyContent="center" alignItems="center" style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4 }} onTap={() => go(current - 1)}><label text="‹" /></flexboxlayout>
+		@for (const e of pages; key e.key) {
+			<>{e.page == null
+				? <label className="vx-page-ellipsis" text="…" />
+				: <flexboxlayout
+					className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')}
+					justifyContent="center"
+					alignItems="center"
+					style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4, ...(e.page === current ? { backgroundColor: '#171717', borderColor: '#171717', color: '#fafafa' } : {}) }}
+					onTap={() => go(e.page!)}
+				>
+					<label text={String(e.page)} />
+				</flexboxlayout>}</>
+		}
+		<flexboxlayout className="vx-page-btn" justifyContent="center" alignItems="center" style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4 }} onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/Pagination.tsrx

@@ -0,0 +1,47 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PaginationProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: { key: string; page: number | null }[] = [];
+	let lastEllipsis = false;
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push({ key: String(p), page: p });
+			lastEllipsis = false;
+		} else if (!lastEllipsis) {
+			pages.push({ key: 'e' + p, page: null });
+			lastEllipsis = true;
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-pagination', props.disabled && 'vx-pagination--disabled', props.className)}
+		style={props.style}
+	>
+		<flexboxlayout className="vx-page-btn" onTap={() => go(current - 1)}><label text="‹" /></flexboxlayout>
+		@for (const e of pages; key e.key) {
+			{e.page == null
+				? <label className="vx-page-ellipsis" text="…" />
+				: <flexboxlayout className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')} onTap={() => go(e.page!)}>
+					<label text={String(e.page)} />
+				</flexboxlayout>}
+		}
+		<flexboxlayout className="vx-page-btn" onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/Pagination.web.tsrx

@@ -0,0 +1,50 @@
+import type { PaginationProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: (number | '…')[] = [];
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push(p);
+		} else if (pages[pages.length - 1] !== '…') {
+			pages.push('…');
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-pagination', props.disabled ? 'vx-pagination--disabled' : undefined, props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel ?? 'Pagination'}
+	>
+		<span className="vx-page-btn" role="button" aria-disabled={current <= 1 || props.disabled || undefined} tabIndex={0} onClick={() => go(current - 1)}>‹</span>
+		{pages.map((p: number | '…', i: number) => (
+			p === '…'
+				? <span key={'e' + i} className="vx-page-ellipsis">…</span>
+				: <span
+					key={p}
+					className={['vx-page-btn', p === current ? 'vx-page-btn--on' : undefined]}
+					role="button"
+					aria-current={p === current ? 'page' : undefined}
+					tabIndex={0}
+					onClick={() => go(p)}
+					onKeyDown={(e: any) => { if (e.key === 'Enter') go(p); }}
+				>
+					{p}
+				</span>
+		))}
+		<span className="vx-page-btn" role="button" aria-disabled={current >= count || props.disabled || undefined} tabIndex={0} onClick={() => go(current + 1)}>›</span>
+	</nav>
+}

package/src/PinInput.macos.tsrx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './text-controls.macos.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
+		@for (const i of Array.from({ length }, (_, k) => k); key i) {
+			<TextInput
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/PinInput.tsrx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
+		@for (const i of Array.from({ length }, (_, k) => k); key i) {
+			<TextInput
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/PinInput.web.tsrx

@@ -0,0 +1,45 @@
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.web.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-pininput', props.disabled ? 'vx-pininput--disabled' : undefined, props.className]} style={props.style} role="group">
+		{Array.from({ length }, (_, i) => (
+			<TextInput
+				key={i}
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		))}
+	</div>
+}

package/src/Popover.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PopoverProps } from './props'
+import { cx } from './cx'
+
+export function Popover(props: PopoverProps) @{
+	@if (props.open) {
+		<flexboxlayout flexDirection="column" className={cx('vx-popover', props.className)} style={props.style}>
+			{props.children}
+		</flexboxlayout>
+	}
+}