docs(input-menu/select-menu): add countries picker examples

This commit is contained in:
Benjamin Canac
2024-11-11 00:08:16 +01:00
parent ff1e0798d3
commit bbc6bf2455
6 changed files with 306 additions and 1 deletions

View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
const { data: countries, status, execute } = await useLazyFetch<{
name: string
code: string
emoji: string
}[]>('/api/countries.json', {
immediate: false
})
function onOpen() {
if (!countries.value?.length) {
execute()
}
}
</script>
<template>
<USelectMenu
:items="countries || []"
:loading="status === 'pending'"
label-key="name"
:filter="['name']"
:search-input="{ icon: 'i-lucide-search' }"
placeholder="Select country"
class="w-48"
@update:open="onOpen"
>
<template #leading="{ modelValue, ui }">
<span v-if="modelValue" class="size-5 text-center">
{{ modelValue?.emoji }}
</span>
<UIcon v-else name="i-lucide-earth" :class="ui.leadingIcon()" />
</template>
<template #item-leading="{ item }">
<span class="size-5 text-center">
{{ item.emoji }}
</span>
</template>
</USelectMenu>
</template>