BbTable

<template>
	<div class="flex flex-col gap-3">
		<BbSelect
			id="order-status-filter"
			v-model="status"
			class="max-w-sm"
			clearable
			:items="statusOptions"
			label="Status"
			multiple
			name="status"
			placeholder="Every status"
		/>

		<BbTable
			v-model:sort="sortModel"
			caption="Orders, filtered by status"
			:columns="columns"
			:compact="isMobile"
			:dependencies="[status, sort]"
			:deps-debounce-time="200"
			item-value="id"
			:items="fetchOrders"
			loading-text="Loading orders…"
			empty-text="No order has that status."
		>
			<!-- The slot name is the key in kebab-case: `customerId` is `#customer-id`.
			     `value` in the scope is the ROW's value (its `item-value`), so read
			     the cell's own field from `item`. -->
			<template #customer-id="{ item }">
				<span class="flex min-w-0 items-center gap-2">
					<BbAvatar
						:alt="userById[item.customerId]?.fullName"
						size="lg"
						:src="userById[item.customerId]?.avatar"
					/>
					<span class="truncate">{{ userById[item.customerId]?.fullName }}</span>
				</span>
			</template>
			<template #status="{ content, item }">
				<BbBadge size="sm" :variant="statusVariant[item.status]">{{ content }}</BbBadge>
			</template>
		</BbTable>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbAvatar, BbBadge, BbSelect, BbTable, useMobile } from 'bitboss-ui';
import type { BadgeVariantType, BbTableColumn, BbTableSortEntry } from 'bitboss-ui';
import type { Order, OrderStatus } from '~/demo-data';
import { delay, orderStatusLabels, orders, orderStatuses, userById } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

// Fixed zone so the prerendered date matches the hydrated one.
const day = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' });

// On a phone the reference, status and total carry the row, in compact rows;
// the rest waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Order>[] => [
	// `rowHeader` names each row for a screen reader: every cell is read with it.
	{
		key: 'reference',
		label: 'Reference',
		sortable: true,
		rowHeader: true,
		// An ID reads as one token: keep it on one line.
		width: 'max-content',
	},
	{ key: 'customerId', label: 'Customer', hidden: isMobile.value },
	{
		key: 'status',
		label: 'Status',
		sortable: true,
		formatter: (value: OrderStatus) => orderStatusLabels[value],
	},
	{ key: 'placedAt', label: 'Placed', sortable: true, formatter: (iso: string) => day.format(new Date(iso)), hidden: isMobile.value },
	{
		key: 'total',
		label: 'Total',
		align: 'right',
		sortable: true,
		formatter: euro.format,
	},
]);

// Badge variants from a lookup, so the names stay type-checked.
const statusVariant: Record<OrderStatus, BadgeVariantType> = {
	pending: 'outline',
	processing: 'secondary',
	shipped: 'primary',
	delivered: 'secondary',
	cancelled: 'destructive',
	refunded: 'outline',
};

const statusOptions = orderStatuses.map((value) => ({
	value,
	label: orderStatusLabels[value],
}));

// The open orders: everything not yet delivered, cancelled or refunded.
const status = ref<OrderStatus[] | null>(['pending', 'processing', 'shipped']);

// Unsorted means "newest first" (the API default). One column at a time: keep
// only the entry the reader clicked last, so every header click reorders.
const sort = ref<BbTableSortEntry[]>([]);
const sortModel = computed({
	get: () => sort.value,
	set: (entries: BbTableSortEntry[]) => (sort.value = entries.slice(-1)),
});

const compareOrders = (left: Order, right: Order, key: string): number => {
	const leftValue = left[key as keyof Order];
	const rightValue = right[key as keyof Order];

	if (typeof leftValue === 'number' && typeof rightValue === 'number') {
		return leftValue - rightValue;
	}

	return String(leftValue).localeCompare(String(rightValue));
};

