adminforth 1.3.54-next.7 → 1.3.54-next.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.54-next.7",
+  "version": "1.3.54-next.8",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/package-lock.json

@@ -34,6 +34,8 @@
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
+        "flag-icons": "^7.2.3",
+        "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.38",
         "sass": "^1.77.2",
@@ -1906,6 +1908,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2371,6 +2380,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
+      "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -2622,6 +2638,19 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.12.0.tgz",
+      "integrity": "sha512-NDFf5j/raA5JrcPT/NcHP3RUMH7TkdkxQKAKdvDlgb+MS296WJzzqvV0Y5uwavSm7A6oYvBeSV0AxoHdDiHIiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

package/spa/package.json

@@ -38,6 +38,8 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "flag-icons": "^7.2.3",
+    "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "sass": "^1.77.2",

package/spa/src/renderers/CompactUUID.vue

@@ -1,7 +1,8 @@
 <template>
   <span class="flex items-center"  
-      :data-tooltip-target="`tooltip-${id}`"
-      data-tooltip-placement="bottom">
+    :data-tooltip-target="`tooltip-${id}`"
+    data-tooltip-placement="top"
+  >
     {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary"/>
 
     <div :id="`tooltip-${id}`" role="tooltip"

package/spa/src/renderers/CountryFlag.vue

@@ -0,0 +1,69 @@
+<template>
+  <span class="flex items-center">
+    <span 
+      :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+      :data-tooltip-target="`tooltip-${id}`"
+    ></span>
+
+    <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+    
+    <div 
+      v-if="!meta.showCountryName && countryName"
+      :id="`tooltip-${id}`" role="tooltip"
+      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+    >
+      {{ countryName }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+  
+</template>
+
+<script setup>  
+
+import { computed, ref, onMounted } from 'vue';
+import { initFlowbite } from 'flowbite';
+import 'flag-icons/css/flag-icons.min.css';
+import isoCountries from 'i18n-iso-countries';
+import enLocal from 'i18n-iso-countries/langs/en.json';
+
+isoCountries.registerLocale(enLocal);
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+const countryIsoLow = computed(() => {
+  return props.record[props.column.name]?.toLowerCase();
+});
+
+const countryName = computed(() => {
+  if (!countryIsoLow.value) {
+    return '';
+  }
+  return isoCountries.getName(countryIsoLow.value, 'en');
+});
+
+</script>
+
+<style scoped lang="scss">
+
+.flag-icon {
+  width: 2rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+
+  // border radius  for background
+  border-radius: 3px;
+  // add some silkiness to the flag
+  box-shadow: inset -1px -1px 2px 0px rgba(50 50 50 / 0.3), inset 1px 1px 2px 0px rgba(255 255 255 / 0.3);
+}
+
+</style>

package/spa/src/views/ListView.vue

@@ -21,7 +21,6 @@
         @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
-        data-tooltip-placement="bottom"
         class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>