Dialogträd

Komponent: FDialogueTree
Status: Produktionsklar

Innehåll

Exempel med tre frågor
Användning
Exempel
Flerstegsmodal
API

Låter användaren navigera genom X antal dialoger som leder till en slutvy baserat på tidigare val.

Exempel med tre frågor

<div class="dialogue-tree" data-test="dialogue-tree">
    <ul class="dialogue-tree__list">
        <li class="dialogue-tree__list-item">
            <button type="button">
                Anställning
                <f-icon name="arrow-right"></f-icon>
            </button>
        </li>
        <li class="dialogue-tree__list-item">
            <button type="button">
                Enskild firma eller handelsbolag
                <f-icon name="arrow-right"></f-icon>
            </button>
        </li>
        <li class="dialogue-tree__list-item">
            <button type="button">
                Aktiebolag
                <f-icon name="arrow-right"></f-icon>
            </button>
        </li>
    </ul>
</div>

Användning

<f-dialogue-tree v-model="current" dialogue-tree="tree">
    <template #default="{ userData }">
        <template v-if="userData.id === '1'"> 1 </template>
        <template v-if="userData.id === '2'"> 2 </template>
    </template>
</f-dialogue-tree>

Exempel

<script lang="ts">
import { defineComponent } from "vue";
import {
    type FDialogueTreeOption,
    type FDialogueTreeUserProgress,
    FDialogueTree,
    FTextField,
} from "@fkui/vue";

function generateOption(label: string): FDialogueTreeOption {
    return {
        label: `Option (${label})`,
        question: {
            label: `Fourth question (${label})`,
            options: [
                {
                    label: `Option (${label}.1)`,
                    question: {
                        label: `Answer (${label})`,
                        userData: {
                            type: "formA",
                            foo: "bar",
                        },
                    },
                },
                {
                    label: `Option (${label}.2)`,
                    question: {
                        label: `Answer (${label})`,
                        userData: {
                            type: "formB",
                            bar: "foo",
                        },
                    },
                },
            ],
        },
    };
}

const DIALOGUE_TREE_DATA = {
    label: "First question",
    options: [
        {
            label: "Option 1",
            question: {
                label: "Second question 1",
                options: [generateOption("1.1"), generateOption("1.2")],
            },
        },
        {
            label: "Option 2",
            question: {
                label: "Second question 2",
                options: [generateOption("2.1"), generateOption("2.2")],
            },
        },
    ],
};

export default defineComponent({
    name: "FDialogueTreeExample",
    components: { FDialogueTree, FTextField },
    data() {
        return {
            tree: DIALOGUE_TREE_DATA,
            current: {
                label: "",
                lastStep: true,
                steps: [],
            } satisfies FDialogueTreeUserProgress,
        };
    },
});
</script>

<template>
    <div>
        <!-- just for demo purpose -->
        <h1>{{ current.label }}</h1>

        <f-dialogue-tree v-model="current" :dialogue-tree="tree">
            <template #default="{ userData }">
                <template v-if="userData.type === 'formA'">
                    formA
                    <f-text-field v-validation.required.maxLength="{ maxLength: { length: 32 } }">
                        Field 1
                    </f-text-field>
                </template>
                <template v-if="userData.type === 'formB'">
                    formB
                    <f-text-field v-validation.required.maxLength="{ maxLength: { length: 32 } }">
                        Field 1
                    </f-text-field>
                </template>
            </template>
        </f-dialogue-tree>
    </div>
</template>

Flerstegsmodal

Exempel på en kombination av komponenterna FFormModal och FDialogueTree för att skapa en modal som inehåller flera steg.

<!-- [html-validate-disable-block aria-label-misuse -- well supported]-->
const myAwesomeDialogTree: FDialogueTreeSubQuestion = {
  label: "Vad vill du lägga till?",
  options: [ /* ... */ ],
};

<f-form-modal>
  <template #input-text-fields>
    <f-dialogue-tree :dialogue-tree="myAwesomeDialogTree"></f-dialogue-tree>
  </template>
</f-form-modal>

API

Slot for last dialogue step.

Bindings:

userData: userData — Step information

Kakor på webbplatsen

Dialogträd