// Stands in for `api.orders.list({ status, orderBy: sort })`. Dependencies are
// the whole request wiring: no watcher, manual loading state, or race handling.
const fetchOrders = (): Promise<Order[]> =>
	delay(
		orders
			.filter((order) => !status.value?.length || status.value.includes(order.status))
			.toSorted((left, right) => {
				if (!sort.value.length) return right.placedAt.localeCompare(left.placedAt);
				for (const [key, direction] of sort.value) {
					const comparison = compareOrders(left, right, key);
					if (comparison !== 0) return direction === 'asc' ? comparison : -comparison;
				}

				return 0;
			}),
		700
	);
</script>

<template>
	<BbTable
		caption="Workspace equipment catalogue"
		:columns="visibleColumns"
		item-value="id"
		:items="catalogue"
	/>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

// A column is `{ key, label }`. `key` pulls the cell out of the record, so the
// rows go in exactly as the API returned them — nothing is pre-mapped.
const columns: BbTableColumn<Product>[] = [
	{ key: 'name', label: 'Product' },
	// `max-content` keeps a SKU on one line; the name wraps instead.
	{ key: 'sku', label: 'SKU', width: 'max-content' },
	{ key: 'stock', label: 'Stock', align: 'right' },
];

// On a phone the name and stock carry the row; the SKU waits for a wider screen.
const { isMobile } = useMobile();
const visibleColumns = computed(() =>
	columns.map((column) => ({ ...column, hidden: isMobile.value && column.key === 'sku' }))
);

const catalogue = products.slice(0, 6);
</script>

<template>
	<BbTable
		caption="Orders placed in June"
		:columns="columns"
		item-value="id"
		:items="recentOrders"
	/>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Order } from '~/demo-data';
import { orders, userById } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});
const day = new Intl.DateTimeFormat('en-GB', {
	dateStyle: 'medium',
	// The timestamps are UTC: pin the zone so server and browser agree on the day.
	timeZone: 'UTC',
});

// On a phone the reference and total carry the row; the rest waits for a
// wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Order>[] => [
	// `rowHeader`: a screen reader announces the reference with every cell of its row.
	{ key: 'reference', label: 'Reference', rowHeader: true, width: 'max-content' },
	{
		// The row stores a foreign key; the formatter resolves it. Denormalising
		// a customer name into every order would be data the table invented.
		key: 'customerId',
		label: 'Customer',
		formatter: (id: number) => userById[id]?.fullName,
		placeholder: 'Unknown customer',
		hidden: isMobile.value,
	},
	{
		key: 'placedAt',
		label: 'Placed',
		formatter: (value: string) => day.format(new Date(value)),
		hidden: isMobile.value,
	},
	{
		// A virtual column: `lines` is on the record but `key` names nothing the
		// table can extract, so the formatter computes the cell from `item`.
		key: 'lineCount',
		label: 'Lines',
		align: 'center',
		formatter: (_content, _key, item: Order) => item.lines.length,
	},
	{ key: 'total', label: 'Total', align: 'right', formatter: euro.format },
]);

const recentOrders = orders.filter((order) => order.placedAt.startsWith('2026-06'));
</script>

<template>
	<BbTable
		caption="Stock levels, with depleted rows flagged"
		:columns="columns"
		item-value="id"
		:items="catalogue"
		:row-class="rowClass"
	>
		<!--
			`#<key>` replaces the cell body. The column stays in `columns`: its
			label, alignment and width still come from there.
		-->
		<template #status="{ content, item }">
			<BbBadge size="sm" :variant="statusVariant[item.status]">
				{{ content }}
			</BbBadge>
		</template>
	</BbTable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { BbBadge, BbTable, useMobile } from 'bitboss-ui';
import type { BadgeVariantType, BbTableColumn } from 'bitboss-ui';
import type { Product, ProductStatus } from '~/demo-data';
import { products, productStatusLabels } from '~/demo-data';

// On a phone the name and its status carry the row; SKU and count wait for
// a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product', rowHeader: true },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{
		// The formatter still runs: `content` reaches the slot already formatted,
		// so the badge shows the label and the row keeps storing the code.
		key: 'status',
		label: 'Status',
		formatter: (value: ProductStatus) => productStatusLabels[value],
	},
	{ key: 'stock', label: 'On hand', align: 'right', hidden: isMobile.value },
]);

