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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.25",
+  "version": "4.0.0-beta.26",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

publish/nutui-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-taro",
-  "version": "4.0.0-beta.25",
+  "version": "4.0.0-beta.26",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

publish/nutui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.25",
+  "version": "4.0.0-beta.26",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

src/packages/__VUE/actionsheet/doc.md

@@ -266,7 +266,6 @@ export default {
      <nut-action-sheet v-model:visible="state.isVisible" title="标题">
       <div class="custom-content">自定义内容</div>
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';

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

@@ -601,7 +601,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- |
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_| 
 |  --nut-address-icon-color| _var(--nut-primary-color)_     | 
 |  --nut-address-header-title-font-size   | _18px_          | 
 |  --nut-address-header-title-color| _#262626_    | 

src/packages/__VUE/address/doc.md

@@ -628,7 +628,7 @@ app.use(Address);
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_| 
 |  --nut-address-icon-color| _var(--nut-primary-color)_     | 
 |  --nut-address-header-title-font-size   | _18px_          | 
 |  --nut-address-header-title-color| _#262626_    | 

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

@@ -628,7 +628,7 @@ app.use(Address);
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_| 
 |  --nut-address-icon-color| _var(--nut-primary-color)_     | 
 |  --nut-address-header-title-font-size   | _18px_          | 
 |  --nut-address-header-title-color| _#262626_    | 

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

@@ -98,7 +98,8 @@ test('should render slot correctly', async () => {
       day: (date) => {
         return `custom${date.date.day}`;
       },
-      bottomInfo: (date) => `${date.date ? (date.date.day <= 10 ? '上旬' : date.date.day <= 20 ? '中旬' : '下旬') : ''}`
+      'bottom-info': (date) =>
+        `${date.date ? (date.date.day <= 10 ? '上旬' : date.date.day <= 20 ? '中旬' : '下旬') : ''}`
     }
   });
   await nextTick();

src/packages/__VUE/calendar/demo.vue

@@ -115,8 +115,6 @@
         v-model:visible="isVisible5"
         :default-value="date5"
         type="range"
-        :start-date="`2021-12-22`"
-        :end-date="`2022-12-31`"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"
       >
@@ -162,7 +160,7 @@
         <template v-slot:day="date">
           <span>{{ renderDate(date) }}</span>
         </template>
-        <template v-slot:bottomInfo="date">
+        <template #bottom-info="date">
           <span class="info">{{ date.date ? (date.date.day == 10 ? '十' : '') : '' }}</span>
         </template>
       </nut-calendar>
