feat: update exampels with command component
This commit is contained in:
zernonia
parent
5798c47bdf
commit
69a498395e
|
|
@ -19,12 +19,11 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
|
|||
href="/docs/changelog"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
🎉 <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">Style, a new CLI and more.</span>
|
||||
<span class="hidden sm:inline">
|
||||
Introducing Style, a new CLI and more.
|
||||
🚧 <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">WIP</span>
|
||||
<span class="hidden sm:inline">WIP
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
<!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
|
||||
</a>
|
||||
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
|
||||
|
||||
import {
|
||||
|
|
@ -14,12 +15,16 @@ import {
|
|||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/new-york/ui/card'
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/new-york/ui/popover'
|
||||
|
||||
const sofiaRole = ref('Owner')
|
||||
const jacksonRole = ref('Member')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -49,35 +54,35 @@ import {
|
|||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto">
|
||||
Owner
|
||||
{{ sofiaRole }}
|
||||
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0" align="end">
|
||||
<!-- <Command>
|
||||
<Command v-model="sofiaRole">
|
||||
<CommandInput placeholder="Select new role..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No roles found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Viewer" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Viewer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view and comment.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Developer" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Developer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and edit.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Billing" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Billing</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and manage billing.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Owner" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Owner</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Admin-level access to all resources.
|
||||
|
|
@ -85,7 +90,7 @@ import {
|
|||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
@ -107,35 +112,35 @@ import {
|
|||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto">
|
||||
Member
|
||||
{{ jacksonRole }}
|
||||
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0" align="end">
|
||||
<!-- <Command>
|
||||
<Command v-model="jacksonRole">
|
||||
<CommandInput placeholder="Select new role..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No roles found.</CommandEmpty>
|
||||
<CommandGroup class="p-1.5">
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandGroup>
|
||||
<CommandItem value="Viewer" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Viewer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view and comment.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Developer" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Developer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and edit.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Billing" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Billing</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and manage billing.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<CommandItem value="Owner" class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Owner</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Admin-level access to all resources.
|
||||
|
|
@ -143,7 +148,7 @@ import {
|
|||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import CaretSortIcon from '~icons/radix-icons/caret-sort'
|
||||
import CheckIcon from '~icons/radix-icons/check'
|
||||
import PlusCircledIcon from '~icons/radix-icons/plus-circled'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
|
|
@ -17,7 +19,9 @@ import {
|
|||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/lib/registry/new-york/ui/dialog'
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import {
|
||||
|
|
@ -88,52 +92,50 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
|
|||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0">
|
||||
<!-- <Command>
|
||||
<Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
|
||||
<CommandList>
|
||||
<CommandInput placeholder="Search team..." />
|
||||
<CommandEmpty>No team found.</CommandEmpty>
|
||||
{groups.map((group) => (
|
||||
<CommandGroup key={group.label} heading={group.label}>
|
||||
{group.teams.map((team) => (
|
||||
<CommandGroup v-for="group in groups" :key="group.label" :heading="group.label">
|
||||
<CommandItem
|
||||
key={team.value}
|
||||
onSelect={() => {
|
||||
setSelectedTeam(team)
|
||||
setOpen(false)
|
||||
}}
|
||||
v-for="team in group.teams"
|
||||
:key="team.value"
|
||||
:value="team"
|
||||
class="text-sm"
|
||||
@select="() => {
|
||||
selectedTeam = team
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
<Avatar class="mr-2 h-5 w-5">
|
||||
<AvatarImage
|
||||
src={`https://avatar.vercel.sh/${team.value}.png`}
|
||||
alt={team.label}
|
||||
:src="`https://avatar.vercel.sh/${team.value}.png`"
|
||||
:alt="team.label"
|
||||
class="grayscale"
|
||||
/>
|
||||
<AvatarFallback>SC</AvatarFallback>
|
||||
</Avatar>
|
||||
{team.label}
|
||||
{{ team.label }}
|
||||
<CheckIcon
|
||||
class={cn(
|
||||
"ml-auto h-4 w-4",
|
||||
:class="cn('ml-auto h-4 w-4',
|
||||
selectedTeam.value === team.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
? 'opacity-100'
|
||||
: 'opacity-0',
|
||||
)"
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
))}
|
||||
</CommandList>
|
||||
<CommandSeparator />
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<DialogTrigger asChild>
|
||||
<DialogTrigger as-child>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
setOpen(false)
|
||||
setShowNewTeamDialog(true)
|
||||
}}
|
||||
:value="{ label: 'Create Team' }"
|
||||
@select="() => {
|
||||
open = false
|
||||
showNewTeamDialog = true
|
||||
}"
|
||||
>
|
||||
<PlusCircledIcon class="mr-2 h-5 w-5" />
|
||||
Create Team
|
||||
|
|
@ -141,7 +143,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
|
|||
</DialogTrigger>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<DialogContent>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import type { Column } from '@tanstack/vue-table'
|
||||
import type { Component } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { type Task } from '../data/schema'
|
||||
import PlusCircledIcon from '~icons/radix-icons/plus-circled'
|
||||
import CheckIcon from '~icons/radix-icons/check'
|
||||
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
|
||||
|
||||
import {
|
||||
Popover,
|
||||
|
|
@ -14,6 +16,7 @@ import {
|
|||
PopoverTrigger,
|
||||
} from '@/lib/registry/new-york/ui/popover'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface DataTableFacetedFilter {
|
||||
column?: Column<Task, any>
|
||||
|
|
@ -70,66 +73,63 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
|
|||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0" align="start">
|
||||
<!-- <Command>
|
||||
<CommandInput placeholder={title} />
|
||||
<Command
|
||||
:filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
|
||||
>
|
||||
<CommandInput :placeholder="title" />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{options.map((option) => {
|
||||
const isSelected = selectedValues.has(option.value)
|
||||
return (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
onSelect={() => {
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
:value="option"
|
||||
@select="() => {
|
||||
const isSelected = selectedValues.has(option.value)
|
||||
if (isSelected) {
|
||||
selectedValues.delete(option.value)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
selectedValues.add(option.value)
|
||||
}
|
||||
const filterValues = Array.from(selectedValues)
|
||||
column?.setFilterValue(
|
||||
filterValues.length ? filterValues : undefined
|
||||
filterValues.length ? filterValues : undefined,
|
||||
)
|
||||
}}
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class={cn(
|
||||
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
||||
isSelected
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "opacity-50 [&_svg]:invisible"
|
||||
)}
|
||||
:class="cn(
|
||||
'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
|
||||
selectedValues.has(option.value)
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'opacity-50 [&_svg]:invisible',
|
||||
)"
|
||||
>
|
||||
<CheckIcon class={cn("h-4 w-4")} />
|
||||
<CheckIcon :class="cn('h-4 w-4')" />
|
||||
</div>
|
||||
{option.icon && (
|
||||
<option.icon class="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span>{option.label}</span>
|
||||
{facets?.get(option.value) && (
|
||||
<span class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
|
||||
{facets.get(option.value)}
|
||||
<option.icon v-if="option.icon" class="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span>{{ option.label }}</span>
|
||||
<span v-if="facets?.get(option.value)" class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
|
||||
{{ facets.get(option.value) }}
|
||||
</span>
|
||||
)}
|
||||
</CommandItem>
|
||||
)
|
||||
})}
|
||||
</CommandGroup>
|
||||
{selectedValues.size > 0 && (
|
||||
<>
|
||||
|
||||
<template v-if="selectedValues.size > 0">
|
||||
<CommandSeparator />
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
onSelect={() => column?.setFilterValue(undefined)}
|
||||
:value="{ label: 'Clear filters' }"
|
||||
class="justify-center text-center"
|
||||
@select="column?.setFilterValue(undefined)"
|
||||
>
|
||||
Clear filters
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</>
|
||||
)}
|
||||
</template>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const props = defineProps<ComboboxGroupProps & {
|
|||
v-bind="props"
|
||||
:class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
|
||||
>
|
||||
<ComboboxLabel class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
<ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
{{ heading }}
|
||||
</ComboboxLabel>
|
||||
<slot />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user