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

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

@@ -20,26 +20,26 @@ test('pull base', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 20);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('下拉刷新');
 
   trigger(track, 'touchmove', 0, 60);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('释放刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('释放刷新');
 
   trigger(track, 'touchend', 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('加载中...');
 
   triggerDrag(track, 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('加载中...');
 
   expect(wrapper.emitted('update:modelValue')).toBeTruthy();
   expect(wrapper.emitted('refresh')).toBeTruthy();
@@ -55,26 +55,26 @@ test('Custom loading text', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 20);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('用力拉');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('用力拉');
 
   trigger(track, 'touchmove', 0, 60);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('松开吧');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('松开吧');
 
   trigger(track, 'touchend', 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('玩命加载中...');
 
   triggerDrag(track, 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('玩命加载中...');
 
   expect(wrapper.emitted('update:modelValue')).toBeTruthy();
   expect(wrapper.emitted('refresh')).toBeTruthy();
@@ -88,13 +88,13 @@ test('Should allow to custom pull distance', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 100);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('下拉刷新');
 
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
   expect(wrapper.emitted('refresh')).toBeFalsy();

src/packages/__VUE/pullrefresh/demo.vue

@@ -2,12 +2,12 @@
   <div class="demo">
     <nut-tabs v-model="tabsValue" animatedTime="0">
       <nut-tab-pane :title="translate('basic')">
-        <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+        <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
           <div class="pull-block">{{ translate('content') }}</div>
-        </nut-pullrefresh>
+        </nut-pull-refresh>
       </nut-tab-pane>
       <nut-tab-pane :title="translate('customTxt')">
-        <nut-pullrefresh
+        <nut-pull-refresh
           v-model="refresh2"
           :loosingTxt="translate('loose')"
           :loadingTxt="translate('load')"
@@ -18,15 +18,15 @@
             <div>{{ translate('pull') }}</div>
           </template>
           <div class="pull-block">{{ translate('content') }}</div>
-        </nut-pullrefresh>
+        </nut-pull-refresh>
       </nut-tab-pane>
       <nut-tab-pane :title="translate('listenerTxt')">
         <div class="parentpage">
-          <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+          <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
             <div class="pull-letter" v-for="item in refreshList2">
               <div>{{ item }}</div>
             </div>
-          </nut-pullrefresh>
+          </nut-pull-refresh>
         </div>
       </nut-tab-pane>
     </nut-tabs>
@@ -37,7 +37,7 @@
 import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 
-const { createDemo, translate } = createComponent('pullrefresh');
+const { createDemo, translate } = createComponent('pull-refresh');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
 
@@ -59,8 +59,8 @@ const initTranslate = () =>
       pullRefresh: 'Pull to refresh',
       customTxt: 'Custom Tips',
       listenerTxt: 'Customize the listener',
-      content: 'Try it down',
-      loose: 'Let go',
+      content: 'Try to pull down!',
+      loose: 'Relax',
       load: 'Desperate loading...',
       ok: 'Ok!',
       pull: 'Pull'
@@ -141,7 +141,7 @@ export default createDemo({
 .nut-tab-pane {
   padding: 0;
 }
-.nut-pullrefresh {
+.nut-pull-refresh {
   height: calc(100vh - 107px);
 }
 .pull-block {

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

@@ -23,9 +23,9 @@ The refresh event will be Emitted when pull refresh, you should set v-model to f
 
 ```html
 <template>
-  <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
-    <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
+    <div class="pull-block">Try to pull down!</div>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -53,17 +53,17 @@ The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' `，res
 
 ```html
 <template>
-  <nut-pullrefresh
+  <nut-pull-refresh
     v-model="refresh2"
-    loosingTxt="松开吧"
-    loadingTxt="玩命加载中..."
+    loosingTxt="Relax"
+    loadingTxt="Desperate loading..."
     @refresh="refreshFun"
   >
     <template #pullingTxt>
-      <div>用力拉</div>
+      <div>Pull</div>
     </template>
-    <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+    <div class="pull-block">Try to pull down!</div>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -92,11 +92,11 @@ The trigger conditions for PullRefresh are: The parent position of the scroll ba
 ```html
 <template>
   <div class="parentpage">
-    <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
       <div class="pull-letter" v-for="item in refreshList2">
         <div>{{item}}</div>
       </div>
-    </nut-pullrefresh>
+    </nut-pull-refresh>
   </div>
 </template>
 

src/packages/__VUE/pullrefresh/doc.md

@@ -22,9 +22,9 @@ app.use(PullRefresh);
 
 ```html
 <template>
-  <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+  <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
     <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -52,7 +52,7 @@ app.use(PullRefresh);
 
 ```html
 <template>
-  <nut-pullrefresh
+  <nut-pull-refresh
     v-model="refresh2"
     loosingTxt="松开吧"
     loadingTxt="玩命加载中..."
@@ -62,7 +62,7 @@ app.use(PullRefresh);
       <div>用力拉</div>
     </template>
     <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -91,11 +91,11 @@ PullRefresh 的触发条件是：父级滚动元素的滚动条在顶部位置
 ```html
 <template>
   <div class="parentpage">
-    <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
       <div class="pull-letter" v-for="item in refreshList2">
         <div>{{item}}</div>
       </div>
-    </nut-pullrefresh>
+    </nut-pull-refresh>
   </div>
 </template>
 

src/packages/__VUE/pullrefresh/index.scss

@@ -1,4 +1,4 @@
-.nut-pullrefresh {
+.nut-pull-refresh {
   height: 100%;
   overflow: hidden;
   &-container {

src/packages/__VUE/pullrefresh/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="classes" ref="scroller" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
-    <div class="nut-pullrefresh-container" :style="getStyle">
-      <div class="nut-pullrefresh-container-topbox" :style="getHeightStyle">
+    <div class="nut-pull-refresh-container" :style="getStyle">
+      <div class="nut-pull-refresh-container-topbox" :style="getHeightStyle">
         <Loading
-          class="nut-icon-loading nut-pullrefresh-container-topbox-icon"
+          class="nut-icon-loading nut-pull-refresh-container-topbox-icon"
           v-if="status == 'loading' && !slots.loading"
         ></Loading>
 
-        <div class="nut-pullrefresh-container-topbox-text">{{ getPullStatus }}</div>
+        <div class="nut-pull-refresh-container-topbox-text">{{ getPullStatus }}</div>
 
         <slot v-if="status == 'pulling'" name="pulling"></slot>
         <slot v-if="status == 'loosing'" name="loosing"></slot>
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { toRefs, reactive, computed, CSSProperties, ref, nextTick, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('pullrefresh');
+const { componentName, create, translate } = createComponent('pull-refresh');
 import { useTouch } from '@/packages/utils/useTouch';
 import { getScrollTopRoot } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';