@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { PackageIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    icon: { type: [Object, Array], default: () => PackageIcon },
+    title: { type: String, default: '' },
+    description: { type: String, default: '' },
+    titleKey: { type: String, default: '' },
+    descriptionKey: { type: String, default: '' }
+});
+
+const { t } = useI18n();
+
+const hasCustomCopy = computed(() => Boolean(props.title || props.description || props.titleKey || props.descriptionKey));
+const resolvedTitle = computed(() => props.title
+    || (props.titleKey ? t(props.titleKey) : '')
+    || (!hasCustomCopy.value ? t('uiVintage.common.empty.title') : '')
+    || (!hasCustomCopy.value ? 'Nothing here yet' : ''));
+const resolvedDescription = computed(() => props.description
+    || (props.descriptionKey ? t(props.descriptionKey) : '')
+    || (!hasCustomCopy.value ? t('uiVintage.common.empty.description') : '')
+    || (!hasCustomCopy.value ? 'There is no content to show right now.' : ''));
+</script>
+
+<template>
+    <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
+        <CardContent class="flex flex-col items-center justify-center !p-0 text-center">
+            <!-- Icon -->
+            <div class="flex items-center justify-center text-4xl text-[var(--text-secondary-light)] opacity-40 dark:text-[var(--text-secondary-dark)]">
+                <HugeiconsIcon :icon="props.icon" class="size-10" />
+            </div>
+
+            <!-- Title -->
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] md:text-lg">
+                {{ resolvedTitle }}
+            </h3>
+
+            <!-- Description -->
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] md:text-sm">
+                {{ resolvedDescription }}
+            </p>
+
+            <!-- Action slot -->
+            <div v-if="$slots.action">
+                <slot name="action" />
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/{dist/components/empty-state-card/index.d.ts → src/components/empty-state-card/index.ts}

@@ -1,2 +1,2 @@
 export { default } from './EmptyStateCard.vue';
-export { default as EmptyStateCard } from './EmptyStateCard.vue';
+export { default as EmptyStateCard } from './EmptyStateCard.vue';

package/src/components/error-page/ErrorPage.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { computed } from "vue";
+import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardFooter } from "../ui/card";
+import { cn } from "../../lib/utils";
+
+interface ErrorPageProps {
+    statusCode?: number | string;
+    label?: string;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    showBackground?: boolean;
+    showDefaultAction?: boolean;
+    class?: HTMLAttributes["class"];
+    cardClass?: HTMLAttributes["class"];
+    contentClass?: HTMLAttributes["class"];
+    footerClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<ErrorPageProps>(), {
+    statusCode: 500,
+    label: "Error",
+    title: undefined,
+    message: undefined,
+    actionLabel: "Go back",
+    showBackground: true,
+    showDefaultAction: true,
+    class: undefined,
+    cardClass: undefined,
+    contentClass: undefined,
+    footerClass: undefined
+});
+
+// Emits
+const emit = defineEmits<{
+    action: [];
+}>();
+
+const resolvedStatusCode = computed(() => String(props.statusCode ?? 500));
+
+// Resolve the heading copy.
+const resolvedTitle = computed(() => {
+    if (props.title) return props.title;
+    if (resolvedStatusCode.value === "404") return "Page not found";
+    return "Something went wrong";
+});
+
+// Resolve the supporting message.
+const resolvedMessage = computed(() => {
+    if (props.message) return props.message;
+    if (resolvedStatusCode.value === "404") return "The page you requested could not be found or may have been moved.";
+    return "An unexpected error interrupted the current flow. Please try again or go back to a safe page.";
+});
+
+// Emit the default action.
+const handleAction = () => {
+    emit("action");
+};
+</script>
+
+<template>
+    <div :class="cn('relative min-h-screen bg-[var(--bg-main-light)] text-[var(--text-primary-light)] dark:bg-[var(--bg-main-dark)] dark:text-[var(--text-primary-dark)]', props.class)">
+        <!-- Decorative background -->
+        <BackgroundGrid v-if="props.showBackground" />
+
+        <!-- Main content -->
+        <main class="relative z-10 mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
+            <div class="w-full max-w-xl">
+                <!-- Toolbar -->
+                <div v-if="$slots.toolbar" class="mb-4 flex justify-end gap-3">
+                    <slot name="toolbar" />
+                </div>
+
+                <!-- Error card -->
+                <Card :class="props.cardClass">
+                    <CardContent :class="cn('space-y-8', props.contentClass)">
+                        <!-- Brand -->
+                        <slot name="brand" />
+
+                        <!-- Error copy -->
+                        <div>
+                            <!-- Status code -->
+                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]">
+                                {{ props.label }} {{ resolvedStatusCode }}
+                            </div>
+
+                            <!-- Title -->
+                            <h1 class="text-2xl font-bold mt-3">
+                                {{ resolvedTitle }}
+                            </h1>
+
+                            <!-- Message -->
+                            <p class="text-sm leading-7 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] sm:text-base mt-4">
+                                {{ resolvedMessage }}
+                            </p>
+                        </div>
+                    </CardContent>
+
+                    <!-- Actions -->
+                    <CardFooter :class="cn('items-start flex-col gap-3 sm:flex-row sm:items-center', props.footerClass)">
+                        <slot name="actions" :on-action="handleAction">
+                            <Button v-if="props.showDefaultAction" variant="primary" @click="handleAction">
+                                <HugeiconsIcon :icon="ArrowLeft01Icon" :stroke-width="1.8" class="size-4" />
+                                {{ props.actionLabel }}
+                            </Button>
+                        </slot>
+                    </CardFooter>
+                </Card>
+            </div>
+        </main>
+    </div>
+</template>

