Auto expand tree on search in node library tab (#558)

* Add custom nodelib searchbox

* Auto expand on search

* Support alphabetical sort in filtered tree

src/components/dialog/content/SettingDialogContent.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="settings-container">
     <div class="settings-sidebar">
-      <SettingSearchBox
+      <SearchBox
         class="settings-search-box"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
+        :placeholder="$t('searchSettings') + '...'"
       />
       <Listbox
         v-model="activeCategory"
@@ -66,7 +67,7 @@ import Divider from 'primevue/divider'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
 import { SettingParams } from '@/types/settingTypes'
 import SettingGroup from './setting/SettingGroup.vue'
-import SettingSearchBox from './setting/SettingSearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
 

src/components/dialog/content/setting/SettingSearchBox.vue

@@ -1,40 +0,0 @@
-<template>
-  <IconField :class="props.class">
-    <InputIcon class="pi pi-search" />
-    <InputText
-      class="search-box-input"
-      @input="handleInput"
-      :modelValue="props.modelValue"
-      :placeholder="$t('searchSettings') + '...'"
-    />
-  </IconField>
-</template>
-
-<script setup lang="ts">
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { debounce } from 'lodash'
-
-const props = defineProps<{
-  class?: string
-  modelValue: string
-}>()
-const emit = defineEmits(['update:modelValue', 'search'])
-const emitSearch = debounce((event: KeyboardEvent) => {
-  const target = event.target as HTMLInputElement
-  emit('search', target.value)
-}, 300)
-
-const handleInput = (event: KeyboardEvent) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-  emitSearch(event)
-}
-</script>
-
-<style scoped>
-.search-box-input {
-  width: 100%;
-}
-</style>