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

src/config.json

@@ -462,7 +462,7 @@
         },
         {
           "version": "3.0.0",
-          "name": "SearchBar",
+          "name": "Searchbar",
           "type": "component",
           "cName": "搜索栏",
           "desc": "搜索栏",
@@ -924,7 +924,7 @@
         },
         {
           "version": "3.0.0",
-          "name": "NoticeBar",
+          "name": "Noticebar",
           "type": "component",
           "cName": "公告栏",
           "desc": "用于循环播放展示一组消息通知",
@@ -1037,7 +1037,7 @@
         },
         {
           "version": "3.0.0",
-          "name": "CountUp",
+          "name": "Countup",
           "taro": true,
           "sort": 12,
           "cName": "数字滚动",
@@ -1048,7 +1048,7 @@
           "styleDeps": []
         },
         {
-          "name": "CountDown",
+          "name": "Countdown",
           "type": "component",
           "cName": "倒计时",
           "desc": "倒计时",

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

@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { nextTick, toRefs, reactive } from 'vue';
-import CountDown from '../index.vue';
+import Countdown from '../index.vue';
 import Button from '../../button/index.vue';
 
 function sleep(delay = 0): Promise<void> {
@@ -14,7 +14,7 @@ afterAll(() => {
 });
 
 test('endTime props', async () => {
-  const wrapper = mount(CountDown, {
+  const wrapper = mount(Countdown, {
     props: {
       endTime: Date.now() + 1 * 1000
     }
@@ -25,7 +25,7 @@ test('endTime props', async () => {
 });
 
 test('format props', async () => {
-  const wrapper = mount(CountDown, {
+  const wrapper = mount(Countdown, {
     props: {
       endTime: Date.now() + 1 * 1000,
       format: 'DD天HH时mm分ss秒'
@@ -40,7 +40,7 @@ test('format props', async () => {
 test('paused props', async () => {
   const wrapper = mount({
     components: {
-      'nut-countdown': CountDown,
+      'nut-countdown': Countdown,
       'nut-button': Button
     },
     template: `

src/packages/__VUE/countdown/demo.vue

@@ -58,7 +58,7 @@
 
     <h2>{{ translate('handleControl') }}</h2>
     <nut-cell>
-      <nut-countdown time="20000" ref="CountDown" :autoStart="false" format="ss:SS" />
+      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS" />
     </nut-cell>
 
     <nut-grid :column-num="3">
@@ -121,7 +121,7 @@ export default createDemo({
   props: {},
   setup() {
     initTranslate();
-    const CountDown = ref(null);
+    const Countdown = ref(null);
     const state = reactive({
       serverTime: Date.now() - 20 * 1000,
       end: Date.now() + 60 * 1000,
@@ -149,18 +149,18 @@ export default createDemo({
       console.log('restart: ', v);
     };
     const start = () => {
-      CountDown.value.start();
+      Countdown.value.start();
     };
 
     const pause = () => {
-      CountDown.value.pause();
+      Countdown.value.pause();
     };
 
     const reset = () => {
-      CountDown.value.reset();
+      Countdown.value.reset();
     };
     onMounted(() => {
-      console.log(CountDown.value);
+      console.log(Countdown.value);
     });
 
     setTimeout(() => {
@@ -173,7 +173,7 @@ export default createDemo({
       onend,
       onpaused,
       onrestart,
-      CountDown,
+      Countdown,
       start,
       pause,
       reset,

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

@@ -1,4 +1,4 @@
-#  CountDown 倒计时
+#  Countdown 倒计时
 
 ### 介绍
 Used to display the countdown value in real time, and precision supports milliseconds.
@@ -8,12 +8,12 @@ Used to display the countdown value in real time, and precision supports millise
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { CountDown } from '@nutui/nutui';
+import { Countdown } from '@nutui/nutui';
 // taro
-import { CountDown } from '@nutui/nutui-taro';
+import { Countdown } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(CountDown);
+app.use(Countdown);
 ```
 
 ### Basic Usage
@@ -267,7 +267,7 @@ Paused and restarted the countdown with the paused attribute
 ```html
 <template>
   <nut-cell>
-      <nut-countdown time="20000" ref="CountDown" :autoStart="false" format="ss:SS"/>
+      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS"/>
   </nut-cell>
   <nut-grid :column-num="3">
     <nut-grid-item><nut-button type="primary" @click="start">Start</nut-button></nut-grid-item>
@@ -279,15 +279,15 @@ Paused and restarted the countdown with the paused attribute
   import { ref,reactive,toRefs } from 'vue';
   export default {
     setup(props) {
-      const CountDown = ref(null);
+      const Countdown = ref(null);
       const start = () => {
-        CountDown.value.start();
+        Countdown.value.start();
       };
       const pause = () => {
-        CountDown.value.pause();
+        Countdown.value.pause();
       };
       const reset = () => {
-        CountDown.value.reset();
+        Countdown.value.reset();
       };
       return {
           toggle,

src/packages/__VUE/countdown/doc.md

@@ -1,4 +1,4 @@
-#  CountDown 倒计时
+#  Countdown 倒计时
 
 ### 介绍
 用于实时展示倒计时数值，支持毫秒精度。
@@ -9,12 +9,12 @@
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { CountDown } from '@nutui/nutui';
+import { Countdown } from '@nutui/nutui';
 // taro
-import { CountDown } from '@nutui/nutui-taro';
+import { Countdown } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(CountDown);
+app.use(Countdown);
 ```
 
 ### 基础用法
@@ -270,7 +270,7 @@ app.use(CountDown);
 ```html
 <template>
   <nut-cell>
-      <nut-countdown time="20000" ref="CountDown" :autoStart="false" format="ss:SS"/>
+      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS"/>
   </nut-cell>
   <nut-grid :column-num="3">
     <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
@@ -282,15 +282,15 @@ app.use(CountDown);
   import { ref,reactive,toRefs } from 'vue';
   export default {
     setup(props) {
-      const CountDown = ref(null);
+      const Countdown = ref(null);
       const start = () => {
-        CountDown.value.start();
+        Countdown.value.start();
       };
       const pause = () => {
-        CountDown.value.pause();
+        Countdown.value.pause();
       };
       const reset = () => {
-        CountDown.value.reset();
+        Countdown.value.reset();
       };
       return {
           toggle,
@@ -343,7 +343,7 @@ app.use(CountDown);
 
 ### 方法
 
-通过 ref 可以获取到 CountDown 实例并调用实例方法。
+通过 ref 可以获取到 Countdown 实例并调用实例方法。
 
 | 方法明 | 说明 |
 | ----- | ----- | 

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

@@ -1,4 +1,4 @@
-#  CountUp Digital scrolling
+#  Countup Digital scrolling
 
 ### Intro
 
@@ -10,12 +10,12 @@ Digital scrolling component, which is used to display the dynamic effect of digi
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { CountUp } from '@nutui/nutui';
+import { Countup } from '@nutui/nutui';
 // taro
-import { CountUp } from '@nutui/nutui-taro';
+import { Countup } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(CountUp);
+app.use(Countup);
 ```
 
 

src/packages/__VUE/countup/doc.md

@@ -1,4 +1,4 @@
-#  CountUp 数字滚动
+#  Countup 数字滚动
 
 ### 介绍
 
@@ -10,12 +10,12 @@
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { CountUp } from '@nutui/nutui';
+import { Countup } from '@nutui/nutui';
 // taro
-import { CountUp } from '@nutui/nutui-taro';
+import { Countup } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(CountUp);
+app.use(Countup);
 ```
 
 ### 基础用法

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

@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { nextTick, ref, reactive } from 'vue';
-import NoticeBar from '../index.vue';
+import Noticebar from '../index.vue';
 import NutIcon from '../../icon/index.vue';
 
 function sleep(delay = 0): Promise<void> {
@@ -24,7 +24,7 @@ Object.defineProperty(window.HTMLElement.prototype, 'clientWidth', {
 });
 
 test('close event', async () => {
-  const wrapper = mount(NoticeBar, {
+  const wrapper = mount(Noticebar, {
     props: {
       text: '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！',
       direction: 'across',
@@ -46,7 +46,7 @@ test('close event', async () => {
 });
 
 test('slot event', async () => {
-  const wrapper = mount(NoticeBar, {
+  const wrapper = mount(Noticebar, {
     slots: {
       default: () => 'Custom Content'
     }
@@ -59,7 +59,7 @@ test('slot event', async () => {
 test('icon custom', async () => {
   const wrapper = mount({
     components: {
-      'nut-noticebar': NoticeBar
+      'nut-noticebar': Noticebar
     },
     template: `
         <nut-noticebar
@@ -77,7 +77,7 @@ test('icon custom', async () => {
 test('vertical scroll', async () => {
   const wrapper = mount({
     components: {
-      'nut-noticebar': NoticeBar
+      'nut-noticebar': Noticebar
     },
     template: `
       <nut-noticebar direction='vertical'  :list="horseLamp" ></nut-noticebar>
@@ -94,7 +94,7 @@ test('vertical scroll', async () => {
 test('custon scroll list', async () => {
   const wrapper = mount({
     components: {
-      'nut-noticebar': NoticeBar
+      'nut-noticebar': Noticebar
     },
     template: `
       <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" >

src/packages/__VUE/noticebar/demo.vue

@@ -88,7 +88,7 @@ const initTranslate = () =>
       customRightIcon: '纵向--自定义右侧图标',
       text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
       textShort: 'NutUI 是移动端组件库',
-      horseLamp: ['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'],
+      horseLamp: ['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'],
       jd: '京东商城'
     },
     'en-US': {
@@ -102,7 +102,7 @@ const initTranslate = () =>
       customRightIcon: 'Vertical Scroll Custom Right Icon',
       text: 'Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.',
       textShort: 'Nutui is a mobile terminal component library.',
-      horseLamp: ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox'],
+      horseLamp: ['Noticebar', 'Cascader', 'DatePicker', 'CheckBox'],
       jd: 'Jingdong'
     }
   });

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

@@ -1,4 +1,4 @@
-# NoticeBar
+# Noticebar
 
 ### Intro
 
@@ -10,12 +10,12 @@ Used to display a group of message notifications in a continuons loop.
 
 import { createApp } from 'vue';
 // vue
-import { NoticeBar } from '@nutui/nutui';
+import { Noticebar } from '@nutui/nutui';
 // taro
-import { NoticeBar } from '@nutui/nutui-taro';
+import { Noticebar } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(NoticeBar);
+app.use(Noticebar);
 
 ```
 
@@ -129,7 +129,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
       const go = (item) => {
         console.log(item)
       }
@@ -154,7 +154,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp2 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      const horseLamp2 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
       return { horseLamp2 };
     }
   }
@@ -178,7 +178,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp3 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      const horseLamp3 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
       return { horseLamp3 };
     }
   }
@@ -204,7 +204,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
       return { horseLamp1 };
     }
   }
@@ -252,5 +252,5 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 | Attribute  | Description                             | Arguments     |
 | ---------- | --------------------------------------- | ------------ |
-| click      | Emitted when NoticeBar is clicked       | event: Event |
-| close      | Emitted when NoticeBar is closed        | event: Event |
+| click      | Emitted when Noticebar is clicked       | event: Event |
+| close      | Emitted when Noticebar is closed        | event: Event |

src/packages/__VUE/noticebar/doc.md

@@ -1,4 +1,4 @@
-# NoticeBar 通告栏
+# Noticebar 通告栏
 
 ### 介绍 
 
@@ -12,12 +12,12 @@
 
 import { createApp } from 'vue';
 // vue
-import { NoticeBar } from '@nutui/nutui';
+import { Noticebar } from '@nutui/nutui';
 // taro
-import { NoticeBar } from '@nutui/nutui-taro';
+import { Noticebar } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(NoticeBar);
+app.use(Noticebar);
 
 ```
 
@@ -136,7 +136,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       const go = (item) => {
         console.log(item)
       }
@@ -160,7 +160,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp2 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+      const horseLamp2 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp2 };
     }
   }
@@ -182,7 +182,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp3 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+      const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp3 };
     }
   }
@@ -206,7 +206,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp1 };
     }
   }

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

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <view
-      v-show="showNoticeBar"
+      v-show="showNoticebar"
       class="nut-noticebar__page"
       :class="{
         'nut-noticebar__page--withicon': closeMode,
@@ -169,7 +169,7 @@ export default create({
       firstRound: true,
       duration: 0,
       offsetWidth: 0,
-      showNoticeBar: true,
+      showNoticebar: true,
       animationClass: '',
 
       animate: false,
@@ -265,7 +265,7 @@ export default create({
     );
 
     const initScrollWrap = (value: string) => {
-      if (state.showNoticeBar == false) {
+      if (state.showNoticebar == false) {
         return;
       }
       setTimeout(() => {
@@ -307,7 +307,7 @@ export default create({
 
     const onClickIcon = (event: Event) => {
       if (props.closeMode) {
-        state.showNoticeBar = !props.closeMode;
+        state.showNoticebar = !props.closeMode;
       }
       emit('close', event);
     };

src/packages/__VUE/noticebar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <view
-      v-show="showNoticeBar"
+      v-show="showNoticebar"
       class="nut-noticebar__page"
       :class="{
         'nut-noticebar__page--withicon': closeMode,
@@ -93,7 +93,7 @@ interface StateProps {
   firstRound: boolean;
   duration: number;
   offsetWidth: number;
-  showNoticeBar: boolean;
+  showNoticebar: boolean;
   animationClass: string;
 
   animate: boolean;
@@ -183,7 +183,7 @@ export default create({
       firstRound: true,
       duration: 0,
       offsetWidth: 0,
-      showNoticeBar: true,
+      showNoticebar: true,
       animationClass: '',
 
       animate: false,
@@ -278,7 +278,7 @@ export default create({
     );
 
     const initScrollWrap = (value: string) => {
-      if (state.showNoticeBar == false) {
+      if (state.showNoticebar == false) {
         return;
       }
       setTimeout(() => {
@@ -308,7 +308,7 @@ export default create({
 
     const onClickIcon = (event: Event) => {
       if (props.closeMode) {
-        state.showNoticeBar = !props.closeMode;
+        state.showNoticebar = !props.closeMode;
       }
       emit('close', event);
     };

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

@@ -1,5 +1,5 @@
 import { mount, config } from '@vue/test-utils';
-import SearchBar from '../index.vue';
+import Searchbar from '../index.vue';
 
 import NutIcon from '../../icon/index.vue';
 
@@ -14,7 +14,7 @@ afterAll(() => {
 });
 
 test('basic usage', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: ''
     }
@@ -24,7 +24,7 @@ test('basic usage', () => {
 });
 
 test('should limit maxlength of input value when using maxlength prop', async () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       maxLength: 3,
       modelValue: '9999'
@@ -38,7 +38,7 @@ test('should limit maxlength of input value when using maxlength prop', async ()
 });
 
 test('should format input value when type is number', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       type: 'number',
       modelValue: ''
@@ -51,7 +51,7 @@ test('should format input value when type is number', () => {
 });
 
 test('should format input value when type is number', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       type: 'number',
       modelValue: ''
@@ -68,7 +68,7 @@ test('should format input value when type is number', () => {
 });
 
 test('backgrounds prop test', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: '',
       background: 'red',
@@ -82,7 +82,7 @@ test('backgrounds prop test', () => {
 });
 
 test('change event test', async () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: ''
     }
@@ -94,7 +94,7 @@ test('change event test', async () => {
 });
 
 test('change event test', async () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: ''
     }
@@ -106,7 +106,7 @@ test('change event test', async () => {
 });
 
 test('focus event focus', async () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: ''
     }
@@ -118,7 +118,7 @@ test('focus event focus', async () => {
 });
 
 test('blur event test', async () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       modelValue: ''
     }
@@ -130,7 +130,7 @@ test('blur event test', async () => {
 });
 
 test('clear event test', async () => {
-  const wrapper = mount(SearchBar, { props: { modelValue: 3 } });
+  const wrapper = mount(Searchbar, { props: { modelValue: 3 } });
   const input = wrapper.find('input');
   const clear = wrapper.find('.nut-searchbar__input-clear');
   wrapper.find('input').trigger('input');
@@ -142,7 +142,7 @@ test('clear event test', async () => {
 });
 
 test('slot test', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: { modelValue: '' },
     slots: {
       default: () => {
@@ -168,7 +168,7 @@ test('slot test', () => {
 });
 
 test('custom clear icon', () => {
-  const wrapper = mount(SearchBar, {
+  const wrapper = mount(Searchbar, {
     props: {
       clearIcon: 'close',
       modelValue: 'test'

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

@@ -1,4 +1,4 @@
-# SearchBar
+# Searchbar
 
 ### Intro
 
@@ -10,12 +10,12 @@ Search bar
 import { createApp } from 'vue';
 
 // vue
-import { SearchBar, Icon } from '@nutui/nutui';
+import { Searchbar, Icon } from '@nutui/nutui';
 // taro
-import { SearchBar, Icon } from '@nutui/nutui-taro';
+import { Searchbar, Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(SearchBar);
+app.use(Searchbar);
 app.use(Icon);
 
 ```    

src/packages/__VUE/searchbar/doc.md

@@ -1,4 +1,4 @@
-# SearchBar 搜索栏
+# Searchbar 搜索栏
 
 ### 介绍
 
@@ -10,12 +10,12 @@
 import { createApp } from 'vue';
 
 // vue
-import { SearchBar, Icon } from '@nutui/nutui';
+import { Searchbar, Icon } from '@nutui/nutui';
 // taro
-import { SearchBar, Icon } from '@nutui/nutui-taro';
+import { Searchbar, Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(SearchBar);
+app.use(Searchbar);
 app.use(Icon);
 
 ```    

src/packages/__VUE/timedetail/demo.vue

@@ -6,7 +6,7 @@
       <div class="selected-option"> {{ val1 }} </div>
     </nut-cell>
     <div class="timeselect-wrapper">
-      <nut-timeselect :visible="visible1"></nut-timeselect>
+      <nut-time-select :visible="visible1"></nut-time-select>
     </div>
   </div>
 </template>
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('timeselect');
+const { createDemo } = createComponent('time-select');
 export default createDemo({
   setup() {
     const state = reactive({

src/packages/__VUE/timedetail/doc.md

@@ -20,7 +20,7 @@ app.use(TimeSelect);
 ### 基础用法
 
 ``` html
-<nut-timeselect></nut-timeselect>
+<nut-time-select></nut-time-select>
 ```
 ``` javascript
 setup() {

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

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { reactive, toRefs, inject, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('timedetail');
+const { componentName, create } = createComponent('time-detail');
 export default create({
   name: 'timedetail',
   props: {
@@ -39,7 +39,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timedetail';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/timedetail/index.vue

@@ -11,7 +11,7 @@
 <script lang="ts">
 import { reactive, toRefs, inject, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('timedetail');
+const { componentName, create } = createComponent('time-detail');
 export default create({
   name: 'timedetail',
   props: {
@@ -37,7 +37,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timedetail';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/timepannel/demo.vue

@@ -6,7 +6,7 @@
       <div class="selected-option"> {{ val1 }} </div>
     </nut-cell>
     <div class="timeselect-wrapper">
-      <nut-timeselect :visible="visible1"></nut-timeselect>
+      <nut-time-select :visible="visible1"></nut-time-select>
     </div>
   </div>
 </template>
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('timeselect');
+const { createDemo } = createComponent('time-select');
 export default createDemo({
   setup() {
     const state = reactive({

src/packages/__VUE/timepannel/doc.md

@@ -20,7 +20,7 @@ app.use(TimeSelect);
 ### 基础用法
 
 ``` html
-<nut-timeselect></nut-timeselect>
+<nut-time-select></nut-time-select>
 ```
 ``` javascript
 setup() {

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

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { reactive, toRefs, inject, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('timepannel');
+const { componentName, create } = createComponent('time-pannel');
 export default create({
   name: 'timepannel',
   props: {
@@ -27,7 +27,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timepannel';
       return {
         [prefixCls]: true,
         'nut-timepannel--curr': state.currentKey == props.pannelKey

src/packages/__VUE/timepannel/index.vue

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { reactive, toRefs, inject, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('timepannel');
+const { componentName, create } = createComponent('time-pannel');
 export default create({
   name: 'timepannel',
   props: {
@@ -27,7 +27,7 @@ export default create({
     });
 
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timepannel';
       return {
         [prefixCls]: true,
         'nut-timepannel--curr': state.currentKey == props.pannelKey

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

@@ -29,24 +29,24 @@ test('props test', async () => {
   const wrapper = mount({
     emits: ['change', 'select'],
     components: {
-      'nut-timeselect': TimeSelect,
-      'nut-timepannel': TimePanel,
-      'nut-timedetail': TimeDetail
+      'nut-time-select': TimeSelect,
+      'nut-time-pannel': TimePanel,
+      'nut-time-detail': TimeDetail
     },
     template: `
       <template>
         <div id="cell" @click="handleClick1">
           <span><label>请选择配送时间</label></span>
         </div>
-        <nut-timeselect v-model:visible="visible1" title="标题测试" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+        <nut-time-select v-model:visible="visible1" title="标题测试" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
           <template #pannel>
-            <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-            <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+            <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+            <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
           </template>
           <template #detail>
-            <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+            <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
           </template>
-        </nut-timeselect>
+        </nut-time-select>
       </template>
     `,
     setup() {
@@ -131,24 +131,24 @@ test('Events test', async () => {
   const wrapper = mount({
     emits: ['change', 'select'],
     components: {
-      'nut-timeselect': TimeSelect,
-      'nut-timepannel': TimePanel,
-      'nut-timedetail': TimeDetail
+      'nut-time-select': TimeSelect,
+      'nut-time-pannel': TimePanel,
+      'nut-time-detail': TimeDetail
     },
     template: `
       <template>
         <div id="cell" @click="handleClick1">
           <span><label>请选择配送时间</label></span>
         </div>
-        <nut-timeselect v-model:visible="visible1" title="标题测试" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+        <nut-time-select v-model:visible="visible1" title="标题测试" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
           <template #pannel>
-            <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-            <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+            <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+            <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
           </template>
           <template #detail>
-            <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+            <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
           </template>
-        </nut-timeselect>
+        </nut-time-select>
       </template>
     `,
     setup() {

src/packages/__VUE/timeselect/demo.vue

@@ -6,7 +6,7 @@
         ><label>{{ translate('deliveryTime') }}</label></span
       >
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible1"
       height="50%"
       :current-key="currentKey1"
@@ -14,20 +14,20 @@
       @select="handleSelected1"
     >
       <template #pannel>
-        <nut-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange1"></nut-timepannel>
-        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange1"></nut-timepannel>
+        <nut-time-pannel :name="translate('time1')" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+        <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange1"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+        <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
     <h2>{{ translate('title') }}</h2>
     <nut-cell @click="handleClick2">
       <span
         ><label>{{ translate('deliveryTime') }}</label></span
       >
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible2"
       height="50%"
       :current-key="currentKey2"
@@ -35,20 +35,20 @@
       @select="handleSelected2"
     >
       <template #pannel>
-        <nut-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-timepannel>
-        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-timepannel>
+        <nut-time-pannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+        <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
     <h2>{{ translate('changeTitle') }}</h2>
     <nut-cell @click="handleClick3">
       <span
         ><label>{{ translate('deliveryTime') }}</label></span
       >
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible3"
       height="50%"
       :current-key="currentKey2"
@@ -62,20 +62,20 @@
         </div>
       </template>
       <template #pannel>
-        <nut-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-timepannel>
-        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-timepannel>
+        <nut-time-pannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+        <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('timeselect');
+const { createDemo, translate } = createComponent('time-select');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({

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

@@ -31,15 +31,15 @@ app.use(Overlay);
   <nut-cell @click="handleClick1">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+  <nut-time-select v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
     <template #pannel>
-      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+      <nut-time-pannel name="February 23rd(Today)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+      <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
@@ -119,15 +119,15 @@ app.use(Overlay);
   <nut-cell @click="handleClick2">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
     <template #pannel>
-      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      <nut-time-pannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+      <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
@@ -210,7 +210,7 @@ app.use(Overlay);
   <nut-cell @click="handleClick2">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
     <template #title>
       <div class="timeselect-title">
         <p class="title">It is title</p>
@@ -218,13 +218,13 @@ app.use(Overlay);
       </div>
     </template>
     <template #pannel>
-      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      <nut-time-pannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+      <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';

src/packages/__VUE/timeselect/doc.md

@@ -31,15 +31,15 @@ app.use(Overlay);
   <nut-cell @click="handleClick1">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+  <nut-time-select v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
     <template #pannel>
-      <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-      <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
@@ -119,15 +119,15 @@ app.use(Overlay);
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
     <template #pannel>
-      <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-      <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
@@ -210,7 +210,7 @@ app.use(Overlay);
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
-  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
     <template #title>
       <div class="timeselect-title">
         <p class="title">我是标题</p>
@@ -218,13 +218,13 @@ app.use(Overlay);
       </div>
     </template>
     <template #pannel>
-      <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-      <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
     </template>
-  </nut-timeselect>
+  </nut-time-select>
 </template>
 <script lang="ts">
   import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';

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

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('timeselect');
+const { componentName, create, translate } = createComponent('time-select');
 export default create({
   props: {
     visible: {
@@ -67,7 +67,7 @@ export default create({
   emits: ['update:visible', 'select'],
   setup: (props: any, context: any) => {
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timeselect';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/timeselect/index.vue

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('timeselect');
+const { componentName, create, translate } = createComponent('time-select');
 export default create({
   props: {
     visible: {
@@ -68,7 +68,7 @@ export default create({
   emits: ['update:visible', 'select'],
   setup: (props: any, context: any) => {
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-timeselect';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/trendarrow/demo.vue

@@ -2,39 +2,39 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-trendarrow :sync-text-color="false" :rate="1" />
-      <nut-trendarrow :sync-text-color="false" :rate="-0.2535" />
+      <nut-trend-arrow :sync-text-color="false" :rate="1" />
+      <nut-trend-arrow :sync-text-color="false" :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title1') }}</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" />
-      <nut-trendarrow :rate="-0.2535" />
+      <nut-trend-arrow :rate="10.2365" />
+      <nut-trend-arrow :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title2') }}</view>
     <nut-cell>
-      <nut-trendarrow :digits="1" :rate="10.2365" />
-      <nut-trendarrow :digits="3" :rate="-0.2535" />
+      <nut-trend-arrow :digits="1" :rate="10.2365" />
+      <nut-trend-arrow :digits="3" :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title3') }}</view>
     <nut-cell>
-      <nut-trendarrow arrowLeft :rate="0.2535" />
-      <nut-trendarrow arrowLeft :rate="-0.2535" />
+      <nut-trend-arrow arrowLeft :rate="0.2535" />
+      <nut-trend-arrow arrowLeft :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title4') }}</view>
     <nut-cell>
-      <nut-trendarrow showSign :rate="1" />
-      <nut-trendarrow showSign :rate="-0.2535" />
+      <nut-trend-arrow showSign :rate="1" />
+      <nut-trend-arrow showSign :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title5') }}</view>
     <nut-cell>
-      <nut-trendarrow showSign :rate="0" />
-      <nut-trendarrow showSign showZero :rate="0" />
+      <nut-trend-arrow showSign :rate="0" />
+      <nut-trend-arrow showSign showZero :rate="0" />
     </nut-cell>
     <view class="title">{{ translate('title6') }}</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)" />
-      <nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
-      <nut-trendarrow
+      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
+      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
+      <nut-trend-arrow
         :sync-text-color="false"
         showSign
         :rate="-0.2535"
@@ -44,17 +44,17 @@
     </nut-cell>
     <view class="title">{{ translate('title7') }}</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" :up-icon-name="'success'" />
-      <nut-trendarrow :rate="-10.2365" :down-icon-name="'failure'" />
-      <nut-trendarrow :rate="10.2365">
+      <nut-trend-arrow :rate="10.2365" :up-icon-name="'success'" />
+      <nut-trend-arrow :rate="-10.2365" :down-icon-name="'failure'" />
+      <nut-trend-arrow :rate="10.2365">
         <nut-icon name="heart-fill" color="#fa2c19" size="12px"></nut-icon>
-      </nut-trendarrow>
+      </nut-trend-arrow>
     </nut-cell>
   </div>
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('trendarrow');
+const { createDemo, translate } = createComponent('trend-arrow');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({

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

@@ -24,8 +24,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-    <nut-trendarrow :show-text-color="false" :rate="1"/>
-    <nut-trendarrow :show-text-color="false" :rate="-0.2535"/>
+    <nut-trend-arrow :show-text-color="false" :rate="1"/>
+    <nut-trend-arrow :show-text-color="false" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -39,8 +39,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :rate="10.2365"/>
-      <nut-trendarrow :rate="-0.2535"/>
+      <nut-trend-arrow :rate="10.2365"/>
+      <nut-trend-arrow :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -53,8 +53,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :digits="0" :rate="10.2365"/>
-      <nut-trendarrow :digits="0" :rate="-0.2535"/>
+      <nut-trend-arrow :digits="0" :rate="10.2365"/>
+      <nut-trend-arrow :digits="0" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -67,8 +67,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow arrowLeft :rate="0.2535"/>
-      <nut-trendarrow arrowLeft :rate="-0.2535"/>
+      <nut-trend-arrow arrowLeft :rate="0.2535"/>
+      <nut-trend-arrow arrowLeft :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -81,8 +81,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow showSign :rate="1"/>
-      <nut-trendarrow showSign :rate="-0.2535"/>
+      <nut-trend-arrow showSign :rate="1"/>
+      <nut-trend-arrow showSign :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -95,8 +95,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow showSign :rate="0"/>
-      <nut-trendarrow showSign showZero :rate="0"/>
+      <nut-trend-arrow showSign :rate="0"/>
+      <nut-trend-arrow showSign showZero :rate="0"/>
   </nut-cell>
 </template>
 ```
@@ -109,9 +109,9 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
-      <nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
-      <nut-trendarrow
+      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
+      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
+      <nut-trend-arrow
         :show-text-color="false"
         showSign
         :rate="-0.2535"

src/packages/__VUE/trendarrow/doc.md

@@ -26,8 +26,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-    <nut-trendarrow :show-text-color="false" :rate="1"/>
-    <nut-trendarrow :show-text-color="false" :rate="-0.2535"/>
+    <nut-trend-arrow :show-text-color="false" :rate="1"/>
+    <nut-trend-arrow :show-text-color="false" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -41,8 +41,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :rate="10.2365"/>
-      <nut-trendarrow :rate="-0.2535"/>
+      <nut-trend-arrow :rate="10.2365"/>
+      <nut-trend-arrow :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -55,8 +55,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :digits="0" :rate="10.2365"/>
-      <nut-trendarrow :digits="0" :rate="-0.2535"/>
+      <nut-trend-arrow :digits="0" :rate="10.2365"/>
+      <nut-trend-arrow :digits="0" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -69,8 +69,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow arrowLeft :rate="0.2535"/>
-      <nut-trendarrow arrowLeft :rate="-0.2535"/>
+      <nut-trend-arrow arrowLeft :rate="0.2535"/>
+      <nut-trend-arrow arrowLeft :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -83,8 +83,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow showSign :rate="1"/>
-      <nut-trendarrow showSign :rate="-0.2535"/>
+      <nut-trend-arrow showSign :rate="1"/>
+      <nut-trend-arrow showSign :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -97,8 +97,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow showSign :rate="0"/>
-      <nut-trendarrow showSign showZero :rate="0"/>
+      <nut-trend-arrow showSign :rate="0"/>
+      <nut-trend-arrow showSign showZero :rate="0"/>
   </nut-cell>
 </template>
 ```
@@ -111,9 +111,9 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
-      <nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
-      <nut-trendarrow
+      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
+      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
+      <nut-trend-arrow
         :show-text-color="false"
         showSign
         :rate="-0.2535"

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

@@ -20,7 +20,7 @@
 import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('trendarrow');
+const { componentName, create } = createComponent('trend-arrow');
 
 export default create({
   props: {
@@ -79,7 +79,7 @@ export default create({
       rateTrend: props.rate > 0 ? true : false
     });
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-trendarrow';
       return {
         [prefixCls]: true
       };

src/packages/__VUE/trendarrow/index.vue

@@ -20,7 +20,7 @@
 import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('trendarrow');
+const { componentName, create } = createComponent('trend-arrow');
 
 export default create({
   props: {
@@ -79,7 +79,7 @@ export default create({
       rateTrend: props.rate > 0 ? true : false
     });
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-trendarrow';
       return {
         [prefixCls]: true
       };

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

@@ -4,7 +4,7 @@
     <nut-cell @click="handleClick1">
       <span><label>请选择配送时间</label></span>
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible1"
       height="50%"
       :current-key="currentKey1"
@@ -12,18 +12,18 @@
       @select="handleSelected1"
     >
       <template #pannel>
-        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+        <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
+        <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+        <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
     <h2>可选择多个日期时间</h2>
     <nut-cell @click="handleClick2">
       <span><label>请选择配送时间</label></span>
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible2"
       height="50%"
       :current-key="currentKey2"
@@ -31,18 +31,18 @@
       @select="handleSelected2"
     >
       <template #pannel>
-        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+        <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+        <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
     <h2>更改标题</h2>
     <nut-cell @click="handleClick3">
       <span><label>请选择配送时间</label></span>
     </nut-cell>
-    <nut-timeselect
+    <nut-time-select
       v-model:visible="visible3"
       height="50%"
       :current-key="currentKey2"
@@ -56,13 +56,13 @@
         </div>
       </template>
       <template #pannel>
-        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+        <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
+        <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
       </template>
-    </nut-timeselect>
+    </nut-time-select>
     <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
   </div>
 </template>

src/sites/mobile-taro/vue/src/exhibition/pages/countdown/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'CountDown'
+  navigationBarTitleText: 'Countdown'
 };

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

@@ -55,7 +55,7 @@
 
     <h2>手动控制</h2>
     <nut-cell>
-      <nut-countdown time="20000" ref="CountDown" :autoStart="false" format="ss:SS" />
+      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS" />
     </nut-cell>
 
     <nut-grid :column-num="3">
@@ -72,7 +72,7 @@ import { toRefs, onMounted, ref, reactive } from 'vue';
 export default {
   props: {},
   setup() {
-    const CountDown = ref(null);
+    const Countdown = ref(null);
     const state = reactive({
       serverTime: Date.now() - 20 * 1000,
       end: Date.now() + 60 * 1000,
@@ -100,18 +100,18 @@ export default {
       console.log('restart: ', v);
     };
     const start = () => {
-      CountDown.value.start();
+      Countdown.value.start();
     };
 
     const pause = () => {
-      CountDown.value.pause();
+      Countdown.value.pause();
     };
 
     const reset = () => {
-      CountDown.value.reset();
+      Countdown.value.reset();
     };
     onMounted(() => {
-      console.log(CountDown.value);
+      console.log(Countdown.value);
     });
 
     setTimeout(() => {
@@ -124,7 +124,7 @@ export default {
       onend,
       onpaused,
       onrestart,
-      CountDown,
+      Countdown,
       start,
       pause,
       reset

src/sites/mobile-taro/vue/src/exhibition/pages/countup/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'CountUp'
+  navigationBarTitleText: 'Countup'
 };

src/sites/mobile-taro/vue/src/exhibition/pages/noticebar/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'NoticeBar'
+  navigationBarTitleText: 'Noticebar'
 };

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

@@ -2,39 +2,39 @@
   <div class="trendarrow-demo demo">
     <h2>基本用法</h2>
     <nut-cell>
-      <nut-trendarrow :sync-text-color="false" :rate="1" />
-      <nut-trendarrow :sync-text-color="false" :rate="-0.2535" />
+      <nut-trend-arrow :sync-text-color="false" :rate="1" />
+      <nut-trend-arrow :sync-text-color="false" :rate="-0.2535" />
     </nut-cell>
     <view class="title">改变文字颜色</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" />
-      <nut-trendarrow :rate="-0.2535" />
+      <nut-trend-arrow :rate="10.2365" />
+      <nut-trend-arrow :rate="-0.2535" />
     </nut-cell>
     <view class="title">指定小数位</view>
     <nut-cell>
-      <nut-trendarrow :digits="3" :rate="10.2365" />
-      <nut-trendarrow :digits="1" :rate="-0.2535" />
+      <nut-trend-arrow :digits="3" :rate="10.2365" />
+      <nut-trend-arrow :digits="1" :rate="-0.2535" />
     </nut-cell>
     <view class="title">箭头在前面</view>
     <nut-cell>
-      <nut-trendarrow arrowLeft :rate="0.2535" />
-      <nut-trendarrow arrowLeft :rate="-0.2535" />
+      <nut-trend-arrow arrowLeft :rate="0.2535" />
+      <nut-trend-arrow arrowLeft :rate="-0.2535" />
     </nut-cell>
     <view class="title">显示正负号</view>
     <nut-cell>
-      <nut-trendarrow showSign :rate="1" />
-      <nut-trendarrow showSign :rate="-0.2535" />
+      <nut-trend-arrow showSign :rate="1" />
+      <nut-trend-arrow showSign :rate="-0.2535" />
     </nut-cell>
     <view class="title">是否展示0</view>
     <nut-cell>
-      <nut-trendarrow showSign :rate="0" />
-      <nut-trendarrow showSign showZero :rate="0" />
+      <nut-trend-arrow showSign :rate="0" />
+      <nut-trend-arrow showSign showZero :rate="0" />
     </nut-cell>
     <view class="title">自定义颜色</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)" />
-      <nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
-      <nut-trendarrow
+      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
+      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
+      <nut-trend-arrow
         :sync-text-color="false"
         showSign
         :rate="-0.2535"
@@ -44,11 +44,11 @@
     </nut-cell>
     <view class="title">自定义图标</view>
     <nut-cell>
-      <nut-trendarrow :rate="10.2365" :up-icon-name="'success'" />
-      <nut-trendarrow :rate="-10.2365" :down-icon-name="'failure'" />
-      <nut-trendarrow :rate="10.2365">
+      <nut-trend-arrow :rate="10.2365" :up-icon-name="'success'" />
+      <nut-trend-arrow :rate="-10.2365" :down-icon-name="'failure'" />
+      <nut-trend-arrow :rate="10.2365">
         <nut-icon name="heart-fill" color="#fa2c19" size="12px"></nut-icon>
-      </nut-trendarrow>
+      </nut-trend-arrow>
     </nut-cell>
   </div>
 </template>