// A lookup object, not a template-composed name: the variant names stay
// type-checked against the registry.
const statusVariant: Record<ProductStatus, BadgeVariantType> = {
	'in-stock': 'secondary',
	'low-stock': 'outline',
	backorder: 'outline',
	discontinued: 'destructive',
};

// `row-class` runs per record and lands on `.bb-table__row`. State that
// concerns the whole record belongs here, not in a cell slot that paints one
// column.
const rowClass = (product: Product) =>
	product.stock === 0 ? 'bg-[color:var(--bb-muted)] text-[color:var(--bb-text-muted)]' : '';

const catalogue = products.filter((product) => product.stock < 20).slice(0, 6);
</script>

<template>
	<BbTable
		v-model:sort="sort"
		caption="Catalogue with an annotated header"
		:columns="columns"
		item-value="id"
		:items="sorted"
	>
		<!--
			`:prepend` renders BEFORE the column's existing header content, so the
			built-in sort button survives and the right-aligned label stays flush
			with its numbers. Replacing `#header:stock` outright would take the
			button with it.
		-->
		<template #stock:header:prepend>
			<BbButton
				v-bb-tooltip="'Units across all warehouses'"
				class="me-1"
				icon="lucide:info"
				size="xs"
				variant="ghost"
			>
				About on-hand stock
			</BbButton>
		</template>
	</BbTable>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbTable, useMobile, vBbTooltip } from 'bitboss-ui';
import type { BbTableColumn, BbTableSortEntry } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

// On a phone the SKU waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product', sortable: true },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{ key: 'stock', label: 'On hand', align: 'right', sortable: true },
]);

const sort = ref<BbTableSortEntry[]>([]);

const catalogue = products.slice(0, 5);

// The table reports the sort; applying it is this code's job. Entries are in
// priority order.
const sorted = computed(() =>
	catalogue.toSorted((left, right) => {
		for (const [key, direction] of sort.value) {
			const a = left[key as keyof Product];
			const b = right[key as keyof Product];
			const order =
				typeof a === 'number' && typeof b === 'number'
					? a - b
					: String(a).localeCompare(String(b));
			if (order !== 0) return direction === 'asc' ? order : -order;
		}
		return 0;
	})
);
</script>

<template>
	<BbTable
		:caption="`Lines on order ${order.reference}`"
		:columns="columns"
		item-value="productId"
		:items="lines"
		pt:last-row="font-medium"
	>
		<!--
			`#<key>:last` fills one column's cell in a row after the data rows. The
			cell sits on its column's own track, so the total stays under Amount
			when columns move or hide. `items` is the rows in view.
		-->
		<template #product-id:last>Total</template>
		<template #amount:last>{{ euro.format(total) }}</template>
	</BbTable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Order, OrderLine } from '~/demo-data';
import { orders, productById } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

// On a phone the unit price waits for a wider screen; the totals row follows.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<OrderLine>[] => [
	{
		key: 'productId',
		label: 'Product',
		formatter: (id: number) => productById[id]?.name,
	},
	{ key: 'quantity', label: 'Qty', align: 'right' },
	{
		key: 'unitPrice',
		label: 'Unit price',
		align: 'right',
		formatter: euro.format,
		hidden: isMobile.value,
	},
	{
		// A virtual column: the line total, so the footer sum sits under sums.
		key: 'amount',
		label: 'Amount',
		align: 'right',
		formatter: (_content, _key, line: OrderLine) =>
			euro.format(line.quantity * line.unitPrice),
	},
]);

// One order's lines, so the footer total is that order's total.
const order = orders.find((entry) => entry.reference === 'ORD-2026-0480') as Order;
const lines = order.lines;

const total = lines.reduce((sum, line) => sum + line.quantity * line.unitPrice, 0);
</script>

