refactor form builder components; simplify structure by removing unnecessary margin classes and enhancing code readability

.gitignore

@@ -13,3 +13,4 @@ dump.sql
 .DS_Store
 **/.
 .cursor
+hot

resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue

@@ -28,8 +28,8 @@
           </h2>
         </div>
         <!-- Card -->
-        <div class="mt-5 p-4 relative z-1000 bg-white md:border rounded-xl sm:mt-10 md:p-10">
+        <div class="mt-5 relative z-1000 bg-white md:border rounded-xl sm:mt-10 md:p-10">
-          <form @submit="submitForm">
+          <form class="space-y-4" @submit="submitForm">
             <component
                 v-for="(block, index) in blocks.data.columns"
                 :key="index"
@@ -155,8 +155,6 @@ export default {
         date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
         additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
         educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
-        captcha: () => import('@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue'),
-        personal_data: () => import('@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue'),
       };
       return defineAsyncComponent(componentMap[type] || null);
     },

resources/js/componentss/shared/builder/formBuilder/blocks/DateBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input

resources/js/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input

resources/js/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="space-y-2">
 			<div v-for="column in block.data.columns" class="flex">

resources/js/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input

resources/js/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="space-y-2">
 			<div v-for="column in block.data.columns" class="flex">

resources/js/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue

@@ -1,62 +1,89 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+  <div>
-		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
+    <label
-		<div class="relative">
+      :for="block.data.name_field + '-id'"
-			<textarea
+      class="block mb-2 text-sm font-medium"
-					v-model="textarea"
+      >{{ block.data.title_field }}</label
-					:required="block.data.rules.required"
+    >
-					:name="block.data.name_field"
+    <div class="relative">
-					:minlength="block.data.rules.min"
+      <textarea
-					:maxlength="block.data.rules.max"
+        v-model="textarea"
-					type="text"
+        :required="block.data.rules.required"
-					:id="block.data.name_field + '-id'"
+        :name="block.data.name_field"
-					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
+        :minlength="block.data.rules.min"
-					class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
+        :maxlength="block.data.rules.max"
-					:placeholder="block.data.title_field"
+        type="text"
-			/>
+        :id="block.data.name_field + '-id'"
-			<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+        :class="
-				<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">
+          error
-					<circle cx="12" cy="12" r="10"></circle>
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
-					<line x1="12" x2="12" y1="8" y2="12"></line>
+            : 'focus:border-blue-500 focus:ring-blue-500'
-					<line x1="12" x2="12.01" y1="16" y2="16"></line>
+        "
-				</svg>
+        class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
-			</div>
+        :placeholder="block.data.title_field"
-		</div>
+      />
-		<div class="flex items-center mt-2 justify-between flex-wrap">
+      <div
-			<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
+        v-if="error"
-				{{ block.data.description }}
+        class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3"
-			</p>
+      >
-			<p class="text-sm text-primary">{{ textarea.length }} / {{ block.data.rules.max }}</p>
+        <svg
-		</div>
+          class="shrink-0 size-4 text-red-500"
-
+          xmlns="http://www.w3.org/2000/svg"
-		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
+          width="24"
-
+          height="24"
-	</div>
+          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>
+    <div
+      v-if="block.data.rules.max"
+      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-primary">
+        {{ 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>
 </template>
 
 <script>
 export default {
-	name: "TextAreaBlock",
+  name: "TextAreaBlock",
-	data() {
+  data() {
-		return {
+    return {
-			textarea: "",
+      textarea: "",
-		}
+    };
-	},
+  },
-	methods: {},
+  methods: {},
-	props: {
+  props: {
-		block: {
+    block: {
-			type: Object,
+      type: Object,
-		},
+    },
-		error: {
+    error: {
-			type: Object,
+      type: Object,
-		}
+    },
-
+  },
-	},
+};
-}
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>
-

resources/js/componentss/shared/builder/formBuilder/blocks/TextBlock.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-4 sm:mb-8">
+	<div>
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input
@@ -22,7 +22,7 @@
 				</svg>
 			</div>
 		</div>
-		<div class="flex items-center mt-2 justify-between flex-wrap">
+		<div v-if="block.data.description" 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>