{"_id":"@drobinetm/vue-countries-flags","_rev":"4-2a0861ea70dfa5d0c2ca3d1cefea9024","name":"@drobinetm/vue-countries-flags","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@drobinetm/vue-countries-flags","version":"1.0.0","keywords":["vue","vue3","countries","flags","select","dropdown","iso","composition-api","typescript"],"author":{"name":"Diovi Robinet"},"license":"MIT","_id":"@drobinetm/vue-countries-flags@1.0.0","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://github.com/drobinetm/drm-countries-flags-component#readme","bugs":{"url":"https://github.com/drobinetm/drm-countries-flags-component/issues"},"dist":{"shasum":"2fd4123890dc13fa72b0a73d44cfb434721aee70","tarball":"https://registry.npmjs.org/@drobinetm/vue-countries-flags/-/vue-countries-flags-1.0.0.tgz","fileCount":6,"integrity":"sha512-9WcV/iKuDsKZOj9WYt/WCT1QpMY1/cXDUb85eNwwOuUnP5HaeWB0yZLfdHN86B+qbop0kQyi3oz23EM4PkOasg==","signatures":[{"sig":"MEYCIQCKlfH0ppyvoWI75xG0OtJL3pDkDWbArx++T1kyIsJA8QIhAKSfjYZWAb/9+EqB0vN/XB7LcIZWKSQAZHFdAoI7AIce","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22228},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/styles.css"},"./package.json":"./package.json"},"scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","build":"vite build && cp src/styles.d.ts dist/styles.d.ts","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"drobinetm","email":"drobinetmorales@gmail.com"},"repository":{"url":"git+https://github.com/drobinetm/drm-countries-flags-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.9.4","description":"Vue 3 Composition API component to display a country selector with flag icons","directories":{},"_nodeVersion":"22.21.0","dependencies":{"@drobinetm/countries-flags-core":"workspace:*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.21","vite":"8.0.5","vue-tsc":"^2.0.10","typescript":"^5.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":">=3.4.0","flag-icons":">=7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-countries-flags_1.0.0_1777636339929_0.8464659283015157","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@drobinetm/vue-countries-flags","version":"1.0.2","keywords":["vue","vue3","countries","flags","select","dropdown","iso","composition-api","typescript"],"author":{"name":"Diovi Robinet"},"license":"MIT","_id":"@drobinetm/vue-countries-flags@1.0.2","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://github.com/drobinetm/drm-countries-flags-component#readme","bugs":{"url":"https://github.com/drobinetm/drm-countries-flags-component/issues"},"dist":{"shasum":"7d0e93ba5f3c0b2baf010fd49cbab2fb799e95d9","tarball":"https://registry.npmjs.org/@drobinetm/vue-countries-flags/-/vue-countries-flags-1.0.2.tgz","fileCount":6,"integrity":"sha512-kIuKHrEC+djbp2JTMjyuOY86De6hC0BdbhTSuyMnPfB136IYNegf93yK6qObd//grx0CucsUHuLV+uW7UiqAXw==","signatures":[{"sig":"MEYCIQDmE+yG0ZqwnoOuQuTA6vUtlK4sBPCA1TQau9A6x+lmnAIhAP8R4KYqhRA58cgmT87ozxO0WEcG/9no4d9Zgc8PBQJm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fvue-countries-flags@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":45213},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/vue-countries-flags.css"},"./package.json":"./package.json"},"gitHead":"63eacc8003fb51f86db1c4366e63e13b3f23763a","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","build":"vite build && cp src/styles.d.ts dist/styles.d.ts","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:39413a77-16de-40ec-b176-e9866934e72b"}},"repository":{"url":"git+https://github.com/drobinetm/drm-countries-flags-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.11.0","description":"Vue 3 Composition API component to display a country selector with flag icons","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.21","vite":"8.0.5","vue-tsc":"^2.0.10","typescript":"^5.4.5","country-list":"^2.3.0","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4","@drobinetm/countries-flags-core":"workspace:*"},"peerDependencies":{"vue":">=3.4.0","flag-icons":">=7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-countries-flags_1.0.2_1777651263805_0.5519903584225037","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@drobinetm/vue-countries-flags","version":"1.0.3","keywords":["vue","vue3","countries","flags","select","dropdown","iso","composition-api","typescript"],"author":{"name":"Diovi Robinet"},"license":"MIT","_id":"@drobinetm/vue-countries-flags@1.0.3","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://github.com/drobinetm/drm-countries-flags-component#readme","bugs":{"url":"https://github.com/drobinetm/drm-countries-flags-component/issues"},"dist":{"shasum":"d2c1bc8bd293aa0db7573424533562223f96dc31","tarball":"https://registry.npmjs.org/@drobinetm/vue-countries-flags/-/vue-countries-flags-1.0.3.tgz","fileCount":7,"integrity":"sha512-zloiLMpk+qp/h3/odw66Srzv6c5T3Is5TEUWxfsk+btmGmSdNCaCI5hRJm7+O6LY7I5vth8Z3LUk8f7/0QCxHQ==","signatures":[{"sig":"MEYCIQD0DVr3nQAvySC+qmwYoaI7irRRopBsCW0ojyVMWnSvXAIhAInXEgq4i39dEdDjfAkkzJaO4c40QR8ayOmo7vlEL2wd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fvue-countries-flags@1.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":47420},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/vue-countries-flags.css"},"./package.json":"./package.json"},"gitHead":"775c2eb981381b2de04bf604e97504a640208cc6","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","build":"vite build && cp src/styles.d.ts dist/styles.d.ts","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:39413a77-16de-40ec-b176-e9866934e72b"}},"repository":{"url":"git+https://github.com/drobinetm/drm-countries-flags-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.11.0","description":"Vue 3 Composition API component to display a country selector with flag icons","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.21","vite":"8.0.5","vue-tsc":"^2.0.10","typescript":"^5.4.5","country-list":"^2.3.0","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4","@drobinetm/countries-flags-core":"workspace:*"},"peerDependencies":{"vue":">=3.4.0","flag-icons":">=7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-countries-flags_1.0.3_1777652845191_0.5569559819748233","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@drobinetm/vue-countries-flags","version":"1.0.4","description":"Vue 3 Composition API component to display a country selector with flag icons","author":{"name":"Diovi Robinet"},"license":"MIT","keywords":["vue","vue3","countries","flags","select","dropdown","iso","composition-api","typescript"],"homepage":"https://drm-countries-flags.netlify.app/docs/vue/","repository":{"type":"git","url":"git+https://github.com/drobinetm/drm-countries-flags-component.git","directory":"packages/vue"},"type":"module","publishConfig":{"access":"public"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/vue-countries-flags.css"},"./package.json":"./package.json"},"scripts":{"build":"vite build && cp src/styles.d.ts dist/styles.d.ts","dev":"vite build --watch","typecheck":"vue-tsc --noEmit","lint":"eslint src --ext .ts,.vue","clean":"rm -rf dist"},"peerDependencies":{"vue":">=3.4.0","flag-icons":">=7.0.0"},"devDependencies":{"@drobinetm/countries-flags-core":"workspace:*","country-list":"^2.3.0","@vitejs/plugin-vue":"^5.0.4","typescript":"^5.4.5","vite":"8.0.5","vite-plugin-dts":"^3.9.1","vue":"^3.4.21","vue-tsc":"^2.0.10"},"gitHead":"4194db03336d341467533f4ffcac7ecb4e8c5046","_id":"@drobinetm/vue-countries-flags@1.0.4","bugs":{"url":"https://github.com/drobinetm/drm-countries-flags-component/issues"},"_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-+3/Bz/9TMp06HKmsFPphZkfweApto85IuNjhSXOls7+tN2flAtdhWaWZ8WS+pmWepExg8jMMghTl7gv01iTgUw==","shasum":"a54b6c1ffcf8a1875d72c3c5944cdfd34515feaf","tarball":"https://registry.npmjs.org/@drobinetm/vue-countries-flags/-/vue-countries-flags-1.0.4.tgz","fileCount":7,"unpackedSize":47487,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fvue-countries-flags@1.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDtKLFZzGGE7eB6PJDQVgNvcfVpwWa5wK76XPiy5PQhDQIhAKv1K5Lm08wRgoQqZ/tXN9TEVsOkbj41be/W3Tdebzee"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:39413a77-16de-40ec-b176-e9866934e72b"}},"directories":{},"maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-countries-flags_1.0.4_1777653513542_0.06876216382330225"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-01T11:52:19.861Z","modified":"2026-05-01T16:38:33.924Z","1.0.0":"2026-05-01T11:52:20.088Z","1.0.2":"2026-05-01T16:01:03.965Z","1.0.3":"2026-05-01T16:27:25.373Z","1.0.4":"2026-05-01T16:38:33.683Z"},"bugs":{"url":"https://github.com/drobinetm/drm-countries-flags-component/issues"},"author":{"name":"Diovi Robinet"},"license":"MIT","homepage":"https://drm-countries-flags.netlify.app/docs/vue/","keywords":["vue","vue3","countries","flags","select","dropdown","iso","composition-api","typescript"],"repository":{"type":"git","url":"git+https://github.com/drobinetm/drm-countries-flags-component.git","directory":"packages/vue"},"description":"Vue 3 Composition API component to display a country selector with flag icons","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"readme":"# @drobinetm/vue-countries-flags\n\n`@drobinetm/vue-countries-flags` provides a country selector component with\nflag icons for Vue 3 applications.\n\nIt shares data and contracts with the Angular and React packages through\n`@drobinetm/countries-flags-core`.\n\n## Install\n\nInstall the package and required peer dependencies.\n\n```bash\npnpm add @drobinetm/vue-countries-flags vue flag-icons\n```\n\nImport the flag-icons CSS once in your app entry point.\n\n```ts\nimport 'flag-icons/css/flag-icons.min.css'\n```\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { CountriesFlags } from '@drobinetm/vue-countries-flags'\n\nconst country = ref<string | null>(null)\n</script>\n\n<template>\n  <CountriesFlags\n    v-model=\"country\"\n    placeholder=\"Select a country\"\n    @change=\"(event) => console.log(event.code)\"\n  />\n</template>\n```\n\n## Props\n\n`CountriesFlags` accepts:\n\n- `modelValue?: string | null`\n- `max?: number`\n- `filter?: string[]`\n- `placeholder?: string`\n- `disabled?: boolean`\n- `unstyled?: boolean`\n- `classNames?: CountriesFlagsClassNames`\n- `styles?: CountriesFlagsStyles`\n\n## Events\n\n- `update:modelValue` with `string | null`\n- `change` with `CountryChangeEvent`\n\n## Styling\n\nBy default, the package includes its own styles.\n\n- Set `unstyled` to `true` if you want to style every slot yourself.\n- Use `classNames` for class-based overrides per slot.\n- Use `styles` for inline style-object overrides per slot.\n\nAvailable slots:\n\n- `root`\n- `trigger`\n- `triggerContent`\n- `placeholder`\n- `label`\n- `chevron`\n- `backdrop`\n- `list`\n- `empty`\n- `option`\n- `optionSelected`\n- `optionActive`\n- `flag`\n- `optionName`\n\n## Accessibility\n\nThe component includes keyboard and ARIA support:\n\n- `Enter` / `Space`: open or select\n- `ArrowUp` / `ArrowDown`: move active option\n- `Home` / `End`: jump to first or last option\n- `Escape`: close dropdown\n\n## Exports\n\n```ts\nimport {\n  CountriesFlags,\n  type Country,\n  type CountriesFlagsProps,\n  type CountryChangeEvent,\n  type CountriesFlagsClassNames,\n  type CountriesFlagsStyles,\n} from '@drobinetm/vue-countries-flags'\n```\n\n## Docs\n\nProject docs:\n\n- https://drm-countries-flags.netlify.app/docs/vue/\n\n## License\n\nMIT © Diovi Robinet Morales\n","readmeFilename":"README.md"}