@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/layouts/Platform/__tests__/platform.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Platform from '../Platform.vue';
+import { AppNavigationMenu, AppActionBar } from '~/modules/components';
+
+describe('the Base Layout component', () => {
+  it('should render AppNavigationMenu', () => {
+    const wrapper = shallowMount(Platform);
+
+    const navigationMenu = wrapper.findComponent(AppNavigationMenu);
+    expect(navigationMenu.exists()).toBe(true);
+  });
+
+  it('should render the default slot', () => {
+    const wrapper = shallowMount(Platform, {
+      slots: {
+        default: 'default slot',
+      },
+    });
+
+    const mainWrapper = wrapper.find('main');
+    expect(mainWrapper.exists()).toBe(true);
+    expect(mainWrapper.text()).toBe('default slot');
+  });
+
+  it('should render the sidebar slot', () => {
+    const wrapper = shallowMount(Platform, {
+      slots: {
+        sidebar: 'sidebar slot',
+      },
+    });
+
+    const layoutSidebarWrapper = wrapper.find('[data-test-layout-sidebar-wrapper]');
+    expect(layoutSidebarWrapper.exists()).toBe(true);
+    expect(layoutSidebarWrapper.text()).toBe('sidebar slot');
+  });
+
+  it('should render the left sidebar slot', () => {
+    const wrapper = shallowMount(Platform, {
+      slots: {
+        sidebarLeft: 'sidebar slot',
+      },
+    });
+
+    const layoutLeftSidebarWrapper = wrapper.find('[data-test-layout-sidebar-left-wrapper]');
+    expect(layoutLeftSidebarWrapper.exists()).toBe(true);
+    expect(layoutLeftSidebarWrapper.text()).toBe('sidebar slot');
+  });
+
+  it('should render the AppActionBar', () => {
+    const wrapper = shallowMount(Platform);
+
+    const actionBar = wrapper.findComponent(AppActionBar);
+    expect(actionBar.exists()).toBe(true);
+  });
+});

package/src/modules/layouts/index.ts

@@ -0,0 +1,9 @@
+import AuthLayout from './Auth/Auth.vue';
+import BaseLayout from './Base/Base.vue';
+import PlatformLayout from './Platform/Platform.vue';
+
+export {
+  AuthLayout,
+  BaseLayout,
+  PlatformLayout,
+};

package/src/modules/plugins/Sentry/index.d.ts

@@ -0,0 +1,16 @@
+import type { Router } from 'vue-router';
+import type { ErrorEvent, EventHint } from '@sentry/types/types/event';
+
+export interface Options {
+  router: Router;
+  dsn: string;
+  environment: string;
+  release: string;
+  platform: string;
+  url: string;
+  tracesSampleRate?: number | string;
+  language: string;
+  reportDialog?: boolean;
+  replay?: boolean;
+  beforeSend: (event: ErrorEvent, hint: EventHint) => ErrorEvent;
+}

package/src/modules/plugins/Sentry/index.ts

@@ -0,0 +1,65 @@
+import * as Sentry from '@sentry/vue';
+import nlTranslation from './language/nl';
+
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+// @ts-expect-error types not available
+import type { ErrorEvent, EventHint } from '@sentry/types/build/types/event';
+import type { Options } from './index.d';
+
+export default function registerSentry(app: App, router: Router, options: Options): void {
+  Sentry.init({
+    app,
+    dsn: options.dsn,
+    environment: options.environment,
+    release: options.release,
+
+    initialScope: {
+      tags: {
+        platform: options.platform,
+        language: 'vue',
+      },
+    },
+
+    beforeSend(beforeEvent: ErrorEvent, hint: EventHint): ErrorEvent {
+      const event = options?.beforeSend ? options.beforeSend(beforeEvent, hint) : beforeEvent;
+
+      // Check if it is an exception, and if so, show the report dialog
+      if (event.exception && options.reportDialog !== false) {
+        Sentry.showReportDialog({
+          eventId: event.event_id,
+          ...nlTranslation,
+          user: event?.user,
+          onLoad: () => {
+            document.querySelector('.sentry-error-embed-wrapper #id_name')?.setAttribute('placeholder', '');
+            document.querySelector('.sentry-error-embed-wrapper #id_email')?.setAttribute('placeholder', '');
+            document.querySelector('.sentry-error-embed-wrapper #id_comments')?.setAttribute('placeholder', '');
+          },
+        });
+      }
+
+      return event;
+    },
+
+    // Alternatively, use `process.env.npm_package_version` for a dynamic release version
+    // if your build tool supports it.
+    // release: process.env.npm_package_version,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+
+      ...(options?.replay === true ? [Sentry.replayIntegration()] : []),
+    ],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: parseFloat(`${options?.tracesSampleRate ?? 1}`),
+
+    tracePropagationTargets: [
+      'localhost',
+      '.auto.test',
+      options.url,
+      /^\//,
+    ],
+  });
+}

