mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-24 21:10:35 +03:00
refactor: remove date-fns && optimize code
This commit is contained in:
mengxiong10
@@ -1,245 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`CalendarPanel prop: type=date 1`] = `
|
|
||||||
<div
|
|
||||||
class="mx-calendar mx-calendar-panel-date"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="mx-calendar-header"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-left"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-right"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-right"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-right"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="mx-calendar-header-label"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-current-month"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
|
|
||||||
Oct
|
|
||||||
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-current-year"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
|
|
||||||
2019
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mx-calendar-content"
|
|
||||||
>
|
|
||||||
<table-year-stub
|
|
||||||
decade="2010"
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
style="display: none;"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<table-month-stub
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
style="display: none;"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<table-date-stub
|
|
||||||
calendarmonth="9"
|
|
||||||
calendaryear="2019"
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
getrowclasses="function () { [native code] }"
|
|
||||||
titleformat="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`CalendarPanel prop: type=month 1`] = `
|
|
||||||
<div
|
|
||||||
class="mx-calendar mx-calendar-panel-month"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="mx-calendar-header"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-left"
|
|
||||||
style="display: none;"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-right"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-right"
|
|
||||||
style="display: none;"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-right"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="mx-calendar-header-label"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
|
|
||||||
2019
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mx-calendar-content"
|
|
||||||
>
|
|
||||||
<table-year-stub
|
|
||||||
decade="2010"
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
style="display: none;"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<table-month-stub
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`CalendarPanel prop: type=year 1`] = `
|
|
||||||
<div
|
|
||||||
class="mx-calendar mx-calendar-panel-year"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="mx-calendar-header"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-left"
|
|
||||||
style="display: none;"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="mx-icon-double-right"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="mx-btn mx-btn-text mx-btn-icon-right"
|
|
||||||
style="display: none;"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<table-year-stub
|
|
||||||
decade="2010"
|
|
||||||
getcellclasses="function () { [native code] }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!---->
|
|
||||||
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@@ -14,33 +14,23 @@ exports[`DatePicker prop: attrs of input 1`] = `
|
|||||||
placeholder="test placeholder"
|
placeholder="test placeholder"
|
||||||
type="number"
|
type="number"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!---->
|
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="mx-icon-calendar"
|
class="mx-icon-calendar"
|
||||||
>
|
>
|
||||||
<icon-calendar-stub />
|
<anonymous-stub />
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<popup-stub
|
<popup-stub
|
||||||
appendtobody="true"
|
appendtobody="true"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-content"
|
class="mx-datepicker-content"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-body"
|
class="mx-datepicker-body"
|
||||||
>
|
>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</popup-stub>
|
</popup-stub>
|
||||||
</div>
|
</div>
|
||||||
@@ -60,33 +50,23 @@ exports[`DatePicker prop: clearable 1`] = `
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!---->
|
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="mx-icon-calendar"
|
class="mx-icon-calendar"
|
||||||
>
|
>
|
||||||
<icon-calendar-stub />
|
<anonymous-stub />
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<popup-stub
|
<popup-stub
|
||||||
appendtobody="true"
|
appendtobody="true"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-content"
|
class="mx-datepicker-content"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-body"
|
class="mx-datepicker-body"
|
||||||
>
|
>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</popup-stub>
|
</popup-stub>
|
||||||
</div>
|
</div>
|
||||||
@@ -107,37 +87,28 @@ exports[`DatePicker prop: editable 1`] = `
|
|||||||
readonly="readonly"
|
readonly="readonly"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="mx-icon-clear"
|
class="mx-icon-clear"
|
||||||
>
|
>
|
||||||
<icon-close-stub />
|
<anonymous-stub />
|
||||||
</i>
|
</i>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="mx-icon-calendar"
|
class="mx-icon-calendar"
|
||||||
>
|
>
|
||||||
<icon-calendar-stub />
|
<anonymous-stub />
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<popup-stub
|
<popup-stub
|
||||||
appendtobody="true"
|
appendtobody="true"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-content"
|
class="mx-datepicker-content"
|
||||||
>
|
>
|
||||||
<!---->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-datepicker-body"
|
class="mx-datepicker-body"
|
||||||
>
|
>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</popup-stub>
|
</popup-stub>
|
||||||
</div>
|
</div>
|
||||||
@@ -191,7 +162,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="-1"
|
data-date="1569686400000"
|
||||||
title="2019-09-29"
|
title="2019-09-29"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -200,7 +171,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="0"
|
data-date="1569772800000"
|
||||||
title="2019-09-30"
|
title="2019-09-30"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -209,7 +180,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="1"
|
data-date="1569859200000"
|
||||||
title="2019-10-01"
|
title="2019-10-01"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -218,7 +189,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="2"
|
data-date="1569945600000"
|
||||||
title="2019-10-02"
|
title="2019-10-02"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -227,7 +198,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="3"
|
data-date="1570032000000"
|
||||||
title="2019-10-03"
|
title="2019-10-03"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -236,7 +207,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="4"
|
data-date="1570118400000"
|
||||||
title="2019-10-04"
|
title="2019-10-04"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -245,7 +216,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="5"
|
data-date="1570204800000"
|
||||||
title="2019-10-05"
|
title="2019-10-05"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -266,7 +237,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="6"
|
data-date="1570291200000"
|
||||||
title="2019-10-06"
|
title="2019-10-06"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -275,7 +246,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="7"
|
data-date="1570377600000"
|
||||||
title="2019-10-07"
|
title="2019-10-07"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -284,7 +255,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="8"
|
data-date="1570464000000"
|
||||||
title="2019-10-08"
|
title="2019-10-08"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -293,7 +264,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="9"
|
data-date="1570550400000"
|
||||||
title="2019-10-09"
|
title="2019-10-09"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -302,7 +273,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="10"
|
data-date="1570636800000"
|
||||||
title="2019-10-10"
|
title="2019-10-10"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -311,7 +282,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="11"
|
data-date="1570723200000"
|
||||||
title="2019-10-11"
|
title="2019-10-11"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -320,7 +291,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="12"
|
data-date="1570809600000"
|
||||||
title="2019-10-12"
|
title="2019-10-12"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -341,7 +312,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell active"
|
class="cell active"
|
||||||
data-day="13"
|
data-date="1570896000000"
|
||||||
title="2019-10-13"
|
title="2019-10-13"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -350,7 +321,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="14"
|
data-date="1570982400000"
|
||||||
title="2019-10-14"
|
title="2019-10-14"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -359,7 +330,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="15"
|
data-date="1571068800000"
|
||||||
title="2019-10-15"
|
title="2019-10-15"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -368,7 +339,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="16"
|
data-date="1571155200000"
|
||||||
title="2019-10-16"
|
title="2019-10-16"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -377,7 +348,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="17"
|
data-date="1571241600000"
|
||||||
title="2019-10-17"
|
title="2019-10-17"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -386,7 +357,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="18"
|
data-date="1571328000000"
|
||||||
title="2019-10-18"
|
title="2019-10-18"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -395,7 +366,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="19"
|
data-date="1571414400000"
|
||||||
title="2019-10-19"
|
title="2019-10-19"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -416,7 +387,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="20"
|
data-date="1571500800000"
|
||||||
title="2019-10-20"
|
title="2019-10-20"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -425,7 +396,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="21"
|
data-date="1571587200000"
|
||||||
title="2019-10-21"
|
title="2019-10-21"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -434,7 +405,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="22"
|
data-date="1571673600000"
|
||||||
title="2019-10-22"
|
title="2019-10-22"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -443,7 +414,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="23"
|
data-date="1571760000000"
|
||||||
title="2019-10-23"
|
title="2019-10-23"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -452,7 +423,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="24"
|
data-date="1571846400000"
|
||||||
title="2019-10-24"
|
title="2019-10-24"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -461,7 +432,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="25"
|
data-date="1571932800000"
|
||||||
title="2019-10-25"
|
title="2019-10-25"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -470,7 +441,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="26"
|
data-date="1572019200000"
|
||||||
title="2019-10-26"
|
title="2019-10-26"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -491,7 +462,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="27"
|
data-date="1572105600000"
|
||||||
title="2019-10-27"
|
title="2019-10-27"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -500,7 +471,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="28"
|
data-date="1572192000000"
|
||||||
title="2019-10-28"
|
title="2019-10-28"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -509,7 +480,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="29"
|
data-date="1572278400000"
|
||||||
title="2019-10-29"
|
title="2019-10-29"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -518,7 +489,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="30"
|
data-date="1572364800000"
|
||||||
title="2019-10-30"
|
title="2019-10-30"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -527,7 +498,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="31"
|
data-date="1572451200000"
|
||||||
title="2019-10-31"
|
title="2019-10-31"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -536,7 +507,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="32"
|
data-date="1572537600000"
|
||||||
title="2019-11-01"
|
title="2019-11-01"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -545,7 +516,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="33"
|
data-date="1572624000000"
|
||||||
title="2019-11-02"
|
title="2019-11-02"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -566,7 +537,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="34"
|
data-date="1572710400000"
|
||||||
title="2019-11-03"
|
title="2019-11-03"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -575,7 +546,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="35"
|
data-date="1572796800000"
|
||||||
title="2019-11-04"
|
title="2019-11-04"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -584,7 +555,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="36"
|
data-date="1572883200000"
|
||||||
title="2019-11-05"
|
title="2019-11-05"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -593,7 +564,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="37"
|
data-date="1572969600000"
|
||||||
title="2019-11-06"
|
title="2019-11-06"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -602,7 +573,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="38"
|
data-date="1573056000000"
|
||||||
title="2019-11-07"
|
title="2019-11-07"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -611,7 +582,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="39"
|
data-date="1573142400000"
|
||||||
title="2019-11-08"
|
title="2019-11-08"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -620,7 +591,7 @@ exports[`DatePicker prop: formatter 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell not-current-month"
|
class="cell not-current-month"
|
||||||
data-day="40"
|
data-date="1573228800000"
|
||||||
title="2019-11-09"
|
title="2019-11-09"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,9 +1,75 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`TableDate corrent render 1`] = `
|
exports[`TableDate corrent render 1`] = `
|
||||||
|
<div
|
||||||
|
class="mx-calendar mx-calendar-panel-date"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx-calendar-header"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-left"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-left"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-left"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-right"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-right"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-right"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="mx-calendar-header-label"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-current-month"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Oct
|
||||||
|
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-current-year"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
2019
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-calendar-content"
|
||||||
|
>
|
||||||
<table
|
<table
|
||||||
class="mx-table mx-table-date"
|
class="mx-table mx-table-date"
|
||||||
firstdayofweek="1"
|
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -41,7 +107,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="-1"
|
data-date="1569686400000"
|
||||||
title="29/09/2019"
|
title="29/09/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -50,7 +116,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="0"
|
data-date="1569772800000"
|
||||||
title="30/09/2019"
|
title="30/09/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -59,7 +125,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="1"
|
data-date="1569859200000"
|
||||||
title="01/10/2019"
|
title="01/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -68,7 +134,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="2"
|
data-date="1569945600000"
|
||||||
title="02/10/2019"
|
title="02/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -77,7 +143,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="3"
|
data-date="1570032000000"
|
||||||
title="03/10/2019"
|
title="03/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -86,7 +152,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="4"
|
data-date="1570118400000"
|
||||||
title="04/10/2019"
|
title="04/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -95,7 +161,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="5"
|
data-date="1570204800000"
|
||||||
title="05/10/2019"
|
title="05/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -110,7 +176,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="6"
|
data-date="1570291200000"
|
||||||
title="06/10/2019"
|
title="06/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -119,7 +185,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="7"
|
data-date="1570377600000"
|
||||||
title="07/10/2019"
|
title="07/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -128,7 +194,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="8"
|
data-date="1570464000000"
|
||||||
title="08/10/2019"
|
title="08/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -137,7 +203,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="9"
|
data-date="1570550400000"
|
||||||
title="09/10/2019"
|
title="09/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -146,7 +212,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="10"
|
data-date="1570636800000"
|
||||||
title="10/10/2019"
|
title="10/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -155,7 +221,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="11"
|
data-date="1570723200000"
|
||||||
title="11/10/2019"
|
title="11/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -164,7 +230,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="12"
|
data-date="1570809600000"
|
||||||
title="12/10/2019"
|
title="12/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -179,7 +245,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="13"
|
data-date="1570896000000"
|
||||||
title="13/10/2019"
|
title="13/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -188,7 +254,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="14"
|
data-date="1570982400000"
|
||||||
title="14/10/2019"
|
title="14/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -197,7 +263,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="15"
|
data-date="1571068800000"
|
||||||
title="15/10/2019"
|
title="15/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -206,7 +272,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="16"
|
data-date="1571155200000"
|
||||||
title="16/10/2019"
|
title="16/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -215,7 +281,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="17"
|
data-date="1571241600000"
|
||||||
title="17/10/2019"
|
title="17/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -224,7 +290,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="18"
|
data-date="1571328000000"
|
||||||
title="18/10/2019"
|
title="18/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -233,7 +299,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="19"
|
data-date="1571414400000"
|
||||||
title="19/10/2019"
|
title="19/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -248,7 +314,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="20"
|
data-date="1571500800000"
|
||||||
title="20/10/2019"
|
title="20/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -257,7 +323,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="21"
|
data-date="1571587200000"
|
||||||
title="21/10/2019"
|
title="21/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -266,7 +332,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="22"
|
data-date="1571673600000"
|
||||||
title="22/10/2019"
|
title="22/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -275,7 +341,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="23"
|
data-date="1571760000000"
|
||||||
title="23/10/2019"
|
title="23/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -284,7 +350,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="24"
|
data-date="1571846400000"
|
||||||
title="24/10/2019"
|
title="24/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -293,7 +359,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="25"
|
data-date="1571932800000"
|
||||||
title="25/10/2019"
|
title="25/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -302,7 +368,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="26"
|
data-date="1572019200000"
|
||||||
title="26/10/2019"
|
title="26/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -317,7 +383,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="27"
|
data-date="1572105600000"
|
||||||
title="27/10/2019"
|
title="27/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -326,7 +392,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="28"
|
data-date="1572192000000"
|
||||||
title="28/10/2019"
|
title="28/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -335,7 +401,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="29"
|
data-date="1572278400000"
|
||||||
title="29/10/2019"
|
title="29/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -344,7 +410,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="30"
|
data-date="1572364800000"
|
||||||
title="30/10/2019"
|
title="30/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -353,7 +419,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="31"
|
data-date="1572451200000"
|
||||||
title="31/10/2019"
|
title="31/10/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -362,7 +428,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="32"
|
data-date="1572537600000"
|
||||||
title="01/11/2019"
|
title="01/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -371,7 +437,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="33"
|
data-date="1572624000000"
|
||||||
title="02/11/2019"
|
title="02/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -386,7 +452,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
|
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="34"
|
data-date="1572710400000"
|
||||||
title="03/11/2019"
|
title="03/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -395,7 +461,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="35"
|
data-date="1572796800000"
|
||||||
title="04/11/2019"
|
title="04/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -404,7 +470,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="36"
|
data-date="1572883200000"
|
||||||
title="05/11/2019"
|
title="05/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -413,7 +479,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="37"
|
data-date="1572969600000"
|
||||||
title="06/11/2019"
|
title="06/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -422,7 +488,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="38"
|
data-date="1573056000000"
|
||||||
title="07/11/2019"
|
title="07/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -431,7 +497,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="39"
|
data-date="1573142400000"
|
||||||
title="08/11/2019"
|
title="08/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -440,7 +506,7 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell"
|
||||||
data-day="40"
|
data-date="1573228800000"
|
||||||
title="09/11/2019"
|
title="09/11/2019"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -450,4 +516,6 @@ exports[`TableDate corrent render 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,15 +1,49 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`TableMonth correct render 1`] = `
|
exports[`TableMonth correct render 1`] = `
|
||||||
|
<div
|
||||||
|
class="mx-calendar mx-calendar-panel-month"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx-calendar-header"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-left"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-right"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="mx-calendar-header-label"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
2019
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-calendar-content"
|
||||||
|
>
|
||||||
<table
|
<table
|
||||||
class="mx-table mx-table-month"
|
class="mx-table mx-table-month"
|
||||||
getclasses="month => {
|
|
||||||
if (month === 9) {
|
|
||||||
return 'active';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
@@ -91,7 +125,7 @@ exports[`TableMonth correct render 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
class="cell"
|
class="cell active"
|
||||||
data-month="9"
|
data-month="9"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -116,4 +150,6 @@ exports[`TableMonth correct render 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,6 +1,50 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`TableYear decade=2010 1`] = `
|
exports[`TableYear decade=2010 1`] = `
|
||||||
|
<div
|
||||||
|
class="mx-calendar mx-calendar-panel-year"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx-calendar-header"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-left"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-left"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mx-btn mx-btn-text mx-btn-icon-double-right"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="mx-icon-double-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"
|
||||||
|
>
|
||||||
<table
|
<table
|
||||||
class="mx-table mx-table-year"
|
class="mx-table mx-table-year"
|
||||||
>
|
>
|
||||||
@@ -95,4 +139,6 @@ exports[`TableYear decade=2010 1`] = `
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable no-await-in-loop */
|
||||||
import { mount, shallowMount } from '@vue/test-utils';
|
import { mount, shallowMount } from '@vue/test-utils';
|
||||||
import CalendarPanel from '../src/calendar/calendar-panel';
|
import CalendarPanel from '../src/calendar/calendar-panel';
|
||||||
|
|
||||||
@@ -14,8 +15,8 @@ describe('CalendarPanel', () => {
|
|||||||
value: new Date(2019, 9, 4),
|
value: new Date(2019, 9, 4),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const tds = wrapper.findAll('.mx-table-date td');
|
const td = wrapper.find('.mx-table-date td');
|
||||||
tds.at(0).trigger('click');
|
td.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 8, 29));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 8, 29));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -26,8 +27,8 @@ describe('CalendarPanel', () => {
|
|||||||
defaultValue: new Date(2019, 9, 1),
|
defaultValue: new Date(2019, 9, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const tds = wrapper.findAll('.mx-table-month td > div');
|
const td = wrapper.find('.mx-table-month td > div');
|
||||||
tds.at(0).trigger('click');
|
td.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 0, 1));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 0, 1));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -38,8 +39,8 @@ describe('CalendarPanel', () => {
|
|||||||
defaultValue: new Date(2019, 9, 1),
|
defaultValue: new Date(2019, 9, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const tds = wrapper.findAll('.mx-table-year td > div');
|
const td = wrapper.find('.mx-table-year td > div');
|
||||||
tds.at(0).trigger('click');
|
td.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 0));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 0));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -50,22 +51,37 @@ describe('CalendarPanel', () => {
|
|||||||
defaultValue: new Date().setFullYear(11),
|
defaultValue: new Date().setFullYear(11),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const tds = wrapper.findAll('.mx-table-year td > div');
|
const td = wrapper.find('.mx-table-year td > div');
|
||||||
tds.at(0).trigger('click');
|
td.trigger('click');
|
||||||
const expectedDate = new Date(10, 0).setFullYear(10);
|
const expectedDate = new Date(10, 0).setFullYear(10);
|
||||||
expect(wrapper.emitted().select[0][0].getTime()).toBe(expectedDate);
|
expect(wrapper.emitted().select[0][0].getTime()).toBe(expectedDate);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: active class', () => {
|
it('feat: active class', async () => {
|
||||||
wrapper = mount(CalendarPanel);
|
wrapper = mount(CalendarPanel);
|
||||||
const td = wrapper.find('.mx-table-date td:nth-child(6)');
|
const td = wrapper.find('.mx-table-date td:nth-child(6)');
|
||||||
expect(td.classes()).not.toContain('active');
|
expect(td.classes()).not.toContain('active');
|
||||||
wrapper.setProps({ value: new Date(2019, 9, 4) });
|
await wrapper.setProps({ value: new Date(2019, 9, 4) });
|
||||||
expect(td.classes()).toContain('active');
|
expect(td.classes()).toContain('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: click prev/next month', () => {
|
it('feat: panel change', async () => {
|
||||||
wrapper = shallowMount(CalendarPanel);
|
wrapper = mount(CalendarPanel);
|
||||||
|
const { vm } = wrapper;
|
||||||
|
await wrapper.find('.mx-btn-current-year').trigger('click');
|
||||||
|
expect(vm.panel).toBe('year');
|
||||||
|
await wrapper.find('.mx-table-year td > div').trigger('click');
|
||||||
|
expect(vm.panel).toBe('month');
|
||||||
|
await wrapper.find('.mx-table-month td > div').trigger('click');
|
||||||
|
expect(vm.panel).toBe('date');
|
||||||
|
await wrapper.find('.mx-btn-current-month').trigger('click');
|
||||||
|
expect(vm.panel).toBe('month');
|
||||||
|
await wrapper.find('.mx-calendar-header-label > button').trigger('click');
|
||||||
|
expect(vm.panel).toBe('year');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('feat: click prev/next month', async () => {
|
||||||
|
wrapper = mount(CalendarPanel);
|
||||||
|
|
||||||
const nextBtn = wrapper.find('.mx-btn-icon-right');
|
const nextBtn = wrapper.find('.mx-btn-icon-right');
|
||||||
const lastBtn = wrapper.find('.mx-btn-icon-left');
|
const lastBtn = wrapper.find('.mx-btn-icon-left');
|
||||||
@@ -74,7 +90,7 @@ describe('CalendarPanel', () => {
|
|||||||
while (count--) {
|
while (count--) {
|
||||||
const oldYear = vm.calendarYear;
|
const oldYear = vm.calendarYear;
|
||||||
const oldMonth = vm.calendarMonth;
|
const oldMonth = vm.calendarMonth;
|
||||||
nextBtn.trigger('click');
|
await nextBtn.trigger('click');
|
||||||
const newYear = vm.calendarYear;
|
const newYear = vm.calendarYear;
|
||||||
const newMonth = vm.calendarMonth;
|
const newMonth = vm.calendarMonth;
|
||||||
if (oldMonth === 11) {
|
if (oldMonth === 11) {
|
||||||
@@ -89,7 +105,7 @@ describe('CalendarPanel', () => {
|
|||||||
while (count--) {
|
while (count--) {
|
||||||
const oldYear = vm.calendarYear;
|
const oldYear = vm.calendarYear;
|
||||||
const oldMonth = vm.calendarMonth;
|
const oldMonth = vm.calendarMonth;
|
||||||
lastBtn.trigger('click');
|
await lastBtn.trigger('click');
|
||||||
const newYear = vm.calendarYear;
|
const newYear = vm.calendarYear;
|
||||||
const newMonth = vm.calendarMonth;
|
const newMonth = vm.calendarMonth;
|
||||||
if (oldMonth === 0) {
|
if (oldMonth === 0) {
|
||||||
@@ -102,33 +118,42 @@ describe('CalendarPanel', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: click prev/next year', () => {
|
['date', 'month'].forEach(type => {
|
||||||
wrapper = shallowMount(CalendarPanel, {
|
it(`feat: click prev/next year in ${type} panel`, async () => {
|
||||||
|
wrapper = mount(CalendarPanel, {
|
||||||
propsData: {
|
propsData: {
|
||||||
value: new Date(2018, 4, 5),
|
value: new Date(2018, 4, 5),
|
||||||
|
defaultPanel: type,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const nextBtn = wrapper.find('.mx-btn-icon-double-right');
|
const nextBtn = wrapper.find('.mx-btn-icon-double-right');
|
||||||
const lastBtn = wrapper.find('.mx-btn-icon-double-left');
|
const lastBtn = wrapper.find('.mx-btn-icon-double-left');
|
||||||
const yearBtn = wrapper.find('.mx-btn-current-year');
|
|
||||||
const { vm } = wrapper;
|
const { vm } = wrapper;
|
||||||
const oldYear = vm.calendarYear;
|
const oldYear = vm.calendarYear;
|
||||||
expect(oldYear).toBe(2018);
|
expect(oldYear).toBe(2018);
|
||||||
nextBtn.trigger('click');
|
await nextBtn.trigger('click');
|
||||||
let newYear = vm.calendarYear;
|
let newYear = vm.calendarYear;
|
||||||
expect(newYear).toBe(2019);
|
expect(newYear).toBe(2019);
|
||||||
lastBtn.trigger('click');
|
await lastBtn.trigger('click');
|
||||||
newYear = vm.calendarYear;
|
newYear = vm.calendarYear;
|
||||||
expect(newYear).toBe(oldYear);
|
expect(newYear).toBe(oldYear);
|
||||||
// 年视图测试
|
});
|
||||||
yearBtn.trigger('click');
|
});
|
||||||
expect(vm.panel).toBe('year');
|
|
||||||
expect(vm.calendarDecade).toBe(2010);
|
it('feat: click prev/next decade', () => {
|
||||||
|
wrapper = mount(CalendarPanel, {
|
||||||
|
propsData: {
|
||||||
|
value: new Date(2018, 4, 5),
|
||||||
|
defaultPanel: 'year',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const nextBtn = wrapper.find('.mx-btn-icon-double-right');
|
||||||
|
const lastBtn = wrapper.find('.mx-btn-icon-double-left');
|
||||||
nextBtn.trigger('click');
|
nextBtn.trigger('click');
|
||||||
expect(vm.calendarDecade).toBe(2020);
|
expect(wrapper.vm.calendarYear).toBe(2028);
|
||||||
lastBtn.trigger('click');
|
lastBtn.trigger('click');
|
||||||
lastBtn.trigger('click');
|
lastBtn.trigger('click');
|
||||||
expect(vm.calendarDecade).toBe(2000);
|
expect(wrapper.vm.calendarYear).toBe(2008);
|
||||||
});
|
});
|
||||||
|
|
||||||
const renderType = type => {
|
const renderType = type => {
|
||||||
@@ -139,11 +164,24 @@ describe('CalendarPanel', () => {
|
|||||||
value: new Date(2019, 9, 1, 10),
|
value: new Date(2019, 9, 1, 10),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
expect(wrapper.element).toMatchSnapshot();
|
expect(wrapper.vm.panel).toBe(type);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
['date', 'month', 'year'].forEach(renderType);
|
['date', 'month', 'year'].forEach(renderType);
|
||||||
|
|
||||||
|
it('feat: select year to change the calendar', async () => {
|
||||||
|
wrapper = mount(CalendarPanel, {
|
||||||
|
propsData: {
|
||||||
|
value: new Date(2018, 4, 5),
|
||||||
|
defaultPanel: 'year',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await wrapper.find('.mx-table-year td > div').trigger('click');
|
||||||
|
expect(wrapper.vm.calendarYear).toBe(2010);
|
||||||
|
await wrapper.find('.mx-table-month td > div').trigger('click');
|
||||||
|
expect(wrapper.vm.calendarMonth).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
it('prop: disabledDate', () => {
|
it('prop: disabledDate', () => {
|
||||||
const disabledDate = date => {
|
const disabledDate = date => {
|
||||||
return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
|
return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
|
||||||
@@ -168,11 +206,12 @@ describe('CalendarPanel', () => {
|
|||||||
expect(wrapper.emitted().select).toBeUndefined();
|
expect(wrapper.emitted().select).toBeUndefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: partialUpdate', () => {
|
it('prop: partialUpdate', async () => {
|
||||||
wrapper = mount(CalendarPanel, {
|
wrapper = mount(CalendarPanel, {
|
||||||
propsData: {
|
propsData: {
|
||||||
value: new Date(2019, 9, 4),
|
value: new Date(2019, 9, 4),
|
||||||
partialUpdate: true,
|
partialUpdate: true,
|
||||||
|
defaultPanel: 'year',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
wrapper
|
wrapper
|
||||||
@@ -180,11 +219,8 @@ describe('CalendarPanel', () => {
|
|||||||
.at(0)
|
.at(0)
|
||||||
.trigger('click');
|
.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 9, 4));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 9, 4));
|
||||||
wrapper.setProps({ value: new Date(2010, 9, 4) });
|
await wrapper.setProps({ value: new Date(2010, 9, 4) });
|
||||||
wrapper
|
wrapper.find('.mx-table-month td > div').trigger('click');
|
||||||
.findAll('.mx-table-month td > div')
|
|
||||||
.at(0)
|
|
||||||
.trigger('click');
|
|
||||||
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2010, 0, 4));
|
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2010, 0, 4));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { mount } from '@vue/test-utils';
|
import { mount } from '@vue/test-utils';
|
||||||
import flushPromises from 'flush-promises';
|
|
||||||
import CalendarRange from '../src/calendar/calendar-range';
|
import CalendarRange from '../src/calendar/calendar-range';
|
||||||
import CalendarPanel from '../src/calendar/calendar-panel';
|
import CalendarPanel from '../src/calendar/calendar-panel';
|
||||||
|
|
||||||
@@ -12,7 +11,6 @@ afterEach(() => {
|
|||||||
describe('CalendarRange', () => {
|
describe('CalendarRange', () => {
|
||||||
it('feat: correct classes', () => {
|
it('feat: correct classes', () => {
|
||||||
wrapper = mount(CalendarRange, {
|
wrapper = mount(CalendarRange, {
|
||||||
sync: false,
|
|
||||||
propsData: {
|
propsData: {
|
||||||
value: [new Date(2019, 9, 30), new Date(2019, 10, 2)],
|
value: [new Date(2019, 9, 30), new Date(2019, 10, 2)],
|
||||||
},
|
},
|
||||||
@@ -29,38 +27,31 @@ describe('CalendarRange', () => {
|
|||||||
|
|
||||||
it('feat: click range', async () => {
|
it('feat: click range', async () => {
|
||||||
wrapper = mount(CalendarRange, {
|
wrapper = mount(CalendarRange, {
|
||||||
sync: false,
|
|
||||||
propsData: {
|
propsData: {
|
||||||
defaultValue: new Date(2019, 9, 1),
|
defaultValue: new Date(2019, 9, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
expect(wrapper.vm.calendars).toEqual([new Date(2019, 9, 1), new Date(2019, 10, 1)]);
|
expect(wrapper.vm.calendars).toEqual([new Date(2019, 9, 1), new Date(2019, 10, 1)]);
|
||||||
const tds = wrapper.findAll('.mx-table-date td');
|
const tds = wrapper.findAll('.mx-table-date td');
|
||||||
tds.at(2).trigger('click');
|
await tds.at(2).trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select).toBeUndefined();
|
expect(wrapper.emitted().select).toBeUndefined();
|
||||||
tds.at(8).trigger('click');
|
await tds.at(8).trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual([new Date(2019, 9, 1), new Date(2019, 9, 7)]);
|
expect(wrapper.emitted().select[0][0]).toEqual([new Date(2019, 9, 1), new Date(2019, 9, 7)]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: calendars min gap', async () => {
|
it('feat: calendars min gap', async () => {
|
||||||
wrapper = mount(CalendarRange, {
|
wrapper = mount(CalendarRange, {
|
||||||
sync: false,
|
|
||||||
propsData: {
|
propsData: {
|
||||||
defaultValue: new Date(2019, 6, 1),
|
defaultValue: new Date(2019, 6, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const panels = wrapper.findAll(CalendarPanel);
|
const firstRightIcon = wrapper.find('.mx-calendar-panel-date .mx-btn-icon-right');
|
||||||
const startPanel = panels.at(0);
|
const secondLeftIcon = wrapper.find('.mx-calendar-panel-date:nth-child(2) .mx-btn-icon-left');
|
||||||
const endPanel = panels.at(1);
|
|
||||||
|
|
||||||
startPanel.find('.mx-btn-icon-right').trigger('click');
|
await firstRightIcon.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.vm.calendars).toEqual([new Date(2019, 7, 1), new Date(2019, 8, 1)]);
|
expect(wrapper.vm.calendars).toEqual([new Date(2019, 7, 1), new Date(2019, 8, 1)]);
|
||||||
|
|
||||||
endPanel.find('.mx-btn-icon-left').trigger('click');
|
await secondLeftIcon.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.vm.calendars).toEqual([new Date(2019, 6, 1), new Date(2019, 7, 1)]);
|
expect(wrapper.vm.calendars).toEqual([new Date(2019, 6, 1), new Date(2019, 7, 1)]);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -70,7 +61,7 @@ describe('CalendarRange', () => {
|
|||||||
partialUpdate: true,
|
partialUpdate: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const panels = wrapper.findAll(CalendarPanel);
|
const panels = wrapper.findAllComponents(CalendarPanel);
|
||||||
const startPanel = panels.at(0);
|
const startPanel = panels.at(0);
|
||||||
const endPanel = panels.at(1);
|
const endPanel = panels.at(1);
|
||||||
expect(startPanel.vm.partialUpdate).toBe(false);
|
expect(startPanel.vm.partialUpdate).toBe(false);
|
||||||
@@ -83,7 +74,7 @@ describe('CalendarRange', () => {
|
|||||||
defaultValue: [new Date(2019, 9, 1), new Date(2019, 11, 1)],
|
defaultValue: [new Date(2019, 9, 1), new Date(2019, 11, 1)],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const panels = wrapper.findAll(CalendarPanel);
|
const panels = wrapper.findAllComponents(CalendarPanel);
|
||||||
const startPanel = panels.at(0);
|
const startPanel = panels.at(0);
|
||||||
const endPanel = panels.at(1);
|
const endPanel = panels.at(1);
|
||||||
expect(startPanel.vm.calendarMonth).toBe(9);
|
expect(startPanel.vm.calendarMonth).toBe(9);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { shallowMount, createWrapper, mount } from '@vue/test-utils';
|
import { shallowMount, createWrapper, mount } from '@vue/test-utils';
|
||||||
import { format, parse } from 'date-fns';
|
import { format, parse } from 'date-fns';
|
||||||
import DatePicker from '../src/date-picker.vue';
|
import Popup from '../src/popup';
|
||||||
|
import DatePicker from '../src/date-picker';
|
||||||
|
|
||||||
let wrapper;
|
let wrapper;
|
||||||
|
|
||||||
@@ -9,28 +10,28 @@ afterEach(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('DatePicker', () => {
|
describe('DatePicker', () => {
|
||||||
it('feat: open and close the popup', () => {
|
it('feat: open and close the popup', async () => {
|
||||||
wrapper = mount(DatePicker, {
|
wrapper = mount(DatePicker, {
|
||||||
attachToDocument: true,
|
attachTo: document.body,
|
||||||
});
|
});
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||||
// expect click input should show the popup
|
// expect click input should show the popup
|
||||||
const input = wrapper.find('input');
|
const input = wrapper.find('input');
|
||||||
input.trigger('mousedown');
|
await input.trigger('mousedown');
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||||
// expect click out side should hide the popup
|
// expect click out side should hide the popup
|
||||||
const bodyWrapper = createWrapper(document.body);
|
const bodyWrapper = createWrapper(document.body);
|
||||||
bodyWrapper.trigger('mousedown');
|
await bodyWrapper.trigger('mousedown');
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||||
// expect focus input should show the popop
|
// expect focus input should show the popop
|
||||||
input.trigger('focus');
|
await input.trigger('focus');
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||||
// expoce keydown tab should hide the popup
|
// expoce keydown tab should hide the popup
|
||||||
input.trigger('keydown.tab');
|
await input.trigger('keydown.tab');
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: should init panel and calendar when reopen', () => {
|
it('feat: should init panel and calendar when reopen', async () => {
|
||||||
wrapper = mount(DatePicker, {
|
wrapper = mount(DatePicker, {
|
||||||
propsData: {
|
propsData: {
|
||||||
defaultValue: new Date(2019, 9, 1),
|
defaultValue: new Date(2019, 9, 1),
|
||||||
@@ -38,15 +39,15 @@ describe('DatePicker', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const yearBtn = wrapper.find('.mx-btn-current-year');
|
const yearBtn = wrapper.find('.mx-btn-current-year');
|
||||||
yearBtn.trigger('click');
|
await yearBtn.trigger('click');
|
||||||
// change to year panel
|
// change to year panel
|
||||||
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(true);
|
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(true);
|
||||||
wrapper.setProps({ open: false });
|
await wrapper.setProps({ open: false });
|
||||||
wrapper.setProps({ open: true });
|
await wrapper.setProps({ open: true });
|
||||||
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(false);
|
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: open', () => {
|
it('prop: open', async () => {
|
||||||
wrapper = mount(DatePicker, {
|
wrapper = mount(DatePicker, {
|
||||||
propsData: {
|
propsData: {
|
||||||
open: false,
|
open: false,
|
||||||
@@ -55,7 +56,7 @@ describe('DatePicker', () => {
|
|||||||
const { vm } = wrapper;
|
const { vm } = wrapper;
|
||||||
vm.openPopup();
|
vm.openPopup();
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||||
wrapper.setProps({ open: true });
|
await wrapper.setProps({ open: true });
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||||
vm.closePopup();
|
vm.closePopup();
|
||||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||||
@@ -161,7 +162,7 @@ describe('DatePicker', () => {
|
|||||||
expect(tableDate.element).toMatchSnapshot();
|
expect(tableDate.element).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: valueType', () => {
|
it('prop: valueType', async () => {
|
||||||
const value = new Date(2019, 9, 20);
|
const value = new Date(2019, 9, 20);
|
||||||
const emitValue = new Date(2019, 9, 22);
|
const emitValue = new Date(2019, 9, 22);
|
||||||
wrapper = shallowMount(DatePicker, {
|
wrapper = shallowMount(DatePicker, {
|
||||||
@@ -173,13 +174,13 @@ describe('DatePicker', () => {
|
|||||||
const { vm } = wrapper;
|
const { vm } = wrapper;
|
||||||
expect(vm.text).toBe('2019/10/20');
|
expect(vm.text).toBe('2019/10/20');
|
||||||
vm.emitValue(emitValue);
|
vm.emitValue(emitValue);
|
||||||
wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
|
await wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
|
||||||
expect(vm.text).toBe('2019/10/20');
|
expect(vm.text).toBe('2019/10/20');
|
||||||
vm.emitValue(emitValue);
|
vm.emitValue(emitValue);
|
||||||
wrapper.setProps({ valueType: 'timestamp', value: value.getTime() });
|
await wrapper.setProps({ valueType: 'timestamp', value: value.getTime() });
|
||||||
expect(vm.text).toBe('2019/10/20');
|
expect(vm.text).toBe('2019/10/20');
|
||||||
vm.emitValue(emitValue);
|
vm.emitValue(emitValue);
|
||||||
wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
|
await wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
|
||||||
expect(vm.text).toBe('2019/10/20');
|
expect(vm.text).toBe('2019/10/20');
|
||||||
vm.emitValue(emitValue);
|
vm.emitValue(emitValue);
|
||||||
const emitted = wrapper.emitted();
|
const emitted = wrapper.emitted();
|
||||||
@@ -191,12 +192,13 @@ describe('DatePicker', () => {
|
|||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: shortcut', () => {
|
it('prop: shortcut', async () => {
|
||||||
const date = new Date(2019, 4, 10);
|
const date = new Date(2019, 4, 10);
|
||||||
wrapper = shallowMount(DatePicker, {
|
wrapper = shallowMount(DatePicker, {
|
||||||
propsData: {
|
propsData: {
|
||||||
open: true,
|
open: true,
|
||||||
valueType: 'YYYY/MM/DD',
|
valueType: 'YYYY/MM/DD',
|
||||||
|
range: false,
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{
|
{
|
||||||
text: 'Today',
|
text: 'Today',
|
||||||
@@ -207,12 +209,11 @@ describe('DatePicker', () => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const btn = wrapper.find('.mx-btn-shortcut');
|
const btn = wrapper.find('.mx-btn-shortcut');
|
||||||
btn.trigger('click');
|
await btn.trigger('click');
|
||||||
const emitted = wrapper.emitted();
|
const emitted = wrapper.emitted();
|
||||||
expect(emitted.input).toEqual([['2019/05/10']]);
|
expect(emitted.input).toEqual([['2019/05/10']]);
|
||||||
wrapper.setProps({
|
await wrapper.setProps({
|
||||||
range: true,
|
range: true,
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{
|
{
|
||||||
@@ -234,7 +235,7 @@ describe('DatePicker', () => {
|
|||||||
popupClass: 'test',
|
popupClass: 'test',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const popup = wrapper.find('.mx-datepicker-popup');
|
const popup = wrapper.findComponent(Popup);
|
||||||
expect(popup.classes()).toContain('test');
|
expect(popup.classes()).toContain('test');
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -247,25 +248,25 @@ describe('DatePicker', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const popup = wrapper.find('.mx-datepicker-popup');
|
const popup = wrapper.findComponent(Popup);
|
||||||
expect(popup.element.style.color).toBe('red');
|
expect(popup.element.style.color).toBe('red');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: confirm', () => {
|
it('prop: confirm', async () => {
|
||||||
wrapper = shallowMount(DatePicker, {
|
wrapper = shallowMount(DatePicker, {
|
||||||
propsData: {
|
propsData: {
|
||||||
confirm: true,
|
confirm: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { vm } = wrapper;
|
const { vm } = wrapper;
|
||||||
vm.openPopup();
|
await wrapper.find('input').trigger('focus');
|
||||||
const btn = wrapper.find('.mx-datepicker-btn-confirm');
|
const btn = wrapper.find('.mx-datepicker-btn-confirm');
|
||||||
expect(btn.exists()).toBe(true);
|
expect(btn.exists()).toBe(true);
|
||||||
// click the date expect popup don't close
|
// click the date expect popup don't close
|
||||||
vm.handleSelectDate(new Date(2018, 5, 5));
|
vm.handleSelectDate(new Date(2018, 5, 5));
|
||||||
expect(wrapper.emitted().input).toBeUndefined();
|
expect(wrapper.emitted().input).toBeUndefined();
|
||||||
expect(vm.popupVisible).toBe(true);
|
expect(vm.popupVisible).toBe(true);
|
||||||
btn.trigger('click');
|
await btn.trigger('click');
|
||||||
expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
|
expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
|
||||||
expect(vm.popupVisible).toBe(false);
|
expect(vm.popupVisible).toBe(false);
|
||||||
});
|
});
|
||||||
@@ -291,7 +292,7 @@ describe('DatePicker', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const popup = wrapper.find('.mx-datepicker-popup');
|
const popup = wrapper.findComponent(Popup);
|
||||||
expect(popup.element.parentNode).toBe(document.body);
|
expect(popup.element.parentNode).toBe(document.body);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -366,7 +367,7 @@ describe('DatePicker', () => {
|
|||||||
expect(wrapper.emitted().pick[0][0]).toEqual(new Date(2019, 8, 29));
|
expect(wrapper.emitted().pick[0][0]).toEqual(new Date(2019, 8, 29));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Ignore whitespace around separator on manual range input', () => {
|
it('Ignore whitespace around separator on manual range input', async () => {
|
||||||
const rangeSeparator = ' ~ ';
|
const rangeSeparator = ' ~ ';
|
||||||
const text = '2020-02-12';
|
const text = '2020-02-12';
|
||||||
wrapper = mount(DatePicker, {
|
wrapper = mount(DatePicker, {
|
||||||
@@ -378,13 +379,13 @@ describe('DatePicker', () => {
|
|||||||
});
|
});
|
||||||
const input = wrapper.find('input');
|
const input = wrapper.find('input');
|
||||||
|
|
||||||
input.setValue(`${text} ${rangeSeparator} ${text}`);
|
await input.setValue(`${text} ${rangeSeparator} ${text}`);
|
||||||
input.trigger('change');
|
await input.trigger('change');
|
||||||
input.setValue(`${text}${rangeSeparator.trim()}${text}`);
|
await input.setValue(`${text}${rangeSeparator.trim()}${text}`);
|
||||||
input.trigger('change');
|
await input.trigger('change');
|
||||||
wrapper.setProps({ rangeSeparator: ' - ' });
|
await wrapper.setProps({ rangeSeparator: ' - ' });
|
||||||
input.setValue(`${text} - ${text}`);
|
await input.setValue(`${text} - ${text}`);
|
||||||
input.trigger('change');
|
await input.trigger('change');
|
||||||
expect(wrapper.emitted().input).toEqual([[[text, text]], [[text, text]], [[text, text]]]);
|
expect(wrapper.emitted().input).toEqual([[[text, text]], [[text, text]], [[text, text]]]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ afterEach(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('DatetimePanel', () => {
|
describe('DatetimePanel', () => {
|
||||||
it('feat: click date', () => {
|
it('feat: click date', async () => {
|
||||||
wrapper = mount(DatetimePanel, {
|
wrapper = mount(DatetimePanel, {
|
||||||
propsData: {
|
propsData: {
|
||||||
type: 'datetime',
|
type: 'datetime',
|
||||||
@@ -16,16 +16,16 @@ describe('DatetimePanel', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 2, 12));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 2, 12));
|
||||||
let timeTitle = wrapper.find('.mx-time-header-title');
|
let timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.exists()).toBe(true);
|
expect(timeTitle.exists()).toBe(true);
|
||||||
timeTitle.trigger('click');
|
await timeTitle.trigger('click');
|
||||||
timeTitle = wrapper.find('.mx-time-header-title');
|
timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.exists()).toBe(false);
|
expect(timeTitle.exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: disabled time', () => {
|
it('feat: disabled time', async () => {
|
||||||
const disabledDate = date => date < new Date(2019, 9, 2);
|
const disabledDate = date => date < new Date(2019, 9, 2);
|
||||||
const disabledTime = date => date < new Date(2019, 9, 2, 12);
|
const disabledTime = date => date < new Date(2019, 9, 2, 12);
|
||||||
wrapper = mount(DatetimePanel, {
|
wrapper = mount(DatetimePanel, {
|
||||||
@@ -36,14 +36,14 @@ describe('DatetimePanel', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
expect(wrapper.emitted().select).toBeUndefined();
|
expect(wrapper.emitted().select).toBeUndefined();
|
||||||
const timeTitle = wrapper.find('.mx-time-header-title');
|
const timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.text()).toBe('2019-10-02');
|
expect(timeTitle.text()).toBe('2019-10-02');
|
||||||
// set the defaultValue is not disabled
|
// set the defaultValue is not disabled
|
||||||
const defaultValue = new Date(2019, 9, 2, 12);
|
const defaultValue = new Date(2019, 9, 2, 12);
|
||||||
wrapper.setProps({ defaultValue });
|
await wrapper.setProps({ defaultValue });
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
|
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { mount } from '@vue/test-utils';
|
import { mount } from '@vue/test-utils';
|
||||||
import flushPromises from 'flush-promises';
|
|
||||||
import DatetimeRange from '../src/datetime/datetime-range';
|
import DatetimeRange from '../src/datetime/datetime-range';
|
||||||
|
|
||||||
let wrapper;
|
let wrapper;
|
||||||
@@ -11,7 +10,6 @@ afterEach(() => {
|
|||||||
describe('DatetimeRange', () => {
|
describe('DatetimeRange', () => {
|
||||||
it('feat: click dates', async () => {
|
it('feat: click dates', async () => {
|
||||||
wrapper = mount(DatetimeRange, {
|
wrapper = mount(DatetimeRange, {
|
||||||
sync: false,
|
|
||||||
propsData: {
|
propsData: {
|
||||||
type: 'datetime',
|
type: 'datetime',
|
||||||
value: [new Date(2019, 9, 4, 18), new Date(2019, 9, 6, 12)],
|
value: [new Date(2019, 9, 4, 18), new Date(2019, 9, 6, 12)],
|
||||||
@@ -20,21 +18,18 @@ describe('DatetimeRange', () => {
|
|||||||
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
||||||
const td2 = wrapper.find('.mx-table-date td:nth-child(5)');
|
const td2 = wrapper.find('.mx-table-date td:nth-child(5)');
|
||||||
td.trigger('click');
|
td.trigger('click');
|
||||||
td2.trigger('click');
|
await td2.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual([
|
expect(wrapper.emitted().select[0][0]).toEqual([
|
||||||
new Date(2019, 9, 2, 18),
|
new Date(2019, 9, 2, 18),
|
||||||
new Date(2019, 9, 3, 12),
|
new Date(2019, 9, 3, 12),
|
||||||
]);
|
]);
|
||||||
let timeTitle = wrapper.find('.mx-time-header-title');
|
let timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.exists()).toBe(true);
|
expect(timeTitle.exists()).toBe(true);
|
||||||
timeTitle.trigger('click');
|
await timeTitle.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
timeTitle = wrapper.find('.mx-time-header-title');
|
timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.exists()).toBe(false);
|
expect(timeTitle.exists()).toBe(false);
|
||||||
td.trigger('click');
|
td.trigger('click');
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select[1][0]).toEqual([
|
expect(wrapper.emitted().select[1][0]).toEqual([
|
||||||
new Date(2019, 9, 2, 18),
|
new Date(2019, 9, 2, 18),
|
||||||
new Date(2019, 9, 2, 18),
|
new Date(2019, 9, 2, 18),
|
||||||
@@ -54,16 +49,14 @@ describe('DatetimeRange', () => {
|
|||||||
});
|
});
|
||||||
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
const td = wrapper.find('.mx-table-date td:nth-child(4)');
|
||||||
td.trigger('click');
|
td.trigger('click');
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select).toBeUndefined();
|
expect(wrapper.emitted().select).toBeUndefined();
|
||||||
const timeTitle = wrapper.find('.mx-time-header-title');
|
const timeTitle = wrapper.find('.mx-time-header-title');
|
||||||
expect(timeTitle.text()).toBe('2019-10-02');
|
expect(timeTitle.text()).toBe('2019-10-02');
|
||||||
const defaultValue = [new Date(2019, 9, 2, 12), new Date(2019, 9, 2, 12)];
|
const defaultValue = [new Date(2019, 9, 2, 12), new Date(2019, 9, 2, 12)];
|
||||||
wrapper.setProps({ defaultValue });
|
await wrapper.setProps({ defaultValue });
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
td.trigger('click');
|
await td.trigger('click');
|
||||||
await flushPromises();
|
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
|
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
+11
-6
@@ -1,5 +1,6 @@
|
|||||||
import { mount } from '@vue/test-utils';
|
import { mount } from '@vue/test-utils';
|
||||||
import DatePicker from '../src/date-picker.vue';
|
import DatePicker from '../src/date-picker';
|
||||||
|
import Calendar from '../src/calendar/calendar-panel';
|
||||||
import '../src/locale/zh-cn';
|
import '../src/locale/zh-cn';
|
||||||
|
|
||||||
let wrapper;
|
let wrapper;
|
||||||
@@ -20,7 +21,7 @@ describe('Locale', () => {
|
|||||||
expect(wrapper.find('.mx-table-date td').element.title).toBe('2019-09-30');
|
expect(wrapper.find('.mx-table-date td').element.title).toBe('2019-09-30');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: lang - string', () => {
|
it('prop: lang - string', async () => {
|
||||||
wrapper = mount(DatePicker, {
|
wrapper = mount(DatePicker, {
|
||||||
propsData: {
|
propsData: {
|
||||||
value: new Date(2019, 9, 10),
|
value: new Date(2019, 9, 10),
|
||||||
@@ -30,14 +31,18 @@ describe('Locale', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
expect(wrapper.find('.mx-table-date th').text()).toBe('Su');
|
expect(wrapper.find('.mx-table-date th').text()).toBe('Su');
|
||||||
expect(wrapper.find('.mx-table-month td').text()).toBe('Jan');
|
|
||||||
expect(wrapper.find('.mx-btn-current-month').text()).toBe('Oct');
|
|
||||||
expect(wrapper.find('.mx-table-date .active').element.title).toBe('Oct 10, 2019');
|
expect(wrapper.find('.mx-table-date .active').element.title).toBe('Oct 10, 2019');
|
||||||
|
expect(wrapper.find('.mx-btn-current-month').text()).toBe('Oct');
|
||||||
|
await wrapper.findComponent(Calendar).setData({ panel: 'month' });
|
||||||
|
// expect(wrapper.vm.panel).toBe('month');
|
||||||
|
expect(wrapper.find('.mx-table-month td').text()).toBe('Jan');
|
||||||
wrapper.setProps({ lang: 'zh-cn' });
|
wrapper.setProps({ lang: 'zh-cn' });
|
||||||
|
await wrapper.findComponent(Calendar).setData({ panel: 'date' });
|
||||||
expect(wrapper.find('.mx-table-date th').text()).toBe('一');
|
expect(wrapper.find('.mx-table-date th').text()).toBe('一');
|
||||||
expect(wrapper.find('.mx-table-month td').text()).toBe('1月');
|
|
||||||
expect(wrapper.find('.mx-btn-current-month').text()).toBe('10月');
|
|
||||||
expect(wrapper.find('.mx-table-date .active').element.title).toBe('10月 10, 2019');
|
expect(wrapper.find('.mx-table-date .active').element.title).toBe('10月 10, 2019');
|
||||||
|
expect(wrapper.find('.mx-btn-current-month').text()).toBe('10月');
|
||||||
|
await wrapper.findComponent(Calendar).setData({ panel: 'month' });
|
||||||
|
expect(wrapper.find('.mx-table-month td').text()).toBe('1月');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('prop: lang - object', () => {
|
it('prop: lang - object', () => {
|
||||||
|
|||||||
@@ -11,9 +11,7 @@ describe('TableDate', () => {
|
|||||||
it('corrent render', () => {
|
it('corrent render', () => {
|
||||||
wrapper = mount(TableDate, {
|
wrapper = mount(TableDate, {
|
||||||
propsData: {
|
propsData: {
|
||||||
calendarYear: 2019,
|
calendar: new Date(2019, 9, 1, 0, 0, 0),
|
||||||
calendarMonth: 9,
|
|
||||||
firstDayOfWeek: 1,
|
|
||||||
titleFormat: 'DD/MM/YYYY',
|
titleFormat: 'DD/MM/YYYY',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -11,7 +11,8 @@ describe('TableMonth', () => {
|
|||||||
it('correct render', () => {
|
it('correct render', () => {
|
||||||
wrapper = mount(TableMonth, {
|
wrapper = mount(TableMonth, {
|
||||||
propsData: {
|
propsData: {
|
||||||
getClasses: month => {
|
calendar: new Date(2019, 9, 1, 0, 0, 0),
|
||||||
|
getCellClasses: month => {
|
||||||
if (month === 9) {
|
if (month === 9) {
|
||||||
return 'active';
|
return 'active';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ describe('TableYear', () => {
|
|||||||
it('decade=2010', () => {
|
it('decade=2010', () => {
|
||||||
wrapper = mount(TableYear, {
|
wrapper = mount(TableYear, {
|
||||||
propsData: {
|
propsData: {
|
||||||
decade: 2010,
|
calendar: new Date(2019, 9, 1, 0, 0, 0),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
expect(wrapper.element).toMatchSnapshot();
|
expect(wrapper.element).toMatchSnapshot();
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ describe('TimePanel', () => {
|
|||||||
expect(wrapper.element).toMatchSnapshot();
|
expect(wrapper.element).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('feat: emit select event when click', () => {
|
it('feat: emit select event when click', async () => {
|
||||||
wrapper = mount(TimePanel, {
|
wrapper = mount(TimePanel, {
|
||||||
propsData: {
|
propsData: {
|
||||||
format: 'hh:mm:ss a',
|
format: 'hh:mm:ss a',
|
||||||
@@ -72,15 +72,15 @@ describe('TimePanel', () => {
|
|||||||
const hour = wrapper.find('[data-type=hour] li:nth-child(2)');
|
const hour = wrapper.find('[data-type=hour] li:nth-child(2)');
|
||||||
hour.trigger('click');
|
hour.trigger('click');
|
||||||
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 10, 1));
|
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 10, 1));
|
||||||
wrapper.setProps({ value: new Date(2019, 9, 10, 1) });
|
await wrapper.setProps({ value: new Date(2019, 9, 10, 1) });
|
||||||
const minute = wrapper.find('[data-type=minute] li:nth-child(2)');
|
const minute = wrapper.find('[data-type=minute] li:nth-child(2)');
|
||||||
minute.trigger('click');
|
minute.trigger('click');
|
||||||
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2019, 9, 10, 1, 1));
|
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2019, 9, 10, 1, 1));
|
||||||
wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1) });
|
await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1) });
|
||||||
const second = wrapper.find('[data-type=second] li:nth-child(2)');
|
const second = wrapper.find('[data-type=second] li:nth-child(2)');
|
||||||
second.trigger('click');
|
second.trigger('click');
|
||||||
expect(wrapper.emitted().select[2][0]).toEqual(new Date(2019, 9, 10, 1, 1, 1));
|
expect(wrapper.emitted().select[2][0]).toEqual(new Date(2019, 9, 10, 1, 1, 1));
|
||||||
wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1, 1) });
|
await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1, 1) });
|
||||||
const pm = wrapper.find('[data-type=ampm] li:nth-child(2)');
|
const pm = wrapper.find('[data-type=ampm] li:nth-child(2)');
|
||||||
pm.trigger('click');
|
pm.trigger('click');
|
||||||
expect(wrapper.emitted().select[3][0]).toEqual(new Date(2019, 9, 10, 13, 1, 1));
|
expect(wrapper.emitted().select[3][0]).toEqual(new Date(2019, 9, 10, 13, 1, 1));
|
||||||
@@ -105,7 +105,7 @@ describe('TimePanel', () => {
|
|||||||
format: {},
|
format: {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const cols = wrapper.find(ListColumns);
|
const cols = wrapper.findComponent(ListColumns);
|
||||||
expect(cols.props('showHour')).toBe(true);
|
expect(cols.props('showHour')).toBe(true);
|
||||||
expect(cols.props('showMinute')).toBe(true);
|
expect(cols.props('showMinute')).toBe(true);
|
||||||
expect(cols.props('showSecond')).toBe(true);
|
expect(cols.props('showSecond')).toBe(true);
|
||||||
|
|||||||
Generated
+87
-56
@@ -1800,7 +1800,8 @@
|
|||||||
"version": "7.0.7",
|
"version": "7.0.7",
|
||||||
"resolved": "https://registry.npm.taobao.org/@types/babel-types/download/@types/babel-types-7.0.7.tgz",
|
"resolved": "https://registry.npm.taobao.org/@types/babel-types/download/@types/babel-types-7.0.7.tgz",
|
||||||
"integrity": "sha1-Zn6xZA6AOUNgKAVXN9K5mG7jNuM=",
|
"integrity": "sha1-Zn6xZA6AOUNgKAVXN9K5mG7jNuM=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"@types/babel__core": {
|
"@types/babel__core": {
|
||||||
"version": "7.1.3",
|
"version": "7.1.3",
|
||||||
@@ -1848,6 +1849,7 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/@types/babylon/download/@types/babylon-6.16.5.tgz",
|
"resolved": "https://registry.npm.taobao.org/@types/babylon/download/@types/babylon-6.16.5.tgz",
|
||||||
"integrity": "sha1-HFZB22nrjN83jt0ltL53VL7rSLQ=",
|
"integrity": "sha1-HFZB22nrjN83jt0ltL53VL7rSLQ=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/babel-types": "*"
|
"@types/babel-types": "*"
|
||||||
}
|
}
|
||||||
@@ -2116,13 +2118,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@vue/test-utils": {
|
"@vue/test-utils": {
|
||||||
"version": "1.0.0-beta.29",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/@vue/test-utils/download/@vue/test-utils-1.0.0-beta.29.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.1.1.tgz",
|
||||||
"integrity": "sha1-yULPJeiRzwgbagMzK0rh70MHJvA=",
|
"integrity": "sha512-/32538ilZ9qSiu1gui7zfBn+IFy+zoTaQTZ1qiLfQXzZtaeAD23kJMrnqaoe2w8JzJoXuqHUl2ruuStG8rwFYQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"dom-event-types": "^1.0.0",
|
"dom-event-types": "^1.0.0",
|
||||||
"lodash": "^4.17.4"
|
"lodash": "^4.17.15",
|
||||||
|
"pretty": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"JSONStream": {
|
"JSONStream": {
|
||||||
@@ -2221,9 +2224,10 @@
|
|||||||
},
|
},
|
||||||
"align-text": {
|
"align-text": {
|
||||||
"version": "0.1.4",
|
"version": "0.1.4",
|
||||||
"resolved": "http://registry.npm.taobao.org/align-text/download/align-text-0.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
|
||||||
"integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
|
"integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"kind-of": "^3.0.2",
|
"kind-of": "^3.0.2",
|
||||||
"longest": "^1.0.1",
|
"longest": "^1.0.1",
|
||||||
@@ -2235,6 +2239,7 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
|
||||||
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
|
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-buffer": "^1.1.5"
|
"is-buffer": "^1.1.5"
|
||||||
}
|
}
|
||||||
@@ -2927,7 +2932,7 @@
|
|||||||
},
|
},
|
||||||
"big.js": {
|
"big.js": {
|
||||||
"version": "3.2.0",
|
"version": "3.2.0",
|
||||||
"resolved": "http://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
|
||||||
"integrity": "sha1-pfwpi4G54Nyi5FiCR4S2XFK6WI4=",
|
"integrity": "sha1-pfwpi4G54Nyi5FiCR4S2XFK6WI4=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@@ -3305,7 +3310,7 @@
|
|||||||
},
|
},
|
||||||
"center-align": {
|
"center-align": {
|
||||||
"version": "0.1.3",
|
"version": "0.1.3",
|
||||||
"resolved": "http://registry.npm.taobao.org/center-align/download/center-align-0.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
|
||||||
"integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
|
"integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -3758,6 +3763,7 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/constantinople/download/constantinople-3.1.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/constantinople/download/constantinople-3.1.2.tgz",
|
||||||
"integrity": "sha1-1F7XJPV9PRBQABen06iJwTga5kc=",
|
"integrity": "sha1-1F7XJPV9PRBQABen06iJwTga5kc=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/babel-types": "^7.0.0",
|
"@types/babel-types": "^7.0.0",
|
||||||
"@types/babylon": "^6.16.2",
|
"@types/babylon": "^6.16.2",
|
||||||
@@ -4729,9 +4735,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"date-fns": {
|
"date-fns": {
|
||||||
"version": "2.7.0",
|
"version": "2.16.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/date-fns/download/date-fns-2.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdate-fns%2Fdownload%2Fdate-fns-2.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
|
||||||
"integrity": "sha1-gnHZQ8xGNqHydpjxuNap8c63QCY="
|
"integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"date-format-parse": {
|
"date-format-parse": {
|
||||||
"version": "0.2.5",
|
"version": "0.2.5",
|
||||||
@@ -4994,8 +5001,8 @@
|
|||||||
},
|
},
|
||||||
"dom-event-types": {
|
"dom-event-types": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/dom-event-types/download/dom-event-types-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.0.0.tgz",
|
||||||
"integrity": "sha1-WDCgop4b+Df+UKcM2ApZcjKBPK4=",
|
"integrity": "sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"dom-serializer": {
|
"dom-serializer": {
|
||||||
@@ -5155,7 +5162,7 @@
|
|||||||
},
|
},
|
||||||
"emojis-list": {
|
"emojis-list": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
|
||||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
|
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@@ -5188,7 +5195,7 @@
|
|||||||
},
|
},
|
||||||
"errno": {
|
"errno": {
|
||||||
"version": "0.1.7",
|
"version": "0.1.7",
|
||||||
"resolved": "http://registry.npm.taobao.org/errno/download/errno-0.1.7.tgz",
|
"resolved": "https://registry.npm.taobao.org/errno/download/errno-0.1.7.tgz",
|
||||||
"integrity": "sha1-RoTXF3mtOa8Xfj8AeZb3xnyFJhg=",
|
"integrity": "sha1-RoTXF3mtOa8Xfj8AeZb3xnyFJhg=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -6145,7 +6152,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@@ -6166,12 +6174,14 @@
|
|||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@@ -6186,17 +6196,20 @@
|
|||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -6313,7 +6326,8 @@
|
|||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@@ -6325,6 +6339,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@@ -6339,6 +6354,7 @@
|
|||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
@@ -6346,12 +6362,14 @@
|
|||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@@ -6370,6 +6388,7 @@
|
|||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@@ -6450,7 +6469,8 @@
|
|||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@@ -6462,6 +6482,7 @@
|
|||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@@ -6547,7 +6568,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@@ -6583,6 +6605,7 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@@ -6602,6 +6625,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@@ -6645,12 +6669,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -7304,7 +7330,7 @@
|
|||||||
},
|
},
|
||||||
"html-tags": {
|
"html-tags": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
|
||||||
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
|
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@@ -7554,7 +7580,7 @@
|
|||||||
},
|
},
|
||||||
"image-size": {
|
"image-size": {
|
||||||
"version": "0.5.5",
|
"version": "0.5.5",
|
||||||
"resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
|
"resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz?cache=0&sync_timestamp=1569841767280&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimage-size%2Fdownload%2Fimage-size-0.5.5.tgz",
|
||||||
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
|
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -7883,7 +7909,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "4.0.13",
|
"version": "4.0.13",
|
||||||
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz?cache=0&sync_timestamp=1583824513691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-4.0.13.tgz",
|
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz",
|
||||||
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
|
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -8724,7 +8750,8 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npm.taobao.org/js-stringify/download/js-stringify-1.0.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/js-stringify/download/js-stringify-1.0.2.tgz",
|
||||||
"integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
|
"integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"js-tokens": {
|
"js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
@@ -8895,7 +8922,7 @@
|
|||||||
},
|
},
|
||||||
"lazy-cache": {
|
"lazy-cache": {
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"resolved": "http://registry.npm.taobao.org/lazy-cache/download/lazy-cache-1.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
|
||||||
"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
|
"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -9317,7 +9344,7 @@
|
|||||||
},
|
},
|
||||||
"loader-utils": {
|
"loader-utils": {
|
||||||
"version": "0.2.17",
|
"version": "0.2.17",
|
||||||
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-0.2.17.tgz?cache=0&sync_timestamp=1584445611428&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-0.2.17.tgz",
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
|
||||||
"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
|
"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@@ -9371,7 +9398,7 @@
|
|||||||
},
|
},
|
||||||
"lodash.kebabcase": {
|
"lodash.kebabcase": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
|
||||||
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
|
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@@ -9523,9 +9550,10 @@
|
|||||||
},
|
},
|
||||||
"longest": {
|
"longest": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "http://registry.npm.taobao.org/longest/download/longest-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
|
||||||
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
|
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"loose-envify": {
|
"loose-envify": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
@@ -11444,7 +11472,7 @@
|
|||||||
},
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"version": "5.2.18",
|
"version": "5.2.18",
|
||||||
"resolved": "https://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz?cache=0&sync_timestamp=1581994853208&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-5.2.18.tgz",
|
"resolved": "https://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz",
|
||||||
"integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
|
"integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@@ -11456,7 +11484,7 @@
|
|||||||
},
|
},
|
||||||
"strip-ansi": {
|
"strip-ansi": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-3.0.1.tgz",
|
||||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@@ -11803,7 +11831,7 @@
|
|||||||
},
|
},
|
||||||
"promise": {
|
"promise": {
|
||||||
"version": "7.3.1",
|
"version": "7.3.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpromise%2Fdownload%2Fpromise-7.3.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
|
||||||
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
|
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -11829,7 +11857,7 @@
|
|||||||
},
|
},
|
||||||
"prr": {
|
"prr": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/prr/download/prr-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
|
||||||
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
|
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -11910,7 +11938,8 @@
|
|||||||
"version": "1.3.3",
|
"version": "1.3.3",
|
||||||
"resolved": "https://registry.npm.taobao.org/pug-error/download/pug-error-1.3.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/pug-error/download/pug-error-1.3.3.tgz",
|
||||||
"integrity": "sha1-80L7AIdS1YA0wYXeA2At2f/hX6Y=",
|
"integrity": "sha1-80L7AIdS1YA0wYXeA2At2f/hX6Y=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"pug-filters": {
|
"pug-filters": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
@@ -11930,7 +11959,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"camelcase": {
|
"camelcase": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz?cache=0&sync_timestamp=1586229901005&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-1.2.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz",
|
||||||
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
|
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -11949,7 +11978,7 @@
|
|||||||
},
|
},
|
||||||
"uglify-js": {
|
"uglify-js": {
|
||||||
"version": "2.8.29",
|
"version": "2.8.29",
|
||||||
"resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-2.8.29.tgz",
|
"resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-2.8.29.tgz?cache=0&sync_timestamp=1573031889241&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-2.8.29.tgz",
|
||||||
"integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
|
"integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -11961,14 +11990,14 @@
|
|||||||
},
|
},
|
||||||
"wordwrap": {
|
"wordwrap": {
|
||||||
"version": "0.0.2",
|
"version": "0.0.2",
|
||||||
"resolved": "http://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.2.tgz",
|
||||||
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
|
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"yargs": {
|
"yargs": {
|
||||||
"version": "3.10.0",
|
"version": "3.10.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/yargs/download/yargs-3.10.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-3.10.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/yargs/download/yargs-3.10.0.tgz",
|
||||||
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
|
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -12030,7 +12059,8 @@
|
|||||||
"version": "2.0.5",
|
"version": "2.0.5",
|
||||||
"resolved": "https://registry.npm.taobao.org/pug-runtime/download/pug-runtime-2.0.5.tgz",
|
"resolved": "https://registry.npm.taobao.org/pug-runtime/download/pug-runtime-2.0.5.tgz",
|
||||||
"integrity": "sha1-baeXbDa/IvaOczw1kkDYrnoylTo=",
|
"integrity": "sha1-baeXbDa/IvaOczw1kkDYrnoylTo=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"pug-strip-comments": {
|
"pug-strip-comments": {
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
@@ -12046,7 +12076,8 @@
|
|||||||
"version": "1.1.8",
|
"version": "1.1.8",
|
||||||
"resolved": "https://registry.npm.taobao.org/pug-walk/download/pug-walk-1.1.8.tgz",
|
"resolved": "https://registry.npm.taobao.org/pug-walk/download/pug-walk-1.1.8.tgz",
|
||||||
"integrity": "sha1-tAj2fyeRL4wh2i9FtyMMS9Kl6no=",
|
"integrity": "sha1-tAj2fyeRL4wh2i9FtyMMS9Kl6no=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"pump": {
|
"pump": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
@@ -12622,7 +12653,7 @@
|
|||||||
},
|
},
|
||||||
"right-align": {
|
"right-align": {
|
||||||
"version": "0.1.3",
|
"version": "0.1.3",
|
||||||
"resolved": "http://registry.npm.taobao.org/right-align/download/right-align-0.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
|
||||||
"integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
|
"integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -13685,7 +13716,7 @@
|
|||||||
},
|
},
|
||||||
"stylus": {
|
"stylus": {
|
||||||
"version": "0.54.7",
|
"version": "0.54.7",
|
||||||
"resolved": "https://registry.npm.taobao.org/stylus/download/stylus-0.54.7.tgz",
|
"resolved": "https://registry.npm.taobao.org/stylus/download/stylus-0.54.7.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstylus%2Fdownload%2Fstylus-0.54.7.tgz",
|
||||||
"integrity": "sha1-xs5Hk5Ze5Ti86+UPMVN7/ATYjNI=",
|
"integrity": "sha1-xs5Hk5Ze5Ti86+UPMVN7/ATYjNI=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -13702,7 +13733,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"debug": {
|
"debug": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
|
||||||
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
|
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -13726,7 +13757,7 @@
|
|||||||
},
|
},
|
||||||
"source-map": {
|
"source-map": {
|
||||||
"version": "0.7.3",
|
"version": "0.7.3",
|
||||||
"resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz",
|
||||||
"integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
|
"integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -13744,7 +13775,7 @@
|
|||||||
},
|
},
|
||||||
"svg-tags": {
|
"svg-tags": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@@ -14178,7 +14209,7 @@
|
|||||||
},
|
},
|
||||||
"uglify-to-browserify": {
|
"uglify-to-browserify": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "http://registry.npm.taobao.org/uglify-to-browserify/download/uglify-to-browserify-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
|
||||||
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -14723,7 +14754,7 @@
|
|||||||
},
|
},
|
||||||
"window-size": {
|
"window-size": {
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"resolved": "http://registry.npm.taobao.org/window-size/download/window-size-0.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
|
||||||
"integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
|
"integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
@@ -14741,14 +14772,14 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-3.3.0.tgz?cache=0&sync_timestamp=1583824513691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-3.3.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-3.3.0.tgz",
|
||||||
"integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
|
"integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"acorn-globals": {
|
"acorn-globals": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/acorn-globals/download/acorn-globals-3.1.0.tgz?cache=0&sync_timestamp=1583643398087&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn-globals%2Fdownload%2Facorn-globals-3.1.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/acorn-globals/download/acorn-globals-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn-globals%2Fdownload%2Facorn-globals-3.1.0.tgz",
|
||||||
"integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
|
"integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -14758,7 +14789,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "4.0.13",
|
"version": "4.0.13",
|
||||||
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz?cache=0&sync_timestamp=1583824513691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-4.0.13.tgz",
|
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz",
|
||||||
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
|
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
|
|||||||
+2
-2
@@ -48,7 +48,6 @@
|
|||||||
"vue": "^2.5.0"
|
"vue": "^2.5.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"date-fns": "^2.0.1",
|
|
||||||
"date-format-parse": "^0.2.5"
|
"date-format-parse": "^0.2.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -62,7 +61,7 @@
|
|||||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
|
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
|
||||||
"@vue/babel-preset-jsx": "^1.1.2",
|
"@vue/babel-preset-jsx": "^1.1.2",
|
||||||
"@vue/component-compiler-utils": "^3.0.0",
|
"@vue/component-compiler-utils": "^3.0.0",
|
||||||
"@vue/test-utils": "^1.0.0-beta.29",
|
"@vue/test-utils": "^1.1.1",
|
||||||
"acorn": "^7.0.0",
|
"acorn": "^7.0.0",
|
||||||
"autoprefixer": "^9.7.1",
|
"autoprefixer": "^9.7.1",
|
||||||
"babel-core": "^7.0.0-bridge.0",
|
"babel-core": "^7.0.0-bridge.0",
|
||||||
@@ -72,6 +71,7 @@
|
|||||||
"core-js": "^3.3.5",
|
"core-js": "^3.3.5",
|
||||||
"coveralls": "^3.0.7",
|
"coveralls": "^3.0.7",
|
||||||
"cross-env": "^6.0.3",
|
"cross-env": "^6.0.3",
|
||||||
|
"date-fns": "^2.16.1",
|
||||||
"eslint": "^6.2.2",
|
"eslint": "^6.2.2",
|
||||||
"eslint-config-airbnb-base": "^14.0.0",
|
"eslint-config-airbnb-base": "^14.0.0",
|
||||||
"eslint-config-prettier": "^6.1.0",
|
"eslint-config-prettier": "^6.1.0",
|
||||||
|
|||||||
+1
-1
@@ -5,7 +5,7 @@ import vue from 'rollup-plugin-vue';
|
|||||||
import { terser } from 'rollup-plugin-terser';
|
import { terser } from 'rollup-plugin-terser';
|
||||||
import pkg from './package.json';
|
import pkg from './package.json';
|
||||||
|
|
||||||
const external = id => /date-fns/.test(id);
|
const external = Object.keys(pkg.dependencies);
|
||||||
|
|
||||||
const input = 'src/index.js';
|
const input = 'src/index.js';
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,259 @@
|
|||||||
|
import {
|
||||||
|
getValidDate,
|
||||||
|
isValidDate,
|
||||||
|
createDate,
|
||||||
|
setMonth,
|
||||||
|
startOfYear,
|
||||||
|
startOfMonth,
|
||||||
|
startOfDay,
|
||||||
|
} from '../util/date';
|
||||||
|
import TableDate from './table-date';
|
||||||
|
import TableMonth from './table-month';
|
||||||
|
import TableYear from './table-year';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CalendarPanel',
|
||||||
|
inject: {
|
||||||
|
prefixClass: {
|
||||||
|
default: 'mx',
|
||||||
|
},
|
||||||
|
dispatchDatePicker: {
|
||||||
|
default: () => () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
value: {},
|
||||||
|
defaultValue: {
|
||||||
|
default() {
|
||||||
|
const date = new Date();
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
return date;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultPanel: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
disabledDate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'date',
|
||||||
|
},
|
||||||
|
getClasses: {
|
||||||
|
type: Function,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
showWeekNumber: {
|
||||||
|
type: Boolean,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
titleFormat: {
|
||||||
|
type: String,
|
||||||
|
default: 'YYYY-MM-DD',
|
||||||
|
},
|
||||||
|
calendar: Date,
|
||||||
|
// update date when select year or month
|
||||||
|
partialUpdate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const panels = ['date', 'month', 'year'];
|
||||||
|
const index = Math.max(panels.indexOf(this.type), panels.indexOf(this.defaultPanel));
|
||||||
|
const panel = index !== -1 ? panels[index] : 'date';
|
||||||
|
return {
|
||||||
|
panel,
|
||||||
|
innerCalendar: new Date(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
innerValue() {
|
||||||
|
const value = Array.isArray(this.value) ? this.value : [this.value];
|
||||||
|
const map = {
|
||||||
|
year: startOfYear,
|
||||||
|
month: startOfMonth,
|
||||||
|
date: startOfDay,
|
||||||
|
};
|
||||||
|
const start = map[this.type] || map.date;
|
||||||
|
return value.filter(isValidDate).map(v => start(v));
|
||||||
|
},
|
||||||
|
calendarYear() {
|
||||||
|
return this.innerCalendar.getFullYear();
|
||||||
|
},
|
||||||
|
calendarMonth() {
|
||||||
|
return this.innerCalendar.getMonth();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
immediate: true,
|
||||||
|
handler: 'initCalendar',
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
handler: 'initCalendar',
|
||||||
|
},
|
||||||
|
defaultValue: {
|
||||||
|
handler: 'initCalendar',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCalendar() {
|
||||||
|
let calendarDate = this.calendar;
|
||||||
|
if (!isValidDate(calendarDate)) {
|
||||||
|
const { length } = this.innerValue;
|
||||||
|
calendarDate = getValidDate(length > 0 ? this.innerValue[length - 1] : this.defaultValue);
|
||||||
|
}
|
||||||
|
this.innerCalendar = startOfMonth(calendarDate);
|
||||||
|
},
|
||||||
|
isDisabled(date) {
|
||||||
|
return this.disabledDate(new Date(date), this.innerValue);
|
||||||
|
},
|
||||||
|
emitDate(date, type) {
|
||||||
|
if (!this.isDisabled(date)) {
|
||||||
|
this.$emit('select', date, type, this.innerValue);
|
||||||
|
// someone need get the first selected date to set range value. (#429)
|
||||||
|
this.dispatchDatePicker('pick', date, type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleCalendarChange(calendar, type) {
|
||||||
|
const oldCalendar = new Date(this.innerCalendar);
|
||||||
|
this.innerCalendar = calendar;
|
||||||
|
this.$emit('update:calendar', calendar);
|
||||||
|
this.dispatchDatePicker('calendar-change', calendar, oldCalendar, type);
|
||||||
|
},
|
||||||
|
handelPanelChange(panel) {
|
||||||
|
this.panel = panel;
|
||||||
|
},
|
||||||
|
handleSelectYear(year) {
|
||||||
|
if (this.type === 'year') {
|
||||||
|
const date = this.getYearCellDate(year);
|
||||||
|
this.emitDate(date, 'year');
|
||||||
|
} else {
|
||||||
|
this.handleCalendarChange(createDate(year, this.calendarMonth), 'year');
|
||||||
|
this.handelPanelChange('month');
|
||||||
|
if (this.partialUpdate && this.innerValue.length === 1) {
|
||||||
|
const date = new Date(this.innerValue[0]);
|
||||||
|
date.setFullYear(year);
|
||||||
|
this.emitDate(date, 'year');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectMonth(month) {
|
||||||
|
if (this.type === 'month') {
|
||||||
|
const date = this.getMonthCellDate(month);
|
||||||
|
this.emitDate(date, 'month');
|
||||||
|
} else {
|
||||||
|
this.handleCalendarChange(createDate(this.calendarYear, month), 'month');
|
||||||
|
this.handelPanelChange('date');
|
||||||
|
if (this.partialUpdate && this.innerValue.length === 1) {
|
||||||
|
const date = new Date(this.innerValue[0]);
|
||||||
|
date.setFullYear(this.calendarYear);
|
||||||
|
this.emitDate(setMonth(date, month), 'month');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectDate(date) {
|
||||||
|
this.emitDate(date, this.type === 'week' ? 'week' : 'date');
|
||||||
|
},
|
||||||
|
getMonthCellDate(month) {
|
||||||
|
return createDate(this.calendarYear, month);
|
||||||
|
},
|
||||||
|
getYearCellDate(year) {
|
||||||
|
return createDate(year, 0);
|
||||||
|
},
|
||||||
|
getDateClasses(cellDate) {
|
||||||
|
const notCurrentMonth = cellDate.getMonth() !== this.calendarMonth;
|
||||||
|
const classes = [];
|
||||||
|
if (cellDate.getTime() === new Date().setHours(0, 0, 0, 0)) {
|
||||||
|
classes.push('today');
|
||||||
|
}
|
||||||
|
if (notCurrentMonth) {
|
||||||
|
classes.push('not-current-month');
|
||||||
|
}
|
||||||
|
const state = this.getStateClass(cellDate);
|
||||||
|
if (!(state === 'active' && notCurrentMonth)) {
|
||||||
|
classes.push(state);
|
||||||
|
}
|
||||||
|
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
||||||
|
},
|
||||||
|
getMonthClasses(month) {
|
||||||
|
if (this.type !== 'month') {
|
||||||
|
return this.calendarMonth === month ? 'active' : '';
|
||||||
|
}
|
||||||
|
const classes = [];
|
||||||
|
const cellDate = this.getMonthCellDate(month);
|
||||||
|
classes.push(this.getStateClass(cellDate));
|
||||||
|
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
||||||
|
},
|
||||||
|
getYearClasses(year) {
|
||||||
|
if (this.type !== 'year') {
|
||||||
|
return this.calendarYear === year ? 'active' : '';
|
||||||
|
}
|
||||||
|
const classes = [];
|
||||||
|
const cellDate = this.getYearCellDate(year);
|
||||||
|
classes.push(this.getStateClass(cellDate));
|
||||||
|
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
||||||
|
},
|
||||||
|
getStateClass(cellDate) {
|
||||||
|
if (this.isDisabled(cellDate)) {
|
||||||
|
return 'disabled';
|
||||||
|
}
|
||||||
|
if (this.innerValue.some(v => v.getTime() === cellDate.getTime())) {
|
||||||
|
return 'active';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getWeekState(row) {
|
||||||
|
if (this.type !== 'week') return '';
|
||||||
|
const start = row[0].getTime();
|
||||||
|
const end = row[6].getTime();
|
||||||
|
const active = this.innerValue.some(v => {
|
||||||
|
const time = v.getTime();
|
||||||
|
return time >= start && time <= end;
|
||||||
|
});
|
||||||
|
return active ? `${this.prefixClass}-active-week` : '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const { panel, innerCalendar } = this;
|
||||||
|
if (panel === 'year') {
|
||||||
|
return (
|
||||||
|
<TableYear
|
||||||
|
calendar={innerCalendar}
|
||||||
|
getCellClasses={this.getYearClasses}
|
||||||
|
onSelect={this.handleSelectYear}
|
||||||
|
onChangecalendar={this.handleCalendarChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (panel === 'month') {
|
||||||
|
return (
|
||||||
|
<TableMonth
|
||||||
|
calendar={innerCalendar}
|
||||||
|
getCellClasses={this.getMonthClasses}
|
||||||
|
onSelect={this.handleSelectMonth}
|
||||||
|
onChangepanel={this.handelPanelChange}
|
||||||
|
onChangecalendar={this.handleCalendarChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<TableDate
|
||||||
|
class={{ [`${this.prefixClass}-calendar-week-mode`]: this.type === 'week' }}
|
||||||
|
calendar={innerCalendar}
|
||||||
|
getCellClasses={this.getDateClasses}
|
||||||
|
getRowClasses={this.getWeekState}
|
||||||
|
titleFormat={this.titleFormat}
|
||||||
|
showWeekNumber={
|
||||||
|
typeof showWeekNumber === 'boolean' ? this.showWeekNumber : this.type === 'week'
|
||||||
|
}
|
||||||
|
onSelect={this.handleSelectDate}
|
||||||
|
onChangepanel={this.handelPanelChange}
|
||||||
|
onChangecalendar={this.handleCalendarChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -1,379 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
`${prefixClass}-calendar`,
|
|
||||||
`${prefixClass}-calendar-panel-${panel}`,
|
|
||||||
{ [`${prefixClass}-calendar-week-mode`]: type === 'week' },
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<div :class="`${prefixClass}-calendar-header`">
|
|
||||||
<button
|
|
||||||
v-show="showIconDoubleArrow"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-left`"
|
|
||||||
@click="handleIconDoubleLeftClick"
|
|
||||||
>
|
|
||||||
<i :class="`${prefixClass}-icon-double-left`"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-show="showIconArrow"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-left`"
|
|
||||||
@click="handleIconLeftClick"
|
|
||||||
>
|
|
||||||
<i :class="`${prefixClass}-icon-left`"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-show="showIconDoubleArrow"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-right`"
|
|
||||||
@click="handleIconDoubleRightClick"
|
|
||||||
>
|
|
||||||
<i :class="`${prefixClass}-icon-double-right`"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-show="showIconArrow"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-right`"
|
|
||||||
@click="handleIconRightClick"
|
|
||||||
>
|
|
||||||
<i :class="`${prefixClass}-icon-right`"></i>
|
|
||||||
</button>
|
|
||||||
<span :class="`${prefixClass}-calendar-header-label`">
|
|
||||||
<template v-if="panel === 'year'">
|
|
||||||
<span>{{ calendarDecade }}</span>
|
|
||||||
<span :class="`${prefixClass}-calendar-decade-separator`"></span>
|
|
||||||
<span>{{ calendarDecade + 9 }}</span>
|
|
||||||
</template>
|
|
||||||
<button
|
|
||||||
v-else-if="panel === 'month'"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text`"
|
|
||||||
@click="handelPanelChange('year')"
|
|
||||||
>
|
|
||||||
{{ calendarYear }}
|
|
||||||
</button>
|
|
||||||
<template v-else-if="panel === 'date'">
|
|
||||||
<button
|
|
||||||
v-for="item in dateHeader"
|
|
||||||
:key="item.panel"
|
|
||||||
type="button"
|
|
||||||
:class="
|
|
||||||
`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
|
|
||||||
"
|
|
||||||
@click="handelPanelChange(item.panel)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div :class="`${prefixClass}-calendar-content`">
|
|
||||||
<table-year
|
|
||||||
v-show="panel === 'year'"
|
|
||||||
:decade="calendarDecade"
|
|
||||||
:get-cell-classes="getYearClasses"
|
|
||||||
@select="handleSelectYear"
|
|
||||||
></table-year>
|
|
||||||
<table-month
|
|
||||||
v-if="type !== 'year'"
|
|
||||||
v-show="panel === 'month'"
|
|
||||||
:get-cell-classes="getMonthClasses"
|
|
||||||
@select="handleSelectMonth"
|
|
||||||
></table-month>
|
|
||||||
<table-date
|
|
||||||
v-if="type !== 'year' && type !== 'month'"
|
|
||||||
v-show="panel === 'date'"
|
|
||||||
:calendar-year="calendarYear"
|
|
||||||
:calendar-month="calendarMonth"
|
|
||||||
:title-format="titleFormat"
|
|
||||||
:show-week-number="typeof showWeekNumber === 'boolean' ? showWeekNumber : type === 'week'"
|
|
||||||
:get-cell-classes="getDateClasses"
|
|
||||||
:get-row-classes="getWeekState"
|
|
||||||
@select="handleSelectDate"
|
|
||||||
></table-date>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
subMonths,
|
|
||||||
addMonths,
|
|
||||||
subYears,
|
|
||||||
addYears,
|
|
||||||
setMonth,
|
|
||||||
setYear,
|
|
||||||
startOfYear,
|
|
||||||
startOfMonth,
|
|
||||||
startOfDay,
|
|
||||||
} from 'date-fns';
|
|
||||||
import { format } from 'date-format-parse';
|
|
||||||
import { getValidDate, isValidDate, createDate } from '../util/date';
|
|
||||||
import TableDate from './table-date';
|
|
||||||
import TableMonth from './table-month';
|
|
||||||
import TableYear from './table-year';
|
|
||||||
import { getLocaleFieldValue } from '../locale';
|
|
||||||
import emitter from '../mixin/emitter';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CalendarPanel',
|
|
||||||
components: {
|
|
||||||
TableDate,
|
|
||||||
TableMonth,
|
|
||||||
TableYear,
|
|
||||||
},
|
|
||||||
mixins: [emitter],
|
|
||||||
inject: {
|
|
||||||
translateFn: {
|
|
||||||
default: () => getLocaleFieldValue,
|
|
||||||
},
|
|
||||||
prefixClass: {
|
|
||||||
default: 'mx',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {},
|
|
||||||
defaultValue: {
|
|
||||||
default() {
|
|
||||||
const date = new Date();
|
|
||||||
date.setHours(0, 0, 0, 0);
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultPanel: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
disabledDate: {
|
|
||||||
type: Function,
|
|
||||||
default: () => false,
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'date',
|
|
||||||
},
|
|
||||||
getClasses: {
|
|
||||||
type: Function,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
showWeekNumber: {
|
|
||||||
type: Boolean,
|
|
||||||
default: undefined,
|
|
||||||
},
|
|
||||||
titleFormat: {
|
|
||||||
type: String,
|
|
||||||
default: 'YYYY-MM-DD',
|
|
||||||
},
|
|
||||||
calendar: Date,
|
|
||||||
// update date when select year or month
|
|
||||||
partialUpdate: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const panels = ['date', 'month', 'year'];
|
|
||||||
const index = Math.max(panels.indexOf(this.type), panels.indexOf(this.defaultPanel));
|
|
||||||
const panel = index !== -1 ? panels[index] : 'date';
|
|
||||||
return {
|
|
||||||
panel,
|
|
||||||
innerCalendar: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
innerValue() {
|
|
||||||
const value = Array.isArray(this.value) ? this.value : [this.value];
|
|
||||||
const map = {
|
|
||||||
year: startOfYear,
|
|
||||||
month: startOfMonth,
|
|
||||||
date: startOfDay,
|
|
||||||
};
|
|
||||||
const start = map[this.type] || map.date;
|
|
||||||
return value.filter(isValidDate).map(v => start(v));
|
|
||||||
},
|
|
||||||
calendarYear() {
|
|
||||||
return this.innerCalendar.getFullYear();
|
|
||||||
},
|
|
||||||
calendarMonth() {
|
|
||||||
return this.innerCalendar.getMonth();
|
|
||||||
},
|
|
||||||
calendarDecade() {
|
|
||||||
return Math.floor(this.calendarYear / 10) * 10;
|
|
||||||
},
|
|
||||||
showIconDoubleArrow() {
|
|
||||||
return this.panel === 'date' || this.panel === 'month' || this.panel === 'year';
|
|
||||||
},
|
|
||||||
showIconArrow() {
|
|
||||||
return this.panel === 'date';
|
|
||||||
},
|
|
||||||
dateHeader() {
|
|
||||||
const monthBeforeYear = this.translateFn('monthBeforeYear');
|
|
||||||
const yearFormat = this.translateFn('yearFormat');
|
|
||||||
const monthFormat = this.translateFn('monthFormat') || 'MMM';
|
|
||||||
const yearLabel = {
|
|
||||||
panel: 'year',
|
|
||||||
label: this.formatDate(this.innerCalendar, yearFormat),
|
|
||||||
};
|
|
||||||
const monthLabel = {
|
|
||||||
panel: 'month',
|
|
||||||
label: this.formatDate(this.innerCalendar, monthFormat),
|
|
||||||
};
|
|
||||||
return monthBeforeYear ? [monthLabel, yearLabel] : [yearLabel, monthLabel];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: {
|
|
||||||
immediate: true,
|
|
||||||
handler: 'initCalendar',
|
|
||||||
},
|
|
||||||
calendar: {
|
|
||||||
handler: 'initCalendar',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
handler: 'initCalendar',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
formatDate(date, fmt) {
|
|
||||||
return format(date, fmt, { locale: this.translateFn('formatLocale') });
|
|
||||||
},
|
|
||||||
initCalendar() {
|
|
||||||
let calendarDate = this.calendar;
|
|
||||||
if (!isValidDate(calendarDate)) {
|
|
||||||
const { length } = this.innerValue;
|
|
||||||
calendarDate = getValidDate(length > 0 ? this.innerValue[length - 1] : this.defaultValue);
|
|
||||||
}
|
|
||||||
this.innerCalendar = calendarDate;
|
|
||||||
},
|
|
||||||
isDisabled(date) {
|
|
||||||
return this.disabledDate(new Date(date), this.innerValue);
|
|
||||||
},
|
|
||||||
emitDate(date, type) {
|
|
||||||
if (!this.isDisabled(date)) {
|
|
||||||
this.$emit('select', date, type, this.innerValue);
|
|
||||||
// someone need get the first selected date to set range value. (#429)
|
|
||||||
this.dispatch('DatePicker', 'pick', date, type);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateCalendar(date, type) {
|
|
||||||
const oldValue = new Date(this.innerCalendar);
|
|
||||||
this.innerCalendar = date;
|
|
||||||
this.$emit('update:calendar', date);
|
|
||||||
this.dispatch('DatePicker', 'calendar-change', date, oldValue, type);
|
|
||||||
},
|
|
||||||
handelPanelChange(panel) {
|
|
||||||
this.panel = panel;
|
|
||||||
},
|
|
||||||
handleIconLeftClick() {
|
|
||||||
const nextCalendar = subMonths(this.innerCalendar, 1);
|
|
||||||
this.updateCalendar(nextCalendar, 'last-month');
|
|
||||||
},
|
|
||||||
handleIconRightClick() {
|
|
||||||
const nextCalendar = addMonths(this.innerCalendar, 1);
|
|
||||||
this.updateCalendar(nextCalendar, 'next-month');
|
|
||||||
},
|
|
||||||
handleIconDoubleLeftClick() {
|
|
||||||
const nextCalendar = subYears(this.innerCalendar, this.panel === 'year' ? 10 : 1);
|
|
||||||
this.updateCalendar(nextCalendar, this.panel === 'year' ? 'last-decade' : 'last-year');
|
|
||||||
},
|
|
||||||
handleIconDoubleRightClick() {
|
|
||||||
const nextCalendar = addYears(this.innerCalendar, this.panel === 'year' ? 10 : 1);
|
|
||||||
this.updateCalendar(nextCalendar, this.panel === 'year' ? 'next-decade' : 'next-year');
|
|
||||||
},
|
|
||||||
handleSelectYear(year) {
|
|
||||||
if (this.type === 'year') {
|
|
||||||
const date = this.getCellDate(year, 'year');
|
|
||||||
this.emitDate(date, 'year');
|
|
||||||
} else {
|
|
||||||
const nextCalendar = setYear(this.innerCalendar, year);
|
|
||||||
this.updateCalendar(nextCalendar, 'year');
|
|
||||||
this.handelPanelChange('month');
|
|
||||||
if (this.partialUpdate && this.innerValue.length === 1) {
|
|
||||||
const date = setYear(this.innerValue[0], year);
|
|
||||||
this.emitDate(date, 'year');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSelectMonth(month) {
|
|
||||||
if (this.type === 'month') {
|
|
||||||
const date = this.getCellDate(month, 'month');
|
|
||||||
this.emitDate(date, 'month');
|
|
||||||
} else {
|
|
||||||
const nextCalendar = setMonth(this.innerCalendar, month);
|
|
||||||
this.updateCalendar(nextCalendar, 'month');
|
|
||||||
this.handelPanelChange('date');
|
|
||||||
if (this.partialUpdate && this.innerValue.length === 1) {
|
|
||||||
const date = setMonth(setYear(this.innerValue[0], this.calendarYear), month);
|
|
||||||
this.emitDate(date, 'month');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSelectDate(day) {
|
|
||||||
const date = this.getCellDate(day, 'date');
|
|
||||||
this.emitDate(date, this.type === 'week' ? 'week' : 'date');
|
|
||||||
},
|
|
||||||
getCellDate(value, type) {
|
|
||||||
if (type === 'year') {
|
|
||||||
return createDate(value, 0);
|
|
||||||
}
|
|
||||||
if (type === 'month') {
|
|
||||||
return createDate(this.calendarYear, value);
|
|
||||||
}
|
|
||||||
return createDate(this.calendarYear, this.calendarMonth, value);
|
|
||||||
},
|
|
||||||
getDateClasses(day) {
|
|
||||||
const cellDate = this.getCellDate(day, 'date');
|
|
||||||
const notCurrentMonth = cellDate.getMonth() !== this.calendarMonth;
|
|
||||||
const classes = [];
|
|
||||||
if (cellDate.getTime() === new Date().setHours(0, 0, 0, 0)) {
|
|
||||||
classes.push('today');
|
|
||||||
}
|
|
||||||
if (notCurrentMonth) {
|
|
||||||
classes.push('not-current-month');
|
|
||||||
}
|
|
||||||
const state = this.getStateClass(cellDate);
|
|
||||||
if (!(state === 'active' && notCurrentMonth)) {
|
|
||||||
classes.push(state);
|
|
||||||
}
|
|
||||||
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
|
||||||
},
|
|
||||||
getMonthClasses(month) {
|
|
||||||
if (this.type !== 'month') {
|
|
||||||
return this.calendarMonth === month ? 'active' : '';
|
|
||||||
}
|
|
||||||
const classes = [];
|
|
||||||
const cellDate = this.getCellDate(month, 'month');
|
|
||||||
classes.push(this.getStateClass(cellDate));
|
|
||||||
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
|
||||||
},
|
|
||||||
getYearClasses(year) {
|
|
||||||
if (this.type !== 'year') {
|
|
||||||
return this.calendarYear === year ? 'active' : '';
|
|
||||||
}
|
|
||||||
const classes = [];
|
|
||||||
const cellDate = this.getCellDate(year, 'year');
|
|
||||||
classes.push(this.getStateClass(cellDate));
|
|
||||||
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
|
|
||||||
},
|
|
||||||
getStateClass(cellDate) {
|
|
||||||
if (this.isDisabled(cellDate)) {
|
|
||||||
return 'disabled';
|
|
||||||
}
|
|
||||||
if (this.innerValue.some(v => v.getTime() === cellDate.getTime())) {
|
|
||||||
return 'active';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getWeekState(row) {
|
|
||||||
if (this.type !== 'week') return '';
|
|
||||||
const start = this.getCellDate(row[0].day, 'date').getTime();
|
|
||||||
const end = this.getCellDate(row[6].day, 'date').getTime();
|
|
||||||
const active = this.innerValue.some(v => {
|
|
||||||
const time = v.getTime();
|
|
||||||
return time >= start && time <= end;
|
|
||||||
});
|
|
||||||
return active ? `${this.prefixClass}-active-week` : '';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
import { addMonths, subMonths, differenceInCalendarMonths } from 'date-fns';
|
|
||||||
import CalendarPanel from './calendar-panel';
|
import CalendarPanel from './calendar-panel';
|
||||||
import { getValidDate, isValidDate, isValidRangeDate } from '../util/date';
|
import { getValidDate, isValidDate, isValidRangeDate, startOfMonth } from '../util/date';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CalendarRange',
|
name: 'CalendarRange',
|
||||||
@@ -45,8 +44,10 @@ export default {
|
|||||||
this.innerValue = isValidRangeDate(this.value)
|
this.innerValue = isValidRangeDate(this.value)
|
||||||
? this.value
|
? this.value
|
||||||
: [new Date(NaN), new Date(NaN)];
|
: [new Date(NaN), new Date(NaN)];
|
||||||
this.calendars = this.innerValue.map((v, i) => getValidDate(v, this.defaultValues[i]));
|
const calendars = this.innerValue.map((v, i) =>
|
||||||
this.validateCalendars(1);
|
startOfMonth(getValidDate(v, this.defaultValues[i]))
|
||||||
|
);
|
||||||
|
this.updateCalendars(calendars);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -68,27 +69,25 @@ export default {
|
|||||||
this.$emit('select', dates, type);
|
this.$emit('select', dates, type);
|
||||||
},
|
},
|
||||||
updateStartCalendar(value) {
|
updateStartCalendar(value) {
|
||||||
this.calendars.splice(0, 1, value);
|
this.updateCalendars([value, this.calendars[1]], 1);
|
||||||
this.validateCalendars(1);
|
|
||||||
},
|
},
|
||||||
updateEndCalendar(value) {
|
updateEndCalendar(value) {
|
||||||
this.calendars.splice(1, 1, value);
|
this.updateCalendars([this.calendars[0], value], 0);
|
||||||
this.validateCalendars(0);
|
|
||||||
},
|
},
|
||||||
validateCalendars(index) {
|
updateCalendars(calendars, adjustIndex = 1) {
|
||||||
const gap = this.getCalendarGap();
|
const gap = this.getCalendarGap(calendars);
|
||||||
if (gap) {
|
if (gap) {
|
||||||
let calendar = this.calendars[index];
|
const calendar = new Date(calendars[adjustIndex]);
|
||||||
if (index === 0) {
|
calendar.setMonth(calendar.getMonth() + (adjustIndex === 0 ? -gap : gap));
|
||||||
calendar = subMonths(calendar, gap);
|
calendars[adjustIndex] = calendar;
|
||||||
} else {
|
|
||||||
calendar = addMonths(calendar, gap);
|
|
||||||
}
|
|
||||||
this.calendars.splice(index, 1, calendar);
|
|
||||||
}
|
}
|
||||||
|
this.calendars = calendars;
|
||||||
},
|
},
|
||||||
getCalendarGap() {
|
getCalendarGap(calendars) {
|
||||||
const diff = differenceInCalendarMonths(this.calendars[1], this.calendars[0]);
|
const [calendarLeft, calendarRight] = calendars;
|
||||||
|
const yearDiff = calendarRight.getFullYear() - calendarLeft.getFullYear();
|
||||||
|
const monthDiff = calendarRight.getMonth() - calendarLeft.getMonth();
|
||||||
|
const diff = yearDiff * 12 + monthDiff;
|
||||||
const min = this.calendarMinDiff;
|
const min = this.calendarMinDiff;
|
||||||
const max = this.calendarMaxDiff;
|
const max = this.calendarMaxDiff;
|
||||||
if (diff < min) {
|
if (diff < min) {
|
||||||
|
|||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<i :class="`${prefixClass}-icon-${type}`"></i>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
inject: {
|
||||||
|
prefixClass: {
|
||||||
|
default: 'mx',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
+89
-70
@@ -1,4 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-date`">
|
||||||
|
<div :class="`${prefixClass}-calendar-header`">
|
||||||
|
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
|
||||||
|
<icon-button type="left" @click="handleIconLeftClick"></icon-button>
|
||||||
|
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
|
||||||
|
<icon-button type="right" @click="handleIconRightClick"></icon-button>
|
||||||
|
<span :class="`${prefixClass}-calendar-header-label`">
|
||||||
|
<button
|
||||||
|
v-for="item in yearMonth"
|
||||||
|
:key="item.panel"
|
||||||
|
type="button"
|
||||||
|
:class="
|
||||||
|
`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
|
||||||
|
"
|
||||||
|
@click="handlePanelChange(item.panel)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :class="`${prefixClass}-calendar-content`">
|
||||||
<table :class="`${prefixClass}-table ${prefixClass}-table-date`">
|
<table :class="`${prefixClass}-table ${prefixClass}-table-date`">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -13,34 +34,38 @@
|
|||||||
:class="[`${prefixClass}-date-row`, getRowClasses(row)]"
|
:class="[`${prefixClass}-date-row`, getRowClasses(row)]"
|
||||||
>
|
>
|
||||||
<td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
|
<td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
|
||||||
{{ getWeekNumber(row[0].day) }}
|
{{ getWeekNumber(row[0]) }}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
v-for="(cell, j) in row"
|
v-for="(cell, j) in row"
|
||||||
:key="j"
|
:key="j"
|
||||||
:data-day="cell.day"
|
:data-date="cell.getTime()"
|
||||||
class="cell"
|
class="cell"
|
||||||
:class="getCellClasses(cell.day)"
|
:class="getCellClasses(cell)"
|
||||||
:title="getCellTitle(cell.day)"
|
:title="getCellTitle(cell)"
|
||||||
>
|
>
|
||||||
<div>{{ cell.text }}</div>
|
<div>{{ cell.getDate() }}</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getWeek, format } from 'date-format-parse';
|
import { getWeek, format } from 'date-format-parse';
|
||||||
|
import IconButton from './icon-button';
|
||||||
import { chunk } from '../util/base';
|
import { chunk } from '../util/base';
|
||||||
import { createDate } from '../util/date';
|
import { createDate, getCalendar } from '../util/date';
|
||||||
import { getLocaleFieldValue } from '../locale';
|
import { getLocale } from '../locale';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TableDate',
|
name: 'TableDate',
|
||||||
|
components: { IconButton },
|
||||||
inject: {
|
inject: {
|
||||||
translateFn: {
|
getLocale: {
|
||||||
default: () => getLocaleFieldValue,
|
default: () => getLocale,
|
||||||
},
|
},
|
||||||
getWeek: {
|
getWeek: {
|
||||||
default: () => getWeek,
|
default: () => getWeek,
|
||||||
@@ -50,17 +75,9 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
calendarYear: {
|
calendar: {
|
||||||
type: Number,
|
type: Date,
|
||||||
default() {
|
default: () => new Date(),
|
||||||
return new Date().getFullYear();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
calendarMonth: {
|
|
||||||
type: Number,
|
|
||||||
default() {
|
|
||||||
return new Date().getMonth();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
showWeekNumber: {
|
showWeekNumber: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -72,83 +89,85 @@ export default {
|
|||||||
},
|
},
|
||||||
getRowClasses: {
|
getRowClasses: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default() {
|
default: () => [],
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
getCellClasses: {
|
getCellClasses: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default() {
|
default: () => [],
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
firstDayOfWeek() {
|
firstDayOfWeek() {
|
||||||
return this.translateFn('formatLocale.firstDayOfWeek') || 0;
|
return this.getLocale().formatLocale.firstDayOfWeek || 0;
|
||||||
|
},
|
||||||
|
yearMonth() {
|
||||||
|
const { yearFormat, monthBeforeYear, monthFormat = 'MMM' } = this.getLocale();
|
||||||
|
const yearLabel = {
|
||||||
|
panel: 'year',
|
||||||
|
label: this.formatDate(this.calendar, yearFormat),
|
||||||
|
};
|
||||||
|
const monthLabel = {
|
||||||
|
panel: 'month',
|
||||||
|
label: this.formatDate(this.calendar, monthFormat),
|
||||||
|
};
|
||||||
|
return monthBeforeYear ? [monthLabel, yearLabel] : [yearLabel, monthLabel];
|
||||||
},
|
},
|
||||||
days() {
|
days() {
|
||||||
const days = this.translateFn('days') || this.translateFn('formatLocale.weekdaysMin');
|
const locale = this.getLocale();
|
||||||
|
const days = locale.days || locale.formatLocale.weekdaysMin;
|
||||||
return days.concat(days).slice(this.firstDayOfWeek, this.firstDayOfWeek + 7);
|
return days.concat(days).slice(this.firstDayOfWeek, this.firstDayOfWeek + 7);
|
||||||
},
|
},
|
||||||
dates() {
|
dates() {
|
||||||
const arr = [];
|
const year = this.calendar.getFullYear();
|
||||||
const { firstDayOfWeek } = this;
|
const month = this.calendar.getMonth();
|
||||||
const year = this.calendarYear;
|
const arr = getCalendar({
|
||||||
const month = this.calendarMonth;
|
firstDayOfWeek: this.firstDayOfWeek,
|
||||||
|
year,
|
||||||
// change to the last day of the last month
|
month,
|
||||||
const calendar = createDate(year, month, 0);
|
});
|
||||||
const lastDayInLastMonth = calendar.getDate();
|
|
||||||
// getDay() 0 is Sunday, 1 is Monday
|
|
||||||
const firstDayInLastMonth =
|
|
||||||
lastDayInLastMonth - ((calendar.getDay() + 7 - firstDayOfWeek) % 7);
|
|
||||||
for (let i = firstDayInLastMonth; i <= lastDayInLastMonth; i++) {
|
|
||||||
const day = i - lastDayInLastMonth;
|
|
||||||
arr.push({ day, text: i });
|
|
||||||
}
|
|
||||||
// change to the last day of the current month
|
|
||||||
calendar.setMonth(month + 1, 0);
|
|
||||||
const lastDayInCurrentMonth = calendar.getDate();
|
|
||||||
for (let i = 1; i <= lastDayInCurrentMonth; i++) {
|
|
||||||
arr.push({ day: i, text: i });
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastMonthLength = lastDayInLastMonth - firstDayInLastMonth + 1;
|
|
||||||
const nextMonthLength = 6 * 7 - lastMonthLength - lastDayInCurrentMonth;
|
|
||||||
for (let i = 1; i <= nextMonthLength; i++) {
|
|
||||||
arr.push({ day: lastDayInCurrentMonth + i, text: i });
|
|
||||||
}
|
|
||||||
|
|
||||||
return chunk(arr, 7);
|
return chunk(arr, 7);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatDate(date, fmt) {
|
getNextCalendar(diffMonth) {
|
||||||
return format(date, fmt, { locale: this.translateFn('formatLocale') });
|
const year = this.calendar.getFullYear();
|
||||||
|
const month = this.calendar.getMonth();
|
||||||
|
return createDate(year, month + diffMonth);
|
||||||
|
},
|
||||||
|
handleIconLeftClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-month');
|
||||||
|
},
|
||||||
|
handleIconRightClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(1), 'next-month');
|
||||||
|
},
|
||||||
|
handleIconDoubleLeftClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(-12), 'last-year');
|
||||||
|
},
|
||||||
|
handleIconDoubleRightClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(12), 'next-year');
|
||||||
|
},
|
||||||
|
handlePanelChange(panel) {
|
||||||
|
this.$emit('changepanel', panel);
|
||||||
},
|
},
|
||||||
handleCellClick(evt) {
|
handleCellClick(evt) {
|
||||||
let { target } = evt;
|
let { target } = evt;
|
||||||
if (target.tagName === 'DIV') {
|
if (target.tagName === 'DIV') {
|
||||||
target = target.parentNode;
|
target = target.parentNode;
|
||||||
}
|
}
|
||||||
const day = target.getAttribute('data-day');
|
const date = target.getAttribute('data-date');
|
||||||
if (day) {
|
if (date) {
|
||||||
this.$emit('select', parseInt(day, 10));
|
this.$emit('select', new Date(parseInt(date, 10)));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getCellTitle(day) {
|
formatDate(date, fmt) {
|
||||||
const year = this.calendarYear;
|
return format(date, fmt, { locale: this.getLocale().formatLocale });
|
||||||
const month = this.calendarMonth;
|
},
|
||||||
|
getCellTitle(date) {
|
||||||
const fmt = this.titleFormat;
|
const fmt = this.titleFormat;
|
||||||
const date = createDate(year, month, day);
|
|
||||||
return this.formatDate(date, fmt);
|
return this.formatDate(date, fmt);
|
||||||
},
|
},
|
||||||
getWeekNumber(day) {
|
getWeekNumber(date) {
|
||||||
const year = this.calendarYear;
|
return this.getWeek(date, this.getLocale().formatLocale);
|
||||||
const month = this.calendarMonth;
|
|
||||||
const date = createDate(year, month, day);
|
|
||||||
return this.getWeek(date, this.translateFn('formatLocale'));
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,4 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-month`">
|
||||||
|
<div :class="`${prefixClass}-calendar-header`">
|
||||||
|
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
|
||||||
|
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
|
||||||
|
<span :class="`${prefixClass}-calendar-header-label`">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
:class="`${prefixClass}-btn ${prefixClass}-btn-text`"
|
||||||
|
@click="handlePanelChange"
|
||||||
|
>
|
||||||
|
{{ calendarYear }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :class="`${prefixClass}-calendar-content`">
|
||||||
<table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
|
<table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
|
||||||
<tr v-for="(row, i) in months" :key="i">
|
<tr v-for="(row, i) in months" :key="i">
|
||||||
<td
|
<td
|
||||||
@@ -12,34 +27,44 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { chunk } from '../util/base';
|
import { chunk } from '../util/base';
|
||||||
import { getLocaleFieldValue } from '../locale';
|
import IconButton from './icon-button';
|
||||||
|
import { getLocale } from '../locale';
|
||||||
|
import { createDate } from '../util/date';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TableMonth',
|
name: 'TableMonth',
|
||||||
|
components: { IconButton },
|
||||||
inject: {
|
inject: {
|
||||||
translateFn: {
|
getLocale: {
|
||||||
default: () => getLocaleFieldValue,
|
default: () => getLocale,
|
||||||
},
|
},
|
||||||
prefixClass: {
|
prefixClass: {
|
||||||
default: 'mx',
|
default: 'mx',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
calendar: {
|
||||||
|
type: Date,
|
||||||
|
default: () => new Date(),
|
||||||
|
},
|
||||||
getCellClasses: {
|
getCellClasses: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {
|
default: () => [],
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
calendarYear() {
|
||||||
|
return this.calendar.getFullYear();
|
||||||
|
},
|
||||||
months() {
|
months() {
|
||||||
const monthsLocale =
|
const locale = this.getLocale();
|
||||||
this.translateFn('months') || this.translateFn('formatLocale.monthsShort');
|
const monthsLocale = locale.months || locale.formatLocale.monthsShort;
|
||||||
const months = monthsLocale.map((text, month) => {
|
const months = monthsLocale.map((text, month) => {
|
||||||
return { text, month };
|
return { text, month };
|
||||||
});
|
});
|
||||||
@@ -47,6 +72,20 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getNextCalendar(diffYear) {
|
||||||
|
const year = this.calendar.getFullYear();
|
||||||
|
const month = this.calendar.getMonth();
|
||||||
|
return createDate(year + diffYear, month);
|
||||||
|
},
|
||||||
|
handleIconDoubleLeftClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-year');
|
||||||
|
},
|
||||||
|
handleIconDoubleRightClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(1), 'next-year');
|
||||||
|
},
|
||||||
|
handlePanelChange() {
|
||||||
|
this.$emit('changepanel', 'year');
|
||||||
|
},
|
||||||
handleClick(evt) {
|
handleClick(evt) {
|
||||||
let { target } = evt;
|
let { target } = evt;
|
||||||
if (target.tagName === 'DIV') {
|
if (target.tagName === 'DIV') {
|
||||||
|
|||||||
@@ -1,4 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-year`">
|
||||||
|
<div :class="`${prefixClass}-calendar-header`">
|
||||||
|
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
|
||||||
|
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
|
||||||
|
<span :class="`${prefixClass}-calendar-header-label`">
|
||||||
|
<span>{{ firstYear }}</span>
|
||||||
|
<span :class="`${prefixClass}-calendar-decade-separator`"></span>
|
||||||
|
<span>{{ lastYear }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :class="`${prefixClass}-calendar-content`">
|
||||||
<table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
|
<table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
|
||||||
<tr v-for="(row, i) in years" :key="i">
|
<tr v-for="(row, i) in years" :key="i">
|
||||||
<td
|
<td
|
||||||
@@ -12,38 +23,62 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import IconButton from './icon-button';
|
||||||
import { chunk } from '../util/base';
|
import { chunk } from '../util/base';
|
||||||
|
import { createDate } from '../util/date';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TableYear',
|
name: 'TableYear',
|
||||||
|
components: { IconButton },
|
||||||
inject: {
|
inject: {
|
||||||
prefixClass: {
|
prefixClass: {
|
||||||
default: 'mx',
|
default: 'mx',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
decade: Number,
|
calendar: {
|
||||||
|
type: Date,
|
||||||
|
default: () => new Date(),
|
||||||
|
},
|
||||||
getCellClasses: {
|
getCellClasses: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {
|
default: () => [],
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
years() {
|
years() {
|
||||||
const firstYear = this.decade;
|
const firstYear = Math.floor(this.calendar.getFullYear() / 10) * 10;
|
||||||
const years = [];
|
const years = [];
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
years.push(firstYear + i);
|
years.push(firstYear + i);
|
||||||
}
|
}
|
||||||
return chunk(years, 2);
|
return chunk(years, 2);
|
||||||
},
|
},
|
||||||
|
firstYear() {
|
||||||
|
return this.years[0][0];
|
||||||
|
},
|
||||||
|
lastYear() {
|
||||||
|
const last = arr => arr[arr.length - 1];
|
||||||
|
return last(last(this.years));
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getNextCalendar(diffYear) {
|
||||||
|
const year = this.calendar.getFullYear();
|
||||||
|
const month = this.calendar.getMonth();
|
||||||
|
return createDate(year + diffYear, month);
|
||||||
|
},
|
||||||
|
handleIconDoubleLeftClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(-10), 'last-decade');
|
||||||
|
},
|
||||||
|
handleIconDoubleRightClick() {
|
||||||
|
this.$emit('changecalendar', this.getNextCalendar(10), 'next-decade');
|
||||||
|
},
|
||||||
handleClick(evt) {
|
handleClick(evt) {
|
||||||
let { target } = evt;
|
let { target } = evt;
|
||||||
if (target.tagName === 'DIV') {
|
if (target.tagName === 'DIV') {
|
||||||
|
|||||||
@@ -1,126 +1,7 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="{
|
|
||||||
[`${prefixClass}-datepicker`]: true,
|
|
||||||
[`${prefixClass}-datepicker-range`]: range,
|
|
||||||
[`${prefixClass}-datepicker-inline`]: inline,
|
|
||||||
disabled: disabled,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div v-if="!inline" :class="`${prefixClass}-input-wrapper`" @mousedown="openPopup">
|
|
||||||
<slot
|
|
||||||
name="input"
|
|
||||||
:props="{
|
|
||||||
name: 'date',
|
|
||||||
type: 'text',
|
|
||||||
autocomplete: 'off',
|
|
||||||
value: text,
|
|
||||||
class: inputClass,
|
|
||||||
readonly: !editable,
|
|
||||||
disabled,
|
|
||||||
placeholder,
|
|
||||||
...inputAttr,
|
|
||||||
}"
|
|
||||||
:events="{
|
|
||||||
keydown: handleInputKeydown,
|
|
||||||
focus: handleInputFocus,
|
|
||||||
blur: handleInputBlur,
|
|
||||||
input: handleInputInput,
|
|
||||||
change: handleInputChange,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
ref="input"
|
|
||||||
v-bind="{
|
|
||||||
name: 'date',
|
|
||||||
type: 'text',
|
|
||||||
autocomplete: 'off',
|
|
||||||
value: text,
|
|
||||||
class: inputClass,
|
|
||||||
readonly: !editable,
|
|
||||||
disabled,
|
|
||||||
placeholder,
|
|
||||||
...inputAttr,
|
|
||||||
}"
|
|
||||||
v-on="{
|
|
||||||
keydown: handleInputKeydown,
|
|
||||||
focus: handleInputFocus,
|
|
||||||
blur: handleInputBlur,
|
|
||||||
input: handleInputInput,
|
|
||||||
change: handleInputChange,
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
<i v-if="showClearIcon" :class="`${prefixClass}-icon-clear`" @mousedown.stop="handleClear">
|
|
||||||
<slot name="icon-clear">
|
|
||||||
<icon-close></icon-close>
|
|
||||||
</slot>
|
|
||||||
</i>
|
|
||||||
<i :class="`${prefixClass}-icon-calendar`">
|
|
||||||
<slot name="icon-calendar">
|
|
||||||
<icon-calendar></icon-calendar>
|
|
||||||
</slot>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
<Popup
|
|
||||||
ref="popup"
|
|
||||||
:class="popupClass"
|
|
||||||
:style="popupStyle"
|
|
||||||
:inline="inline"
|
|
||||||
:visible="popupVisible"
|
|
||||||
:append-to-body="appendToBody"
|
|
||||||
@clickoutside="handleClickOutSide"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="hasSlot('sidebar') || shortcuts.length"
|
|
||||||
:class="`${prefixClass}-datepicker-sidebar`"
|
|
||||||
>
|
|
||||||
<slot name="sidebar" :value="currentValue" :emit="emitValue"></slot>
|
|
||||||
<button
|
|
||||||
v-for="(v, i) in shortcuts"
|
|
||||||
:key="i"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-shortcut`"
|
|
||||||
@click="handleSelectShortcut(v)"
|
|
||||||
>
|
|
||||||
{{ v.text }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div :class="`${prefixClass}-datepicker-content`">
|
|
||||||
<div v-if="hasSlot('header')" :class="`${prefixClass}-datepicker-header`">
|
|
||||||
<slot name="header" :value="currentValue" :emit="emitValue"></slot>
|
|
||||||
</div>
|
|
||||||
<div :class="`${prefixClass}-datepicker-body`">
|
|
||||||
<slot name="content" :value="currentValue" :emit="emitValue">
|
|
||||||
<component
|
|
||||||
:is="currentComponent"
|
|
||||||
ref="picker"
|
|
||||||
v-bind="currentComponentProps"
|
|
||||||
@select="handleSelectDate"
|
|
||||||
></component>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
<div v-if="hasSlot('footer') || confirm" :class="`${prefixClass}-datepicker-footer`">
|
|
||||||
<slot name="footer" :value="currentValue" :emit="emitValue"></slot>
|
|
||||||
<button
|
|
||||||
v-if="confirm"
|
|
||||||
type="button"
|
|
||||||
:class="`${prefixClass}-btn ${prefixClass}-datepicker-btn-confirm`"
|
|
||||||
@click="handleConfirmDate"
|
|
||||||
>
|
|
||||||
{{ confirmText }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Popup>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { parse, format, getWeek } from 'date-format-parse';
|
import { parse, format, getWeek } from 'date-format-parse';
|
||||||
import { isValidDate, isValidRangeDate, isValidDates } from './util/date';
|
import { isValidDate, isValidRangeDate, isValidDates } from './util/date';
|
||||||
import { pick, isObject, mergeDeep } from './util/base';
|
import { pick, isObject, mergeDeep } from './util/base';
|
||||||
import { getLocale, getLocaleFieldValue } from './locale';
|
import { getLocale } from './locale';
|
||||||
import Popup from './popup';
|
import Popup from './popup';
|
||||||
import IconCalendar from './icon/icon-calendar';
|
import IconCalendar from './icon/icon-calendar';
|
||||||
import IconClose from './icon/icon-close';
|
import IconClose from './icon/icon-close';
|
||||||
@@ -144,16 +25,13 @@ const componentRangeMap = {
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DatePicker',
|
name: 'DatePicker',
|
||||||
components: {
|
|
||||||
IconCalendar,
|
|
||||||
IconClose,
|
|
||||||
Popup,
|
|
||||||
},
|
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
translateFn: this.getLocaleFieldValue,
|
// make locale reactive
|
||||||
|
getLocale: () => this.locale,
|
||||||
getWeek: this.getWeek,
|
getWeek: this.getWeek,
|
||||||
prefixClass: this.prefixClass,
|
prefixClass: this.prefixClass,
|
||||||
|
dispatchDatePicker: this.$emit.bind(this),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -169,17 +47,6 @@ export default {
|
|||||||
},
|
},
|
||||||
format: {
|
format: {
|
||||||
type: String,
|
type: String,
|
||||||
default() {
|
|
||||||
const map = {
|
|
||||||
date: 'YYYY-MM-DD',
|
|
||||||
datetime: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
year: 'YYYY',
|
|
||||||
month: 'YYYY-MM',
|
|
||||||
time: 'HH:mm:ss',
|
|
||||||
week: 'w',
|
|
||||||
};
|
|
||||||
return map[this.type] || map.date;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
formatter: {
|
formatter: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@@ -194,9 +61,6 @@ export default {
|
|||||||
},
|
},
|
||||||
rangeSeparator: {
|
rangeSeparator: {
|
||||||
type: String,
|
type: String,
|
||||||
default() {
|
|
||||||
return this.multiple ? ',' : ' ~ ';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
lang: {
|
lang: {
|
||||||
type: [String, Object],
|
type: [String, Object],
|
||||||
@@ -221,16 +85,10 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'mx',
|
default: 'mx',
|
||||||
},
|
},
|
||||||
inputClass: {
|
inputClass: {},
|
||||||
default() {
|
|
||||||
return `${this.prefixClass}-input`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
inputAttr: {
|
inputAttr: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default: () => ({}),
|
||||||
return {};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
appendToBody: {
|
appendToBody: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -243,9 +101,7 @@ export default {
|
|||||||
popupClass: {},
|
popupClass: {},
|
||||||
popupStyle: {
|
popupStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => ({}),
|
||||||
return {};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
inline: {
|
inline: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -286,20 +142,23 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentComponent() {
|
|
||||||
const map = this.range ? componentRangeMap : componentMap;
|
|
||||||
return map[this.type] || map.default;
|
|
||||||
},
|
|
||||||
currentComponentProps() {
|
|
||||||
const props = {
|
|
||||||
...pick(this, Object.keys(this.currentComponent.props)),
|
|
||||||
value: this.currentValue,
|
|
||||||
};
|
|
||||||
return props;
|
|
||||||
},
|
|
||||||
popupVisible() {
|
popupVisible() {
|
||||||
return !this.disabled && (typeof this.open === 'boolean' ? this.open : this.defaultOpen);
|
return !this.disabled && (typeof this.open === 'boolean' ? this.open : this.defaultOpen);
|
||||||
},
|
},
|
||||||
|
innerRangeSeparator() {
|
||||||
|
return this.rangeSeparator || (this.multiple ? ',' : ' ~ ');
|
||||||
|
},
|
||||||
|
innerFormat() {
|
||||||
|
const map = {
|
||||||
|
date: 'YYYY-MM-DD',
|
||||||
|
datetime: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
year: 'YYYY',
|
||||||
|
month: 'YYYY-MM',
|
||||||
|
time: 'HH:mm:ss',
|
||||||
|
week: 'w',
|
||||||
|
};
|
||||||
|
return this.format || map[this.type] || map.date;
|
||||||
|
},
|
||||||
innerValue() {
|
innerValue() {
|
||||||
let { value } = this;
|
let { value } = this;
|
||||||
if (this.validMultipleType) {
|
if (this.validMultipleType) {
|
||||||
@@ -310,7 +169,7 @@ export default {
|
|||||||
value = Array.isArray(value) ? value.slice(0, 2) : [null, null];
|
value = Array.isArray(value) ? value.slice(0, 2) : [null, null];
|
||||||
return value.map(this.value2date);
|
return value.map(this.value2date);
|
||||||
}
|
}
|
||||||
return this.value2date(this.value);
|
return this.value2date(value);
|
||||||
},
|
},
|
||||||
text() {
|
text() {
|
||||||
if (this.userInput !== null) {
|
if (this.userInput !== null) {
|
||||||
@@ -322,11 +181,10 @@ export default {
|
|||||||
if (!this.isValidValue(this.innerValue)) {
|
if (!this.isValidValue(this.innerValue)) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
const fmt = this.format;
|
|
||||||
if (Array.isArray(this.innerValue)) {
|
if (Array.isArray(this.innerValue)) {
|
||||||
return this.innerValue.map(v => this.formatDate(v, fmt)).join(this.rangeSeparator);
|
return this.innerValue.map(v => this.formatDate(v)).join(this.innerRangeSeparator);
|
||||||
}
|
}
|
||||||
return this.formatDate(this.innerValue, fmt);
|
return this.formatDate(this.innerValue);
|
||||||
},
|
},
|
||||||
showClearIcon() {
|
showClearIcon() {
|
||||||
return !this.disabled && this.clearable && this.text;
|
return !this.disabled && this.clearable && this.text;
|
||||||
@@ -377,6 +235,7 @@ export default {
|
|||||||
return getWeek(date, options);
|
return getWeek(date, options);
|
||||||
},
|
},
|
||||||
parseDate(value, fmt) {
|
parseDate(value, fmt) {
|
||||||
|
fmt = fmt || this.innerFormat;
|
||||||
if (typeof this.getFormatter('parse') === 'function') {
|
if (typeof this.getFormatter('parse') === 'function') {
|
||||||
return this.getFormatter('parse')(value, fmt);
|
return this.getFormatter('parse')(value, fmt);
|
||||||
}
|
}
|
||||||
@@ -384,6 +243,7 @@ export default {
|
|||||||
return parse(value, fmt, { locale: this.locale.formatLocale, backupDate });
|
return parse(value, fmt, { locale: this.locale.formatLocale, backupDate });
|
||||||
},
|
},
|
||||||
formatDate(date, fmt) {
|
formatDate(date, fmt) {
|
||||||
|
fmt = fmt || this.innerFormat;
|
||||||
if (typeof this.getFormatter('stringify') === 'function') {
|
if (typeof this.getFormatter('stringify') === 'function') {
|
||||||
return this.getFormatter('stringify')(date, fmt);
|
return this.getFormatter('stringify')(date, fmt);
|
||||||
}
|
}
|
||||||
@@ -397,7 +257,7 @@ export default {
|
|||||||
case 'timestamp':
|
case 'timestamp':
|
||||||
return typeof value === 'number' ? new Date(value) : new Date(NaN);
|
return typeof value === 'number' ? new Date(value) : new Date(NaN);
|
||||||
case 'format':
|
case 'format':
|
||||||
return typeof value === 'string' ? this.parseDate(value, this.format) : new Date(NaN);
|
return typeof value === 'string' ? this.parseDate(value) : new Date(NaN);
|
||||||
default:
|
default:
|
||||||
return typeof value === 'string' ? this.parseDate(value, this.valueType) : new Date(NaN);
|
return typeof value === 'string' ? this.parseDate(value, this.valueType) : new Date(NaN);
|
||||||
}
|
}
|
||||||
@@ -411,7 +271,7 @@ export default {
|
|||||||
case 'timestamp':
|
case 'timestamp':
|
||||||
return date.getTime();
|
return date.getTime();
|
||||||
case 'format':
|
case 'format':
|
||||||
return this.formatDate(date, this.format);
|
return this.formatDate(date);
|
||||||
default:
|
default:
|
||||||
return this.formatDate(date, this.valueType);
|
return this.formatDate(date, this.valueType);
|
||||||
}
|
}
|
||||||
@@ -471,7 +331,8 @@ export default {
|
|||||||
this.emitValue(val, this.validMultipleType ? `multiple-${type}` : type);
|
this.emitValue(val, this.validMultipleType ? `multiple-${type}` : type);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleClear() {
|
handleClear(evt) {
|
||||||
|
evt.stopPropagation();
|
||||||
this.emitValue(this.range ? [null, null] : null);
|
this.emitValue(this.range ? [null, null] : null);
|
||||||
this.$emit('clear');
|
this.$emit('clear');
|
||||||
},
|
},
|
||||||
@@ -479,7 +340,9 @@ export default {
|
|||||||
const value = this.emitValue(this.currentValue);
|
const value = this.emitValue(this.currentValue);
|
||||||
this.$emit('confirm', value);
|
this.$emit('confirm', value);
|
||||||
},
|
},
|
||||||
handleSelectShortcut(item) {
|
handleSelectShortcut(evt) {
|
||||||
|
const index = evt.currentTarget.getAttribute('data-index');
|
||||||
|
const item = this.shortcuts[parseInt(index, 10)];
|
||||||
if (isObject(item) && typeof item.onClick === 'function') {
|
if (isObject(item) && typeof item.onClick === 'function') {
|
||||||
const date = item.onClick(this);
|
const date = item.onClick(this);
|
||||||
if (date) {
|
if (date) {
|
||||||
@@ -520,17 +383,17 @@ export default {
|
|||||||
}
|
}
|
||||||
let date;
|
let date;
|
||||||
if (this.validMultipleType) {
|
if (this.validMultipleType) {
|
||||||
date = text.split(this.rangeSeparator).map(v => this.parseDate(v.trim(), this.format));
|
date = text.split(this.innerRangeSeparator).map(v => this.parseDate(v.trim()));
|
||||||
} else if (this.range) {
|
} else if (this.range) {
|
||||||
let arr = text.split(this.rangeSeparator);
|
let arr = text.split(this.innerRangeSeparator);
|
||||||
if (arr.length !== 2) {
|
if (arr.length !== 2) {
|
||||||
// Maybe the separator during the day is the same as the separator for the date
|
// Maybe the separator during the day is the same as the separator for the date
|
||||||
// eg: 2019-10-09-2020-01-02
|
// eg: 2019-10-09-2020-01-02
|
||||||
arr = text.split(this.rangeSeparator.trim());
|
arr = text.split(this.innerRangeSeparator.trim());
|
||||||
}
|
}
|
||||||
date = arr.map(v => this.parseDate(v.trim(), this.format));
|
date = arr.map(v => this.parseDate(v.trim()));
|
||||||
} else {
|
} else {
|
||||||
date = this.parseDate(text, this.format);
|
date = this.parseDate(text);
|
||||||
}
|
}
|
||||||
if (this.isValidValueAndNotDisabled(date)) {
|
if (this.isValidValueAndNotDisabled(date)) {
|
||||||
this.emitValue(date);
|
this.emitValue(date);
|
||||||
@@ -562,9 +425,167 @@ export default {
|
|||||||
hasSlot(name) {
|
hasSlot(name) {
|
||||||
return !!(this.$slots[name] || this.$scopedSlots[name]);
|
return !!(this.$slots[name] || this.$scopedSlots[name]);
|
||||||
},
|
},
|
||||||
getLocaleFieldValue(path) {
|
renderSlot(name, fallback, props) {
|
||||||
return getLocaleFieldValue(path, this.locale);
|
const slotFn = this.$scopedSlots[name];
|
||||||
|
if (slotFn) {
|
||||||
|
return slotFn(props) || fallback;
|
||||||
|
}
|
||||||
|
return this.$slots[name] || fallback;
|
||||||
},
|
},
|
||||||
|
renderInput() {
|
||||||
|
const { prefixClass } = this;
|
||||||
|
const props = {
|
||||||
|
name: 'date',
|
||||||
|
type: 'text',
|
||||||
|
autocomplete: 'off',
|
||||||
|
value: this.text,
|
||||||
|
class: this.inputClass || `${this.prefixClass}-input`,
|
||||||
|
readonly: !this.editable,
|
||||||
|
disabled: this.disabled,
|
||||||
|
placeholder: this.placeholder,
|
||||||
|
...this.inputAttr,
|
||||||
|
};
|
||||||
|
const { value, ...attrs } = props;
|
||||||
|
const events = {
|
||||||
|
keydown: this.handleInputKeydown,
|
||||||
|
focus: this.handleInputFocus,
|
||||||
|
blur: this.handleInputBlur,
|
||||||
|
input: this.handleInputInput,
|
||||||
|
change: this.handleInputChange,
|
||||||
|
};
|
||||||
|
const input = this.renderSlot(
|
||||||
|
'input',
|
||||||
|
<input value={value} {...{ attrs, on: events }} ref="input" />,
|
||||||
|
{
|
||||||
|
props,
|
||||||
|
events,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div class={`${prefixClass}-input-wrapper`} onMousedown={this.openPopup}>
|
||||||
|
{input}
|
||||||
|
{this.showClearIcon ? (
|
||||||
|
<i class={`${prefixClass}-icon-clear`} onMousedown={this.handleClear}>
|
||||||
|
{this.renderSlot('icon-clear', <IconClose />)}
|
||||||
|
</i>
|
||||||
|
) : null}
|
||||||
|
<i class={`${prefixClass}-icon-calendar`}>
|
||||||
|
{this.renderSlot('icon-calendar', <IconCalendar />)}
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
renderContent() {
|
||||||
|
const map = this.range ? componentRangeMap : componentMap;
|
||||||
|
const Component = map[this.type] || map.default;
|
||||||
|
const props = {
|
||||||
|
...pick(this.$props, Object.keys(Component.props)),
|
||||||
|
value: this.currentValue,
|
||||||
|
};
|
||||||
|
const content = (
|
||||||
|
<Component {...{ props, on: { select: this.handleSelectDate }, ref: 'picker' }} />
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div class={`${this.prefixClass}-datepicker-body`}>
|
||||||
|
{this.renderSlot('content', content, {
|
||||||
|
value: this.currentValue,
|
||||||
|
emit: this.handleSelectDate,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
renderSidebar() {
|
||||||
|
const { prefixClass } = this;
|
||||||
|
return (
|
||||||
|
<div class={`${prefixClass}-datepicker-sidebar`}>
|
||||||
|
{this.renderSlot('sidebar', null, {
|
||||||
|
value: this.currentValue,
|
||||||
|
emit: this.handleSelectDate,
|
||||||
|
})}
|
||||||
|
{this.shortcuts.map((v, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
data-index={i}
|
||||||
|
type="button"
|
||||||
|
class={`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-shortcut`}
|
||||||
|
onClick={this.handleSelectShortcut}
|
||||||
|
>
|
||||||
|
{v.text}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
renderHeader() {
|
||||||
|
return (
|
||||||
|
<div class={`${this.prefixClass}-datepicker-header`}>
|
||||||
|
{this.renderSlot('header', null, {
|
||||||
|
value: this.currentValue,
|
||||||
|
emit: this.handleSelectDate,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
renderFooter() {
|
||||||
|
const { prefixClass } = this;
|
||||||
|
return (
|
||||||
|
<div class={`${prefixClass}-datepicker-footer`}>
|
||||||
|
{this.renderSlot('footer', null, {
|
||||||
|
value: this.currentValue,
|
||||||
|
emit: this.handleSelectDate,
|
||||||
|
})}
|
||||||
|
{this.confirm ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class={`${prefixClass}-btn ${prefixClass}-datepicker-btn-confirm`}
|
||||||
|
onClick={this.handleConfirmDate}
|
||||||
|
>
|
||||||
|
{this.confirmText}
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const { prefixClass, inline, disabled } = this;
|
||||||
|
const sidedar = this.hasSlot('sidebar') || this.shortcuts.length ? this.renderSidebar() : null;
|
||||||
|
const content = (
|
||||||
|
<div class={`${prefixClass}-datepicker-content`}>
|
||||||
|
{this.hasSlot('header') ? this.renderHeader() : null}
|
||||||
|
{this.renderContent()}
|
||||||
|
{this.hasSlot('footer') || this.confirm ? this.renderFooter() : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={{
|
||||||
|
[`${prefixClass}-datepicker`]: true,
|
||||||
|
[`${prefixClass}-datepicker-range`]: this.range,
|
||||||
|
[`${prefixClass}-datepicker-inline`]: inline,
|
||||||
|
disabled,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!inline ? this.renderInput() : null}
|
||||||
|
{!inline ? (
|
||||||
|
<Popup
|
||||||
|
ref="popup"
|
||||||
|
class={this.popupClass}
|
||||||
|
style={this.popupStyle}
|
||||||
|
visible={this.popupVisible}
|
||||||
|
appendToBody={this.appendToBody}
|
||||||
|
onClickoutside={this.handleClickOutSide}
|
||||||
|
>
|
||||||
|
{sidedar}
|
||||||
|
{content}
|
||||||
|
</Popup>
|
||||||
|
) : (
|
||||||
|
<div class={`${prefixClass}-datepicker-main`}>
|
||||||
|
{sidedar}
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import CalendarPanel from '../calendar/calendar-panel';
|
import CalendarPanel from '../calendar/calendar-panel';
|
||||||
import TimePanel from '../time/time-panel.vue';
|
import TimePanel from '../time/time-panel';
|
||||||
import { assignTime, getValidDate } from '../util/date';
|
import { assignTime, getValidDate } from '../util/date';
|
||||||
import { pick } from '../util/base';
|
import { pick } from '../util/base';
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@ export default {
|
|||||||
render() {
|
render() {
|
||||||
const calendarProps = {
|
const calendarProps = {
|
||||||
props: {
|
props: {
|
||||||
...pick(this, Object.keys(CalendarPanel.props)),
|
...pick(this.$props, Object.keys(CalendarPanel.props)),
|
||||||
type: 'date',
|
type: 'date',
|
||||||
value: this.currentValue,
|
value: this.currentValue,
|
||||||
},
|
},
|
||||||
@@ -74,13 +74,13 @@ export default {
|
|||||||
};
|
};
|
||||||
const timeProps = {
|
const timeProps = {
|
||||||
props: {
|
props: {
|
||||||
...pick(this, Object.keys(TimePanel.props)),
|
...pick(this.$props, Object.keys(TimePanel.props)),
|
||||||
showTimeHeader: true,
|
showTimeHeader: true,
|
||||||
value: this.currentValue,
|
value: this.currentValue,
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
select: this.emitDate,
|
select: this.emitDate,
|
||||||
'title-click': this.closeTimePanel,
|
clicktitle: this.closeTimePanel,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
render() {
|
render() {
|
||||||
const calendarProps = {
|
const calendarProps = {
|
||||||
props: {
|
props: {
|
||||||
...pick(this, Object.keys(CalendarRange.props)),
|
...pick(this.$props, Object.keys(CalendarRange.props)),
|
||||||
type: 'date',
|
type: 'date',
|
||||||
value: this.currentValue,
|
value: this.currentValue,
|
||||||
},
|
},
|
||||||
@@ -81,13 +81,13 @@ export default {
|
|||||||
};
|
};
|
||||||
const timeProps = {
|
const timeProps = {
|
||||||
props: {
|
props: {
|
||||||
...pick(this, Object.keys(TimeRange.props)),
|
...pick(this.$props, Object.keys(TimeRange.props)),
|
||||||
value: this.currentValue,
|
value: this.currentValue,
|
||||||
showTimeHeader: true,
|
showTimeHeader: true,
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
select: this.emitDate,
|
select: this.emitDate,
|
||||||
'title-click': this.closeTimePanel,
|
clicktitle: this.closeTimePanel,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">
|
||||||
<path
|
<path
|
||||||
d="M940.218182 107.054545h-209.454546V46.545455h-65.163636v60.50909H363.054545V46.545455H297.890909v60.50909H83.781818c-18.618182 0-32.581818 13.963636-32.581818 32.581819v805.236363c0 18.618182 13.963636 32.581818 32.581818 32.581818h861.090909c18.618182 0 32.581818-13.963636 32.581818-32.581818V139.636364c-4.654545-18.618182-18.618182-32.581818-37.236363-32.581819zM297.890909 172.218182V232.727273h65.163636V172.218182h307.2V232.727273h65.163637V172.218182h176.872727v204.8H116.363636V172.218182h181.527273zM116.363636 912.290909V442.181818h795.927273v470.109091H116.363636z"
|
d="M940.218182 107.054545h-209.454546V46.545455h-65.163636v60.50909H363.054545V46.545455H297.890909v60.50909H83.781818c-18.618182 0-32.581818 13.963636-32.581818 32.581819v805.236363c0 18.618182 13.963636 32.581818 32.581818 32.581818h861.090909c18.618182 0 32.581818-13.963636 32.581818-32.581818V139.636364c-4.654545-18.618182-18.618182-32.581818-37.236363-32.581819zM297.890909 172.218182V232.727273h65.163636V172.218182h307.2V232.727273h65.163637V172.218182h176.872727v204.8H116.363636V172.218182h181.527273zM116.363636 912.290909V442.181818h795.927273v470.109091H116.363636z"
|
||||||
></path>
|
></path>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">
|
||||||
<path
|
<path
|
||||||
d="M810.005333 274.005333l-237.994667 237.994667 237.994667 237.994667-60.010667 60.010667-237.994667-237.994667-237.994667 237.994667-60.010667-60.010667 237.994667-237.994667-237.994667-237.994667 60.010667-60.010667 237.994667 237.994667 237.994667-237.994667z"
|
d="M810.005333 274.005333l-237.994667 237.994667 237.994667 237.994667-60.010667 60.010667-237.994667-237.994667-237.994667 237.994667-60.010667-60.010667 237.994667-237.994667-237.994667-237.994667 60.010667-60.010667 237.994667 237.994667 237.994667-237.994667z"
|
||||||
></path>
|
></path>
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
/* istanbul ignore file */
|
/* istanbul ignore file */
|
||||||
import DatePicker from './date-picker.vue';
|
import DatePicker from './date-picker';
|
||||||
import CalendarPanel from './calendar/calendar-panel';
|
import CalendarPanel from './calendar/calendar-panel';
|
||||||
import CalendarRange from './calendar/calendar-range';
|
import CalendarRange from './calendar/calendar-range';
|
||||||
import TimePanel from './time/time-panel';
|
import TimePanel from './time/time-panel';
|
||||||
|
|||||||
@@ -27,26 +27,3 @@ export function locale(name, object, isLocal) {
|
|||||||
export function getLocale(name) {
|
export function getLocale(name) {
|
||||||
return locale(name, null, true);
|
return locale(name, null, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* get locale field value
|
|
||||||
* @param {string} field field eg: 'formatLocale.shortMonth'
|
|
||||||
* @param {object} lang locale object
|
|
||||||
*/
|
|
||||||
export function getLocaleFieldValue(field, lang) {
|
|
||||||
const arr = (field || '').split('.');
|
|
||||||
let current = lang || getLocale();
|
|
||||||
let value;
|
|
||||||
for (let i = 0, len = arr.length; i < len; i++) {
|
|
||||||
const prop = arr[i];
|
|
||||||
value = current[prop];
|
|
||||||
if (i === len - 1) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (!value) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
current = value;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
export default {
|
|
||||||
methods: {
|
|
||||||
dispatch(componentName, ...params) {
|
|
||||||
let parent = this.$parent || this.$root;
|
|
||||||
let { name } = parent.$options;
|
|
||||||
|
|
||||||
while (parent && (!name || name !== componentName)) {
|
|
||||||
parent = parent.$parent;
|
|
||||||
|
|
||||||
if (parent) {
|
|
||||||
name = parent.$options.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (parent) {
|
|
||||||
parent.$emit(...params);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,3 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<transition :name="`${prefixClass}-zoom-in-down`">
|
||||||
|
<div
|
||||||
|
v-if="visible"
|
||||||
|
:class="`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`"
|
||||||
|
:style="{ top, left, position: 'absolute' }"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
import { rafThrottle } from './util/throttle';
|
import { rafThrottle } from './util/throttle';
|
||||||
import { getPopupElementSize, getRelativePosition, getScrollParent } from './util/dom';
|
import { getPopupElementSize, getRelativePosition, getScrollParent } from './util/dom';
|
||||||
|
|
||||||
@@ -17,10 +30,6 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
inline: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -41,9 +50,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.inline) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.appendToBody) {
|
if (this.appendToBody) {
|
||||||
document.body.appendChild(this.$el);
|
document.body.appendChild(this.$el);
|
||||||
}
|
}
|
||||||
@@ -59,9 +65,6 @@ export default {
|
|||||||
window.addEventListener('resize', this._displayPopup);
|
window.addEventListener('resize', this._displayPopup);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.inline) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.appendToBody && this.$el.parentNode) {
|
if (this.appendToBody && this.$el.parentNode) {
|
||||||
this.$el.parentNode.removeChild(this.$el);
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
}
|
}
|
||||||
@@ -81,7 +84,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
displayPopup() {
|
displayPopup() {
|
||||||
if (this.inline || !this.visible) return;
|
if (!this.visible) return;
|
||||||
const popup = this.$el;
|
const popup = this.$el;
|
||||||
const relativeElement = this.$parent.$el;
|
const relativeElement = this.$parent.$el;
|
||||||
const { appendToBody } = this;
|
const { appendToBody } = this;
|
||||||
@@ -94,23 +97,5 @@ export default {
|
|||||||
this.top = top;
|
this.top = top;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render() {
|
|
||||||
const { prefixClass } = this;
|
|
||||||
|
|
||||||
if (this.inline) {
|
|
||||||
return <div class={`${prefixClass}-datepicker-main`}>{this.$slots.default}</div>;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<transition name={`${prefixClass}-zoom-in-down`}>
|
|
||||||
{this.visible && (
|
|
||||||
<div
|
|
||||||
class={`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`}
|
|
||||||
style={{ top: this.top, left: this.left, position: 'absolute' }}
|
|
||||||
>
|
|
||||||
{this.$slots.default}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</transition>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
</script>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
import { format } from 'date-format-parse';
|
import { format } from 'date-format-parse';
|
||||||
import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
|
import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
|
||||||
import { getScrollParent } from '../util/dom';
|
import { getScrollParent } from '../util/dom';
|
||||||
import { getLocaleFieldValue } from '../locale';
|
import { getLocale } from '../locale';
|
||||||
|
|
||||||
function parseOption(time = '') {
|
function parseOption(time = '') {
|
||||||
const values = time.split(':');
|
const values = time.split(':');
|
||||||
@@ -40,8 +40,8 @@ export default {
|
|||||||
name: 'ListOptions',
|
name: 'ListOptions',
|
||||||
components: { ScrollbarVertical },
|
components: { ScrollbarVertical },
|
||||||
inject: {
|
inject: {
|
||||||
translateFn: {
|
getLocale: {
|
||||||
default: () => getLocaleFieldValue,
|
default: () => getLocale,
|
||||||
},
|
},
|
||||||
prefixClass: {
|
prefixClass: {
|
||||||
default: 'mx',
|
default: 'mx',
|
||||||
@@ -99,7 +99,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatDate(date, fmt) {
|
formatDate(date, fmt) {
|
||||||
return format(date, fmt, { locale: this.translateFn('formatLocale') });
|
return format(date, fmt, { locale: this.getLocale().formatLocale });
|
||||||
},
|
},
|
||||||
scrollToSelected() {
|
scrollToSelected() {
|
||||||
const element = this.$el.querySelector('.active');
|
const element = this.$el.querySelector('.active');
|
||||||
|
|||||||
@@ -41,14 +41,14 @@ import { format } from 'date-format-parse';
|
|||||||
import { getValidDate } from '../util/date';
|
import { getValidDate } from '../util/date';
|
||||||
import ListColumns from './list-columns';
|
import ListColumns from './list-columns';
|
||||||
import ListOptions from './list-options';
|
import ListOptions from './list-options';
|
||||||
import { getLocaleFieldValue } from '../locale';
|
import { getLocale } from '../locale';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TimePanel',
|
name: 'TimePanel',
|
||||||
components: { ListColumns, ListOptions },
|
components: { ListColumns, ListOptions },
|
||||||
inject: {
|
inject: {
|
||||||
translateFn: {
|
getLocale: {
|
||||||
default: () => getLocaleFieldValue,
|
default: () => getLocale,
|
||||||
},
|
},
|
||||||
prefixClass: {
|
prefixClass: {
|
||||||
default: 'mx',
|
default: 'mx',
|
||||||
@@ -149,7 +149,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatDate(date, fmt) {
|
formatDate(date, fmt) {
|
||||||
return format(date, fmt, { locale: this.translateFn('formatLocale') });
|
return format(date, fmt, { locale: this.getLocale().formatLocale });
|
||||||
},
|
},
|
||||||
isDisabled(date) {
|
isDisabled(date) {
|
||||||
return this.disabledTime(new Date(date));
|
return this.disabledTime(new Date(date));
|
||||||
@@ -161,7 +161,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleClickTitle() {
|
handleClickTitle() {
|
||||||
this.$emit('title-click');
|
this.$emit('clicktitle');
|
||||||
},
|
},
|
||||||
getClasses(value) {
|
getClasses(value) {
|
||||||
const cellDate = new Date(value);
|
const cellDate = new Date(value);
|
||||||
|
|||||||
@@ -30,6 +30,61 @@ export function getValidDate(value, ...backup) {
|
|||||||
return new Date();
|
return new Date();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function startOfYear(value) {
|
||||||
|
const date = new Date(value);
|
||||||
|
date.setMonth(0, 1);
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function startOfMonth(value) {
|
||||||
|
const date = new Date(value);
|
||||||
|
date.setDate(1);
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function startOfDay(value) {
|
||||||
|
const date = new Date(value);
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCalendar({ firstDayOfWeek, year, month }) {
|
||||||
|
const arr = [];
|
||||||
|
// change to the last day of the last month
|
||||||
|
const calendar = createDate(year, month, 0);
|
||||||
|
const lastDayInLastMonth = calendar.getDate();
|
||||||
|
// getDay() 0 is Sunday, 1 is Monday
|
||||||
|
const firstDayInLastMonth = lastDayInLastMonth - ((calendar.getDay() + 7 - firstDayOfWeek) % 7);
|
||||||
|
for (let i = firstDayInLastMonth; i <= lastDayInLastMonth; i++) {
|
||||||
|
arr.push(createDate(year, month, i - lastDayInLastMonth));
|
||||||
|
}
|
||||||
|
// change to the last day of the current month
|
||||||
|
calendar.setMonth(month + 1, 0);
|
||||||
|
const lastDayInCurrentMonth = calendar.getDate();
|
||||||
|
for (let i = 1; i <= lastDayInCurrentMonth; i++) {
|
||||||
|
arr.push(createDate(year, month, i));
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastMonthLength = lastDayInLastMonth - firstDayInLastMonth + 1;
|
||||||
|
const nextMonthLength = 6 * 7 - lastMonthLength - lastDayInCurrentMonth;
|
||||||
|
for (let i = 1; i <= nextMonthLength; i++) {
|
||||||
|
arr.push(createDate(year, month, lastDayInCurrentMonth + i));
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setMonth(dirtyDate, dirtyMonth) {
|
||||||
|
const date = new Date(dirtyDate);
|
||||||
|
const month = Number(dirtyMonth);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const daysInMonth = createDate(year, month + 1, 0).getDate();
|
||||||
|
const day = date.getDate();
|
||||||
|
date.setMonth(month, Math.min(day, daysInMonth));
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
export function assignTime(target, source) {
|
export function assignTime(target, source) {
|
||||||
const date = new Date(target);
|
const date = new Date(target);
|
||||||
const time = new Date(source);
|
const time = new Date(source);
|
||||||
|
|||||||
Reference in New Issue
Block a user