feat(ui): copy flags depends on configuration (#19)

packages/nuxt-typo3-theme/package.json

@@ -46,6 +46,7 @@
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-links": "^6.3.8",
     "@storybook/vue": "^6.3.8",
+    "@types/fs-extra": "^9.0.13",
     "@types/jest": "^24.0.19",
     "@types/node": "^14.14.31",
     "@vue/cli-plugin-babel": "^4.5.13",
@@ -63,6 +64,7 @@
     "eslint-plugin-vuejs-accessibility": "^0.6.1",
     "flush-promises": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
+    "fs-extra": "^10.0.0",
     "minimist": "^1.2.5",
     "nuxt": "^2.15.8",
     "prettier-standard": "^16.4.1",

packages/nuxt-typo3-theme/src/components/CwHeader/CwHeader.vue

@@ -2,7 +2,7 @@
   <UiNavbar
     v-if="navigation"
     :links="navigation"
-    :languages="languages"
+    :languages="languages && languages.length > 1 ? languages : []"
     with-container
   >
     <template #logo>
@@ -13,6 +13,7 @@
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
 import { mapGetters } from 'vuex'
+import type { RootState } from '../../store/index'
 import UiNavbar from 'nuxt-typo3-theme/src/components/UiNavbar'
 import UiLogo from '../UiLogo'
 
@@ -23,7 +24,17 @@ export default defineComponent({
     UiLogo
   },
   computed: {
-    ...mapGetters(['navigation', 'languages'])
+    ...mapGetters(['navigation']),
+    languages () {
+      const state = this.$store.state as RootState
+      let languages = state.typo3?.initial?.languages
+      if (languages) {
+        languages = languages.filter(link =>
+          this.$typo3?.i18n?.locales?.includes(link.twoLetterIsoCode)
+        )
+      }
+      return languages
+    }
   }
 })
 </script>

packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue

@@ -15,7 +15,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from '@vue/composition-api'
 import type { Breadcrumbs } from './UiBreadcrumbsList.types'
-
 import UiIcon from '../UiIcon'
 
 export default defineComponent({

packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationLanguage/UiNavigationLanguage.vue

@@ -45,16 +45,13 @@ export default defineComponent({
     preset: {
       type: Object as PropType<Record<string, string>>,
       default: () => ({
-        en: require(`svg-country-flags/svg/us.svg`)
+        en: require(`svg-country-flags/svg/gb.svg`)
       })
     }
   },
   computed: {
     languages (): UiNavigationLanguageLinks {
-      let links = [...this.links]
-      links = links.filter(link =>
-        this.$typo3.i18n.locales.includes(link.twoLetterIsoCode)
-      )
+      const links = [...this.links]
       const current = {
         ...links.find((item, key) => {
           if (item.active) {
@@ -79,7 +76,7 @@ export default defineComponent({
         ) {
           return this.preset[twoLetterIsoCode]
         }
-        return require(`svg-country-flags/svg/${twoLetterIsoCode}.svg`)
+        return require(`assets/flags/${twoLetterIsoCode}.svg`)
       } catch {
         return undefined
       }

packages/nuxt-typo3-theme/src/nuxt/module.ts

@@ -2,13 +2,15 @@ import { Module } from '@nuxt/types'
 import { resolve } from 'path'
 import defu from 'defu'
 import type { TYPO3ThemeOptions } from './module.types'
+import fs from 'fs-extra'
 
 const defaults: TYPO3ThemeOptions = {
   sources: true,
   css: true,
   googleFonts: true,
   layouts: true,
-  overrideLocalComponents: false
+  overrideLocalComponents: false,
+  flags: true
 }
 
 const NuxtTypo3Theme: Module = async function (options: TYPO3ThemeOptions) {
@@ -25,6 +27,17 @@ const NuxtTypo3Theme: Module = async function (options: TYPO3ThemeOptions) {
     this.nuxt.options.css.push('nuxt-typo3-theme/src/styles/core.scss')
   }
 
+  if (this.nuxt?.options?.typo3?.i18n?.locales) {
+    this.nuxt.options.typo3.i18n.locales.forEach((locale: string) => {
+      try {
+        fs.copy(
+          require.resolve(`svg-country-flags/svg/${locale}.svg`),
+          `assets/flags/${locale}.svg`
+        )
+      } catch (err: unknown) {}
+    })
+  }
+
   if (options.googleFonts && !modulesList.includes('@nuxtjs/google-fonts')) {
     this.addModule([
       '@nuxtjs/google-fonts',

packages/nuxt-typo3-theme/src/nuxt/module.types.ts

@@ -9,6 +9,8 @@ interface TYPO3ThemeOptions {
   layouts?: boolean | string[]
   /** use global components to override locals in specific scope */
   overrideLocalComponents?: boolean | string[]
+  /** copy flags from svg-country-flags */
+  flags?: boolean
 }
 
 export { TYPO3ThemeOptions }

packages/nuxt-typo3-theme/src/store/index.ts

@@ -1,7 +1,7 @@
 import {
   Breadcrumb,
   Breadcrumbs
-} from '@/components/UiBreadcrumbsList/UiBreadcrumbsList.types'
+} from '../components/UiBreadcrumbsList/UiBreadcrumbsList.types'
 export interface Navigation {
   active: number
   current: number
@@ -77,7 +77,7 @@ export interface Typo3 {
   initial: Initial
   layout: string
   locale: string
-  locales: null
+  locales: string[] | null
   page: Page
   additionalBreadcrumb: Breadcrumb
 }

yarn.lock

@@ -5879,6 +5879,13 @@
   dependencies:
     "@types/webpack" "*"
 
+"@types/fs-extra@^9.0.13":
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
+  integrity sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/glob-base@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@types/glob-base/-/glob-base-0.3.0.tgz#a581d688347e10e50dd7c17d6f2880a10354319d"