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

export default defineComponent({
    name: "FStaticFieldTextField",
    components: { FStaticField, FTextField },
    data() {
        return { name: "" };
    },
});
</script>

<template>
    <div data-test="output-field">
        <f-text-field
            id="normal"
            v-model="name"
            v-validation.maxLength="{ maxLength: { length: 100 } }"
        >
            Namn
        </f-text-field>

        <f-static-field>
            <template #label> Beskrivning </template>
            En liten statisk beskrivning.
        </f-static-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FStaticField, FTooltip } from "@fkui/vue";

export default defineComponent({
    name: "FStaticFieldTooltipDescription",
    components: { FStaticField, FTooltip },
});
</script>

<template>
    <div data-test="output-field">
        <f-static-field>
            <template #label> Etikett </template>
            <template #tooltip>
                <f-tooltip screen-reader-text="Läs mer om avancerat fält" header-tag="h2">
                    <template #header> Mer om avancerat fält </template>
                    <template #body> Detta fältet kräver lite närmare förklaring. </template>
                </f-tooltip>
            </template>
            <template #description="{ descriptionClass, formatDescriptionClass }">
                <span :class="descriptionClass"> Beskrivning av etikett </span>
                <span :class="formatDescriptionClass"> (format) </span>
            </template>
            <template #default> En liten statisk text. </template>
        </f-static-field>
    </div>
</template>

<script setup lang="ts">
import { FStaticField } from "@fkui/vue";

const date = "20200101";
</script>
<template>
    <f-static-field>
        <template #label> Formaterat datum </template>
        <span v-format:date-full="date"></span>
    </f-static-field>
</template>