<template>
	<div class="flex flex-col gap-2">
		<BbTable
			v-model:sort="sort"
			caption="Catalogue, sortable by product, category and price"
			:columns="columns"
			:compact="isMobile"
			item-value="id"
			:items="sorted"
		/>

		<p class="text-sm opacity-70">
			Sort model: <code>{{ JSON.stringify(sort) }}</code>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn, BbTableSortEntry } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

const columns: BbTableColumn<Product>[] = [
	{ key: 'name', label: 'Product', sortable: true },
	{ key: 'category', label: 'Category', sortable: true },
	{
		key: 'price',
		label: 'Price',
		align: 'right',
		sortable: true,
		formatter: euro.format,
	},
];

// Compact rows on a phone, so the three sortable columns fit.
const { isMobile } = useMobile();

// Seeded, so the table opens pre-sorted. The column-level `sorted` field would
// only set `aria-sort`; the model is what moves the indicator.
const sort = ref<BbTableSortEntry[]>([['category', 'asc']]);

const catalogue = products.slice(0, 8);

// The table reports the model and nothing else. Applying it is this code's job —
// here client-side, on a server-driven table by forwarding it as `orderBy`.
const sorted = computed(() => {
	if (sort.value.length === 0) return catalogue;

	return [...catalogue].sort((left, right) => {
		for (const [key, direction] of sort.value) {
			const a = left[key as keyof Product];
			const b = right[key as keyof Product];
			const compared =
				typeof a === 'number' && typeof b === 'number'
					? a - b
					: String(a).localeCompare(String(b));
			if (compared !== 0) return direction === 'asc' ? compared : -compared;
		}
		return 0;
	});
});
</script>

<template>
	<div class="flex flex-col gap-2">
		<BbTable
			v-model="selected"
			v-model:select-all="allPages"
			v-model:unselected-items="excluded"
			caption="Catalogue"
			:columns="columns"
			item-value="id"
			:items="catalogue"
			legend="Select products to add to a purchase order"
			name="productIds"
			select-all-label="Select every product"
			selectable
		/>

		<p class="text-sm opacity-70">
			<template v-if="allPages">
				All products selected{{ excluded.length ? `, ${excluded.length} excluded` : '' }}. Post
				<code>{ all: true, except: [{{ excluded.join(', ') }}] }</code>.
			</template>
			<template v-else>
				Selected ids: <code>{{ selected.length ? selected.join(', ') : 'none' }}</code>
			</template>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

// On a phone the SKU waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product' },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{ key: 'stock', label: 'On hand', align: 'right' },
]);

// `item-value="id"` is what puts ids in the model instead of whole rows, and
// what lets the selection survive a refetch that replaced every object.
const selected = ref<number[]>([]);

// The "all across pages" pair. In all-mode `selected` stays empty on purpose —
// read these two, never infer "everything is selected" from the model.
const allPages = ref(false);
const excluded = ref<number[]>([]);

const catalogue = products.slice(0, 6);
</script>

<template>
	<div class="flex flex-col gap-2">
		<BbTable
			v-model="replacement"
			caption="Replacement candidates"
			:columns="columns"
			item-value="id"
			:items="candidates"
			legend="Choose the replacement product"
			:multiple="false"
			select-text="Choose"
			selectable
		/>

		<p class="text-sm opacity-70">
			Model: <code>{{ replacement ?? 'null' }}</code>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

// On a phone the category waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product' },
	{ key: 'category', label: 'Category', hidden: isMobile.value },
	{
		key: 'price',
		label: 'Price',
		align: 'right',
		formatter: euro.format,
	},
]);

// `:multiple="false"` renders radios and the model holds one value, or `null`.
// `select-text` names the radio column's header for screen readers (visually
// hidden); each radio is labelled from its row's cells.
const replacement = ref<number | null>(null);

const candidates = products.filter((product) => product.category === 'Displays');
</script>

