activeBatch

Описание

Необязательный. Управляет тем, какой пакет полей в данный момент активен в редакторе

Использование

activeBatch?: string | number;

Примеры

Отображение одного пакета за раз

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

      registerEditorItem("combo", Combo);

    const batchItems = [
        {
            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>

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

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

      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" v-model:activeBatch="activeBatch">
        <Tabs :options="options" v-model:value="activeBatch"></Tabs>
    </Editor>
</template>