Changes

resources/js/Components/BaseComponents/BaseBuilderUi/BaseBreadcrumbs.vue

@@ -3,8 +3,7 @@
 		<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">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<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" />
@@ -43,9 +42,8 @@
 								{{ textLimit(breadcrumbs.page.data.title, 25) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</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" />
@@ -62,7 +60,7 @@
 								{{ textLimit(breadcrumbs.page.data.title, 25) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 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: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}

resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<div class="relative">
+			<YSmartCaptcha v-model="token" />
+			<input
+					v-model="token"
+					:required="block.data.rules.required"
+					:name="block.data.name_field"
+					type="text"
+					class="hidden"
+			>
+		</div>
+
+
+	</div>
+
+
+</template>
+
+<script>
+export default {
+	name: "CaptchaBlock",
+	data() {
+		return {
+			text: "",
+			token: null,
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+

resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/PersonalDataBlock.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
+		<div class="">
+				<input
+						type="checkbox"
+						:name="block.data.name_field"
+						:value="block.data.name_field"
+						name="hs-default-radio"
+						class="shrink-0 mb-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+						:id="block.data.name_field + '-id'">
+			<label :for="block.data.name_field + '-id'" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primaryBlue" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
+		</div>
+		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
+	</div>
+
+
+</template>
+
+<script>
+export default {
+	name: "PersonalDataBlock",
+	data() {
+		return {
+			text: "",
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+

resources/js/Components/BaseComponents/BaseBuilderUi/FormBuilder.vue

@@ -78,15 +78,16 @@ export default {
 	methods: {
 		getComponent(type) {
 			const componentMap = {
-				text: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue'),
-				phone: () => import('@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue'),
-				email: () => import('@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue'),
-				textarea: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue'),
-				multiple_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue'),
-				single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
-				date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue'),
-				additional_education_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
-				educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue')
+				text: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/TextBlock.vue'),
+				phone: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/PhoneBlock.vue'),
+				email: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/EmailBlock.vue'),
+				textarea: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/TextAreaBlock.vue'),
+				multiple_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/MultipleChoiceBlock.vue'),
+				single_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/SingleChoiceBlock.vue'),
+				date: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/DateBlock.vue'),
+				additional_education_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
+				educational_program_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/EducationalChoiceBlock.vue'),
+				captcha: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue')
 			};
 			return defineAsyncComponent(componentMap[type] || null);
 		},

resources/js/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue

@@ -0,0 +1,40 @@
+<template>
+	<ol 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>