Skip to content

Commit

Permalink
feat: update exampels with command component
Browse files Browse the repository at this point in the history
  • Loading branch information
@zernonia
zernonia committed Sep 17, 2023
1 parent 5798c47 commit 69a4983
Show file tree
Hide file tree
Showing 5 changed files with 190 additions and 184 deletions.
9 changes: 4 additions & 5 deletions apps/www/.vitepress/theme/components/LandingPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
137 changes: 71 additions & 66 deletions apps/www/src/examples/cards/components/TeamMembers.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
import {
Expand All @@ -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>
Expand Down Expand Up @@ -49,43 +54,43 @@ 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>
<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">
<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">
<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">
<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">
<p>Owner</p>
<p class="text-sm text-muted-foreground">
Admin-level access to all resources.
</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command> -->
<Command v-model="sofiaRole">
<CommandInput placeholder="Select new role..." />
<CommandList>
<CommandEmpty>No roles found.</CommandEmpty>
<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 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 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 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.
</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
Expand All @@ -107,43 +112,43 @@ 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>
<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">
<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">
<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">
<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">
<p>Owner</p>
<p class="text-sm text-muted-foreground">
Admin-level access to all resources.
</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command> -->
<Command v-model="jacksonRole">
<CommandInput placeholder="Select new role..." />
<CommandList>
<CommandEmpty>No roles found.</CommandEmpty>
<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 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 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 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.
</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
Expand Down
110 changes: 56 additions & 54 deletions apps/www/src/examples/dashboard/components/TeamSwitcher.vue
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -88,60 +92,58 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
</Button>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0">
<!-- <Command>
<CommandList>
<CommandInput placeholder="Search team..." />
<CommandEmpty>No team found.</CommandEmpty>
{groups.map((group) => (
<CommandGroup key={group.label} heading={group.label}>
{group.teams.map((team) => (
<CommandItem
key={team.value}
onSelect={() => {
setSelectedTeam(team)
setOpen(false)
}}
class="text-sm"
>
<Avatar class="mr-2 h-5 w-5">
<AvatarImage
src={`https://avatar.vercel.sh/${team.value}.png`}
alt={team.label}
class="grayscale"
/>
<AvatarFallback>SC</AvatarFallback>
</Avatar>
{team.label}
<CheckIcon
class={cn(
"ml-auto h-4 w-4",
selectedTeam.value === team.value
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
))}
</CommandList>
<CommandSeparator />
<CommandList>
<CommandGroup>
<DialogTrigger asChild>
<CommandItem
onSelect={() => {
setOpen(false)
setShowNewTeamDialog(true)
}}
>
<PlusCircledIcon class="mr-2 h-5 w-5" />
Create Team
</CommandItem>
</DialogTrigger>
</CommandGroup>
</CommandList>
</Command> -->
<Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
<CommandList>
<CommandInput placeholder="Search team..." />
<CommandEmpty>No team found.</CommandEmpty>
<CommandGroup v-for="group in groups" :key="group.label" :heading="group.label">
<CommandItem
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"
class="grayscale"
/>
<AvatarFallback>SC</AvatarFallback>
</Avatar>
{{ team.label }}
<CheckIcon
:class="cn('ml-auto h-4 w-4',
selectedTeam.value === team.value
? 'opacity-100'
: 'opacity-0',
)"
/>
</CommandItem>
</CommandGroup>
</CommandList>
<CommandSeparator />
<CommandList>
<CommandGroup>
<DialogTrigger as-child>
<CommandItem
:value="{ label: 'Create Team' }"
@select="() => {
open = false
showNewTeamDialog = true
}"
>
<PlusCircledIcon class="mr-2 h-5 w-5" />
Create Team
</CommandItem>
</DialogTrigger>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<DialogContent>
Expand Down
Loading

0 comments on commit 69a4983

Please sign in to comment.