Format Plugin
FormatPlugin lägger till stöd för formaterings-direktivet v-format.
Direktivet används för att formatera data som ska presenteras.
Utöver formateringen förhindras även radbrytning av data.
Val av formaterare görs via direktivets argument och följande format stöds:
- bankgiro
- datum
- nummer
- organisationsnummer
- personnummer
- plusgiro
- postnummer
- text.
Konfiguration
Du initialiserar FormatPlugin på nedan sätt (bör göras så tidigt i applikationen som möjligt, till exempel main.ts )
import { createApp } from "vue";
import { FormatPlugin } from "@fkui/vue";
const app = createApp(App);
app.use(FormatPlugin);
app.mount("#app");
Bankgiro
Värdet ska vara av typen string.
Formaterar värdet enligt:
- NNN-NNNN om längden är sju tecken
- NNNN-NNNN om längden är åtta tecken.
<script setup>
const bankgiro = "1234566";
</script>
<template>
<p v-format:bankgiro="bankgiro"></p>
</template>
Datum
Datumformateraren stödjer fyra olika format:
v-format:date: "2022-05-04"v-format:date-long: "4 maj 2022"v-format:date-full: "onsdag 4 maj 2022"v-format:date-range: "2022-05-04 – 2022-08-01"
Värdet kan antingen vara av typen string, FDate eller DateRange.
export type DateRange =
| {
from: string;
to: string;
}
| {
from: FDate;
to: FDate;
};
<script setup>
import { FDate } from "@fkui/date";
const myDate = "20250408";
const dateRange = {
from: "20250101",
to: "20251231",
};
const myFDate = FDate.fromIso("2025-01-01");
const myFDateRange = {
from: myFDate,
to: myFDate.addDays(100),
};
</script>
<template>
<p v-format:date="myDate"></p>
<p v-format:date-long="myDate"></p>
<p v-format:date-full="myDate"></p>
<p v-format:date-range="dateRange"></p>
<p v-format:date-full="myFDate"></p>
<p v-format:date-range="myFDateRange"></p>
</template>
Nummer
Formaterar värdet som ett nummer enligt:
- tar bort inledande nollor
- sätter tusenavdelare
- konverterar punkt till komma.
Värdet kan antingen vara av typen string,number eller NumberFormat om man vill precisera antalet decimaler.
export interface NumberFormat {
number: number | string;
decimals: number;
}
<script setup>
const number = 123456789.1234;
const stringNumber = "123456789.1234";
const precisionNumber = {
number: 123456789.1234,
decimals: 2,
};
</script>
<template>
<p v-format:number="number"></p>
<p v-format:number="stringNumber"></p>
<p v-format:number="precisionNumber"></p>
</template>
Organisationsnummer
Formaterar värdet enligt formatet NNNNNN-NNNN.
Värdet ska vara av typen string.
<script setup>
const orgnr = "9999999999";
</script>
<template>
<p v-format:orgnr="orgnr"></p>
</template>
Personnummer
Formaterar värdet enligt formatet ååååmmdd-nnnn.
Värdet ska vara av typen string.
<script setup>
const pnr = "189001019802";
</script>
<template>
<p v-format:pnr="pnr"></p>
</template>
Plusgiro
Formaterar värdet enligt:
- bindestreck mellan näst sista och sista siffran
- grupper med två siffror till vänster om bindestreck.
Vid udda antal siffror till vänster kommer första gruppen innehålla en siffra. Vid jämnt antal siffror till vänster kommer alla grupper innehåll två siffror.
Exempel
- N-N
- NN-N
- N NN-N
- NN NN-N
- N NN NN-N
Värdet ska vara av typen string.
<script setup>
const plusgiro = "11111119";
</script>
<template>
<p v-format:plusgiro="plusgiro"></p>
</template>
Postnummer
Formaterar värdet enligt formatet NNN NN.
Värdet ska vara av typen string.
<script setup>
const postnummer = "37332";
</script>
<template>
<p v-format:postnummer="postnummer"></p>
</template>
Text
Formateraren för text ser till att texten inte radbryts.
<script setup>
const myText = "24 december";
</script>
<template>
<span>Julafton inträffar den <span v-format:text="myText" class="red"></span> varje år.</span>
</template>
<style>
.red {
color: red;
}
</style>