Labs/documenter-mono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Поддержка тегов для форм и обработка close события

Browse Source
This commit is contained in:
brusnitsyn
2025-11-05 16:59:56 +09:00
parent c79fab5756
commit 404ef4f07d
3 changed files with 492 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/Pages/Index.vue
View File

@@ -8,7 +8,7 @@ import PageBody from "../Components/Page/PageBody.vue";
import Badge from "../Components/Badge/Badge.vue";
import {Link, router} from "@inertiajs/vue3"
import AnimateSearch from "../Components/Input/Search/AnimateSearch.vue";
import {ref, watch} from "vue";
import {nextTick, ref, watch} from "vue";
import Button from "../Components/Button/Button.vue";
import ImportDocumentModal from "./Parts/ImportDocumentModal.vue";
import EditDocumentModal from "./Parts/EditDocumentModal.vue";
@@ -27,12 +27,16 @@ const showModalEdit = ref(false)
const editTemplateId = ref(null)
const vertical = ref(true)
watch(() => searchValue.value, (search) => {
axios.post('/api/templates/search', {
const getTemplates = async (search) => {
await axios.post('/api/templates/search', {
search
}).then(res => {
workTemplates.value = res.data.templates
})
}
watch(() => searchValue.value, async (search) => {
await getTemplates()
})
const onChangeLayoutList = () => {
@@ -42,10 +46,27 @@ const onShowModalEdit = (template) => {
showModalEdit.value = true
editTemplateId.value = template.id
}
const onCloseModalEdit = () => {
const onCloseModalEdit = async () => {
router.reload({
only: ['templates'],
onSuccess: () => {
console.log(props)
workTemplates.value = [...props.templates]
}
})
showModalEdit.value = false
editTemplateId.value = null
}
const onCloseModalImport = async () => {
showModalImport.value = false
router.reload({
only: ['templates'],
onSuccess: () => {
console.log(props)
workTemplates.value = [...props.templates]
}
})
}
</script>
<template>
@@ -137,11 +158,14 @@ const onCloseModalEdit = () => {
<!-- </Button>-->
<!-- </template>-->
<template v-slot:footer>
<div class="flex gap-x-1.5">
<div v-if="template.tags.length > 0" v-for="tag in template.tags" class="flex gap-x-1.5">
<Badge variant="primary">
Экономический отдел
{{ tag }}
</Badge>
</div>
<div v-else class="h-[24px]">
</div>
</template>
</ListItem>
</Link>
@@ -159,7 +183,7 @@ const onCloseModalEdit = () => {
</div>
</PageBody>
</Page>
<ImportDocumentModal v-model:open="showModalImport" @close="showModalImport = false" />
<ImportDocumentModal v-model:open="showModalImport" @close="onCloseModalImport" />
<EditDocumentModal v-model:open="showModalEdit" :templateId="editTemplateId" @close="onCloseModalEdit" />
</Workspace>
</template>

8
resources/js/Pages/Parts/EditDocumentModal.vue
View File

@@ -12,6 +12,7 @@ import Card from "../../Components/Card/Card.vue";
import FormGroup from "../../Components/Form/FormGroup.vue";
import Calendar from "../../Components/Calendar/Calendar.vue";
import Collapsible from "../../Components/Collapsible/Collapsible.vue";
import TagsInput from "../../Components/Input/TagsInput.vue";
const props = defineProps({
templateId: {
@@ -51,6 +52,7 @@ const loadTemplateData = async (templateId) => {
uploadForm.value.name = template.name
uploadForm.value.description = template.description || ''
uploadForm.value.variables = template.variables || []
uploadForm.value.tags = template.tags || []
isTemplateLoaded.value = true
})
}
@@ -62,6 +64,8 @@ const { formData: uploadForm, errors, reset, loading, submit, setFile: setFileTo
variables: []
})
const emits = defineEmits(['close'])
watch(() => stage.value, (value) => {
if (value === 'variables') description.value = 'Опишите найденные в документе переменные'
else description.value = ''
@@ -128,7 +132,7 @@ const submitForm = () => {
uploadForm.value.variables = [...templateVariables.value]
router.post(`/templates/update`, uploadForm.value, {
onSuccess: () => {
open.value = false
emits('close')
}
})
}
@@ -137,6 +141,7 @@ const afterCloseModal = () => {
stage.value = 'upload'
uploadedFile.value = null
reset()
emits('close')
}
const widthOfStage = computed(() => {
@@ -415,6 +420,7 @@ const getRootIndex = (variable) => {
<div v-if="stage === 'upload'" class="flex flex-col gap-y-1">
<Input v-model:value="uploadForm.name" label="Наименование" />
<Input v-model:value="uploadForm.description" label="Описание" />
<TagsInput v-model="uploadForm.tags" label="Теги" />
<div class="mt-2.5">
<Button block text-align="center" v-if="!isUpdateFile" @click="isUpdateFile = true">
Загрузить обновленный шаблон

468
resources/js/Pages/Parts/ImportDocumentModal.vue
View File

@@ -11,12 +11,24 @@ import {useApiForm} from "../../Composables/useApiForm.js";
import Card from "../../Components/Card/Card.vue";
import FormGroup from "../../Components/Form/FormGroup.vue";
import Calendar from "../../Components/Calendar/Calendar.vue";
import Collapsible from "../../Components/Collapsible/Collapsible.vue";
import TagsInput from "../../Components/Input/TagsInput.vue";
const open = defineModel('open')
const stage = ref('upload')
const description = ref('')
const uploadedFile = ref(null)
const templateVariables = ref(null)
const formTitle = ref(null)
const isTemplateLoaded = ref(false)
const isUpdateFile = ref(false)
// Drag and drop состояния
const dragItem = ref(null)
const dragOverItem = ref(null)
const dragOverGroup = ref(null)
const dragSource = ref(null)
const lastDropPosition = ref({ targetIndex: null, group: null }) // Добавляем
const { formData: uploadForm, errors, reset, loading, submit, setFile: setFileToForm } = useApiForm({
name: '',
@@ -30,6 +42,8 @@ watch(() => stage.value, (value) => {
else description.value = ''
})
const emits = defineEmits(['close'])
const uploadFile = async () => {
try {
setFileToForm('doc_file', uploadedFile.value)
@@ -80,9 +94,10 @@ const variableTypes = [
const submitForm = () => {
uploadForm.value.file = uploadedFile.value
router.post('/templates/import', uploadForm.value, {
uploadForm.value.variables = [...templateVariables.value]
router.post(`/templates/import`, uploadForm.value, {
onSuccess: () => {
open.value = false
emits('close')
}
})
}
@@ -91,6 +106,7 @@ const afterCloseModal = () => {
stage.value = 'upload'
uploadedFile.value = null
reset()
emits('close')
}
const widthOfStage = computed(() => {
@@ -103,7 +119,18 @@ const calendarNowDate = ref(new Date())
const selectedVariable = ref()
const activeVariable = computed(() => {
return uploadForm.value.variables.find(itm => itm.name === selectedVariable.value?.name)
for (const item of uploadForm.value.variables) {
if (item.name === selectedVariable.value?.name) {
return item;
}
else if (Array.isArray(item.children)) {
const foundChild = item.children.find(child => child.name === selectedVariable.value?.name);
if (foundChild) {
return foundChild;
}
}
}
return undefined;
})
const inputVariableOptions = (value) => {
@@ -121,6 +148,218 @@ const clickToVariable = (variable) => {
selectedVariable.value = variable
calendarNowDate.value = new Date()
}
const createVariableGroup = () => {
const groupCount = templateVariables.value.filter(itm => itm.isGroup === true)
const group = {
label: `Группа ${groupCount.length + 1}`,
children: [],
isGroup: true,
type: 'group',
name: `group-${Date.now()}`
}
templateVariables.value.push(group)
uploadForm.value.variables = [...templateVariables.value]
}
// Drag and Drop функции
const dragStart = (event, variable, index, sourceGroup = null) => {
event.stopPropagation()
dragSource.value = sourceGroup ? 'group' : 'root'
dragItem.value = { variable, index, sourceGroup }
// Делаем оригинальный элемент полупрозрачным
event.currentTarget.style.opacity = '0.4'
event.dataTransfer.effectAllowed = 'move'
}
const dragEnd = () => {
// Восстанавливаем прозрачность всех элементов
document.querySelectorAll('.drag-handle').forEach(el => {
el.style.opacity = '1'
})
dragItem.value = null
dragOverItem.value = null
dragOverGroup.value = null
dragSource.value = null
lastDropPosition.value = { targetIndex: null, group: null }
}
const dragOver = (event, targetIndex, group = null) => {
event.preventDefault()
event.stopPropagation()
console.log('dragOver:', { targetIndex, group, dragItem: dragItem.value })
// Сохраняем последнюю позицию
lastDropPosition.value = { targetIndex, group }
// Не показывать индикатор если перетаскиваемый элемент тот же самый
if (dragItem.value) {
const isSameElement = group ?
(dragItem.value.sourceGroup === group && dragItem.value.index === targetIndex) :
(dragItem.value.index === targetIndex)
if (isSameElement) {
dragOverItem.value = null
dragOverGroup.value = null
return
}
}
dragOverItem.value = targetIndex
dragOverGroup.value = group
}
const handleGlobalDrop = (event) => {
event.preventDefault()
event.stopPropagation()
if (!dragItem.value) return
// Используем последнюю сохраненную позицию для глобального дропа
const { targetIndex, group } = lastDropPosition.value
if (targetIndex !== null) {
drop(event, targetIndex, group)
} else {
// Если позиция не определена, сбрасываем
dragEnd()
}
}
const drop = (event, targetIndex, group = null) => {
event.preventDefault()
event.stopPropagation()
if (!dragItem.value) return
// Используем последнюю сохраненную позицию, если текущие параметры null
const finalTargetIndex = targetIndex ?? lastDropPosition.value.targetIndex
const finalGroup = group ?? lastDropPosition.value.group
console.log('=== DROP DEBUG ===')
console.log('dragItem:', dragItem.value)
console.log('source variable:', dragItem.value.variable)
console.log('isGroup:', dragItem.value.variable.isGroup)
console.log('sourceGroup:', dragItem.value.sourceGroup)
console.log('finalTargetIndex:', finalTargetIndex)
console.log('finalGroup:', finalGroup)
console.log('==================')
console.log('drop:', {
targetIndex,
group,
finalTargetIndex,
finalGroup,
lastDropPosition: lastDropPosition.value,
dragItem: dragItem.value
})
const sourceVariable = dragItem.value.variable
const sourceGroup = dragItem.value.sourceGroup
// Обработка для targetIndex = -2 (начало группы)
const actualTargetIndex = targetIndex === -2 ? 0 : targetIndex
// Если перетаскиваем ГРУППУ (изменение порядка групп)
if (sourceVariable.isGroup && !group) {
const sourceIndex = dragItem.value.index
if (sourceIndex !== actualTargetIndex) {
const [removed] = templateVariables.value.splice(sourceIndex, 1)
// Корректируем targetIndex если удалили элемент перед целевой позицией
const adjustedTargetIndex = sourceIndex < actualTargetIndex
? actualTargetIndex - 1
: actualTargetIndex
templateVariables.value.splice(adjustedTargetIndex, 0, removed)
}
}
// Если перетаскиваем из группы в корень
else if (sourceGroup && !group) {
// Удаляем из группы
const sourceIndex = sourceGroup.children.findIndex(v => v.name === sourceVariable.name)
if (sourceIndex > -1) {
sourceGroup.children.splice(sourceIndex, 1)
// Добавляем в корень
if (actualTargetIndex === -1) {
templateVariables.value.push(sourceVariable)
} else {
templateVariables.value.splice(actualTargetIndex, 0, sourceVariable)
}
}
}
// Если перетаскиваем из корня в группу
else if (!sourceGroup && group && !sourceVariable.isGroup) {
// Удаляем из корня
const sourceIndex = templateVariables.value.findIndex(v => v.name === sourceVariable.name)
if (sourceIndex > -1) {
templateVariables.value.splice(sourceIndex, 1)
// Добавляем в группу
if (!group.children) group.children = []
if (actualTargetIndex === -1) {
group.children.push(sourceVariable)
} else {
group.children.splice(actualTargetIndex, 0, sourceVariable)
}
}
}
// Если перетаскиваем из группы в другую группу
else if (sourceGroup && group && sourceGroup !== group && !sourceVariable.isGroup) {
// Удаляем из исходной группы
const sourceIndex = sourceGroup.children.findIndex(v => v.name === sourceVariable.name)
if (sourceIndex > -1) {
sourceGroup.children.splice(sourceIndex, 1)
// Добавляем в целевую группу
if (!group.children) group.children = []
if (actualTargetIndex === -1) {
group.children.push(sourceVariable)
} else {
group.children.splice(actualTargetIndex, 0, sourceVariable)
}
}
}
// Если перетаскиваем между элементами в корне
else if (!sourceGroup && !group && !sourceVariable.isGroup) {
const sourceIndex = dragItem.value.index
const [removed] = templateVariables.value.splice(sourceIndex, 1)
templateVariables.value.splice(actualTargetIndex, 0, removed)
}
// Если перетаскиваем внутри одной группы
else if (sourceGroup && group && sourceGroup === group && !sourceVariable.isGroup) {
const sourceIndex = dragItem.value.index
const [removed] = group.children.splice(sourceIndex, 1)
group.children.splice(actualTargetIndex, 0, removed)
}
// Сбрасываем состояния
dragItem.value = null
dragOverItem.value = null
dragOverGroup.value = null
dragSource.value = null
}
// Удаление группы
const removeGroup = (group) => {
const index = templateVariables.value.findIndex(v => v === group)
if (index > -1) {
// Перемещаем детей группы в корень
if (group.children && group.children.length) {
templateVariables.value.splice(index, 1, ...group.children)
} else {
templateVariables.value.splice(index, 1)
}
}
}
// Редактирование группы
const editGroup = (group) => {
selectedVariable.value = group
}
</script>
<template>
@@ -128,21 +367,219 @@ const clickToVariable = (variable) => {
<div v-if="stage === 'upload'" class="flex flex-col gap-y-1">
<Input v-model:value="uploadForm.name" label="Наименование" />
<Input v-model:value="uploadForm.description" label="Описание" />
<FileUpload class="mt-2.5" v-model:file="uploadedFile" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
<TagsInput v-model="uploadForm.tags" label="Теги" />
<div class="mt-2.5">
<FileUpload v-model:file="uploadedFile" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
</div>
</div>
<div v-else class="grid grid-cols-[280px_1fr] gap-x-2 ">
<Card header="Переменные документа">
<div class="flex flex-col gap-y-0.5 max-h-[420px] pr-2 overflow-y-auto">
<Button v-for="variable in templateVariables" block @click="clickToVariable(variable)">
{{ variable.label }}
</Button>
<Button class="mb-2 -mt-2" block @click="createVariableGroup" icon-left>
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 4h6v6h-6zm10 0h6v6h-6zm-10 10h6v6h-6zm10 3h6m-3 -3v6" />
</svg>
</template>
Добавить группу
</Button>
<div class="flex flex-col gap-y-0.5 max-h-[396px] overflow-y-auto">
<template v-for="(variable, index) in templateVariables" :key="variable.name || variable.label">
<!-- Визуальный дубликат перетаскиваемого элемента -->
<div v-if="dragItem && dragOverItem === index && !dragOverGroup && dragItem.variable !== variable"
@dragover="dragOver($event, index)"
@drop="drop($event, index)"
class="opacity-60 transform">
<Button
icon-left
block
class="cursor-grabbing bg-blue-50 border-blue-200"
disabled>
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</template>
{{ dragItem.variable.label }}
</Button>
</div>
<div v-if="variable.isGroup"
class="pl-px pt-px pb-px pr-px"
:class="{ 'bg-blue-50/10 rounded': dragOverGroup === variable }"
@dragover="dragOver($event, index)"
@drop="drop($event, index)">
<Collapsible class="drag-handle"
draggable="true"
@dragstart="dragStart($event, variable, index)"
@dragend="dragEnd">
<template #icon>
<div class="cursor-grab active:cursor-grabbing">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</div>
</template>
<template #header>
<div class="flex items-center justify-between w-full">
<div class="flex items-center flex-1 drag-handle">
<span class="block text-sm font-medium truncate">{{variable.label}}</span>
</div>
</div>
</template>
<template #header-extra>
<button @click="editGroup(variable)" class="text-white hover:text-zinc-300 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
<path d="M13.5 6.5l4 4" />
</svg>
</button>
<button @click="removeGroup(variable)" class="text-red-500 hover:text-red-700 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
</svg>
</button>
</template>
<div class="min-h-2 flex flex-col gap-y-0.5"
@dragover="dragOver($event, -2, variable)"
@drop="drop($event, -2, variable)">
<template v-if="variable.children && variable.children.length > 0">
<div v-for="(child, childIndex) in variable.children"
:key="child.name"
class="relative"
@dragover="dragOver($event, childIndex, variable)"
@drop="drop($event, childIndex, variable)"
>
<!-- Визуальный дубликат между элементами в группе -->
<div v-if="dragItem && dragOverItem === childIndex && dragOverGroup === variable"
class="opacity-60 transform">
<Button
icon-left
block
class="cursor-grabbing bg-blue-50 border-blue-200"
disabled>
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</template>
{{ dragItem.variable.label }}
</Button>
</div>
<Button
icon-left
block
@click="clickToVariable(child)"
draggable="true"
@dragstart="dragStart($event, child, childIndex, variable)"
@dragend="dragEnd"
class="drag-handle cursor-grab active:cursor-grabbing">
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</template>
<span class="truncate">{{ child.label }}</span>
</Button>
</div>
</template>
<div v-else
class="text-center text-gray-400 py-2 text-sm border-2 border-dashed border-gray-300 rounded mx-2"
@dragover="dragOver($event, -2, variable)"
@drop="drop($event, -2, variable)">
Перетащите переменные сюда
</div>
</div>
</Collapsible>
</div>
<div v-else
class="relative"
:class="{ 'bg-blue-50/10': dragOverItem === index && !dragOverGroup }"
@dragover="dragOver($event, index)"
@drop="drop($event, index)">
<Button
icon-left
block
@click="clickToVariable(variable)"
draggable="true"
@dragstart="dragStart($event, variable, index)"
@dragend="dragEnd"
class="drag-handle cursor-grab active:cursor-grabbing">
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</template>
{{ variable.label }}
</Button>
</div>
</template>
<!-- Визуальный дубликат в конце корневого списка -->
<div v-if="dragItem && dragOverItem === -1 && !dragOverGroup"
class="opacity-60 transform scale-105">
<Button
icon-left
block
class="cursor-grabbing bg-blue-50 border-blue-200"
disabled>
<template #icon>
<svg 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" class="h-4 w-4">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</template>
{{ dragItem.variable.label }}
</Button>
</div>
</div>
<!-- <ListStrate v-for="variable in uploadForm.variables" :header="variable.label">-->
<!-- <Select :options="variableTypes" v-model:value="variable.type" placeholder="Выберите тип" />-->
<!-- </ListStrate>-->
</Card>
<Card :header="selectedVariable.label">
<div class="pr-2">
<Card :header="selectedVariable?.label || 'Выберите переменную'">
<div class="pr-2" v-if="selectedVariable">
<div class="flex flex-col gap-y-1">
<FormGroup label="Наименование переменной" position="top">
<Input v-model:value="activeVariable.name" disabled />
@@ -152,7 +589,7 @@ const clickToVariable = (variable) => {
<Input v-model:value="activeVariable.label" />
</FormGroup>
<FormGroup label="Тип ввода" position="top">
<FormGroup v-if="activeVariable.type !== 'group'" label="Тип ввода" position="top">
<Select :options="variableTypes" v-model:value="activeVariable.type" @update:value="changeTypeValue(value)" placeholder="Выберите тип" />
</FormGroup>
@@ -169,6 +606,9 @@ const clickToVariable = (variable) => {
</FormGroup>
</div>
</div>
<div v-else class="text-center text-gray-400 py-8">
Выберите переменную для редактирования
</div>
</Card>
</div>