多维表格
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.
 
 
 
 
 
 

82 lines
2.3 KiB

import { acceptHMRUpdate, defineStore } from 'pinia'
import { MAX_WIDTH_FOR_MOBILE_MODE } from '~/lib/constants'
export const useSidebarStore = defineStore('sidebarStore', () => {
const { width } = useWindowSize()
const isViewPortMobile = () => {
return width.value < MAX_WIDTH_FOR_MOBILE_MODE
}
const { isMobileMode } = useGlobal()
const tablesStore = useTablesStore()
const _isLeftSidebarOpen = ref(!isViewPortMobile())
const isLeftSidebarOpen = computed({
get() {
return (isMobileMode.value && !tablesStore.activeTableId) || _isLeftSidebarOpen.value
},
set(value) {
_isLeftSidebarOpen.value = value
},
})
const isRightSidebarOpen = ref(true)
const leftSidebarWidthPercent = ref(isViewPortMobile() ? 0 : 20)
const leftSideBarSize = ref({
old: 20,
current: leftSidebarWidthPercent.value,
})
const leftSidebarState = ref<
'openStart' | 'openEnd' | 'hiddenStart' | 'hiddenEnd' | 'peekOpenStart' | 'peekOpenEnd' | 'peekCloseOpen' | 'peekCloseEnd'
>(isLeftSidebarOpen.value ? 'openEnd' : 'hiddenEnd')
const mobileNormalizedSidebarSize = computed(() => {
if (isMobileMode.value) {
return isLeftSidebarOpen.value ? 100 : 0
}
return leftSideBarSize.value.current
})
const leftSidebarWidth = computed(() => (width.value * mobileNormalizedSidebarSize.value) / 100)
const nonHiddenMobileSidebarSize = computed(() => {
if (isMobileMode.value) {
return 100
}
return leftSideBarSize.value.current ?? leftSideBarSize.value.old
})
const nonHiddenLeftSidebarWidth = computed(() => (width.value * nonHiddenMobileSidebarSize.value) / 100)
const formRightSidebarState = ref({
minWidth: 384,
maxWidth: 600,
width: 384,
})
const formRightSidebarWidthPercent = computed(() => {
return (formRightSidebarState.value.width / (width.value - leftSidebarWidth.value)) * 100
})
return {
isLeftSidebarOpen,
isRightSidebarOpen,
leftSidebarWidthPercent,
leftSideBarSize,
leftSidebarState,
leftSidebarWidth,
mobileNormalizedSidebarSize,
nonHiddenLeftSidebarWidth,
windowSize: width,
formRightSidebarState,
formRightSidebarWidthPercent,
}
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useSidebarStore as any, import.meta.hot))
}