TagsDraft
<script setup lang="ts">
type TagsExampleData = { billing: string[]; general: string[] }
// Values set here to simulate the billing categories
const BILLING_TAGS = ['C', 'T', 'F']
const tags = ref<TagsExampleData>({
billing: [],
general: [],
})
const fetchAlphabet = async (query: string) => {
await new Promise((resolve) =>
setTimeout(resolve, Math.floor(Math.random() * 2000) + 1000),
)
const alphabet = Array.from({ length: 26 }, (_, i) =>
String.fromCharCode(65 + i),
)
if (query) {
return alphabet
.filter((type) => type.toLowerCase().includes(query.toLowerCase()))
.map((letter) => ({
label: letter,
value: letter,
}))
}
return alphabet.map((letter) => ({
label: letter,
value: letter,
}))
}
const asyncTagsInfiniteOptions = async (query: string) => {
return await fetchAlphabet(query)
}
/**
* This is a custom function to separate tags for current demo purpose
* A real-world implementation should rely on tag's schema to choose
* between billing and general tags.
*
* @param options - the chosen tags
*/
function update(options: string[]) {
const billing: TagsExampleData['billing'] = []
const general: TagsExampleData['general'] = []
options.forEach((opt) => {
if (BILLING_TAGS.includes(opt)) {
billing.push(opt)
} else {
general.push(opt)
}
})
return { billing, general }
}
</script>
<template>
<ClientSectionTags
:form-options="asyncTagsInfiniteOptions"
:billing-tags="tags.billing"
:general-tags="tags.general"
@client-tags:change="tags = update($event)"
/>
</template>
Integration
This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).
Troubleshooting
If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.