feat: datepicker适配taro (#524)

* feat: datepicker

src/config.json

@@ -207,6 +207,8 @@
         {
           "version": "3.0.0",
           "name": "DatePicker",
+          "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "日期选择器",
           "desc": "提供多个选型集合供用户选择,支持单列选择和多列级联,通常与弹出层配合使用",

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

@@ -5,156 +5,51 @@
 时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。
     
 ### 安装
-    
+
 ```javascript
 import { createApp } from 'vue';
-import { DatePicker } from '@nutui/nutui';
+import { DatePicker } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(DatePicker);
 ```
-    
+
 ## 代码演示
-    
-### 日期选择-每列不显示中文
 ```html
-<nut-datepicker
-    v-model="currentDate"
-    @confirm="confirm"
-    v-model:visible="show"
-    :is-show-chinese="false"
-></nut-datepicker> 
+<nut-datepicker @onChange="onChange">
+  <nut-cell title="请选择日期" :desc="desc"></nut-cell>
+</nut-datepicker>
 ```
 ```javascript
 <script>
 export default createDemo({
-  setup(props, { emit }) {
-    const show = ref(false);
-    const desc = ref('2020-1-1');
+  setup() {
+    const desc = ref();
 
-    return {
-      show,
-      desc
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = val.join('-');
-      }
+    const onChange = (value: any) => {
+      desc.value = value;
     };
-  }
-});
-</script>
-```
-### 日期选择-限制开始结束时间
-```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
-<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('-');
-      }
+      onChange
     };
   }
 });
 </script>
 ```
-### 日期时间-限制开始结束时间（有默认值）
-```html
-<nut-datepicker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    type="datetime"
-    @confirm="confirm"
-    v-model:visible="show" 
-></nut-datepicker> 
-```
-```javascript
-<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('-');
-      }
-    };
-  }
-});
-</script>
-```
-### 时间选择-12小时制
-```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>
-``` 
-### 时间选择-分钟数递增步长设置
-```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>
-```  
 
 ## API
-    
+
 ### Props
-    
+
 | 参数            | 说明                                              | 类型    | 默认值   |
 |-----------------|---------------------------------------------------|---------|----------|
-| 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`   |
-| min-date        | 开始日期                                          | Date    | `十年前` |
-| max-date        | 结束日期                                          | Date    | `十年后` |
+| value        | 选中的日期，格式为'YYYY-MM-DD'                        | String    | `new Date()` |
+| start        | 开始日期                                          | String    | `1970-01-01` |
+| end        | 结束日期                                          | String    | `2999-01-01` |
+| fields        | 选择器的粒度(`year`、`month`、`day`)            | String    | `day` |
 
 
 
@@ -162,5 +57,4 @@ export default createDemo({
     
 | 事件名  | 说明               | 回调参数     |
 |---------|--------------------|--------------|
-| confirm | 点击确定按钮时触发 | event: Event |
-| close   | 关闭时触发         | event: Event |
+| onChange | 点击确定按钮时触发 | event: Event |

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

@@ -0,0 +1,53 @@
+<template>
+  <picker
+    mode="date"
+    @change="onChange"
+    :value="value"
+    :start="start"
+    :end="end"
+    :fields="fields"
+  >
+    <slot></slot>
+  </picker>
+</template>
+<script lang="ts">
+import { toRefs } from 'vue';
+import { createComponent } from '../../utils/create';
+const { create } = createComponent('datepicker');
+
+export default create({
+  children: [],
+  props: {
+    value: {
+      type: String,
+      default: new Date()
+    },
+    start: {
+      type: String,
+      default: '1970-01-01'
+    },
+    end: {
+      type: String,
+      default: '2999-01-01'
+    },
+    fields: {
+      type: String,
+      default: 'day'
+    }
+  },
+  emits: ['onChange'],
+
+  setup(props, { emit }) {
+    const onChange = (e: any) => {
+      emit('onChange', e.detail.value);
+    };
+    return {
+      confirm,
+      onChange,
+      ...toRefs(props)
+    };
+  }
+});
+</script>
+
+<style lang="scss"></style>

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

@@ -7,7 +7,7 @@
 ## 安装
 ```javascript
 import { createApp } from 'vue';
-import { Picker } from '@nutui/nutui';
+import { Picker } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Picker);
@@ -18,19 +18,14 @@ app.use(Picker);
     
 ### 基础用法
 ```html
-<nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
-<nut-picker
-    v-model:visible="show"
-    :list-data="listData"
-    title="城市选择"
-    @confirm="confirm" 
-></nut-picker>
+<nut-picker mode="selector" :list-data="listData" @confirm="confirm">
+  <nut-cell title="请选择城市" :desc="desc"></nut-cell>
+</nut-picker>
 ```
 ```javascript
 <script>
 export default createDemo({
   setup(props, { emit }) {
-    const show = ref(false);
     const listData = [
       '南京市',
       '无锡市',
@@ -40,15 +35,15 @@ export default createDemo({
       '浙江市',
       '江苏市'
     ];
+    const desc = ref(listData[0]);
+    const confirm = (value: any, res: any) => {
+      desc.value = res;
+    };
 
     return {
       listData,
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = res;
-      }
+      confirm,
+      desc
     };
   }
 });
@@ -57,103 +52,45 @@ export default createDemo({
 ### 多列样式
 
 ```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>
+<nut-picker mode="multiSelector" :list-data="listData" @confirm="confirm">
+  <nut-cell title="请选择时间" :desc="desc"></nut-cell>
+</nut-picker>
 ```
 ```javascript
 <script>
 export default createDemo({
   setup(props, { emit }) {
-    const show = ref(false);
-    const listData = [
+    const listData = ref([
       {
         values: ['周一', '周二', '周三', '周四', '周五'],
         defaultIndex: 2
       },
-      // 第二列
       {
         values: ['上午', '下午', '晚上'],
         defaultIndex: 1
       }
-    ];
-
-    return {
-      listData,
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = res.join(' ');
-      }
+    ]);
+    const desc = ref(
+      `${listData.value[0].values[listData.value[0].defaultIndex]} ${
+        listData.value[1].values[listData.value[1].defaultIndex]
+      }`
+    );
+    const confirm = (value: any, res: any) => {
+      desc.value = res.join(' ');
+      listData.value.forEach((item, idx) => {
+        item.defaultIndex = value[idx];
+      });
     };
-  }
-});
-</script>
-```
-### 多级联动
-```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
-<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: '海沧区' }]
-          }
-        ]
-      }
-    ];
 
     return {
       listData,
-      open: (index) => {
-        show.value = true;
-      },
-      confirm: (res) => {
-        desc.value = res.join(' ');
-      }
+      confirm,
+      desc
     };
   }
 });
 </script>
