feat: add prop partial-update

Determine whether update date when select year of month.
The default value is false.

__test__/__snapshots__/calendar-panel.test.js.snap

@@ -14,7 +14,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
         class="mx-icon-double-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
     >
@@ -22,7 +22,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
         class="mx-icon-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
     >
@@ -30,7 +30,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
         class="mx-icon-double-right"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
     >
@@ -38,27 +38,27 @@ exports[`CalendarPanel prop: type=date 1`] = `
         class="mx-icon-right"
       />
     </button>
-
+     
     <span
       class="mx-calendar-header-label"
     >
       <button
         class="mx-btn mx-btn-text mx-btn-current-month"
       >
-
+        
           Oct
-
+        
       </button>
       <button
         class="mx-btn mx-btn-text mx-btn-current-year"
       >
-
+        
           2019
-
+        
       </button>
     </span>
   </div>
-
+   
   <div
     class="mx-calendar-content"
   >
@@ -67,12 +67,12 @@ exports[`CalendarPanel prop: type=date 1`] = `
       getcellclasses="function () { [native code] }"
       style="display: none;"
     />
-
+     
     <table-month-stub
       getcellclasses="function () { [native code] }"
       style="display: none;"
     />
-
+     
     <table-date-stub
       calendarmonth="9"
       calendaryear="2019"
@@ -98,7 +98,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
         class="mx-icon-double-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
@@ -107,7 +107,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
         class="mx-icon-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
     >
@@ -115,7 +115,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
         class="mx-icon-double-right"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
@@ -124,20 +124,20 @@ exports[`CalendarPanel prop: type=month 1`] = `
         class="mx-icon-right"
       />
     </button>
-
+     
     <span
       class="mx-calendar-header-label"
     >
       <button
         class="mx-btn mx-btn-text"
       >
-
+        
         2019
-
+      
       </button>
     </span>
   </div>
-
+   
   <div
     class="mx-calendar-content"
   >
@@ -146,11 +146,11 @@ exports[`CalendarPanel prop: type=month 1`] = `
       getcellclasses="function () { [native code] }"
       style="display: none;"
     />
-
+     
     <table-month-stub
       getcellclasses="function () { [native code] }"
     />
-
+     
     <!---->
   </div>
 </div>
@@ -170,7 +170,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
         class="mx-icon-double-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
@@ -179,7 +179,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
         class="mx-icon-left"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
     >
@@ -187,7 +187,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
         class="mx-icon-double-right"
       />
     </button>
-
+     
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
@@ -196,24 +196,24 @@ exports[`CalendarPanel prop: type=year 1`] = `
         class="mx-icon-right"
       />
     </button>
-
+     
     <span
       class="mx-calendar-header-label"
     >
       <span>
         2010
       </span>
-
+       
       <span
         class="mx-calendar-decade-separator"
       />
-
+       
       <span>
         2019
       </span>
     </span>
   </div>
-
+   
   <div
     class="mx-calendar-content"
   >
@@ -221,9 +221,9 @@ exports[`CalendarPanel prop: type=year 1`] = `
       decade="2010"
       getcellclasses="function () { [native code] }"
     />
-
+     
     <!---->
-
+     
     <!---->
   </div>
 </div>

__test__/calendar-panel.test.js

@@ -64,43 +64,6 @@ describe('CalendarPanel', () => {
     expect(td.classes()).toContain('active');
   });
 
-  const renderType = type => {
-    it(`prop: type=${type}`, () => {
-      wrapper = shallowMount(CalendarPanel, {
-        propsData: {
-          type,
-          value: new Date(2019, 9, 1, 10),
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  };
-  ['date', 'month', 'year'].forEach(renderType);
-
-  it('prop: disabledDate', () => {
-    const disabledDate = date => {
-      return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
-    };
-    wrapper = mount(CalendarPanel, {
-      propsData: {
-        value: new Date(2019, 9, 4),
-        disabledDate,
-      },
-    });
-    const tds = wrapper.findAll('.mx-table-date td');
-    for (let i = 0; i < 42; i++) {
-      const td = tds.at(i);
-      const classes = td.classes();
-      if (i < 2 || i > 21) {
-        expect(classes).toContain('disabled');
-      } else {
-        expect(classes).not.toContain('disabled');
-      }
-    }
-    tds.at(1).trigger('click');
-    expect(wrapper.emitted().select).toBeUndefined();
-  });
-
   it('feat: click prev/next month', () => {
     wrapper = shallowMount(CalendarPanel);
 
@@ -167,4 +130,61 @@ describe('CalendarPanel', () => {
     lastBtn.trigger('click');
     expect(vm.calendarDecade).toBe(2000);
   });
+
+  const renderType = type => {
+    it(`prop: type=${type}`, () => {
+      wrapper = shallowMount(CalendarPanel, {
+        propsData: {
+          type,
+          value: new Date(2019, 9, 1, 10),
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  };
+  ['date', 'month', 'year'].forEach(renderType);
+
+  it('prop: disabledDate', () => {
+    const disabledDate = date => {
+      return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
+    };
+    wrapper = mount(CalendarPanel, {
+      propsData: {
+        value: new Date(2019, 9, 4),
+        disabledDate,
+      },
+    });
+    const tds = wrapper.findAll('.mx-table-date td');
+    for (let i = 0; i < 42; i++) {
+      const td = tds.at(i);
+      const classes = td.classes();
+      if (i < 2 || i > 21) {
+        expect(classes).toContain('disabled');
+      } else {
+        expect(classes).not.toContain('disabled');
+      }
+    }
+    tds.at(1).trigger('click');
+    expect(wrapper.emitted().select).toBeUndefined();
+  });
+
+  it('prop: partialUpdate', () => {
+    wrapper = mount(CalendarPanel, {
+      propsData: {
+        value: new Date(2019, 9, 4),
+        partialUpdate: true,
+      },
+    });
+    wrapper
+      .findAll('.mx-table-year td > div')
+      .at(0)
+      .trigger('click');
+    expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 9, 4));
+    wrapper.setProps({ value: new Date(2010, 9, 4) });
+    wrapper
+      .findAll('.mx-table-month td > div')
+      .at(0)
+      .trigger('click');
+    expect(wrapper.emitted().select[1][0]).toEqual(new Date(2010, 0, 4));
+  });
 });

__test__/calendar-range.test.js

@@ -63,4 +63,17 @@ describe('CalendarRange', () => {
     await flushPromises();
     expect(wrapper.vm.calendars).toEqual([new Date(2019, 6, 1), new Date(2019, 7, 1)]);
   });
+
+  it('partialUpdate should be false', () => {
+    wrapper = mount(CalendarRange, {
+      propsData: {
+        partialUpdate: true,
+      },
+    });
+    const panels = wrapper.findAll(CalendarPanel);
+    const startPanel = panels.at(0);
+    const endPanel = panels.at(1);
+    expect(startPanel.vm.partialUpdate).toBe(false);
+    expect(endPanel.vm.partialUpdate).toBe(false);
+  });
 });

__test__/datetime-panel.test.js

@@ -11,6 +11,7 @@ describe('DatetimePanel', () => {
   it('feat: click date', () => {
     wrapper = mount(DatetimePanel, {
       propsData: {
+        type: 'datetime',
         defaultValue: new Date(2019, 9, 1, 12),
       },
     });

__test__/datetime-range.test.js

@@ -13,6 +13,7 @@ describe('DatetimeRange', () => {
     wrapper = mount(DatetimeRange, {
       sync: false,
       propsData: {
+        type: 'datetime',
         value: [new Date(2019, 9, 4, 18), new Date(2019, 9, 6, 12)],
       },
     });