From daf3468211adcd1b50eef1bb4f28d902c34f381c Mon Sep 17 00:00:00 2001
From: chouchouji <1305974212@qq.com>
Date: Mon, 20 May 2024 21:44:45 +0800
Subject: [PATCH] docs(checkbox-group): improve docs example

---
 .../src/checkbox-group/docs/en-US.md          | 19 +++++++++++++++
 .../src/checkbox-group/docs/zh-CN.md          | 19 +++++++++++++++
 .../src/checkbox-group/example/index.vue      | 24 +++++++++++++++++--
 .../checkbox-group/example/locale/en-US.ts    |  1 +
 .../checkbox-group/example/locale/zh-CN.ts    |  1 +
 5 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/packages/varlet-ui/src/checkbox-group/docs/en-US.md b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
index 12ec3fec982..44621cce513 100644
--- a/packages/varlet-ui/src/checkbox-group/docs/en-US.md
+++ b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
@@ -166,6 +166,25 @@ const value = ref([])
 </template>
 ```
 
+### Maximum Number Of Checked
+
+In a checkbox group, you can limit the maximum number of selections by setting `max`.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref([])
+</script>
+
+<template>
+  <var-checkbox-group v-model="value" :max="1">
+    <var-checkbox :checked-value="0">Eat</var-checkbox>
+    <var-checkbox :checked-value="1">Sleep</var-checkbox>
+  </var-checkbox-group>
+</template>
+```
+
 ### Checkbox Validation
 
 ```html
diff --git a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
index ad2b20abd19..2cf3ef78cd4 100644
--- a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
+++ b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
@@ -166,6 +166,25 @@ const value = ref([])
 </template>
 ```
 
+### 最大选中数量
+
+在复选框组中，可以通过设置 `max` 属性来限制最大选中数量。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref([])
+</script>
+
+<template>
+  <var-checkbox-group v-model="value" :max="1">
+    <var-checkbox :checked-value="0">吃饭</var-checkbox>
+    <var-checkbox :checked-value="1">睡觉</var-checkbox>
+  </var-checkbox-group>
+</template>
+```
+
 ### 复选框字段校验
 
 ```html
diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
index eb4fd23cd60..e16ebb16621 100644
--- a/packages/varlet-ui/src/checkbox-group/example/index.vue
+++ b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -14,12 +14,26 @@ const values = reactive({
   value8: [],
   value9: [],
   value10: false,
+  value11: [],
   group: null,
   indeterminate: true,
 })
 
-const { value, value2, value3, value4, value5, value6, value7, value8, value9, group, value10, indeterminate } =
-  toRefs(values)
+const {
+  value,
+  value2,
+  value3,
+  value4,
+  value5,
+  value6,
+  value7,
+  value8,
+  value9,
+  group,
+  value10,
+  value11,
+  indeterminate,
+} = toRefs(values)
 
 watchLang(use)
 onThemeChange()
@@ -78,6 +92,12 @@ onThemeChange()
   </var-checkbox-group>
   <div class="relation">{{ t('currentValue') }} {{ value9 }}</div>
 
+  <app-type>{{ t('max') }}</app-type>
+  <var-checkbox-group v-model="value11" :max="1">
+    <var-checkbox :checked-value="0">{{ t('eat') }}</var-checkbox>
+    <var-checkbox :checked-value="1">{{ t('sleep') }}</var-checkbox>
+  </var-checkbox-group>
+
   <app-type>{{ t('checkboxValidate') }}</app-type>
   <var-checkbox v-model="value7" :rules="[(v) => v || t('checkboxValidateMessage')]">
     {{ t('currentValue') }} {{ value7 }}
diff --git a/packages/varlet-ui/src/checkbox-group/example/locale/en-US.ts b/packages/varlet-ui/src/checkbox-group/example/locale/en-US.ts
index 1fa4f374f83..ea4df00b100 100644
--- a/packages/varlet-ui/src/checkbox-group/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/checkbox-group/example/locale/en-US.ts
@@ -18,4 +18,5 @@ export default {
   indeterminate: 'Indeterminate',
   indeterminateValue: 'Current value:',
   toggle: 'Toggle',
+  max: 'Maximum Number Of Checked',
 }
diff --git a/packages/varlet-ui/src/checkbox-group/example/locale/zh-CN.ts b/packages/varlet-ui/src/checkbox-group/example/locale/zh-CN.ts
index 8ca989a0d5a..9ded625a091 100644
--- a/packages/varlet-ui/src/checkbox-group/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/checkbox-group/example/locale/zh-CN.ts
@@ -18,4 +18,5 @@ export default {
   indeterminate: '不确定状态',
   indeterminateValue: '不确定状态的值:',
   toggle: '切换',
+  max: '最大选中数量',
 }