mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
1 year ago
committed by
GitHub
46 changed files with 883 additions and 1127 deletions
@ -0,0 +1,131 @@
|
||||
<script setup lang="ts"> |
||||
import type { ViewType } from 'nocodb-sdk' |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
const viewsStore = useViewsStore() |
||||
const { views } = storeToRefs(viewsStore) |
||||
const { loadViews, navigateToView } = viewsStore |
||||
|
||||
const table = inject(SidebarTableInj)! |
||||
const project = inject(ProjectInj)! |
||||
|
||||
const isOpen = ref(false) |
||||
|
||||
function onOpenModal({ |
||||
title = '', |
||||
type, |
||||
copyViewId, |
||||
groupingFieldColumnId, |
||||
}: { |
||||
title?: string |
||||
type: ViewTypes |
||||
copyViewId?: string |
||||
groupingFieldColumnId?: string |
||||
}) { |
||||
isOpen.value = false |
||||
|
||||
const isDlgOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||
'modelValue': isDlgOpen, |
||||
title, |
||||
type, |
||||
'tableId': table.value.id, |
||||
'selectedViewId': copyViewId, |
||||
groupingFieldColumnId, |
||||
'views': views, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onCreated': async (view: ViewType) => { |
||||
closeDialog() |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
await loadViews() |
||||
|
||||
navigateToView({ |
||||
view, |
||||
tableId: table.value.id!, |
||||
projectId: project.value.id!, |
||||
}) |
||||
|
||||
$e('a:view:create', { view: view.type }) |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown v-model:isOpen="isOpen" destroy-popup-on-hide @click.stop="isOpen = !isOpen"> |
||||
<slot /> |
||||
<template #overlay> |
||||
<NcMenu class="max-w-48"> |
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })"> |
||||
<div class="item" data-testid="sidebar-view-create-grid"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" /> |
||||
<div>Grid</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
|
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.FORM })"> |
||||
<div class="item" data-testid="sidebar-view-create-form"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" /> |
||||
<div>Form</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })"> |
||||
<div class="item" data-testid="sidebar-view-create-gallery"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" /> |
||||
<div>Gallery</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
<NcMenuItem data-testid="sidebar-view-create-kanban" @click="onOpenModal({ type: ViewTypes.KANBAN })"> |
||||
<div class="item"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" /> |
||||
<div>Kanban</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
</NcMenu> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.item { |
||||
@apply flex flex-row items-center w-36 justify-between; |
||||
} |
||||
|
||||
.item-inner { |
||||
@apply flex flex-row items-center gap-x-1.75; |
||||
} |
||||
|
||||
.plus { |
||||
@apply text-brand-400; |
||||
} |
||||
</style> |
||||
@ -1,151 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
import { iconMap, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports' |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
interface Emits { |
||||
(event: 'openModal', data: { type: ViewTypes; title?: string }): void |
||||
} |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { isSqlView } = useSmartsheetStoreOrThrow() |
||||
|
||||
const { betaFeatureToggleState } = useBetaFeatureToggle() |
||||
|
||||
function onOpenModal(type: ViewTypes, title = '') { |
||||
$e('c:view:create', { view: type }) |
||||
emits('openModal', { type, title }) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu :selected-keys="[]" class="flex flex-col !text-gray-600 !bg-inherit"> |
||||
<div class="px-6 text-xs flex items-center gap-4 my-2 !text-gray-700"> |
||||
{{ $t('activity.createView') }} |
||||
</div> |
||||
|
||||
<a-menu-item |
||||
key="grid" |
||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view" |
||||
@click="onOpenModal(ViewTypes.GRID)" |
||||
> |
||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.grid') }} |
||||
</template> |
||||
|
||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" class="min-w-5 flex" /> |
||||
|
||||
<div>{{ $t('objects.viewType.grid') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<component :is="iconMap.plus" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
key="gallery" |
||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view" |
||||
@click="onOpenModal(ViewTypes.GALLERY)" |
||||
> |
||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.gallery') }} |
||||
</template> |
||||
|
||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" class="min-w-5 flex" /> |
||||
|
||||
<div>{{ $t('objects.viewType.gallery') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<component :is="iconMap.plus" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="!isSqlView" |
||||
key="form" |
||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-form-view" |
||||
@click="onOpenModal(ViewTypes.FORM)" |
||||
> |
||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.form') }} |
||||
</template> |
||||
|
||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" class="min-w-5 flex" /> |
||||
|
||||
<div>{{ $t('objects.viewType.form') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<component :is="iconMap.plus" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
key="kanban" |
||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view" |
||||
@click="onOpenModal(ViewTypes.KANBAN)" |
||||
> |
||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.kanban') }} |
||||
</template> |
||||
|
||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" class="min-w-5 flex" /> |
||||
|
||||
<div>{{ $t('objects.viewType.kanban') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<component :is="iconMap.plus" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
<a-menu-item |
||||
v-if="betaFeatureToggleState.show" |
||||
key="map" |
||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-map-view" |
||||
@click="onOpenModal(ViewTypes.MAP)" |
||||
> |
||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.map') }} |
||||
</template> |
||||
|
||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP]?.color }" /> |
||||
|
||||
<div>{{ $t('objects.viewType.map') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<component :is="iconMap.plus" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<div class="w-full h-3" /> |
||||
</a-menu> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.nc-create-view) { |
||||
@apply !py-0 !h-8 mx-3.75 rounded-md hover:(text-gray-800 bg-gray-100); |
||||
} |
||||
:deep(.nc-create-view.ant-menu-item) { |
||||
@apply px-2.25; |
||||
} |
||||
</style> |
||||
@ -1,281 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import type { ViewType, ViewTypes } from 'nocodb-sdk' |
||||
import { |
||||
ActiveViewInj, |
||||
MetaInj, |
||||
inject, |
||||
ref, |
||||
resolveComponent, |
||||
storeToRefs, |
||||
useCommandPalette, |
||||
useDialog, |
||||
useNuxtApp, |
||||
useRoles, |
||||
useRoute, |
||||
useRouter, |
||||
useViewsStore, |
||||
watch, |
||||
} from '#imports' |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const { activeTab } = storeToRefs(useTabs()) |
||||
|
||||
const viewsStore = useViewsStore() |
||||
const { loadViews } = viewsStore |
||||
const { isViewsLoading, views } = storeToRefs(viewsStore) |
||||
|
||||
const { lastOpenedViewMap } = storeToRefs(useProject()) |
||||
|
||||
const { activeTable } = storeToRefs(useTablesStore()) |
||||
|
||||
const setLastOpenedViewId = (viewId?: string) => { |
||||
if (viewId && activeTab.value?.id) { |
||||
lastOpenedViewMap.value[activeTab.value?.id] = viewId |
||||
} |
||||
} |
||||
|
||||
const { isUIAllowed } = useRoles() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const route = useRoute() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { isRightSidebarOpen } = storeToRefs(useSidebarStore()) |
||||
|
||||
const tabBtnsContainerRef = ref<HTMLElement | null>(null) |
||||
|
||||
/** Watch route param and change active view based on `viewTitle` */ |
||||
watch( |
||||
[views, () => route.params.viewTitle], |
||||
([nextViews, viewTitle]) => { |
||||
const lastOpenedViewId = activeTab.value?.id && lastOpenedViewMap.value[activeTab.value?.id] |
||||
const lastOpenedView = nextViews.find((v) => v.id === lastOpenedViewId) |
||||
|
||||
if (viewTitle) { |
||||
let view = nextViews.find((v) => v.title === viewTitle) |
||||
if (view) { |
||||
activeView.value = view |
||||
setLastOpenedViewId(activeView.value?.id) |
||||
} else { |
||||
/** search with view id and if found replace with title */ |
||||
view = nextViews.find((v) => v.id === viewTitle) |
||||
if (view) { |
||||
router.replace({ |
||||
params: { |
||||
viewTitle: view.id, |
||||
}, |
||||
}) |
||||
} |
||||
} |
||||
} else if (lastOpenedView) { |
||||
/** if active view is not found, set it to last opened view */ |
||||
router.replace({ |
||||
params: { |
||||
viewTitle: lastOpenedView.id, |
||||
}, |
||||
}) |
||||
} else { |
||||
if (nextViews?.length && activeView.value !== nextViews[0]) { |
||||
activeView.value = nextViews[0] |
||||
} |
||||
} |
||||
|
||||
/** if active view is not found, set it to first view */ |
||||
if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) { |
||||
activeView.value = nextViews[0] |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
/** Open delete modal */ |
||||
function onOpenModal({ |
||||
title = '', |
||||
type, |
||||
copyViewId, |
||||
groupingFieldColumnId, |
||||
}: { |
||||
title?: string |
||||
type: ViewTypes |
||||
copyViewId?: string |
||||
groupingFieldColumnId?: string |
||||
}) { |
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||
'modelValue': isOpen, |
||||
title, |
||||
type, |
||||
meta, |
||||
'selectedViewId': copyViewId, |
||||
groupingFieldColumnId, |
||||
'views': views, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onCreated': async (view: ViewType) => { |
||||
closeDialog() |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
await loadViews() |
||||
|
||||
router.push({ params: { viewTitle: view.id || '' } }) |
||||
|
||||
$e('a:view:create', { view: view.type }) |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="relative nc-view-sidebar flex flex-col border-l-1 border-gray-200 relative h-full w-full bg-white"> |
||||
<template v-if="isViewsLoading"> |
||||
<a-skeleton-input :active="true" class="!h-8 !rounded overflow-hidden ml-3 mr-3 mt-3.75 mb-3.75" /> |
||||
</template> |
||||
<div |
||||
v-else |
||||
ref="tabBtnsContainerRef" |
||||
class="flex flex-row group py-1 mx-3.25 mt-1.25 mb-2.75 rounded-md gap-x-2 nc-view-sidebar-tab items-center justify-between" |
||||
> |
||||
<div class="flex text-gray-600 ml-1.75">Views</div> |
||||
<NcTooltip |
||||
placement="bottomLeft" |
||||
hide-on-click |
||||
class="flex opacity-0 group-hover:(opacity-100) transition-all duration-50" |
||||
:class="{ |
||||
'!w-8 !opacity-100': !isRightSidebarOpen, |
||||
}" |
||||
> |
||||
<template #title> |
||||
{{ |
||||
isRightSidebarOpen |
||||
? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}` |
||||
: `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}` |
||||
}} |
||||
</template> |
||||
<NcButton |
||||
type="text" |
||||
size="small" |
||||
class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800" |
||||
@click="isRightSidebarOpen = !isRightSidebarOpen" |
||||
> |
||||
<div class="flex items-center text-inherit"> |
||||
<GeneralIcon |
||||
icon="doubleRightArrow" |
||||
class="duration-150 transition-all" |
||||
:class="{ |
||||
'transform rotate-180': !isRightSidebarOpen, |
||||
}" |
||||
/> |
||||
</div> |
||||
</NcButton> |
||||
</NcTooltip> |
||||
</div> |
||||
|
||||
<div class="flex-1 flex flex-col min-h-0"> |
||||
<div class="flex flex-col h-full justify-between w-full"> |
||||
<div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5"> |
||||
<div v-if="isViewsLoading" class="flex flex-col w-full"> |
||||
<div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
</div> |
||||
<LazySmartsheetSidebarMenuTop v-else :views="views" @open-modal="onOpenModal" @deleted="loadViews" /> |
||||
</div> |
||||
<div v-if="isUIAllowed('viewCreateOrEdit')" class="flex flex-col"> |
||||
<div class="!mb-3 w-full border-b-1 border-gray-200" /> |
||||
|
||||
<div v-if="!activeTable" class="flex flex-col pt-2 pb-5 px-6"> |
||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
||||
<div class="flex flex-row justify-between items-center w-full mt-4.75"> |
||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
</div> |
||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
</div> |
||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
</div> |
||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
<div class="flex"> |
||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<LazySmartsheetSidebarMenuBottom v-else @open-modal="onOpenModal" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
:deep(.ant-menu-title-content) { |
||||
@apply w-full; |
||||
} |
||||
|
||||
:deep(.ant-layout-sider-children) { |
||||
@apply flex flex-col; |
||||
} |
||||
|
||||
.tab { |
||||
@apply flex flex-row items-center h-7.5 justify-center w-1/2 py-1 bg-gray-100 rounded-md gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none; |
||||
} |
||||
|
||||
.tab-icon { |
||||
@apply transition-all duration-300; |
||||
} |
||||
.tab .tab-title { |
||||
@apply min-w-0; |
||||
word-break: 'keep-all'; |
||||
white-space: 'nowrap'; |
||||
display: 'inline'; |
||||
} |
||||
|
||||
.active { |
||||
@apply bg-white shadow text-gray-700; |
||||
} |
||||
</style> |
||||
@ -1,209 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Pane, Splitpanes } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
|
||||
const { |
||||
isRightSidebarOpen, |
||||
isLeftSidebarOpen, |
||||
leftSidebarWidthPercent, |
||||
rightSidebarSize: sideBarSize, |
||||
} = storeToRefs(useSidebarStore()) |
||||
const wrapperRef = ref<HTMLDivElement>() |
||||
const splitpaneWrapperRef = ref() |
||||
|
||||
const { rightSidebarState: sidebarState } = storeToRefs(useSidebarStore()) |
||||
|
||||
const contentSize = computed(() => 100 - sideBarSize.value.current) |
||||
const animationDuration = 250 |
||||
const contentDomWidth = ref(window.innerWidth) |
||||
|
||||
const sidebarWidth = computed(() => (sideBarSize.value.old * contentDomWidth.value) / 100) |
||||
const currentSidebarSize = computed({ |
||||
get: () => sideBarSize.value.current, |
||||
set: (val) => { |
||||
sideBarSize.value.current = val |
||||
sideBarSize.value.old = val |
||||
}, |
||||
}) |
||||
|
||||
watch(isRightSidebarOpen, () => { |
||||
sideBarSize.value.current = sideBarSize.value.old |
||||
|
||||
if (isRightSidebarOpen.value) { |
||||
setTimeout(() => (sidebarState.value = 'openStart'), 0) |
||||
|
||||
setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration) |
||||
} else { |
||||
sideBarSize.value.old = sideBarSize.value.current |
||||
|
||||
sidebarState.value = 'hiddenStart' |
||||
|
||||
setTimeout(() => { |
||||
sideBarSize.value.current = 0 |
||||
|
||||
sidebarState.value = 'hiddenEnd' |
||||
}, animationDuration) |
||||
} |
||||
}) |
||||
|
||||
function handleMouseMove(e: MouseEvent) { |
||||
if (!wrapperRef.value) return |
||||
if (sidebarState.value === 'openEnd') return |
||||
|
||||
const viewportWidth = window.innerWidth |
||||
|
||||
if (e.clientX > viewportWidth - 14 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) { |
||||
sidebarState.value = 'peekOpenStart' |
||||
|
||||
setTimeout(() => { |
||||
sidebarState.value = 'peekOpenEnd' |
||||
}, animationDuration) |
||||
} else if (e.clientX < viewportWidth - (sidebarWidth.value + 10) && sidebarState.value === 'peekOpenEnd') { |
||||
sidebarState.value = 'peekCloseOpen' |
||||
|
||||
setTimeout(() => { |
||||
sidebarState.value = 'peekCloseEnd' |
||||
}, animationDuration) |
||||
} |
||||
} |
||||
|
||||
function onWindowResize() { |
||||
contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth |
||||
} |
||||
|
||||
onMounted(() => { |
||||
document.addEventListener('mousemove', handleMouseMove) |
||||
|
||||
window.addEventListener('resize', onWindowResize) |
||||
}) |
||||
|
||||
onBeforeUnmount(() => { |
||||
document.removeEventListener('mousemove', handleMouseMove) |
||||
window.removeEventListener('resize', onWindowResize) |
||||
}) |
||||
|
||||
watch( |
||||
[isLeftSidebarOpen, leftSidebarWidthPercent], |
||||
() => { |
||||
if (isLeftSidebarOpen.value) { |
||||
contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth |
||||
} else { |
||||
contentDomWidth.value = window.innerWidth |
||||
} |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<Splitpanes |
||||
ref="splitpaneWrapperRef" |
||||
class="nc-view-sidebar-content-resizable-wrapper w-full h-full" |
||||
:class="{ |
||||
'hide-resize-bar': !isRightSidebarOpen || sidebarState === 'openStart', |
||||
}" |
||||
@resize="currentSidebarSize = $event[1].size" |
||||
> |
||||
<Pane :size="contentSize"> |
||||
<slot name="content" /> |
||||
</Pane> |
||||
<Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-view-sidebar-splitpane relative !overflow-visible"> |
||||
<div |
||||
ref="wrapperRef" |
||||
class="nc-view-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible" |
||||
:class="{ |
||||
'minimized-height': !isRightSidebarOpen, |
||||
'peek-sidebar': ['peekOpenEnd', 'peekCloseOpen'].includes(sidebarState), |
||||
'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState), |
||||
}" |
||||
:style="{ |
||||
width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`, |
||||
}" |
||||
> |
||||
<slot name="sidebar" /> |
||||
</div> |
||||
</Pane> |
||||
</Splitpanes> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-view-sidebar-wrapper.minimized-height > * { |
||||
@apply pb-1 !(rounded-l-lg border-1 border-gray-200 shadow-lg); |
||||
height: 89.5%; |
||||
} |
||||
|
||||
.nc-view-sidebar-wrapper > * { |
||||
transition: all 0.15s ease-in-out; |
||||
@apply z-10 absolute; |
||||
} |
||||
|
||||
.nc-view-sidebar-wrapper.peek-sidebar { |
||||
> * { |
||||
@apply !opacity-100; |
||||
transform: translateX(-100%); |
||||
} |
||||
} |
||||
|
||||
.nc-view-sidebar-wrapper.hide-sidebar { |
||||
@apply !min-w-0; |
||||
|
||||
> * { |
||||
@apply opacity-0; |
||||
transform: translateX(100%); |
||||
} |
||||
} |
||||
|
||||
/** Split pane CSS */ |
||||
|
||||
.nc-view-sidebar-content-resizable-wrapper > { |
||||
.splitpanes__splitter { |
||||
width: 0 !important; |
||||
position: relative; |
||||
overflow: visible; |
||||
} |
||||
.splitpanes__splitter:before { |
||||
@apply bg-transparent; |
||||
width: 1px; |
||||
content: ''; |
||||
position: absolute; |
||||
left: -2px; |
||||
top: 0; |
||||
height: 100%; |
||||
z-index: 40; |
||||
} |
||||
|
||||
.splitpanes__splitter:hover:before { |
||||
@apply bg-scrollbar; |
||||
z-index: 40; |
||||
width: 4px !important; |
||||
left: -2px; |
||||
} |
||||
|
||||
.splitpanes--dragging .splitpanes__splitter:before { |
||||
@apply bg-scrollbar; |
||||
z-index: 40; |
||||
width: 10px !important; |
||||
left: -2px; |
||||
} |
||||
} |
||||
|
||||
.splitpanes--dragging > .splitpanes__splitter::before { |
||||
@apply w-1 mr-0 bg-scrollbar; |
||||
z-index: 40; |
||||
width: 4px !important; |
||||
left: -2px; |
||||
} |
||||
|
||||
.splitpanes--dragging { |
||||
cursor: col-resize; |
||||
} |
||||
|
||||
.nc-view-sidebar-content-resizable-wrapper.hide-resize-bar > { |
||||
.splitpanes__splitter { |
||||
display: none !important; |
||||
background-color: transparent !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,5 @@
|
||||
import type { BaseType } from 'nocodb-sdk' |
||||
|
||||
const isDefaultBase = (base: BaseType) => base.is_meta |
||||
|
||||
export { isDefaultBase } |
||||
Loading…
Reference in new issue