129 lines
4.9 KiB
Vue
129 lines
4.9 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import Icon from '@/Components/Icon.vue'
|
|
|
|
import HeroLogoText from '@/Components/Blocks/Heroes/HeroLogoText.vue';
|
|
import HeroLogoTextOptions from '@/Components/Blocks/Heroes/HeroLogoTextOptions.vue';
|
|
|
|
import FAQList from '@/Components/Blocks/FAQ/FAQList.vue';
|
|
import FAQListOptions from '@/Components/Blocks/FAQ/FAQListOptions.vue';
|
|
import FAQCollapse from '@/Components/Blocks/FAQ/FAQCollapse.vue';
|
|
import FAQCollapseOptions from '@/Components/Blocks/FAQ/FAQCollapseOptions.vue';
|
|
import FAQCondensed from '@/Components/Blocks/FAQ/FAQCondensed.vue';
|
|
import FAQCondensedOptions from '@/Components/Blocks/FAQ/FAQCondensedOptions.vue';
|
|
|
|
import TwoColumnText from '@/Components/Blocks/Text/TwoColumnText.vue';
|
|
import TwoColumnTextOptions from '@/Components/Blocks/Text/TwoColumnTextOptions.vue';
|
|
|
|
import FrontPageMenuHeader from '@/Components/Blocks/Statics/FrontPageMenuHeader.vue';
|
|
import FrontPageMenuHeaderOptions from '@/Components/Blocks/Statics/FrontPageMenuHeaderOptions.vue';
|
|
import FrontPageSponsors from '@/Components/Blocks/Statics/FrontPageSponsors.vue';
|
|
import FrontPageSponsorsOptions from '@/Components/Blocks/Statics/FrontPageSponsorsOptions.vue';
|
|
import FrontPageMembershipInfo from '@/Components/Blocks/Statics/FrontPageMembershipInfo.vue';
|
|
import FrontPageMembershipInfoOptions from '@/Components/Blocks/Statics/FrontPageMembershipInfoOptions.vue';
|
|
import FrontPageNewsList from '@/Components/Blocks/Statics/FrontPageNewsList.vue';
|
|
import FrontPageNewsListOptions from '@/Components/Blocks/Statics/FrontPageNewsListOptions.vue';
|
|
import FrontPageEventsList from '@/Components/Blocks/Statics/FrontPageEventsList.vue';
|
|
import FrontPageEventsListOptions from '@/Components/Blocks/Statics/FrontPageEventsListOptions.vue';
|
|
|
|
import PageFooter from '@/Components/Blocks/Statics/PageFooter.vue';
|
|
|
|
const components = {
|
|
HeroLogoText,
|
|
HeroLogoTextOptions,
|
|
FAQList,
|
|
FAQListOptions,
|
|
FAQCollapse,
|
|
FAQCollapseOptions,
|
|
FAQCondensed,
|
|
FAQCondensedOptions,
|
|
TwoColumnText,
|
|
TwoColumnTextOptions,
|
|
FrontPageMenuHeader,
|
|
FrontPageMenuHeaderOptions,
|
|
FrontPageSponsors,
|
|
FrontPageSponsorsOptions,
|
|
FrontPageMembershipInfo,
|
|
FrontPageMembershipInfoOptions,
|
|
FrontPageNewsList,
|
|
FrontPageNewsListOptions,
|
|
FrontPageEventsList,
|
|
FrontPageEventsListOptions,
|
|
PageFooter
|
|
}
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
|
|
images: {
|
|
type: Array
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['delete']);
|
|
|
|
const showDrawer = ref(false);
|
|
|
|
const toggleDrawer = () => {
|
|
showDrawer.value = !showDrawer.value;
|
|
emit('drawer-state', showDrawer.value);
|
|
};
|
|
|
|
const isStatic = computed(() => props.block.static === true);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative group border rounded-md p-4 bg-black dark:bg-gray-800">
|
|
<!-- Render the actual block -->
|
|
<component :images="images" :is="components[block.componentName]" :block="block" />
|
|
|
|
<!-- Floating toolbar -->
|
|
<div class="absolute top-0 left-0 flex flex-col space-y-1 p-1 bg-gray-700 rounded-tr-md rounded-br-md text-white z-10">
|
|
<!-- Drag handle -->
|
|
<div class="cursor-move handle p-1 hover:bg-gray-600 rounded">
|
|
<Icon name="move" class="h-4 w-4" />
|
|
</div>
|
|
|
|
<!-- Open options drawer -->
|
|
<button :disabled="isStatic" @click="toggleDrawer" class="p-1 hover:bg-gray-600 rounded">
|
|
<Icon name="settings" class="h-4 w-4" />
|
|
</button>
|
|
|
|
<!-- Delete block -->
|
|
<button @click="emit('delete')" class="p-1 hover:bg-red-600 text-red-300 rounded">
|
|
<Icon name="trash" class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Options drawer -->
|
|
<teleport to="body">
|
|
<div v-if="showDrawer" class="fixed inset-0 z-50 bg-black/50 flex">
|
|
<div class="bg-white dark:bg-gray-800 w-96 max-w-full h-full shadow-lg p-4 overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Blokkinnstillinger</h2>
|
|
<button @click="toggleDrawer" class="text-gray-500 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400">
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<component
|
|
:is="components[block.optionsComponentName]"
|
|
:block="block"
|
|
:images="images"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1" @click="toggleDrawer"></div>
|
|
</div>
|
|
</teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Optional styling tweaks */
|
|
</style>
|