diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue index 7a882e56c..2e491e97d 100644 --- a/src/components/LeftMenu.vue +++ b/src/components/LeftMenu.vue @@ -10,12 +10,13 @@ import routes from 'src/router/modules'; import LeftMenuItem from './LeftMenuItem.vue'; import LeftMenuItemGroup from './LeftMenuItemGroup.vue'; import VnInput from './common/VnInput.vue'; +import { useRouter } from 'vue-router'; const { t } = useI18n(); const route = useRoute(); const quasar = useQuasar(); const navigation = useNavigationStore(); - +const router = useRouter(); const props = defineProps({ source: { type: String, @@ -174,6 +175,35 @@ function normalize(text) { .replace(/[\u0300-\u036f]/g, '') .toLowerCase(); } +const searchModule = () => { + const moduleArrays = ref([]); + items.value.forEach((item) => { + moduleArrays.value.push({ + title: getLocale(item.title).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(), + name: item.name + }); + }) + const searching = ref(false) + moduleArrays.value.find((module) => { + console.log(module.title); + if (module.title.includes(search.value.toLowerCase()) && !searching.value) { + searching.value = true; + router.push({ name: module.name }); + } + }) +} + +const getLocale = (label) => { + const globalLocale = t(label); + return globalLocale; +}; +const searchingValue = ref(false); +function searchingFunction(evt) { + searchingValue.value = true; + if(evt === null) { + searchingValue.value = false; + } +} </script> <template> @@ -188,10 +218,12 @@ function normalize(text) { filled dense autofocus + @keyup.enter.stop="searchModule(search)" + @update:model-value="searchingFunction($event)" /> </QItem> <QSeparator /> - <template v-if="filteredPinnedModules.size"> + <template v-if="filteredPinnedModules.size && !searchingValue"> <LeftMenuItem v-for="[key, pinnedModule] of filteredPinnedModules" :key="key" @@ -215,11 +247,11 @@ function normalize(text) { </LeftMenuItem> <QSeparator /> </template> - <template v-for="item in filteredItems" :key="item.name"> + <template v-for="(item, index) in filteredItems" :key="item.name"> <template - v-if="item.children && !filteredPinnedModules.has(item.name)" + v-if="searchingValue ||item.children && !filteredPinnedModules.has(item.name)" > - <LeftMenuItem :item="item" group="modules"> + <LeftMenuItem :item="item" group="modules" :class="searchingValue && index === 0 ? 'searched' : ''"> <template #side> <QBtn v-if="item.isPinned === true" @@ -336,6 +368,9 @@ function normalize(text) { .header { color: var(--vn-label-color); } +.searched{ + background-color: var(--vn-section-hover-color); +} </style> <i18n> es: