Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/checkbox/demo.vue

@@ -53,12 +53,12 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroup')">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup1">
+        <nut-checkbox-group v-model="checkboxgroup1">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
@@ -67,21 +67,21 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('disableGroup')">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup1" disabled>
+        <nut-checkbox-group v-model="checkboxgroup1" disabled>
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('selectGroup')">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">
+        <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
           <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{
             item.value
           }}</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">{{
@@ -95,12 +95,12 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroupLimit')">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup4" :max="2">
+        <nut-checkbox-group v-model="checkboxgroup4" :max="2">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
@@ -113,7 +113,7 @@
           translate('selectAll')
         }}</nut-checkbox>
       </nut-cell>
-      <nut-checkboxgroup v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+      <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
         <nut-cell
           ><nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox></nut-cell
         >
@@ -126,7 +126,7 @@
         <nut-cell
           ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox></nut-cell
         >
-      </nut-checkboxgroup>
+      </nut-checkbox-group>
     </nut-cell-group>
   </div>
 </template>

src/packages/__VUE/checkbox/doc.en-US.md

@@ -193,12 +193,12 @@ When the value changes, the `change` event will be triggered
 
 ```html
 <template>
-  <nut-checkboxgroup v-model="checkboxgroup1">
+  <nut-checkbox-group v-model="checkboxgroup1">
     <nut-checkbox label="1">Combined check box</nut-checkbox>
     <nut-checkbox label="2">Combined check box</nut-checkbox>
     <nut-checkbox label="3">Combined check box</nut-checkbox>
     <nut-checkbox label="4">Combined check box</nut-checkbox>
-  </nut-checkboxgroup>
+  </nut-checkbox-group>
   <nut-cell>
     <div class="demo-check">Currently selected value</div>
     <div>{{ checkboxgroup1 }}</div>
@@ -227,9 +227,9 @@ When the value changes, the `change` event will be triggered
 
 ```html
 <template>
-  <nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">
+  <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
     <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{item.value}}</nut-checkbox>
-  </nut-checkboxgroup>
+  </nut-checkbox-group>
   <span class="btn">
     <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">Select all</nut-button>
     <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">cancel</nut-button>
@@ -284,12 +284,12 @@ When the value changes, the `change` event will be triggered
 <template>
   <nut-cell-group title="use checkboxGroup, Limit the maximum number of options (2)">
     <nut-cell>
-      <nut-checkboxgroup v-model="checkboxgroup4" :max="2">
+      <nut-checkbox-group v-model="checkboxgroup4" :max="2">
         <nut-checkbox label="1" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox>
         <nut-checkbox label="2">Combined check box</nut-checkbox>
         <nut-checkbox label="3" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox>
         <nut-checkbox label="4">Combined check box</nut-checkbox>
-      </nut-checkboxgroup>
+      </nut-checkbox-group>
     </nut-cell>
     <nut-cell>
       <div class="demo-check">selected</div>
@@ -325,12 +325,12 @@ When the value changes, the `change` event will be triggered
     <nut-cell>
       <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">selectAll</nut-checkbox>
     </nut-cell>
-    <nut-checkboxgroup v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+    <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
       <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="2">Combined check box</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="3">Combined check box</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="4">Combined check box</nut-checkbox></nut-cell>
-    </nut-checkboxgroup>
+    </nut-checkbox-group>
   </nut-cell-group>
 </template>
 <script lang="ts">

src/packages/__VUE/checkbox/doc.md

@@ -193,12 +193,12 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-checkboxgroup v-model="checkboxgroup1">
+  <nut-checkbox-group v-model="checkboxgroup1">
     <nut-checkbox label="1">组合复选框</nut-checkbox>
     <nut-checkbox label="2">组合复选框</nut-checkbox>
     <nut-checkbox label="3">组合复选框</nut-checkbox>
     <nut-checkbox label="4">组合复选框</nut-checkbox>
-  </nut-checkboxgroup>
+  </nut-checkbox-group>
   <nut-cell>
     <div class="demo-check">当前选中值</div>
     <div>{{ checkboxgroup1 }}</div>
@@ -227,9 +227,9 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">
+  <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
     <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{item.value}}</nut-checkbox>
-  </nut-checkboxgroup>
+  </nut-checkbox-group>
   <span class="btn">
     <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">全选</nut-button>
     <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">取消</nut-button>
@@ -284,12 +284,12 @@ app.use(Icon);
 <template>
   <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
     <nut-cell>
