61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { computed, defineComponent } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import type { Block } from '../layout.types'
|
|
import clsx from 'clsx'
|
|
import LinkBlock from './LinkBlock'
|
|
import { useMenuStore } from '../GlobalMenu'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
block: {
|
|
type: Object as () => Block,
|
|
required: true
|
|
},
|
|
big: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const layout = useLayoutStore()
|
|
const selectedDir = computed(() => {
|
|
const link = props.block.link
|
|
const id = link.slice(3)
|
|
const dir = layout.state.dir[id]
|
|
return (
|
|
dir || {
|
|
label: '',
|
|
list: []
|
|
}
|
|
)
|
|
})
|
|
const menu = useMenuStore()
|
|
return () => (
|
|
<div
|
|
onClick={(e) => {
|
|
layout.openDir = props.block.link.slice(3)
|
|
e.stopPropagation()
|
|
}}
|
|
class={clsx('w-full h-full bg-white/60 backdrop-blur grid', {
|
|
'grid-rows-3 grid-cols-3 gap-[6%] p-[8%]': props.big,
|
|
'grid-rows-2 grid-cols-2 gap-[8%] p-[10%]': !props.big
|
|
})}
|
|
onContextmenu={() => {
|
|
menu.open(props.block)
|
|
}}
|
|
>
|
|
{selectedDir.value.list
|
|
.filter((_, idx) => idx < (props.big ? 9 : 4))
|
|
.map((el) => (
|
|
<div
|
|
class="w-full h-full rounded-lg overflow-hidden"
|
|
|
|
>
|
|
<LinkBlock block={el} brief disable={true} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
})
|