BbRadioGroup

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<BbRadioGroup
			id="ticket-priority"
			v-model="priority"
			description="Sets the response time the customer is promised."
			:items="priorities"
			legend="Priority"
		/>

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

<script setup lang="ts">
import { ref } from 'vue';
import { BbRadioGroup } from 'bitboss-ui';
import { priorities } from '~/demo-data';

// One value, not an array — and `null` for "nothing chosen yet", which is the
// only state in which the group is empty. Choosing again replaces the value;
// nothing the user can do puts it back to null.
const priority = ref<string | null>(null);
</script>

<template>
	<div class="flex flex-col gap-6">
		<div class="flex flex-wrap gap-10">
			<!--
				Neither group is given a `name`. Each generates one for itself, so
				the two sets never clear each other — which is what makes the prop
				optional in v3.
			-->
			<BbRadioGroup
				id="member-team"
				v-model="team"
				:items="teams"
				legend="Team"
			/>
			<BbRadioGroup
				id="member-role"
				v-model="role"
				:items="userRoles"
				legend="Role"
			/>
		</div>

		<p class="text-sm opacity-70">
			Tab reaches each group once. Inside it, the arrow keys move focus and
			change the choice together — selected: {{ team }} · {{ role }}
		</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbRadioGroup } from 'bitboss-ui';
import { teams, userRoles } from '~/demo-data';

const team = ref<string>('Engineering');
const role = ref<string>('Developer');
</script>

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<!--
			The roles above your own stay on screen so the user can see the ladder,
			but the predicate makes them unpickable — and the arrow keys skip
			straight past them.
		-->
		<BbRadioGroup
			id="invite-role"
			v-model="role"
			description="You are an Admin, so you can grant any role below Admin."
			:items="userRoles"
			legend="Role for the new member"
			:selectable="atOrBelowAdmin"
		/>

		<p class="text-sm opacity-70">Inviting as {{ role }}</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbRadioGroup } from 'bitboss-ui';
import type { UserRole } from '~/demo-data';
import { userRoles } from '~/demo-data';

// Owner and Admin sit above the current user; everything below is grantable.
const atOrBelowAdmin = (candidate: UserRole) =>
	userRoles.indexOf(candidate) > userRoles.indexOf('Admin');

const role = ref<UserRole>('Developer');
</script>

<template>
	<form class="flex max-w-sm flex-col gap-4" @submit.prevent="submit">
		<!--
			`required` marks the field. The message that tells the user what to do
			comes from `errors`, which is a separate channel — set both.
		-->
		<BbRadioGroup
			id="stock-status"
			v-model="status"
			:errors="errors"
			:item-text="statusLabel"
			:items="productStatuses"
			legend="Stock status"
			legend-mode="inside"
			required
		/>

		<BbButton class="self-start" type="submit" variant="primary">
			Update product
		</BbButton>

		<p class="text-sm opacity-70" role="status">{{ result }}</p>
	</form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbButton, BbRadioGroup } from 'bitboss-ui';
import type { ProductStatus } from '~/demo-data';
import { productStatusLabels, productStatuses } from '~/demo-data';

// An accessor function, for when the text is not a field on the item.
const statusLabel = (value: ProductStatus) => productStatusLabels[value];

const status = ref<ProductStatus | null>(null);
const attempted = ref(false);
const result = ref('Submit without choosing to see the message.');

const errors = computed(() =>
	attempted.value && status.value === null ? 'Choose a stock status.' : []
);

function submit() {
	attempted.value = true;
	if (status.value === null) return;
	result.value = `Saved as “${statusLabel(status.value)}”.`;
}
</script>

<template>
	<BbRadioGroup
		id="appearance-tiles"
		v-model="theme"
		class="tiles"
		input-direction="horizontal"
		item-text="label"
		item-value="id"
		:items="themes"
		legend="Appearance"
	>
		<!-- The dot becomes the tile's picture. -->
		<template #icon="{ item }">
			<BbIcon :icon="item.icon" size="lg" />
		</template>
		<template #label="{ text }">
			<span class="text-sm">{{ text }}</span>
		</template>
	</BbRadioGroup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbIcon, BbRadioGroup } from 'bitboss-ui';

type Appearance = { id: string; label: string; icon: string };

const themes: Appearance[] = [
	{ id: 'light', label: 'Light', icon: 'lucide:sun' },
	{ id: 'dark', label: 'Dark', icon: 'lucide:moon' },
	{ id: 'system', label: 'System', icon: 'lucide:monitor' },
];

const theme = ref('system');
</script>

<style scoped>
/*
 * The options row is a plain wrapping flexbox and each option is content-sized,
 * so `flex: 1 1 0` on the option is what makes the tiles share the row evenly.
 * There is no grid to opt into.
 */
.tiles :deep(.bb-base-radio-group__container) {
	flex-wrap: nowrap;
	gap: 0.5rem;
	max-width: 24rem;
}

.tiles :deep(.bb-base-radio-group-option) {
	align-items: center;
	border: var(--bb-border-w) solid var(--bb-border);
	border-radius: var(--bb-radius);
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.75rem 0.5rem;
}

/* The chosen tile paints itself from the modifier the component sets. */
.tiles :deep(.bb-base-radio-group-option--selected) {
	background: color-mix(in oklab, var(--bb-primary) 8%, var(--bb-panel));
	border-color: var(--bb-primary);
}
</style>