Komponent

IPopupError

PopupError är en ramverkskomponent som används för att visa felmeddelanden när inmatningsfält används i en tabell. Komponenten använder logiken från IPopup för att beräkna vart felmeddelandet ska visas, i förhållande till inmatningsfältet. Men PopupError har en annan prioriterad ordning för vart felmeddelandet kan placeras.

Positionering

Position för felmeddelandet väljs enligt följande, i fallande prioordning:

• "B" - popup under och linjering mot höger kant.
• "A" - popup under och linjering mot vänster kant.
• "D" - popup ovanför och linjering mot höger kant.
• "C" - popup ovanför och linjering mot vänster kant.
• "E" - popup höger om ankaren vertikalt centrerad.
• "F" - popup vänster om ankaren vertikalt centrerad.

Ifall ingen av ovanstående positioner fungerar placeras felmeddelandet inline under inmatningsfältet.

Teleport

Komponenten teleporteras till body-elementet när den visas som overlay. Läs mer om detta under IPopup.

<script lang="ts">
import { defineComponent } from "vue";
import {
    FEmailTextField,
    FInteractiveTable,
    FPostalCodeTextField,
    FTableColumn,
    FValidationForm,
} from "@fkui/vue";

export default defineComponent({
    name: "TestApp",
    components: {
        FInteractiveTable,
        FTableColumn,
        FValidationForm,
        FEmailTextField,
        FPostalCodeTextField,
    },
    data() {
        return {
            insatser: [
                {
                    id: "1",
                    email: "",
                    postnr: "",
                },
                {
                    id: "2",
                    email: "",
                    postnr: "",
                },
                {
                    id: "3",
                    email: "",
                    postnr: "",
                },
            ],
        };
    },
});
</script>

<template>
    <f-validation-form :use-error-list="false">
        <f-interactive-table :rows="insatser" hover key-attribute="id">
            <template #caption> PopupError example </template>
            <template #default="{ row }">
                <f-table-column title="Epost" type="text" shrink>
                    <f-email-text-field
                        v-model="row.email"
                        v-validation.required
                    ></f-email-text-field>
                </f-table-column>

                <f-table-column title="Postnummer" type="text" shrink>
                    <f-postal-code-text-field
                        v-model="row.postnr"
                        v-validation.required
                    ></f-postal-code-text-field>
                </f-table-column>
            </template>
        </f-interactive-table>
        <button class="button button--primary" type="submit">Submit</button>
    </f-validation-form>
</template>

API

Props

isOpen: boolean

Toggle open/closed error popup.

errorMessage: string Optional

Message to display

Default: "Error"

anchor: HTMLElement | null | undefined Optional

DOM element to position error popup at.

Default: undefined

Events

close

‐