package/src/modules/plugins/Sentry/language/nl.ts

@@ -0,0 +1,13 @@
+export default {
+  title: 'Er lijkt iets mis te zijn gegaan',
+  subtitle: 'Ons team is op de hoogte gesteld. Het helpt enorm als je ons vertelt wat er is gebeurd.',
+  subtitle2: '',
+  labelName: 'Naam',
+  labelEmail: 'E-mailadres',
+  labelComments: 'Omschrijf wat er gebeurd is',
+  labelClose: 'Sluiten',
+  labelSubmit: 'Verstuur rapport',
+  errorGeneric: 'Er is iets mis gegaan',
+  errorFormEntry: 'Niet alle velden zijn correct ingevuld',
+  successMessage: 'Je feedback is verzonden. Bedankt!',
+};

package/src/modules/plugins/TinyMCE/lang/nl.js

@@ -0,0 +1,430 @@
+/* eslint-disable @typescript-eslint/naming-convention, no-undef, id-length, max-len, quotes, indent, quote-props */
+tinymce.addI18n(
+  'nl',
+  {
+     "#": "#",
+     "Accessibility": "Toegankelijkheid",
+     "Accordion": "",
+     "Accordion body...": "",
+     "Accordion summary...": "",
+     "Action": "Actie",
+     "Activity": "Activiteit",
+     "Address": "Adres",
+     "Advanced": "Geavanceerd",
+     "Align": "Uitlijnen",
+     "Align center": "Centreren",
+     "Align left": "Links uitlijnen",
+     "Align right": "Rechts uitlijnen",
+     "Alignment": "Uitlijning",
+     "Alignment {0}": "",
+     "All": "Alle",
+     "Alternative description": "Alternatieve beschrijving",
+     "Alternative source": "Alternatieve bron",
+     "Alternative source URL": "Alternatief bron-URL",
+     "Anchor": "Anker",
+     "Anchor...": "Anker...",
+     "Anchors": "Ankers",
+     "Animals and Nature": "Dieren en natuur",
+     "Arrows": "Pijlen",
+     "B": "B",
+     "Background color": "Achtergrondkleur",
+     "Background color {0}": "",
+     "Black": "Zwart",
+     "Block": "Blok",
+     "Block {0}": "",
+     "Blockquote": "Quote",
+     "Blocks": "Blokken",
+     "Blue": "Blauw",
+     "Blue component": "Blauw component",
+     "Body": "Body",
+     "Bold": "Vet",
+     "Border": "Rand",
+     "Border color": "Randkleur",
+     "Border style": "Randstijl",
+     "Border width": "Randbreedte",
+     "Bottom": "Onder",
+     "Browse files": "",
+     "Browse for an image": "Afbeelding zoeken",
+     "Browse links": "",
+     "Bullet list": "Lijst met opsommingstekens",
+     "Cancel": "Annuleren",
+     "Caption": "Onderschrift",
+     "Cell": "Cel",
+     "Cell padding": "Celopvulling",
+     "Cell properties": "Celeigenschappen",
+     "Cell spacing": "Celafstand",
+     "Cell styles": "Cel stijlen",
+     "Cell type": "Celtype",
+     "Center": "Centreren",
+     "Characters": "Tekens",
+     "Characters (no spaces)": "Tekens (geen spaties)",
+     "Circle": "Cirkel",
+     "Class": "Klasse",
+     "Clear formatting": "Opmaak wissen",
+     "Close": "Sluiten",
+     "Code": "Broncode",
+     "Code sample...": "Codevoorbeeld...",
+     "Code view": "Code bekijken",
+     "Color Picker": "Kleurenkiezer",
+     "Color swatch": "Kleurenwaaier",
+     "Cols": "Kolommen",
+     "Column": "Kolom",
+     "Column clipboard actions": "Kolom klembord acties",
+     "Column group": "Kolomgroep",
+     "Column header": "Kolom kop",
+     "Constrain proportions": "Verhoudingen behouden",
+     "Copy": "Kopi\\xebren",
+     "Copy column": "Kopieer kolom",
+     "Copy row": "Rij kopi\\xebren",
+     "Could not find the specified string.": "Kan opgegeven reeks niet vinden",
+     "Could not load emojis": "Kan de emoji's niet laden",
+     "Count": "Telling",
+     "Currency": "Valuta",
+     "Current window": "Huidige venster",
+     "Custom color": "Aangepaste kleur",
+     "Custom...": "Aangepast...",
+     "Cut": "Knippen",
+     "Cut column": "Knip kolom",
+     "Cut row": "Rij knippen",
+     "Dark Blue": "Donkerblauw",
+     "Dark Gray": "Donkergrijs",
+     "Dark Green": "Donkergroen",
+     "Dark Orange": "Donkeroranje",
+     "Dark Purple": "Donkerpaars",
+     "Dark Red": "Donkerrood",
+     "Dark Turquoise": "Donkerturquoise",
+     "Dark Yellow": "Donkergeel",
+     "Dashed": "Onderbroken",
+     "Date/time": "Datum/tijd",
+     "Decrease indent": "Inspringing verkleinen",
+     "Default": "Standaard",
+     "Delete accordion": "",
+     "Delete column": "Kolom verwijderen",
+     "Delete row": "Rij verwijderen ",
+     "Delete table": "Tabel verwijderen",
+     "Dimensions": "Afmetingen",
+     "Disc": "Schijf",
+     "Div": "Div",
+     "Document": "Dokument",
+     "Dotted": "Gestippeld",
+     "Double": "Dubbel",
+     "Drop an image here": "Hier een afbeelding neerzetten",
+     "Dropped file type is not supported": "Gesleepte bestandstype wordt niet ondersteund",
+     "Edit": "Bewerken",
+     "Embed": "Insluiten",
+     "Emojis": "Emoji's",
+     "Emojis...": "Emoji's...",
+     "Error": "Fout",
+     "Error: Form submit field collision.": "Fout: Veldconflict bij versturen formulier.",
+     "Error: No form element found.": "Fout: Geen formulierelement gevonden.",
+     "Extended Latin": "Latijn uitgebreid ",
+     "Failed to initialize plugin: {0}": "Niet gelukt om plug-in te initialiseren: {0}",
+     "Failed to load plugin url: {0}": "Niet gelukt om URL plug-in te laden: {0}",
+     "Failed to load plugin: {0} from url {1}": "Niet gelukt om plug-in te laden: {0} vanaf URL {1}",
+     "Failed to upload image: {0}": "Niet gelukt om afbeelding te uploaden: {0}",
+     "File": "Bestand",
+     "Find": "Zoeken",
+     "Find (if searchreplace plugin activated)": "Zoeken (als plug-in voor zoeken/vervangen geactiveerd is)",
+     "Find and Replace": "Zoek en vervang",
+     "Find and replace...": "Zoeken en vervangen...",
+     "Find in selection": "Zoek in selectie",
+     "Find whole words only": "Alleen hele woorden zoeken",
+     "Flags": "Vlaggen",
+     "Focus to contextual toolbar": "Focus op contextuele werkbalk instellen ",
+     "Focus to element path": "Focus op elementenpad instellen ",
+     "Focus to menubar": "Focus op menubalk instellen ",
+     "Focus to toolbar": "Focus op werkbalk instellen ",
+     "Font": "Lettertype",
+     "Font size {0}": "",
+     "Font sizes": "Tekengroottes",
+     "Font {0}": "",
+     "Fonts": "Lettertypes",
+     "Food and Drink": "Eten en drinken",
+     "Footer": "Voettekst",
+     "Format": "Opmaak",
+     "Format {0}": "",
+     "Formats": "Opmaken",
+     "Fullscreen": "Volledig scherm",
+     "G": "G",
+     "General": "Algemeen",
+     "Gray": "Grijs",
+     "Green": "Groen",
+     "Green component": "Groen component",
+     "Groove": "Groef",
+     "Handy Shortcuts": "Handige snelkoppelingen",
+     "Header": "Koptekst ",
+     "Header cell": "Koptekstcel",
+     "Heading 1": "Kop 1",
+     "Heading 2": "Kop 2",
+     "Heading 3": "Kop 3",
+     "Heading 4": "Kop 4",
+     "Heading 5": "Kop 5",
+     "Heading 6": "Kop 6",
+     "Headings": "Koppen",
+     "Height": "Hoogte",
+     "Help": "Help",
+     "Hex color code": "Hex kleurcode",
+     "Hidden": "Verborgen",
+     "Horizontal align": "Horizontaal uitlijnen",
+     "Horizontal line": "Horizontale lijn",
+     "Horizontal space": "Horizontale ruimte",
+     "ID": "ID",
+     "ID should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "ID moet beginnen met een letter en daarna enkel gevolgd door letters, getallen, streepjes, punten, komma's of underscores.",
+     "Image is decorative": "Afbeelding is decoratief",
+     "Image list": "Afbeeldingslijst",
+     "Image title": "Afbeeldingstitel",
+     "Image...": "Afbeelding...",
+     "ImageProxy HTTP error: Could not find Image Proxy": "ImageProxy HTTP fout: Kan geen Image Proxy vinden",
+     "ImageProxy HTTP error: Incorrect Image Proxy URL": "ImageProxy HTTP fout: Incorrecte Image proxy URL",
+     "ImageProxy HTTP error: Rejected request": "ImageProxy HTTP fout: Aanvraag afgewezen",
+     "ImageProxy HTTP error: Unknown ImageProxy error": "ImageProxy HTTP fout: Onbekende ImageProxy fout",
+     "Increase indent": "Inspringing vergroten",
+     "Inline": "Inline",
+     "Insert": "Invoegen",
+     "Insert Template": "Sjabloon invoegen",
+     "Insert accordion": "",
+     "Insert column after": "Kolom invoegen na",
+     "Insert column before": "Kolom invoegen voor ",
+     "Insert date/time": "Datum/tijd invoegen",
+     "Insert image": "Afbeelding invoegen",
+     "Insert link (if link plugin activated)": "Link invoegen (als plug-in voor link geactiveerd is)",
+     "Insert row after": "Rij onder invoegen ",
+     "Insert row before": "Rij boven invoegen",
+     "Insert table": "Tabel invoegen",
+     "Insert template...": "Sjabloon invoegen...",
+     "Insert video": "Video invoegen",
+     "Insert/Edit code sample": "Codevoorbeeld invoegen/bewerken",
+     "Insert/edit image": "Afbeelding invoegen/bewerken",
+     "Insert/edit link": "Link invoeren",
+     "Insert/edit media": "Media invoegen/bewerken",
+     "Insert/edit video": "Video invoegen/bewerken",
+     "Inset": "Inzet",
+     "Invalid hex color code: {0}": "Onjuiste hex kleurcode: {0}",
+     "Invalid input": "Ongeldige invoer",
+     "Italic": "Cursief",
+     "Justify": "Uitvullen",
+     "Keyboard Navigation": "Toetsenbord navigatie",
+     "Language": "Taal",
+     "Learn more...": "Leer meer...",
+     "Left": "Links",
+     "Left to right": "Van links naar rechts",
+     "Light Blue": "Lichtblauw",
+     "Light Gray": "Lichtgrijs",
+     "Light Green": "Lichtgroen",
+     "Light Purple": "Lichtpaars",
+     "Light Red": "Lichtrood",
+     "Light Yellow": "Lichtgeel",
+     "Line height": "Lijnhoogte",
+     "Link list": "Lijst met links",
+     "Link...": "Link...",
+     "List Properties": "Lijsteigenschappen",
+     "List properties...": "Lijsteigenschappen...",
+     "Loading emojis...": "Emoji's laden...",
+     "Loading...": "Laden...",
+     "Lower Alpha": "Kleine letters",
+     "Lower Greek": "Kleine Griekse letters",
+     "Lower Roman": "Kleine Romeinse cijfers",
+     "Match case": "Identieke hoofdletters/kleine letters",
+     "Mathematical": "Wiskundig",
+     "Media poster (Image URL)": "Mediaposter (afbeeldings-url)",
+     "Media...": "Media...",
+     "Medium Blue": "Middelblauw",
+     "Medium Gray": "Middelgrijs",
+     "Medium Purple": "Middelpaars",
+     "Merge cells": "Cellen samenvoegen",
+     "Middle": "Centreren",
+     "Midnight Blue": "Middernachtblauw",
+     "More...": "Meer...",
+     "Name": "Naam",
+     "Navy Blue": "Marineblauw",
+     "New document": "Nieuw document",
+     "New window": "Nieuw venster",
+     "Next": "Volgende",
+     "No": "Nee",
+     "No alignment": "Geen uitlijning",
+     "No color": "Geen kleur",
+     "Nonbreaking space": "Vaste spatie",
+     "None": "Geen",
+     "Numbered list": "Genummerde lijst",
+     "OR": "OF",
+     "Objects": "Objecten",
+     "Ok": "OK",
+     "Open help dialog": "Help-scherm openen",
+     "Open link": "Open koppeling",
+     "Open link in...": "Link openen in...",
+     "Open popup menu for split buttons": "Open het pop-up menu voor gesplitste  knoppen",
+     "Orange": "Oranje",
+     "Outset": "Begin",
+     "Page break": "Pagina-einde",
+     "Paragraph": "Alinea",
+     "Paste": "Plakken",
+     "Paste as text": "Plakken als tekst",
+     "Paste column after": "Plak kolom na",
+     "Paste column before": "Plak kolom voor",
+     "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "Plakken gebeurt nu zonder opmaak. De tekst zal dus zonder opmaak worden geplakt tenzij je deze optie uit zet.",
+     "Paste or type a link": "Een link plakken of typen",
+     "Paste row after": "Rij plakken onder",
+     "Paste row before": "Rij plakken boven",
+     "Paste your embed code below:": "Plak de invoegcode hieronder:",
+     "People": "Personen",
+     "Plugins": "Plug-ins",
+     "Plugins installed ({0}):": "Plug-ins ge\\xefnstalleerd ({0}):",
+     "Powered by {0}": "Mogelijk gemaakt met {0}",
+     "Pre": "Pre",
+     "Preferences": "Voorkeuren",
+     "Preformatted": "Vooraf opgemaakt",
+     "Premium plugins:": "Premium plug-ins:",
+     "Press the Up and Down arrow keys to resize the editor.": "",
+     "Press the arrow keys to resize the editor.": "",
+     "Press {0} for help": "",
+     "Preview": "Voorbeeld",
+     "Previous": "Vorige",
+     "Print": "Afdrukken",
+     "Print...": "Afdrukken... ",
+     "Purple": "Paars",
+     "Quotations": "Citaten",
+     "R": "R",
+     "Range 0 to 255": "Bereik 0 tot 255",
+     "Red": "Rood",
+     "Red component": "Rood component",
+     "Redo": "Opnieuw uitvoeren",
+     "Remove": "Verwijderen",
+     "Remove color": "Kleur verwijderen",
+     "Remove link": "Link verwijderen",
+     "Replace": "Vervangen",
+     "Replace all": "Alle vervangen",
+     "Replace with": "Vervangen door",
+     "Resize": "Formaat wijzigen",
+     "Restore last draft": "Laatste concept herstellen",
+     "Reveal or hide additional toolbar items": "",
+     "Rich Text Area": "Rijk Tekst Gebied",
+     "Rich Text Area. Press ALT-0 for help.": " Gebied met opgemaakte tekst. Druk op ALT-0 voor hulp.",
+     "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "Gebied met opgemaakte tekst. Druk op ALT-F9 voor menu. Druk op ALT-F10 voor werkbalk. Druk op ALT-0 voor help.",
+     "Ridge": "Ribbel",
+     "Right": "Rechts",
+     "Right to left": "Van rechts naar links",
+     "Row": "Rij",
+     "Row clipboard actions": "Rij klembord acties",
+     "Row group": "Rijgroep",
+     "Row header": "Rij kop",
+     "Row properties": "Rijeigenschappen",
+     "Row type": "Rijtype",
+     "Rows": "Rijen",
+     "Save": "Opslaan",
+     "Save (if save plugin activated)": "Opslaan (als plug-in voor opslaan geactiveerd is)",
+     "Scope": "Bereik",
+     "Search": "Zoeken",
+     "Select all": "Alles selecteren",
+     "Select...": "Selecteer...",
+     "Selection": "Selectie",
+     "Shortcut": "Snelkoppeling",
+     "Show blocks": "Blokken weergeven",
+     "Show caption": "Bijschrift weergeven",
+     "Show invisible characters": "Onzichtbare tekens weergeven",
+     "Size": "Formaat",
+     "Solid": "Massief",
+     "Source": "Bron",
+     "Source code": "Broncode",
+     "Special Character": "Speciale tekens",
+     "Special character...": "Speciaal teken...",
+     "Split cell": "Cel splitsen",
+     "Square": "Vierkant",
+     "Start list at number": "Begin lijst met nummer",
+     "Strikethrough": "Doorhalen",
+     "Style": "Stijl",
+     "Subscript": "Subscript",
+     "Superscript": "Superscript",
+     "Switch to or from fullscreen mode": "Overschakelen naar of vanuit de volledig scherm-modus",
+     "Symbols": "Symbolen",
+     "System Font": "Systeemlettertype",
+     "Table": "Tabel",
+     "Table caption": "Tabel bijschrift",
+     "Table properties": "Tabeleigenschappen",
+     "Table styles": "Tabel stijlen",
+     "Template": "Sjabloon",
+     "Templates": "Sjablonen",
+     "Text": "Tekst",
+     "Text color": "Tekstkleur",
+     "Text color {0}": "",
+     "Text to display": "Tekst",
+     "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "De ingevoerde URL lijkt op een e-mailadres. Wil je er het vereiste voorvoegsel mailto: aan toevoegen?",
+     "The URL you entered seems to be an external link. Do you want to add the required http:// prefix?": "De ingevoerde URL verwijst naar een extern adres. Wil je er het vereiste voorvoegsel http:// aan toevoegen?",
+     "The URL you entered seems to be an external link. Do you want to add the required https:// prefix?": "De ingevoerde URL verwijst naar een extern adres. Wilt u er het vereiste voorvoegsel https:// aan toevoegen?",
+     "Title": "Titel",
+     "To open the popup, press Shift+Enter": "Druk op Shift+Enter om de pop-up te openen",
+     "Toggle accordion": "",
+     "Tools": "Extra",
+     "Top": "Boven",
+     "Travel and Places": "Reizen en plaatsen",
+     "Turquoise": "Turkoois",
+     "Underline": "Onderstrepen",
+     "Undo": "Ongedaan maken",
+     "Upload": "Uploaden",
+     "Uploading image": "Afbeelding uploaden",
+     "Upper Alpha": "Hoofdletters",
+     "Upper Roman": "Grote Romeinse cijfers",
+     "Url": "URL",
+     "User Defined": "Door gebruiker gedefinieerd ",
+     "Valid": "Geldig",
+     "Version": "Versie",
+     "Vertical align": "Verticaal uitlijnen",
+     "Vertical space": "Verticale ruimte",
+     "View": "Weergeven",
+     "Visual aids": " Visuele hulpmiddelen",
+     "Warn": "Waarschuwen",
+     "White": "Wit",
+     "Width": "Breedte",
+     "Word count": "Aantal woorden",
+     "Words": "Woorden",
+     "Words: {0}": "Woorden: {0}",
+     "Yellow": "Geel",
+     "Yes": "Ja",
+     "You are using {0}": "Je gebruikt {0}",
+     "You have unsaved changes are you sure you want to navigate away?": "Je hebt niet alles opgeslagen, weet je zeker dat je de pagina wilt verlaten?",
+     "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.": "Jouw browser ondersteunt geen rechtstreekse toegang tot het klembord. Gebruik in plaats daarvan de sneltoetsen Ctrl+X/C/V.",
+     "alignment": "uitlijning",
+     "austral sign": "austral-teken",
+     "cedi sign": "cedi-teken",
+     "colon sign": "colon-teken",
+     "cruzeiro sign": "cruzeiro-teken",
+     "currency sign": "valutateken",
+     "dollar sign": "dollarteken",
+     "dong sign": "dong-teken",
+     "drachma sign": "drachme-teken",
+     "euro-currency sign": "euroteken",
+     "example": "voorbeeld",
+     "formatting": "opmaak",
+     "french franc sign": "franse franc-teken",
+     "german penny symbol": "duitse pfennig-teken",
+     "guarani sign": "guarani-teken",
+     "history": "geschiedenis",
+     "hryvnia sign": "hryvnia-teken",
+     "indentation": "inspringing",
+     "indian rupee sign": "indiaase roepie-teken",
+     "kip sign": "kip-teken",
+     "lira sign": "lire-teken",
+     "livre tournois sign": "livre tournois-teken",
+     "manat sign": "manat-teken",
+     "mill sign": "mill-teken",
+     "naira sign": "naira-teken",
+     "new sheqel sign": "nieuwe sheqel-teken",
+     "nordic mark sign": "noorse mark-teken",
+     "peseta sign": "peseta-teken",
+     "peso sign": "peso-teken",
+     "ruble sign": "roebel-teken",
+     "rupee sign": "roepie-teken",
+     "spesmilo sign": "spesmilo-teken",
+     "styles": "stijlen",
+     "tenge sign": "tenge-teken",
+     "tugrik sign": "tugrik-teken",
+     "turkish lira sign": "turkse lire-teken",
+     "won sign": "won-teken",
+     "yen character": "yen-teken",
+     "yen/yuan character variant one": "yen/yuan variant 1-teken",
+     "yuan character": "yuan-teken",
+     "yuan character, in hong kong and taiwan": "yuan-teken (Hong Kong en Taiwan)",
+     "{0} characters": "{0} karakters",
+     "{0} columns, {1} rows": "",
+     "{0} words": "{0} woorden",
+  },
+);

