arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 05:08:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Form): Select and InputMenu integration (#97)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-05-10 12:53:52 +02:00
committed by GitHub
parent 810d278ea7
commit 52cf471099
14 changed files with 82 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
playground/pages/input-menu.vue
View File

@@ -34,14 +34,15 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
params: { q: searchTermDebounced },
transform: (data: User[]) => {
return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
}
},
lazy: true
})
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInputMenu :items="items" placeholder="Search..." autofocus />
<UInputMenu :items="items" autofocus />
<UInputMenu :items="items" placeholder="Search..." color="gray" />
<UInputMenu :items="items" placeholder="Search..." color="primary" />
<UInputMenu :items="items" placeholder="Search..." variant="none" />

2
playground/pages/input.vue
View File

@@ -7,7 +7,7 @@ const sizes = Object.keys(theme.variants.size)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInput placeholder="Search..." autofocus />
<UInput autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
<UInput placeholder="Search..." variant="none" />

5
playground/pages/select.vue
View File

@@ -35,14 +35,15 @@ const statuses = [{
const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: User[]) => {
return data?.map(user => ({ label: user.name, value: user.id, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
}
},
lazy: true
})
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<USelect :items="items" placeholder="Search..." autofocus />
<USelect :items="items" />
<USelect :items="items" placeholder="Search..." color="gray" />
<USelect :items="items" placeholder="Search..." color="primary" />
<USelect :items="items" placeholder="Search..." variant="none" />

2
playground/pages/textarea.vue
View File

@@ -7,7 +7,7 @@ const sizes = Object.keys(theme.variants.size)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UTextarea placeholder="Search..." autofocus />
<UTextarea autofocus />
<UTextarea placeholder="Search..." color="gray" />
<UTextarea placeholder="Search..." color="primary" />
<UTextarea placeholder="Search..." variant="none" />