From 47a149fff5a8b58330e229233aec1d59fc358e01 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Wed, 7 Feb 2024 18:39:38 +0330
Subject: [PATCH] chore: update

---
 .../default/example/TagsInputComboboxDemo.vue | 33 +++++++++++--------
 .../example/TagsInputComboboxDemo.vue         | 33 +++++++++++--------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
index 0d3d2f5c..ddf4097e 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
-import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
 
 const frameworks = [
@@ -20,30 +20,37 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
 </script>
 
 <template>
-  <TagsInput :model-value="modelValue">
-    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
-      <TagsInputItemText />
-      <TagsInputItemDelete />
-    </TagsInputItem>
+  <TagsInput class="px-0 gap-0" :model-value="modelValue">
+    <div class="flex gap-2 flex-wrap items-center px-3">
+      <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+        <TagsInputItemText />
+        <TagsInputItemDelete />
+      </TagsInputItem>
+    </div>
 
-    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm">
-      <ComboboxAnchor>
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+      <ComboboxAnchor as-child>
         <ComboboxInput placeholder="Framework..." as-child>
-          <TagsInputInput @keydown.enter.prevent />
+          <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
         </ComboboxInput>
       </ComboboxAnchor>
 
       <ComboboxPortal>
-        <CommandList :position="'popper'" class="w-48 rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
+        <CommandList
+          position="popper"
+          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        >
+          <CommandEmpty />
           <CommandGroup>
             <CommandItem
-              v-for="framework in filteredFrameworks"
-              :key="framework.value"
-              :value="framework.label"
+              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
               @select.prevent="(ev) => {
                 if (typeof ev.detail.value === 'string') {
                   searchTerm = ''
                   modelValue.push(ev.detail.value)
+                }
+
+                if (filteredFrameworks.length === 0) {
                   open = false
                 }
               }"
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
index b353cde0..9d0ff5d2 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
-import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
 
 const frameworks = [
@@ -20,30 +20,37 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
 </script>
 
 <template>
-  <TagsInput :model-value="modelValue">
-    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
-      <TagsInputItemText />
-      <TagsInputItemDelete />
-    </TagsInputItem>
+  <TagsInput class="px-0 gap-0" :model-value="modelValue">
+    <div class="flex gap-2 flex-wrap items-center px-3">
+      <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+        <TagsInputItemText />
+        <TagsInputItemDelete />
+      </TagsInputItem>
+    </div>
 
-    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm">
-      <ComboboxAnchor>
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+      <ComboboxAnchor as-child>
         <ComboboxInput placeholder="Framework..." as-child>
-          <TagsInputInput @keydown.enter.prevent />
+          <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
         </ComboboxInput>
       </ComboboxAnchor>
 
       <ComboboxPortal>
-        <CommandList :position="'popper'" class="w-48 rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
+        <CommandList
+          position="popper"
+          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        >
+          <CommandEmpty />
           <CommandGroup>
             <CommandItem
-              v-for="framework in filteredFrameworks"
-              :key="framework.value"
-              :value="framework.label"
+              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
               @select.prevent="(ev) => {
                 if (typeof ev.detail.value === 'string') {
                   searchTerm = ''
                   modelValue.push(ev.detail.value)
+                }
+
+                if (filteredFrameworks.length === 0) {
                   open = false
                 }
               }"