chore: 组件使用名称变更 (#1924)

* chore: addresslist 使用名称变更

* chore: infiniteloading 使用名称变更

* chore: circleprogress 使用名称变更

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/addresslist/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       @delIcon="delClick"
       @editIcon="editClick"
@@ -9,9 +9,9 @@
       :showBottomButton="false"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
     <h2>{{ translate('title1') }}</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       long-Press
       :showBottomButton="false"
@@ -23,9 +23,9 @@
       @longDel="delClick"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
     <h2>{{ translate('title1') }}</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       swipeEdition
       showBottomButton
@@ -36,14 +36,14 @@
       @add="addAddress"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
   </div>
 </template>
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { reactive, ref } from 'vue';
-const { createDemo, translate } = createComponent('addresslist');
+const { createDemo, translate } = createComponent('address-list');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({

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

@@ -23,7 +23,7 @@ app.use(Button);
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     @delIcon="delClick"
     @editIcon="editClick"
@@ -31,7 +31,7 @@ app.use(Button);
     :show-bottom-button="false"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
@@ -89,7 +89,7 @@ export default {
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     long-press
     :show-bottom-button="false"
@@ -101,7 +101,7 @@ export default {
     @longPressDelClick="delClick"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
@@ -167,7 +167,7 @@ export default {
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     swipe-edition
     show-bottom-button
@@ -178,7 +178,7 @@ export default {
     @add="addAddress"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';

src/packages/__VUE/addresslist/doc.md

@@ -24,7 +24,7 @@ app.use(Button);
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     @delIcon="delClick"
     @editIcon="editClick"
@@ -32,7 +32,7 @@ app.use(Button);
     :show-bottom-button="false"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
@@ -91,7 +91,7 @@ export default {
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     long-press
     :show-bottom-button="false"
@@ -103,7 +103,7 @@ export default {
     @longPressDelClick="delClick"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
@@ -170,7 +170,7 @@ export default {
 
 ```html
 <template>
-  <nut-addresslist
+  <nut-address-list
     :data="data"
     swipe-edition
     show-bottom-button
@@ -181,7 +181,7 @@ export default {
     @add="addAddress"
     :dataMapOptions="dataMapOptions"
   >
-  </nut-addresslist>
+  </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';

src/packages/__VUE/addresslist/index.taro.vue

@@ -60,7 +60,7 @@
 <script lang="ts">
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('addresslist');
+const { componentName, create, translate } = createComponent('address-list');
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
@@ -105,7 +105,7 @@ export default create({
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-addresslist';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/addresslist/index.vue

@@ -60,7 +60,7 @@
 <script lang="ts">
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('addresslist');
+const { componentName, create, translate } = createComponent('address-list');
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
@@ -105,7 +105,7 @@ export default create({
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-addresslist';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/circleprogress/demo.vue

@@ -2,29 +2,29 @@
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="20"> </nut-circleprogress>
+      <nut-circle-progress :progress="20"> </nut-circle-progress>
     </div>
     <h2>{{ translate('customWidth') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" strokeWidth="10"> </nut-circleprogress>
+      <nut-circle-progress :progress="50" strokeWidth="10"> </nut-circle-progress>
     </div>
 
     <h2>{{ translate('Gradient') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" color="red" />
-      <nut-circleprogress :progress="100" :color="gradientColor" />
+      <nut-circle-progress :progress="50" color="red" />
+      <nut-circle-progress :progress="100" :color="gradientColor" />
     </div>
     <h2>{{ translate('customSize') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" radius="60"></nut-circleprogress>
+      <nut-circle-progress :progress="50" radius="60"></nut-circle-progress>
     </div>
     <h2>{{ translate('customContent') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" radius="60">{{ translate('custom') }}</nut-circleprogress>
+      <nut-circle-progress :progress="50" radius="60">{{ translate('custom') }}</nut-circle-progress>
     </div>
     <h2>{{ translate('dynamicChange') }}</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="percent"> </nut-circleprogress>
+      <nut-circle-progress :progress="percent"> </nut-circle-progress>
     </div>
     <div class="demo__btn">
       <nut-button type="primary" @click="setReduceVal">{{ translate('reduce') }}</nut-button>
@@ -35,7 +35,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('circleprogress');
+const { createDemo, translate } = createComponent('circle-progress');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({

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

@@ -22,7 +22,7 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="20"> </nut-circleprogress>
+     <nut-circle-progress :progress="20"> </nut-circle-progress>
    </nut-cell>
 </template>
 ```
@@ -33,7 +33,7 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" strokeWidth="10"> </nut-circleprogress>
+     <nut-circle-progress :progress="50" strokeWidth="10"> </nut-circle-progress>
    </nut-cell>
 </template>
 ```
@@ -45,8 +45,8 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-    <nut-circleprogress :progress="50" color="red" />
-      <nut-circleprogress :progress="100" :color="gradientColor" />
+    <nut-circle-progress :progress="50" color="red" />
+      <nut-circle-progress :progress="100" :color="gradientColor" />
    </nut-cell>
 </template>
 <script>
@@ -71,7 +71,7 @@ export default{
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" radius="60"></nut-circleprogress>
+     <nut-circle-progress :progress="50" radius="60"></nut-circle-progress>
     </nut-cell>
 </template>
 ```
@@ -84,7 +84,7 @@ export default{
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" radius="60">content</nut-circleprogress>
+     <nut-circle-progress :progress="50" radius="60">content</nut-circle-progress>
     </nut-cell>
 </template>
 ```
@@ -95,7 +95,7 @@ export default{
 ```html
 <template>
   <div>
-     <nut-circleprogress :progress="percent"></nut-circleprogress>
+     <nut-circle-progress :progress="percent"></nut-circle-progress>
   </div>
   <div>
     <nut-button type="primary" @click="setReduceVal">reduce</nut-button>

src/packages/__VUE/circleprogress/doc.md

@@ -22,7 +22,7 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="20"> </nut-circleprogress>
+     <nut-circle-progress :progress="20"> </nut-circle-progress>
    </nut-cell>
 </template>
 ```
@@ -33,7 +33,7 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" strokeWidth="10"> </nut-circleprogress>
+     <nut-circle-progress :progress="50" strokeWidth="10"> </nut-circle-progress>
    </nut-cell>
 </template>
 ```
@@ -45,8 +45,8 @@ app.use(CircleProgress);
 ```html
 <template>
     <nut-cell>
-    <nut-circleprogress :progress="50" color="red" />
-      <nut-circleprogress :progress="100" :color="gradientColor" />
+    <nut-circle-progress :progress="50" color="red" />
+      <nut-circle-progress :progress="100" :color="gradientColor" />
    </nut-cell>
 </template>
 <script>
@@ -71,7 +71,7 @@ export default{
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" radius="60"></nut-circleprogress>
+     <nut-circle-progress :progress="50" radius="60"></nut-circle-progress>
     </nut-cell>
 </template>
 ```
@@ -84,7 +84,7 @@ export default{
 ```html
 <template>
     <nut-cell>
-     <nut-circleprogress :progress="50" radius="60">自定义</nut-circleprogress>
+     <nut-circle-progress :progress="50" radius="60">自定义</nut-circle-progress>
     </nut-cell>
 </template>
 ```
@@ -95,7 +95,7 @@ export default{
 ```html
 <template>
   <div>
-     <nut-circleprogress :progress="percent"></nut-circleprogress>
+     <nut-circle-progress :progress="percent"></nut-circle-progress>
   </div>
   <div>
     <nut-button type="primary" @click="setReduceVal">减少</nut-button>

src/packages/__VUE/circleprogress/index.taro.vue

@@ -11,7 +11,7 @@
 <script lang="ts">
 import { computed, ref, watch, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('circleprogress');
+const { componentName, create } = createComponent('circle-progress');
 interface Item {
   key?: string;
   value?: string;
@@ -51,7 +51,7 @@ export default create({
   setup(props, { emit }) {
     const slotDefault = !!useSlots().default;
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-circleprogress';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/circleprogress/index.vue

@@ -30,12 +30,13 @@
 import { computed, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { isObject } from '@/packages/utils/util';
+const { componentName, create } = createComponent('circle-progress');
 import type { PropType } from 'vue';
-const { componentName, create } = createComponent('circleprogress');
 export interface stopArr {
   key: string;
   value: string;
 }
+
 export default create({
   props: {
     progress: {
@@ -72,7 +73,7 @@ export default create({
     const slotDefault = !!useSlots().default;
     const refRandomId = Math.random().toString(36).slice(-8);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-circleprogress';
       return {
         [prefixCls]: true
       };

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

@@ -16,18 +16,18 @@ afterAll(() => {
 test('infiniteloading base', async () => {
   const wrapper = mount({
     components: {
-      'nut-infiniteloading': InfiniteLoading,
+      'nut-infinite-loading': InfiniteLoading,
       'nut-icon': NutIcon
     },
     template: `
     <div class="box" style="height:300px;overflow:auto">
-      <nut-infiniteloading
+      <nut-infinite-loading
         v-model="infiteValue"
         :has-more="hasMore"
         load-more-txt="没有啦～"
         @load-more="loadMore">
           <div style='height: 50px;' v-for="(item, index) in defultList" :key="index">{{item}}</div>
-      </nut-infiniteloading>
+      </nut-infinite-loading>
     </div>
     `,
     setup() {

src/packages/__VUE/infiniteloading/demo.vue

@@ -3,15 +3,15 @@
     <nut-tabs v-model="tabsValue" animatedTime="0" @change="chagetabs">
       <nut-tabpane :title="translate('basic')">
         <ul class="infiniteUl">
-          <nut-infiniteloading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
+          <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
             <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-          </nut-infiniteloading>
+          </nut-infinite-loading>
         </ul>
       </nut-tabpane>
 
       <nut-tabpane :title="translate('customTxt')">
         <ul class="infiniteUl">
-          <nut-infiniteloading
+          <nut-infinite-loading
             v-model="infinityValue2"
             load-txt="Loading..."
             :load-more-txt="translate('none')"
@@ -19,7 +19,7 @@
             @load-more="customLoadMore"
           >
             <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
-          </nut-infiniteloading>
+          </nut-infinite-loading>
         </ul>
       </nut-tabpane>
     </nut-tabs>
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { onMounted, ref, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('infiniteloading');
+const { createDemo, translate } = createComponent('infinite-loading');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
 const initTranslate = () =>

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

@@ -21,13 +21,13 @@ Scrolling to the bottom of the list automatically loads more data.
 
 ```html
 <template>
-  <nut-infiniteloading
+  <nut-infinite-loading
       v-model="infinityValue"
       :has-more="hasMore"
       @load-more="loadMore"
   >
       <div class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</div>
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </template>
 
 <script>
@@ -60,7 +60,7 @@ Scrolling to the bottom of the list automatically loads more data.
 
 ```html
 <template>
-  <nut-infiniteloading
+  <nut-infinite-loading
     v-model="infinityValue2"
     load-txt="Loading..."
     load-more-txt="No more ~"
@@ -68,7 +68,7 @@ Scrolling to the bottom of the list automatically loads more data.
     @load-more="loadMore"
   >
     <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </template>
 
 <script>

src/packages/__VUE/infiniteloading/doc.md

@@ -22,13 +22,13 @@
 
 ```html
 <template>
-  <nut-infiniteloading
+  <nut-infinite-loading
       v-model="infinityValue"
       :has-more="hasMore"
       @load-more="loadMore"
   >
       <div class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</div>
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </template>
 
 <script>
@@ -61,7 +61,7 @@
 
 ```html
 <template>
-  <nut-infiniteloading
+  <nut-infinite-loading
     v-model="infinityValue2"
     load-txt="Loading..."
     load-more-txt="没有啦~"
@@ -69,7 +69,7 @@
     @load-more="loadMore"
   >
     <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </template>
 
 <script>

src/packages/__VUE/infiniteloading/doc.taro.md

@@ -24,7 +24,7 @@
 
 ```html
 <div class="infiniteUl" id="scrollDemo">
-  <nut-infiniteloading
+  <nut-infinite-loading
     pull-icon="JD"
     load-txt="loading"
     load-more-txt="没有啦～"
@@ -40,7 +40,7 @@
       :key="index"
       >{{ item }}</div
     >
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </div>
 ```
 ```javascript

src/packages/__VUE/infiniteloading/index.vue

@@ -35,7 +35,7 @@ import {
   nextTick
 } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('infiniteloading');
+const { componentName, create, translate } = createComponent('infinite-loading');
 import { useScrollParent } from '@/packages/utils/useScrollParent';
 import requestAniFrame from '@/packages/utils/raf';
 import { getScrollTopRoot } from '@/packages/utils/util';
@@ -93,7 +93,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-infiniteloading';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/pullrefresh/doc.taro.md

@@ -24,7 +24,7 @@
 
 ```html
 <div class="infiniteUl" id="scrollDemo">
-  <nut-infiniteloading
+  <nut-infinite-loading
     pull-icon="JD"
     load-txt="loading"
     load-more-txt="没有啦～"
@@ -40,7 +40,7 @@
       :key="index"
       >{{ item }}</div
     >
-  </nut-infiniteloading>
+  </nut-infinite-loading>
 </div>
 ```
 ```javascript

src/sites/mobile-taro/vue/src/business/pages/addresslist/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       @delIcon="delClick"
       @editIcon="editClick"
@@ -9,9 +9,9 @@
       :showBottomButton="false"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
     <h2>长按功能</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       longPress
       :showBottomButton="false"
@@ -23,9 +23,9 @@
       @longDel="delClick"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
     <h2>滑动功能</h2>
-    <nut-addresslist
+    <nut-address-list
       :data="data"
       swipeEdition
       showBottomButton
@@ -36,7 +36,7 @@
       @add="addAddress"
       :dataMapOptions="dataMapOptions"
     >
-    </nut-addresslist>
+    </nut-address-list>
   </div>
 </template>
 

src/sites/mobile-taro/vue/src/exhibition/pages/circleprogress/index.vue

@@ -2,29 +2,29 @@
   <div class="demo full">
     <h2>基础用法</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="20"> </nut-circleprogress>
+      <nut-circle-progress :progress="20"> </nut-circle-progress>
     </div>
     <h2>环形进度条自定义宽度</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" strokeWidth="10"> </nut-circleprogress>
+      <nut-circle-progress :progress="50" strokeWidth="10"> </nut-circle-progress>
     </div>
 
     <h2>环形进度条自定义颜色(支持渐变色)</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" color="red" />
-      <nut-circleprogress :progress="100" :color="gradientColor" />
+      <nut-circle-progress :progress="50" color="red" />
+      <nut-circle-progress :progress="100" :color="gradientColor" />
     </div>
     <h2>环形进度条自定义大小</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" radius="60"></nut-circleprogress>
+      <nut-circle-progress :progress="50" radius="60"></nut-circle-progress>
     </div>
     <h2>环形进度条自定义内容</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" radius="60">自定义</nut-circleprogress>
+      <nut-circle-progress :progress="50" radius="60">自定义</nut-circle-progress>
     </div>
     <h2>动态改变环形进度条的进度</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="percent"> </nut-circleprogress>
+      <nut-circle-progress :progress="percent"> </nut-circle-progress>
     </div>
     <div class="demo__btn">
       <nut-button type="primary" @click="setReduceVal">减少</nut-button>

src/sites/mobile-taro/vue/src/feedback/pages/infiniteloading/index.vue

@@ -3,7 +3,7 @@
     <h2>基础演示</h2>
     <nut-cell>
       <view class="infiniteUl" id="scrollDemo">
-        <nut-infiniteloading
+        <nut-infinite-loading
           pull-icon="JD"
           load-txt="loading"
           load-more-txt="没有啦～"
@@ -14,7 +14,7 @@
           @refresh="refresh"
         >
           <view class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</view>
-        </nut-infiniteloading>
+        </nut-infinite-loading>
       </view>
     </nut-cell>
   </view>