klevze/aritmija
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-13 17:11:09 +02:00
commit ea63897455
2785 changed files with 359868 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
resources/js/projects-renderer/components/ProjectBlockRenderer.vue Normal file
View File

@@ -0,0 +1,226 @@
<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>