defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update command

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-27 09:38:20 +07:00
parent 70a6353c98
commit 3b4e2ae1b9
5 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/CommandPalettes.vue
View File

@ -1,6 +1,6 @@
<template>
<TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
<Dialog as="div" class="relative z-10" @close="onClose">
<Dialog as="div" class="relative z-10" @close="command.closeCommand">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
@ -32,7 +32,7 @@
<ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }">
<li @click="openMenu(menu)"
<li @click="command.openMenu(menu)"
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
alt="icon"
@ -97,9 +97,8 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { DocumentTextIcon } from '@heroicons/vue/24/outline'
import {
Combobox,
ComboboxInput,
@ -110,14 +109,11 @@ import {
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { routes } from '@/router'
import { useCommandPalattesStore } from '@/stores/command'
import { navigationIcon } from '@/utils/route'
const command = useCommandPalattesStore()
const route = useRouter()
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')
const filteredMenus = computed(() =>
@ -125,7 +121,6 @@ const filteredMenus = computed(() =>
? []
: command.searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
const onQueryChange = (value: string) => {
@ -142,10 +137,4 @@ const onQueryChange = (value: string) => {
}, 300);
}
const openMenu = (menu: RouteRecordRaw) => {
command.addRecent(menu)
route.push(menu.path)
onClose()
}
</script>

4
src/components/Pages/MenuProvider.vue
View File

@ -1,6 +1,6 @@
<template>
<main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
<div v-if="route.path !== '/home'" class="pt-4 max-w-7xl">
<main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ currentRouteName }}</h1>
</div>
<div class="mt-2 sm:mt-4 dx-viewport">

30
src/components/Pages/Welcome.vue
View File

@ -16,7 +16,7 @@
</h2>
<div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path">
<div @click="openMenu(menu)" class="group">
<div @click="command.openMenu(menu)" class="group">
<div
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
@ -63,17 +63,15 @@
</template>
<script setup lang="ts">
import { readData, writeData } from '@/utils/storage'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
import { computed, onMounted, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import { useCommandPalattesStore } from '@/stores/command'
import { IconApp } from '@/utils/icons'
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { navigationIcon } from '@/utils/route';
const command = useCommandPalattesStore()
const route = useRouter()
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')
@ -87,27 +85,5 @@ const filteredMenus = computed(() =>
? []
: searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
const onQueryChange = (value: string) => {
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(() => {
// check if value is empty or only spaces
if (value.trim() === '') {
query.value = ''
return
}
query.value = value
}, 300);
}
const openMenu = (menu: RouteRecordRaw) => {
command.addRecent(menu)
route.push(menu.path)
onClose()
}
</script>