fix: Picker 与 DatePicker Issue 问题修改 (#1502)

* fix: marge主分支 (#1)

* 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>

* feat: imagepreview 部分功能补齐 (#1412)

* feat: image新增单元测试

* feat: ellipsis添加单元测试

* feat: imagepreview 添加

* fix: popop单元测试修改

* docs: 添加版本号

* feat: support highlight for JetBrains web-types

* test(imagepreview): edit snap

* fix(image): dts edit import

* docs(input): demo和md国际化文案修改 (#1414)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* style: add ellipsis add sass

* docs(elevator): 增加吸顶props

* feat: input组件新增input slot插槽 (#1418)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* feat: input组件新增input slot插槽

* release: v3.1.22

* Update README.md

add alipay img

* Update README.md

* docs: changelog 3.1.22

Co-authored-by: lkjh3214 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

* feat: imagepreview重复问题修改

* fix: picker 组件重影问题修改

* fix: 科技样式同步

* feat: picker组件惯性滚动优化

* feat: picker组件惯性滚动优化

* fix: issue问题修噶

* fix: datepicker国际化修噶

* fix: datePicker在year-month下,maxDate不生效问题解决

* fix: picker异步处理

* fix: picker taro

* fix: picker问题修改

Co-authored-by: lkjh3214 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

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

@@ -219,7 +219,7 @@ export default create({
       selectedValue: (string | number)[];
       selectedOptions: import('../picker/types').PickerOption[];
     }) => {
-      if (['date', 'datetime', 'datehour', 'month-day'].includes(props.type)) {
+      if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(props.type)) {
         let formatDate: (number | string)[] = [];
         selectedValue.forEach((item) => {
           formatDate.push(item);
@@ -227,12 +227,16 @@ export default create({
         if (props.type == 'month-day') {
           formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
         }
+        if (props.type == 'year-month' && formatDate.length < 3) {
+          formatDate.push(new Date(props.modelValue || props.minDate || props.maxDate).getDate());
+        }
+
         const year = Number(formatDate[0]);
         const month = Number(formatDate[1]) - 1;
         const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
         let date: Date | null = null;
 
-        if (props.type === 'date' || props.type === 'month-day') {
+        if (props.type === 'date' || props.type === 'month-day' || props.type === 'year-month') {
           date = new Date(year, month, day);
         } else if (props.type === 'datetime') {
           date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));

src/packages/__VUE/datepicker/index.vue

@@ -237,7 +237,7 @@ export default create({
       selectedValue: (string | number)[];
       selectedOptions: PickerOption[];
     }) => {
-      if (['date', 'datetime', 'datehour', 'month-day'].includes(props.type)) {
+      if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(props.type)) {
         let formatDate: (number | string)[] = [];
         selectedValue.forEach((item) => {
           formatDate.push(item);
@@ -246,11 +246,15 @@ export default create({
           formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
         }
 
+        if (props.type == 'year-month' && formatDate.length < 3) {
+          formatDate.push(new Date(props.modelValue || props.minDate || props.maxDate).getDate());
+        }
+
         const year = Number(formatDate[0]);
         const month = Number(formatDate[1]) - 1;
         const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
         let date: Date | null = null;
-        if (props.type === 'date' || props.type === 'month-day') {
+        if (props.type === 'date' || props.type === 'month-day' || props.type === 'year-month') {
           date = new Date(year, month, day);
         } else if (props.type === 'datetime') {
           date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));

src/packages/__VUE/picker/Column.vue

@@ -276,7 +276,19 @@ export default create({
     watch(
       () => props.column,
       (val) => {
-        console.log('props.column变化', props.column);
+        if (props.column && props.column.length > 0) {
+          state.transformY = 0;
+          modifyStatus(false);
+        }
+      },
+      {
+        deep: true
+      }
+    );
+
+    watch(
+      () => props.value,
+      (val) => {
         state.transformY = 0;
         modifyStatus(false);
       },
@@ -285,17 +297,6 @@ export default create({
       }
     );
 
-    // watch(
-    //   () => props.value,
-    //   (val) => {
-    //      console.log('props.value变化')
-    //     modifyStatus(true);
-    //   },
-    //   {
-    //     deep: true
-    //   }
-    // );
-
     onMounted(() => {
       modifyStatus(true);
     });

src/packages/__VUE/picker/ColumnTaro.vue

@@ -275,6 +275,17 @@ export default create({
     );
 
     watch(
+      () => props.value,
+      (val) => {
+        state.transformY = 0;
+        modifyStatus(false);
+      },
+      {
+        deep: true
+      }
+    );
+
+    watch(
       () => props.itemShow,
       (val) => {
         if (val) {

src/packages/__VUE/picker/demo.vue

@@ -37,6 +37,26 @@
     >
     </nut-picker>
 
+    <h2>{{ translate('tileDesc') }}</h2>
+    <nut-cell
+      :title="translate('chooseCity')"
+      :desc="defult"
+      @click="
+        () => {
+          showTile = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model="selectedValue"
+      v-model:visible="showTile"
+      :columns="columns"
+      :title="translate('chooseCity')"
+      :threeDimensional="false"
+      @confirm="(options) => confirm('defult', options)"
+    >
+    </nut-picker>
+
     <h2>{{ translate('multipleColumns') }}</h2>
     <nut-cell
       :title="translate('chooseTime')"
@@ -221,6 +241,7 @@ export default createDemo({
     const showCascader = ref(false);
     const showAsync = ref(false);
     const showEffect = ref(false);
+    const showTile = ref(false);
 
     const desc = reactive({
       index: '',
@@ -305,7 +326,8 @@ export default createDemo({
       alwaysFun,
       translate,
       selectedTime,
-      columsNum
+      columsNum,
+      showTile
     };
   }
 });

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

@@ -113,6 +113,52 @@ The default selection is implemented by setting `modelValue`, which is an array
 
 :::
 
+### Tile
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="Choose City" :desc="desc" @click="() => { show = true;}"></nut-cell>
+  <nut-picker
+    v-model="selectedValue"
+    v-model:visible="show"
+    :columns="columns"
+    title="Choose City"
+    :threeDimensional="false"
+    @confirm="confirm"
+  >
+  </nut-picker>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('');
+      const selectedValue = ref(['ZheJiang']);
+      const columns = ref([
+        { text: 'NanJing', value: 'NanJing' },
+        { text: 'WuXi', value: 'WuXi' },
+        { text: 'ZangZu', value: 'ZangZu' },
+        { text: 'BeiJing', value: 'BeiJing' },
+        { text: 'LianYunGang', value: 'LianYunGang' },
+        { text: 'ZheJiang', value: 'ZheJiang' },
+        { text: 'JiangSu', value: 'JiangSu' }
+      ]);
+    
+      const confirm = ( { selectedValue,selectedOptions })=>{
+        desc.value = selectedValue.join(',');
+      }
+
+      return {show,desc,columns,selectedValue, confirm};
+    }
+  };
+</script>
+```
+
+:::
+
 ### Multiple Columns
 
 :::demo

src/packages/__VUE/picker/doc.en.ts

@@ -3,6 +3,7 @@ export const Internation = {
     basic: '基本用法',
     chooseCity: '请选择城市',
     defaultSelected: '默认选中项',
+    tileDesc: '平铺展示',
     multipleColumns: '多列样式',
     chooseTime: '请选择时间',
     cascade: '多级联动',
@@ -44,6 +45,7 @@ export const Internation = {
     basic: 'Basic Usage',
     chooseCity: 'Choose City',
     defaultSelected: 'Default Index',
+    tileDesc: 'Tile',
     multipleColumns: 'Multiple Columns',
     chooseTime: 'Choose Time',
     cascade: 'Cascade',

src/packages/__VUE/picker/doc.md

@@ -119,6 +119,50 @@ app.use(OverLay);
 ```
 :::
 
+### 平铺展示
+
+:::demo
+```html
+<template>
+  <nut-cell title="请选择城市" :desc="desc" @click="() => { show = true;}"></nut-cell>
+  <nut-picker
+    v-model="selectedValue"
+    v-model:visible="show"
+    :columns="columns"
+    title="城市选择"
+    :threeDimensional="false"
+    @confirm="confirm"
+  >
+  </nut-picker>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('');
+      const selectedValue = ref(['ZheJiang']);
+      const columns = ref([
+        { text: '南京市', value: 'NanJing' },
+        { text: '无锡市', value: 'WuXi' },
+        { text: '海北藏族自治区', value: 'ZangZu' },
+        { text: '北京市', value: 'BeiJing' },
+        { text: '连云港市', value: 'LianYunGang' },
+        { text: '浙江市', value: 'ZheJiang' },
+        { text: '江苏市', value: 'JiangSu' }
+      ]);
+    
+      const confirm = ( { selectedValue,selectedOptions })=>{
+        desc.value = selectedValue.join(',');
+      }
+
+      return {show,desc,columns,selectedValue, confirm};
+    }
+  };
+</script>
+```
+:::
+
 ### 多列展示
 
 columns 属性可以通过二维数组的形式配置多列选择。

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

@@ -178,11 +178,16 @@ export default create({
           defaultValues.value[columnIndex] = option.value ? option.value : '';
           let index = columnIndex;
           let cursor = option;
-          while (cursor && cursor.children) {
+          while (cursor && cursor.children && cursor.children[0]) {
             defaultValues.value[index + 1] = cursor.children[0].value;
             index++;
             cursor = cursor.children[0];
           }
+
+          // 当前改变列 的 下一列 children 值为空
+          if (cursor && cursor.children && cursor.children.length == 0) {
+            defaultValues.value = defaultValues.value.slice(0, index + 1);
+          }
         } else {
           defaultValues.value[columnIndex] = option.hasOwnProperty('value') ? option.value : '';
         }

src/packages/__VUE/picker/index.vue

@@ -186,11 +186,16 @@ export default create({
           defaultValues.value[columnIndex] = option.value ? option.value : '';
           let index = columnIndex;
           let cursor = option;
-          while (cursor && cursor.children) {
+          while (cursor && cursor.children && cursor.children[0]) {
             defaultValues.value[index + 1] = cursor.children[0].value;
             index++;
             cursor = cursor.children[0];
           }
+
+          // 当前改变列 的 下一列 children 值为空
+          if (cursor && cursor.children && cursor.children.length == 0) {
+            defaultValues.value = defaultValues.value.slice(0, index + 1);
+          }
         } else {
           defaultValues.value[columnIndex] = option.hasOwnProperty('value') ? option.value : '';
         }

src/packages/styles/variables-jdb.scss

@@ -234,7 +234,7 @@ $picker-bar-title-font-weight: normal !default;
 $picker-item-height: 36px !default;
 $picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: inherit !default;
-$picker-item-text-font-size: 16px !default;
+$picker-item-text-font-size: 14px !default;
 $picker-item-active-line-border: 1px solid #d8d8d8 !default;
 $picker-columns-item-color: $title-color !default;
 

src/packages/styles/variables-jdt.scss

@@ -152,7 +152,7 @@ $picker-bar-title-font-weight: 600 !default;
 $picker-item-height: 36px !default;
 $picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: $primary-color !default;
-$picker-item-text-font-size: 16px !default;
+$picker-item-text-font-size: 14px !default;
 $picker-item-active-line-border: 1px solid rgba(0, 0, 0, 0.06) !default;
 $picker-columns-item-color: $title-color !default;
 

src/packages/styles/variables.scss

@@ -165,7 +165,7 @@ $picker-bar-title-font-weight: normal !default;
 $picker-item-height: 36px !default;
 $picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: inherit !default;
-$picker-item-text-font-size: 16px !default;
+$picker-item-text-font-size: 14px !default;
 $picker-item-active-line-border: 1px solid #d8d8d8 !default;
 $picker-columns-item-color: $title-color !default;
 

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

@@ -109,6 +109,24 @@
     >
       <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-picker
     >
+
+    <h2>异步获取</h2>
+    <nut-cell
+      title="异步获取"
+      :desc="effect"
+      @click="
+        () => {
+          showPort = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model:visible="showPort"
+      :columns="portColumns"
+      title="异步获取"
+      @confirm="(options) => confirm('effect', options)"
+      @change="portChange"
+    ></nut-picker>
   </div>
 </template>
 <script lang="ts">
@@ -206,6 +224,19 @@ export default {
       { text: '2022-11', value: 'November' },
       { text: '2022-12', value: 'December' }
     ]);
+
+    const portColumns = ref([
+      {
+        text: '浙江',
+        value: 'ZheJiang',
+        children: []
+      },
+      {
+        text: '福建',
+        value: 'FuJian',
+        children: []
+      }
+    ]);
     const asyncColumns = ref<PickerOption[]>([]);
 
     const show = ref(false);
@@ -214,6 +245,7 @@ export default {
     const showCascader = ref(false);
     const showAsync = ref(false);
     const showEffect = ref(false);
+    const showPort = ref(false);
 
     const desc = reactive({
       index: '',
@@ -273,6 +305,35 @@ export default {
       console.log(selectedValue);
     };
 
+    const portChange = (chooseDate: any) => {
+      const { columnIndex, selectedOptions, selectedValue } = chooseDate;
+      console.log(chooseDate);
+      if (columnIndex == 0) {
+        //  if(portColumns.value[0].children.length == 0){
+
+        //  }
+        console.log('选择后更新');
+        portColumns.value[0].children = ([] as any).concat([
+          {
+            text: '杭州',
+            value: 'HangZhou',
+            children: [
+              { text: '西湖区', value: 'XiHu' },
+              { text: '余杭区', value: 'YuHang' }
+            ]
+          },
+          {
+            text: '温州',
+            value: 'WenZhou',
+            children: [
+              { text: '鹿城区', value: 'LuCheng' },
+              { text: '瓯海区', value: 'OuHai' }
+            ]
+          }
+        ]);
+      }
+    };
+
     const alwaysFun = () => {
       showEffect.value = false;
       desc.effect = '永远有效';
@@ -296,7 +357,10 @@ export default {
       effectColumns,
       showEffect,
       alwaysFun,
-      columsNum
+      columsNum,
+      showPort,
+      portColumns,
+      portChange
     };
   }
 };