Changes

resources/js/Components/BuilderUi/Pages/Blocks/FormBlock.vue

@@ -4,8 +4,6 @@
 			<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">
@@ -16,12 +14,8 @@
 					<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
 				</ul>
 			</div>
-
 		</div>
-
-
 	</div>
-
 	<div v-else>
 		<FormBuilder :blocks="form" />
 	</div>
@@ -34,8 +28,6 @@ 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 },

resources/js/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue

@@ -26,7 +26,6 @@
 
 		</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">

resources/js/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
+		<div class="relative">
+			<input
+					:required="block.data.rules.required"
+					:name="block.data.name_field"
+					type="date"
+					:id="block.data.name_field + '-id'"
+					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
+					class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
+					:placeholder="block.data.title_field"
+			>
+			<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+				<svg class="shrink-0 size-4 text-red-500" 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">
+					<circle cx="12" cy="12" r="10"></circle>
+					<line x1="12" x2="12" y1="8" y2="12"></line>
+					<line x1="12" x2="12.01" y1="16" y2="16"></line>
+				</svg>
+			</div>
+		</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: "DateBlock",
+	data() {
+		return {
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+

resources/js/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue

@@ -2,17 +2,18 @@
 	<div class="mb-4 sm:mb-8">
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
-			<input
+			<textarea
+					v-model="textarea"
 					:required="block.data.rules.required"
 					:name="block.data.name_field"
-					:min="block.data.rules.min"
-					:max="block.data.rules.max"
+					:minlength="block.data.rules.min"
+					:maxlength="block.data.rules.max"
 					type="text"
 					:id="block.data.name_field + '-id'"
 					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
 					class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
 					:placeholder="block.data.title_field"
-			>
+			/>
 			<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
 				<svg class="shrink-0 size-4 text-red-500" 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">
 					<circle cx="12" cy="12" r="10"></circle>
@@ -21,7 +22,13 @@
 				</svg>
 			</div>
 		</div>
-		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<div class="flex items-center mt-2 justify-between flex-wrap">
+			<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
+				{{ block.data.description }}
+			</p>
+			<p class="text-sm text-primaryBlue">{{ textarea.length }} / {{ block.data.rules.max }}</p>
+		</div>
+
 		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
 
 	</div>
@@ -32,7 +39,9 @@
 export default {
 	name: "TextAreaBlock",
 	data() {
-		return {}
+		return {
+			textarea: "",
+		}
 	},
 	methods: {},
 	props: {

resources/js/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue

@@ -3,10 +3,11 @@
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input
+					v-model="text"
 					:required="block.data.rules.required"
 					:name="block.data.name_field"
-					:min="block.data.rules.min"
-					:max="block.data.rules.max"
+					:minlength="block.data.rules.min"
+					:maxlength="block.data.rules.max"
 					type="text"
 					:id="block.data.name_field + '-id'"
 					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
@@ -21,7 +22,12 @@
 				</svg>
 			</div>
 		</div>
-		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<div class="flex items-center mt-2 justify-between flex-wrap">
+			<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
+				{{ block.data.description }}
+			</p>
+			<p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>
+		</div>
 		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
 
 	</div>
@@ -34,6 +40,7 @@ export default {
 	name: "TextBlock",
 	data() {
 		return {
+			text: "",
 		}
 	},
 	methods: {},

resources/js/Components/BuilderUi/Pages/FormBuilder.vue

@@ -1,6 +1,4 @@
 <template>
-
-
 	<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
 		<div class="flex">
 			<div class="shrink-0">
@@ -34,7 +32,7 @@
 				</h2>
 			</div>
 			<!-- Card -->
-			<div class="mt-5 p-4 relative z-10 bg-white border rounded-xl sm:mt-10 md:p-10">
+			<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
 				<form @submit="submitForm">
 					<component
 							v-for="(block, index) in blocks.data.columns"
@@ -50,28 +48,23 @@
 		</div>
 	</div>
 
+	<transition name="fade">
+		<SuccessNotification v-if="success" :text="message" />
+	</transition>
+
 </template>
 
 <script>
-import TextBlock from "@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue";
-import PhoneBlock from "@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue";
-import EmailBlock from "@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue";
 import SubmitBlock from "@/Components/BuilderUi/Pages/FormBlocks/SubmitBlock.vue";
 import axios from "axios";
-import TextAreaBlock from "@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue";
-import MultipleChoiceBlock from "@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue";
-import SingleChoiceBlock from "@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue";
+import SuccessNotification from "@/Components/Notifications/SuccessNotification.vue";
+import {defineAsyncComponent} from "vue";
 
 export default {
 	name: "FormBuilder",
 	components: {
+		SuccessNotification,
 		SubmitBlock,
-		TextBlock,
-		PhoneBlock,
-		EmailBlock,
-		TextAreaBlock,
-		MultipleChoiceBlock,
-		SingleChoiceBlock
 	},
 	data() {
 		return {
@@ -81,61 +74,96 @@ export default {
 			message: null,
 		};
 	},
+
 	methods: {
 		getComponent(type) {
 			const componentMap = {
-				text: 'TextBlock',
-				phone: 'PhoneBlock',
-				email: 'EmailBlock',
-				textarea: 'TextAreaBlock',
-				multiple_choice: 'MultipleChoiceBlock',
-				single_choice: 'SingleChoiceBlock',
-
+				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')
 			};
-			return componentMap[type] || null;
+			return defineAsyncComponent(componentMap[type] || null);
 		},
 		submitForm(event) {
 			event.preventDefault();
+			this.formData = this.getFormData(event.target.elements);
+			this.sendDataToServer();
+		},
 
-			const formElements = event.target.elements;
-			this.formData = {};
+		getFormData(formElements) {
+			const formData = {};
 			for (let i = 0; i < formElements.length; i++) {
 				const element = formElements[i];
-				if (element.tagName === 'INPUT') {
-					// Убираем квадратные скобки из имени поля
-					const fieldName = element.name.endsWith('[]') ? element.name.slice(0, -2) : element.name;
+				if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+					const fieldName = this.normalizeFieldName(element.name);
 
-					if (element.type === 'checkbox') {
-						if (!this.formData[fieldName]) {
-							this.formData[fieldName] = [];
+					if (element.tagName === 'INPUT') {
+						if (element.type === 'checkbox') {
+							this.handleCheckbox(formData, fieldName, element);
+						} else if (fieldName && fieldName !== 'choices') {
+							formData[fieldName] = element.value;
 						}
-						if (element.checked) {
-							this.formData[fieldName].push(element.value);
-						}
-					} else if (fieldName && fieldName !== 'choices') {
-						this.formData[fieldName] = element.value;
+					} else if (element.tagName === 'TEXTAREA') {
+						formData[fieldName] = element.value;
 					}
 				}
 			}
+			return formData;
+		},
 
-			// Отправляем данные на сервер
+		normalizeFieldName(name) {
+			return name.endsWith('[]') ? name.slice(0, -2) : name;
+		},
+
+		handleCheckbox(formData, fieldName, element) {
+			if (!formData[fieldName]) {
+				formData[fieldName] = [];
+			}
+			if (element.checked) {
+				formData[fieldName].push(element.value);
+			}
+		},
+
+		sendDataToServer() {
 			axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
-					.then(response => {
-						if (response.data.status === 'ok') {
-							this.success = true;
-							this.message = response.data.message;
-							this.errors = null; // Сбрасываем ошибки при успешной отправке
-						}
-					})
-					.catch(error => {
-						this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
-						this.success = false; // Сбрасываем успешное состояние
-					});
-		}	},
+					.then(this.handleResponse)
+					.catch(this.handleError);
+		},
+
+		handleResponse(response) {
+			if (response.data.status === 'ok') {
+				this.success = true;
+				this.message = response.data.message;
+				this.errors = null; // Сбрасываем ошибки при успешной отправке
+			}
+		},
+
+		handleError(error) {
+			this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
+			this.success = false; // Сбрасываем успешное состояние
+		}
+	},
 	props: {
 		blocks: {
 			type: Object,
 		},
 	},
 }
-</script>
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: all 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+	transform: translateY(30px);
+}
+</style>

resources/js/Components/BuilderUi/Pages/PageBuilder.vue

@@ -1,75 +1,45 @@
- <template>
-		<component
-				v-for="(block, index) in blocks"
-				:key="index"
-				:is="getComponent(block.type)"
-				:block="block"
-		/>
+<template>
+	<component
+			v-for="(block, index) in blocks"
+			:key="index"
+			:is="getComponent(block.type)"
+			:block="block"
+	/>
 </template>
 
 <script>
-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 TabBlock from "@/Components/BuilderUi/Pages/Blocks/TabBlock.vue";
-import PostListBlock from "@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue";
-import PageItemBlock from "@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue";
-import PostItemBlock from "@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue";
-import FormBlock from "@/Components/BuilderUi/Pages/Blocks/FormBlock.vue";
-
+import { defineAsyncComponent } from 'vue';
 export default {
 	name: "PageBuilder",
-	components: {
-		FileBlock,
-		ImageBlock,
-		ClientImageSlider,
-		ParagraphBlock,
-		HeadingBlock,
-		PersonBlock,
-		StepperBlock,
-		VideoBlock,
-		TabBlock,
-		PostListBlock,
-		PageItemBlock,
-		PostItemBlock,
-		FormBlock
-	},
 	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',
-				customForm: 'FormBlock'
+				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 componentMap[type] || null;
+
+			return defineAsyncComponent(componentMap[type] || null);
 		},
 	},
-
 	props: {
 		blocks: {
-			type: Object,
+			type: Array,
+			required: true,
 		},
 	},
 }
-
 </script>
 
-
 <style scoped>
-
 </style>