-      <nut-checkboxgroup v-model="checkboxgroup4" :max="2">
+      <nut-checkbox-group v-model="checkboxgroup4" :max="2">
         <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
         <nut-checkbox label="2">组合复选框</nut-checkbox>
         <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
         <nut-checkbox label="4">组合复选框</nut-checkbox>
-      </nut-checkboxgroup>
+      </nut-checkbox-group>
     </nut-cell>
     <nut-cell>
       <div class="demo-check">选中</div>
@@ -326,12 +326,12 @@ app.use(Icon);
     <nut-cell>
       <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">全选</nut-checkbox>
     </nut-cell>
-    <nut-checkboxgroup v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+    <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
       <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
-    </nut-checkboxgroup>
+    </nut-checkbox-group>
   </nut-cell-group>
 </template>
 <script lang="ts">

src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.ts

@@ -6,17 +6,17 @@ import { reactive, toRefs } from 'vue';
 test('checkbox-group basic usage', async () => {
   const wrapper = mount({
     components: {
-      'nut-checkboxgroup': Checkboxgroup,
+      'nut-checkbox-group': Checkboxgroup,
       'nut-checkbox': Checkbox
     },
     template: `
       <template>
-        <nut-checkboxgroup v-model="checkboxgroup1">
+        <nut-checkbox-group v-model="checkboxgroup1">
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </template>
     `,
     setup() {
@@ -36,17 +36,17 @@ test('checkbox-group basic usage', async () => {
 test('checkbox-group disabled test', async () => {
   const wrapper = mount({
     components: {
-      'nut-checkboxgroup': Checkboxgroup,
+      'nut-checkbox-group': Checkboxgroup,
       'nut-checkbox': Checkbox
     },
     template: `
       <template>
-        <nut-checkboxgroup v-model="checkboxgroup1" disabled>
+        <nut-checkbox-group v-model="checkboxgroup1" disabled>
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </template>
     `,
     setup() {
@@ -67,17 +67,17 @@ test('checkbox-group disabled test', async () => {
 // test('checkbox-group change event test',async () => {
 //   const wrapper = mount({
 //     components: {
-//       'nut-checkboxgroup': Checkboxgroup,
+//       'nut-checkbox-group': Checkboxgroup,
 //       'nut-checkbox': Checkbox
 //     },
 //     template: `
 //       <template>
-//         <nut-checkboxgroup v-model="checkboxgroup1" @change="">
+//         <nut-checkbox-group v-model="checkboxgroup1" @change="">
 //           <nut-checkbox label="1">组合复选框</nut-checkbox>
 //           <nut-checkbox label="2">组合复选框</nut-checkbox>
 //           <nut-checkbox label="3">组合复选框</nut-checkbox>
 //           <nut-checkbox label="4">组合复选框</nut-checkbox>
-//         </nut-checkboxgroup>
+//         </nut-checkbox-group>
 //       </template>
 //     `,
 //     setup() {

src/packages/__VUE/checkboxgroup/index.vue

@@ -2,7 +2,7 @@
 import { h, watch, provide, computed, ComponentInternalInstance, reactive, ComponentPublicInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
-const { create, componentName } = createComponent('checkboxgroup');
+const { create, componentName } = createComponent('checkbox-group');
 
 export default create({
   props: {
@@ -84,7 +84,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}`
+          class: 'nut-checkboxgroup'
         },
         slots.default?.()
       );

src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue

@@ -45,12 +45,12 @@
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup使用">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup1">
+        <nut-checkbox-group v-model="checkboxgroup1">
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">当前选中值</div>
@@ -59,21 +59,21 @@
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup禁用">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup1" disabled>
+        <nut-checkbox-group v-model="checkboxgroup1" disabled>
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup 全选/取消">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">
+        <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
           <nut-checkbox :key="item.label" v-for="item in checkboxsource" :label="item.label">{{
             item.value
           }}</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 10px 0 0">全选</nut-button>
@@ -83,12 +83,12 @@
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
       <nut-cell>
-        <nut-checkboxgroup v-model="checkboxgroup4" :max="2">
+        <nut-checkbox-group v-model="checkboxgroup4" :max="2">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkboxgroup>
+        </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">当前选中值</div>
@@ -99,12 +99,12 @@
       <nut-cell>
         <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">全选</nut-checkbox>
       </nut-cell>
-      <nut-checkboxgroup v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+      <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
         <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
         <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
         <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
         <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
-      </nut-checkboxgroup>
+      </nut-checkbox-group>
     </nut-cell-group>
   </div>
 </template>