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>

137
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,43 +54,43 @@ 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.
</p> </p>
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
@ -107,43 +112,43 @@ 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.
</p> </p>
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> --> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>

110
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,60 +92,58 @@ 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}> <CommandItem
{group.teams.map((team) => ( v-for="team in group.teams"
<CommandItem :key="team.value"
key={team.value} :value="team"
onSelect={() => { class="text-sm"
setSelectedTeam(team) @select="() => {
setOpen(false) selectedTeam = team
}} open = false
class="text-sm" }"
> >
<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>
))} </CommandList>
</CommandGroup> <CommandSeparator />
))} <CommandList>
</CommandList> <CommandGroup>
<CommandSeparator /> <DialogTrigger as-child>
<CommandList> <CommandItem
<CommandGroup> :value="{ label: 'Create Team' }"
<DialogTrigger asChild> @select="() => {
<CommandItem open = false
onSelect={() => { showNewTeamDialog = true
setOpen(false) }"
setShowNewTeamDialog(true) >
}} <PlusCircledIcon class="mr-2 h-5 w-5" />
> Create Team
<PlusCircledIcon class="mr-2 h-5 w-5" /> </CommandItem>
Create Team </DialogTrigger>
</CommandItem> </CommandGroup>
</DialogTrigger> </CommandList>
</CommandGroup> </Command>
</CommandList>
</Command> -->
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<DialogContent> <DialogContent>

116
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)) "
<CommandList> >
<CommandEmpty>No results found.</CommandEmpty> <CommandInput :placeholder="title" />
<CommandGroup> <CommandList>
{options.map((option) => { <CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
<CommandItem
v-for="option in options"
:key="option.value"
:value="option"
@select="() => {
const isSelected = selectedValues.has(option.value) const isSelected = selectedValues.has(option.value)
return ( if (isSelected) {
<CommandItem selectedValues.delete(option.value)
key={option.value} }
onSelect={() => { else {
if (isSelected) { selectedValues.add(option.value)
selectedValues.delete(option.value) }
} else { const filterValues = Array.from(selectedValues)
selectedValues.add(option.value) column?.setFilterValue(
} filterValues.length ? filterValues : undefined,
const filterValues = Array.from(selectedValues)
column?.setFilterValue(
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"
)}
>
<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)}
</span>
)}
</CommandItem>
) )
})} }"
>
<div
: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')" />
</div>
<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>
<template v-if="selectedValues.size > 0">
<CommandSeparator />
<CommandGroup>
<CommandItem
:value="{ label: 'Clear filters' }"
class="justify-center text-center"
@select="column?.setFilterValue(undefined)"
>
Clear filters
</CommandItem>
</CommandGroup> </CommandGroup>
{selectedValues.size > 0 && ( </template>
<> </CommandList>
<CommandSeparator /> </Command>
<CommandGroup>
<CommandItem
onSelect={() => column?.setFilterValue(undefined)}
class="justify-center text-center"
>
Clear filters
</CommandItem>
</CommandGroup>
</>
)}
</CommandList>
</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 />