failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
f4ilji
2024-12-10 02:23:09 +05:00
parent a8fb813177
commit 0cd5fb9afb
2 changed files with 57 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BuilderUi/Pages/PageTabBuilder.vue
+56 -23
View File
@@ -1,45 +1,78 @@
<template>
<div>
<PageSkeleton v-if="loading" />
<div class="space-y-6" v-else>
<component
v-for="(block, index) in blocks"
:key="index"
:is="getComponent(block.type)"
:block="block"
/>
</div>
</div>
</template>
<script>
import {Link} from "@inertiajs/vue3";
import slugify from "slugify";
import HeadingBlock from "@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue";
import ParagraphBlock from "@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue";
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
import ImageBlock from "@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue";
import FileBlock from "@/Components/BuilderUi/Pages/Blocks/FileBlock.vue";
import PersonBlock from "@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue";
import StepperBlock from "@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue";
import VideoBlock from "@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue";
import PostListBlock from "@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue";
import { defineAsyncComponent } from 'vue';
import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
export default {
name: "PageTabBuilder",
components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
components: {PageSkeleton},
data() {
return {
loading: true, // Флаг загрузки
};
},
methods: {
async loadAllComponents() {
const componentMap = {
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
images: () => import('@/Components/ClientImageSlider.vue'),
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
};
// Создайте массив промисов для загрузки всех компонентов
const promises = Object.values(componentMap).map(load => load());
// Дождитесь завершения всех загрузок
await Promise.all(promises);
this.loading = false; // Установите флаг загрузки в false
},
getComponent(type) {
const componentMap = {
heading: 'HeadingBlock',
paragraph: 'ParagraphBlock',
images: 'ClientImageSlider',
image: 'ImageBlock',
files: 'FileBlock',
person: 'PersonBlock',
stepper: 'StepperBlock',
video: 'VideoBlock',
postsList: 'PostListBlock',
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
images: () => import('@/Components/ClientImageSlider.vue'),
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
};
return componentMap[type] || null;
return defineAsyncComponent(componentMap[type] || null);
},
},
async created() {
await this.loadAllComponents(); // Загрузить все компоненты при создании
},
props: {
blocks: {
resources/js/Components/ClientMainSlider.vue
+1 -1
View File
@@ -39,7 +39,7 @@
</svg>
</button>
<div class="flex space-x-3 w-[100px] items-center font-semibold text-xl">
<div class="flex space-x-3 w-[100px] items-center font-semibold text-xl text-white">
<span>{{ currentIndex + 1 }}</span>
<div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 my-slider-progress-bar" :style="{ 'width': `${percentage}%` }"></div>