package/src/components/error-page/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ErrorPage.vue";
+export { default as ErrorPage } from "./ErrorPage.vue";

package/src/components/info-card/InfoCard.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { Card, CardContent, CardText } from "../ui/card"
+
+// Props
+const props = defineProps({
+    icon: { type: Object, required: true },
+    title: { type: String, default: "" },
+    description: { type: [String, Number], default: "" }
+})
+</script>
+
+<template>
+    <Card class="flex flex-col items-center !p-4 sm:flex-row">
+        <CardContent class="flex w-full flex-col items-center gap-0 !p-0 sm:flex-row">
+            <!-- Icon -->
+            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0 sm:mb-0 sm:mr-4">
+                <HugeiconsIcon :icon="props.icon" class="size-5" />
+            </Card>
+
+            <!-- Content -->
+            <div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
+                <div class="flex flex-col w-full gap-2 sm:gap-1">
+                    <!-- Title -->
+                    <span class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                        {{ props.title }}
+                    </span>
+
+                    <!-- Description -->
+                    <CardText v-if="props.description">
+                        {{ props.description }}
+                    </CardText>
+                </div>
+
+                <!-- Right slot for custom elements -->
+                <div v-if="$slots.right" class="ml-4">
+                    <slot name="right" />
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/components/info-card/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InfoCard.vue';
+export { default as InfoCard } from './InfoCard.vue';

package/src/components/landing/index.ts

@@ -0,0 +1,6 @@
+export { default } from "./landing-navbar";
+export { default as LandingContent } from "./landing-content";
+export { default as LandingShell } from "./landing-shell";
+export { default as LandingNavbar } from "./landing-navbar";
+export { default as LandingFooter } from "./landing-footer";
+export type { LandingFooterLink, LandingFooterSection } from "./landing-footer";

