From 69a498395e36fbf5493ca6d038c72aa6fc4008a2 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 18 Sep 2023 01:16:40 +0800
Subject: [PATCH] feat: update exampels with command component

---
 .../theme/components/LandingPage.vue          |   9 +-
 .../examples/cards/components/TeamMembers.vue | 137 +++++++++---------
 .../dashboard/components/TeamSwitcher.vue     | 110 +++++++-------
 .../components/DataTableFacetedFilter.vue     | 116 +++++++--------
 .../new-york/ui/command/CommandGroup.vue      |   2 +-
 5 files changed, 190 insertions(+), 184 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index cb6c9d900..1e649d6ee 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -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>
diff --git a/apps/www/src/examples/cards/components/TeamMembers.vue b/apps/www/src/examples/cards/components/TeamMembers.vue
index 20e503cdc..0300fc1d2 100644
--- a/apps/www/src/examples/cards/components/TeamMembers.vue
+++ b/apps/www/src/examples/cards/components/TeamMembers.vue
@@ -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,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>
@@ -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>
diff --git a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
index ce91180a6..20ebc947a 100644
--- a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
+++ b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
@@ -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,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>
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index e82f3c3c6..bd39d0435 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -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} />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => {
+      <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>
+            <CommandItem
+              v-for="option in options"
+              :key="option.value"
+              :value="option"
+              @select="() => {
                 const isSelected = selectedValues.has(option.value)
-                return (
-                  <CommandItem
-                    key={option.value}
-                    onSelect={() => {
-                      if (isSelected) {
-                        selectedValues.delete(option.value)
-                      } else {
-                        selectedValues.add(option.value)
-                      }
-                      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>
+                if (isSelected) {
+                  selectedValues.delete(option.value)
+                }
+                else {
+                  selectedValues.add(option.value)
+                }
+                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',
+                  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>
-            {selectedValues.size > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => column?.setFilterValue(undefined)}
-                    class="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command> -->
+          </template>
+        </CommandList>
+      </Command>
     </PopoverContent>
   </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
index c428e4ff4..1d994b9a2 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
@@ -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 />