Usage
Use the compositional components CSelect
& CSelectItem
to compose the select element.
<script lang="ts" setup>
const selectItems = ref([
{ name: 'Wow', value: 'Cool', disabled: false },
{ name: 'Sick', value: 'Lool', disabled: true },
{ name: 'Lol', value: 'Rofl', disabled: false },
])
const selectedVal = ref()
</script>
<template>
<CSelect
v-model="selectedVal"
:options="selectItems"
placeholder="Example select"
value-key="value"
label="Example select"
class="min-w-50 w-auto"
>
<template #selected="{ selected }">
{{ selected.name }}
</template>
<template #default="{ items }">
<CSelectItem
v-for="item in items"
:key="item.name"
:selected="item.value === selectedVal"
:value="item.value"
:disabled="item.disabled"
>
{{ item.name }}
</CSelectItem>
</template>
</CSelect>
</template>
Float
The component utilises @headlessui-float/vue
for floating. For the moment only the placement
, offset
and strategy
props are hoisted. The default strategy for the dropdown is absolute
, you can however change this to fixed
as seen below.
<script lang="ts" setup>
const selectItems = ref([
{ name: 'Wow', value: 'Cool', disabled: false },
{ name: 'Sick', value: 'Lool', disabled: true },
{ name: 'Lol', value: 'Rofl', disabled: false },
])
const selectedVal = ref()
</script>
<template>
<CSelect
v-model="selectedVal"
:options="selectItems"
placeholder="Example select"
value-key="value"
label="Example select"
class="min-w-50 w-auto"
placement="top-start"
strategy="fixed"
>
<template #selected="{ selected }">
{{ selected.name }}
</template>
<template #default="{ items }">
<CSelectItem
v-for="item in items"
:key="item.name"
:selected="item.value === selectedVal"
:value="item.value"
:disabled="item.disabled"
>
{{ item.name }}
</CSelectItem>
</template>
</CSelect>
</template>
Active styles
The SelectItem
has a group class that allows us to style based on the parents state. We also apply an .active
class when the item is selected, meaning we can use this with group modifiers to apply custom active styling.
group-[.active]:text-canvas-100
The #default
slot passes through the reactive active
state. You can also use this for custom active styling or logic.
Props
Select
modelValuerequired
any
placement
Placement
"bottom-start"
"top"
"left"
"bottom"
"right"
"bottom-end"
"top-end"
"top-start"
"left-end"
"left-start"
"bottom-start"
"right-end"
"right-start"
strategy
Strategy
"absolute"
"fixed"
"absolute"
offset
number
4
name
string
placeholder
string
label
string
id
string
errors
string[]
options
any[]
valueKey
string
disabled
boolean
loading
boolean
required
boolean
useIndex
boolean
SelectItem
selectedrequired
boolean
value
string | number | boolean | object
undefined
icon
string
tags
any[]
disabled
boolean