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.
			-->
			<BbRadioGroup
				id="member-team"
				v-model="team"
				:items="teams.slice(0, 4)"
				legend="Team"
				list-layout="vertical"
			/>
			<BbRadioGroup
				id="member-role"
				v-model="role"
				:items="userRoles.slice(1, 5)"
				legend="Role"
				list-layout="vertical"
			/>
		</div>

		<p class="m-0 text-sm opacity-70">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-md 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. `item-props` gives every role its one-line scope.
		-->
		<BbRadioGroup
			id="invite-role"
			v-model="role"
			description="You are an Admin, so you can grant any role below Admin."
			:item-props="{ description: 'scope' }"
			item-text="role"
			item-value="role"
			:items="roles"
			legend="Role for the new member"
			list-layout="vertical"
			:selectable="belowAdmin"
		/>

		<p class="m-0 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';

const scopes: Record<UserRole, string> = {
	Owner: 'Billing, deletion and every setting',
	Admin: 'Members, roles and integrations',
	Developer: 'Repositories, deploys and API keys',
	Designer: 'Design files and the component library',
	Analyst: 'Dashboards and exports',
	Editor: 'Content in shared workspaces',
	Viewer: 'Read-only access',
};

type RoleOption = { role: UserRole; scope: string };

const roles: RoleOption[] = userRoles.map((role) => ({
	role,
	scope: scopes[role],
}));

// Owner and Admin sit above the current user; everything below is grantable.
const belowAdmin = (option: RoleOption) =>
	userRoles.indexOf(option.role) > userRoles.indexOf('Admin');

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

<template>
	<!--
		Inside a BbForm the group joins under its `name`, and `rules="required"`
		holds the submit until an option is chosen.
	-->
	<BbForm
		:model="product"
		class="flex max-w-lg flex-col gap-4"
		@submit="update"
	>
		<BbRadioGroup
			id="stock-status"
			:item-text="(status: ProductStatus) => productStatusLabels[status]"
			:items="productStatuses"
			legend="Stock status"
			name="status"
			rules="required"
		/>

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

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

<script setup lang="ts">
import { ref } from 'vue';
import { defineRule } from 'vee-validate';
import { required } from '@vee-validate/rules';
import { BbButton, BbForm, BbRadioGroup } from 'bitboss-ui';
import type { ProductStatus } from '~/demo-data';
import { delay, productStatusLabels, productStatuses } from '~/demo-data';

// In an app this lives once in a validators module, not in the component.
defineRule('required', (value: unknown) => required(value) || 'Required.');

// Nothing chosen yet: a radio group holds one value or null.
const product = ref({ status: null as ProductStatus | null });
const result = ref('');

async function update(values: Record<string, unknown>) {
	await delay(null, 600);
	result.value = `Saved as “${productStatusLabels[values.status as ProductStatus]}”.`;
}
</script>

<template>
	<div class="flex flex-col gap-4">
		<BbRadioGroup v-model="status" hide-legend :items="statuses" legend="Status" variant="pill" />
		<BbRadioGroup v-model="period" hide-legend :items="periods" legend="Period" variant="line" />
	</div>
</template>

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

// A tab strip's two looks on a value picker. It is still a radio group: the
// arrow keys move and pick, and a form submits the value.
const statuses = ['All', 'Open', 'Closed', 'Archived'];
const status = ref('Open');
const periods = ['Day', 'Week', 'Month', 'Year'];
const period = ref('Week');
</script>

<template>
	<BbRadioGroup
		id="appearance-tiles"
		v-model="theme"
		item-layout="vertical"
		item-value="id"
		:items="themes"
		legend="Appearance"
		list-layout="tiles"
		name="appearance"
		pt:item="justify-items-center gap-1.5 rounded-(--bb-radius) border border-(--bb-border) px-2 py-3"
		pt:item:checked="border-(--bb-primary) bg-(--bb-primary)/10"
		pt:item:focus-visible="outline-2 outline-offset-2 outline-(--bb-ring)"
		pt:list="max-w-sm"
	>
		<!--
			Layout is two props (`list-layout="tiles"`, `item-layout="vertical"`);
			the tile's look is the `pt:item` states. The icon slot replaced the dot
			that drew the focus ring, so the tile shows keyboard focus itself.
			Here 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>