BbNumberInput

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<BbNumberInput
			id="basic-headcount"
			v-model="headcount"
			label="Headcount"
			name="headcount"
			placeholder="How many people?"
		/>

		<p class="text-sm text-[color:var(--bb-text-muted)]">
			Model: <code>{{ headcount === null ? 'null' : headcount }}</code>
			<span> · typeof {{ typeof headcount }}</span>
		</p>
	</div>
</template>

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

// Seed it with a number, or with null for an empty field. The component emits
// `number | null` — never an empty string, never NaN — so clearing the field
// gives you null and nothing downstream has to parse anything.
const headcount = ref<number | null>(8);
</script>

<template>
	<!--
		A plain <form>, so you can see what a native post would carry. The field
		groups the digits the locale's way while you type; the model and the
		posted value stay the plain number.
	-->
	<form ref="formEl" class="flex max-w-sm flex-col gap-4" @submit.prevent>
		<BbNumberInput
			id="locale-budget"
			v-model="budget"
			hint="Type the digits; the field groups them."
			label="Annual budget"
			name="budget"
			persistent-hint
		/>

		<!-- The field as it was before: period decimal, no grouping. -->
		<BbNumberInput
			id="locale-budget-raw"
			v-model="raw"
			disable-formatting
			hint="disable-formatting: shown as typed."
			label="Annual budget, unformatted"
			name="budget-raw"
			persistent-hint
		/>

		<dl
			class="m-0 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm text-[color:var(--bb-text-muted)]"
		>
			<dt>Model</dt>
			<dd class="m-0"><code>{{ budget ?? 'null' }}</code></dd>
			<dt>Posted</dt>
			<dd class="m-0"><code>{{ posted }}</code></dd>
		</dl>
	</form>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
import { BbNumberInput } from 'bitboss-ui';

const budget = ref<number | null>(10005.6);
const raw = ref<number | null>(10005.6);

// What a native post sends: `name` sits on a hidden input that carries the
// raw value, so FormData never sees the grouped text.
const formEl = ref<HTMLFormElement>();
const posted = ref('');
const readPosted = async () => {
	await nextTick();
	if (!formEl.value) return;
	posted.value = JSON.stringify(Object.fromEntries(new FormData(formEl.value)));
};
onMounted(readPosted);
watch([budget, raw], readPosted);
</script>

<template>
	<div class="flex max-w-sm flex-col gap-4">
		<!--
			Whole degrees, 16 to 28. Above 28 it settles back at once; below 16 it
			waits for blur, so typing 20 can pass through 2.
		-->
		<BbNumberInput
			id="bounds-setpoint"
			v-model="setpoint"
			hint="Between 16 and 28 °C, whole degrees."
			label="Office setpoint"
			:max="28"
			:max-precision="0"
			:min="16"
			name="setpoint"
			persistent-hint
			unit="celsius"
		/>

		<!--
			Always two decimals: min-precision pads with zeros you type over, and
			max-precision refuses a third digit as it is typed.
		-->
		<BbNumberInput
			id="bounds-tolerance"
			v-model="tolerance"
			hint="Two decimals, always shown. A third is refused."
			label="Tolerance"
			:max="5"
			:max-precision="2"
			:min="0"
			:min-precision="2"
			name="tolerance"
			persistent-hint
			unit="celsius"
		/>

		<p class="text-sm text-[color:var(--bb-text-muted)]">
			Model: setpoint <code>{{ setpoint ?? 'null' }}</code>, tolerance
			<code>{{ tolerance ?? 'null' }}</code>
		</p>
	</div>
</template>

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

const setpoint = ref<number | null>(21);
const tolerance = ref<number | null>(0.5);
</script>

<template>
	<div
		class="flex max-w-md flex-wrap items-end justify-between gap-4 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-4"
	>
		<div class="flex flex-col gap-0.5">
			<p class="m-0 text-sm font-medium">{{ item.name }}</p>
			<p class="m-0 text-xs text-[color:var(--bb-text-muted)]">
				{{ formatEur(item.price) }} each · {{ item.stock }} in stock
			</p>
			<p class="m-0 mt-2 text-sm font-medium tabular-nums">
				Subtotal {{ formatEur(subtotal) }}
			</p>
		</div>

		<BbNumberInput
			id="stepper-quantity"
			v-model="quantity"
			class="w-36"
			label="Quantity"
			:max="item.stock"
			:max-precision="0"
			:min="1"
			name="quantity"
			:pt="{ input: 'text-center tabular-nums' }"
		>
			<!--
				The slot scope hands you the step functions, so the buttons need no
				state of their own. They are icon-only, so they need a label.
			-->
			<template #prepend="{ decrease }">
				<BbButton
					aria-label="Decrease quantity"
					:disabled="(quantity ?? 0) <= 1"
					icon="lucide:minus"
					size="xs"
					variant="ghost"
					@click="decrease"
				/>
			</template>
			<template #append="{ increase }">
				<BbButton
					aria-label="Increase quantity"
					:disabled="(quantity ?? 0) >= item.stock"
					icon="lucide:plus"
					size="xs"
					variant="ghost"
					@click="increase"
				/>
			</template>
		</BbNumberInput>
	</div>
