fix: datepicker 组件内容完善 (#961)

* fix: datepicker 组件最大值与最小值一样时出错

src/packages/__VUE/datepicker/doc.md

@@ -16,129 +16,207 @@ app.use(DatePicker);
     
 ## 代码演示
     
-### 日期选择-每列不显示中文
+### 每列不显示中文
+:::demo
+
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    @confirm="confirm"
-    v-model:visible="show"
-    :is-show-chinese="false"
-></nut-datepicker> 
-```
-```javascript
+<template>
+  <nut-cell title="日期选择" :desc="desc" @click="open"></nut-cell>
+  <nut-datepicker
+      v-model="currentDate"
+      @confirm="confirm"
+      v-model:visible="show"
+      :is-show-chinese="false"
+  ></nut-datepicker> 
+</template>
+
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const desc = ref('2020-1-1');
-
-    return {
-      show,
-      desc
-      open: (index) => {
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('2020-1-1');
+      const currentDate = new Date(2020, 0, 1);
+      const open = ()=>{
         show.value = true;
-      },
-      confirm: (res) => {
+      }
+      const confirm = (val)=>{
         desc.value = val.join('-');
       }
-    };
-  }
-});
+      return {
+        currentDate,
+        show,
+        desc,
+        open,
+        confirm
+      };
+    }
+  };
 </script>
+
 ```
-### 日期选择-限制开始结束时间
+:::
+
+### 限制开始结束时间
+:::demo
+
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-    v-model:visible="show"
-    :is-show-chinese="false"
-></nut-datepicker> 
-```
-```javascript
+<template>
+  <nut-cell title="日期选择" :desc="desc" @click="open"></nut-cell>
+  <nut-datepicker
+      v-model="currentDate"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="confirm"
+      v-model:visible="show"
+      :is-show-chinese="false"
+  ></nut-datepicker> 
+</template>
+
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const desc = ref('2020-1-1');
-
-    return {
-      show,
-      desc,
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = val.join('-');
-      }
-    };
-  }
-});
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('2020-1-1');
+      const currentDate = new Date(2020, 0, 1);
+      return {
+        show,
+        desc,
+        currentDate,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = val.join('-');
+        }
+      };
+    }
+  };
 </script>
 ```
