Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update exampels with command component

Browse Source
This commit is contained in:
zernonia 2023-09-18 01:16:40 +08:00
parent 5798c47bdf
commit 69a498395e
5 changed files with 190 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/.vitepress/theme/components/LandingPage.vue
View File

@ -19,12 +19,11 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
href="/docs/changelog" href="/docs/changelog"
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium" 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" /> 🚧 <Separator class="mx-2 h-4" orientation="vertical" />
<span class="sm:hidden">Style, a new CLI and more.</span> <span class="sm:hidden">WIP</span>
<span class="hidden sm:inline"> <span class="hidden sm:inline">WIP
Introducing Style, a new CLI and more.
</span> </span>
<ArrowRightIcon class="ml-1 h-4 w-4" /> <!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
</a> </a>
<PageHeaderHeading>Build your component library.</PageHeaderHeading> <PageHeaderHeading>Build your component library.</PageHeaderHeading>
<PageHeaderDescription> <PageHeaderDescription>

35
apps/www/src/examples/cards/components/TeamMembers.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import ChevronDownIcon from '~icons/radix-icons/chevron-down' import ChevronDownIcon from '~icons/radix-icons/chevron-down'
import { import {
@ -14,12 +15,16 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from '@/lib/registry/new-york/ui/card' } from '@/lib/registry/new-york/ui/card'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/lib/registry/new-york/ui/popover' } from '@/lib/registry/new-york/ui/popover'
const sofiaRole = ref('Owner')
const jacksonRole = ref('Member')
</script> </script>
<template> <template>
@ -49,35 +54,35 @@ import {
<Popover> <Popover>
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ml-auto">
Owner {{ sofiaRole }}
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" /> <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="p-0" align="end"> <PopoverContent class="p-0" align="end">
<!-- <Command> <Command v-model="sofiaRole">
<CommandInput placeholder="Select new role..." /> <CommandInput placeholder="Select new role..." />
<CommandList> <CommandList>
<CommandEmpty>No roles found.</CommandEmpty> <CommandEmpty>No roles found.</CommandEmpty>
<CommandGroup> <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>Viewer</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view and comment. Can view and comment.
</p> </p>
</CommandItem> </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>Developer</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view, comment and edit. Can view, comment and edit.
</p> </p>
</CommandItem> </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>Billing</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view, comment and manage billing. Can view, comment and manage billing.
</p> </p>
</CommandItem> </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>Owner</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Admin-level access to all resources. Admin-level access to all resources.
@ -85,7 +90,7 @@ import {
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
@ -107,35 +112,35 @@ import {
<Popover> <Popover>
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ml-auto">
Member {{ jacksonRole }}
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" /> <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="p-0" align="end"> <PopoverContent class="p-0" align="end">
<!-- <Command> <Command v-model="jacksonRole">
<CommandInput placeholder="Select new role..." /> <CommandInput placeholder="Select new role..." />
<CommandList> <CommandList>
<CommandEmpty>No roles found.</CommandEmpty> <CommandEmpty>No roles found.</CommandEmpty>
<CommandGroup class="p-1.5"> <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>Viewer</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view and comment. Can view and comment.
</p> </p>
</CommandItem> </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>Developer</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view, comment and edit. Can view, comment and edit.
</p> </p>
</CommandItem> </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>Billing</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Can view, comment and manage billing. Can view, comment and manage billing.
</p> </p>
</CommandItem> </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>Owner</p>
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Admin-level access to all resources. Admin-level access to all resources.
@ -143,7 +148,7 @@ import {
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>

52
apps/www/src/examples/dashboard/components/TeamSwitcher.vue
View File

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import CaretSortIcon from '~icons/radix-icons/caret-sort' 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 { cn } from '@/lib/utils'
import { import {
@ -17,7 +19,9 @@ import {
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger,
} from '@/lib/registry/new-york/ui/dialog' } 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 { Input } from '@/lib/registry/new-york/ui/input'
import { Label } from '@/lib/registry/new-york/ui/label' import { Label } from '@/lib/registry/new-york/ui/label'
import { import {
@ -88,52 +92,50 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
<!-- <Command> <Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
<CommandList> <CommandList>
<CommandInput placeholder="Search team..." /> <CommandInput placeholder="Search team..." />
<CommandEmpty>No team found.</CommandEmpty> <CommandEmpty>No team found.</CommandEmpty>
{groups.map((group) => ( <CommandGroup v-for="group in groups" :key="group.label" :heading="group.label">
<CommandGroup key={group.label} heading={group.label}>
{group.teams.map((team) => (
<CommandItem <CommandItem
key={team.value} v-for="team in group.teams"
onSelect={() => { :key="team.value"
setSelectedTeam(team) :value="team"
setOpen(false)
}}
class="text-sm" class="text-sm"
@select="() => {
selectedTeam = team
open = false
}"
> >
<Avatar class="mr-2 h-5 w-5"> <Avatar class="mr-2 h-5 w-5">
<AvatarImage <AvatarImage
src={`https://avatar.vercel.sh/${team.value}.png`} :src="`https://avatar.vercel.sh/${team.value}.png`"
alt={team.label} :alt="team.label"
class="grayscale" class="grayscale"
/> />
<AvatarFallback>SC</AvatarFallback> <AvatarFallback>SC</AvatarFallback>
</Avatar> </Avatar>
{team.label} {{ team.label }}
<CheckIcon <CheckIcon
class={cn( :class="cn('ml-auto h-4 w-4',
"ml-auto h-4 w-4",
selectedTeam.value === team.value selectedTeam.value === team.value
? "opacity-100" ? 'opacity-100'
: "opacity-0" : 'opacity-0',
)} )"
/> />
</CommandItem> </CommandItem>
))}
</CommandGroup> </CommandGroup>
))}
</CommandList> </CommandList>
<CommandSeparator /> <CommandSeparator />
<CommandList> <CommandList>
<CommandGroup> <CommandGroup>
<DialogTrigger asChild> <DialogTrigger as-child>
<CommandItem <CommandItem
onSelect={() => { :value="{ label: 'Create Team' }"
setOpen(false) @select="() => {
setShowNewTeamDialog(true) open = false
}} showNewTeamDialog = true
}"
> >
<PlusCircledIcon class="mr-2 h-5 w-5" /> <PlusCircledIcon class="mr-2 h-5 w-5" />
Create Team Create Team
@ -141,7 +143,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
</DialogTrigger> </DialogTrigger>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<DialogContent> <DialogContent>

68
apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Column } from '@tanstack/vue-table' import type { Column } from '@tanstack/vue-table'
import type { Component } from 'vue' import type { Component } from 'vue'
import { computed } from 'vue' import { computed, ref } from 'vue'
import { type Task } from '../data/schema' import { type Task } from '../data/schema'
import PlusCircledIcon from '~icons/radix-icons/plus-circled' 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 { Badge } from '@/lib/registry/new-york/ui/badge'
import { Button } from '@/lib/registry/new-york/ui/button' 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 { import {
Popover, Popover,
@ -14,6 +16,7 @@ import {
PopoverTrigger, PopoverTrigger,
} from '@/lib/registry/new-york/ui/popover' } from '@/lib/registry/new-york/ui/popover'
import { Separator } from '@/lib/registry/new-york/ui/separator' import { Separator } from '@/lib/registry/new-york/ui/separator'
import { cn } from '@/lib/utils'
interface DataTableFacetedFilter { interface DataTableFacetedFilter {
column?: Column<Task, any> column?: Column<Task, any>
@ -70,66 +73,63 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0" align="start"> <PopoverContent class="w-[200px] p-0" align="start">
<!-- <Command> <Command
<CommandInput placeholder={title} /> :filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
>
<CommandInput :placeholder="title" />
<CommandList> <CommandList>
<CommandEmpty>No results found.</CommandEmpty> <CommandEmpty>No results found.</CommandEmpty>
<CommandGroup> <CommandGroup>
{options.map((option) => {
const isSelected = selectedValues.has(option.value)
return (
<CommandItem <CommandItem
key={option.value} v-for="option in options"
onSelect={() => { :key="option.value"
:value="option"
@select="() => {
const isSelected = selectedValues.has(option.value)
if (isSelected) { if (isSelected) {
selectedValues.delete(option.value) selectedValues.delete(option.value)
} else { }
else {
selectedValues.add(option.value) selectedValues.add(option.value)
} }
const filterValues = Array.from(selectedValues) const filterValues = Array.from(selectedValues)
column?.setFilterValue( column?.setFilterValue(
filterValues.length ? filterValues : undefined filterValues.length ? filterValues : undefined,
) )
}} }"
> >
<div <div
class={cn( :class="cn(
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", 'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
isSelected selectedValues.has(option.value)
? "bg-primary text-primary-foreground" ? 'bg-primary text-primary-foreground'
: "opacity-50 [&_svg]:invisible" : 'opacity-50 [&_svg]:invisible',
)} )"
> >
<CheckIcon class={cn("h-4 w-4")} /> <CheckIcon :class="cn('h-4 w-4')" />
</div> </div>
{option.icon && ( <option.icon v-if="option.icon" class="mr-2 h-4 w-4 text-muted-foreground" />
<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">
<span>{option.label}</span> {{ facets.get(option.value) }}
{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)}
</span> </span>
)}
</CommandItem> </CommandItem>
)
})}
</CommandGroup> </CommandGroup>
{selectedValues.size > 0 && (
<> <template v-if="selectedValues.size > 0">
<CommandSeparator /> <CommandSeparator />
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
onSelect={() => column?.setFilterValue(undefined)} :value="{ label: 'Clear filters' }"
class="justify-center text-center" class="justify-center text-center"
@select="column?.setFilterValue(undefined)"
> >
Clear filters Clear filters
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</> </template>
)}
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</template> </template>

2
apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
View File

@ -13,7 +13,7 @@ const props = defineProps<ComboboxGroupProps & {
v-bind="props" v-bind="props"
:class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')" :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 }} {{ heading }}
</ComboboxLabel> </ComboboxLabel>
<slot /> <slot />