sohelp-eleplus 1.1.24 → 1.1.26

package/icons/flag/TurkeyFlag.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#e30a17" d="M0 0h900v600H0z"/>
+    <circle fill="#fff" cx="450" cy="300" r="120"/>
+    <circle fill="#e30a17" cx="480" cy="300" r="96"/>
+    <path fill="#fff" d="M626 260l16 7-16 7 6-17z" transform="rotate(18, 600, 300)"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TurkeyFlag'
+}
+</script>

package/icons/flag/UkFlag.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+    <path fill="#012169" d="M0 0h640v480H0z"/>
+    <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+    <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+    <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+    <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+  </svg>
+</template>

package/icons/flag/UsaFlag.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+    <path fill="#bd3d44" d="M0 0h640v480H0"/>
+    <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+    <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+    <marker id="us-a" markerHeight="30" markerWidth="30">
+      <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+    </marker>
+    <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/>
+  </svg>
+</template>

package/icons/flag/VietnamFlag.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#da251d" d="M0 0h900v600H0z"/>
+    <path fill="#ffff00" d="M450 300l42-126-108 78h133.6l-108-78L451.6 426z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VietnamFlag'
+}
+</script>

package/icons/flag/index.js

@@ -0,0 +1,97 @@
+export { default as UsaFlag } from './UsaFlag.vue';
+export { default as ChinaFlag } from './ChinaFlag.vue';
+export { default as EuropeFlag } from './EuropeFlag.vue';
+export { default as UkFlag } from './UkFlag.vue';
+export { default as JapanFlag } from './JapanFlag.vue';
+export { default as KoreaFlag } from './KoreaFlag.vue';
+export { default as HongkongFlag } from './HongkongFlag.vue';
+export { default as SingaporeFlag } from './SingaporeFlag.vue';
+export { default as AustraliaFlag } from './AustraliaFlag.vue';
+export { default as CanadaFlag } from './CanadaFlag.vue';
+export { default as SwitzerlandFlag } from './SwitzerlandFlag.vue';
+export { default as SwedenFlag } from './SwedenFlag.vue';
+export { default as NorwayFlag } from './NorwayFlag.vue';
+export { default as DenmarkFlag } from './DenmarkFlag.vue';
+export { default as MalaysiaFlag } from './MalaysiaFlag.vue';
+export { default as ThailandFlag } from './ThailandFlag.vue';
+export { default as IndiaFlag } from './IndiaFlag.vue';
+export { default as RussiaFlag } from './RussiaFlag.vue';
+export { default as BrazilFlag } from './BrazilFlag.vue';
+export { default as SouthAfricaFlag } from './SouthAfricaFlag.vue';
+export { default as MexicoFlag } from './MexicoFlag.vue';
+export { default as PhilippinesFlag } from './PhilippinesFlag.vue';
+export { default as IndonesiaFlag } from './IndonesiaFlag.vue';
+export { default as VietnamFlag } from './VietnamFlag.vue';
+export { default as NewZealandFlag } from './NewZealandFlag.vue';
+export { default as TurkeyFlag } from './TurkeyFlag.vue';
+export { default as PolandFlag } from './PolandFlag.vue';
+
+// 币别代码到国旗组件的映射（用于动态导入）
+export const FlagMap = {
+  usd: () => import('./UsaFlag.vue'),
+  cny: () => import('./ChinaFlag.vue'),
+  eur: () => import('./EuropeFlag.vue'),
+  gbp: () => import('./UkFlag.vue'),
+  jpy: () => import('./JapanFlag.vue'),
+  krw: () => import('./KoreaFlag.vue'),
+  hkd: () => import('./HongkongFlag.vue'),
+  aud: () => import('./AustraliaFlag.vue'),
+  cad: () => import('./CanadaFlag.vue'),
+  chf: () => import('./SwitzerlandFlag.vue'),
+  sgd: () => import('./SingaporeFlag.vue'),
+  myr: () => import('./MalaysiaFlag.vue'),
+  thb: () => import('./ThailandFlag.vue'),
+  inr: () => import('./IndiaFlag.vue'),
+  rub: () => import('./RussiaFlag.vue'),
+  brl: () => import('./BrazilFlag.vue'),
+  zar: () => import('./SouthAfricaFlag.vue'),
+  mxn: () => import('./MexicoFlag.vue'),
+  php: () => import('./PhilippinesFlag.vue'),
+  idr: () => import('./IndonesiaFlag.vue'),
+  vnd: () => import('./VietnamFlag.vue'),
+  nzd: () => import('./NewZealandFlag.vue'),
+  try: () => import('./TurkeyFlag.vue'),
+  pln: () => import('./PolandFlag.vue'),
+  sek: () => import('./SwedenFlag.vue'),
+  nok: () => import('./NorwayFlag.vue'),
+  dkk: () => import('./DenmarkFlag.vue')
+};
+
+// 国家代码到货币代码的映射
+export const CountryCodeToCurrency = {
+  US: 'usd', CN: 'cny', GB: 'gbp', JP: 'jpy', KR: 'krw', HK: 'hkd',
+  SG: 'sgd', AU: 'aud', CA: 'cad', CH: 'chf', MY: 'myr', TH: 'thb',
+  IN: 'inr', RU: 'rub', BR: 'brl', ZA: 'zar', MX: 'mxn', PH: 'php',
+  ID: 'idr', VN: 'vnd', NZ: 'nzd', TR: 'try', PL: 'pln', SE: 'sek',
+  NO: 'nok', DK: 'dkk'
+};
+
+// 国家名称映射
+export const CountryNameMap = {
+  US: { zh: '美国', en: 'United States' },
+  CN: { zh: '中国', en: 'China' },
+  GB: { zh: '英国', en: 'United Kingdom' },
+  JP: { zh: '日本', en: 'Japan' },
+  KR: { zh: '韩国', en: 'South Korea' },
+  HK: { zh: '香港', en: 'Hong Kong' },
+  SG: { zh: '新加坡', en: 'Singapore' },
+  AU: { zh: '澳大利亚', en: 'Australia' },
+  CA: { zh: '加拿大', en: 'Canada' },
+  CH: { zh: '瑞士', en: 'Switzerland' },
+  MY: { zh: '马来西亚', en: 'Malaysia' },
+  TH: { zh: '泰国', en: 'Thailand' },
+  IN: { zh: '印度', en: 'India' },
+  RU: { zh: '俄罗斯', en: 'Russia' },
+  BR: { zh: '巴西', en: 'Brazil' },
+  ZA: { zh: '南非', en: 'South Africa' },
+  MX: { zh: '墨西哥', en: 'Mexico' },
+  PH: { zh: '菲律宾', en: 'Philippines' },
+  ID: { zh: '印度尼西亚', en: 'Indonesia' },
+  VN: { zh: '越南', en: 'Vietnam' },
+  NZ: { zh: '新西兰', en: 'New Zealand' },
+  TR: { zh: '土耳其', en: 'Turkey' },
+  PL: { zh: '波兰', en: 'Poland' },
+  SE: { zh: '瑞典', en: 'Sweden' },
+  NO: { zh: '挪威', en: 'Norway' },
+  DK: { zh: '丹麦', en: 'Denmark' }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sohelp-eleplus",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "SohelpEleplus Extension Components",
   "public": true,
   "main": "index.js",

package/sohelp-country-select/README.md

@@ -0,0 +1,140 @@
+# 国家选择组件 (SohelpCountrySelect)
+
+支持国旗、中英文名称的国家选择组件，具备丝滑的动画过渡效果。
+
+## 特性
+
+- ✅ 支持 25 个主流国家/地区
+- ✅ 显示国旗图标 + 中文 + 英文名称
+- ✅ 支持搜索过滤
+- ✅ 可自定义显示/隐藏国旗
+- ✅ 丝滑的动画过渡效果
+- ✅ 选中状态高亮显示
+- ✅ 支持 v-model 双向绑定
+- ✅ 支持所有 el-select 原生属性和事件
+
+## 属性 (Props)
+
+| 属性名     | 类型    | 默认值 | 说明                              |
+| :--------- | :------ | :----- | :-------------------------------- |
+| modelValue | String  | ''     | 绑定值（国家代码，如 'CN', 'US'） |
+| showFlag   | Boolean | true   | 是否显示国旗                      |
+
+**其他属性**：支持通过 `v-bind` 传递所有 el-select 的原生属性，如 `placeholder`、`disabled`、`size`、`multiple` 等
+
+## 事件 (Events)
+
+| 事件名            | 说明         | 回调参数        |
+| :---------------- | :----------- | :-------------- |
+| update:modelValue | 值变化时触发 | (value: string) |
+
+**其他事件**：支持通过 `v-on` 绑定所有 el-select 的原生事件
+
+## 支持的国家
+
+| 代码 | 中文       | 英文           |
+| :--- | :--------- | :------------- |
+| US   | 美国       | United States  |
+| CN   | 中国       | China          |
+| GB   | 英国       | United Kingdom |
+| JP   | 日本       | Japan          |
+| KR   | 韩国       | South Korea    |
+| HK   | 香港       | Hong Kong      |
+| SG   | 新加坡     | Singapore      |
+| AU   | 澳大利亚   | Australia      |
+| CA   | 加拿大     | Canada         |
+| CH   | 瑞士       | Switzerland    |
+| MY   | 马来西亚   | Malaysia       |
+| TH   | 泰国       | Thailand       |
+| IN   | 印度       | India          |
+| RU   | 俄罗斯     | Russia         |
+| BR   | 巴西       | Brazil         |
+| ZA   | 南非       | South Africa   |
+| MX   | 墨西哥     | Mexico         |
+| PH   | 菲律宾     | Philippines    |
+| ID   | 印度尼西亚 | Indonesia      |
+| VN   | 越南       | Vietnam        |
+| NZ   | 新西兰     | New Zealand    |
+| TR   | 土耳其     | Turkey         |
+| PL   | 波兰       | Poland         |
+| SE   | 瑞典       | Sweden         |
+| NO   | 挪威       | Norway         |
+| DK   | 丹麦       | Denmark        |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <sohelp-country-select v-model="country" />
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const country = ref('CN');
+</script>
+```
+
+### 不显示国旗
+
+```vue
+<template>
+  <sohelp-country-select v-model="country" :show-flag="false" />
+</template>
+```
+
+### 自定义占位符
+
+```vue
+<template>
+  <sohelp-country-select v-model="country" placeholder="请选择国家" />
+</template>
+```
+
+### 禁用状态
+
+```vue
+<template>
+  <sohelp-country-select v-model="country" disabled placeholder="禁用状态" />
+</template>
+```
+
+### 不同尺寸
+
+```vue
+<template>
+  <div>
+    <sohelp-country-select v-model="country1" size="large" />
+    <sohelp-country-select v-model="country2" />
+    <sohelp-country-select v-model="country3" size="small" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const country1 = ref('CN');
+  const country2 = ref('US');
+  const country3 = ref('GB');
+</script>
+```
+
+### 事件监听
+
+```vue
+<template>
+  <sohelp-country-select v-model="country" @change="handleChange" />
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const country = ref('CN');
+
+  const handleChange = (value) => {
+    console.log('选择的国家:', value);
+  };
+</script>
+```

package/sohelp-country-select/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-select v-model="selectedValue" v-bind="$attrs" filterable clearable style="min-width: 180px">
+    <template #prefix v-if="showFlag && selectedFlag">
+      <component :is="selectedFlag" class="prefix-flag" />
+    </template>
+    <el-option
+      v-for="country in countries"
+      :key="country.code"
+      :label="`${country.nameZh} (${country.nameEn})`"
+      :value="country.code"
+    >
+      <div class="country-option">
+        <component :is="country.flag" class="country-flag" v-if="showFlag" />
+        <span>{{ country.nameZh }}</span>
+        <span class="name-en">({{ country.nameEn }})</span>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+  import { ref, defineAsyncComponent, watch, computed } from 'vue';
+  import { FlagMap, CountryCodeToCurrency, CountryNameMap } from '@/components/sohelp-eleplus/icons/flag';
+
+  // Props 定义
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    showFlag: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  // 生成国家列表数据，包含代码、中英文名称和对应的国旗组件
+  const countries = Object.entries(CountryNameMap).map(([code, names]) => ({
+    code,
+    nameZh: names.zh,
+    nameEn: names.en,
+    flag: defineAsyncComponent(FlagMap[CountryCodeToCurrency[code]])
+  }));
+
+  // 内部状态，用于绑定 el-select
+  const selectedValue = ref('');
+
+  // 计算属性：获取当前选中国家的国旗组件
+  const selectedFlag = computed(() => {
+    if (!selectedValue.value) return null;
+    return defineAsyncComponent(FlagMap[CountryCodeToCurrency[selectedValue.value]]);
+  });
+
+  // 监听外部传入的 modelValue，同步到内部状态
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      selectedValue.value = newVal;
+    },
+    { immediate: true }
+  );
+
+  // 监听内部选中值变化，通过 update:modelValue 事件同步到外部
+  watch(selectedValue, (newVal) => {
+    emit('update:modelValue', newVal);
+  });
+</script>
+
+<script>
+  export default {
+    name: 'SohelpCountrySelect'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .country-option {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.3s ease;
+
+    .country-flag {
+      width: 20px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #dcdfe6;
+      border-radius: 2px;
+      transition:
+        transform 0.3s ease,
+        border-color 0.3s ease;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .name-en {
+      color: #999;
+      font-size: 12px;
+    }
+  }
+
+  .prefix-flag {
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dcdfe6;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  :deep(.el-select__prefix) {
+    margin-right: 5px;
+    transition: opacity 0.3s ease;
+  }
+
+  // 选中状态动画
+  :deep(.el-select-dropdown__item.is-selected) {
+    .country-option {
+      .country-flag {
+        border-color: #409eff;
+        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+      }
+    }
+  }
+
+  // 下拉面板动画
+  :deep(.el-select-dropdown) {
+    transition: all 0.3s ease;
+  }
+
+  :deep(.el-select-dropdown__item) {
+    transition: all 0.3s ease;
+  }
+</style>

package/sohelp-cry-input/README.md

@@ -1,30 +1,211 @@
-# 金额输入框 (Cry Input)
+# 货币金额输入框 (SohelpCryInput)
 
-带货币单位的数值输入组件。
+支持国旗前缀、千分符、币别符、保留小数位数的货币数值输入组件。
 
 ## 属性 (Props)
 
 | 属性名 | 类型 | 默认值 | 说明 |
 | :--- | :--- | :--- | :--- |
-| unit | String | '￥' | 货币单位符号。 |
-| unitPosition | String | 'left' | 单位显示位置，可选值：'left', 'right'。 |
-| ... | - | - | 支持 `sohelp-number-input` 及 `el-input` 的其他属性。 |
+| modelValue | Number/String | '' | 绑定值（纯数字） |
+| separator | String | ',' | 千分符分隔符，如 "," |
+| cry | String | 'cny' | 币别代码，如 'usd', 'cny', 'eur' |
+| digits | Number | 2 | 保留小数位数 |
+| showFlag | Boolean | true | 是否显示币别国旗 |
+
+**其他属性**：支持通过 `v-bind` 传递所有 el-input 的原生属性，如 `placeholder`、`disabled`、`readonly`、`clearable`、`size`、`autofocus` 等
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| :--- | :--- | :--- |
+| update:modelValue | 失焦时触发，更新绑定值 | (value: number \| string \| '') |
+
+**其他事件**：支持通过 `v-on` 绑定所有 el-input 的原生事件，如 `focus`、`blur`、`clear`、`change` 等
+
+## 功能特性
+
+- ✅ 支持千分符格式化显示
+- ✅ 自动处理浮点数精度问题
+- ✅ 支持自定义千分符分隔符
+- ✅ 支持自定义小数位数
+- ✅ 支持 25 种主流货币
+- ✅ 国旗图标动态加载
+- ✅ 默认自动获取焦点（可通过 `:autofocus="false"` 禁用）
+- ✅ 完整透传 el-input 的所有属性和事件
+
+## 支持的币别 (Currency Codes)
+
+| 代码 | 国旗 | 货币 |
+| :--- | :--- | :--- |
+| usd | 🇺🇸 | 美元 USD |
+| cny | 🇨🇳 | 人民币 CNY |
+| eur | 🇪🇺 | 欧元 EUR |
+| gbp | 🇬🇧 | 英镑 GBP |
+| jpy | 🇯🇵 | 日元 JPY |
+| krw | 🇰🇷 | 韩元 KRW |
+| hkd | 🇭🇰 | 港币 HKD |
+| aud | 🇦🇺 | 澳元 AUD |
+| cad | 🇨🇦 | 加元 CAD |
+| sgd | 🇸🇬 | 新币 SGD |
+| myr | 🇲🇾 | 马来西亚林吉特 MYR |
+| thb | 🇹🇭 | 泰铢 THB |
+| inr | 🇮🇳 | 印度卢比 INR |
+| rub | 🇷🇺 | 俄罗斯卢布 RUB |
+| brl | 🇧🇷 | 巴西雷亚尔 BRL |
+| zar | 🇿🇦 | 南非兰特 ZAR |
+| mxn | 🇲🇽 | 墨西哥比索 MXN |
+| php | 🇵🇭 | 菲律宾比索 PHP |
+| idr | 🇮🇩 | 印尼盾 IDR |
+| vnd | 🇻🇳 | 越南盾 VND |
+| nzd | 🇳🇿 | 新西兰元 NZD |
+| try | 🇹🇷 | 土耳其里拉 TRY |
+| pln | 🇵🇱 | 波兰兹罗提 PLN |
+| sek | 🇸🇪 | 瑞典克朗 SEK |
+| nok | 🇳🇴 | 挪威克朗 NOK |
+| dkk | 🇩🇰 | 丹麦克朗 DKK |
 
 ## 使用示例
 
+### 基础用法
+
+```vue
+<template>
+  <sohelp-cry-input
+    v-model="value"
+    separator=","
+    cry="usd"
+    :digits="2"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(1234567.89);
+</script>
+```
+
+### 不同币别
+
+```vue
+<template>
+  <div class="demo">
+    <div class="item">
+      <label>美元 (USD)</label>
+      <sohelp-cry-input v-model="usd" separator="," cry="usd" :digits="2" />
+    </div>
+    <div class="item">
+      <label>人民币 (CNY)</label>
+      <sohelp-cry-input v-model="cny" separator="," cry="cny" :digits="2" />
+    </div>
+    <div class="item">
+      <label>欧元 (EUR)</label>
+      <sohelp-cry-input v-model="eur" separator="," cry="eur" :digits="2" />
+    </div>
+    <div class="item">
+      <label>日元 (JPY)</label>
+      <sohelp-cry-input v-model="jpy" separator="," cry="jpy" :digits="0" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const usd = ref(1234567.89);
+const cny = ref(1234567.89);
+const eur = ref(1234567.89);
+const jpy = ref(1234567);
+</script>
+```
+
+### 不显示国旗
+
 ```vue
 <template>
   <sohelp-cry-input
-    v-model="price"
-    unit="$"
-    unitPosition="left"
-    :precision="2"
+    v-model="value"
+    separator=","
+    cry="usd"
+    :digits="2"
+    :show-flag="false"
+  />
+</template>
+```
+
+### 不同小数位数
+
+```vue
+<template>
+  <sohelp-cry-input
+    v-model="value"
+    separator=","
+    cry="cny"
+    :digits="4"
+  />
+</template>
+```
+
+### 使用 v-bind 传递原生属性
+
+```vue
+<template>
+  <sohelp-cry-input
+    v-model="value"
+    v-bind="inputProps"
+    @focus="handleFocus"
+    @blur="handleBlur"
   />
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const price = ref(0);
+const value = ref(0);
+
+const inputProps = {
+  placeholder: '请输入金额',
+  disabled: false,
+  clearable: true,
+  size: 'large'
+};
+
+const handleFocus = () => {
+  console.log('获得焦点');
+};
+
+const handleBlur = () => {
+  console.log('失去焦点');
+};
 </script>
 ```
+
+### 禁用自动聚焦
+
+```vue
+<template>
+  <sohelp-cry-input
+    v-model="value"
+    :autofocus="false"
+  />
+</template>
+```
+
+### 禁用/只读状态
+
+```vue
+<template>
+  <div>
+    <sohelp-cry-input
+      v-model="value1"
+      disabled
+      placeholder="禁用状态"
+    />
+    <sohelp-cry-input
+      v-model="value2"
+      readonly
+      placeholder="只读状态"
+    />
+  </div>
+</template>
+```