mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
10 KiB
322 lines
10 KiB
<script setup lang="ts"> |
|
import { onKeyUp, useDebounceFn, useVModel } from '@vueuse/core' |
|
import { iconMap, onClickOutside } from '#imports' |
|
import type { CommandPaletteType } from '~/lib' |
|
|
|
const props = defineProps<{ |
|
open: boolean |
|
setActiveCmdView: (cmd: CommandPaletteType) => void |
|
}>() |
|
|
|
const emits = defineEmits(['update:open']) |
|
|
|
const vOpen = useVModel(props, 'open', emits) |
|
|
|
const search = ref('') |
|
|
|
const modalEl = ref<HTMLElement>() |
|
|
|
const cmdInputEl = ref<HTMLInputElement>() |
|
|
|
const { user } = useGlobal() |
|
|
|
const viewStore = useViewsStore() |
|
|
|
const { recentViews, activeView } = storeToRefs(viewStore) |
|
|
|
const selected: Ref<string> = ref('') |
|
|
|
const newView = ref< |
|
| { |
|
viewId: string | null |
|
tableId: string |
|
baseId: string |
|
} |
|
| undefined |
|
>() |
|
|
|
const filteredViews = computed(() => { |
|
const filteredList = recentViews.value.filter((v) => { |
|
if (!v.viewName || !v.tableName || !v.baseName) return false |
|
return v.viewName.toLowerCase().includes(search.value.toLowerCase()) |
|
}) |
|
|
|
if (filteredList.find((v) => v.tableID + v.viewName === selected.value) && filteredList.length) { |
|
selected.value = filteredList[0].tableID + filteredList[0].viewName |
|
} |
|
return filteredList |
|
}) |
|
|
|
const changeView = useDebounceFn( |
|
async ({ viewId, tableId, baseId }: { viewId: string | null; tableId: string; baseId: string }) => { |
|
await viewStore.changeView({ viewId, tableId, baseId }) |
|
vOpen.value = false |
|
}, |
|
200, |
|
) |
|
|
|
onKeyUp('Enter', async () => { |
|
if (vOpen.value && newView.value) { |
|
search.value = '' |
|
await changeView({ viewId: newView.value.viewId, tableId: newView.value.tableId, baseId: newView.value.baseId }) |
|
} |
|
}) |
|
|
|
function scrollToTarget() { |
|
const element = document.querySelector('.cmdk-action.selected') |
|
const headerOffset = 45 |
|
const elementPosition = element?.getBoundingClientRect().top |
|
const offsetPosition = elementPosition! + window.pageYOffset - headerOffset |
|
|
|
window.scrollTo({ |
|
top: offsetPosition, |
|
behavior: 'smooth', |
|
}) |
|
} |
|
|
|
const moveUp = () => { |
|
if (!filteredViews.value.length) return |
|
const index = filteredViews.value.findIndex((v) => v.tableID + v.viewName === selected.value) |
|
if (index === 0) { |
|
selected.value = |
|
filteredViews.value[filteredViews.value.length - 1].tableID + filteredViews.value[filteredViews.value.length - 1].viewName |
|
|
|
const cmdOption = filteredViews.value[filteredViews.value.length - 1] |
|
newView.value = { |
|
viewId: cmdOption.viewId ?? null, |
|
tableId: cmdOption.tableID, |
|
baseId: cmdOption.baseId, |
|
} |
|
document.querySelector('.actions')?.scrollTo({ top: 99999, behavior: 'smooth' }) |
|
} else { |
|
selected.value = filteredViews.value[index - 1].tableID + filteredViews.value[index - 1].viewName |
|
const cmdOption = filteredViews.value[index - 1] |
|
scrollToTarget() |
|
|
|
newView.value = { |
|
viewId: cmdOption.viewId ?? null, |
|
tableId: cmdOption.tableID, |
|
baseId: cmdOption.baseId, |
|
} |
|
} |
|
} |
|
|
|
const moveDown = () => { |
|
if (!filteredViews.value.length) return |
|
const index = filteredViews.value.findIndex((v) => v.tableID + v.viewName === selected.value) |
|
if (index === filteredViews.value.length - 1) { |
|
selected.value = filteredViews.value[0].tableID + filteredViews.value[0].viewName |
|
|
|
const cmdOption = filteredViews.value[0] |
|
newView.value = { |
|
viewId: cmdOption.viewId ?? null, |
|
tableId: cmdOption.tableID, |
|
baseId: cmdOption.baseId, |
|
} |
|
document.querySelector('.actions')?.scrollTo({ top: 0, behavior: 'smooth' }) |
|
} else { |
|
selected.value = filteredViews.value[index + 1].tableID + filteredViews.value[index + 1].viewName |
|
const cmdOption = filteredViews.value[index + 1] |
|
|
|
scrollToTarget() |
|
|
|
newView.value = { |
|
viewId: cmdOption.viewId ?? null, |
|
tableId: cmdOption.tableID, |
|
baseId: cmdOption.baseId, |
|
} |
|
} |
|
} |
|
|
|
const hide = () => { |
|
vOpen.value = false |
|
} |
|
|
|
onClickOutside(modalEl, () => { |
|
search.value = '' |
|
if (vOpen.value) hide() |
|
}) |
|
|
|
useEventListener('keydown', (e: KeyboardEvent) => { |
|
if (e.key === 'Escape') { |
|
hide() |
|
} else if (e.key === 'Enter') { |
|
if (newView.value) { |
|
changeView({ viewId: newView.value.viewId, tableId: newView.value.tableId, baseId: newView.value.baseId }) |
|
} |
|
} else if (e.key === 'ArrowUp') { |
|
if (!vOpen.value) return |
|
e.preventDefault() |
|
moveUp() |
|
} else if (e.key === 'ArrowDown') { |
|
if (!vOpen.value) return |
|
e.preventDefault() |
|
moveDown() |
|
} else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'l') { |
|
if (!user.value) return |
|
if (!vOpen.value) { |
|
vOpen.value = true |
|
} else { |
|
moveUp() |
|
} |
|
} else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'l') { |
|
if (!user.value) return |
|
if (!vOpen.value) { |
|
vOpen.value = true |
|
} else moveDown() |
|
} else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { |
|
hide() |
|
} else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'j') { |
|
hide() |
|
} else if (vOpen.value) { |
|
cmdInputEl.value?.focus() |
|
} |
|
}) |
|
|
|
onMounted(() => { |
|
document.querySelector('.cmdOpt-list')?.focus() |
|
if (!activeView.value || !filteredViews.value.length) return |
|
const index = filteredViews.value.findIndex( |
|
(v) => v.viewName === filteredViews.value?.title && v.tableID === filteredViews.value?.fk_model_id, |
|
) |
|
if (index + 1 > filteredViews.value.length) { |
|
selected.value = filteredViews.value[0].tableID + filteredViews.value[0].viewName |
|
} else { |
|
selected.value = filteredViews.value[index + 1].tableID + filteredViews.value[index + 1].viewName |
|
} |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div v-if="vOpen" class="cmdk-modal cmdl-modal" :class="{ 'cmdk-modal-active cmdl-modal-active': vOpen }"> |
|
<div ref="modalEl" class="cmdk-modal-content cmdl-modal-content relative h-[25.25rem]"> |
|
<div class="cmdk-input-wrapper"> |
|
<GeneralIcon class="h-4 w-4 text-gray-500" icon="search" /> |
|
<input ref="cmdInputEl" v-model="search" class="cmdk-input" type="text" /> |
|
</div> |
|
<div class="flex items-center bg-white w-full z-[50]"> |
|
<div class="text-sm px-4 py-2 text-gray-500">Recent Views</div> |
|
</div> |
|
<div class="flex flex-col shrink grow overflow-hidden shadow-[rgb(0_0_0_/_50%)_0px_16px_70px] max-w-[650px] p-0"> |
|
<div class="scroll-smooth actions overflow-auto nc-scrollbar-md relative m-0 px-0 py-2"> |
|
<div v-if="filteredViews.length < 1" class="flex flex-col p-4 items-start justify-center text-md">No recent views</div> |
|
<div v-else class="flex mb-10 flex-col cmdOpt-list w-full"> |
|
<div |
|
v-for="cmdOption of filteredViews" |
|
:key="cmdOption.tableID + cmdOption.viewName" |
|
v-e="['a:cmdL:changeView']" |
|
:class="{ |
|
selected: selected === cmdOption.tableID + cmdOption.viewName, |
|
}" |
|
class="cmdk-action" |
|
@click="changeView({ viewId: cmdOption.viewId!, tableId: cmdOption.tableID, baseId: cmdOption.baseId })" |
|
> |
|
<div class="cmdk-action-content"> |
|
<div class="flex w-1/2 flex-grow-1 items-center"> |
|
<div class="flex gap-2"> |
|
<GeneralViewIcon :meta="{ type: cmdOption.viewType }" /> |
|
<a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg"> |
|
<template #title> |
|
{{ cmdOption.viewName }} |
|
</template> |
|
<span class="truncate max-w-56 capitalize"> |
|
{{ cmdOption.viewName }} |
|
</span> |
|
</a-tooltip> |
|
</div> |
|
</div> |
|
<div class="flex w-1/2 text-gray-600"> |
|
<div class="flex gap-2 px-2 py-1 rounded-md bg-gray-100 items-center"> |
|
<component :is="iconMap.projectGray" class="w-4 h-4 text-transparent" /> |
|
<a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg"> |
|
<template #title> |
|
{{ cmdOption.baseName }} |
|
</template> |
|
<span class="max-w-32 truncate capitalize"> |
|
{{ cmdOption.baseName }} |
|
</span> |
|
</a-tooltip> |
|
<span class="text-bold"> / </span> |
|
|
|
<component :is="iconMap.table" class="w-4 h-4 text-transparent" /> |
|
<a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg"> |
|
<template #title> |
|
{{ cmdOption.tableName }} |
|
</template> |
|
<span class="max-w-28 truncate capitalize"> |
|
{{ cmdOption.tableName }} |
|
</span> |
|
</a-tooltip> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<CmdFooter active-cmd="cmd-l" :set-active-cmd-view="setActiveCmdView" /> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss"> |
|
/* TODO Move styles to Windi Classes */ |
|
|
|
:root { |
|
--cmdk-secondary-background-color: rgb(230, 230, 230); |
|
--cmdk-secondary-text-color: rgb(101, 105, 111); |
|
--cmdk-selected-background: rgb(245, 245, 245); |
|
|
|
--cmdk-icon-color: var(--cmdk-secondary-text-color); |
|
--cmdk-icon-size: 1.2em; |
|
|
|
--cmdk-modal-background: #fff; |
|
} |
|
.cmdk-modal { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(255, 255, 255, 0.5); |
|
z-index: 1000; |
|
|
|
color: rgb(60, 65, 73); |
|
font-size: 16px; |
|
|
|
.cmdk-action { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: center; |
|
outline: none; |
|
transition: color 0s ease 0s; |
|
width: 100%; |
|
font-size: 0.9em; |
|
border-left: 4px solid transparent; |
|
|
|
&.selected { |
|
cursor: pointer; |
|
background-color: rgb(248, 249, 251); |
|
border-left: 4px solid #36f; |
|
outline: none; |
|
} |
|
|
|
.cmdk-action-content { |
|
display: flex; |
|
align-items: center; |
|
flex-shrink: 0.01; |
|
flex-grow: 1; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
padding: 0.75em 1em; |
|
width: 640px; |
|
} |
|
|
|
.cmdk-action-icon { |
|
margin-right: 0.4em; |
|
} |
|
} |
|
} |
|
</style>
|
|
|