@tekkare/romulus 0.1.165 → 0.1.166

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.164",
+  "version": "0.1.165",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/Flag.vue

@@ -6,11 +6,13 @@
   affiche « FR » dans deux carres. Le detail est dans internal/flags.ts, qui
   porte aussi la table.
 
-  Un code absent de la table retombe sur l'emoji : le chrome montre quelque
-  chose partout, et seul le systeme qui ne sait pas le rendre est degrade.
+  Un code absent de la table retombe d'abord sur `flags-world.ts`, les 173 pays
+  repris d'Auriga, charges a la demande : une app qui ne montre que cinq pays
+  n'embarque pas les 147 Ko du monde entier. Si le code n'y est pas non plus,
+  l'emoji reste le dernier recours.
 -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, shallowRef, watchEffect } from 'vue'
 import { RM_FLAGS, rmFlagEmoji } from '../internal/flags'
 
 const props = withDefaults(defineProps<{
@@ -22,25 +24,45 @@ const props = withDefaults(defineProps<{
   title?: string
   /** Coins arrondis. Un drapeau a angles vifs jure a cote d'une icone. */
   rounded?: boolean
+  /**
+   * Pastille ronde plutot que rectangle. Pour une tuile de pays, ou le drapeau
+   * est le sujet et non une mention a cote d'un libelle : le dessin est recadre
+   * au carre puis decoupe au disque.
+   */
+  circle?: boolean
 }>(), {
   height: 14,
   title: undefined,
   rounded: true,
+  circle: false,
 })
 
 const key = computed(() => (props.code || '').toLowerCase())
-const svg = computed(() => RM_FLAGS[key.value])
-const width = computed(() => (props.height * 21) / 15)
+
+/**
+ * La table du monde entier n'est demandee que si le code manque a la table de
+ * base : elle pese plus lourd que tout le reste du paquet.
+ */
+const world = shallowRef<Record<string, string>>({})
+watchEffect(async () => {
+  if (!key.value || RM_FLAGS[key.value] || world.value[key.value]) return
+  const mod = await import('../internal/flags-world')
+  world.value = mod.RM_FLAGS_WORLD
+})
+
+const svg = computed(() => RM_FLAGS[key.value] ?? world.value[key.value])
+const width = computed(() => (props.circle ? props.height : (props.height * 21) / 15))
 </script>
 
 <template>
   <svg
     v-if="svg"
     class="rm-flag"
-    :class="{ 'rm-flag--rounded': rounded }"
+    :class="{ 'rm-flag--rounded': rounded && !circle, 'rm-flag--circle': circle }"
     :width="width"
     :height="height"
-    viewBox="0 0 21 15"
+    :viewBox="circle ? '3 0 15 15' : '0 0 21 15'"
+    :preserveAspectRatio="circle ? 'xMidYMid slice' : undefined"
     :role="title ? 'img' : undefined"
     :aria-hidden="title ? undefined : true"
     v-html="(title ? `<title>${title}</title>` : '') + svg"
@@ -49,5 +71,5 @@ const width = computed(() => (props.height * 21) / 15)
 </template>
 
 <style scoped>
-.rm-flag{display:inline-block;flex-shrink:0;vertical-align:-.15em}.rm-flag--rounded{border-radius:2px;box-shadow:inset 0 0 0 .5px rgba(30,41,59,.18)}
+.rm-flag{display:inline-block;flex-shrink:0;vertical-align:-.15em}.rm-flag--rounded{border-radius:2px}.rm-flag--circle,.rm-flag--rounded{box-shadow:inset 0 0 0 .5px rgba(30,41,59,.18)}.rm-flag--circle{border-radius:50%}
 </style>

package/dist/runtime/internal/flags-world.d.ts

@@ -0,0 +1 @@
+export declare const RM_FLAGS_WORLD: Record<string, string>;