</template>

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

// Quill Whiteboard — five in stock, which is what makes the max visible.
const item = productById[104]!;

const quantity = ref<number | null>(1);
const subtotal = computed(() => (quantity.value ?? 0) * item.price);

const formatEur = (value: number) =>
	new Intl.NumberFormat('en-GB', {
		style: 'currency',
		currency: item.currency,
	}).format(value);
</script>

<template>
	<div class="flex max-w-sm flex-col gap-4">
		<!--
			`currency` puts the symbol inside the text, where the locale writes it,
			and brings the currency's decimals: two for EUR.
		-->
		<BbNumberInput
			id="affix-price"
			v-model="price"
			currency="EUR"
			label="Unit price"
			:min="0"
			name="unit-price"
			:step="0.5"
		/>

		<!-- `unit` does the same for a measure. The icon still has its own place. -->
		<BbNumberInput
			id="affix-weight"
			v-model="weight"
			label="Shipping weight"
			:max-precision="1"
			:min="0"
			name="weight"
			prepend:icon="lucide:weight"
			unit="kilogram"
		/>

		<!-- `percent` holds the number you see: 15% is 15, not 0.15. -->
		<BbNumberInput
			id="affix-discount"
			v-model="discount"
			label="Discount"
			:max="100"
			:max-precision="0"
			:min="0"
			name="discount"
			unit="percent"
		/>

		<p class="text-sm text-[color:var(--bb-text-muted)]">
			Submitted as <code>{{ JSON.stringify({ price, weight, discount }) }}</code>
		</p>
	</div>
</template>

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

const price = ref<number | null>(productById[110]!.price);
const weight = ref<number | null>(1.4);
const discount = ref<number | null>(15);
</script>

<template>
	<div class="max-w-sm">
		<BbNumberInput
			id="messaging-seats"
			v-model="seats"
			description="Seats are billed monthly and sold in blocks of five."
			:errors="errors"
			hint="5 to 200 on the Team plan."
			label="Seats"
			:max="200"
			:max-precision="0"
			:min="5"
			name="seats"
			persistent-hint
			:warnings="warnings"
		/>
	</div>
</template>

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

const seats = ref<number | null>(20);

// min/max clamp silently, so a business rule they cannot express — "in blocks
// of five" — is yours to state. Non-empty `errors` is enough; `has-errors` is
// only for when the message lives somewhere else on the page.
const errors = computed(() =>
	seats.value !== null && seats.value % 5 !== 0
		? 'Seats are sold in blocks of five.'
		: []
);

// A warning is for a number that is valid and still worth a second look.
const warnings = computed(() =>
	seats.value !== null && seats.value > 150
		? 'Above 150 seats, Enterprise is cheaper per seat.'
		: []
);
</script>

<template>
	<!--
		No v-model: the field joins the form under its `name`, and @submit
		receives the value as a number.
	-->
	<BbForm
		class="flex max-w-md flex-col gap-4 rounded-(--bb-radius) border border-(--bb-border) p-5"
		@invalid="status = 'Enter a quantity to add the line.'"
		@submit="addLine"
	>
		<header class="flex flex-col gap-1">
			<h3 class="m-0 text-base font-semibold">Quill Whiteboard 120×90</h3>
			<p class="m-0 text-sm opacity-70">Sold singly. Delivered in two days.</p>
		</header>

		<BbNumberInput
			id="order-quantity"
			label="Quantity"
			:max-precision="0"
			:min="1"
			name="quantity"
			rules="required"
		/>

		<div class="flex flex-wrap items-center justify-between gap-3">
			<p class="m-0 text-sm opacity-70" role="status">{{ status }}</p>
			<BbButton type="submit" variant="primary">Add to order</BbButton>
		</div>
	</BbForm>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { defineRule } from 'vee-validate';
import { required } from '@vee-validate/rules';
import { BbButton, BbForm, BbNumberInput } from 'bitboss-ui';

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

const status = ref('');

