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

docs(command-palette): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-14 14:47:39 +02:00
parent 6e9f6a8ef4
commit e9affb6f5b
11 changed files with 481 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
View File

@@ -1,40 +1,68 @@
<script setup lang="ts">
const groups = [{
id: 'settings',
items: [{
label: 'Profile',
icon: 'i-heroicons-user',
kbds: ['meta', 'P']
}, {
label: 'Billing',
icon: 'i-heroicons-credit-card',
kbds: ['meta', 'B'],
slot: 'billing'
}, {
label: 'Notifications',
icon: 'i-heroicons-bell'
}, {
label: 'Security',
icon: 'i-heroicons-lock-closed'
}]
items: [
{
label: 'Profile',
icon: 'i-heroicons-user',
kbds: ['meta', 'P']
},
{
label: 'Billing',
icon: 'i-heroicons-credit-card',
kbds: ['meta', 'B'],
slot: 'billing'
},
{
label: 'Notifications',
icon: 'i-heroicons-bell'
},
{
label: 'Security',
icon: 'i-heroicons-lock-closed'
}
]
}, {
id: 'users',
label: 'Users',
slot: 'users',
items: [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
{
label: 'Benjamin Canac',
suffix: 'benjamincanac'
},
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin'
},
{
label: 'Sébastien Chopin',
suffix: 'atinux'
},
{
label: 'Romain Hamel',
suffix: 'romhml'
},
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama'
},
{
label: 'Daniel Roe',
suffix: 'danielroe'
},
{
label: 'Neil Richter',
suffix: 'noook'
}
]
}]
</script>
<template>
<UCommandPalette :groups="groups" class="flex-1 h-80">
<template #users-leading="{ index }">
<UAvatar :src="`https://i.pravatar.cc/120?img=${index}`" size="2xs" />
<template #users-leading="{ item }">
<UAvatar :src="`https://github.com/${item.suffix}.png`" size="2xs" />
</template>
<template #billing-label="{ item }">

24
docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
View File

@@ -1,24 +0,0 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
const selected = ref(users[0])
function onSelect(item: any) {
console.log(item)
}
</script>
<template>
<UCommandPalette
v-model="selected"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>

25
docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
View File

@@ -1,25 +0,0 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
const selected = ref([users[0], users[1]])
function onSelect(items: any) {
console.log(items)
}
</script>
<template>
<UCommandPalette
v-model="selected"
multiple
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>

60
docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
View File

@@ -2,11 +2,55 @@
const open = ref(false)
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png'
}
},
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin',
avatar: {
src: 'https://github.com/smarroufin.png'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png'
}
},
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama',
avatar: {
src: 'https://github.com/Haythamasalama.png'
}
},
{
label: 'Daniel Roe',
suffix: 'danielroe',
avatar: {
src: 'https://github.com/danielroe.png'
}
},
{
label: 'Neil Richter',
suffix: 'noook',
avatar: {
src: 'https://github.com/noook.png'
}
}
]
</script>
@@ -20,11 +64,7 @@ const users = [
/>
<template #content>
<UCommandPalette
close
:groups="[{ id: 'users', items: users }]"
@update:open="open = $event"
/>
<UCommandPalette close :groups="[{ id: 'users', items: users }]" @update:open="open = $event" />
</template>
</UModal>
</template>

57
docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
View File

@@ -1,29 +1,36 @@
<script setup lang="ts">
const items = [{
id: '/',
label: 'Introduction',
level: 1
}, {
id: '/getting-started#whats-new-in-v3',
label: 'What\'s new in v3?',
level: 2
}, {
id: '/getting-started#radix-vue-3',
label: 'Radix Vue',
level: 3
}, {
id: '/getting-started#tailwind-css-v4',
label: 'Tailwind CSS v4',
level: 3
}, {
id: '/getting-started#tailwind-variants',
label: 'Tailwind Variants',
level: 3
}, {
id: '/getting-started/installation',
label: 'Installation',
level: 1
}]
const items = [
{
id: '/',
label: 'Introduction',
level: 1
},
{
id: '/getting-started#whats-new-in-v3',
label: 'What\'s new in v3?',
level: 2
},
{
id: '/getting-started#radix-vue-3',
label: 'Radix Vue',
level: 3
},
{
id: '/getting-started#tailwind-css-v4',
label: 'Tailwind CSS v4',
level: 3
},
{
id: '/getting-started#tailwind-variants',
label: 'Tailwind Variants',
level: 3
},
{
id: '/getting-started/installation',
label: 'Installation',
level: 1
}
]
function postFilter(searchTerm: string, items: any[]) {
// Filter only first level items if no searchTerm

82
docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
View File

@@ -1,13 +1,82 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
},
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama',
to: 'https://github.com/Haythamasalama',
target: '_blank',
avatar: {
src: 'https://github.com/Haythamasalama.png',
alt: 'Haythamasalama'
}
},
{
label: 'Daniel Roe',
suffix: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png',
alt: 'danielroe'
}
},
{
label: 'Neil Richter',
suffix: 'noook',
to: 'https://github.com/noook',
target: '_blank',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
}
}
]
const searchTerm = ref('Th')
const searchTerm = ref('')
function onSelect() {
searchTerm.value = ''
}
</script>
<template>
@@ -15,5 +84,6 @@ const searchTerm = ref('Th')
v-model:search-term="searchTerm"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>

155
docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue Normal file
View File

@@ -0,0 +1,155 @@
<script setup lang="ts">
const router = useRouter()
const groups = ref([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
},
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama',
to: 'https://github.com/Haythamasalama',
target: '_blank',
avatar: {
src: 'https://github.com/Haythamasalama.png',
alt: 'Haythamasalama'
}
},
{
label: 'Daniel Roe',
suffix: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png',
alt: 'danielroe'
}
},
{
label: 'Neil Richter',
suffix: 'noook',
to: 'https://github.com/noook',
target: '_blank',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
}
}
]
},
{
id: 'actions',
items: [
{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-heroicons-document-plus',
kbds: [
'meta',
'N'
],
select: () => {
console.log('Add new file')
}
},
{
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-heroicons-folder-plus',
kbds: [
'meta',
'F'
],
select: () => {
console.log('Add new folder')
}
},
{
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-heroicons-hashtag',
kbds: [
'meta',
'H'
],
select: () => {
console.log('Add hashtag')
}
},
{
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-heroicons-tag',
kbds: [
'meta',
'L'
],
select: () => {
console.log('Add label')
}
}
]
}
])
function onSelect(item: any) {
if (item.select) {
item.select()
} else if (item.to) {
if (typeof item.to === 'string' && (item.target === '_blank' || item.to.startsWith('http'))) {
window.open(item.to, item.target || '_blank')
} else {
router.push(item.to)
}
}
}
</script>
<template>
<UCommandPalette
:groups="groups"
class="flex-1 h-80"
@update:model-value="onSelect"
/>
</template>

4
docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
View File

@@ -18,7 +18,7 @@ const groups = computed(() => [{
</script>
<template>
<UDrawer>
<UDrawer :handle="false">
<UButton
label="Search users..."
color="neutral"
@@ -32,7 +32,7 @@ const groups = computed(() => [{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-96 border-t border-[var(--ui-border)]"
class="h-80"
/>
</template>
</UDrawer>

2
docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
View File

@@ -32,7 +32,7 @@ const groups = computed(() => [{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-96"
class="h-80"
/>
</template>
</UModal>