package/src/components/landing/landing-content/LandingContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../lib/utils";
+
+interface LandingContentProps {
+    class?: HTMLAttributes["class"];
+}
+
+// Props
+const props = defineProps<LandingContentProps>();
+</script>
+
+<template>
+    <div :class="cn('mx-auto w-full max-w-6xl px-3 py-6 sm:px-6 lg:px-8 lg:py-14', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/landing/landing-content/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LandingContent.vue";
+export { default as LandingContent } from "./LandingContent.vue";

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { NuxtImg } from "#components";
+import type { Component, HTMLAttributes } from "vue";
+import { FavouriteIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { cn } from "../../../lib/utils";
+
+export interface LandingFooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    to?: unknown;
+    newTab?: boolean;
+}
+
+export interface LandingFooterSection {
+    id: string;
+    title: string;
+    links: LandingFooterLink[];
+}
+
+interface LandingFooterProps {
+    appName: string;
+    appLogo?: string;
+    appDescription?: string;
+    sections?: LandingFooterSection[];
+    linkComponent?: Component | string;
+    authorName?: string;
+    authorLink?: string;
+    year?: number;
+    showBottomBar?: boolean;
+    class?: HTMLAttributes["class"];
+    containerClass?: HTMLAttributes["class"];
+    brandClass?: HTMLAttributes["class"];
+    sectionsClass?: HTMLAttributes["class"];
+    bottomBarClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<LandingFooterProps>(), {
+    appDescription: "",
+    sections: () => [],
+    linkComponent: "a",
+    authorName: "",
+    authorLink: "",
+    year: () => new Date().getFullYear(),
+    showBottomBar: true
+});
+
+const { t } = useI18n();
+const hasSingleSection = computed(() => props.sections.length === 1);
+
+// Get link props based on the type of link component and whether the link should open in a new tab
+const getLinkProps = (link: LandingFooterLink) => {
+    const sharedProps = link.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+
+    // If the link component is an anchor, use href. Otherwise, use to for router links.
+    if (props.linkComponent === "a") {
+        return {
+            href: link.href ?? "#",
+            ...sharedProps
+        };
+    }
+
+    // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
+    return {
+        to: link.to ?? link.href ?? "/",
+        ...sharedProps
+    };
+};
+</script>
+
+<template>
+    <footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
+        <div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
+            <div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
+                <!-- Brand section -->
+                <div :class="cn('max-w-md flex-1', props.brandClass)">
+                    <!-- App logo and name -->
+                    <div class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground">
+                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" class="size-8 shrink-0 object-contain" />
+                        <span>{{ props.appName }}</span>
+                    </div>
+
+                    <!-- App description -->
+                    <p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">
+                        {{ props.appDescription }}
+                    </p>
+                </div>
+
+                <!-- Single link section -->
+                <div v-if="hasSingleSection" :class="cn('min-w-0 md:flex md:justify-end', props.sectionsClass)">
+                    <div class="md:text-right">
+                        <!-- Section title -->
+                        <h3 class="mb-4 font-semibold text-foreground">
+                            {{ props.sections[0]?.title }}
+                        </h3>
+
+                        <!-- Section links -->
+                        <ul class="space-y-3 text-xs sm:text-sm">
+                            <li v-for="link in props.sections[0]?.links" :key="link.id">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                    {{ link.label }}
+                                </component>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Link sections -->
+                <div v-else class="flex flex-col gap-8 md:max-w-[60%] md:flex-row md:flex-wrap md:justify-end md:gap-16">
+                    <div v-for="section in props.sections" :key="section.id" :class="cn('min-w-28', props.sectionsClass)">
+                        <!-- Section title -->
+                        <h3 class="mb-4 font-semibold text-foreground">
+                            {{ section.title }}
+                        </h3>
+
+                        <!-- Section links -->
+                        <ul class="space-y-3 text-xs sm:text-sm">
+                            <li v-for="link in section.links" :key="link.id">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                    {{ link.label }}
+                                </component>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Bottom bar -->
+            <div v-if="props.showBottomBar" :class="cn('mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs md:text-sm text-muted-foreground md:flex-row', props.bottomBarClass)">
+                <!-- Copyright -->
+                <div>
+                    &copy; {{ props.year }} {{ props.appName }}. {{ t("uiVintage.footer.allRightsReserved") }}
+                </div>
+
+                <!-- Author -->
+                <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
+                    <span>{{ t("uiVintage.footer.madeWith") }}</span>
+                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-700 dark:text-red-400" />
+                    <span>{{ t("uiVintage.footer.by") }}</span>
+                    <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
+                        {{ props.authorName }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>

package/src/components/landing/landing-footer/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./LandingFooter.vue";
+export { default as LandingFooter } from "./LandingFooter.vue";
+export type { LandingFooterLink, LandingFooterSection } from "./LandingFooter.vue";

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { NuxtImg } from "#components";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../lib/utils";
+
+interface LandingNavbarProps {
+    appName?: string;
+    appLogo?: string;
+    appLinkTo?: string;
+    class?: HTMLAttributes["class"];
+    containerClass?: HTMLAttributes["class"];
+    leftClass?: HTMLAttributes["class"];
+    rightClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<LandingNavbarProps>(), {
+    appName: "",
+    appLogo: "",
+    appLinkTo: "/"
+});
+</script>
+
+<template>
+    <header :class="cn('z-30 flex h-20 w-full flex-wrap sm:flex-nowrap sm:justify-start', props.class)">
+        <nav :class="cn('mx-auto flex max-w-6xl basis-full items-center justify-between px-3 sm:px-6 lg:px-8', props.containerClass)">
+            <!-- Left-aligned content -->
+            <div :class="cn('flex items-center', props.leftClass)">
+                <slot name="left">
+                    <a :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity hover:opacity-80">
+                        <!-- App logo -->
+                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" preload class="size-11 sm:size-9 shrink-0 object-contain" />
+
+                        <!-- App name -->
+                        <span v-if="props.appName" class="hidden sm:!inline text-xl font-bold tracking-tight text-foreground">
+                            {{ props.appName }}
+                        </span>
+                    </a>
+                </slot>
+            </div>
+
+            <!-- Right-aligned content -->
+            <div :class="cn('flex items-center justify-end gap-2 sm:gap-3', props.rightClass)">
+                <slot name="right" />
+            </div>
+        </nav>
+    </header>
+</template>

package/src/components/landing/landing-navbar/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LandingNavbar.vue";
+export { default as LandingNavbar } from "./LandingNavbar.vue";

package/src/components/landing/landing-shell/LandingShell.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, useSlots } from "vue";
+import BackgroundGrid from "../../background-grid/BackgroundGrid.vue";
+import { cn } from "../../../lib/utils";
+
+interface LandingShellProps {
+    showBackground?: boolean;
+    rootClass?: HTMLAttributes["class"];
+    navbarClass?: HTMLAttributes["class"];
+    mainClass?: HTMLAttributes["class"];
+    footerClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<LandingShellProps>(), {
+    showBackground: true
+});
+
+const slots = useSlots();
+
+// Determine if any structured slots are provided.
+const hasStructuredSlots = computed(() => {
+    return Boolean(slots.navbar || slots.content || slots.footer);
+});
+</script>
+
+<template>
+    <div :class="cn('relative flex min-h-screen flex-col bg-background text-foreground', props.rootClass)">
+        <!-- Background grid -->
+        <BackgroundGrid v-if="props.showBackground" />
+
+        <!-- If structured slots are provided, render them -->
+        <template v-if="hasStructuredSlots">
+            <!-- Navbar -->
+            <header :class="cn('relative z-10', props.navbarClass)">
+                <slot name="navbar" />
+            </header>
+
+            <!-- Main content -->
+            <main :class="cn('relative z-10 flex-1', props.mainClass)">
+                <slot name="content">
+                    <slot />
+                </slot>
+            </main>
+
+            <!-- Footer -->
+            <footer :class="cn('relative z-10', props.footerClass)">
+                <slot name="footer" />
+            </footer>
+        </template>
+
+        <!-- If no structured slots, render default slot directly -->
+        <template v-else>
+            <slot />
+        </template>
+    </div>
+</template>

