102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class="columns-layout"
|
|
:class="[`columns-${cols}`, `divider-${divider}`, `collapse-${collapse}`]"
|
|
>
|
|
<template v-if="cols === 'events-sidebar'">
|
|
<div class="col col-main">
|
|
<slot />
|
|
</div>
|
|
<EventsMiniSidebar :events="upcomingEvents" />
|
|
</template>
|
|
<template v-else>
|
|
<!-- cols="2": named slots only. Use <template #left> and <template #right>. -->
|
|
<div class="col col-left">
|
|
<slot name="left" />
|
|
</div>
|
|
<div class="col col-right">
|
|
<slot name="right" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
cols: { type: String, default: '2' }, // "2" | "events-sidebar"
|
|
divider: { type: String, default: 'dashed' }, // "dashed" | "none"
|
|
collapse: { type: String, default: '1024' }, // "1024" | "768"
|
|
limit: { type: Number, default: 3 },
|
|
})
|
|
|
|
const upcomingEvents = ref([])
|
|
if (props.cols === 'events-sidebar') {
|
|
const { data } = await useFetch('/api/events', {
|
|
query: { upcoming: true, limit: props.limit },
|
|
default: () => [],
|
|
})
|
|
upcomingEvents.value = data.value || []
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.columns-layout {
|
|
display: grid;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* cols="2" */
|
|
.columns-2 {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* cols="events-sidebar" */
|
|
.columns-events-sidebar {
|
|
grid-template-columns: 1fr 200px;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Ensure grid children don't overflow */
|
|
.col {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Dashed divider: right border on the first column child (except events-sidebar, which owns its own border-left) */
|
|
.divider-dashed .col:first-child,
|
|
.divider-dashed .col-main {
|
|
border-right: 1px dashed var(--border);
|
|
}
|
|
.divider-dashed.columns-events-sidebar .col-main {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Responsive collapse at 1024px (default) */
|
|
.collapse-1024 {
|
|
--col-collapse: 1024px;
|
|
}
|
|
|
|
/* Responsive collapse at 768px */
|
|
.collapse-768 {
|
|
--col-collapse: 768px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.collapse-1024 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.collapse-1024 .col:first-child,
|
|
.collapse-1024 .col-main {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.collapse-768 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.collapse-768 .col:first-child,
|
|
.collapse-768 .col-main {
|
|
border-right: none;
|
|
}
|
|
}
|
|
</style>
|