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

* chore: trendarrow 使用名称变更

* chore: timeselect 使用名称变更

* chore: timepannel 使用名称变更

* chore: timedetail 使用名称变更

* chore: rename trendarrow usage

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/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>