doc: calendar 文档修改 (#1410)

* feat: 添加range组件、calendar组件在线文档

* fix: 文档调整

* fix: 重构calendar组件

* feat: 日历组件重构，文档修改，功能完善

* fix: 格式化

* fix: 代码格式化调整。

* fix: 去除无用代码

* fix: 文档调整

* fix:  文档调整

* fix: taro  demo 样式修改

* feat: range组件功能完善，新增 竖向操作，刻度展示。

* fix: 冲突解决

* feat: taro功能新增，兼容处理，文档修改

* feat: 添加range组件，jdt主题色

* fix: 修改组件初始化逻辑

* feat: 新增h5 日期多选功能

* feat: taro版本添加 日期多选功能

* fix: 修复多选，无法选中开头结尾日期问题

* fix: 文档修改，添加en-US 文档

* fix: 文档完善

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

src/packages/__VUE/animate/index.scss

@@ -4,7 +4,7 @@
   }
 
   /* Animation css */
-  [class*="nut-animate-"] {
+  [class*='nut-animate-'] {
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
     animation-fill-mode: both;
@@ -235,7 +235,7 @@
     &::before {
       width: 60 * 1px;
       height: 60 * 1px;
-      content: "";
+      content: '';
       box-sizing: border-box;
       border: 4 * 1px solid rgba(255, 255, 255, 0.6);
       position: absolute;
@@ -279,7 +279,7 @@
       left: 0;
       top: 0;
       opacity: 0.73;
-      content: "";
+      content: '';
       background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
       animation: flicker 1.5s linear infinite;
       transform: skewX(-20deg);
@@ -296,4 +296,4 @@
       transform: translateX(150 * 1px) skewX(-20deg);
     }
   }
-}
+}

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

@@ -1,6 +1,6 @@
 <template>
   <view class="nut-animate">
-    <view :class='classes' @click='handleClick'>
+    <view :class="classes" @click="handleClick">
       <slot></slot>
     </view>
   </view>
@@ -38,19 +38,18 @@ export default create({
       return {
         'nut-ani-container': true,
         [`${prefixCls}-${type.value}`]: action.value === 'initial' || state.clicked ? type.value : false,
-        'loop': loop.value,
+        loop: loop.value
       };
     });
 
     const handleClick = (event: Event) => {
-
-      state.clicked = true
+      state.clicked = true;
 
       //如果不是无限循环，清除类名
       if (!loop.value) {
         setTimeout(() => {
-          state.clicked = false
-        }, 1000)
+          state.clicked = false;
+        }, 1000);
       }
 
       emit('click', event);

src/packages/__VUE/animate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="nut-animate">
-    <view :class='classes' @click='handleClick'>
+    <view :class="classes" @click="handleClick">
       <slot></slot>
     </view>
   </view>
@@ -38,19 +38,18 @@ export default create({
       return {
         'nut-ani-container': true,
         [`${prefixCls}-${type.value}`]: action.value === 'initial' || state.clicked ? type.value : false,
-        'loop': loop.value,
+        loop: loop.value
       };
     });
 
     const handleClick = (event: Event) => {
-
-      state.clicked = true
+      state.clicked = true;
 
       //如果不是无限循环，清除类名
       if (!loop.value) {
         setTimeout(() => {
-          state.clicked = false
-        }, 1000)
+          state.clicked = false;
+        }, 1000);
       }
 
       emit('click', event);

src/packages/__VUE/animate/type.ts

@@ -1,2 +1,13 @@
-export type AnimateType = 'shake' | 'ripple' | 'breath' | 'float' | 'slide-right' | 'slide-left' | 'slide-top' | 'slide-bottom' | 'jump' | 'twinkle' | 'flicker';
+export type AnimateType =
+  | 'shake'
+  | 'ripple'
+  | 'breath'
+  | 'float'
+  | 'slide-right'
+  | 'slide-left'
+  | 'slide-top'
+  | 'slide-bottom'
+  | 'jump'
+  | 'twinkle'
+  | 'flicker';
 export type AnimateAction = 'initial' | 'click';

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