<template>
	<div class="flex flex-col gap-3">
		<div class="flex flex-wrap gap-2">
			<BbButton :disabled="loading" size="sm" variant="outline" @click="firstLoad">
				First load (no rows yet)
			</BbButton>
			<BbButton :disabled="loading" size="sm" variant="outline" @click="refetch">
				Refetch (rows on screen)
			</BbButton>
		</div>

		<BbTable
			caption="Catalogue"
			:columns="columns"
			item-value="id"
			:items="rows"
			:loading="loading"
			loading-text="Loading the catalogue…"
		/>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { delay, products } from '~/demo-data';

// On a phone the SKU waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product', skeleton: 'text' },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{ key: 'stock', label: 'On hand', align: 'right' },
]);

const catalogue = products.slice(0, 5);
const rows = ref<Product[]>([...catalogue]);
const loading = ref(false);

// Nothing to keep on screen: the table draws skeleton rows.
const firstLoad = async () => {
	rows.value = [];
	loading.value = true;
	rows.value = await delay([...catalogue], 1600);
	loading.value = false;
};

// Rows already on screen: they stay, dimmed and `inert`, under a progress bar.
// Try clicking a row while it runs — the body does not respond, on purpose.
const refetch = async () => {
	loading.value = true;
	await delay(null, 1600);
	loading.value = false;
};
</script>

<template>
	<div class="flex flex-col gap-3">
		<BbTextInput
			id="catalogue-filter"
			v-model="query"
			label="Filter the catalogue"
			name="q"
			placeholder="Try monitor, or keyboard"
		/>

		<BbTable
			caption="Catalogue, filtered"
			:columns="columns"
			item-value="id"
			:items="filtered"
		>
			<!--
				The slot fills the table's own full-width cell, already centred
				and already spanning every column. Pass content, never a row.
			-->
			<template #empty>
				<div class="flex flex-col items-center gap-2 py-4">
					<p class="m-0 text-sm">No product matches "{{ query }}".</p>
					<BbButton size="sm" variant="outline" @click="query = ''">
						Clear the filter
					</BbButton>
				</div>
			</template>
		</BbTable>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbTable, BbTextInput, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { matches, products } from '~/demo-data';

// On a phone the category waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product' },
	{ key: 'category', label: 'Category', hidden: isMobile.value },
	{ key: 'stock', label: 'On hand', align: 'right' },
]);

const query = ref<string | null>('bookshelf');

const filtered = computed(() =>
	products.filter((product) => matches(product.name, query.value ?? '')).slice(0, 6)
);
</script>

<template>
	<div class="overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]">
		<BbTable
			caption="Catalogue, eight products per page"
			:columns="visibleColumns"
			item-value="id"
			:items="pageItems"
			:page="page"
			:per-page="perPage"
			pt:body="min-h-[calc(8*(var(--cell-h)+1.4px))] content-start"
			:total-items="products.length"
		/>

		<!-- The range line keeps to one line; the pager takes the rest of the row
		     and fits its buttons to it. No `justify-between`, no `flex-wrap`. -->
		<div class="flex items-center gap-2 border-t border-[color:var(--bb-border)] px-3 py-2">
			<p class="shrink-0 text-xs whitespace-nowrap text-[color:var(--bb-text-muted)] tabular-nums">
				{{ from }}–{{ to }} of {{ products.length }}
			</p>
			<BbPagination
				v-model="page"
				label="Catalogue pages"
				:per-page="perPage"
				:total-items="products.length"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbPagination, BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

const columns: BbTableColumn<Product>[] = [
	{ key: 'name', label: 'Product', rowHeader: true },
	{ key: 'category', label: 'Category' },
	{ key: 'stock', label: 'On hand', align: 'right' },
];

// On a phone the product and its stock carry the row.
const { isMobile } = useMobile();
const secondary = new Set(['category']);
const visibleColumns = computed(() =>
	columns.map((column) => ({ ...column, hidden: isMobile.value && secondary.has(column.key) }))
);

const perPage = 8;
const page = ref(1);

const from = computed(() => (page.value - 1) * perPage + 1);
const to = computed(() => Math.min(page.value * perPage, products.length));