@@ -373,7 +371,9 @@ export default createDemo({
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
+        var date1 = new Date();
+        date1.setDate(date1.getDate() + 30);
+        calendarRef.value.scrollToDate(Utils.date2Str(date1));
       }
     };
     const renderDate = (date: { date: Day }) => {
@@ -414,6 +414,7 @@ export default createDemo({
 .wrapper {
   display: flex;
   padding: 0 40px;
+  justify-content: center;
 }
 .d_div {
   margin: 0px 5px;

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

@@ -298,19 +298,17 @@ export default {
     v-model:visible="isVisible"
     :default-value="date"
     type="range"
-    :start-date="`2021-12-22`"
-    :end-date="`2022-12-31`"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
-    <template v-slot:btn>
+    <template #btn>
       <div class="wrapper">
         <div class="d_div"> <span class="d_btn" @click="goDate">Go Date</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn">Last Seven Days</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn1">This Month</span></div>
       </div>
     </template>
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day }}</span>
     </template>
   </nut-calendar>
@@ -375,11 +373,11 @@ export default {
      const setChooseValue = param => {
       state.date= param[3];
     };
-    const clickBtn = (param: string) => {
+    const clickBtn = () => {
       let date = [date2Str(new Date()), getDay(6)];
       state.date5 = date;
     };
-    const clickBtn1 = (param: string) => {
+    const clickBtn1 = () => {
       let date = new Date();
       let year = date.getFullYear();
       let month: any = date.getMonth() + 1;
@@ -390,7 +388,9 @@ export default {
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate('2022-04-01');
+        var date1 = new Date();
+        date1.setDate(date1.getDate() + 30);
+        calendarRef.value.scrollToDate(date2Str(date1));
       }
     };
     return {
@@ -420,7 +420,6 @@ export default {
     padding: 2px 8px;
     border-radius: 4px;
     display: inline-block;
-    height: 16px;
   }
 }
 
@@ -452,10 +451,10 @@ export default {
     end-text="Leave"
     title="Select Date"
   >
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
     </template>
-    <template v-slot:bottomInfo="date">
+    <template #bottom-info="date">
       <span class="info" >{{
         date.date ? (date.date.day == 10 ? '十' :  '') : ''
       }}</span>
@@ -625,8 +624,8 @@ export default {
 |---------|--------------|
 | btn | 	Below the custom calendar header, you can add custom actions |
 | day | 	Date information |
-| topInfo | 	Date top information |
-| bottomInfo | 	Date bottom information |
+| top-info | 	Date top information |
+| bottom-info | 	Date bottom information |
 
 ### Methods
 
@@ -645,7 +644,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 
 | --nut-calendar-primary-color| _var(--nut-primary-color)_   |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-color| _var(--nut-primary-color)_   |
 | --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
 | --nut-calendar-base-color| _#333333_   |
 | --nut-calendar-disable-color| _#d1d0d0_   |

src/packages/__VUE/calendar/doc.md

@@ -298,12 +298,10 @@ export default {
     v-model:visible="isVisible"
     :default-value="date"
     type="range"
-    :start-date="null"
-    :end-date="null"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
-    <template v-slot:btn>
+    <template #btn>
       <div class="wrapper">
         <div class="d_div">
           <span class="d_btn" @click="goDate">去某个时间</span>
@@ -316,7 +314,7 @@ export default {
         </div>
       </div>
     </template>
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day }}</span>
     </template>
   </nut-calendar>
@@ -381,11 +379,11 @@ export default {
      const setChooseValue = param => {
       state.date= param[3];
     };
-    const clickBtn = (param: string) => {
+    const clickBtn = () => {
       let date = [date2Str(new Date()), getDay(6)];
       state.date = date;
     };
-    const clickBtn1 = (param: string) => {
+    const clickBtn1 = () => {
       let date = new Date();
       let year = date.getFullYear();
       let month: any = date.getMonth() + 1;
@@ -396,7 +394,9 @@ export default {
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
+        var date1 = new Date();
+        date1.setDate(date1.getDate() + 30);
+        calendarRef.value.scrollToDate(date2Str(date1));
       }
     };
     return {
@@ -416,6 +416,7 @@ export default {
 .wrapper {
   display: flex;
   padding: 0 40px;
+  justify-content: center;
 }
 .d_div {
   margin: 0px 5px;
@@ -426,7 +427,6 @@ export default {
     padding: 2px 8px;
     border-radius: 4px;
     display: inline-block;
-    height: 16px;
   }
 }
 
@@ -458,10 +458,10 @@ export default {
     end-text="离店"
     title="日期选择"
   >
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
     </template>
-    <template v-slot:bottomInfo="date">
+    <template #bottom-info="date">
       <span class="info" >{{
         date.date ? (date.date.day == 10 ? '十' :  '') : ''
       }}</span>
@@ -634,8 +634,8 @@ export default {
 |---------|--------------|
 | btn | 	自定义日历标题下部，可用以添加自定义操作 |
 | day | 	日期信息 |
-| topInfo | 	日期顶部信息 |
-| bottomInfo | 	日期底部信息 |
+| top-info | 	日期顶部信息 |
+| bottom-info | 	日期底部信息 |
 
 ### Methods
 
@@ -655,7 +655,7 @@ export default {
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 
 | --nut-calendar-primary-color| _var(--nut-primary-color)_   |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-color| _var(--nut-primary-color)_   |
 | --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
 | --nut-calendar-base-color| _#333333_   |
 | --nut-calendar-disable-color| _#d1d0d0_   |

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

@@ -303,14 +303,14 @@ export default {
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
-    <template v-slot:btn>
+    <template #btn>
       <div class="wrapper">
         <div class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></div>
       </div>
     </template>
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day }}</span>
     </template>
   </nut-calendar>
@@ -390,7 +390,9 @@ export default {
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate(date2Str(new Date()));
+        var date1 = new Date();
+        date1.setDate(date1.getDate() + 30);
+        calendarRef.value.scrollToDate(date2Str(date1));
       }
     };
     return {
@@ -421,7 +423,6 @@ export default {
     padding: 2px 8px;
     border-radius: 4px;
     display: inline-block;
-    height: 16px;
   }
 }
 
@@ -453,11 +454,11 @@ export default {
     end-text="离店"
     title="日期选择"
   >
-    <template v-slot:day="date">
+    <template #day="date">
       <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
     </template>
-    <template v-slot:bottomInfo="date">
-      <span class="info" style="fontSize:12px;lineHeight:14px">{{
+    <template #bottom-info="date">
+      <span class="info">{{
         date.date ? (date.date.day == 10 ? '十' :  '') : ''
       }}</span>
     </template>
@@ -628,8 +629,8 @@ export default {
 |---------|--------------|
 | btn | 	自定义日历标题下部，可用以添加自定义操作 |
 | day | 	日期信息 |
-| topInfo | 	日期顶部信息 |
-| bottomInfo | 	日期底部信息 |
+| top-info | 	日期顶部信息 |
+| bottom-info | 	日期底部信息 |
 
 ### Methods
 
@@ -649,7 +650,7 @@ export default {
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 
 | --nut-calendar-primary-color| _var(--nut-primary-color)_   |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-color| _var(--nut-primary-color)_   |
 | --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
 | --nut-calendar-base-color| _#333333_   |
 | --nut-calendar-disable-color| _#d1d0d0_   |

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

@@ -32,17 +32,17 @@
       :to-date-animation="toDateAnimation"
       :first-day-of-week="firstDayOfWeek"
     >
-      <template v-slot:btn v-if="showTopBtn">
+      <template #btn v-if="showTopBtn">
         <slot name="btn"> </slot>
       </template>
-      <template v-slot:day="date" v-if="dayInfo">
+      <template #day="date" v-if="dayInfo">
         <slot name="day" :date="date.date"> </slot>
       </template>
-      <template v-slot:topInfo="date" v-if="topInfo">
-        <slot name="topInfo" :date="date.date"> </slot>
+      <template #top-info="date" v-if="topInfo">
+        <slot name="top-info" :date="date.date"> </slot>
       </template>
-      <template v-slot:bottomInfo="date" v-if="bottomInfo">
-        <slot name="bottomInfo" :date="date.date"> </slot>
+      <template #bottom-info="date" v-if="bottomInfo">
+        <slot name="bottom-info" :date="date.date"> </slot>
       </template>
     </nut-calendar-item>
   </nut-popup>
@@ -67,17 +67,17 @@
     :show-today="showToday"
     :first-day-of-week="firstDayOfWeek"
   >
-    <template v-slot:btn v-if="showTopBtn">
+    <template #btn v-if="showTopBtn">
       <slot name="btn"> </slot>
     </template>
-    <template v-slot:day="date" v-if="dayInfo">
+    <template #day="date" v-if="dayInfo">
       <slot name="day" :date="date.date"> </slot>
     </template>
-    <template v-slot:topInfo="date" v-if="topInfo">
-      <slot name="topInfo" :date="date.date"> </slot>
+    <template #top-info="date" v-if="topInfo">
+      <slot name="top-info" :date="date.date"> </slot>
     </template>
-    <template v-slot:bottomInfo="date" v-if="bottomInfo">
-      <slot name="bottomInfo" :date="date.date"> </slot>
+    <template #bottom-info="date" v-if="bottomInfo">
+      <slot name="bottom-info" :date="date.date"> </slot>
     </template>
   </nut-calendar-item>
 </template>
@@ -173,13 +173,13 @@ export default create({
       return slots.btn;
     });
     const topInfo = computed(() => {
-      return slots.topInfo;
+      return slots['top-info'];
     });
     const dayInfo = computed(() => {
       return slots.day;
     });
     const bottomInfo = computed(() => {
-      return slots.bottomInfo;
+      return slots['bottom-info'];
     });
     let show = ref(props.visible);
     // element refs

src/packages/__VUE/calendar/index.vue

@@ -34,17 +34,17 @@
       :to-date-animation="toDateAnimation"
       :first-day-of-week="firstDayOfWeek"
     >
-      <template v-slot:btn v-if="showTopBtn">
+      <template #btn v-if="showTopBtn">
         <slot name="btn"> </slot>
       </template>
-      <template v-slot:day="date" v-if="dayInfo">
+      <template #day="date" v-if="dayInfo">
         <slot name="day" :date="date.date"> </slot>
       </template>
-      <template v-slot:topInfo="date" v-if="topInfo">
-        <slot name="topInfo" :date="date.date"> </slot>
+      <template #top-info="date" v-if="topInfo">
+        <slot name="top-info" :date="date.date"> </slot>
       </template>
-      <template v-slot:bottomInfo="date" v-if="bottomInfo">
-        <slot name="bottomInfo" :date="date.date"> </slot>
+      <template #bottom-info="date" v-if="bottomInfo">
+        <slot name="bottom-info" :date="date.date"> </slot>
       </template>
     </nut-calendar-item>
   </nut-popup>
@@ -71,17 +71,17 @@
     :first-day-of-week="firstDayOfWeek"
     ref="calendarRef"
   >
-    <template v-slot:btn v-if="showTopBtn">
+    <template #btn v-if="showTopBtn">
       <slot name="btn"> </slot>
     </template>
-    <template v-slot:day="date" v-if="dayInfo">
+    <template #day="date" v-if="dayInfo">
       <slot name="day" :date="date.date"> </slot>
     </template>
-    <template v-slot:topInfo="date" v-if="topInfo">
-      <slot name="topInfo" :date="date.date"> </slot>
+    <template #top-info="date" v-if="topInfo">
+      <slot name="top-info" :date="date.date"> </slot>
     </template>
-    <template v-slot:bottomInfo="date" v-if="bottomInfo">
-      <slot name="bottomInfo" :date="date.date"> </slot>
+    <template #bottom-info="date" v-if="bottomInfo">
+      <slot name="bottom-info" :date="date.date"> </slot>
     </template>
   </nut-calendar-item>
 </template>
@@ -172,13 +172,13 @@ export default create({
       return slots.btn;
     });
     const topInfo = computed(() => {
-      return slots.topInfo;
+      return slots['top-info'];
     });
     const dayInfo = computed(() => {
       return slots.day;
     });
     const bottomInfo = computed(() => {
-      return slots.bottomInfo;
+      return slots['bottom-info'];
     });
     // element refs
     const calendarRef = ref<null | CalendarRef>(null);

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

@@ -41,10 +41,10 @@
                       </slot>
                     </view>
                     <view class="nut-calendar__day-tips nut-calendar__day-tips--top" v-if="topInfo">
-                      <slot name="topInfo" :date="day.type == 'curr' ? day : ''"> </slot>
+                      <slot name="top-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
                     <view class="nut-calendar__day-tips nut-calendar__day-tips--bottom" v-if="bottomInfo">
-                      <slot name="bottomInfo" :date="day.type == 'curr' ? day : ''"> </slot>
+                      <slot name="bottom-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
                     <view class="nut-calendar__day-tips--curr" v-if="!bottomInfo && showToday && isCurrDay(day)">
                       {{ translate('today') }}
@@ -164,10 +164,10 @@ export default create({
       return slots.btn;
     });
     const topInfo = computed(() => {
-      return slots.topInfo;
+      return slots['top-info'];
     });
     const bottomInfo = computed(() => {
-      return slots.bottomInfo;
+      return slots['bottom-info'];
     });
     // state
     const state: CalendarTaroState = reactive({

src/packages/__VUE/calendaritem/index.vue

@@ -34,10 +34,10 @@
                       </slot>
                     </view>
                     <view class="nut-calendar__day-tips nut-calendar__day-tips--top" v-if="topInfo">
-                      <slot name="topInfo" :date="day.type == 'curr' ? day : ''"> </slot>
+                      <slot name="top-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
                     <view class="nut-calendar__day-tips nut-calendar__day-tips--bottom" v-if="bottomInfo">
-                      <slot name="bottomInfo" :date="day.type == 'curr' ? day : ''"> </slot>
+                      <slot name="bottom-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
                     <view class="nut-calendar__day-tips--curr" v-if="!bottomInfo && showToday && isCurrDay(day)">
                       {{ translate('today') }}</view
@@ -164,10 +164,10 @@ export default create({
       return slots.btn;
     });
     const topInfo = computed(() => {
-      return slots.topInfo;
+      return slots['top-info'];
     });
     const bottomInfo = computed(() => {
-      return slots.bottomInfo;
+      return slots['bottom-info'];
     });
 
     const state: CalendarState = reactive({

src/packages/__VUE/cascader/demo.vue

@@ -2,128 +2,96 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
 
-    <nut-form>
-      <nut-form-item :label="translate('addressTip')">
-        <input
-          class="nut-input-text"
-          @click="demo1.visible = true"
-          :value="demo1.value"
-          readonly
-          :placeholder="translate('addressTip1')"
-          type="text"
-        />
-        <nut-cascader
-          :title="translate('addressTip')"
-          v-model:visible="demo1.visible"
-          v-model="demo1.value"
-          @change="events.change"
-          @path-change="events.pathChange"
-          :options="demo1.options"
-          close-icon="heart"
-          close-icon-position="top-left"
-        ></nut-cascader>
-      </nut-form-item>
-    </nut-form>
+    <nut-cell
+      :title="translate('addressTip')"
+      :desc="demo1.value.toString() || translate('addressTip1')"
+      @click="demo1.visible = true"
+    >
+    </nut-cell>
+    <nut-cascader
+      :title="translate('addressTip')"
+      v-model:visible="demo1.visible"
+      v-model="demo1.value"
+      @change="events.change"
+      @pathChange="events.pathChange"
+      :options="demo1.options"
+    ></nut-cascader>
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-form>
-      <nut-form-item :label="translate('addressTip')">
-        <input
-          class="nut-input-text"
-          @click="demo2.visible = true"
-          :value="demo2.value"
-          readonly
-          :placeholder="translate('addressTip1')"
-          type="text"
-        />
-        <nut-cascader
-          :title="translate('addressTip')"
-          v-model:visible="demo2.visible"
-          v-model="demo2.value"
-          text-key="text"
-          @change="events.change"
-          @path-change="events.pathChange"
-          value-key="text"
-          children-key="items"
-          :options="demo2.options"
-        ></nut-cascader>
-      </nut-form-item>
-    </nut-form>
+    <nut-cell
+      :title="translate('addressTip')"
+      :desc="demo2.value.toString() || translate('addressTip1')"
+      @click="demo2.visible = true"
+    >
+    </nut-cell>
+    <nut-cascader
+      :title="translate('addressTip')"
+      v-model:visible="demo2.visible"
+      v-model="demo2.value"
+      labelKey="text"
+      @change="events.change"
+      @pathChange="events.pathChange"
+      valueKey="text"
+      childrenKey="items"
+      :options="demo2.options"
+    ></nut-cascader>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-form>
-      <nut-form-item :label="translate('addressTip')">
-        <input
-          class="nut-input-text"
-          @click="demo3.visible = true"
-          :value="demo3.value"
-          readonly
-          :placeholder="translate('addressTip1')"
-          type="text"
-        />
-        <nut-cascader
-          :title="translate('addressTip')"
-          v-model:visible="demo3.visible"
-          v-model="demo3.value"
-          @change="events.change"
-          @path-change="events.pathChange"
-          lazy
-          :lazy-load="demo3.lazyLoad"
-        ></nut-cascader>
-      </nut-form-item>
-    </nut-form>
+    <nut-cell
+      :title="translate('addressTip')"
+      :desc="demo3.value.toString() || translate('addressTip1')"
+      @click="demo3.visible = true"
+    >
+    </nut-cell>
+    <nut-cascader
+      :title="translate('addressTip')"
+      v-model:visible="demo3.visible"
+      v-model="demo3.value"
+      @change="events.change"
+      @pathChange="events.pathChange"
+      lazy
+      :lazyLoad="demo3.lazyLoad"
+    ></nut-cascader>
 
     <h2>{{ translate('title3') }}</h2>
-    <nut-form>
-      <nut-form-item :label="translate('addressTip')">
-        <input
-          class="nut-input-text"
-          @click="demo4.visible = true"
-          :value="demo4.value"
-          readonly
-          :placeholder="translate('addressTip1')"
-          type="text"
-        />
-        <nut-cascader
-          :title="translate('addressTip')"
-          v-model:visible="demo4.visible"
-          v-model="demo4.value"
-          @change="events.change"
-          @path-change="events.pathChange"
-          :options="demo4.options"
-          lazy
-          :lazy-load="demo4.lazyLoad"
-        ></nut-cascader>
-      </nut-form-item>
-    </nut-form>
+    <nut-cell
+      :title="translate('addressTip')"
+      :desc="demo4.value.toString() || translate('addressTip1')"
+      @click="demo4.visible = true"
+    >
+    </nut-cell>
+    <nut-cascader
+      :title="translate('addressTip')"
+      v-model:visible="demo4.visible"
+      v-model="demo4.value"
+      @change="events.change"
+      @pathChange="events.pathChange"
+      :options="demo4.options"
+      lazy
+      :lazyLoad="demo4.lazyLoad"
+    ></nut-cascader>
 
     <h2>{{ translate('title4') }}</h2>
-    <nut-form>
-      <nut-form-item :label="translate('addressTip')">
-        <input
-          class="nut-input-text"
-          @click="demo5.visible = true"
-          :value="demo5.value"
-          readonly
-          :placeholder="translate('addressTip1')"
-          type="text"
-        />
-        <nut-cascader
-          :title="translate('addressTip')"
-          v-model:visible="demo5.visible"
-          v-model="demo5.value"
-          @change="events.change"
-          @path-change="events.pathChange"
-          :options="demo5.options"
-          :convertConfig="demo5.convertConfig"
-        ></nut-cascader>
-      </nut-form-item>
-    </nut-form>
+    <nut-cell
+      :title="translate('addressTip')"
+      :desc="demo5.value.toString() || translate('addressTip1')"
+      @click="demo5.visible = true"
+    >
+    </nut-cell>
+    <nut-cascader
+      :title="translate('addressTip')"
+      v-model:visible="demo5.visible"
+      v-model="demo5.value"
+      @change="events.change"
+      @pathChange="events.pathChange"
+      :options="demo5.options"
+      :convertConfig="demo5.convertConfig"
+    ></nut-cascader>
   </div>
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, watch } from 'vue';
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('cascader');
 import { useTranslate } from '@/sites/assets/util/useTranslate';

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

@@ -216,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 3000);
+        }, 2000);
       }
     });
     const events = {
@@ -373,7 +373,7 @@ export default {
 | convert-config      | When options is a flat structure that can be converted into a tree structure, configure the conversion rules | object   | -           |
 | title               | Title                                                                                                        | string   | `''`          |
 | close-icon-position | Cancel the button position and inherit the popup component                                                   | string   | `"top-right"` |
-| closeable           | Whether to display the close button and inherit the popup component                                          | boolean  | `true`        |
+| closeable           | Whether to display the close button and inherit the popup component                                          | boolean  | `false`        |
 | poppable            | Whether to display the popup（After setting to false, the title is invalid）                                 | boolean  | `true`        |
 
 ### Events

src/packages/__VUE/cascader/doc.md

@@ -216,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 3000);
+        }, 2000);
       }
     });
     const events = {
@@ -373,7 +373,7 @@ export default {
 | convert-config      | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object   | -           |
 | title               | 标题                                                  | string   | `''`          |
 | close-icon-position | 取消按钮位置，继承 `Popup` 组件                         | string   | `"top-right"` |
-| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                     | boolean  | `true`        |
+| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                     | boolean  | `false`        |
 | poppable            | 是否需要弹层展示（设置为 `false` 后，`title` 失效）          | boolean  | `true`        |
 
 ### Events

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

@@ -216,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 3000);
+        }, 2000);
       }
     });
     const events = {
@@ -373,7 +373,7 @@ export default {
 | convert-config      | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object   | -           |
 | title               | 标题                                                  | string   | `''`          |
 | close-icon-position | 取消按钮位置，继承 `Popup` 组件                         | string   | `"top-right"` |
-| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                     | boolean  | `true`        |
+| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                     | boolean  | `false`        |
 | poppable            | 是否需要弹层展示（设置为 `false` 后，`title` 失效）          | boolean  | `true`        |
 
 ### Events

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

@@ -63,7 +63,6 @@ Default values ​​for these variables are defined on the `:root` node, and al
     --nut-primary-color: #fa2c19;
     --nut-primary-color-end: #fa6419;
     --nut-help-color: #f5f5f5;
-    --nut-active-color: rgba(250, 44, 25, 0.15);
 }
 ```
 
@@ -132,7 +131,6 @@ Here are all the base variables:
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
   --nut-help-color: #f5f5f5;
-  --nut-active-color: rgba(250, 44, 25, 0.15);
   --nut-title-color: #1a1a1a;
   --nut-title-color2: #666666;
   --nut-text-color: #808080;

src/packages/__VUE/configprovider/doc.md

@@ -87,7 +87,7 @@ app.use(ConfigProvider);
 <template>
     <nut-config-provider :theme-vars="themeVars">
       <nut-form>
-        <nut-form-item :label="滑块">
+        <nut-form-item label="滑块">
           <nut-range hidden-tag v-model="range"></nut-range>
         </nut-form-item>
       </nut-form>

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

@@ -87,7 +87,7 @@ page, :root {
 <template>
     <nut-config-provider :theme-vars="themeVars">
       <nut-form>
-        <nut-form-item :label="滑块">
+        <nut-form-item label="滑块">
           <nut-range hidden-tag v-model="range"></nut-range>
         </nut-form-item>
       </nut-form>

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

@@ -249,7 +249,7 @@ The component provides the following CSS variables, which can be used to customi
 |  --nut-radio-label-disable-color|  _#999_  |
 |  --nut-radio-icon-disable-color|  _#d6d6d6_  |
 |  --nut-radio-label-button-border-color|  _var(--nut-primary-color)_  |
-|  --nut-radio-label-button-background|  _var(--nut-active-color)_  |
+|  --nut-radio-label-button-background|  _var(--nut-primary-color)_  |
 |  --nut-radio-label-margin-left|  _15px_  |
 |  --nut-radio-button-border-radius|  _15px_  |
 |  --nut-radio-label-font-size|  _14px_  |

src/packages/__VUE/radio/doc.md

@@ -249,7 +249,7 @@ app.use(RadioGroup);
 |  --nut-radio-label-disable-color|  _#999_  |
 |  --nut-radio-icon-disable-color|  _#d6d6d6_  |
 |  --nut-radio-label-button-border-color|  _var(--nut-primary-color)_  |
-|  --nut-radio-label-button-background|  _var(--nut-active-color)_  |
+|  --nut-radio-label-button-background|  _var(--nut-primary-color)_  |
 |  --nut-radio-label-margin-left|  _15px_  |
 |  --nut-radio-button-border-radius|  _15px_  |
 |  --nut-radio-label-font-size|  _14px_  |

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

@@ -249,7 +249,7 @@ app.use(RadioGroup);
 |  --nut-radio-label-disable-color|  _#999_  |
 |  --nut-radio-icon-disable-color|  _#d6d6d6_  |
 |  --nut-radio-label-button-border-color|  _var(--nut-primary-color)_  |
-|  --nut-radio-label-button-background|  _var(--nut-active-color)_  |
+|  --nut-radio-label-button-background|  _var(--nut-primary-color)_  |
 |  --nut-radio-label-margin-left|  _15px_  |
 |  --nut-radio-button-border-radius|  _15px_  |
 |  --nut-radio-label-font-size|  _14px_  |

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

@@ -439,7 +439,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 
 |  --nut-range-tip-font-color| _#333333_  |
-|  --nut-range-bg-color| _var(--nut-active-color)_  |
+|  --nut-range-bg-color| _var(--nut-primary-color)_  |
 |  --nut-range-bg-color-tick| _#fa958c_  |
 |  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |
 |  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |

src/packages/__VUE/range/doc.md

@@ -443,7 +443,7 @@ export default {
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 
 |  --nut-range-tip-font-color| _#333333_  | 
-|  --nut-range-bg-color| _var(--nut-active-color)_  | 
+|  --nut-range-bg-color| _var(--nut-primary-color)_  | 
 |  --nut-range-bg-color-tick| _#fa958c_  | 
 |  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  | 
 |  --nut-range-bar-btn-bg-color| _var(--nut-white)_  | 

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

@@ -419,7 +419,7 @@ export default {
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |
 |  --nut-range-tip-font-color| _#333333_  |
-|  --nut-range-bg-color| _var(--nut-active-color)_  |
+|  --nut-range-bg-color| _var(--nut-primary-color)_  |
 |  --nut-range-bg-color-tick| _#fa958c_  |
 |  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |
 |  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |

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

@@ -100,6 +100,27 @@ export default {
 ```
 :::
 
+### Custom Color
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" active-color="#FFC800"/>
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
 ### Disabled state
 
 :::demo

src/packages/__VUE/rate/doc.md

@@ -101,6 +101,27 @@ export default {
 ```
 :::
 
+### 自定义颜色
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" active-color="#FFC800"/>
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
 ### 禁用状态
 
 :::demo

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

@@ -100,6 +100,27 @@ export default {
 ```
 :::
 
+### 自定义颜色
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" active-color="#FFC800"/>
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
 ### 禁用状态
 
 :::demo

src/packages/__VUE/rate/index.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
+    margin-right: 14px;
     &:last-child {
       margin-right: 0;
     }

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

@@ -47,7 +47,7 @@ export default create({
     },
     spacing: {
       type: [String, Number],
-      default: 14
+      default: undefined
     }
   },
   components: { StarFillN },

src/packages/__VUE/rate/index.vue

@@ -52,7 +52,7 @@ export default create({
     },
     spacing: {
       type: [String, Number],
-      default: 14
+      default: undefined
     }
   },
   components: { StarFillN },

src/packages/__VUE/rate/template.html

@@ -1,6 +1,6 @@
 <view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
   <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + n"
-    :style="{ marginRight: pxCheck(spacing) }">
+    :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}">
     <view>
       <component
         :is="renderIcon(customIcon,{width:size,height:size,size,color:n <= modelValue ? activeColor : voidColor})"

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

@@ -575,7 +575,7 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
 | --nut-sku-item-disable-line|  _line-through_  |
 | --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-item-active-bg|  _var(--nut-primary-color)_  |
 | --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
 | --nut-sku-spec-height|  _30px_  |
 | --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |

src/packages/__VUE/sku/doc.md

@@ -575,7 +575,7 @@ sku : [{
 | --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
 | --nut-sku-item-disable-line|  _line-through_  |
 | --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-item-active-bg|  _var(--nut-primary-color)_  |
 | --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
 | --nut-sku-spec-height|  _30px_  |
 | --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |

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

@@ -580,7 +580,7 @@ sku : [{
 | --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
 | --nut-sku-item-disable-line|  _line-through_  |
 | --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-item-active-bg|  _var(--nut-primary-color)_  |
 | --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
 | --nut-sku-spec-height|  _30px_  |
 | --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |

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

@@ -120,6 +120,7 @@ Use icon slot to custom icon.
   </nut-tabbar>
 </template>
 <script>
+ import { h, ref } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },
@@ -212,6 +213,7 @@ Use icon slot to custom icon.
     </nut-tabbar>
 </template>
 <script>
+ import { h } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },
@@ -296,6 +298,7 @@ Use icon slot to custom icon.
     </nut-tabbar>
 </template>
 <script>
+ import { h } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },

src/packages/__VUE/tabbar/doc.md

@@ -76,6 +76,7 @@ app.use(TabbarItem);
     </nut-tabbar>
 </template>
 <script>
+  import { h, ref } from 'vue';
   import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
   export default{
     components: {Home,Category,Find,Cart, My },
@@ -177,6 +178,7 @@ app.use(TabbarItem);
   </nut-tabbar>
 </template>
 <script>
+  import { h, ref } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },
@@ -272,6 +274,7 @@ app.use(TabbarItem);
     </nut-tabbar>
 </template>
 <script>
+  import { h, ref } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },
@@ -356,6 +359,7 @@ app.use(TabbarItem);
     </nut-tabbar>
 </template>
 <script>
+  import { h } from 'vue';
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  export default{
     components: {Home,Category,Find,Cart, My },

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

@@ -136,7 +136,7 @@ app.use(TabbarItem);
   </nut-tabbar>
 </template>
 <script>
-  import { Home} from ' @nutui/icons-vue-taro';
+  import { Home} from '@nutui/icons-vue-taro';
   export default{
     components: {Home },
     setup() {
@@ -167,7 +167,7 @@ app.use(TabbarItem);
 </template>
 <script>
   import{ ref,h } from 'vue'
- import { Home,Category,Find,Cart,My} from ' @nutui/icons-vue-taro';
+ import { Home,Category,Find,Cart,My} from '@nutui/icons-vue-taro';
  export default{
     components: {Home,Category,Find,Cart, My },
     setup() {
@@ -233,7 +233,7 @@ app.use(TabbarItem);
     </nut-tabbar>
 </template>
 <script>
-  import { Home,Category,Find,Cart,My} from ' @nutui/icons-vue-taro';
+  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue-taro';
   export default{
     components: {Home,Category,Find,Cart, My }
     setup(){
@@ -257,7 +257,7 @@ app.use(TabbarItem);
 </template>
 <script>
  import{ h } from 'vue'
- import { Home,Category,Find,Cart,My} from ' @nutui/icons-vue-taro';
+ import { Home,Category,Find,Cart,My} from '@nutui/icons-vue-taro';
  export default{
     components: {Home,Category,Find,Cart, My },
     setup() {
@@ -314,7 +314,7 @@ app.use(TabbarItem);
   </nut-tabbar>
 </template>
 <script>
- import { Home } from ' @nutui/icons-vue-taro';
+ import { Home } from '@nutui/icons-vue-taro';
  export default{
     components: {Home},
     setup(){
@@ -338,7 +338,7 @@ app.use(TabbarItem);
 </template>
 <script>
  import{ h } from 'vue'
- import { Home,Category,Find,Cart,My} from ' @nutui/icons-vue-taro';
+ import { Home,Category,Find,Cart,My} from '@nutui/icons-vue-taro';
  export default{
     components: {Home,Category,Find,Cart, My },
     setup() {

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

@@ -392,11 +392,11 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-tabs-titles-item-color                        | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-item-active-color                 | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-background-color                  | _var(--nut-help-color)_                                                            |
-| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |
+| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_  |
 | --nut-tabs-horizontal-titles-height                 | _46px_                                                                             |
 | --nut-tabs-horizontal-titles-item-min-width         | _50px_                                                                             |
 | --nut-tabs-horizontal-titles-item-active-line-width | _40px_                                                                             |
-| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_ |
+| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_ |
 | --nut-tabs-vertical-titles-item-height              | _40px_                                                                             |
 | --nut-tabs-vertical-titles-item-active-line-height  | _14px_                                                                             |
 | --nut-tabs-vertical-titles-width                    | _100px_                                                                            |

src/packages/__VUE/tabs/doc.md

@@ -392,11 +392,11 @@ export default {
 | --nut-tabs-titles-item-color                        | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-item-active-color                 | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-background-color                  | _var(--nut-help-color)_                                                            |
-| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |
+| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_  |
 | --nut-tabs-horizontal-titles-height                 | _46px_                                                                             |
 | --nut-tabs-horizontal-titles-item-min-width         | _50px_                                                                             |
 | --nut-tabs-horizontal-titles-item-active-line-width | _40px_                                                                             |
-| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_ |
+| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_ |
 | --nut-tabs-vertical-titles-item-height              | _40px_                                                                             |
 | --nut-tabs-vertical-titles-item-active-line-height  | _14px_                                                                             |
 | --nut-tabs-vertical-titles-width                    | _100px_                                                                            |

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

@@ -390,11 +390,11 @@ export default {
 | --nut-tabs-titles-item-color                        | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-item-active-color                 | _var(--nut-title-color)_                                                           |
 | --nut-tabs-titles-background-color                  | _var(--nut-help-color)_                                                            |
-| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |
+| --nut-tabs-horizontal-tab-line-color                | _linear-gradient(90deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_  |
 | --nut-tabs-horizontal-titles-height                 | _46px_                                                                             |
 | --nut-tabs-horizontal-titles-item-min-width         | _50px_                                                                             |
 | --nut-tabs-horizontal-titles-item-active-line-width | _40px_                                                                             |
-| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_ |
+| --nut-tabs-vertical-tab-line-color                  | _linear-gradient(180deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)_ |
 | --nut-tabs-vertical-titles-item-height              | _40px_                                                                             |
 | --nut-tabs-vertical-titles-item-active-line-height  | _14px_                                                                             |
 | --nut-tabs-vertical-titles-width                    | _100px_                                                                            |

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

@@ -396,7 +396,7 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-timeselect-timedetail-item-border-radius| _5px_ |
 | --nut-timeselect-timedetail-item-text-color| _#333333_ |
 | --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ |
-| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ |
 

src/packages/__VUE/timeselect/doc.md

@@ -396,7 +396,7 @@ app.use(TimeDetail);
 | --nut-timeselect-timedetail-item-border-radius| _5px_ |
 | --nut-timeselect-timedetail-item-text-color| _#333333_ |
 | --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ |
-| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ |
 

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

@@ -389,6 +389,6 @@ app.use(TimeDetail);
 | --nut-timeselect-timedetail-item-border-radius| _5px_ |
 | --nut-timeselect-timedetail-item-text-color| _#333333_ |
 | --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ |
-| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ |

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

@@ -116,19 +116,17 @@
         v-model:visible="isVisible5"
         :default-value="date5"
         type="range"
-        :start-date="null"
-        :end-date="null"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"
       >
-        <template v-slot:btn>
+        <template #btn>
           <view class="wrapper">
-            <div class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></div>
+            <view class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></view>
             <view class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></view>
             <view class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></view>
           </view>
         </template>
-        <template v-slot:day="date">
+        <template #day="date">
           <span>{{ date.date.day }}</span>
         </template>
       </nut-calendar>
@@ -147,17 +145,17 @@
         type="range"
         @close="closeSwitch('isVisible6')"
         @choose="setChooseValue6"
-        :start-date="`2022-02-01`"
-        :end-date="`2022-3-30`"
+        :start-date="`2022-01-01`"
+        :end-date="`2022-12-31`"
         confirm-text="submit"
         start-text="入店"
         end-text="离店"
         title="日期选择"
       >
-        <template v-slot:day="date">
+        <template #day="date">
           <view>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</view>
         </template>
-        <template v-slot:bottomInfo="date">
+        <template #bottom-info="date">
           <view class="info">{{ date.date ? (date.date.day == 10 ? '十' : '') : '' }}</view>
         </template>
       </nut-calendar>
@@ -230,7 +228,7 @@ export default {
   setup() {
     const env = Taro.getEnv();
 
-    const calendarRef = ref(null);
+    const calendarRef = ref<any>(null);
     const state: TestCalendarState = reactive({
       isVisible: false,
       date: '2022-02-01',
@@ -299,11 +297,11 @@ export default {
     const setChooseValue8 = (param: string) => {
       state.date8 = param[3];
     };
-    const clickBtn = (param: string) => {
+    const clickBtn = () => {
       let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
       state.date5 = date;
     };
-    const clickBtn1 = (param: string) => {
+    const clickBtn1 = () => {
       let date = new Date();
       let year = date.getFullYear();
       let month: any = date.getMonth() + 1;
@@ -314,7 +312,9 @@ export default {
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
+        var date1 = new Date();
+        date1.setDate(date1.getDate() + 30);
+        calendarRef.value.scrollToDate(Utils.date2Str(date1));
       }
     };
     return {
@@ -351,6 +351,7 @@ export default {
 .wrapper {
   display: flex;
   padding: 0 40px;
+  justify-content: center;
 }
 .d_div {
   margin: 0px 5px;