-### 日期时间-限制开始结束时间（有默认值）
+:::
+### 限制开始结束时间（有默认值）
+:::demo
+
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    type="datetime"
-    @confirm="confirm"
-    v-model:visible="show" 
-></nut-datepicker> 
-```
-```javascript
+<template>
+  <nut-cell title="日期选择" :desc="desc" @click="open"></nut-cell>
+  <nut-datepicker
+      v-model="currentDate"
+      :min-date="minDate"
+      :max-date="maxDate"
+      type="datetime"
+      @confirm="confirm"
+      v-model:visible="show" 
+  ></nut-datepicker> 
+</template>
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const desc = ref('2020年-1月-1日-0时-0分');
-
-    return {
-      show,
-      desc,
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = val.join('-');
-      }
-    };
-  }
-});
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('2020年-1月-1日-0时-0分');
+      const currentDate = new Date(2020, 0, 1);
+      return {
+        show,
+        desc,
+        currentDate,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = val.join('-');
+        }
+      };
+    }
+  };
 </script>
 ```
-### 时间选择-12小时制
+:::
+
+### 限制开始结束小时
+:::demo
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    type="time"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-use12-hours="true"
-    @confirm="confirm"
-    v-model:visible="show"
-></nut-datepicker>
-``` 
-### 时间选择-分钟数递增步长设置
+<template>
+  <nut-cell title="日期选择" :desc="desc" @click="open"></nut-cell>
+  <nut-datepicker
+      v-model="currentDate"
+      type="time"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :is-use12-hours="true"
+      @confirm="confirm"
+      v-model:visible="show"
+  ></nut-datepicker>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('0时-0分-0秒');
+
+      return {
+        show,
+        desc,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = val.join('-');
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+### 分钟数递增步长设置
+:::demo
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    type="time"
-    :minute-step="5"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-use12-hours="true"
-    @confirm="confirm"
-    v-model:visible="show"
-></nut-datepicker>
-```  
+<template>
+  <nut-cell title="日期选择" :desc="desc" @click="open"></nut-cell>
+  <nut-datepicker
+      v-model="currentDate"
+      type="time"
+      :minute-step="5"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="confirm"
+      v-model:visible="show"
+  ></nut-datepicker>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('0时-0分-0秒');
+
+      return {
+        show,
+        desc,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = val.join('-');
+        }
+      };
+    }
+  };
+</script>
+```
+:::
 
 ## API
     
@@ -149,7 +227,6 @@ export default createDemo({
 | v-model         | 初始值                                            | Date    | `null`   |
 | v-model:visible | 是否可见                                          | Boolean | `false`  |
 | type            | 类型，日期'date'， 日期时间'datetime'，时间'time' | String  | `'date'` |
-| is-use12-hours  | 是否十二小时制度，只限类型为'time'时使用          | Boolean | `false`  |
 | minute-step     | 分钟步进值                                        | Number  | `1`      |
 | is-show-chinese | 每列是否展示中文                                  | Boolean | `false`  |
 | title           | 设置标题                                          | String  | `null`   |

src/packages/__VUE/datepicker/index.vue

@@ -15,10 +15,7 @@ import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('datepicker');
 const currentYear = new Date().getFullYear();
 function isDate(val: Date): val is Date {
-  return (
-    Object.prototype.toString.call(val) === '[object Date]' &&
-    !isNaN(val.getTime())
-  );
+  return Object.prototype.toString.call(val) === '[object Date]' && !isNaN(val.getTime());
 }
 
 const zhCNType = {
@@ -126,11 +123,9 @@ export default create({
     };
 
     const ranges = computed(() => {
-      const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } =
-        getBoundary('max', state.currentDate);
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary('max', state.currentDate);
 
-      const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } =
-        getBoundary('min', state.currentDate);
+      const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary('min', state.currentDate);
 
       let result = [
         {
@@ -195,10 +190,7 @@ export default create({
             new Date(
               formatDate[0],
               formatDate[1] - 1,
-              Math.min(
-                formatDate[2],
-                getMonthEndDay(formatDate[0], formatDate[1])
-              )
+              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1]))
             )
           );
         } else if (props.type === 'datetime') {
@@ -206,10 +198,7 @@ export default create({
             new Date(
               formatDate[0],
               formatDate[1] - 1,
-              Math.min(
-                formatDate[2],
-                getMonthEndDay(formatDate[0], formatDate[1])
-              ),
+              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1])),
               formatDate[3],
               formatDate[4]
             )
@@ -218,13 +207,8 @@ export default create({
       }
     };
 
-    const generateValue = (
-      min: number,
-      max: number,
-      val: number,
-      type: string
-    ) => {
-      if (!(max > min)) return;
+    const generateValue = (min: number, max: number, val: number, type: string) => {
+      // if (!(max > min)) return;
       const arr: Array<number | string> = [];
       let index = 0;
       while (min <= max) {
@@ -266,13 +250,9 @@ export default create({
     };
 
     const columns = computed(() => {
+      console.log(ranges.value);
       const val = ranges.value.map((res) => {
-        return generateValue(
-          res.range[0],
-          res.range[1],
-          getDateIndex(res.type),
-          res.type
-        );
+        return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type);
       });
       return val;
     });

src/packages/__VUE/infiniteloading/doc.md

@@ -113,6 +113,7 @@
 
 <script>
   import { ref,reactive,onMounted,toRefs} from 'vue';
+  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       const refreshHasMore = ref(true);

src/packages/__VUE/picker/doc.md

@@ -18,142 +18,175 @@ app.use(Popup);
 
     
 ### 基础用法
+:::demo
 ```html
-<nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
-<nut-picker
-    v-model:visible="show"
-    :list-data="listData"
-    title="城市选择"
-    @confirm="confirm" 
-></nut-picker>
-```
-```javascript
+<template>
+  <nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
+  <nut-picker
+      v-model:visible="show"
+      :list-data="listData"
+      title="城市选择"
+      @confirm="confirm" 
+  ></nut-picker>
+</template>
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const listData = [
-      '南京市',
-      '无锡市',
-      '海北藏族自治区',
-      '北京市',
-      '连云港市',
-      '浙江市',
-      '江苏市'
-    ];
-
-    return {
-      listData,
-      open: (index) => {
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const listData = [
+        '南京市',
+        '无锡市',
+        '海北藏族自治区',
+        '北京市',
+        '连云港市',
+        '浙江市',
+        '江苏市'
+      ];
+      const desc = ref(listData[0]);
+      const open = ()=>{
         show.value = true;
-      },
-      confirm: (res) => {
+      }
+      const confirm = (res)=>{
         desc.value = res;
       }
-    };
-  }
-});
+      return {
+        show,
+        desc,
+        listData,
+        open,
+        confirm
+      };
+    }
+  };
 </script>
 ```
+:::
+
 ### 多列样式
 
+### 基础用法
+:::demo
 ```html
-<nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>
-<nut-picker
-    v-model:visible="show"
-    :list-data="listData"
-    title="多列选择"
-    @confirm="confirm"
-    @close="close"
-></nut-picker>
-```
-```javascript
+<template>
+  <nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>
+  <nut-picker
+      v-model:visible="show"
+      :list-data="listData"
+      title="多列选择"
+      @confirm="confirm"
+      @close="close"
+  ></nut-picker>
+</template>
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const listData = [
-      {
-        values: ['周一', '周二', '周三', '周四', '周五'],
-        defaultIndex: 2
-      },
-      // 第二列
-      {
-        values: ['上午', '下午', '晚上'],
-        defaultIndex: 1
-      }
-    ];
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const listData = [
+        {
+          values: ['周一', '周二', '周三', '周四', '周五'],
+          defaultIndex: 2
+        },
+        // 第二列
+        {
+          values: ['上午', '下午', '晚上'],
+          defaultIndex: 1
+        }
+      ];
+      const desc = ref(
+      `${listData[0].values[listData[0].defaultIndex]} ${
+        listData[1].values[listData[1].defaultIndex]
+      }`
+    );
 
-    return {
-      listData,
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = res.join(' ');
-      }
-    };
-  }
-});
+  
+      return {
+        show,
+        desc,
+        listData,
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = res.join(' ');
+        }
+      };
+    }
+  };
 </script>
 ```
+:::
+
 ### 多级联动
+
+:::demo
 ```html
-<nut-cell title="地址" :desc="desc" @click="open"></nut-cell>
-<nut-picker
-    v-model:visible="show"
-    :list-data="listData"
-    title="地址选择"
-    @confirm="confirm" 
-></nut-picker>
-```
-```javascript
+<template>
+  <nut-cell title="地址" :desc="desc" @click="open"></nut-cell>
+  <nut-picker
+      v-model:visible="show"
+      :list-data="listData"
+      title="地址选择"
+      @confirm="confirm" 
+  ></nut-picker>
+</template>
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const listData = [
-      {
-        text: '浙江',
-        children: [
-          {
-            text: '杭州',
-            children: [{ text: '西湖区' }, { text: '余杭区' }]
-          },
-          {
-            text: '温州',
-            children: [{ text: '鹿城区' }, { text: '瓯海区' }]
-          }
-        ]
-      },
-      {
-        text: '福建',
-        children: [
-          {
-            text: '福州',
-            children: [{ text: '鼓楼区' }, { text: '台江区' }]
-          },
-          {
-            text: '厦门',
-            children: [{ text: '思明区' }, { text: '海沧区' }]
-          }
-        ]
-      }
-    ];
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const listData = [
+        {
+          text: '浙江',
+          children: [
+            {
+              text: '杭州',
+              children: [{ text: '西湖区' }, { text: '余杭区' }]
+            },
+            {
+              text: '温州',
+              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
+            }
+          ]
+        },
+        {
+          text: '福建',
+          children: [
+            {
+              text: '福州',
+              children: [{ text: '鼓楼区' }, { text: '台江区' }]
+            },
+            {
+              text: '厦门',
+              children: [{ text: '思明区' }, { text: '海沧区' }]
+            }
+          ]
+        }
+      ];
 
-    return {
-      listData,
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = res.join(' ');
-      }
-    };
-  }
-});
+      const desc = ref(
+        `${listData[0].text}
+        ${listData[0].children[0].text}
+        ${listData[0].children[0].children[0].text}`
+      );
+
+      return {
+        desc,
+        show,
+        listData,
+        open: (index) => {
+          show.value = true;
+        },
+        confirm: (res) => {
+          desc.value = res.join(' ');
+        }
+      };
+    }
+  };
 </script>
-``` 
+```
+:::