// The body keeps the height of a full page, so the short last page does not
// pull the pager up under the pointer.
// The table never slices. You hand it the current page; `page` / `per-page` /
// `total-items` are what let it announce the rows behind the ones on screen.
const pageItems = computed(() => products.slice(from.value - 1, to.value));
</script>

<template>
	<div class="flex flex-col gap-3">
		<!-- Outside the table's subtree. No props and no refs travel between them. -->
		<div
			class="flex min-h-11 flex-wrap items-center gap-2 rounded-[var(--bb-radius)] px-3 py-1.5 text-sm"
			:class="selectedCount ? 'bg-[var(--bb-muted)]' : ''"
		>
			<template v-if="selectedCount">
				<span class="me-auto font-medium">{{ selectedCount }} of {{ catalogue.length }} selected</span>
				<BbButton prepend:icon="lucide:percent" size="sm" variant="outline" @click="discount">
					Discount 10%
				</BbButton>
				<BbButton prepend:icon="lucide:archive" size="sm" variant="outline" @click="archive">
					Archive
				</BbButton>
				<BbButton size="sm" variant="ghost" @click="clearSelection">Clear</BbButton>
			</template>
			<span v-else class="opacity-70">Select products to discount or archive them.</span>
		</div>

		<BbTable
			id="catalogue-table"
			caption="Catalogue"
			:columns="columns"
			item-value="id"
			:items="catalogue"
			legend="Select products for a bulk update"
			selectable
		/>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbTable, useBbTableContext, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

// On a phone the SKU waits for a wider screen; the name and price stay.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product' },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{ key: 'price', label: 'Price', align: 'right', formatter: euro.format },
]);

// The table's `id` is the rendezvous key. A typo here does not error — it
// silently creates a second state node that syncs with nothing.
const table = useBbTableContext('catalogue-table');

const catalogue = ref<Product[]>(products.slice(0, 6).map((p) => ({ ...p })));

// `selected` holds item values (`item-value="id"`), not rows.
const selectedIds = computed(() => (table.selected.value ?? []) as number[]);
const selectedCount = computed(() => selectedIds.value.length);
const clearSelection = () => (table.selected.value = []);

const discount = () => {
	catalogue.value = catalogue.value.map((p) =>
		selectedIds.value.includes(p.id) ? { ...p, price: Math.round(p.price * 90) / 100 } : p
	);
};

const archive = () => {
	catalogue.value = catalogue.value.filter((p) => !selectedIds.value.includes(p.id));
	clearSelection();
};
</script>

<template>
	<BbTable
		v-model:expanded-items="expanded"
		actions-text="Details"
		caption="Orders, with their lines on demand"
		:columns="visibleColumns"
		:compact="isMobile"
		item-value="id"
		:items="recentOrders"
	>
		<!-- The #actions slot creates the actions column. `expandProps` wires
		     aria-expanded, aria-controls and the click: no @click of your own. -->
		<template #actions="{ expanded: isOpen, expandProps }">
			<BbButton
				v-bind="expandProps"
				:append:icon="isOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
				size="sm"
				variant="ghost"
			>
				Lines
			</BbButton>
		</template>

		<!-- One full-width row below the record it belongs to. -->
		<template #expand="{ item }">
			<div class="bg-[color:var(--bb-muted)] px-3 py-2.5 text-sm">
				<!-- Money stays in the Total column; the lines read as text. -->
				<ul class="m-0 flex list-none flex-col gap-1 p-0">
					<li v-for="line in item.lines" :key="line.productId">
						{{ productById[line.productId]?.name }}
						<span class="text-[color:var(--bb-text-muted)]">
							× {{ line.quantity }} at {{ euro.format(line.unitPrice) }}
						</span>
					</li>
				</ul>
			</div>
		</template>
	</BbTable>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Order } from '~/demo-data';
import { orders, productById, userById } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

const columns: BbTableColumn<Order>[] = [
	{ key: 'reference', label: 'Reference', rowHeader: true, width: 'max-content' },
	{
		key: 'customerId',
		label: 'Customer',
		formatter: (id: number) => userById[id]?.fullName,
	},
	{ key: 'total', label: 'Total', align: 'right', formatter: euro.format },
];

