BbAlert

<template>
	<section class="flex max-w-lg flex-col gap-3">
		<h3 class="text-base font-semibold">Billing</h3>

		<!-- Most urgent first. The two problems stay until they are fixed
		     (hide-close); only the product note can be dismissed. -->
		<BbAlert
			hide-close
			icon="lucide:credit-card"
			title="Your last payment failed"
			variant="destructive"
		>
			The card ending 4242 was declined on 1 September.
			<a class="underline" href="#billing-card">Update card</a>
		</BbAlert>

		<!-- One assertive alert at a time: the quota is urgent-looking but
		     can wait, so it announces politely. -->
		<BbAlert
			aria-live="polite"
			hide-close
			icon="lucide:hard-drive"
			role="status"
			:text="`${usedGb} of ${maxGb} GB used. Uploads stop when storage is full.`"
			title="Storage almost full"
			variant="warning"
		/>

		<!-- A neutral product note: outline plus an icon, the quietest block. -->
		<BbAlert
			v-model="showNote"
			icon="lucide:languages"
			text="Invoices can now be issued in Italian, German and French."
			title="Localized invoices"
			variant="outline"
		/>

		<dl
			id="billing-card"
			class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 border-t border-[color:var(--bb-border)] pt-3 text-sm"
		>
			<dt class="text-[color:var(--bb-text-muted)]">Plan</dt>
			<dd>Team, billed monthly</dd>
			<dt class="text-[color:var(--bb-text-muted)]">Card</dt>
			<dd>Visa ending 4242</dd>
		</dl>
	</section>
</template>

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

const usedGb = 46;
const maxGb = 50;
const showNote = ref(true);
</script>

<template>
	<div class="flex max-w-md flex-col gap-3">
		<BbAlert
			hide-close
			icon="lucide:info"
			text="The catalogue shows net prices; VAT is added at checkout."
			title="Prices exclude VAT"
		/>

		<BbAlert
			hide-close
			icon="lucide:bell-ring"
			text="Stock now refreshes every 15 minutes, soon enough to warn you before a product sells out."
			title="Turn on low-stock emails"
			variant="primary"
		/>

		<BbAlert
			hide-close
			icon="lucide:triangle-alert"
			:text="`${keyboard.name} is down to ${keyboard.stock} units.`"
			title="Low stock"
			variant="warning"
		/>

		<BbAlert
			hide-close
			icon="lucide:circle-x"
			text="Row 42 has no SKU, so nothing was imported."
			title="Import failed"
			variant="destructive"
		/>
	</div>
</template>

<script setup lang="ts">
import { BbAlert } from 'bitboss-ui';
import { productById } from '~/demo-data';

const keyboard = productById[113]!;
</script>

<template>
	<!--
		The fields join the form by `name` and check themselves through `rules`.
		The summary reads the same `errors` map from the slot: it appears after
		the first failed submit and empties as each field is fixed.
	-->
	<BbForm
		v-slot="{ errors, submitCount }"
		class="flex max-w-md flex-col gap-3"
		@submit="send"
	>
		<BbAlert
			v-if="submitCount > 0 && Object.keys(errors).length > 0"
			hide-close
			icon="lucide:circle-x"
			title="The invitation was not sent"
			variant="destructive"
		>
			<ul class="m-0 list-inside list-disc p-0">
				<li v-for="(messages, path) in errors" :key="path">
					{{ messages[0] }}
				</li>
			</ul>
		</BbAlert>

		<BbTextInput
			id="invite-name"
			label="Full name"
			name="name"
			:rules="fullName"
		/>
		<BbTextInput
			id="invite-email"
			label="Work email"
			name="email"
			:rules="workEmail"
			type="email"
		/>

		<div class="flex flex-wrap items-center gap-3">
			<BbButton type="submit" variant="primary">
				Send invitation
			</BbButton>
			<p class="m-0 text-sm text-(--bb-text-muted)" role="status">
				{{ sentTo && `Invitation sent to ${sentTo}.` }}
			</p>
		</div>
	</BbForm>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbAlert, BbButton, BbForm, BbTextInput } from 'bitboss-ui';
import { delay } from '~/demo-data';

const sentTo = ref('');

const fullName = (value: string | null) =>
	Boolean(value?.trim()) || 'Enter the full name of the person to invite';
const workEmail = (value: string | null) =>
	/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value ?? '') ||
	'Enter a work email address, like [email protected]';

async function send(values: Record<string, unknown>) {
	await delay(null, 600);
	sentTo.value = String(values.email);
}
</script>

<template>
	<div class="flex max-w-md flex-col gap-3">
		<!--
			No v-if here: the component owns its own visibility and animates
			itself out when the model turns false.
		-->
		<BbAlert
			v-model="reminderVisible"
			close-label="Dismiss the email verification reminder"
			icon="lucide:mail"
			:text="`We sent a link to ${owner.email}. It expires in 24 hours.`"
			title="Verify your email"
			variant="primary"
		/>

		<BbButton
			v-if="!reminderVisible"
			class="self-start"
			prepend:icon="lucide:undo-2"
			variant="ghost"
			@click="reminderVisible = true"
		>
			Bring the reminder back
		</BbButton>
	</div>
</template>

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

const owner = userById[1]!;

// Bound, so the page can read the state back and restore it. Left unbound the
// close button would still work — it would just be a one-way trip.
const reminderVisible = ref(true);
</script>

<template>
	<div class="max-w-md">
		<BbAlert
			hide-close
			icon="lucide:sparkles"
			text="Vantera Free keeps three active projects."
			variant="primary"
		>
			<template #title> You are on the <strong>Free</strong> plan </template>

			<!--
				The slot receives the `text` prop, so the string stays where it is
				and the slot only decorates it.
			-->
			<template #text="{ text }">
				{{ text }}
				<a class="font-medium underline" href="#pricing">Compare plans</a>
			</template>
		</BbAlert>
	</div>
</template>

<script setup lang="ts">
import { BbAlert } from 'bitboss-ui';
</script>