Merge pull request #16 from xiaoluoboding/feat/update-search

fix: fixed the bug #14

Author: xiaoluoboding

packages/CommandDialog.vue

@@ -48,22 +48,14 @@ const emit = defineEmits<{
   (e: 'select-item', item: ItemInfo): void
 }>()
 
-const { search, filtered } = useCommandState()
+const { resetStore } = useCommandState()
 const { emitter } = useCommandEvent()
 const dialogRef = ref<HTMLDivElement>()
 
 emitter.on('selectItem', (item) => {
   emit('select-item', item)
 })
 
-const resetStore = () => {
-  // reset the command state
-  search.value = ''
-  filtered.value.count = 0
-  filtered.value.items = new Map()
-  filtered.value.groups = new Set()
-}
-
 whenever(() => props.visible, resetStore)
 
 onBeforeUnmount(resetStore)

packages/CommandList.vue

@@ -1,6 +1,6 @@
 <template>
   <div command-list="" role="listbox" aria-label="Suggestions" ref="listRef">
-    <div command-list-sizer ref="heightRef">
+    <div command-list-sizer="" ref="heightRef">
       <slot />
     </div>
   </div>
@@ -34,12 +34,11 @@ let sizer: HTMLDivElement | undefined
 watchEffect(() => {
   sizer = heightRef.value
   const wrapper = listRef.value
-
+  let animationFrame: any
   if (sizer && wrapper) {
     observer = new ResizeObserver((entries) => {
-      nextTick(() => {
+      animationFrame = requestAnimationFrame(() => {
         const height = sizer?.offsetHeight
-
         wrapper?.style.setProperty(
           '--command-list-height',
           `${height?.toFixed(1)}px`
@@ -48,6 +47,11 @@ watchEffect(() => {
       })
     })
     observer.observe(sizer)
+
+    return () => {
+      cancelAnimationFrame(animationFrame)
+      observer?.unobserve(sizer!)
+    }
   }
 })
 

packages/CommandRoot.vue

@@ -60,7 +60,7 @@ const emit = defineEmits<{
 }>()
 
 provide('theme', props.theme || 'default')
-const { selectedNode, search, dataValue, filtered } = useCommandState()
+const { selectedNode, search, filtered } = useCommandState()
 const { emitter } = useCommandEvent()
 
 const commandRef = ref<HTMLDivElement>()
@@ -110,6 +110,20 @@ const getSelectedItem = () => {
   return commandRef.value?.querySelector(SELECTED_ITEM_SELECTOR)
 }
 
+const getAllGroups = () => {
+  const allGroupEl = commandRef.value?.querySelectorAll(
+    GROUP_SELECTOR
+  ) as NodeListOf<HTMLElement>
+  return allGroupEl ? Array.from(allGroupEl) : []
+}
+
+const getAllItems = (rootNode: HTMLElement | undefined = commandRef.value) => {
+  const allItemEl = rootNode?.querySelectorAll(
+    ITEM_SELECTOR
+  ) as NodeListOf<HTMLElement>
+  return allItemEl ? Array.from(allItemEl) : []
+}
+
 const getValidItems = (
   rootNode: HTMLElement | undefined = commandRef.value
 ) => {
@@ -119,13 +133,6 @@ const getValidItems = (
   return allItemEl ? Array.from(allItemEl) : []
 }
 
-const getValidGroups = () => {
-  const allGroupEl = commandRef.value?.querySelectorAll(
-    GROUP_SELECTOR
-  ) as NodeListOf<HTMLElement>
-  return allGroupEl ? Array.from(allGroupEl) : []
-}
-
 const selectedFirstItem = () => {
   const [firstItem] = getValidItems()
   if (firstItem && firstItem.getAttribute(ITEM_KEY_SELECTOR)) {
@@ -279,7 +286,7 @@ const filterItems = () => {
   }
 
   // Reset the groups
-  filtered.value.groups = new Set('')
+  filtered.value.groups = new Set()
 
   const items = new Map()
 
@@ -299,15 +306,13 @@ const filterItems = () => {
     }
   }
 
-  nextTick(() => {
-    filtered.value.count = items.size
-    filtered.value.items = items
-  })
+  filtered.value.count = items.size
+  filtered.value.items = items
 }
 
 const initStore = () => {
-  const items = getValidItems()
-  const groups = getValidGroups()
+  const groups = getAllGroups()
+  const items = getAllItems()
 
   for (const item of items) {
     const itemKey = item.getAttribute(ITEM_KEY_SELECTOR) || ''
@@ -319,7 +324,7 @@ const initStore = () => {
 
   // map the items in group
   for (const group of groups) {
-    const itemsInGroup = getValidItems(group)
+    const itemsInGroup = getAllItems(group)
     const groupId = group.getAttribute(GROUP_KEY_SELECTOR) || ''
     const itemIds = new Set('')
 
@@ -343,12 +348,13 @@ watch(
   },
   { deep: true }
 )
+
 /**
  * when search's value is changed, trigger filter action
  */
 watch(
   () => search.value,
-  (newVal) => {
+  () => {
     filterItems()
     nextTick(selectedFirstItem)
   }
@@ -361,14 +367,17 @@ emitter.on('selectItem', (item) => {
 const debouncedEmit = useDebounceFn((isRerender: Boolean) => {
   if (isRerender) {
     initStore()
-    nextTick(selectedFirstItem)
+    nextTick(() => {
+      filterItems()
+      selectedFirstItem()
+    })
   }
 }, 100)
 
 emitter.on('rerenderList', debouncedEmit)
 
 onMounted(() => {
   initStore()
-  selectedFirstItem()
+  nextTick(selectedFirstItem)
 })
 </script>

packages/index.ts

@@ -93,4 +93,4 @@ const Command = Object.assign(Root, {
   readonly Separator: typeof Separator
 }
 
-export { Command }
+export { Command, useCommandState }

packages/useCommandState.ts

@@ -12,26 +12,38 @@ type State = {
   selectedGroup: string
   // Input State
   search: string
-  dataValue: string
   filtered: FilteredItem
 }
 
 const state = reactive<State>({
   selectedNode: '',
   selectedGroup: '',
+  /** Value of the search query. */
   search: '',
-  dataValue: '',
   filtered: {
+    /** The count of all visible items. */
     count: 0,
+    /** Map from visible item id. */
     items: new Map(),
+    /** Set of groups with at least one visible item. */
     groups: new Set()
   }
 })
 
 const useCommandState = () => {
   const isSearching = computed(() => state.search !== '')
+
+  const resetStore = () => {
+    // reset the command state
+    state.search = ''
+    state.filtered.count = 0
+    state.filtered.items = new Map()
+    state.filtered.groups = new Set()
+  }
+
   return {
     isSearching,
+    resetStore,
     ...toRefs(state)
   }
 }

src/App.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="flex-center gap-4">
           <button
-            class="opacity-50 hover:opacity-100 transition"
+            class="bg-transparent opacity-50 hover:opacity-100 transition"
             @click="(e) => toggleDarkmode()"
           >
             <MoonIcon class="w-6 h-6" v-if="isDark" />

src/components/command/Self.vue

@@ -143,15 +143,14 @@
 import { ref, computed } from 'vue'
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core'
 
-import { Command } from '@/index'
+import { Command, useCommandState } from '@/index'
 import { isDark, toggleDarkmode } from '~/composables/useDarkmode'
 import RaycastIcon from '~/components/icons/RaycastIcon.vue'
 import LinearIcon from '~/components/icons/LinearIcon.vue'
 import VercelIcon from '~/components/icons/VercelIcon.vue'
 import SunIcon from '~/components/icons/SunIcon.vue'
 import MoonIcon from '~/components/icons/MoonIcon.vue'
 import Logo from '~/components/icons/Logo.vue'
-import { ItemInfo } from '@/types'
 
 defineProps<{
   visible: boolean
@@ -196,6 +195,7 @@ const inputValue = ref('')
 const isHomePage = computed(() => activePage.value === 'home')
 
 const { current } = useMagicKeys()
+const { search } = useCommandState()
 
 const togglePage = () => {
   activePage.value = 'home'
@@ -220,6 +220,7 @@ whenever(
 
 const handleSelectTheme = (item: any) => {
   activePage.value = item.value
+  search.value = ''
   emit('select', item.value)
 }
 onClickOutside(el, (e: Event) => {

src/components/command/vercel/Projects.vue

@@ -1,9 +1,7 @@
 <template>
-  <div>
-    <Item v-for="n in 6" :data-value="`Project ${n}`">
-      {{ `Project ${n}` }}
-    </Item>
-  </div>
+  <Item v-for="n in 6" :data-value="`Project ${n}`">
+    {{ `Project ${n}` }}
+  </Item>
 </template>
 
 <script lang="ts" setup>

src/components/command/vercel/Vercel.vue

@@ -34,13 +34,14 @@ import { ref, computed } from 'vue'
 import { useMagicKeys, whenever } from '@vueuse/core'
 
 import { toggleDarkmode } from '~/composables/useDarkmode'
-import { Command } from '@/index'
+import { Command, useCommandState } from '@/index'
 import { ItemInfo } from '@/types'
 
 import Home from './Home.vue'
 import Projects from './Projects.vue'
 
 const { current } = useMagicKeys()
+const { search } = useCommandState()
 
 const activePage = ref('home')
 const inputValue = ref('')
@@ -63,6 +64,7 @@ const pageTree = computed(() => {
 
 const togglePage = () => {
   activePage.value = isHomePage.value ? 'projects' : 'home'
+  search.value = ''
 }
 
 const handleKeyDown = () => {