Merge branch 'dev' into next

src/action-sheet/README.md

@@ -156,6 +156,7 @@ export default {
 | title | Title | _string_ | - |
 | cancel-text | Text of cancel button | _string_ | - |
 | description | Description above the options | _string_ | - |
+| closeable `v2.10.5` | Whether to show close icon | _boolean_ | `true` |
 | close-icon | Close icon name | _string_ | `cross` |
 | duration | Transition duration, unit second | _number \| string_ | `0.3` |
 | round | Whether to show round corner | _boolean_ | `true` |

src/action-sheet/README.zh-CN.md

@@ -162,6 +162,7 @@ export default {
 | title | 顶部标题 | _string_ | - |
 | cancel-text | 取消按钮文字 | _string_ | - |
 | description | 选项上方的描述信息 | _string_ | - |
+| closeable `v2.10.5` | 是否显示关闭图标 | _boolean_ | `true` |
 | close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
 | round | 是否显示圆角 | _boolean_ | `true` |

src/action-sheet/index.js

@@ -21,6 +21,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    closeable: {
+      type: Boolean,
+      default: true,
+    },
     closeIcon: {
       type: String,
       default: 'cross',
@@ -50,11 +54,13 @@ export default createComponent({
         return (
           <div class={bem('header')}>
             {props.title}
-            <Icon
+            {props.closeable && (
-              name={props.closeIcon}
+              <Icon
-              class={bem('close')}
+                name={props.closeIcon}
-              onClick={onCancel}
+                class={bem('close')}
-            />
+                onClick={onCancel}
+              />
+            )}
           </div>
         );
       }

src/action-sheet/test/index.spec.js

@@ -198,3 +198,15 @@ test('close-icon prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('closeable prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      title: 'Title',
+      closeable: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/calendar/README.md

@@ -233,7 +233,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
 | min-date | Min date | _Date_ | Today |
 | max-date | Max date | _Date_ | Six months after the today |
-| default-date | Default selected date | _Date \| Date[]_ | Today |
+| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
 | row-height | Row height | _number \| string_ | `64` |
 | formatter | Day formatter | _(day: Day) => Day_ | - |
 | poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
@@ -242,6 +242,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
 | show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
 | show-confirm | Whether to show confirm button | _boolean_ | `true` |
+| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` |
 | confirm-text | Confirm button text | _string_ | `Confirm` |
 | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
 | first-day-of-week `v2.9.2` | Set the start day of week | _0-6_ | `0` |

src/calendar/README.zh-CN.md

@@ -235,7 +235,7 @@ export default {
 | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
 | min-date | 可选择的最小日期 | _Date_ | 当前日期 |
 | max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
-| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 |
+| default-date | 默认选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 |
 | row-height | 日期行高 | _number \| string_ | `64` |
 | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
 | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
@@ -244,6 +244,7 @@ export default {
 | show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
 | show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |
 | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
+| readonly `v2.10.5` | 是否为只读状态，只读状态下不能选择日期 | _boolean_ | `false` |
 | confirm-text | 确认按钮的文字 | _string_ | `确定` |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
 | first-day-of-week `v2.9.2` | 设置周起始日 | _0-6_ | `0` |

src/calendar/components/Month.js

@@ -160,6 +160,10 @@ export default createComponent({
         return 'disabled';
       }
 
+      if (currentDate === null) {
+        return;
+      }
+
       if (Array.isArray(currentDate)) {
         if (type === 'multiple') {
           return getMultipleDayType(day);

src/calendar/index.js

@@ -28,6 +28,7 @@ export default createComponent({
     show: Boolean,
     title: String,
     color: String,
+    readonly: Boolean,
     teleport: [String, Object],
     formatter: Function,
     confirmText: String,
@@ -139,12 +140,13 @@ export default createComponent({
     buttonDisabled() {
       const { type, currentDate } = this;
 
-      if (type === 'range') {
+      if (currentDate) {
-        return !currentDate[0] || !currentDate[1];
+        if (type === 'range') {
-      }
+          return !currentDate[0] || !currentDate[1];
-
+        }
-      if (type === 'multiple') {
+        if (type === 'multiple') {
-        return !currentDate.length;
+          return !currentDate.length;
+        }
       }
 
       return !currentDate;
@@ -201,6 +203,11 @@ export default createComponent({
     scrollIntoView() {
       this.$nextTick(() => {
         const { currentDate } = this;
+
+        if (!currentDate) {
+          return;
+        }
+
         const targetDate =
           this.type === 'single' ? currentDate : currentDate[0];
         const displayed = this.show || !this.poppable;
@@ -225,6 +232,10 @@ export default createComponent({
     getInitialDate() {
       const { type, minDate, maxDate, defaultDate } = this;
 
+      if (defaultDate === null) {
+        return defaultDate;
+      }
+
       let defaultVal = new Date();
 
       if (compareDay(defaultVal, minDate) === -1) {
@@ -301,6 +312,11 @@ export default createComponent({
       const { type, currentDate } = this;
 
       if (type === 'range') {
+        if (!currentDate) {
+          this.select([date, null]);
+          return;
+        }
+
         const [startDay, endDay] = currentDate;
 
         if (startDay && !endDay) {
@@ -317,8 +333,12 @@ export default createComponent({
           this.select([date, null]);
         }
       } else if (type === 'multiple') {
-        let selectedIndex;
+        if (!currentDate) {
+          this.select([date]);
+          return;
+        }
 
+        let selectedIndex;
         const selected = this.currentDate.some((dateItem, index) => {
           const equal = compareDay(dateItem, date) === 0;
           if (equal) {
@@ -345,6 +365,10 @@ export default createComponent({
     },
 
     select(date, complete) {
+      if (this.readonly) {
+        return;
+      }
+
       const emit = (date) => {
         this.currentDate = date;
         this.$emit('select', copyDates(this.currentDate));

src/calendar/test/prop.spec.js

@@ -213,3 +213,25 @@ test('first day of week', async () => {
   expect(day.text()).toEqual('1');
   expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`);
 });
+
+test('readonly prop', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      type: 'multiple',
+      minDate,
+      maxDate,
+      readonly: true,
+      poppable: false,
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days.at(13).trigger('click');
+  expect(wrapper.emitted('select')).toBeFalsy();
+
+  wrapper.setProps({ readonly: false });
+  days.at(13).trigger('click');
+  expect(wrapper.emitted('select')).toBeTruthy();
+});

src/field/index.js

@@ -302,8 +302,8 @@ export default createComponent({
       }
 
       if (this.type === 'number' || this.type === 'digit') {
-        const allowDot = this.type === 'number';
+        const isNumber = this.type === 'number';
-        value = formatNumber(value, allowDot);
+        value = formatNumber(value, isNumber, isNumber);
       }
 
       if (this.formatter && trigger === this.formatTrigger) {

src/utils/format/number.ts

@@ -16,14 +16,22 @@ function trimExtraChar(value: string, char: string, regExp: RegExp) {
   return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
 }
 
-export function formatNumber(value: string, allowDot?: boolean) {
+export function formatNumber(
+  value: string,
+  allowDot = true,
+  allowMinus = true
+) {
   if (allowDot) {
     value = trimExtraChar(value, '.', /\./g);
   } else {
     value = value.split('.')[0];
   }
 
-  value = trimExtraChar(value, '-', /-/g);
+  if (allowMinus) {
+    value = trimExtraChar(value, '-', /-/g);
+  } else {
+    value = value.replace(/-/, '');
+  }
 
   const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
 

src/utils/test/index.spec.js

@@ -99,19 +99,20 @@ test('isNumeric', () => {
 });
 
 test('formatNumber', () => {
-  expect(formatNumber('abc')).toEqual('');
-  expect(formatNumber('1.2')).toEqual('1');
-  expect(formatNumber('abc1.2')).toEqual('1');
-  expect(formatNumber('123.4.')).toEqual('123');
-
   // with dot
-  expect(formatNumber('abc', true)).toEqual('');
+  expect(formatNumber('abc')).toEqual('');
-  expect(formatNumber('1.2', true)).toEqual('1.2');
+  expect(formatNumber('1.2')).toEqual('1.2');
-  expect(formatNumber('abc1.2', true)).toEqual('1.2');
+  expect(formatNumber('abc1.2')).toEqual('1.2');
-  expect(formatNumber('123.4.', true)).toEqual('123.4');
+  expect(formatNumber('123.4.')).toEqual('123.4');
+
+  // without dot
+  expect(formatNumber('1.2', false)).toEqual('1');
+  expect(formatNumber('abc1.2', false)).toEqual('1');
+  expect(formatNumber('123.4.', false)).toEqual('123');
 
   // minus
-  expect(formatNumber('-1.2')).toEqual('-1');
+  expect(formatNumber('-1.2', false)).toEqual('-1');
+  expect(formatNumber('-1.2', false, false)).toEqual('1');
   expect(formatNumber('-1.2', true)).toEqual('-1.2');
   expect(formatNumber('-1.2-', true)).toEqual('-1.2');
   expect(formatNumber('123-')).toEqual('123');