Add detectOS function to helper.ts and update style.css with new utility classes

This commit is contained in:
Dede Fuji Abdul
2024-04-06 22:17:19 +07:00
parent b27972b0b5
commit dd6da0f25a
6 changed files with 506 additions and 311 deletions

View File

@ -6,103 +6,110 @@ import { extractLeafRoutes } from '@/router'
import { useMenuStore } from '@/stores/menu'
export const useCommandPalattesStore = defineStore('command_palettes', () => {
const open = ref(false)
const route = useRouter()
const menu = useMenuStore()
const controlStatus = ref(false)
const keyFStatus = ref(false)
const open = ref(false)
const route = useRouter()
const menu = useMenuStore()
const controlStatus = ref(false)
const keyFStatus = ref(false)
const showCommandPalettes = () => {
open.value = true
const showCommandPalettes = () => {
open.value = true
}
const onKeyPressed = (event: KeyboardEvent) => {
if ((event.metaKey || event.ctrlKey) && event.key === 'm') {
showCommandPalettes()
// console.log('control pressed')
// controlStatus.value = true
}
const onKeyPressed = (event: KeyboardEvent) => {
if (event.key === 'Control') {
console.log('control pressed');
controlStatus.value = true
}
// if (event.key === 'f') {
// console.log('f pressed');
// keyFStatus.value = true
// }
if (event.key === 'f') {
console.log('f pressed');
keyFStatus.value = true
}
// if (controlStatus.value && keyFStatus.value) {
// showCommandPalettes()
// }
}
if (controlStatus.value && keyFStatus.value) {
showCommandPalettes()
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Control') {
console.log('control released')
controlStatus.value = false
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Control') {
console.log('control released');
controlStatus.value = false
}
if (event.key === 'f') {
console.log('f released')
keyFStatus.value = false
}
}
if (event.key === 'f') {
console.log('f released');
keyFStatus.value = false
}
const readRecent = (): RouteRecordRaw[] => {
const recent = readDataJson('recentmenu')
if (recent) {
try {
JSON.parse(recent)
} catch (error) {
return recent as RouteRecordRaw[]
}
}
return [] as RouteRecordRaw[]
}
const addRecent = (menu: RouteRecordRaw) => {
const lastRecent = readRecent()
const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
if (index > -1) {
lastRecent.splice(index, 1)
}
lastRecent.unshift(menu)
if (lastRecent.length > 5) {
lastRecent.pop()
}
const readRecent = (): RouteRecordRaw[] => {
const recent = readDataJson('recentmenu')
if (recent) {
try {
JSON.parse(recent)
} catch (error) {
return recent as RouteRecordRaw[]
}
}
return [] as RouteRecordRaw[]
}
writeDataJson('recentmenu', lastRecent)
}
const addRecent = (menu: RouteRecordRaw) => {
const lastRecent = readRecent()
const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
if (index > -1) {
lastRecent.splice(index, 1)
}
lastRecent.unshift(menu)
if (lastRecent.length > 5) {
lastRecent.pop()
}
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
const matchingRoutes = extractLeafRoutes(routes, '').filter(
(item: RouteRecordRaw) =>
item.path.includes('home/') &&
item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase())
)
return matchingRoutes
}
writeDataJson('recentmenu', lastRecent)
}
const searchRoutesPath = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
const matchingRoutes = extractLeafRoutes(routes, '').filter(
(item: RouteRecordRaw) => item.path.includes('home/') && item.path === query
)
return matchingRoutes
}
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
return matchingRoutes
}
const openMenu = (routeTarget: RouteRecordRaw) => {
addRecent(routeTarget)
route.push(routeTarget.path)
closeCommand()
setTimeout(() => {
menu.expandCurrentActiveMenu()
}, 200)
}
const searchRoutesPath = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.path === query)
return matchingRoutes
}
const closeCommand = () => {
open.value = false
}
const openMenu = (routeTarget: RouteRecordRaw) => {
addRecent(routeTarget)
route.push(routeTarget.path)
closeCommand()
setTimeout(() => {
menu.expandCurrentActiveMenu()
}, 200);
}
const closeCommand = () => {
open.value = false
}
return {
open,
showCommandPalettes,
onKeyPressed,
onKeyUp,
addRecent,
readRecent,
searchRoutesByName,
searchRoutesPath,
openMenu,
closeCommand
}
})
return {
open,
showCommandPalettes,
onKeyPressed,
onKeyUp,
addRecent,
readRecent,
searchRoutesByName,
searchRoutesPath,
openMenu,
closeCommand
}
})