docs: fix combobox with tagsinput example

unovue · Jan 29, 2025 · d2e66d5 · d2e66d5
1 parent eed3954
commit d2e66d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/docs/components/examples/ComboboxTagsInput/index.vue b/docs/components/examples/ComboboxTagsInput/index.vue
@@ -25,7 +25,7 @@ watch(values, () => {
   >
     <ComboboxAnchor class="w-[400px] inline-flex items-center justify-between rounded-lg p-2 text-[13px] leading-none  gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
       <TagsInputRoot
-        :model-value="values"
+        v-model="values"
         delimiter=""
         class="flex gap-2 items-center rounded-lg flex-wrap"
       >

diff --git a/packages/core/src/TagsInput/story/TagsInputCombobox.story.vue b/packages/core/src/TagsInput/story/TagsInputCombobox.story.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ComboboxAnchor, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '@/Combobox'
 import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from '..'
 import { Icon } from '@iconify/vue'
+import { useFilter } from '@/shared'
 
-const searchTerm = ref('')
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const query = ref('')
 const values = ref(['Apple'])
 const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 
+const filteredOptions = computed(() => options.filter(option => contains(option, query.value) && !values.value.includes(option)))
+
 watch(values, () => {
-  searchTerm.value = ''
+  query.value = ''
 }, { deep: true })
 </script>
 
@@ -27,7 +32,7 @@ watch(values, () => {
         <ComboboxAnchor class="w-[400px] inline-flex items-center justify-between rounded-lg p-2 text-[13px] leading-none  gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <TagsInputRoot
             v-slot="{ modelValue: tags }"
-            :model-value="values"
+            v-model="values"
             delimiter=""
             class="flex gap-2 items-center rounded-lg flex-wrap"
           >
@@ -44,7 +49,7 @@ watch(values, () => {
             </TagsInputItem>
 
             <ComboboxInput
-              v-model="searchTerm"
+              v-model="query"
               as-child
             >
               <TagsInputInput
@@ -70,7 +75,7 @@ watch(values, () => {
               </ComboboxLabel>
 
               <ComboboxItem
-                v-for="(option, index) in options"
+                v-for="(option, index) in filteredOptions"
                 :key="index"
                 class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
                 :value="option"