Организация макета формы

Структура формы

Виджет редактора предоставляет несколько способов структурирования и организации макета формы. Он поддерживает разделение формы на логические группы: пакеты, секции или сворачиваемые/аккордеонные секции. Такая гибкость позволяет разработчикам создавать удобные интерфейсы, в которых поля можно группировать и легко переключаться между ними. Ниже перечислены поддерживаемые конфигурации:

Разделение формы на пакеты с отображением одного пакета

Редактор позволяет разбивать поля формы на отдельные пакеты, при этом одновременно отображается только один пакет. Это удобно для создания пошаговых форм или упрощения сложных форм.

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Combo } from "@svar-ui/vue-core";

registerEditorItem("combo", Combo);

const items = [
   {
     comp: "text",
     key: "name",
     batch: "main",
     label: "Name",
   },
   {
     key: "theme",
     batch: "cfg",
     comp: "combo",
     label: "Theme",
     options: [
        { id: "light", label: "Light" },
        { id: "dark", label: "Dark" },
     ],
   },
];
</script>

<template>
   <Editor :items="items" activeBatch="cfg" />
</template>

В этом примере свойство activeBatch установлено в значение "cfg", поэтому отображаются только поля, назначенные пакету "cfg". Такой подход идеален для форм с несколькими логическими секциями, которые нужно показывать по одной.

Использование панели вкладок для переключения между пакетами

Редактор поддерживает навигацию на основе вкладок для переключения между пакетами. Этот способ подходит для форм с несколькими секциями, между которыми пользователям нужно переходить.

<script setup>
import { ref } from "vue";
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Tabs, Combo } from "@svar-ui/vue-core";

registerEditorItem("combo", Combo);

const options = [
   {
     id: "main",
     label: "Personal",
   },
   {
     id: "cfg",
     label: "Settings",
   },
];

const items = [
   {
     comp: "text",
     key: "name",
     batch: "main",
     label: "Name",
   },
   {
     key: "theme",
     batch: "cfg",
     comp: "combo",
     label: "Theme",
     options: [
        { id: "light", label: "Light" },
        { id: "dark", label: "Dark" },
     ],
   },
];

const activeBatch = ref("cfg");
</script>

<template>
   <Editor :items="items" :activeBatch="activeBatch">
      <Tabs :options="options" v-model:value="activeBatch"></Tabs>
   </Editor>
</template>

Здесь компонент Tabs позволяет пользователям выбирать, какой пакет отображать. Привязка activeBatch обеспечивает отображение соответствующих полей в зависимости от выбранной вкладки.

---

Группировка полей формы в сворачиваемые секции

Редактор поддерживает организацию полей в сворачиваемые секции, что упрощает работу с длинными формами. Каждую секцию можно открывать и закрывать.

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Comments } from "@svar-ui/vue-comments";

registerEditorItem("comments", Comments);

const items = [
   {
     comp: "section",
     key: "common-section",
     label: "Common settings",
   },
   {
     comp: "text",
     key: "name",
     label: "Name",
   },
   {
     comp: "textarea",
     key: "descr",
     label: "Description",
   },
   {
     comp: "section",
     key: "comments-section",
     label: "Comments",
   },
   {
     comp: "comments",
     key: "comments",
     section: "comments-section",
   }
];
</script>

<template>
   <Editor :items="items" />
</template>

Все поля отображаются внутри сворачиваемых секций.

Секции, такие как "Common settings" и "Comments", можно сворачивать и разворачивать, позволяя пользователям сосредоточиться на конкретных частях формы.

---

Отображение аккордеонных секций

Аккордеонный стиль секций позволяет держать открытой только одну секцию одновременно. При открытии новой секции ранее открытая автоматически сворачивается.

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Comments } from "@svar-ui/vue-comments";

registerEditorItem("comments", Comments);

const items = [
   {
     comp: "section",
     key: "common-section",
     label: "Common settings",
     sectionMode: "accordion",
   },
   {
     comp: "text",
     key: "name",
     label: "Name",
   },
   {
     comp: "textarea",
     key: "descr",
     label: "Description",
   },
   {
     comp: "section",
     key: "comments-section",
     label: "Comments",
     sectionMode: "accordion",
   },
   {
     comp: "comments",
     key: "comments",
     section: "comments-section",
   }
];
</script>

<template>
   <Editor :items="items" />
</template>

Все поля отображаются внутри сворачиваемых секций, но открытой может быть только одна секция одновременно.

Такая конфигурация удобна для форм, в которых в один момент нужно отображать информацию только из одной секции.

Использование модальных секций в Editor

Модальные секции скрывают остальные поля при открытии, заменяя поля верхнего уровня содержимым выбранной секции. Это полезно для фокусировки на конкретном наборе полей ввода.

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Comments } from "@svar-ui/vue-comments";

registerEditorItem("comments", Comments);

const items = [
   {
     comp: "text",
     key: "name",
     label: "Name",
   },
   {
     comp: "textarea",
     key: "descr",
     label: "Description",
   },
   {
     comp: "section",
     key: "comments-section",
     label: "Comments",
     sectionMode: "exclusive",
   },
   {
     comp: "comments",
     key: "comments",
     section: "comments-section",
   }
];
</script>

<template>
   Fields in sections are hidden by default. Clicking on a section replaces the top-level fields with the section's content.

   <Editor :items="items" />
</template>

Такой подход идеален для форм, где секции должны занимать всё внимание, не отвлекая на другие поля.

Совмещение полей и секций в Editor

Редактор позволяет объединять всегда видимые поля со сворачиваемыми секциями. Это удобно, когда некоторые поля должны оставаться доступными в любое время.

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Comments } from "@svar-ui/vue-comments";

registerEditorItem("comments", Comments);

const items = [
   {
     comp: "text",
     key: "name",
     label: "Name",
   },
   {
     comp: "textarea",
     key: "descr",
     label: "Description",
   },
   {
     comp: "section",
     key: "comments-section",
     label: "Comments",
   },
   {
     comp: "comments",
     key: "comments",
     section: "comments-section",
   }
];
</script>

<template>
   While `name` and `descr` fields are always visible, fields below are rendered inside a collapsible section.

   <Editor :items="items" />
</template>

Такая конфигурация подходит для форм, где определённые критически важные поля должны оставаться доступными, а остальные можно сгруппировать в сворачиваемые секции.

Связанный пример: Layouts