Rework frontend
This commit is contained in:
F4ilji
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="sm:col-span-2 md:grow">
|
||||
<!--Фильтр-->
|
||||
<div class="flex justify-end gap-x-2">
|
||||
<div class="hs-dropdown relative inline-block [--placement:bottom-right]"
|
||||
data-hs-dropdown-auto-close="inside">
|
||||
<button id="hs-as-table-table-filter-dropdown" type="button"
|
||||
class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
|
||||
<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16"
|
||||
height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
Фильтр
|
||||
<span
|
||||
class="pl-2 text-xs font-semibold text-blue-600 border-l border-gray-200 dark:border-gray-700 dark:text-blue-500">
|
||||
1
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mt-2 divide-y divide-gray-200 min-w-[12rem] z-10 bg-white shadow-md rounded-lg mt-2 dark:divide-gray-700 dark:bg-gray-800 dark:border dark:border-gray-700"
|
||||
aria-labelledby="hs-as-table-table-filter-dropdown">
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<label for="hs-radio-group-1" class="flex py-2.5 px-3">
|
||||
<input type="radio" name="hs-radio-group"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||||
id="hs-radio-group-1" checked>
|
||||
<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Все</span>
|
||||
</label>
|
||||
<label for="hs-radio-group-2" class="flex py-2.5 px-3">
|
||||
<input type="radio" name="hs-radio-group"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||||
id="hs-radio-group-2">
|
||||
<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Опубликованы</span>
|
||||
</label>
|
||||
<label for="hs-radio-group-3" class="flex py-2.5 px-3">
|
||||
<input disabled type="radio" name="hs-radio-group"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||||
id="hs-radio-group-3">
|
||||
<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">На рассмотрении</span>
|
||||
</label>
|
||||
<label for="hs-radio-group-4" class="flex py-2.5 px-3">
|
||||
<input type="radio" name="hs-radio-group"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||||
id="hs-radio-group-4">
|
||||
<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Не активны</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Конец Фильтра-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AdminIndexFilter",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
props: [
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-t border-gray-200 dark:border-gray-700">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AdminIndexFooter",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AdminIndexHeaderTitle",
|
||||
props: [
|
||||
'title'
|
||||
]
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="sm:col-span-1 w-full">
|
||||
<label for="hs-as-table-product-review-search" class="sr-only">Поиск</label>
|
||||
<div class="relative">
|
||||
<input autocomplete="off" @input="search" v-model="searchInput" type="text"
|
||||
id="hs-as-table-product-review-search"
|
||||
name="hs-as-table-product-review-search"
|
||||
class="py-2 px-3 pl-11 block flex-1 w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400"
|
||||
placeholder="Поиск">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 flex items-center pointer-events-none pl-4">
|
||||
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg"
|
||||
width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from "lodash";
|
||||
|
||||
export default {
|
||||
name: "AdminIndexSearch",
|
||||
data() {
|
||||
return {
|
||||
searchInput: this.$page.props.filters.search,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search: debounce(function () {
|
||||
if(this.searchInput == "") {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('search');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl,{
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
} else {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl,{
|
||||
method: 'get',
|
||||
data: {
|
||||
search: this.searchInput,
|
||||
},
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}
|
||||
}, 500),
|
||||
|
||||
},
|
||||
props: [
|
||||
'filters'
|
||||
],
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div class="flex justify-between pb-4 items-center">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<BreadcrumbsWrapper v-if="breadcrumbs">
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BaseIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.mainSection" class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.mainSection.data.title, 25) }}
|
||||
</span>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.subSection" class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.subSection.data.title, 25) }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('page.view', breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.page.data.title, 25) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
<BreadcrumbsWrapper v-else>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BaseIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('page.view', breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.page.data.title, 25) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseBreadcrumbs",
|
||||
components: {BreadcrumbsWrapper, BaseIcon, Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
isMobileDevice() {
|
||||
if (typeof window !== 'undefined') {
|
||||
return window.innerWidth < 1024; // Проверка на мобильные устройства
|
||||
}
|
||||
return false; // По умолчанию возвращаем false, когда не в браузере
|
||||
},
|
||||
handleSectionClick(breadcrumb) {
|
||||
if (this.isMobileDevice()) {
|
||||
this.toggleMobileNavSection(breadcrumb)
|
||||
} else {
|
||||
this.toggleDesktopNavSection(breadcrumb)
|
||||
}
|
||||
},
|
||||
handleSubSectionClick(mainSectionBreadcrumb, breadcrumb) {
|
||||
if (this.isMobileDevice()) {
|
||||
this.toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
||||
} else {
|
||||
this.toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
||||
}
|
||||
},
|
||||
highlightNavItem(item) {
|
||||
item.classList.add('animate-pulse');
|
||||
|
||||
setTimeout(() => {
|
||||
item.classList.remove('animate-pulse');
|
||||
}, 4000);
|
||||
},
|
||||
openMobileNavMenu() {
|
||||
const openMobileNavBtn = document.getElementById('open-mobile-btn');
|
||||
openMobileNavBtn.click();
|
||||
},
|
||||
toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
||||
this.openMobileNavMenu()
|
||||
const mobileNavElement = document.getElementById('open-mobile-nav');
|
||||
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + mainSectionBreadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + mainSectionBreadcrumb.data.slug);
|
||||
if (!sectionNavBlock.classList.contains('active')) {
|
||||
sectionNavBlockBtn.click()
|
||||
}
|
||||
const subSectionNavBlock = mobileNavElement.querySelector('#nav-sub-section-accordion-' + breadcrumb.data.slug);
|
||||
const subSectionNavBlockBtn = mobileNavElement.querySelector('#nav-sub-section-accordion-btn-' + breadcrumb.data.slug);
|
||||
if (subSectionNavBlock.classList.contains('active')) {
|
||||
subSectionNavBlockBtn.click()
|
||||
}
|
||||
|
||||
this.highlightNavItem(subSectionNavBlock)
|
||||
},
|
||||
toggleMobileNavSection(breadcrumb) {
|
||||
const mobileNavElement = document.getElementById('open-mobile-nav');
|
||||
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + breadcrumb.data.slug);
|
||||
if (sectionNavBlock.classList.contains('active')) {
|
||||
sectionNavBlockBtn.click()
|
||||
}
|
||||
this.openMobileNavMenu()
|
||||
|
||||
this.highlightNavItem(sectionNavBlock)
|
||||
|
||||
},
|
||||
toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
||||
const desktopNavElement = document.getElementById('desktop-nav');
|
||||
const sectionNavTitle = desktopNavElement.querySelector('#nav-sub-section-title-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + mainSectionBreadcrumb.data.slug);
|
||||
sectionNavBlockBtn.click()
|
||||
this.highlightNavItem(sectionNavTitle)
|
||||
},
|
||||
toggleDesktopNavSection(breadcrumb) {
|
||||
const desktopNavElement = document.getElementById('desktop-nav');
|
||||
const sectionNavBlock = desktopNavElement.querySelector('#nav-section-menu-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + breadcrumb.data.slug);
|
||||
sectionNavBlockBtn.click()
|
||||
// this.highlightNavItem(sectionNavBlock)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
props: {
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
pageTitle: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<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 { defineAsyncComponent } from 'vue';
|
||||
import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseBuilder",
|
||||
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'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.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'),
|
||||
contact: () => import('@/Components/BaseComponents/BaseBuilderUi/Blocks/Contacts/ContactSectionBlock.vue'),
|
||||
};
|
||||
|
||||
// Создайте массив промисов для загрузки всех компонентов
|
||||
const promises = Object.values(componentMap).map(load => load());
|
||||
|
||||
// Дождитесь завершения всех загрузок
|
||||
await Promise.all(promises);
|
||||
this.loading = false; // Установите флаг загрузки в false
|
||||
},
|
||||
getComponent(type) {
|
||||
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'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.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'),
|
||||
contact: () => import('@/Components/BaseComponents/BaseBuilderUi/Blocks/Contacts/ContactSectionBlock.vue'),
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
blocks: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.loadAllComponents(); // Загрузить все компоненты при создании
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Найти еще
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="animate-pulse">
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "BaseSkeleton",
|
||||
components: { Link },
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Найти еще
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="sticky top-[100px] hidden h-[calc(100vh-121px)] max-w-[20%] min-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="subSectionPages"
|
||||
class="flex h-[calc(100vh-200px)] flex-col overflow-hidden pr-2 pb-4">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">{{ currentSection }}</div>
|
||||
<div class="flex gap-x-1">
|
||||
<ul class="px-0.5 last-of-type:mb-0 mb-8">
|
||||
<li v-for="page in subSectionPages.data" :key="page.id" class="my-1.5 flex">
|
||||
<a :class="{'text-white font-semibold bg-primaryBlue': isSameRoute(page.path), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(page.path) }"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'"
|
||||
class="relative duration-300 flex gap-x-1 w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">
|
||||
{{
|
||||
page.title
|
||||
}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "BaseSubSectionLinks",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
currentNavSection: null,
|
||||
scrollTop: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === this.$page.props.ziggy.url + '/' + route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
props: {
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
currentSection: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageSkeleton v-if="loading" />
|
||||
<div 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 PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseTabBuilder",
|
||||
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: () => 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'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.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 defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.loadAllComponents(); // Загрузить все компоненты при создании
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="mb-4">
|
||||
<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 justify-between">
|
||||
<div class="min-w-[30px] min-h-[30px] bg-[#303030] flex justify-center items-center rounded-md mr-2">
|
||||
<BaseIcon :name="file.expansion" class="w-5 h-5 flex-shrink-0" />
|
||||
</div>
|
||||
<div>{{ textLimit(file.title, 70) }}</div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400">{{ file.size }}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: {BaseIcon, FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText;
|
||||
LimitedText = text.substring(0, symbols);
|
||||
return LimitedText + "...";
|
||||
}
|
||||
return text;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex-col animate-pulse mt-10">
|
||||
<div class="w-[25rem] mx-auto h-8 bg-gray-200 rounded-full"></div>
|
||||
<div class="mt-5 mx-auto w-[40rem] h-60 relative z-1000 border rounded-xl sm:mt-10 md:p-10 bg-gray-200">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<FormBuilder :blocks="form" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
|
||||
export default {
|
||||
name: "FormBlock",
|
||||
components: {FormBuilder, axios, Link },
|
||||
data() {
|
||||
return {
|
||||
form: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getForm(id) {
|
||||
axios.get(route('client.widget.form.single', id))
|
||||
.then(response => {
|
||||
this.form = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const id = this.block?.data.form || this.formId
|
||||
this.getForm(id);
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
formId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<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 v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.alt }}
|
||||
</div>
|
||||
</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>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-normal 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>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 ">
|
||||
<div class="flex items-center gap-y-4 gap-x-4 flex-wrap md:flex-nowrap">
|
||||
<img v-if="block.data.photo" @click="toggler = !toggler" loading="lazy" class="rounded-xl md:w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow overflow-x-auto">
|
||||
<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 scoped>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,150 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-2 flex-wrap" 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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<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>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseMetaHead",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
robots: {
|
||||
type: Array,
|
||||
},
|
||||
og_title: {
|
||||
type: String
|
||||
},
|
||||
og_description: {
|
||||
type: String
|
||||
},
|
||||
og_image: {
|
||||
type: String
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<ol style="white-space: nowrap;" class="flex items-center whitespace-normal min-w-0 flex-nowrap hide-scrollbar overflow-x-scroll" aria-label="Breadcrumb">
|
||||
<slot />
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import icons from "@/Components/other/icons.js";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
|
||||
export default {
|
||||
name: "BreadcrumbsWrapper",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* Скрытие горизонтальной полосы прокрутки */
|
||||
.hide-scrollbar {
|
||||
overflow-x: scroll; /* или auto, в зависимости от вашего случая */
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Для WebKit-браузеров (Chrome, Safari) */
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* Для IE и Edge */
|
||||
scrollbar-width: none; /* Для Firefox */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
|
||||
<a href="#" @click.prevent="this.back" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "AcademicJournalsBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
back() {
|
||||
if (this.$page.props.urlPrev !== 'empty') {
|
||||
this.$inertia.visit(this.$page.props.urlPrev);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "AcademicJournalsBuilder",
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Divisions/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Divisions/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Divisions/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Divisions/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Divisions/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Divisions/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Divisions/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Divisions/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Divisions/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PageItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PostItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<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>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
-122
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
-149
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<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>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
-104
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<!--Фильтр-->
|
||||
|
||||
<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-offcanvas-example" data-hs-overlay="#hs-offcanvas-example">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<!--Конец Фильтра-->
|
||||
</div>
|
||||
<div id="hs-offcanvas-example" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e overflow-auto" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-example-label">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b">
|
||||
<h3 id="hs-offcanvas-example-label" class="font-bold text-gray-800">
|
||||
Фильтры
|
||||
</h3>
|
||||
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-offcanvas-example">
|
||||
<span class="sr-only">Close</span>
|
||||
<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="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion" :id="'id' + form_education_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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="m6 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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="m18 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Формат обучения
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + form_education_filter.type">
|
||||
<FormEducationalFilter :forms="forms_educational" :formEdu_filter="form_education_filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hs-accordion" :id="'id' + category_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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="m6 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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="m18 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Категория
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + category_filter.type">
|
||||
<CategoryFilter :categories="categories" :category_filter="category_filter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import CategoryFilter from "@/Components/BuilderUi/Events/Filters/CategoryFilter.vue";
|
||||
import TagFilter from "@/Components/BuilderUi/Events/Filters/TagFilter.vue";
|
||||
import SortingByFilter from "@/Components/BuilderUi/Events/Filters/SortingByFilter.vue";
|
||||
import FormEducationalFilter from "@/Components/BuilderUi/Programs/Filters/FormEducationalFilter.vue";
|
||||
import BudgetFilter from "@/Components/BuilderUi/Programs/Filters/BudgetFilter.vue";
|
||||
import DirectionFilter from "@/Components/BuilderUi/Programs/Filters/DirectionFilter.vue";
|
||||
|
||||
export default {
|
||||
name: "ClientAdditionalProgramFilter",
|
||||
components: {
|
||||
DirectionFilter,
|
||||
FormEducationalFilter, BudgetFilter, SortingByFilter, TagFilter, CategoryFilter, BaseIcon},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
forms_educational: {
|
||||
type: Object,
|
||||
},
|
||||
categories: {
|
||||
type: Object,
|
||||
},
|
||||
form_education_filter: {
|
||||
type: Object,
|
||||
},
|
||||
category_filter: {
|
||||
type: Object,
|
||||
},
|
||||
qualification_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
-72
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<h3 class="font-medium text-gray-900 text-sm mb-2">Сортировать по</h3>
|
||||
<div>
|
||||
<select @change="filter" v-model="sortOrder" class="py-2 px-3 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
||||
<option value="desc">Дате (Сначала новые)</option>
|
||||
<option value="asc">Дате (Сначала старые)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash";
|
||||
export default {
|
||||
name: "SortingByFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortOrder: this.sortingBy_filter.value || 'desc',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('sort');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
sort: this.sortOrder,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('sort');
|
||||
this.tag_slug = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
sortingBy_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
|
||||
<a href="#" @click.prevent="this.back" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "AdditionalProgramBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
back() {
|
||||
if (this.$page.props.urlPrev !== 'empty') {
|
||||
this.$inertia.visit(this.$page.props.urlPrev);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "ProgramBuilder",
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
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'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.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')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<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>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
|
||||
<Link :href="route(this.link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "DepartmentBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
link: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadingBlock from "@/Components/BuilderUi/Departments/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Departments/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Departments/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Departments/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Departments/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Departments/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Departments/Blocks/VideoBlock.vue";
|
||||
import TabBlock from "@/Components/BuilderUi/Departments/Blocks/TabBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Departments/Blocks/PostListBlock.vue";
|
||||
import PageItemBlock from "@/Components/BuilderUi/Departments/Blocks/PageItemBlock.vue";
|
||||
import PostItemBlock from "@/Components/BuilderUi/Departments/Blocks/PostItemBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "DepartmentBuilder",
|
||||
components: {
|
||||
FileBlock,
|
||||
ImageBlock,
|
||||
ClientImageSlider,
|
||||
ParagraphBlock,
|
||||
HeadingBlock,
|
||||
PersonBlock,
|
||||
StepperBlock,
|
||||
VideoBlock,
|
||||
TabBlock,
|
||||
PostListBlock,
|
||||
PageItemBlock,
|
||||
PostItemBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
tabs: 'TabBlock',
|
||||
postsList: 'PostListBlock',
|
||||
postItem: 'PostItemBlock',
|
||||
pageItem: 'PageItemBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import HeadingBlock from "@/Components/BuilderUi/Departments/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Departments/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Departments/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Departments/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Departments/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Departments/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Departments/Blocks/VideoBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Departments/Blocks/PostListBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "DepartmentTabBuilder",
|
||||
components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
postsList: 'PostListBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<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>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
|
||||
<Link :href="route(this.link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "DivisionBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
link: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "DivisionBuilder",
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Divisions/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Divisions/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Divisions/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Divisions/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Divisions/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Divisions/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Divisions/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Divisions/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Divisions/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PageItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PostItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import HeadingBlock from "@/Components/BuilderUi/Departments/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Departments/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Departments/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Departments/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Departments/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Departments/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Departments/Blocks/VideoBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Departments/Blocks/PostListBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "DivisionTabBuilder",
|
||||
components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
postsList: 'PostListBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<span v-if="filter.value !== null" class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ (filter.value.length > 1) ? filter.value.length + ' категории' : filter.content[filter.value[0]].data.title }}
|
||||
<button @click.prevent="clearFilter" type="button" class="shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-blue-200 focus:outline-none focus:bg-blue-200 focus:text-blue-500">
|
||||
<span class="sr-only">Remove badge</span>
|
||||
<svg class="shrink-0 size-3" 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="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "CategoryBadge",
|
||||
components: { Link },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith(this.filter.param)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<span v-if="filter.value !== null" class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ (filter.value.length > 1) ? 'Тэг: ' + filter.value.length + ' значений' : '#' + JSON.parse(filter.content[filter.value].data.name).ru }}
|
||||
<button @click.prevent="clearFilter" type="button" class="shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-blue-200 focus:outline-none focus:bg-blue-200 focus:text-blue-500">
|
||||
<span class="sr-only">Remove badge</span>
|
||||
<svg class="shrink-0 size-3" 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="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
export default {
|
||||
name: "TagBadge",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith(this.filter.param)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<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>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
|
||||
<Link :href="route(link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "EventBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
link: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
|
||||
<component
|
||||
v-for="(filter, index) in filters"
|
||||
:key="index"
|
||||
:is="getComponent(filter.type)"
|
||||
:filter="filter"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import TagBadge from "@/Components/BuilderUi/Events/Badges/TagBadge.vue";
|
||||
export default {
|
||||
name: "EventBadgeBuilder",
|
||||
components: {
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge,
|
||||
TagBadge,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
search: 'SearchBadge',
|
||||
category: 'CategoryBadge',
|
||||
tag: 'TagBadge',
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
props: {
|
||||
filters: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadingBlock from "@/Components/BuilderUi/Events/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Events/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Events/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Events/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Events/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Events/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Events/Blocks/VideoBlock.vue";
|
||||
import TabBlock from "@/Components/BuilderUi/Events/Blocks/TabBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Events/Blocks/PostListBlock.vue";
|
||||
import PageItemBlock from "@/Components/BuilderUi/Events/Blocks/PageItemBlock.vue";
|
||||
import PostItemBlock from "@/Components/BuilderUi/Events/Blocks/PostItemBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "EventBuilder",
|
||||
components: {
|
||||
FileBlock,
|
||||
ImageBlock,
|
||||
ClientImageSlider,
|
||||
ParagraphBlock,
|
||||
HeadingBlock,
|
||||
PersonBlock,
|
||||
StepperBlock,
|
||||
VideoBlock,
|
||||
TabBlock,
|
||||
PostListBlock,
|
||||
PageItemBlock,
|
||||
PostItemBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
tabs: 'TabBlock',
|
||||
postsList: 'PostListBlock',
|
||||
postItem: 'PostItemBlock',
|
||||
pageItem: 'PageItemBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</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";
|
||||
|
||||
export default {
|
||||
name: "EventTabBuilder",
|
||||
components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
postsList: 'PostListBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<input type="text" v-model="searchTerm" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Поиск по тэгам">
|
||||
<button @click.prevent="clearFilter" class="text-gray-500 text-sm flex gap-x-1 items-center hover:text-gray-700">
|
||||
<BaseIcon class="w-4 h-4" name="delete" />
|
||||
<span>Очистить</span>
|
||||
</button>
|
||||
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[30vh] overflow-y-auto">
|
||||
<div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<div v-for="item in filteredItems" :key="item.id">
|
||||
<input v-model="tag_slug" :value="item.slug['ru']" @change="filter"
|
||||
type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="'inp-tag' + item.id">
|
||||
<label :for="'inp-tag' + item.id" class="text-sm text-gray-500 ms-3 dark:text-neutral-400">#{{ item.name.ru }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash";
|
||||
export default {
|
||||
name: "TagFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tag_slug: this.tag_filter.value || [],
|
||||
searchTerm: '',
|
||||
filteredItems: this.tags, // Изначально все элементы
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith('tag')) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
url.searchParams.delete('page');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
category: this.category_slug,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith('tag')) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
this.category_slug = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
filteredItems() {
|
||||
if (!this.searchTerm) {
|
||||
return this.tags; // Возвращаем все элементы, если ничего не введено
|
||||
}
|
||||
const term = this.searchTerm.toLowerCase(); // Приводим к нижнему регистру для нечувствительности к регистру
|
||||
return this.tags.filter(item =>
|
||||
item.name.ru.toLowerCase().includes(term) // Фильтруем по заголовку
|
||||
);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tags: {
|
||||
type: Object,
|
||||
},
|
||||
tag_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user