adminforth 4.4.0 → 4.5.0

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

@@ -1,14 +1,48 @@
 <template>
-  <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
-    <img v-if="flagUrl" :src="flagUrl" :alt="countryCode" class="flag-icon h-full object-contain rounded-sm"/>
+  <span v-bind="restAttrs" :class="rootClasses">
+    <!-- a hairline edge keeps white stripes visible on a white page -->
+    <img
+      v-if="flagUrl"
+      :src="flagUrl"
+      :alt="countryCode"
+      class="block w-full h-full object-cover ring-1 ring-black/10 dark:ring-white/10"
+      :class="IMAGE_RADIUS[size]"
+    />
     <span v-else-if="getFlagUrl && countryCode">{{ countryCode }}</span>
-  </div>
+  </span>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef } from 'vue';
+import { computed, shallowRef, useAttrs } from 'vue';
+import { type ClassNameValue } from 'tailwind-merge';
+import { mergeClasses } from './classMerge';
 
-const props = defineProps(['countryCode']);
+type CountryFlagSize = 'sm' | 'md';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  countryCode?: string,
+  // sm is 16×12 for menus, lists and selects, md is 32×24
+  size?: CountryFlagSize,
+}>(), {
+  size: 'md',
+});
+
+const SIZES: Record<CountryFlagSize, string> = { sm: 'w-4 h-3', md: 'w-8 h-6' };
+const IMAGE_RADIUS: Record<CountryFlagSize, string> = { sm: 'rounded-[2px]', md: 'rounded-[3px]' };
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const rootClasses = computed(() => mergeClasses(
+  'afcl-country-flag inline-flex shrink-0 items-center justify-center',
+  SIZES[props.size],
+  attrs.class as ClassNameValue,
+));
 
 // the map of flag URLs is loaded when a flag is shown for the first time
 const getFlagUrl = shallowRef<(countryCode: string) => string | undefined>();
@@ -18,12 +52,3 @@ import('./countryFlagUrls').then((module) => {
 
 const flagUrl = computed(() => props.countryCode && getFlagUrl.value?.(props.countryCode));
 </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;
-        width: auto;
-    }
-</style>

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

@@ -12,7 +12,7 @@
       >
         <RouterLink
           v-if="foreignResource && foreignResource?.pk"
-          class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
+          class="font-medium hover:underline whitespace-nowrap"
           :to="{
             name: 'resource-show',
             params: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",