fix: calendar修改文档与demo (#2048)

* fix: backtop  add ts interface

* fix: ts类型修改

* feat: 添加*.d.ts文件

* fix: ts类型修改

* fix: toast类型修改

* fix: input组件修改，结合form

* fix: input组件showlimit 调整，样式修改，icon修改

* fix: input 修改

* fix: input icon 修改

* fix: form demo修改，文档调整，input调整

* fix: 水印组件修改

* fix: button taro demo修改

* fix: range 组件修改，taro 转h5问题修复

* fix: 文档修改

* fix: 文档格式调整

* fix: 日历组件问题修复

* fix: 日历组件，放大系数改为依赖于fontsize

* fix: 样式调整，taro类型判断修改

* fix: 文档修改

* fix: 日历组件slots修改

* fix: 去除console

Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>

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
 

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
 

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
 

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