docs(checkbox-group): improve docs example (#1627)

varletjs · May 20, 2024 · 039edaf · 039edaf
1 parent 1985659
commit 039edaf
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -18,4 +18,5 @@ export default {
   indeterminate: '不确定状态',
   indeterminateValue: '不确定状态的值:',
   toggle: '切换',
+  max: '最大选中数量',
 }