-``` 
-
+```
 
 
 ## API
@@ -162,21 +99,13 @@ export default createDemo({
     
 | 参数                   | 说明                       | 类型    | 默认值 |
 |------------------------|----------------------------|---------|--------|
-| v-model:visible        | 是否可见                   | Boolean | false  |
-| title                  | 设置标题                   | String  | -      |
-| cancel-text            | 取消按钮文案               | String  | 取消   |
-| ok-text                | 确定按钮文案               | String  | 确定   |
 | list-data              | 列表数据                   | Array   | -      |
-| default-value-index    | 初始选中项的索引，默认为 0 | number  | 0      |
-| teleport               | 指定挂载节点               | String  | "body" |
-| close-on-click-overlay | 点击蒙层是否关闭对话框     | Boolean | false  |
-| lock-scroll            | 背景是否锁定               | Boolean | false  |
+| mode              | 选择类型                   | String   | selector      |
    
 ### Events
     
 | 事件名  | 说明             | 回调参数     |
 |---------|------------------|--------------|
-| close   | 关闭弹窗时触发   | event: Event |
 | confirm | 点击确认时候触发 | event: Event |
-| change  | 改变时触发       | val          |
+
     

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

@@ -3,7 +3,7 @@
     :mode="mode"
     :range="range"
     @change="onChange"
-    @columnChange="onColumnChange"
+    @columnchange="onColumnChange"
     :value="value"
   >
     <slot></slot>
@@ -12,9 +12,9 @@
 
 <script lang="ts">
 import { onUpdated, ref, watch } from 'vue';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('picker');
 import { commonProps } from './commonProps';
-import { createComponent } from '../../utils/create';
 export default create({
   props: {
     mode: {

src/sites/mobile-taro/vue/project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "%40nutui%2Fnutui-taro-mobile",
   "description": "nutui-taro-vue",
-  "appid": "wxf2b976b67dab3882",
+  "appid": "wxee296c9bffc451d9",
   "setting": {
     "urlCheck": true,
     "es6": true,

src/sites/mobile-taro/vue/src/feedback/pages/datepicker/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'Picker'
+  navigationBarTitleText: 'DatePicker'
 };

src/sites/mobile-taro/vue/src/feedback/pages/datepicker/index.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
-    <nut-picker mode="selector" :list-data="listData1" @confirm="confirm">
-      <nut-cell title="请选择城市" :desc="desc"></nut-cell>
-    </nut-picker>
-    <h2>多列样式</h2>
-    <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
-      <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
-    </nut-picker>
+    <h2>日期选择器</h2>
+    <nut-datepicker @onChange="onChange">
+      <nut-cell title="请选择日期" :desc="desc"></nut-cell>
+    </nut-datepicker>
   </div>
 </template>
 <script lang="ts">
@@ -15,50 +11,15 @@ import { ref } from 'vue';
 export default {
   props: {},
   setup() {
-    const listData1 = [
-      '南京市',
-      '无锡市',
-      '海北藏族自治区',
-      '北京市',
-      '连云港市',
-      '浙江市',
-      '江苏市'
-    ];
-    const listData2 = ref([
-      {
-        values: ['周一', '周二', '周三', '周四', '周五'],
-        defaultIndex: 2
-      },
-      {
-        values: ['上午', '下午', '晚上'],
-        defaultIndex: 1
-      }
-    ]);
+    const desc = ref();
 
-    const desc = ref(listData1[0]);
-    const desc2 = ref(
-      `${listData2.value[0].values[listData2.value[0].defaultIndex]} ${
-        listData2.value[1].values[listData2.value[1].defaultIndex]
-      }`
-    );
-    const confirm = (value: any, res: any) => {
-      desc.value = res;
-    };
-
-    const confirm2 = (value: any, res: any) => {
-      desc2.value = res.join(' ');
-      listData2.value.forEach((item, idx) => {
-        item.defaultIndex = value[idx];
-      });
+    const onChange = (value: any) => {
+      desc.value = value;
     };
 
     return {
-      listData1,
-      listData2,
       desc,
-      desc2,
-      confirm,
-      confirm2
+      onChange
     };
   }
 };

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Picker'
+};

src/packages/__VUE/picker/demo.taro.vue

@@ -12,15 +12,7 @@
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { createComponent } from './../../utils/create';
-import Picker from './index.taro.vue';
-import Cell from './../cell/index.taro.vue';
-const { createDemo } = createComponent('picker');
-export default createDemo({
-  components: {
-    'nut-picker': Picker,
-    'nut-cell': Cell
-  },
+export default {
   props: {},
   setup() {
     const listData1 = [
@@ -69,5 +61,5 @@ export default createDemo({
       confirm2
     };
   }
-});
+};
 </script>

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Range'
+};

src/sites/mobile-taro/vue/src/pages/range/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell class="cell">
+      <nut-range v-model="value1" @change="onChange"></nut-range>
+    </nut-cell>
+    <h2>双滑块</h2>
+    <nut-cell class="cell">
+      <nut-range range v-model="value2" @change="onChange"></nut-range>
+    </nut-cell>
+    <h2>指定范围</h2>
+    <nut-cell class="cell">
+      <nut-range
+        v-model="value3"
+        :max="10"
+        :min="-10"
+        @change="onChange"
+      ></nut-range>
+    </nut-cell>
+    <h2>设置步长</h2>
+    <nut-cell class="cell">
+      <nut-range v-model="value4" :step="5" @change="onChange"></nut-range>
+    </nut-cell>
+    <h2>隐藏范围</h2>
+    <nut-cell class="cell">
+      <nut-range hidden-range v-model="value5" @change="onChange"></nut-range>
+    </nut-cell>
+    <h2>隐藏标签</h2>
+    <nut-cell class="cell">
+      <nut-range hidden-tag v-model="value6" @change="onChange"></nut-range>
+    </nut-cell>
+    <h2>禁用</h2>
+    <nut-cell class="cell">
+      <nut-range disabled v-model="value7"></nut-range>
+    </nut-cell>
+    <h2>自定义样式</h2>
+    <nut-cell class="cell">
+      <nut-range
+        v-model="value8"
+        @change="onChange"
+        inactive-color="rgba(163,184,255,1)"
+        button-color="rgba(52,96,250,1)"
+        active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+      ></nut-range>
+    </nut-cell>
+    <h2>自定义按钮</h2>
+    <nut-cell class="cell">
+      <nut-range v-model="value9" @change="onChange">
+        <template #button>
+          <div class="custom-button">{{ value10 }}</div>
+        </template>
+      </nut-range>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      value1: 40,
+      value2: [20, 80],
+      value3: 0,
+      value4: 20,
+      value5: 30,
+      value6: 40,
+      value7: 50,
+      value8: 40,
+      value9: 60,
+      value10: 50
+    });
+    const onChange = (value: number) => console.log('当前值：' + value);
+    return {
+      ...toRefs(state),
+      onChange
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.cell {
+  padding: 40px 18px;
+}
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
+</style>