// Values arrive keyed by field `name`: here `{ quantity: number | null }`.
const addLine = (values: Record<string, unknown>) => {
	status.value = `Submitted ${JSON.stringify(values)}`;
};
</script>

<template>
	<div class="flex max-w-sm flex-col gap-4">
		<!-- Clearable: the button appears on hover or focus, and emits null. -->
		<BbNumberInput
			id="states-budget"
			v-model="budget"
			clearable
			currency="EUR"
			label="Monthly budget"
			:min="0"
			name="budget"
		/>

		<!-- Loading is visual only: the field stays editable while the check runs. -->
		<BbNumberInput
			id="states-discount"
			v-model="discount"
			hint="Checked against the price list after each change."
			label="Discount"
			:loading="checking"
			:max="100"
			:max-precision="0"
			:min="0"
			name="discount"
			persistent-hint
			unit="percent"
			@update:model-value="recheck"
		/>

		<!-- Derived rather than entered, so readonly: visible and copyable. -->
		<BbNumberInput
			id="states-total"
			currency="EUR"
			label="Total after discount"
			:model-value="total"
			name="total"
			readonly
		/>

		<!-- Not yours to change at all, so disabled. -->
		<BbNumberInput
			id="states-allocated"
			disabled
			label="Seats allocated by your admin"
			:max-precision="0"
			:model-value="64"
			name="allocated"
		/>
	</div>
</template>

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

const budget = ref<number | null>(2500);
const discount = ref<number | null>(10);
const checking = ref(false);

const total = computed(
	() => ((budget.value ?? 0) * (100 - (discount.value ?? 0))) / 100
);

// A stand-in for a server check: the spinner shows for a moment after each change.
let timer: ReturnType<typeof setTimeout> | undefined;
function recheck() {
	checking.value = true;
	clearTimeout(timer);
	timer = setTimeout(() => (checking.value = false), 900);
}
onBeforeUnmount(() => clearTimeout(timer));
</script>

<template>
	<div class="flex max-w-sm flex-col gap-4">
		<BbNumberInput
			id="label-outside"
			v-model="onHand"
			label="On hand (outside)"
			:max-precision="0"
			:min="0"
			name="on-hand"
		/>

		<!--
			Left empty on purpose: a floating label rests inside the field like a
			placeholder and lifts on focus, so an empty field is where you see it.
			Do not pair it with a `placeholder` — they occupy the same spot.
		-->
		<BbNumberInput
			id="label-floating"
			v-model="incoming"
			label="Incoming (floating)"
			label-mode="floating"
			:max-precision="0"
			:min="0"
			name="incoming"
		/>

		<BbNumberInput
			id="label-inside"
			v-model="reserved"
			label="Reserved (inside)"
			label-mode="inside"
			:max-precision="0"
			:min="0"
			name="reserved"
		/>
	</div>
</template>

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

const onHand = ref<number | null>(148);
const incoming = ref<number | null>(null);
const reserved = ref<number | null>(12);
</script>

<template>
	<section
		class="flex max-w-md flex-col gap-3 rounded-(--bb-radius) border border-(--bb-border) p-5"
	>
		<header class="flex flex-col gap-1">
			<h3 class="m-0 text-base font-semibold">API rate limits</h3>
			<p class="m-0 text-sm opacity-70">Applied per key, effective immediately.</p>
		</header>

		<!--
			compact + layout="horizontal": each limit reads as one dense row,
			label left and value right, the way a settings screen wants it. Both
			depend on the label staying outside the field. Phones get the vertical
			layout, since a side-by-side row never wraps.
		-->
		<BbNumberInput
			id="limits-rpm"
			v-model="requestsPerMinute"
			compact
			:layout="rowLayout"
			label="Requests / min"
			:max="10000"
			:max-precision="0"
			:min="10"
			name="rpm"
			:step="10"
		/>

		<BbNumberInput
			id="limits-burst"
			v-model="burst"
			compact
			:layout="rowLayout"
			label="Burst limit"
			:max="20000"
			:max-precision="0"
			:min="10"
			name="burst"
			:step="10"
		/>

		<BbNumberInput
			id="limits-timeout"
			v-model="timeout"
			compact
			:layout="rowLayout"
			label="Timeout"
			:max="120"
			:max-precision="0"
			:min="1"
			name="timeout"
			unit="second"
		/>
	</section>
</template>

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

const { isMobile } = useMobile();
const rowLayout = computed(() => (isMobile.value ? 'vertical' : 'horizontal'));

const requestsPerMinute = ref<number | null>(500);
const burst = ref<number | null>(1000);
const timeout = ref<number | null>(30);
</script>