package/src/components/landing/landing-shell/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LandingShell.vue";
+export { default as LandingShell } from "./LandingShell.vue";

package/src/components/language-flag/LanguageFlag.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
+
+// Single source of truth for supported flag component loaders
+const supportedFlagLoaders = {
+    en: () => import('./flags/EnglishFlag.vue'),
+    it: () => import('./flags/ItalianFlag.vue'),
+    fr: () => import('./flags/FrenchFlag.vue'),
+    es: () => import('./flags/SpanishFlag.vue'),
+    de: () => import('./flags/GermanFlag.vue'),
+    pt: () => import('./flags/PortugueseFlag.vue'),
+    zh: () => import('./flags/ChineseFlag.vue'),
+    ja: () => import('./flags/JapaneseFlag.vue'),
+    ru: () => import('./flags/RussianFlag.vue')
+} as const;
+
+type SupportedLanguageCode = keyof typeof supportedFlagLoaders;
+const asyncFlagComponentCache = new Map<SupportedLanguageCode, Component>();
+
+// Type guard to ensure a code is one of the supported flag codes
+const isSupportedLanguageCode = (code: string): code is SupportedLanguageCode => {
+    return code in supportedFlagLoaders;
+};
+
+// Load and cache the async component for a given supported language code
+const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
+    // Check cache first
+    const cachedComponent = asyncFlagComponentCache.get(code);
+    if (cachedComponent) {
+        return cachedComponent;
+    }
+
+    // Load the async component and cache it
+    const asyncComponent = defineAsyncComponent(supportedFlagLoaders[code]);
+    asyncFlagComponentCache.set(code, asyncComponent);
+    return asyncComponent;
+};
+
+// Props
+const props = defineProps({
+    code: { type: String, default: 'en' }
+});
+
+// Get the appropriate flag component based on the code prop
+const flagComponent = computed(() => {
+    const resolvedCode = isSupportedLanguageCode(props.code) ? props.code : 'en';
+    return getAsyncFlagComponent(resolvedCode);
+});
+</script>
+
+<template>
+    <component :is="flagComponent" v-bind="$attrs" />
+</template>

