adminforth 2.1.0-next.16 → 2.1.0-next.18

package/dist/servers/express.js

@@ -59,7 +59,7 @@ const respondNoServer = (title, explanation) => {
           display: flex;
           justify-content: center;
           align-items: center;
-          height: 100vh;
+          height: 100dvh;
           flex-direction: column;
         }
       </style>

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/Filters.vue

@@ -6,7 +6,7 @@
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
-      :style="{ height: `calc(100vh ` }"
+      :style="{ height: `calc(100dvh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       {{ $t('Filters') }}

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/dist/spa/src/views/ResourceParent.vue

@@ -1,6 +1,6 @@
 <template>
   <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
-    :class="limitHeightToPage ? 'h-[calc(100vh-3.5rem)]': undefined"
+    :class="limitHeightToPage ? 'h-[calc(100dvh-3.5rem)]': undefined"
   >
     <RouterView/>
   </div>

package/package.json

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