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

items: ErrorItem[]

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.

bullets: boolean Optional

Display bullets in list.

Default: false

beforeNavigate: BeforeNavigate Optional

Optional callback for performing actions before navigation.

Default: function() { return () => { /* do nothing */ }; }

Slots

title: Optional title shown above the errorlist. No icon is shown if no title is set

Kakor på webbplatsen