226 lines
7.0 KiB
Vue
226 lines
7.0 KiB
Vue
<script setup>
|
|
import { computed, inject } from 'vue';
|
|
import FullWidthBlock from './blocks/FullWidthBlock.vue';
|
|
import FullWidthImageBlock from './blocks/FullWidthImageBlock.vue';
|
|
import FullWidthTextBlock from './blocks/FullWidthTextBlock.vue';
|
|
import TwoColumnsBlock from './blocks/TwoColumnsBlock.vue';
|
|
import TwoColumnImagesBlock from './blocks/TwoColumnImagesBlock.vue';
|
|
import VideoBlock from './blocks/VideoBlock.vue';
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
activeLang: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['select']);
|
|
|
|
const componentMap = {
|
|
// New types
|
|
FullWidth: FullWidthBlock,
|
|
TwoColumns: TwoColumnsBlock,
|
|
// Legacy (kept for safety)
|
|
FullWidthText: FullWidthTextBlock,
|
|
TwoColumnImages: TwoColumnImagesBlock,
|
|
FullWidthImage: FullWidthImageBlock,
|
|
Video: VideoBlock,
|
|
};
|
|
|
|
const resolvedComponent = computed(() => componentMap[props.block.type] || FullWidthBlock);
|
|
|
|
const blockDrag = inject('editorBlockDrag', null);
|
|
const toggleVisibility = inject('editorToggleBlockVisibility', null);
|
|
const swapColumns = inject('editorSwapBlockColumns', null);
|
|
|
|
const isTwoColumn = computed(() => props.block.type === 'TwoColumns' || props.block.type === 'TwoColumnImages');
|
|
const isDragging = computed(() => blockDrag?.dragSrcId.value === props.block.id);
|
|
const isDragOver = computed(() => blockDrag?.dragOverId.value === props.block.id);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="project-block"
|
|
:data-block-id="block.id"
|
|
:class="{
|
|
'project-block--selected': selected,
|
|
'project-block--dragging': isDragging,
|
|
'project-block--over': isDragOver,
|
|
'project-block--editable': editable,
|
|
'project-block--hidden': editable && block.hidden,
|
|
}"
|
|
@click="emit('select', block.id)"
|
|
@dragover="editable && blockDrag ? blockDrag.onDragOver($event, block.id) : null"
|
|
@dragleave="editable && blockDrag ? blockDrag.onDragLeave() : null"
|
|
@drop="editable && blockDrag ? blockDrag.onDrop($event, block.id) : null"
|
|
@dragend="editable && blockDrag ? blockDrag.onDragEnd() : null"
|
|
>
|
|
<div v-if="editable" class="project-block__bar">
|
|
<div class="project-block__bar-left">
|
|
<span class="project-block__badge" :class="{ 'project-block__badge--hidden': block.hidden }">{{ block.name ? `${block.name} — ${block.type}` : block.type }}</span>
|
|
<span v-if="block.hidden" class="project-block__hidden-label">Hidden — not visible on frontend</span>
|
|
</div>
|
|
<div class="project-block__bar-actions">
|
|
<button
|
|
v-if="swapColumns && isTwoColumn"
|
|
type="button"
|
|
class="project-block__vis-btn"
|
|
title="Swap columns"
|
|
@click.stop="swapColumns(block.id)"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16V4m0 0L3 8m4-4l4 4"/><path d="M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
|
|
</button>
|
|
<button
|
|
v-if="toggleVisibility"
|
|
type="button"
|
|
class="project-block__vis-btn"
|
|
:class="{ 'project-block__vis-btn--hidden': block.hidden }"
|
|
:title="block.hidden ? 'Hidden — click to show' : 'Visible — click to hide'"
|
|
@click.stop="toggleVisibility(block.id)"
|
|
>
|
|
<!-- Eye open -->
|
|
<svg v-if="!block.hidden" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
<!-- Eye off -->
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
|
</button>
|
|
<span
|
|
v-if="blockDrag"
|
|
class="project-block__handle"
|
|
title="Drag to reorder"
|
|
draggable="true"
|
|
@dragstart.stop="blockDrag.onDragStart($event, block.id)"
|
|
>⠿</span>
|
|
</div>
|
|
</div>
|
|
<component :is="resolvedComponent" :block="block" :active-lang="activeLang" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.project-block {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
position: relative;
|
|
scroll-margin-top: 8rem;
|
|
}
|
|
|
|
.project-block--editable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.project-block--editable:not(.project-block--selected):hover {
|
|
outline: 2px solid rgba(15, 23, 42, 0.12);
|
|
outline-offset: 0.75rem;
|
|
}
|
|
|
|
.project-block--dragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.project-block--hidden {
|
|
border-left: 3px solid #ef4444;
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
.project-block--over {
|
|
outline: 2px dashed rgba(14, 116, 144, 0.6);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
|
|
.project-block--selected {
|
|
outline: 2px solid rgba(14, 116, 144, 0.35);
|
|
outline-offset: 0.75rem;
|
|
}
|
|
|
|
/* Top bar: badge + drag handle */
|
|
.project-block__bar {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.project-block__bar-left {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-block__hidden-label {
|
|
color: #ef4444;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.project-block__badge {
|
|
background: rgba(14, 116, 144, 0.1);
|
|
border-radius: 999px;
|
|
color: #0f766e;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 0.35rem 0.7rem;
|
|
}
|
|
|
|
.project-block__handle {
|
|
color: #94a3b8;
|
|
cursor: grab;
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
padding: 0.2rem 0.4rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.project-block__handle:hover {
|
|
color: #0f766e;
|
|
}
|
|
|
|
.project-block__bar-actions {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.project-block__badge--hidden {
|
|
background: #fee2e2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.project-block__vis-btn {
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0.3rem;
|
|
color: #94a3b8;
|
|
cursor: pointer;
|
|
display: flex;
|
|
line-height: 1;
|
|
padding: 0.2rem;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.project-block__vis-btn:hover {
|
|
color: #0f766e;
|
|
}
|
|
|
|
.project-block__vis-btn--hidden {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.project-block__vis-btn--hidden:hover {
|
|
color: #b91c1c;
|
|
}
|
|
</style> |