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