Fellista

Komponent: FErrorList
Status: Produktionsklar

Innehåll

Lista utan punkter
Ingen rubriktext
Lista utan länkar
Expandera en yta vid klick på länk
API

Fellista används för att sammanställa inmatningsfel i stora formulär.

<template>
    <div>
        <f-error-list :items="items" :bullets="true">
            <template #title> Kolla på felen nedan </template>
        </f-error-list>

        <f-text-field id="fornamn-med-bullets" v-validation.maxLength> Förnamn </f-text-field>
        <f-text-field id="efternamn-med-bullets" v-validation.maxLength> Efternamn </f-text-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FErrorList, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FErrorListBullets",
    components: { FErrorList, FTextField },
    data() {
        return {
            items: [
                { id: "fornamn-med-bullets", title: "Förnamn" },
                { id: "efternamn-med-bullets", title: "Efternamn" },
            ],
        };
    },
});
</script>

Fellistan ska visas och få fokus när användaren försöker att skicka in ett formulär med fel.
Rubriken är valfri, men rekommenderas eftersom den visar en ikon som kompletterar varningsfärgen på texten.
Punktlistan består av länkar till inmatningskomponenter som är felaktigt ifyllda och till obligatoriska fält som har lämnats tomma.
Rubriken samt feltexterna bestäms av applikationen.
Om en inmatningskomponent är placerad i en utfällbar yta (t.ex. en Expanderbar panel) kan den fällas ut automatiskt när användaren trycker på länken till felet.

Lista utan punkter

<template>
    <div>
        <f-error-list :items="items">
            <template #title> Kolla på felen nedan </template>
        </f-error-list>

        <f-text-field id="fornamn-utan-bullets" v-validation.maxLength> Förnamn </f-text-field>
        <f-text-field id="efternamn-utan-bullets" v-validation.maxLength> Efternamn </f-text-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FErrorList, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FErrorListNoBullets",
    components: { FErrorList, FTextField },
    data() {
        return {
            items: [
                { id: "fornamn-utan-bullets", title: "Förnamn" },
                { id: "efternamn-utan-bullets", title: "Efternamn" },
            ],
        };
    },
});
</script>

Ingen rubriktext

Varken ikon eller text visas om du inte använder title -slotten.

<template>
    <div>
        <f-error-list :items="items" :bullets="true"></f-error-list>

        <f-text-field id="fornamn-utan-text" v-validation.maxLength> Förnamn </f-text-field>
        <f-text-field id="efternamn-utan-text" v-validation.maxLength> Efternamn </f-text-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FErrorList, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FErrorListNoTitle",
    components: { FErrorList, FTextField },
    data() {
        return {
            items: [
                { id: "fornamn-utan-text", title: "Förnamn" },
                { id: "efternamn-utan-text", title: "Efternamn" },
            ],
        };
    },
});
</script>

Lista utan länkar

<template>
    <f-error-list :items="items" :bullets="true"></f-error-list>
</template>

<script>
import { defineComponent } from "vue";
import { FErrorList } from "@fkui/vue";

export default defineComponent({
    name: "FErrorListNoLinks",
    components: { FErrorList },
    data() {
        return { items: [{ title: "Förnamn" }, { title: "Efternamn" }] };
    },
});
</script>

Expandera en yta vid klick på länk

<template>
    <div>
        <f-error-list :items="items" :before-navigate="beforeNavigate">
            <template #title> Kolla på felen nedan </template>
        </f-error-list>

        <f-expandable-panel :expanded="expanded" @toggle="expanded = !expanded">
            <template #title> Favoriter </template>
            <template #default>
                <f-text-field id="favorit-frukt" maxlength="100"> Favoritfrukt 🍎 </f-text-field>
                <f-text-field id="favorit-godis" maxlength="100"> Favoritgodis 🍬 </f-text-field>
            </template>
        </f-expandable-panel>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FErrorList, FExpandablePanel, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FErrorListBeforeNavigate",
    components: { FErrorList, FExpandablePanel, FTextField },
    data() {
        return {
            items: [
                { title: "Favoritfrukt", id: "favorit-frukt", focusElementId: "favorit-frukt" },
                { title: "Favoritgodis", id: "favorit-godis", focusElementId: "favorit-godis" },
            ],
            expanded: false,
        };
    },
    methods: {
        beforeNavigate() {
            this.expanded = true;
            return this.$nextTick();
        },
    },
});
</script>

API

Props
Name	Description	Type	Required	Default
items	List of errors of type `ErrorItem`. If element id is unspecified, no link will be rendered. If element with id don't exist on navigation, an exception is thrown.	ErrorItem[]	true	‐
bullets	Display bullets in list.	boolean	false	false
beforeNavigate	Optional callback for performing actions before navigation.	BeforeNavigate	false	function() { return () => { /* do nothing */ }; }

Slots
Name	Description	Bindings
title	Optional title shown above the errorlist. No icon is shown if no title is set	‐

Kakor på webbplatsen

Fellista

Lista utan punkter

Ingen rubriktext

Lista utan länkar

Expandera en yta vid klick på länk

API