Добавлены отступы для групп
This commit is contained in:
brusnitsyn
@@ -287,138 +287,140 @@ const highlightElement = (element) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="(data, key) in formData" :key="key">
|
||||
<div v-if="data.type === 'group'">
|
||||
<Collapsible :header="data.label">
|
||||
<ListStrate v-for="(variable, key) in data.children" :key="key" :header="variable.label">
|
||||
<Input
|
||||
v-if="variable.type === 'text'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
v-model:value="variable.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(variable.label)}`"
|
||||
/>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<template v-for="(data, key) in formData" :key="key">
|
||||
<div v-if="data.type === 'group'">
|
||||
<Collapsible :header="data.label">
|
||||
<ListStrate v-for="(variable, key) in data.children" :key="key" :header="variable.label">
|
||||
<Input
|
||||
v-if="variable.type === 'text'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
v-model:value="variable.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(variable.label)}`"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-if="variable.type === 'textarea'"
|
||||
:rows="8"
|
||||
:resize="false"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
v-model:value="variable.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(variable.label)}`"
|
||||
/>
|
||||
<TextArea
|
||||
v-if="variable.type === 'textarea'"
|
||||
:rows="8"
|
||||
:resize="false"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
v-model:value="variable.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(variable.label)}`"
|
||||
/>
|
||||
|
||||
<!-- Select поле -->
|
||||
<Select
|
||||
v-else-if="variable.type === 'select'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
@change="value => onChangeVariableSelectValue(key, value)"
|
||||
v-model:value="variable.value"
|
||||
:options="variable.options"
|
||||
/>
|
||||
<!-- Select поле -->
|
||||
<Select
|
||||
v-else-if="variable.type === 'select'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
@change="value => onChangeVariableSelectValue(key, value)"
|
||||
v-model:value="variable.value"
|
||||
:options="variable.options"
|
||||
/>
|
||||
|
||||
<!-- Radio кнопки -->
|
||||
<div v-else-if="variable.type === 'radio'" class="space-y-2">
|
||||
<label
|
||||
v-for="(optionLabel, optionValue) in variable.options"
|
||||
:key="optionValue"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:name="key"
|
||||
:value="optionValue"
|
||||
v-model="formData[key]"
|
||||
@change="updatePreview"
|
||||
class="mr-2"
|
||||
<!-- Radio кнопки -->
|
||||
<div v-else-if="variable.type === 'radio'" class="space-y-2">
|
||||
<label
|
||||
v-for="(optionLabel, optionValue) in variable.options"
|
||||
:key="optionValue"
|
||||
class="flex items-center"
|
||||
>
|
||||
{{ optionLabel }}
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
:name="key"
|
||||
:value="optionValue"
|
||||
v-model="formData[key]"
|
||||
@change="updatePreview"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ optionLabel }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<PriceInput v-else-if="variable.type === 'price-input'"
|
||||
v-model:number="variable.number"
|
||||
v-model:text="variable.value"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
/>
|
||||
<PriceInput v-else-if="variable.type === 'price-input'"
|
||||
v-model:number="variable.number"
|
||||
v-model:text="variable.value"
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
/>
|
||||
|
||||
<Calendar v-else-if="variable.type === 'calendar'"
|
||||
v-model="variable.value"
|
||||
:format="variable.format"
|
||||
block
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
/>
|
||||
</ListStrate>
|
||||
</Collapsible>
|
||||
</div>
|
||||
<ListStrate v-else :key="key" :header="data.label">
|
||||
<Input
|
||||
v-if="data.type === 'text'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
v-model:value="data.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(data.label)}`"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-if="data.type === 'textarea'"
|
||||
:rows="8"
|
||||
:resize="false"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
v-model:value="data.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(data.label)}`"
|
||||
/>
|
||||
|
||||
<!-- Select поле -->
|
||||
<Select
|
||||
v-else-if="data.type === 'select'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
@change="value => onChangeVariableSelectValue(key, value)"
|
||||
v-model:value="data.value"
|
||||
:options="data.options"
|
||||
/>
|
||||
|
||||
<!-- Radio кнопки -->
|
||||
<div v-else-if="data.type === 'radio'" class="space-y-2">
|
||||
<label
|
||||
v-for="(optionLabel, optionValue) in data.options"
|
||||
:key="optionValue"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:name="key"
|
||||
:value="optionValue"
|
||||
v-model="formData[key]"
|
||||
@change="updatePreview"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ optionLabel }}
|
||||
</label>
|
||||
<Calendar v-else-if="variable.type === 'calendar'"
|
||||
v-model="variable.value"
|
||||
:format="variable.format"
|
||||
block
|
||||
@focus="searchAndScroll(variable.name)"
|
||||
/>
|
||||
</ListStrate>
|
||||
</Collapsible>
|
||||
</div>
|
||||
<ListStrate v-else :key="key" :header="data.label">
|
||||
<Input
|
||||
v-if="data.type === 'text'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
v-model:value="data.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(data.label)}`"
|
||||
/>
|
||||
|
||||
<PriceInput v-else-if="data.type === 'price-input'"
|
||||
v-model:number="data.number"
|
||||
v-model:text="data.value"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
/>
|
||||
<TextArea
|
||||
v-if="data.type === 'textarea'"
|
||||
:rows="8"
|
||||
:resize="false"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
v-model:value="data.value"
|
||||
@update:value="value => onChangeVariableTextValue(key, value)"
|
||||
:placeholder="`Введите ${formatLabel(data.label)}`"
|
||||
/>
|
||||
|
||||
<Calendar v-else-if="data.type === 'calendar'"
|
||||
v-model="data.value"
|
||||
:format="data.format"
|
||||
block
|
||||
@focus="searchAndScroll(data.name)"
|
||||
/>
|
||||
</ListStrate>
|
||||
</template>
|
||||
<!-- Select поле -->
|
||||
<Select
|
||||
v-else-if="data.type === 'select'"
|
||||
:id="key"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
@change="value => onChangeVariableSelectValue(key, value)"
|
||||
v-model:value="data.value"
|
||||
:options="data.options"
|
||||
/>
|
||||
|
||||
<!-- Radio кнопки -->
|
||||
<div v-else-if="data.type === 'radio'" class="space-y-2">
|
||||
<label
|
||||
v-for="(optionLabel, optionValue) in data.options"
|
||||
:key="optionValue"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:name="key"
|
||||
:value="optionValue"
|
||||
v-model="formData[key]"
|
||||
@change="updatePreview"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ optionLabel }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<PriceInput v-else-if="data.type === 'price-input'"
|
||||
v-model:number="data.number"
|
||||
v-model:text="data.value"
|
||||
@focus="searchAndScroll(data.name)"
|
||||
/>
|
||||
|
||||
<Calendar v-else-if="data.type === 'calendar'"
|
||||
v-model="data.value"
|
||||
:format="data.format"
|
||||
block
|
||||
@focus="searchAndScroll(data.name)"
|
||||
/>
|
||||
</ListStrate>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button :loading="previewLoading" block @click="updatePreview">
|
||||
Обновить предпросмотр
|
||||
|
||||
Reference in New Issue
Block a user