package/src/components/language-flag/flags/ChineseFlag.vue

@@ -0,0 +1,10 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <path fill="#ee1c25" d="M0 0h640v480H0z" />
+        <path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(.55555 0 0 .55555 53.333 53.333)" />
+        <path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(-.0955 -.15916 .15916 -.0955 240.3 48)" />
+        <path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(-.0262 -.18395 .18395 -.0262 288 95.8)" />
+        <path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(.0511 -.17849 .17849 .0511 288 168)" />
+        <path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(.1161 -.14497 .14497 .1161 240 216)" />
+    </svg>
+</template>

package/src/components/language-flag/flags/EnglishFlag.vue

@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <path fill="#012169" d="M0 0h640v480H0z" />
+        <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z" />
+        <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z" />
+        <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z" />
+        <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z" />
+    </svg>
+</template>

package/src/components/language-flag/flags/FrenchFlag.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" aria-hidden="true" focusable="false">
+        <rect width="1" height="2" x="0" fill="#002654" />
+        <rect width="1" height="2" x="1" fill="#ffffff" />
+        <rect width="1" height="2" x="2" fill="#ce1126" />
+    </svg>
+</template>

package/src/components/language-flag/flags/GermanFlag.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" aria-hidden="true" focusable="false">
+        <rect width="5" height="1" y="0" fill="#000000" />
+        <rect width="5" height="1" y="1" fill="#dd0000" />
+        <rect width="5" height="1" y="2" fill="#ffce00" />
+    </svg>
+</template>

package/src/components/language-flag/flags/ItalianFlag.vue

@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <g fill-rule="evenodd" stroke-width="1pt">
+            <path fill="#fff" d="M0 0h640v480H0z" />
+            <path fill="#009246" d="M0 0h213.3v480H0z" />
+            <path fill="#ce2b37" d="M426.7 0H640v480H426.7z" />
+        </g>
+    </svg>
+</template>

package/src/components/language-flag/flags/JapaneseFlag.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <path fill="#fff" d="M0 0h640v480H0z" />
+        <circle cx="320" cy="240" r="112" fill="#bc002d" />
+    </svg>
+</template>