// On a phone the customer waits for a wider screen and the rows go compact,
// so the toggle stays in view.
const { isMobile } = useMobile();
const visibleColumns = computed(() =>
	columns.map((column) => ({ ...column, hidden: isMobile.value && column.key === 'customerId' }))
);

// The open rows, keyed by `item-value` — ids, so expansion survives a refetch.
const expanded = ref<number[]>([9001]);

const recentOrders = orders.slice(0, 5);
</script>

<template>
	<div class="flex flex-col gap-3 sm:flex-row sm:items-start">
		<!-- `min-width: 0` lets this flex item shrink, so the table scrolls itself. -->
		<div class="min-w-0 grow">
			<!-- `keyboard-navigation` makes the table an ARIA grid with one tab stop:
			     the arrows move between cells, Enter or Space opens the row.
			     `pt:row:highlighted` tints the row the panel is showing. -->
			<BbTable
				v-model:highlighted="openOrder"
				caption="Orders; open one to preview it"
				:columns="columns"
				:compact="isMobile"
				item-value="id"
				:items="recentOrders"
				keyboard-navigation
				pt:row:highlighted="bg-[color:color-mix(in_oklab,var(--bb-primary)_14%,var(--bb-panel))] font-medium"
			/>
		</div>

		<aside
			aria-live="polite"
			class="w-full shrink-0 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3 text-sm sm:w-52"
		>
			<template v-if="active">
				<p class="m-0 font-medium">{{ active.reference }}</p>
				<p class="mt-0.5 mb-2 text-xs text-[color:var(--bb-text-muted)]">
					{{ userById[active.customerId]?.fullName }}, {{ active.channel }} order
				</p>
				<ul class="m-0 flex list-none flex-col gap-1 p-0 text-xs">
					<li v-for="line in active.lines" :key="line.productId" class="flex gap-2">
						<span class="grow truncate">{{ productById[line.productId]?.name }}</span>
						<span class="text-[color:var(--bb-text-muted)]">×{{ line.quantity }}</span>
					</li>
				</ul>
				<p class="mt-2 mb-0 flex justify-between border-t border-[color:var(--bb-border)] pt-2 text-xs">
					<span>Total</span>
					<span class="font-medium tabular-nums">{{ euro.format(active.total) }}</span>
				</p>
			</template>
			<p v-else class="m-0 text-xs text-[color:var(--bb-text-muted)]">
				Click a row, or tab into the table and press Enter.
			</p>
		</aside>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Order, OrderStatus } from '~/demo-data';
import { orderById, orderStatusLabels, orders, productById, userById } from '~/demo-data';

const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
});

const columns: BbTableColumn<Order>[] = [
	// `max-content` keeps the reference on one line on a phone; the rest give way.
	{ key: 'reference', label: 'Reference', rowHeader: true, width: 'max-content' },
	{
		key: 'status',
		label: 'Status',
		formatter: (value: OrderStatus) => orderStatusLabels[value],
	},
	{ key: 'total', label: 'Total', align: 'right', formatter: euro.format },
];

// Compact rows on a phone, so the three columns fit.
const { isMobile } = useMobile();

// Binding `v-model:highlighted` turns highlight on; `null` means no row is open.
const openOrder = ref<number | null>(9002);

const active = computed(() =>
	openOrder.value === null ? null : (orderById[openOrder.value] ?? null)
);

const recentOrders = orders.slice(0, 6);
</script>

<template>
	<div class="flex flex-col gap-2">
		<BbTable
			caption="Restock queue, most urgent first"
			:columns="columns"
			item-value="id"
			:items="queue"
			reorderable-rows
			@reorder:rows="move"
		/>

		<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
			Order: <code>{{ queue.map((product) => product.sku).join(', ') }}</code>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTable, useMobile } from 'bitboss-ui';
import type { BbTableColumn } from 'bitboss-ui';
import type { Product } from '~/demo-data';
import { products } from '~/demo-data';

