@nonfx/vue-flagpack 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Yummygum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,209 @@
+# Flagpack
+
+Flagpack contains 260+ flag icons to easily use within your code project. Flagpack is an open source project and available for JavaScript frameworks/libraries Angular, Vue and React.
+
+![Flagpack. 260+ easily implementable flag icons to use in your design or code project. Open Source. Available for Sketch, Figma, Angular, Vue, and React. [www.flagpack.xyz](https://www.flagpack.xyz). Made with love by Yummygum. Graphic showing a list with the flags of Argentina, Croatia, Estonia, Kenia, Netherlands, and Scotland.](https://flagpack.xyz/meta-image.png)
+
+[View documentation on flagpack.xyz](https://flagpack.xyz/docs/)
+
+## vue-flagpack
+<p>
+  <a href="https://www.npmjs.com/package/vue-flagpack" target="_blank">
+    <img src="https://img.shields.io/npm/v/vue-flagpack.svg?style=flat" />
+  </a>
+  <a href="https://www.npmjs.com/package/vue-flagpack" target="_blank">
+    <img src="https://img.shields.io/npm/dt/vue-flagpack.svg?style=flat" />
+  </a>
+  <a href="https://github.com/sponsors/Yummygum" target="_blank">
+    <img src="https://img.shields.io/badge/Support-♥-E94AAA"  />
+  </a>
+  <a href="https://twitter.com/flagpack" target="_blank">
+    <img src="https://img.shields.io/twitter/follow/flagpack.svg?style=social&label=follow"  />
+  </a>
+</p>
+Flagpack for Vue is now fully compatible with Vue 3 and Nuxt 3! The package has been updated to use Vue 3's Composition API and includes a dedicated Nuxt module for seamless integration.
+
+### Tree-Shaking Support
+
+Starting from flagpack-core v2.0.0, vue-flagpack supports **tree-shaking**! This means only the flag SVGs you actually use will be included in your bundle. The Flag component uses dynamic imports to load flag SVGs on-demand, ensuring your bundle stays small and efficient.
+
+## Installation
+
+```bash
+npm install vue-flagpack
+```
+
+## Usage
+
+### Vue 3
+
+#### As a plugin
+```js
+import { createApp } from 'vue'
+import VueFlagpack from 'vue-flagpack'
+
+const app = createApp(App)
+app.use(VueFlagpack, {
+  name: 'Flag' // Optional: default component name
+})
+```
+
+In your template:
+```vue
+<template>
+  <Flag code="NL" size="l" />
+</template>
+```
+
+#### Direct component import
+```vue
+<script setup>
+import { Flag } from 'vue-flagpack'
+</script>
+
+<template>
+  <Flag code="NL" size="m" has-drop-shadow />
+</template>
+```
+
+### Nuxt 3
+
+Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'vue-flagpack/nuxt'
+  ]
+})
+```
+
+Then use the Flag component anywhere in your Nuxt app (auto-imported):
+
+```vue
+<template>
+  <Flag code="NL" size="l" />
+</template>
+```
+
+### Advanced: Direct Flag Import for Static Bundling
+
+For optimal tree-shaking when you know which flags you need at build time, you can use the utility functions:
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getFlagUrl, isoToCountryCode } from 'vue-flagpack'
+
+const flagUrl = ref('')
+
+onMounted(async () => {
+  // Only the NL flag SVG will be included in your bundle
+  flagUrl.value = await getFlagUrl('NL', 'l')
+})
+</script>
+
+<template>
+  <img v-if="flagUrl" :src="flagUrl" alt="Netherlands flag" />
+</template>
+```
+
+### Via CDN
+```html
+<script src="https://unpkg.com/vue@3"></script>
+<script src="https://unpkg.com/vue-flagpack@latest/dist/vue-flag-rollup.iife.js"></script>
+<script>
+const { createApp } = Vue
+const { default: VueFlagpack, Flag } = VueFlagpack
+
+const app = createApp({
+  components: { Flag }
+})
+app.mount('#app')
+</script>
+```
+
+## Available plugin options
+
+| Key   | Value   | Required | Default |
+|-------|-------|------|------|
+| name |  String | false | vue-flagpack |
+
+
+
+## How Tree-Shaking Works
+
+Vue-flagpack leverages **dynamic imports** to ensure only the flag SVGs you use are included in your final bundle:
+
+- **Dynamic Loading**: The `Flag` component dynamically imports SVG files at runtime based on the `code` prop
+- **No Bloat**: Unlike v1, all 250+ flags are NOT bundled into your app by default
+- **Optimized Bundles**: Modern bundlers (Vite, Webpack 5, Rollup) will code-split flag SVGs into separate chunks
+- **On-Demand**: Flags are loaded when the component renders, keeping initial bundle size minimal
+
+### Bundle Size Comparison
+
+- **Without tree-shaking (v1.x)**: ~16MB (all flags bundled)
+- **With tree-shaking (v2.x)**: ~4KB base + ~1-2KB per flag used
+
+Example: If your app only uses 5 country flags, your bundle will be ~14KB instead of 16MB!
+
+## Available component configurations — Props
+
+| Key   | Value   | Required | Default | Format |
+|-------|-------|------|------|------|
+| code |  String | false | 'NL' | [See all codes](https://flagpack.xyz/docs/flag-index/) |
+| size |  String | false | 'L' | 'S', 'M' or 'L' |
+| className |  String | false | - | - |
+| hasDropShadow |  Boolean | false | false | - |
+| hasBorder |  Boolean | false | true | - |
+| hasBorderRadius | Boolean | false | true | - |
+| gradient |  String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
+
+
+
+## Build Dist
+
+```bash
+# install dependencies
+npm install
+
+# build for prod
+npm run build
+
+# build with watcher for dev
+npm run dev
+```
+
+## Releasing
+To release a new version you'll need to make sure all changes commits are done and pushed. After that you'll need to decide which release type you want to use. The release types are; patch (0.0.1), major (0.1.0), or minor (1.0.0).
+```
+npm version <release_type>
+```
+This will update the version number in the `package.json`, and will add a git tag automatically. Next you'll need to push the git tag to the remote.
+```
+git push --tags origin main
+```
+After that you'll need to publish to npm.
+```
+npm publish
+```
+
+When you're confident with the release, make sure the version tag is also released at GitHub.
+
+## Support
+
+[Frequently Asked Questions](https://flagpack.xyz/support/)
+
+[Documentation](https://flagpack.xyz/docs/)
+
+## Releases
+
+You can find a changelog of Flagpack's releases on the [Releases page](https://github.com/Yummygum/vue-flagpack/releases) on GitHub.
+
+## Contribute
+
+If you're interested in contributing to this project, great! Please see the [contributing document](CONTRIBUTING.md).
+
+## License
+
+Flagpack is an open source project published under a [MIT license](LICENSE).

package/dist/Flag.vue.d.ts

@@ -0,0 +1,62 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    size: {
+        default: string;
+    };
+    code: {
+        default: string;
+    };
+    hasDropShadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasBorderRadius: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        default: undefined;
+    };
+    className: {
+        default: string;
+    };
+}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        default: string;
+    };
+    code: {
+        default: string;
+    };
+    hasDropShadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasBorderRadius: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        default: undefined;
+    };
+    className: {
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: string;
+    code: string;
+    hasDropShadow: boolean;
+    hasBorder: boolean;
+    hasBorderRadius: boolean;
+    gradient: undefined;
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: NuxtModule<TOptions, TOptions, false>;
+export default _default;

package/dist/nuxt.mjs

@@ -0,0 +1 @@
+import{defineNuxtModule as a,addComponent as e}from"@nuxt/kit";var t=a({meta:{name:"vue-flagpack",configKey:"vueFlagpack",compatibility:{nuxt:"^3.0.0"}},defaults:{},setup(a,t){e({name:"Flag",filePath:"vue-flagpack",export:"Flag"})}});export{t as default};

package/dist/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get the flag SVG URL for a given country code and size
+ * This uses dynamic imports to enable tree-shaking
+ */
+export declare function getFlagUrl(code: string, size?: 's' | 'm' | 'l'): Promise<string>;
+/**
+ * Helper to import a specific flag statically for maximum tree-shaking
+ * Usage: const nlFlag = await importFlag('NL', 'l')
+ */
+export declare function importFlag(code: string, size?: 's' | 'm' | 'l'): Promise<string>;

package/dist/vue-flag-rollup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("flagpack-core");const n=["src"];var o=e.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(o){const r=o,t=e.ref(""),d=async()=>{try{const e=a.isoToCountryCode(r.code).toUpperCase(),n=r.size.toLowerCase(),o=await import(`flagpack-core/lib/flags/${n}/${e}.svg`);t.value=o.default}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return e.onMounted(()=>{d()}),e.watch(()=>[r.code,r.size],()=>{d()}),(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flag",`size-${o.size}`,{"border-radius":o.hasBorderRadius},{border:o.hasBorder},{"drop-shadow":o.hasDropShadow},o.gradient,o.className])},[t.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,n)):e.createCommentVNode("",!0)],2))}});async function r(e,n="m"){try{const o=a.isoToCountryCode(e).toUpperCase(),r=n.toLowerCase();return(await import(`flagpack-core/lib/flags/${r}/${o}.svg`)).default}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-a804f4ce] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-a804f4ce] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-a804f4ce] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-a804f4ce] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-a804f4ce] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-a804f4ce] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-a804f4ce] {\n  border-radius: 2px;\n}\n.flag.border[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-a804f4ce] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),o.__scopeId="data-v-a804f4ce";var t={install:(e,a={})=>{e.component(a.name||"Flag",o)}};Object.defineProperty(exports,"isoToCountryCode",{enumerable:!0,get:function(){return a.isoToCountryCode}}),exports.Flag=o,exports.default=t,exports.getFlagUrl=r,exports.importFlag=async function(e,a="m"){return r(e,a)};

package/dist/vue-flag-rollup.esm.js

@@ -0,0 +1 @@
+import{defineComponent as a,ref as e,onMounted as n,watch as o,createElementBlock as r,openBlock as d,normalizeClass as t,createCommentVNode as i}from"vue";import{isoToCountryCode as l}from"flagpack-core";export{isoToCountryCode}from"flagpack-core";const s=["src"];var g=a({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(a){const g=a,b=e(""),c=async()=>{try{const a=l(g.code).toUpperCase(),e=g.size.toLowerCase(),n=await import(`flagpack-core/lib/flags/${e}/${a}.svg`);b.value=n.default}catch(a){console.warn(`Flag not found for code: ${g.code}`,a),b.value=""}};return n(()=>{c()}),o(()=>[g.code,g.size],()=>{c()}),(e,n)=>(d(),r("div",{class:t(["flag",`size-${a.size}`,{"border-radius":a.hasBorderRadius},{border:a.hasBorder},{"drop-shadow":a.hasDropShadow},a.gradient,a.className])},[b.value?(d(),r("img",{key:0,src:b.value,alt:"flag"},null,8,s)):i("",!0)],2))}});async function b(a,e="m"){try{const n=l(a).toUpperCase(),o=e.toLowerCase();return(await import(`flagpack-core/lib/flags/${o}/${n}.svg`)).default}catch(e){return console.warn(`Flag not found for code: ${a}`,e),""}}async function c(a,e="m"){return b(a,e)}!function(a,e){void 0===e&&(e={});var n=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=a:r.appendChild(document.createTextNode(a))}}('.flag[data-v-a804f4ce] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-a804f4ce] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-a804f4ce] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-a804f4ce] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-a804f4ce] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-a804f4ce] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-a804f4ce] {\n  border-radius: 2px;\n}\n.flag.border[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-a804f4ce] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),g.__scopeId="data-v-a804f4ce";var f={install:(a,e={})=>{a.component(e.name||"Flag",g)}};export{g as Flag,f as default,b as getFlagUrl,c as importFlag};

package/dist/vue-flag-rollup.iife.js

@@ -0,0 +1 @@
+var VueFlagpack=function(e,a,n){"use strict";const o=["src"];var r=a.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(e){const r=e,t=a.ref(""),d=async()=>{try{const e=n.isoToCountryCode(r.code).toUpperCase(),a=r.size.toLowerCase(),o=await import(`flagpack-core/lib/flags/${a}/${e}.svg`);t.value=o.default}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return a.onMounted(()=>{d()}),a.watch(()=>[r.code,r.size],()=>{d()}),(n,r)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["flag",`size-${e.size}`,{"border-radius":e.hasBorderRadius},{border:e.hasBorder},{"drop-shadow":e.hasDropShadow},e.gradient,e.className])},[t.value?(a.openBlock(),a.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,o)):a.createCommentVNode("",!0)],2))}});async function t(e,a="m"){try{const o=n.isoToCountryCode(e).toUpperCase(),r=a.toLowerCase();return(await import(`flagpack-core/lib/flags/${r}/${o}.svg`)).default}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-a804f4ce] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-a804f4ce] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-a804f4ce] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-a804f4ce] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-a804f4ce] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-a804f4ce] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-a804f4ce] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-a804f4ce] {\n  border-radius: 2px;\n}\n.flag.border[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-a804f4ce]::before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-a804f4ce] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),r.__scopeId="data-v-a804f4ce";var d={install:(e,a={})=>{e.component(a.name||"Flag",r)}};return Object.defineProperty(e,"isoToCountryCode",{enumerable:!0,get:function(){return n.isoToCountryCode}}),e.Flag=r,e.default=d,e.getFlagUrl=t,e.importFlag=async function(e,a="m"){return t(e,a)},Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue,flagpackCore);

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@nonfx/vue-flagpack",
+  "description": "Gorgeous flag components for your Vue 3 and Nuxt 3 project with tree-shaking support.",
+  "version": "2.0.0",
+  "type": "module",
+  "author": "Yummygum <info@yummygum.com> (https://yummygum.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yummygum/vue-flagpack.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue-component",
+    "languages",
+    "flag",
+    "iso",
+    "flag set",
+    "countries"
+  ],
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "main": "./dist/vue-flag-rollup.cjs.js",
+  "module": "./dist/vue-flag-rollup.esm.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-flag-rollup.esm.js",
+      "require": "./dist/vue-flag-rollup.cjs.js"
+    },
+    "./nuxt": {
+      "import": "./dist/nuxt.mjs"
+    }
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Yummygum/vue-flagpack/issues"
+  },
+  "homepage": "https://flagpack.xyz",
+  "scripts": {
+    "dev": "NODE_ENV=development rollup -cw",
+    "prebuild": "rm -rf dist",
+    "build": "NODE_ENV=production rollup -c"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "@nuxt/kit": "^3.10.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/compiler-sfc": "^3.4.0",
+    "postcss": "^8.4.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.3.0",
+    "vue": "^3.4.0"
+  },
+  "authors": [
+    {
+      "name": "Noud Adrichem",
+      "social": "@noudadrichem",
+      "url": "https://noudadrichem.com"
+    },
+    {
+      "name": "Donovan Roubos",
+      "social": "@donovanroubos",
+      "url": "https://donovanroubos.nl"
+    },
+    {
+      "name": "Yummygum",
+      "social": "@yummygum",
+      "url": "https://yummygum.com"
+    }
+  ],
+  "dependencies": {
+    "flagpack-core": "^2.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}

package/src/Flag.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    :class="[
+      'flag',
+      `size-${size}`,
+      {'border-radius': hasBorderRadius },
+      {'border': hasBorder },
+      {'drop-shadow': hasDropShadow},
+      gradient,
+      className
+    ]">
+    <img v-if="flagSvg" :src="flagSvg" alt="flag">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { isoToCountryCode } from 'flagpack-core'
+
+interface Props {
+  size?: 's' | 'm' | 'l'
+  code?: string
+  hasDropShadow?: boolean
+  hasBorder?: boolean
+  hasBorderRadius?: boolean
+  gradient?: 'top-down' | 'real-linear' | 'real-circular'
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'm',
+  code: '528',
+  hasDropShadow: false,
+  hasBorder: true,
+  hasBorderRadius: true,
+  gradient: undefined,
+  className: ''
+})
+
+const flagSvg = ref<string>('')
+
+const loadFlag = async () => {
+  try {
+    const countryCode = isoToCountryCode(props.code).toUpperCase()
+    const sizeKey = props.size.toLowerCase()
+    
+    // Dynamically import the SVG for tree-shaking
+    // This ensures only the flags you use are bundled
+    const svgModule = await import(
+      /* @vite-ignore */
+      `flagpack-core/lib/flags/${sizeKey}/${countryCode}.svg`
+    )
+    
+    flagSvg.value = svgModule.default
+  } catch (error) {
+    console.warn(`Flag not found for code: ${props.code}`, error)
+    flagSvg.value = ''
+  }
+}
+
+// Load flag on mount and when code/size changes
+onMounted(() => {
+  loadFlag()
+})
+
+watch(() => [props.code, props.size], () => {
+  loadFlag()
+})
+</script>
+
+<style scoped lang="scss">
+@mixin before-styling {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: block;
+  mix-blend-mode: overlay;
+  box-sizing: border-box;
+}
+
+.flag {
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+
+  &.size {
+    &-s {
+      width: 16px;
+      height: 12px;
+
+      &.drop-shadow {
+        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);
+      }
+
+      &.border-radius {
+        border-radius: 1px;
+      }
+    }
+
+    &-m {
+      width: 20px;
+      height: 15px;
+
+      &.drop-shadow {
+        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
+      }
+
+      &.border-radius {
+        border-radius: 1.5px;
+      }
+    }
+
+    &-l {
+      width: 32px;
+      height: 24px;
+
+      &.drop-shadow {
+        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);
+      }
+
+      &.border-radius {
+        border-radius: 2px;
+      }
+    }
+  }
+
+  &.border {
+    &::before {
+      @include before-styling();
+      border: 1px solid rgba(0, 0, 0, .5);
+      mix-blend-mode: overlay;
+    }
+  }
+
+  &.border-radius {
+    &::before {
+      @include before-styling();
+      border-radius: 1px;
+    }
+  }
+
+  &.top-down {
+    &::before {
+      @include before-styling();
+      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);
+    }
+  }
+
+  &.real-linear {
+    &::before {
+      @include before-styling();
+      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);
+    }
+  }
+
+  &.real-circular {
+    &::before {
+      @include before-styling();
+      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,
+                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>

package/src/index.d.ts

@@ -0,0 +1,46 @@
+import { App, Plugin } from 'vue'
+import { DefineComponent } from 'vue'
+
+export interface FlagProps {
+  size?: 's' | 'm' | 'l'
+  code?: string
+  hasDropShadow?: boolean
+  hasBorder?: boolean
+  hasBorderRadius?: boolean
+  gradient?: 'top-down' | 'real-linear' | 'real-circular'
+  className?: string
+}
+
+export const Flag: DefineComponent<FlagProps>
+
+export interface PluginOptions {
+  name?: string
+}
+
+/**
+ * Get the flag SVG URL for a given country code and size
+ * This uses dynamic imports to enable tree-shaking
+ */
+export function getFlagUrl(
+  code: string,
+  size?: 's' | 'm' | 'l'
+): Promise<string>
+
+/**
+ * Helper to import a specific flag statically for maximum tree-shaking
+ */
+export function importFlag(
+  code: string,
+  size?: 's' | 'm' | 'l'
+): Promise<string>
+
+/**
+ * Convert ISO code to country code
+ */
+export function isoToCountryCode(code: string): string
+
+declare const plugin: Plugin & {
+  install: (app: App, options?: PluginOptions) => void
+}
+
+export default plugin

package/src/main.js

@@ -0,0 +1,11 @@
+import Flag from './Flag.vue'
+export { isoToCountryCode } from 'flagpack-core'
+export { getFlagUrl, importFlag } from './utils'
+
+export { Flag }
+
+export default {
+  install: (app, options = {}) => {
+    app.component(options.name || 'Flag', Flag)
+  }
+}

package/src/nuxt.ts

@@ -0,0 +1,20 @@
+import { defineNuxtModule, addComponent } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'vue-flagpack',
+    configKey: 'vueFlagpack',
+    compatibility: {
+      nuxt: '^3.0.0'
+    }
+  },
+  defaults: {},
+  setup(_options, _nuxt) {
+    // Auto-import the Flag component
+    addComponent({
+      name: 'Flag',
+      filePath: 'vue-flagpack',
+      export: 'Flag'
+    })
+  }
+})

package/src/utils.ts

@@ -0,0 +1,36 @@
+import { isoToCountryCode } from 'flagpack-core'
+
+/**
+ * Get the flag SVG URL for a given country code and size
+ * This uses dynamic imports to enable tree-shaking
+ */
+export async function getFlagUrl(
+  code: string,
+  size: 's' | 'm' | 'l' = 'm'
+): Promise<string> {
+  try {
+    const countryCode = isoToCountryCode(code).toUpperCase()
+    const sizeKey = size.toLowerCase()
+    
+    const svgModule = await import(
+      /* @vite-ignore */
+      `flagpack-core/lib/flags/${sizeKey}/${countryCode}.svg`
+    )
+    
+    return svgModule.default
+  } catch (error) {
+    console.warn(`Flag not found for code: ${code}`, error)
+    return ''
+  }
+}
+
+/**
+ * Helper to import a specific flag statically for maximum tree-shaking
+ * Usage: const nlFlag = await importFlag('NL', 'l')
+ */
+export async function importFlag(
+  code: string,
+  size: 's' | 'm' | 'l' = 'm'
+): Promise<string> {
+  return getFlagUrl(code, size)
+}