From bd8b34b42784c9f8265b83067bfd8a7bd457d306 Mon Sep 17 00:00:00 2001 From: PennySuu <1196086847@qq.com> Date: Fri, 20 May 2022 16:53:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20datepicker=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=9A=E9=87=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sparta/components/date-picker/src/index.vue | 7 +--- .../components/date-picker/src/pane-day.vue | 2 +- .../date-picker/disabledDate.spec.js | 41 ++++++++++++++----- 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/sparta/components/date-picker/src/index.vue b/sparta/components/date-picker/src/index.vue index 58bfcbc8..ac2e653a 100644 --- a/sparta/components/date-picker/src/index.vue +++ b/sparta/components/date-picker/src/index.vue @@ -482,7 +482,6 @@ export default { hourEnd: '23', minuteEnd: '59', secondEnd: '59', - calDayEnd: '', calMonthEnd: '', calYearEnd: '', visiblePaneDayEnd: true, @@ -537,8 +536,7 @@ export default { this.modelStart = displayValue[0] this.modelEnd = displayValue[1] this.rangeDateList = [...displayValue] - this._calDateStart() - this._calDateEnd() + this._setDefaultRange() return } // 普通类型 @@ -548,6 +546,7 @@ export default { displayValue ) { this.model = displayValue + this._setDefault() return } // 其它 @@ -762,7 +761,6 @@ export default { this.dayEnd = '' this.monthEnd = '' this.yearEnd = '' - this.calDayEnd = new Date().getDate() this.calMonthEnd = new Date().getMonth() + 1 // 结束默认比开始多一个月 this.calYearEnd = new Date().getFullYear() const { hour, minute, second } = this.formatDefaultTime(1) @@ -872,7 +870,6 @@ export default { _setCalValuesEnd() { this.calYearEnd = this.yearEnd this.calMonthEnd = this.monthEnd - this.calDayEnd = this.dayEnd }, /** diff --git a/sparta/components/date-picker/src/pane-day.vue b/sparta/components/date-picker/src/pane-day.vue index f263cbe1..6568e2ab 100644 --- a/sparta/components/date-picker/src/pane-day.vue +++ b/sparta/components/date-picker/src/pane-day.vue @@ -295,7 +295,7 @@ export default { !item.nextMonth, 'is--disabled': item.disabled, 'is--enabled': !item.disabled, - 'is--checked': checkedDayList.includes(currentDate) && !item.lastMonth && !item.nextMonth, + 'is--checked': !item.disabled && checkedDayList.includes(currentDate) && !item.lastMonth && !item.nextMonth, 'is--ranging': this.type !== 'daterange' || checkedDayList.length < 2 ? false : currentTime < format.modifyDate(checkedDayList[1]).getTime() && currentTime > format.modifyDate(checkedDayList[0]).getTime() && !item.lastMonth && !item.nextMonth, diff --git a/test/unit/specs/components/date-picker/disabledDate.spec.js b/test/unit/specs/components/date-picker/disabledDate.spec.js index 42232505..a1feccbd 100644 --- a/test/unit/specs/components/date-picker/disabledDate.spec.js +++ b/test/unit/specs/components/date-picker/disabledDate.spec.js @@ -11,7 +11,7 @@ describe('date-picker', () => { const wrapper = mount({ data() { return { - time: '', + time: TODAY + ONE_DAY, defaultTime: '10:00:00', showTime: true, } @@ -21,7 +21,7 @@ describe('date-picker', () => { disabledDate(date) { const dateTime = date.getTime() - return dateTime > TODAY + ONE_DAY * 61 || dateTime < TODAY + ONE_DAY * 1 + return dateTime > TODAY + ONE_DAY * 61 || dateTime < TODAY + ONE_DAY }, }, template: ` @@ -68,12 +68,22 @@ describe('date-picker', () => { }) describe('prop: value', () => { + describe('设置默认值为合法值：D + 1', () => { + it('应选中，展示高亮样式', async () => { + await wrapper.find('.sp-date-picker-content').trigger('click') + expect(wrapper.find('.sp-date-picker-pane-day__cell.is--checked').exists()).to.be.true + }) + }) describe('设置为disabled-date范围内的值', () => { it('应支持展示', async () => { - await wrapper.setData({ time: TODAY }) - expect(wrapper.find('.sp-input__inner').element.value).to.equal(format.formatDate(TODAY, 'yyyy-MM-dd hh:mm:ss')) - await wrapper.setData({ time: TODAY + 60 * 60 * 100}) - expect(wrapper.find('.sp-input__inner').element.value).to.equal(format.formatDate(TODAY + 60 * 60 * 100, 'yyyy-MM-dd hh:mm:ss')) + await wrapper.setData({ time: TODAY - ONE_DAY }) + expect(wrapper.find('.sp-input__inner').element.value).to.equal(format.formatDate(TODAY - ONE_DAY, 'yyyy-MM-dd hh:mm:ss')) + await wrapper.setData({ time: TODAY - ONE_DAY * 2}) + expect(wrapper.find('.sp-input__inner').element.value).to.equal(format.formatDate(TODAY - ONE_DAY * 2, 'yyyy-MM-dd hh:mm:ss')) + }) + it('应重置面板样式', async () => { + await wrapper.find('.sp-date-picker-content').trigger('click') + expect(wrapper.find('.sp-date-picker-pane-day__cell.is--checked').exists()).to.be.false }) }) describe('设置为非法日期', () => { @@ -89,13 +99,13 @@ describe('date-picker', () => { const wrapperRange = mount({ data() { return { - time1: [], + time1: [TODAY + ONE_DAY, TODAY + ONE_DAY * 2], } }, methods: { disabledDate(date) { const dateTime = date.getTime() - return dateTime > TODAY + ONE_DAY * 61 || dateTime < TODAY + ONE_DAY * 1 + return dateTime > TODAY + ONE_DAY * 61 || dateTime < TODAY + ONE_DAY }, }, template: ` @@ -123,11 +133,20 @@ describe('date-picker', () => { describe('prop: type = daterange', () => { describe('不可选择的日期', () => { describe('prop: value', () => { + describe('设置默认值为合法值：[D + 1, D + 2]', () => { + it('应选中，展示高亮样式', async () => { + expect(wrapperRange.findAll('.sp-date-picker-pane-day__cell.is--checked').length).to.be.equal(2) + }) + }) describe('设置为disabled-date范围内的值', () => { it('应支持展示', async () => { - await wrapperRange.setData({ time1: [TODAY, TODAY + 60 * 60 * 100] }) - expect(wrapperRange.find('.sp-date-picker-range-start .sp-input__inner').element.value).to.equal(format.formatDate(TODAY, 'yyyy-MM-dd hh:mm:ss')) - expect(wrapperRange.find('.sp-date-picker-range-end .sp-input__inner').element.value).to.equal(format.formatDate(TODAY + 60 * 60 * 100, 'yyyy-MM-dd hh:mm:ss')) + await wrapperRange.setData({ time1: [TODAY - 60 * 60 * 100, TODAY] }) + expect(wrapperRange.find('.sp-date-picker-range-start .sp-input__inner').element.value).to.equal(format.formatDate(TODAY - 60 * 60 * 100, 'yyyy-MM-dd hh:mm:ss')) + expect(wrapperRange.find('.sp-date-picker-range-end .sp-input__inner').element.value).to.equal(format.formatDate(TODAY, 'yyyy-MM-dd hh:mm:ss')) + }) + it('应重置面板样式', async () => { + await wrapperRange.find('.sp-date-picker-content').trigger('click') + expect(wrapperRange.find('.sp-date-picker-pane-day__cell.is--checked').exists()).to.be.false }) }) describe('设置为非法日期', () => { From ae931b9144cd6fd2e09fc6be93f81b24531235c6 Mon Sep 17 00:00:00 2001 From: PennySuu <1196086847@qq.com> Date: Thu, 21 Jul 2022 11:46:31 +0800 Subject: [PATCH 2/2] =?UTF-8?q?style:=20=F0=9F=92=84=20button=E7=BB=84?= =?UTF-8?q?=E4=BB=B6loading=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/button.md | 5 ++++- sparta/components/button/src/button.vue | 22 +++++++++++++++++----- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/doc/button.md b/doc/button.md index cec96abf..4977479a 100644 --- a/doc/button.md +++ b/doc/button.md @@ -73,7 +73,10 @@ ```vue ``` diff --git a/sparta/components/button/src/button.vue b/sparta/components/button/src/button.vue index 53facd0a..d2b1ca7d 100755 --- a/sparta/components/button/src/button.vue +++ b/sparta/components/button/src/button.vue @@ -157,6 +157,11 @@ export default { &:focus { background-color: $button-plain-fill--focus; } + &.is--loading { + background-color: transparent; + color: $button-text-color--disabled; + border-color: $button-plain-border--disabled; + } } &.is--disabled { @@ -184,7 +189,6 @@ export default { &.is--loading { position: relative; pointer-events: none; - color: rgba(#fff, 0.5); &::before { pointer-events: none; @@ -198,10 +202,12 @@ export default { } } - &.is--plain.is--loading { - position: relative; - pointer-events: none; - color: rgba($color-primary, 0.5); + &--default { + &.is--loading { + color: $button-color--disabled; + background-color: $button-fill--disabled; + border-color: $button-fill--disabled; + } } &--primary { @@ -230,6 +236,11 @@ export default { background-color: $button-primary-fill--focus; border-color: $button-primary-border--focus; } + &.is--loading { + background-color: $button-primary-fill; + border-color: $button-primary-border; + color: rgba(#fff, 0.5); + } } &--medium { @include button-size($button-medium-font-size, $button-medium-min-width, $button-medium-height); @@ -271,6 +282,7 @@ export default { } &.is--disabled, + &.is--loading, &.is--disabled:hover, &.is--disabled:focus { border-color: transparent;