Merge pull request #229 from devforth/country-flag-component

feat: Add country flag to adminforth components library

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -861,6 +861,22 @@ Spinner component is used to display a loading state for a component.
   </div>
 </div>
 
+## Country Flag
+
+The Country Flag component displays national flags using ISO 3166-1 alpha-2 country codes.
+
+<div class="split-screen" >
+  <div>
+  ```html
+  <CountryFlag countryCode="ua" />
+  ```
+  </div>
+  <div>
+  ![Country Flag](image-92.png)
+  </div>
+</div>
+
+
 ## Bar Chart
 
 Under the hood AdminForth uses MIT-licensed [ApexCharts](https://apexcharts.com/). It has very rich variety of options, you can pass
@@ -1454,7 +1470,7 @@ import { PieChart } from '@/afcl'
 //diff-add
           offset: -10, // Moves labels closer to or further from the slices
 //diff-add
-          minAngleToShowLabel: 10, // Ensures that small slices don’t show labels
+          minAngleToShowLabel: 10, // Ensures that small slices don't show labels
 //diff-add
         },
 //diff-add
@@ -1686,7 +1702,3 @@ import { MixedChart } from '@/afcl'
   </div>
 </div>
 
-
-
-
-

adminforth/documentation/docs/tutorial/03-Customization/image-92.png

@@ -13,6 +13,7 @@
     "i18n:extract": "echo '{}' > i18n-empty.json && vue-i18n-extract report --vueFiles './src/**/*.?(js|vue)' --output ./i18n-messages.json --languageFiles 'i18n-empty.json' --add"
   },
   "dependencies": {
+    "@iconify-prerendered/vue-flag": "^0.28.1748584105",
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
     "@unhead/vue": "^1.9.12",
     "@vueuse/core": "^10.10.0",

adminforth/spa/package-lock.json

@@ -0,0 +1,26 @@
+<template>
+    <component v-if="getFlagComponent(countryCode)" class="flag-icon rounded-sm" :is="getFlagComponent(countryCode)" />
+    <span v-else-if="countryCode">{{ countryCode }}</span>
+</template>
+
+<script setup lang="ts">
+import * as FlagIcons from '@iconify-prerendered/vue-flag';
+
+defineProps(['countryCode']);
+
+const getFlagComponent = (countryCode: string) => {
+        if (!countryCode) return null;
+        
+        const normalizedCode = countryCode.charAt(0).toUpperCase() + countryCode.slice(1).toLowerCase();
+        const iconName = `Icon${normalizedCode}4x3`; // 4:3 aspect ratio flags
+        return FlagIcons[iconName as keyof typeof FlagIcons] || null;
+    };
+</script>
+
+<style scoped>
+    .flag-icon {
+        box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
+            inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
+            0px 0px 3px #00000030;
+    }
+</style>

adminforth/spa/package.json

@@ -18,5 +18,7 @@ export { default as Spinner } from './Spinner.vue';
 export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as MixedChart } from './MixedChart.vue';
+export { default as CountryFlag } from './CountryFlag.vue';
+
 
 

adminforth/spa/src/afcl/CountryFlag.vue

@@ -1,9 +1,7 @@
 <template>
     <Tooltip>
       <span class="flex items-center">
-        <span 
-          :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
-        ></span>
+        <CountryFlag class="w-[1.6rem] h-[1.2rem]" :countryCode="countryIsoLow" />
         <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
       </span>
 
@@ -16,10 +14,10 @@
 <script setup>  
 
 import { computed, ref, onMounted } from 'vue';
-import 'flag-icons/css/flag-icons.min.css';
 import isoCountries from 'i18n-iso-countries';
 import enLocal from 'i18n-iso-countries/langs/en.json';
 import Tooltip from '@/afcl/Tooltip.vue';
+import CountryFlag from '@/afcl/CountryFlag.vue';
 
 isoCountries.registerLocale(enLocal);
 
@@ -47,19 +45,3 @@ const countryName = computed(() => {
 });
 
 </script>
-
-<style scoped lang="scss">
-
-.flag-icon {
-  width: 1.6rem;
-  height: 1.2rem;
-  flex-shrink: 0;
-
-  // border radius  for background
-  border-radius: 2px;
-  box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
-    inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
-    0px 0px 3px #00000030;
-}
-
-</style>