// On a phone the name and stock carry the row; the SKU waits for a wider screen.
const { isMobile } = useMobile();

const columns = computed((): BbTableColumn<Product>[] => [
	{ key: 'name', label: 'Product', rowHeader: true },
	{ key: 'sku', label: 'SKU', width: 'max-content', hidden: isMobile.value },
	{ key: 'stock', label: 'On hand', align: 'right' },
]);

const queue = ref<Product[]>(products.slice(0, 5));

// The table reports the move and never touches `items`. `from` and `to` index
// the rows it holds: take the row out at `from`, put it back at `to`.
function move({ from, to }: { from: number; to: number }) {
	const next = [...queue.value];
	next.splice(to, 0, ...next.splice(from, 1));
	queue.value = next;
}
</script>

<template>
	<!-- Resize the window: Channel leaves below xl, Placed below lg, Customer
	     below md. On a phone three columns remain and the order cell carries
	     the customer and the date. -->
	<BbTable
		caption="Recent orders"
		:columns="columns"
		:compact="isMobile"
		item-value="id"
		:items="recentOrders"
	>
		<template #reference="{ item }">
			<span class="font-medium whitespace-nowrap">{{ item.reference }}</span>
			<span v-if="isMobile" class="block text-xs text-[color:var(--bb-text-muted)]">
				{{ userById[item.customerId]?.fullName }} ·
				<span class="whitespace-nowrap">{{ day.format(new Date(item.placedAt)) }}</span>
			</span>
		</template>
		<template #status="{ content, item }">
			<BbBadge size="sm" :variant="statusVariant[item.status]">{{ content }}</BbBadge>
		</template>
	</BbTable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
import { BbBadge, BbTable } from 'bitboss-ui';
import type { BadgeVariantType, BbTableColumn } from 'bitboss-ui';
import type { Order, OrderChannel, OrderStatus } from '~/demo-data';
import { orderStatusLabels, orders, userById } from '~/demo-data';

// `ssrWidth`: the server and the first client render assume a 1280px window,
// so hydration matches; the real width takes over once the page is mounted.
const breakpoints = useBreakpoints(breakpointsTailwind, { ssrWidth: 1280 });
const isMobile = breakpoints.smaller('md');
const belowLg = breakpoints.smaller('lg');
const belowXl = breakpoints.smaller('xl');

// Whole amounts drop their .00, which buys the phone layout its last few pixels.
const euro = new Intl.NumberFormat('en-IE', {
	style: 'currency',
	currency: 'EUR',
	trailingZeroDisplay: 'stripIfInteger',
});
// The timestamps are UTC: pin the zone so server and browser agree on the day.
const day = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' });

const channelLabels: Record<OrderChannel, string> = {
	web: 'Web shop',
	phone: 'Phone',
	reseller: 'Reseller',
	marketplace: 'Marketplace',
};

// Each column states when it leaves. A hidden column stays declared, so it
// comes back in its place when the window widens.
const columns = computed((): BbTableColumn<Order>[] => [
	{ key: 'reference', label: 'Order', rowHeader: true },
	{
		key: 'customerId',
		label: 'Customer',
		formatter: (id: number) => userById[id]?.fullName,
		hidden: isMobile.value,
	},
	{
		key: 'placedAt',
		label: 'Placed',
		formatter: (iso: string) => day.format(new Date(iso)),
		hidden: belowLg.value,
	},
	{
		key: 'channel',
		label: 'Channel',
		formatter: (channel: OrderChannel) => channelLabels[channel],
		hidden: belowXl.value,
	},
	{ key: 'status', label: 'Status', formatter: (status: OrderStatus) => orderStatusLabels[status] },
	{ key: 'total', label: 'Total', align: 'right', formatter: euro.format },
]);

const statusVariant: Record<OrderStatus, BadgeVariantType> = {
	pending: 'outline',
	processing: 'secondary',
	shipped: 'primary',
	delivered: 'secondary',
	cancelled: 'destructive',
	refunded: 'outline',
};

const recentOrders = orders.slice(0, 6);
</script>