Squashed commit message

frontend/admin/src/components/FormBuilder/FormRenderer.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="tw:flex tw:justify-center tw:items-start tw:p-8">
+     <!-- Phone Mockup -->
+     <div class="tw:relative tw:inline-grid tw:justify-items-center tw:bg-black tw:border-[2.5px] tw:border-gray-600 tw:rounded-[32.5px] tw:p-[3px] tw:overflow-hidden tw:w-full tw:max-w-[280px]" style="aspect-ratio: 462/978;">
+      <!-- Camera -->
+      <div class="tw:absolute tw:top-[3%] tw:left-1/2 tw:-translate-x-1/2 tw:z-10 tw:bg-black tw:rounded-[8.5px] tw:w-[28%] tw:h-[3.7%]"></div>
+
+      <!-- Display -->
+      <div class="tw:relative tw:rounded-[27px] tw:w-full tw:h-full tw:overflow-hidden tw:bg-gray-100">
+        <div class="tw:pt-15 tw:px-2 tw:pb-2 tw:overflow-y-auto tw:max-h-full tw:h-full">
+          <FormKit
+            type="form"
+            @submit="handleSubmit"
+            :submit-label="submitLabel"
+            outer-class="tw:space-y-4"
+            v-model="form"
+          >
+            <FormKitSchema :schema="schema" :data="data"/>
+          </FormKit>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FormKit, FormKitSchema } from '@formkit/vue';
+import {reactive, ref} from "vue";
+
+const form = ref({});
+const data = reactive(form);
+
+const props = defineProps({
+  schema: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  submitLabel: {
+    type: String,
+    default: 'Отправить',
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+function handleSubmit(data) {
+  emit('submit', data);
+}
+</script>
+
+<style scoped>
+::v-deep(ul.formkit-messages) {
+  margin-bottom: 0;
+  padding-left: 0;
+}
+</style>