adminforth 2.1.0-next.17 → 2.1.0-next.19

package/dist/spa/package-lock.json

@@ -8,6 +8,7 @@
       "name": "spa",
       "version": "0.0.0",
       "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",
@@ -610,6 +611,18 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@iconify-prerendered/vue-flag": {
+      "version": "0.28.1748584105",
+      "resolved": "https://registry.npmjs.org/@iconify-prerendered/vue-flag/-/vue-flag-0.28.1748584105.tgz",
+      "integrity": "sha512-7wJ9UsXJ1h10S4Y/qZsnK3pFkwh6R0542PTv8SykD+80M9i9Iw7xUI9H65Qbcvmk0oNSuHTb/aoFXxqMpuEfnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://www.buymeacoffee.com/kozack/"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@iconify-prerendered/vue-flowbite": {
       "version": "0.23.1714023977",
       "resolved": "https://registry.npmjs.org/@iconify-prerendered/vue-flowbite/-/vue-flowbite-0.23.1714023977.tgz",

package/dist/spa/package.json

@@ -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",

package/dist/spa/src/afcl/CountryFlag.vue

@@ -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>

package/dist/spa/src/afcl/index.ts

@@ -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';
+
 
 

package/dist/spa/src/components/ValueRenderer.vue

@@ -27,9 +27,9 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="record[column.name] === true" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
-      <span v-else class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
+      <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
+      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span
       v-else-if="column.type === 'json' && column.isArray?.enabled"
@@ -39,13 +39,13 @@
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
           :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
           {{ $t('Yes') }}
         </span>
         <span
           v-else-if="column.isArray.itemType === 'boolean'"
           :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
           {{ $t('No') }}
         </span>
         <span

package/dist/spa/src/renderers/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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.1.0-next.17",
+  "version": "2.1.0-next.19",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",