Changes
This commit is contained in:
f4ilji
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="">
|
||||
<a class="" :href="'/storage/'+ file.path" download type="button">
|
||||
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[30px] h-[30px] bg-black flex justify-center items-center rounded-md mr-2">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9375 12.2188H12.75C12.4682 12.2188 12.198 12.1068 11.9987 11.9076C11.7994 11.7083 11.6875 11.438 11.6875 11.1562V5.84375C11.6875 5.56196 11.7994 5.29171 11.9987 5.09245C12.198 4.89319 12.4682 4.78125 12.75 4.78125H15.9375V5.84375H12.75V11.1562H15.9375V12.2188ZM9.5625 12.2188H7.4375C7.15571 12.2188 6.88546 12.1068 6.6862 11.9076C6.48694 11.7083 6.375 11.438 6.375 11.1562V5.84375C6.375 5.56196 6.48694 5.29171 6.6862 5.09245C6.88546 4.89319 7.15571 4.78125 7.4375 4.78125H9.5625C9.84429 4.78125 10.1145 4.89319 10.3138 5.09245C10.5131 5.29171 10.625 5.56196 10.625 5.84375V11.1562C10.625 11.438 10.5131 11.7083 10.3138 11.9076C10.1145 12.1068 9.84429 12.2188 9.5625 12.2188ZM7.4375 5.84375V11.1562H9.5625V5.84375H7.4375ZM3.1875 12.2188H1.0625V4.78125H3.1875C3.75087 4.78195 4.29096 5.00606 4.68933 5.40442C5.08769 5.80279 5.3118 6.34288 5.3125 6.90625V10.0938C5.3118 10.6571 5.08769 11.1972 4.68933 11.5956C4.29096 11.9939 3.75087 12.218 3.1875 12.2188ZM2.125 11.1562H3.1875C3.46929 11.1562 3.73954 11.0443 3.9388 10.8451C4.13806 10.6458 4.25 10.3755 4.25 10.0938V6.90625C4.25 6.62446 4.13806 6.35421 3.9388 6.15495C3.73954 5.95569 3.46929 5.84375 3.1875 5.84375H2.125V11.1562Z" fill="#F8F8F8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ file.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="md:font-bold md:text-xl text-lg font-medium text-gray-800">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "HeadingBlock",
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ImageBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="ms-4 mt-2 w-full border px-4 py-4 rounded-xl shadow-sm">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-2 sm:px-3 lg:px-4mx-auto">
|
||||
<!-- Grid -->
|
||||
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-1 shrink-0 size-7 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<div class="grow">
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-nowrap">
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.page }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 class="mt-1 group-hover:text-blue-600 font-semibold text-gray-700">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PageItemBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
breadcrumbs: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPage(id) {
|
||||
axios.get(route('client.widget.page.single', id))
|
||||
.then(response => {
|
||||
this.page = response.data.data.page;
|
||||
this.breadcrumbs = response.data.data.breadcrumbs;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.block.data.page)
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-light paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ParagraphBlock",
|
||||
methods: {
|
||||
wrapTables(data) {
|
||||
if (data.type === 'paragraph' && data.data && data.data.content) {
|
||||
// Используем регулярное выражение для поиска всех таблиц
|
||||
const wrappedContent = data.data.content.replace(/<table([^>]*)>([\s\S]*?)<\/table>/g, (match, attrs, content) => {
|
||||
return `<div class="div-table"><table${attrs}>${content}</table></div>`;
|
||||
});
|
||||
|
||||
// Возвращаем новый объект с обновленным контентом
|
||||
return {
|
||||
...data,
|
||||
data: {
|
||||
...data.data,
|
||||
content: wrappedContent
|
||||
}
|
||||
};
|
||||
}
|
||||
return data; // Если тип не 'paragraph', возвращаем объект без изменений
|
||||
}
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container hr {
|
||||
@apply my-4
|
||||
}
|
||||
|
||||
.paragraph-container strong {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.div-table {
|
||||
@apply overflow-x-auto
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container table {
|
||||
@apply w-full border-collapse mt-4 mb-4 overflow-hidden; /* Ширина 100%, стыковка границ, отступы, закругленные края */
|
||||
}
|
||||
|
||||
.paragraph-container th, .paragraph-container td {
|
||||
@apply border border-gray-300 p-3 text-left; /* Границы, отступы, выравнивание текста */
|
||||
}
|
||||
|
||||
.paragraph-container th {
|
||||
@apply bg-gray-100 text-gray-800 font-semibold; /* Фон заголовка, цвет текста, жирный шрифт */
|
||||
}
|
||||
|
||||
.paragraph-container tr {
|
||||
@apply transition-colors duration-200; /* Плавный переход цветов */
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-200; /* Фон строки при наведении */
|
||||
}
|
||||
|
||||
.paragraph-container td {
|
||||
@apply text-gray-600; /* Цвет текста ячеек */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img @click="toggler = !toggler" loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.data.name }}
|
||||
</p>
|
||||
<template v-for="item in block.data.info">
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ item.column }}: {{ item.content }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.photo]"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "PersonBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.data.preview ? 'storage/images/' + post.data.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPost(id) {
|
||||
axios.get(route('client.widget.post.single', id), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.post = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPost(this.block.data.post);
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.preview ? 'storage/images/' + post.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="flex justify-center">
|
||||
<a :href="route('client.post.index', { category: block.data.category })" class="group inline-flex items-center gap-x-1 text-sm font-semibold text-[#1A5AAF]">
|
||||
Все новости
|
||||
<svg class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPosts() {
|
||||
axios.get(route('client.widget.post.index'), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.posts = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(step, index) in block.data.steps">
|
||||
<div class="flex gap-x-3">
|
||||
<div class="w-16 text-end min-w-[4rem]">
|
||||
<span class="text-xs text-gray-500">{{ block.data.step_name }} {{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
|
||||
<div class="relative z-10 size-7 flex justify-center items-center">
|
||||
<div class="size-2 rounded-full bg-primaryBlue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-w-[70%] pt-0.5 pb-8 overflow-wrap break-words">
|
||||
<h3 class="flex gap-x-1.5 font-semibold text-gray-800">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 step-content" v-html="step.content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "StepperBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.step-content a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.step-content a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
|
||||
.step-content ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.step-content ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.step-content li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-for="(tab, index) in block.data.tab" type="button"
|
||||
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
:class="(activeTab === index) ? 'active' : ''"
|
||||
@click="activeTab = index"
|
||||
:id="generateSlug(tab.title) + '-item'"
|
||||
:data-hs-tab="'#' + generateSlug(tab.title)"
|
||||
aria-selected="false"
|
||||
:aria-controls="generateSlug(tab.title)" role="tab">
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<template v-for="(tab, index) in block.data.tab">
|
||||
|
||||
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
|
||||
role="tabpanel" :aria-labelledby="generateSlug(tab.title) + '-item'">
|
||||
<PageTabBuilder :blocks="tab.content" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import PageTabBuilder from "@/Components/BuilderUi/Pages/PageTabBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "TabBlock",
|
||||
components: {
|
||||
PageTabBuilder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<video class="h-full w-full rounded-lg" controls>
|
||||
<source
|
||||
:src="domainPath + '/storage/' + block.data.path"
|
||||
:type="block.data.mime"
|
||||
/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.title }}
|
||||
</figcaption>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "VideoBlock",
|
||||
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user