package/src/modules/plugins/Toast/Toast.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+  import { XMarkIcon } from '~icons';
+  import { statusIconPerType } from '~components/AppAlert';
+
+  import type { ToastOptions, Type } from '~plugins/Toast/types';
+
+  withDefaults(defineProps<{
+    title: string;
+    content?: string;
+    type: Type;
+    options?: ToastOptions;
+  }>(), {
+    content: undefined,
+    options: undefined,
+  });
+
+  const emit = defineEmits<{
+    closeToast: [];
+  }>();
+</script>
+
+<template>
+  <div
+    :class="{ 'cursor-pointer': options?.onClick }"
+    class="relative"
+  >
+    <XMarkIcon
+      class="absolute right-0 top-0 size-4 cursor-pointer"
+      @click.stop="() => emit('closeToast')"
+    />
+
+    <div class="flex items-center space-x-5">
+      <div>
+        <Component
+          :is="statusIconPerType[type]"
+          class="size-7"
+          data-test-icon
+        />
+      </div>
+
+      <div>
+        <p
+          class="pr-6 font-serif text-base font-bold text-zinc-900"
+          data-test-title
+        >
+          {{ title }}
+        </p>
+
+        <p
+          v-if="content"
+          class="font-serif text-base text-zinc-700"
+          data-test-content
+          v-html="content"
+        ></p>
+      </div>
+    </div>
+  </div>
+</template>