@sankyu/vue-circle-flags 0.1.1-beta.2 → 0.1.3-beta.4
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 +58 -35
- package/README.zh.md +55 -35
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<a href="https://react-circle-flags.js.org/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/SanKyu-Lab/
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/circle-flags-ui/main/.github/assets/favicon.svg" alt="@sankyu/vue-circle-flags" width="120" height="120" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
# @sankyu/vue-circle-flags
|
|
10
10
|
|
|
11
|
-
[](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://github.com/SanKyu-Lab/circle-flags-ui/commits/main)
|
|
12
12
|
|
|
13
13
|
<!-- CI/CD & Quality -->
|
|
14
14
|
|
|
15
|
-
[](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/circle-flags-ui)
|
|
16
16
|
|
|
17
17
|
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
English Version | [简体中文](./README.zh.md)
|
|
22
22
|
|
|
23
|
-
:star: **Star us on [GitHub](https://github.com/Sankyu-Lab/
|
|
23
|
+
:star: **Star us on [GitHub](https://github.com/Sankyu-Lab/circle-flags-ui)** | :bug: **Report Issues [here](https://github.com/Sankyu-Lab/circle-flags-ui/issues)**
|
|
24
24
|
|
|
25
25
|
:rocket: **Explore the [Demo Gallery](https://react-circle-flags.js.org/browse)** | :book: **Read the [Documentation](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
26
26
|
|
|
@@ -39,6 +39,10 @@ This library provides **400+ circular SVG flag components** for Vue 3 with **Ful
|
|
|
39
39
|
|
|
40
40
|
Perfect for applications that need fast, crisp country flags without external image requests.
|
|
41
41
|
|
|
42
|
+
## :world_map: Live Demo
|
|
43
|
+
|
|
44
|
+
[](https://stackblitz.com/fork/github/SanKyu-Lab/circle-flags-ui/tree/main/examples/example-vue?file=src%2FApp.vue&terminal=dev)
|
|
45
|
+
|
|
42
46
|
## ✨ Key Features
|
|
43
47
|
|
|
44
48
|
> [!TIP]
|
|
@@ -67,6 +71,25 @@ bun add @sankyu/vue-circle-flags
|
|
|
67
71
|
> [!TIP]
|
|
68
72
|
> For more information, you may refer to the [Installation Guide](https://react-circle-flags.js.org/docs/guides/getting-started/installation/).
|
|
69
73
|
|
|
74
|
+
### 🤖 Are you Vibe Coding?
|
|
75
|
+
|
|
76
|
+
Copy this into your AI Agent (Claude Code, Codex, Cursor ..like) to optimize your flags:
|
|
77
|
+
|
|
78
|
+
<details>
|
|
79
|
+
<summary>AI Agent Prompts</summary>
|
|
80
|
+
|
|
81
|
+
```txt
|
|
82
|
+
Act as an expert Web Engineer. Reference: https://react-circle-flags.js.org/llms.txt & https://react-circle-flags.js.org/llms-small.txt
|
|
83
|
+
|
|
84
|
+
1. **Audit my project** to find any flag usage:
|
|
85
|
+
- Raw `<img>` tags pointing to `HatScripts/circle-flags` URLs.
|
|
86
|
+
- Legacy `react-circle-flags` library usage.
|
|
87
|
+
2. **Propose a migration** to the appropriate `@sankyu/{framework}-circle-flags` package based on my current framework (React/Vue/Solid).
|
|
88
|
+
3. **Optimize for Tree-shaking**: Replace generic `CircleFlag` components or raw tags with **named imports** (e.g., `import { Us } from '...'`) as per the docs.
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
</details>
|
|
92
|
+
|
|
70
93
|
## 🚀 Usage
|
|
71
94
|
|
|
72
95
|
### Import individual flags (Recommended)
|
|
@@ -85,21 +108,21 @@ import { FlagUs, FlagCn, FlagGb } from '@sankyu/vue-circle-flags'
|
|
|
85
108
|
</template>
|
|
86
109
|
```
|
|
87
110
|
|
|
88
|
-
### Using
|
|
111
|
+
### Using `FlagSizes` presets
|
|
89
112
|
|
|
90
113
|
```vue
|
|
91
114
|
<script setup lang="ts">
|
|
92
|
-
import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
115
|
+
import { FlagJp, FlagDe, FlagFr, FlagSizes } from '@sankyu/vue-circle-flags'
|
|
93
116
|
</script>
|
|
94
117
|
|
|
95
118
|
<template>
|
|
96
119
|
<div>
|
|
97
|
-
<FlagJp
|
|
98
|
-
<!-- 16px -->
|
|
99
|
-
<FlagDe size="md" />
|
|
120
|
+
<FlagJp :width="FlagSizes.sm" :height="FlagSizes.sm" />
|
|
100
121
|
<!-- 24px -->
|
|
101
|
-
<
|
|
122
|
+
<FlagDe :width="FlagSizes.md" :height="FlagSizes.md" />
|
|
102
123
|
<!-- 32px -->
|
|
124
|
+
<FlagFr :width="FlagSizes.lg" :height="FlagSizes.lg" />
|
|
125
|
+
<!-- 48px -->
|
|
103
126
|
</div>
|
|
104
127
|
</template>
|
|
105
128
|
```
|
|
@@ -108,24 +131,22 @@ import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
|
108
131
|
|
|
109
132
|
```vue
|
|
110
133
|
<script setup lang="ts">
|
|
111
|
-
import { ref
|
|
134
|
+
import { ref } from 'vue'
|
|
135
|
+
import { DynamicFlag } from '@sankyu/vue-circle-flags'
|
|
112
136
|
|
|
113
137
|
const countryCode = ref('us')
|
|
114
|
-
|
|
115
|
-
const FlagComponent = computed(() => {
|
|
116
|
-
const code = countryCode.value.toLowerCase()
|
|
117
|
-
const componentName = `Flag${code.charAt(0).toUpperCase()}${code.slice(1)}`
|
|
118
|
-
return defineAsyncComponent(() =>
|
|
119
|
-
import('@sankyu/vue-circle-flags').then(module => module[componentName])
|
|
120
|
-
)
|
|
121
|
-
})
|
|
122
138
|
</script>
|
|
123
139
|
|
|
124
140
|
<template>
|
|
125
|
-
<
|
|
141
|
+
<DynamicFlag :code="countryCode" :width="48" :height="48" />
|
|
126
142
|
</template>
|
|
127
143
|
```
|
|
128
144
|
|
|
145
|
+
> [!CAUTION]
|
|
146
|
+
> `DynamicFlag` is offline-first and renders runtime codes synchronously, but it bundles all
|
|
147
|
+
> 400+ flags (~600 KB, no tree-shaking). Prefer named imports when possible. If runtime codes
|
|
148
|
+
> are bounded, use a finite named-import map.
|
|
149
|
+
|
|
129
150
|
### Other usage examples
|
|
130
151
|
|
|
131
152
|
> [!TIP]
|
|
@@ -135,23 +156,25 @@ const FlagComponent = computed(() => {
|
|
|
135
156
|
|
|
136
157
|
### Props
|
|
137
158
|
|
|
138
|
-
| Prop
|
|
139
|
-
|
|
|
140
|
-
| `width`
|
|
141
|
-
| `height`
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
159
|
+
| Prop | Type | Default | Description |
|
|
160
|
+
| ----------- | ------------------ | ------- | ---------------------------- |
|
|
161
|
+
| `width` | `number \| string` | `48` | Width of the flag |
|
|
162
|
+
| `height` | `number \| string` | `48` | Height of the flag |
|
|
163
|
+
| `title` | `string` | code | Accessible title for the SVG |
|
|
164
|
+
| `class` | `string` | - | Standard Vue class binding |
|
|
165
|
+
| `className` | `string` | - | Optional className alias |
|
|
144
166
|
|
|
145
167
|
### Size Presets
|
|
146
168
|
|
|
147
|
-
| Size
|
|
148
|
-
|
|
|
149
|
-
| `xs`
|
|
150
|
-
| `sm`
|
|
151
|
-
| `md`
|
|
152
|
-
| `lg`
|
|
153
|
-
| `xl`
|
|
154
|
-
| `
|
|
169
|
+
| Size | Pixels |
|
|
170
|
+
| ------ | ------ |
|
|
171
|
+
| `xs` | 16px |
|
|
172
|
+
| `sm` | 24px |
|
|
173
|
+
| `md` | 32px |
|
|
174
|
+
| `lg` | 48px |
|
|
175
|
+
| `xl` | 64px |
|
|
176
|
+
| `xxl` | 96px |
|
|
177
|
+
| `xxxl` | 128px |
|
|
155
178
|
|
|
156
179
|
### Build Meta Information
|
|
157
180
|
|
|
@@ -237,7 +260,7 @@ import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
|
|
|
237
260
|
|
|
238
261
|
## 🤝 Contributing
|
|
239
262
|
|
|
240
|
-
Please see [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
|
|
263
|
+
Please see [CONTRIBUTING.md](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/CONTRIBUTING.md) for contribution guidelines.
|
|
241
264
|
|
|
242
265
|
## 📄 License
|
|
243
266
|
|
package/README.zh.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<a href="https://react-circle-flags.js.org/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/SanKyu-Lab/
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/circle-flags-ui/main/.github/assets/favicon.svg" alt="@sankyu/vue-circle-flags" width="120" height="120" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
# @sankyu/vue-circle-flags
|
|
10
10
|
|
|
11
|
-
[](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://github.com/SanKyu-Lab/circle-flags-ui/commits/main)
|
|
12
12
|
|
|
13
13
|
<!-- CI/CD 与质量 -->
|
|
14
14
|
|
|
15
|
-
[](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/circle-flags-ui)
|
|
16
16
|
|
|
17
17
|
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
简体中文 | [English Version](./README.md)
|
|
22
22
|
|
|
23
|
-
:star: **在 [GitHub](https://github.com/Sankyu-Lab/
|
|
23
|
+
:star: **在 [GitHub](https://github.com/Sankyu-Lab/circle-flags-ui) 上 Star 我们** | :bug: **在此 [提交问题](https://github.com/Sankyu-Lab/circle-flags-ui/issues)**
|
|
24
24
|
|
|
25
25
|
:rocket: **探索 [演示图库](https://react-circle-flags.js.org/browse)** | :book: **[阅读文档](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
26
26
|
|
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
|
|
40
40
|
专为需要快速、清晰显示国旗且无需外部图片请求的应用而设计。
|
|
41
41
|
|
|
42
|
+
## :world_map: 在线演示
|
|
43
|
+
|
|
44
|
+
[](https://stackblitz.com/fork/github/SanKyu-Lab/circle-flags-ui/tree/main/examples/example-vue?file=src%2FApp.vue&terminal=dev)
|
|
45
|
+
|
|
42
46
|
## ✨ 核心特性
|
|
43
47
|
|
|
44
48
|
> [!TIP]
|
|
@@ -67,6 +71,23 @@ bun add @sankyu/vue-circle-flags
|
|
|
67
71
|
> [!TIP]
|
|
68
72
|
> 欲了解更多信息，请参阅 [安装指南](https://react-circle-flags.js.org/docs/guides/getting-started/installation/)。
|
|
69
73
|
|
|
74
|
+
### 🤖 正在 Vibe Coding?
|
|
75
|
+
|
|
76
|
+
<details>
|
|
77
|
+
<summary>AI Agent 提示词</summary>
|
|
78
|
+
|
|
79
|
+
```txt
|
|
80
|
+
你是一位资深 Web 开发专家。请参考文档：https://react-circle-flags.js.org/llms.txt
|
|
81
|
+
|
|
82
|
+
1. **项目审计**：检查我项目中的国旗图标使用情况，找出：
|
|
83
|
+
- 指向 `HatScripts/circle-flags` 的原始 `<img>` 标签。
|
|
84
|
+
- 旧版 `react-circle-flags` 第三方库的使用。
|
|
85
|
+
2. **迁移建议**：根据我当前的框架（React/Vue/Solid），提供向 `@sankyu/{framework}-circle-flags` 家族库迁移的方案。
|
|
86
|
+
3. **极致优化**：根据文档规范，将通用的 `CircleFlag` 组件或原始 `<img>` 标签替换为**具名导入**（例如 `import { FlagUs, FlagDe } from '...'`），以确保 Tree-shaking 达到最小 Bundle 体积。
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
</details>
|
|
90
|
+
|
|
70
91
|
## 🚀 使用
|
|
71
92
|
|
|
72
93
|
### 导入单个国旗（推荐）
|
|
@@ -85,21 +106,21 @@ import { FlagUs, FlagCn, FlagGb } from '@sankyu/vue-circle-flags'
|
|
|
85
106
|
</template>
|
|
86
107
|
```
|
|
87
108
|
|
|
88
|
-
### 使用
|
|
109
|
+
### 使用 `FlagSizes` 预设
|
|
89
110
|
|
|
90
111
|
```vue
|
|
91
112
|
<script setup lang="ts">
|
|
92
|
-
import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
113
|
+
import { FlagJp, FlagDe, FlagFr, FlagSizes } from '@sankyu/vue-circle-flags'
|
|
93
114
|
</script>
|
|
94
115
|
|
|
95
116
|
<template>
|
|
96
117
|
<div>
|
|
97
|
-
<FlagJp
|
|
98
|
-
<!-- 16px -->
|
|
99
|
-
<FlagDe size="md" />
|
|
118
|
+
<FlagJp :width="FlagSizes.sm" :height="FlagSizes.sm" />
|
|
100
119
|
<!-- 24px -->
|
|
101
|
-
<
|
|
120
|
+
<FlagDe :width="FlagSizes.md" :height="FlagSizes.md" />
|
|
102
121
|
<!-- 32px -->
|
|
122
|
+
<FlagFr :width="FlagSizes.lg" :height="FlagSizes.lg" />
|
|
123
|
+
<!-- 48px -->
|
|
103
124
|
</div>
|
|
104
125
|
</template>
|
|
105
126
|
```
|
|
@@ -108,24 +129,21 @@ import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
|
108
129
|
|
|
109
130
|
```vue
|
|
110
131
|
<script setup lang="ts">
|
|
111
|
-
import { ref
|
|
132
|
+
import { ref } from 'vue'
|
|
133
|
+
import { DynamicFlag } from '@sankyu/vue-circle-flags'
|
|
112
134
|
|
|
113
135
|
const countryCode = ref('us')
|
|
114
|
-
|
|
115
|
-
const FlagComponent = computed(() => {
|
|
116
|
-
const code = countryCode.value.toLowerCase()
|
|
117
|
-
const componentName = `Flag${code.charAt(0).toUpperCase()}${code.slice(1)}`
|
|
118
|
-
return defineAsyncComponent(() =>
|
|
119
|
-
import('@sankyu/vue-circle-flags').then(module => module[componentName])
|
|
120
|
-
)
|
|
121
|
-
})
|
|
122
136
|
</script>
|
|
123
137
|
|
|
124
138
|
<template>
|
|
125
|
-
<
|
|
139
|
+
<DynamicFlag :code="countryCode" :width="48" :height="48" />
|
|
126
140
|
</template>
|
|
127
141
|
```
|
|
128
142
|
|
|
143
|
+
> [!CAUTION]
|
|
144
|
+
> `DynamicFlag` 适合离线优先且需要同步渲染运行时代码的场景，但会打包全部 400+ 国旗
|
|
145
|
+
> （约 ~600 KB，无法 tree-shaking）。若代码集合有限，优先使用具名导入或“具名导入 + map”。
|
|
146
|
+
|
|
129
147
|
### 其他使用示例
|
|
130
148
|
|
|
131
149
|
> [!TIP]
|
|
@@ -135,23 +153,25 @@ const FlagComponent = computed(() => {
|
|
|
135
153
|
|
|
136
154
|
### 属性
|
|
137
155
|
|
|
138
|
-
| 属性
|
|
139
|
-
|
|
|
140
|
-
| `width`
|
|
141
|
-
| `height`
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
156
|
+
| 属性 | 类型 | 默认值 | 描述 |
|
|
157
|
+
| ----------- | ------------------ | ------ | ------------------- |
|
|
158
|
+
| `width` | `number \| string` | `48` | 国旗宽度 |
|
|
159
|
+
| `height` | `number \| string` | `48` | 国旗高度 |
|
|
160
|
+
| `title` | `string` | code | SVG 的无障碍标题 |
|
|
161
|
+
| `class` | `string` | - | Vue 标准 class 绑定 |
|
|
162
|
+
| `className` | `string` | - | 可选 className 别名 |
|
|
144
163
|
|
|
145
164
|
### 尺寸预设
|
|
146
165
|
|
|
147
|
-
| 尺寸
|
|
148
|
-
|
|
|
149
|
-
| `xs`
|
|
150
|
-
| `sm`
|
|
151
|
-
| `md`
|
|
152
|
-
| `lg`
|
|
153
|
-
| `xl`
|
|
154
|
-
| `
|
|
166
|
+
| 尺寸 | 像素 |
|
|
167
|
+
| ------ | ----- |
|
|
168
|
+
| `xs` | 16px |
|
|
169
|
+
| `sm` | 24px |
|
|
170
|
+
| `md` | 32px |
|
|
171
|
+
| `lg` | 48px |
|
|
172
|
+
| `xl` | 64px |
|
|
173
|
+
| `xxl` | 96px |
|
|
174
|
+
| `xxxl` | 128px |
|
|
155
175
|
|
|
156
176
|
### 构建元信息
|
|
157
177
|
|
|
@@ -237,7 +257,7 @@ import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
|
|
|
237
257
|
|
|
238
258
|
## 🤝 贡献
|
|
239
259
|
|
|
240
|
-
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解贡献指南。
|
|
260
|
+
请参阅 [CONTRIBUTING.md](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/CONTRIBUTING.md) 了解贡献指南。
|
|
241
261
|
|
|
242
262
|
## 📄 许可证
|
|
243
263
|
|