Nikita Kiselev
0e48b9d56d
Some checks failed
Telegram Mini App Shop Builder / Compute version metadata (push) Has been cancelled
Telegram Mini App Shop Builder / Run Frontend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run Backend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Has been cancelled
Telegram Mini App Shop Builder / Build module. (push) Has been cancelled
Telegram Mini App Shop Builder / release (push) Has been cancelled
55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
Vue
<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>
|