feat: AFCL CountryFlag gets size sm and md and a hairline ring instead of a blurred shadow, classes from the app merge with its own instead of clashing AdminForth/2005

Author: ivictbor

adminforth/design/system.html

@@ -2477,7 +2477,7 @@ <h3 class="t-h3">Storage adapter</h3>
           <span class="fl" role="img" aria-label="Ukraine" style="width: 32px; height: 24px; border-radius: 3px"><span style="background: #0057B7"></span><span style="background: #FFD700"></span></span>
           <span class="fl" role="img" aria-label="Ukraine" style="width: 48px; height: 36px; border-radius: 4px"><span style="background: #0057B7"></span><span style="background: #FFD700"></span></span>
         </div>
-        <div class="tile-cap"><b>Sizes</b><code>16 · 24 · 32 · 48</code></div>
+        <div class="tile-cap"><b>Sizes</b><code>size="sm" 16 · size="md" 32 · class for 24, 48</code></div>
       </div>
       <div class="tile">
         <div class="tile-stage">

adminforth/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>

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

@@ -1738,7 +1738,7 @@ import { Spinner } from '@/afcl'
 
 ## Country Flag
 
-The Country Flag component displays national flags using ISO 3166-1 alpha-2 country codes.
+The Country Flag component displays national flags using ISO 3166-1 alpha-2 country codes. A flag has a hairline edge, so white stripes stay visible on a white page. Only the SVG of a shown flag is downloaded.
 
 <AfclPreview id="country-flag">
 
@@ -1752,6 +1752,19 @@ import { CountryFlag } from '@/afcl'
 
 </AfclPreview>
 
+`size` is `md` (default, 32×24) or `sm` (16×12) for menus, selects and lists:
+
+<AfclPreview id="country-flag-sizes">
+
+```html
+<div class="flex items-center gap-4">
+  <span class="flex items-center gap-2 text-sm"><CountryFlag countryCode="jp" size="sm" />日本語</span>
+  <CountryFlag countryCode="jp" />
+</div>
+```
+
+</AfclPreview>
+
 ## Bar Chart
 
 Under the hood AdminForth uses MIT-licensed [ApexCharts](https://apexcharts.com/). It has very rich variety of options, you can pass