@@ -559,6 +559,7 @@ export default {
 | confirm-text          | Bottom confirm button text               | String          | ’Confirm‘ |
 | show-title          | Whether to show the calendar title               | Boolean          | true |
 | show-sub-title          | Whether to display the date title              | Boolean          | true |
+| to-date-animation          | Whether to use scroll animation              | Boolean          | true |
 
 ### Events
 

src/packages/__VUE/calendar/doc.md

@@ -552,6 +552,7 @@ export default {
 | confirm-text          | 底部确认按钮文案               | String          | ’确认‘ |
 | show-title          | 是否在展示日历标题               | Boolean          | true |
 | show-sub-title          | 是否展示日期标题              | Boolean          | true |
+| to-date-animation          | 是否启动滚动动画              | Boolean          | true |
 
 ### Events
 

src/packages/__VUE/calendar/index.vue

@@ -168,7 +168,6 @@ export default create({
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);
     const scrollToDate = (date: string) => {
-      console.log(calendarRef.value);
       calendarRef.value?.scrollToDate(date);
     };
     useExpose({

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

@@ -622,12 +622,9 @@ export default create({
       } else if (!Utils.compareDate(date, state.propEndDate)) {
         date = state.propEndDate;
       }
-      console.log(date);
       let dateArr = splitDate(date);
       state.monthsData.forEach((item, index) => {
         if (item.title == translate('monthTitle', dateArr[0], dateArr[1])) {
-          // if (months.value) {
-
           if (props.toDateAnimation) {
             Taro.createSelectorQuery()
               .select('.nut-calendar-content')
@@ -639,8 +636,6 @@ export default create({
                   flag++;
                   if (months.value) {
                     let offset = distance / 10;
-                    console.log('scrolltodate ', distance, offset);
-
                     state.scrollTop = state.scrollTop + offset;
                   }
                   if (flag >= 10) {
@@ -655,7 +650,6 @@ export default create({
           } else {
             state.scrollTop = state.monthsData[index].cssScrollHeight;
           }
-          // }
         }
       });
     };

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

@@ -1 +1 @@
-export default { navigationBarTitleText: 'Animate' }
+export default { navigationBarTitleText: 'Animate' };

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

@@ -1,77 +1,74 @@
 <template>
-  <div class='demo'>
-
+  <div class="demo">
     <h2>点击触发</h2>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='slide-right' action='click'>
-        <nut-button type='primary'>由右向左划入</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="slide-right" action="click">
+        <nut-button type="primary">由右向左划入</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='slide-left' action='click'>
-        <nut-button type='primary'>由左向右划入</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="slide-left" action="click">
+        <nut-button type="primary">由左向右划入</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='slide-top' action='click'>
-        <nut-button type='primary'>由上至下划入</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="slide-top" action="click">
+        <nut-button type="primary">由上至下划入</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='slide-bottom' action='click'>
-        <nut-button type='primary'>由下至上划入</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="slide-bottom" action="click">
+        <nut-button type="primary">由下至上划入</nut-button>
       </nut-animate>
     </div>
 
     <h2>循环动画</h2>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='shake' :loop='true'>
-        <nut-button type='primary'>shake-抖动</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="shake" :loop="true">
+        <nut-button type="primary">shake-抖动</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='ripple' :loop='true'>
-        <nut-button type='primary'>ripple-心跳</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="ripple" :loop="true">
+        <nut-button type="primary">ripple-心跳</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='breath' :loop='true'>
-        <nut-button type='primary'>breath-呼吸灯</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="breath" :loop="true">
+        <nut-button type="primary">breath-呼吸灯</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='twinkle' :loop='true'>
-        <nut-button type='primary'>twinkle-水波</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="twinkle" :loop="true">
+        <nut-button type="primary">twinkle-水波</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='flicker' :loop='true'>
-        <nut-button type='primary'>flicker-擦亮</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="flicker" :loop="true">
+        <nut-button type="primary">flicker-擦亮</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='jump' :loop='true'>
-        <nut-button type='primary'>jump-跳跃</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="jump" :loop="true">
+        <nut-button type="primary">jump-跳跃</nut-button>
       </nut-animate>
     </div>
 
-    <div class='ani-demo-div'>
-      <nut-animate type='float' :loop='true'>
-        <nut-button type='primary'>float-漂浮</nut-button>
+    <div class="ani-demo-div">
+      <nut-animate type="float" :loop="true">
+        <nut-button type="primary">float-漂浮</nut-button>
       </nut-animate>
     </div>
-
-
   </div>
 </template>
 <script lang="ts">
@@ -83,7 +80,7 @@ export default defineComponent({
   }
 });
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .demo {
 }