@blade-flags/vue 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @blade-flags/vue
|
|
2
|
+
|
|
3
|
+
Vue 3 flag components powered by [`@blade-flags/core`](https://www.npmjs.com/package/@blade-flags/core). 1,759 SVG country and language flags across three styles. Works great with Inertia.js.
|
|
4
|
+
|
|
5
|
+
Part of [blade-flags](https://github.com/MohmmedAshraf/blade-flags). See also [`@blade-flags/react`](https://www.npmjs.com/package/@blade-flags/react).
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @blade-flags/core @blade-flags/vue
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<script setup>
|
|
17
|
+
import { Flag } from '@blade-flags/vue'
|
|
18
|
+
import { circleFlags } from '@blade-flags/core/flags/circle'
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<Flag :code="user.country" :flags="circleFlags" />
|
|
23
|
+
<Flag code="ar-sa" type="language" :flags="circleFlags" />
|
|
24
|
+
</template>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Props
|
|
28
|
+
|
|
29
|
+
| Prop | Type | Default | Description |
|
|
30
|
+
|------|------|---------|-------------|
|
|
31
|
+
| `code` | `string` | required | Country or language code (e.g. `us`, `ar-sa`) |
|
|
32
|
+
| `flags` | `FlagMap` | required | Flag variant map to resolve from |
|
|
33
|
+
| `type` | `'country' \| 'language'` | `'country'` | Whether the code is a country or language |
|
|
34
|
+
|
|
35
|
+
### AutoFlag
|
|
36
|
+
|
|
37
|
+
Convenience component that accepts a `variant` string prop (bundles all variants):
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<script setup>
|
|
41
|
+
import { AutoFlag } from '@blade-flags/vue'
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<template>
|
|
45
|
+
<AutoFlag code="us" variant="circle" />
|
|
46
|
+
<AutoFlag code="ar" type="language" variant="flat" />
|
|
47
|
+
</template>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Variants
|
|
51
|
+
|
|
52
|
+
Import only the variant you need to keep your bundle small:
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import { defaultFlags } from '@blade-flags/core/flags/default'
|
|
56
|
+
import { circleFlags } from '@blade-flags/core/flags/circle'
|
|
57
|
+
import { flatFlags } from '@blade-flags/core/flags/flat'
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
[MIT](https://github.com/MohmmedAshraf/blade-flags/blob/main/LICENSE.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blade-flags/vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Vue 3 flag components powered by @blade-flags/core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"module": "./dist/index.js",
|
|
16
16
|
"types": "./dist/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
|
-
"dist"
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
19
20
|
],
|
|
20
21
|
"publishConfig": {
|
|
21
22
|
"access": "public"
|
|
@@ -27,7 +28,7 @@
|
|
|
27
28
|
"devDependencies": {
|
|
28
29
|
"tsup": "^8.2.0",
|
|
29
30
|
"vue": "^3.5.0",
|
|
30
|
-
"@blade-flags/core": "0.1.
|
|
31
|
+
"@blade-flags/core": "0.1.1"
|
|
31
32
|
},
|
|
32
33
|
"scripts": {
|
|
33
34
|
"build": "tsup"
|