Squashed commit message

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="tw:h-full tw:min-h-0 tw:flex tw:flex-col tw:bg-white tw:border tw:border-gray-200 tw:rounded-lg tw:overflow-hidden">
+    <!-- Заголовок -->
+    <div class="tw:p-4 tw:bg-[#f8f9fa] tw:border-b tw:border-gray-200 tw:font-bold tw:text-[#374151] tw:flex-shrink-0">
+      Доступные поля
+    </div>
+
+    <!-- Контент со скроллом -->
+    <div class="tw:flex-1 tw:min-h-0 tw:overflow-y-auto tw:p-4">
+      <draggable
+        :list="availableFields"
+        :group="{ name: 'fields', pull: 'clone', put: false }"
+        :sort="false"
+        :clone="cloneField"
+        item-key="type"
+        class="tw:space-y-2"
+      >
+        <template #item="{ element: field }">
+          <div
+            class="tw:p-3 tw:bg-gray-50 tw:border tw:border-gray-200 tw:rounded tw:cursor-move tw:hover:bg-gray-100 tw:transition-colors"
+          >
+            <div class="tw:flex tw:items-center tw:gap-2">
+              <i :class="field.icon" class="tw:text-gray-600"></i>
+              <span class="tw:text-sm tw:font-medium">{{ field.label }}</span>
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import draggable from 'vuedraggable';
+import { AVAILABLE_FIELDS } from './constants/availableFields.js';
+import { useFormFields } from './composables/useFormFields.js';
+
+const availableFields = ref(AVAILABLE_FIELDS);
+const { generateFieldId } = useFormFields();
+
+// Функция клонирования элемента при перетаскивании в канвас
+function cloneField(field) {
+  const id = generateFieldId();
+  return {
+    id: id,
+    ...field.defaultConfig,
+    name: field.defaultConfig.name || `field_${id.split('_')[1]}`,
+  };
+}
+</script>
+
+<style scoped>
+</style>