BbTag

<template>
	<div class="flex max-w-md flex-col gap-2">
		<BbTag
			id="invite-recipients"
			v-model="recipients"
			autocomplete="email"
			label="Invite people"
			:max="5"
			name="recipients"
			placeholder="Add an email address"
			prepend:icon="lucide:mail"
			:warnings="warning"
			@duplicate="onDuplicate"
			@max="onMax"
			@update:model-value="warning = []"
		/>

		<p class="text-sm opacity-70">{{ recipients.length }} of 5 invited</p>
	</div>
</template>

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

const recipients = ref<string[]>([users[0]!.email, users[1]!.email]);
const warning = ref<string[]>([]);

// A refused entry is reported, not rendered. Showing it is our job — try
// re-adding an address that is already there, or adding a sixth one.
const onDuplicate = (value: string) => {
	warning.value = [`${value} is already on the list.`];
};

const onMax = (value: string) => {
	warning.value = [`Five invites is the cap, so ${value} was not added.`];
};
</script>

<template>
	<div class="flex max-w-md flex-col gap-2">
		<!-- Either key commits the current text. A comma also splits pasted text. -->
		<BbTag
			id="divider-labels"
			v-model="labels"
			:divider="[',', 'Enter']"
			hint="Separate labels with a comma, or press Enter."
			label="Issue labels"
			name="labels"
			persistent-hint
			placeholder="bug, regression, needs-triage"
		/>

		<p class="text-sm opacity-70">
			{{ labels.join(' · ') || 'No labels yet' }}
		</p>
	</div>
</template>

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

const labels = ref<string[]>(['bug', 'needs-triage']);
</script>

<template>
	<div class="flex max-w-md flex-col gap-2">
		<BbTag
			id="keyboard-skills"
			v-model="chosen"
			hint="Empty field: Backspace highlights, Backspace again removes, arrows move, Escape returns to typing."
			label="Skills"
			name="skills"
			persistent-hint
			placeholder="Add a skill"
		/>

		<p class="text-sm opacity-70">
			{{ chosen.length }} skill{{ chosen.length === 1 ? '' : 's' }} listed
		</p>
	</div>
</template>

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

// Four chips, so the highlight has somewhere to walk.
const chosen = ref<string[]>(skills.slice(0, 4));
</script>

<template>
	<div class="flex max-w-md flex-col gap-4">
		<!-- `required` stops applying the moment the array has one entry. -->
		<BbTag
			id="states-keywords"
			v-model="keywords"
			:errors="keywordErrors"
			label="Search keywords"
			name="keywords"
			placeholder="Add a keyword"
			required
		/>

		<!-- A spinner, not a lock: the field stays editable while this runs. -->
		<BbTag
			id="states-aliases"
			v-model="aliases"
			hint="Checking these against the registry…"
			label="Domain aliases"
			loading
			name="aliases"
			persistent-hint
		/>

		<!-- readonly, not disabled: chips stay visible, focusable and copyable. -->
		<BbTag
			id="states-inherited"
			label="Inherited from the workspace"
			:model-value="inherited"
			name="inherited"
			readonly
		/>
	</div>
</template>

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

const keywords = ref<string[]>([]);
const aliases = ref<string[]>(['vantera.io', 'vantera.dev']);
const inherited = clone(initialTags);

const keywordErrors = computed(() =>
	keywords.value.length === 0 ? ['Add at least one keyword.'] : []
);
</script>