- |
+ |
diff --git a/packages/components/_private/date-panel/src/DatePanel.tsx b/packages/components/_private/date-panel/src/DatePanel.tsx
index d091d1f4a..51110870f 100644
--- a/packages/components/_private/date-panel/src/DatePanel.tsx
+++ b/packages/components/_private/date-panel/src/DatePanel.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
const dateConfig = useDateConfig()
const { activeType, setActiveType } = useActiveType(props)
const { activeDate, setActiveDate, startActiveDate } = useActiveDate(props, dateConfig, activeType)
- const { maxRowIndex, maxCellIndex } = useMaxIndex(activeType, dateConfig, activeDate)
+ const { maxRowIndex, maxCellIndex } = useMaxIndex(activeType)
provide(datePanelToken, {
props,
diff --git a/packages/components/_private/date-panel/src/composables/useMaxIndex.ts b/packages/components/_private/date-panel/src/composables/useMaxIndex.ts
index e0b5181ab..e963c924d 100644
--- a/packages/components/_private/date-panel/src/composables/useMaxIndex.ts
+++ b/packages/components/_private/date-panel/src/composables/useMaxIndex.ts
@@ -6,7 +6,6 @@
*/
import type { DatePanelType } from '../types'
-import type { DateConfig } from '@idux/components/config'
import type { ComputedRef } from 'vue'
import { computed } from 'vue'
@@ -16,31 +15,13 @@ export interface MaxIndexContext {
maxCellIndex: ComputedRef
}
-export function useMaxIndex(
- activeType: ComputedRef,
- dateConfig: DateConfig,
- activeDate: ComputedRef,
-): MaxIndexContext {
+export function useMaxIndex(activeType: ComputedRef): MaxIndexContext {
const maxRowIndex = computed(() => {
const currType = activeType.value
- const { weekStartsOn, get, startOf, endOf } = dateConfig
switch (currType) {
case 'date':
- case 'week': {
- const currDate = activeDate.value
- const weekStarts = weekStartsOn()
- let startDay = get(startOf(currDate, 'month'), 'day')
- if (startDay > weekStarts) {
- startDay = startDay - weekStarts
- } else if (startDay < weekStarts) {
- startDay = startDay - weekStarts + 7
- } else {
- startDay = 0
- }
- const endDate = get(endOf(currDate, 'month'), 'date')
- // 起始天数 + 当月总天数 > 5 * 7, 那么就多显示一周
- return startDay + endDate > 35 ? 6 : 5
- }
+ case 'week':
+ return 6
case 'month':
return 4
case 'quarter':
diff --git a/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx b/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx
index 4046ad2b2..da840d65d 100644
--- a/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx
+++ b/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
const { key, label } = cell
return (
|
- {label}
+
|
)
})
diff --git a/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx b/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx
index a79a62afb..6e535d490 100644
--- a/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx
+++ b/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx
@@ -58,8 +58,12 @@ export default defineComponent({
)
const isStart = computed(() => startDate.value && dateConfig.isSame(startDate.value, cellDate.value, 'date'))
const isEnd = computed(() => endDate.value && dateConfig.isSame(endDate.value, cellDate.value, 'date'))
- const isToday = computed(
- () => dayTypes.includes(activeType.value) && dateConfig.isSame(cellDate.value, dateConfig.now(), 'day'),
+ const isCurrent = computed(() =>
+ dateConfig.isSame(
+ cellDate.value,
+ dateConfig.now(),
+ dayTypes.includes(activeType.value) ? 'day' : activeType.value,
+ ),
)
const outView = computed(() => {
const currType = activeType.value
@@ -89,6 +93,10 @@ export default defineComponent({
)
})
const isInRange = computed(() => {
+ if (outView.value) {
+ return false
+ }
+
const compareType = dayTypes.includes(activeType.value) ? 'date' : activeType.value
const cellDateValue = dateConfig.startOf(cellDate.value, compareType).valueOf()
@@ -108,7 +116,7 @@ export default defineComponent({
[`${prefixCls}-disabled`]: isDisabled.value,
[`${prefixCls}-selected`]: isSelected.value,
[`${prefixCls}-in-range`]: isInRange.value,
- [`${prefixCls}-today`]: isToday.value,
+ [`${prefixCls}-current`]: isCurrent.value,
[`${prefixCls}-out-view`]: outView.value,
[`${prefixCls}-start`]: isStart.value,
[`${prefixCls}-end`]: isEnd.value,
diff --git a/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx b/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx
index 02bca836b..75f6cd5f2 100644
--- a/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx
+++ b/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx
@@ -106,13 +106,20 @@ export default defineComponent({
},
})
+interface ContentAttrs {
+ key: string
+ label: string
+ title?: string
+ onClick?: (evt: Event) => void
+}
+
function useContents(
activeType: ComputedRef,
activeDate: ComputedRef,
locale: Locale,
dateConfig: DateConfig,
setActiveType: (type: DatePanelType) => void,
-) {
+): ComputedRef {
const handleClick = (evt: Event, type: DatePanelType) => {
evt.stopPropagation()
setActiveType(type)
diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
index ab3e379be..1a76179a9 100644
--- a/packages/components/_private/selector/style/index.less
+++ b/packages/components/_private/selector/style/index.less
@@ -14,6 +14,7 @@
&-content {
position: relative;
display: flex;
+ align-items: center;
color: @select-color;
background-color: @select-background-color;
border: @select-border-width @select-border-style @select-border-color;
diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less
index 0896877fa..0bfd5a7a3 100644
--- a/packages/components/_private/trigger/style/index.less
+++ b/packages/components/_private/trigger/style/index.less
@@ -74,6 +74,7 @@
align-items: center;
height: 100%;
transition: @transition-all-base;
+ font-size: @trigger-icon-font-size;
}
&-suffix {
diff --git a/packages/components/date-picker/src/DatePicker.tsx b/packages/components/date-picker/src/DatePicker.tsx
index b459aa3fd..48dfb8d39 100644
--- a/packages/components/date-picker/src/DatePicker.tsx
+++ b/packages/components/date-picker/src/DatePicker.tsx
@@ -67,12 +67,14 @@ export default defineComponent({
})
watch(overlayOpened, opened => {
- if (!opened) {
- controlContext.init(true)
- }
-
nextTick(() => {
- opened ? focus() : blur()
+ if (opened) {
+ focus()
+ inputRef.value?.dispatchEvent(new FocusEvent('focus'))
+ } else {
+ blur()
+ inputRef.value?.dispatchEvent(new FocusEvent('blur'))
+ }
})
})
diff --git a/packages/components/date-picker/src/DateRangePicker.tsx b/packages/components/date-picker/src/DateRangePicker.tsx
index 6a40653fe..693f72903 100644
--- a/packages/components/date-picker/src/DateRangePicker.tsx
+++ b/packages/components/date-picker/src/DateRangePicker.tsx
@@ -5,7 +5,7 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { computed, defineComponent, normalizeClass, provide, watch } from 'vue'
+import { computed, defineComponent, nextTick, normalizeClass, provide, watch } from 'vue'
import { ɵOverlay } from '@idux/components/_private/overlay'
import { useDateConfig, useGlobalConfig } from '@idux/components/config'
@@ -72,11 +72,15 @@ export default defineComponent({
})
watch(overlayOpened, opened => {
- if (!opened) {
- rangeControlContext.init(true)
- }
-
- opened ? focus() : blur()
+ nextTick(() => {
+ if (opened) {
+ focus()
+ inputRef.value?.dispatchEvent(new FocusEvent('focus'))
+ } else {
+ blur()
+ inputRef.value?.dispatchEvent(new FocusEvent('blur'))
+ }
+ })
})
watch(rangeControlContext.buffer, value => {
diff --git a/packages/components/date-picker/src/composables/useActiveDate.ts b/packages/components/date-picker/src/composables/useActiveDate.ts
index e609c1abe..1010f93b8 100644
--- a/packages/components/date-picker/src/composables/useActiveDate.ts
+++ b/packages/components/date-picker/src/composables/useActiveDate.ts
@@ -133,11 +133,11 @@ export function useRangeActiveDate(
const handleFromActiveDateUpdate = (value: Date) => {
setFromActiveDate(value)
- setToActiveDate(calcValidActiveDate(value, toPanelValue.value, 'to'))
+ setToActiveDate(calcValidActiveDate(value, toActiveDate.value, 'to'))
}
const handleToActiveDateUpdate = (value: Date) => {
setToActiveDate(value)
- setFromActiveDate(calcValidActiveDate(fromPanelValue.value, value, 'from'))
+ setFromActiveDate(calcValidActiveDate(fromActiveDate.value, value, 'from'))
}
return {
diff --git a/packages/components/date-picker/src/composables/useControl.ts b/packages/components/date-picker/src/composables/useControl.ts
index bbe399f05..d4c881297 100644
--- a/packages/components/date-picker/src/composables/useControl.ts
+++ b/packages/components/date-picker/src/composables/useControl.ts
@@ -20,6 +20,8 @@ export interface PickerControlContext {
dateInputValue: ComputedRef
timeInputVaue: ComputedRef
panelValue: ComputedRef
+ dateInputFocused: ComputedRef
+ timeInputFocused: ComputedRef
visiblePanel: ComputedRef<'datePanel' | 'timePanel'>
setVisiblePanel: (value: 'datePanel' | 'timePanel') => void
@@ -34,6 +36,8 @@ export interface PickerControlContext {
handleTimePanelChange: (value: Date) => void
handleDateInputFocus: () => void
handleTimeInputFocus: () => void
+ handleDateInputBlur: () => void
+ handleTimeInputBlur: () => void
}
export function useControl(
@@ -50,6 +54,8 @@ export function useControl(
const [timeInputVaue, setTimeInputValue] = useState('')
const [panelValue, setPanelValue] = useState(undefined)
const [visiblePanel, setVisiblePanel] = useState<'datePanel' | 'timePanel'>('datePanel')
+ const [dateInputFocused, setDateInputFocused] = useState(false)
+ const [timeInputFocused, setTimeInputFocused] = useState(false)
function initInputValue(currValue: Date | undefined, force = false) {
if (!currValue) {
@@ -184,15 +190,25 @@ export function useControl(
function handleDateInputFocus() {
setVisiblePanel('datePanel')
+ setDateInputFocused(true)
}
function handleTimeInputFocus() {
setVisiblePanel('timePanel')
+ setTimeInputFocused(true)
+ }
+ function handleDateInputBlur() {
+ setDateInputFocused(false)
+ }
+ function handleTimeInputBlur() {
+ setTimeInputFocused(false)
}
return {
inputValue,
dateInputValue,
timeInputVaue,
+ dateInputFocused,
+ timeInputFocused,
panelValue,
visiblePanel,
@@ -208,5 +224,7 @@ export function useControl(
handleTimePanelChange,
handleDateInputFocus,
handleTimeInputFocus,
+ handleDateInputBlur,
+ handleTimeInputBlur,
}
}
diff --git a/packages/components/date-picker/src/composables/useOverlayState.ts b/packages/components/date-picker/src/composables/useOverlayState.ts
index b817744b7..5d3e65a78 100644
--- a/packages/components/date-picker/src/composables/useOverlayState.ts
+++ b/packages/components/date-picker/src/composables/useOverlayState.ts
@@ -28,7 +28,7 @@ export function useOverlayState(
const changeOpenedState = (open: boolean) => {
setOverlayOpened(open)
if (!open) {
- control.init()
+ control.init(true)
}
}
diff --git a/packages/components/date-picker/src/composables/usePanelState.ts b/packages/components/date-picker/src/composables/usePanelState.ts
deleted file mode 100644
index 4dab44b4e..000000000
--- a/packages/components/date-picker/src/composables/usePanelState.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { DatePickerProps } from '../types'
-import type { ValueAccessor } from '@idux/cdk/forms'
-import type { DateConfig } from '@idux/components/config'
-import type { ComputedRef } from 'vue'
-
-import { watch } from 'vue'
-
-import { useState } from '@idux/cdk/utils'
-
-export interface PanelStateContext {
- panelDate: ComputedRef
- setPanelDate: (value: Date) => void
-}
-
-export function usePanelState(
- props: DatePickerProps,
- dateConfig: DateConfig,
- accessor: ValueAccessor,
- formatRef: ComputedRef,
-): PanelStateContext {
- const initValue = accessor.valueRef.value ?? props.defaultOpenValue
- const initDate = initValue ? dateConfig.convert(accessor.valueRef.value, formatRef.value) : undefined
- const [panelDate, setPanelDate] = useState(initDate)
-
- watch(accessor.valueRef, value => {
- const { convert, isSame } = dateConfig
- const mergedValue = value ?? props.defaultOpenValue
- if (!mergedValue) {
- setPanelDate(undefined)
- }
- const currValue = convert(mergedValue, formatRef.value)
- if (!panelDate.value || !isSame(panelDate.value, currValue, props.type)) {
- setPanelDate(currValue)
- }
- })
-
- return {
- panelDate,
- setPanelDate,
- }
-}
diff --git a/packages/components/date-picker/src/composables/useTriggerProps.ts b/packages/components/date-picker/src/composables/useTriggerProps.ts
index c8f411f9e..e653b0760 100644
--- a/packages/components/date-picker/src/composables/useTriggerProps.ts
+++ b/packages/components/date-picker/src/composables/useTriggerProps.ts
@@ -44,7 +44,7 @@ export function useTriggerProps(
clearable: !accessor.disabled.value && props.clearable && !!accessor.valueRef.value,
clearIcon: props.clearIcon ?? config.clearIcon,
disabled: accessor.disabled.value,
- focused: isFocused.value || overlayOpened.value,
+ focused: isFocused.value,
readonly: props.readonly || inputEnableStatus.value.enableInput === false,
size: props.size ?? formContext?.size.value ?? config.size,
suffix: props.suffix ?? config.suffix,
diff --git a/packages/components/date-picker/src/content/Content.tsx b/packages/components/date-picker/src/content/Content.tsx
index ef85b6de2..7589a6626 100644
--- a/packages/components/date-picker/src/content/Content.tsx
+++ b/packages/components/date-picker/src/content/Content.tsx
@@ -35,12 +35,16 @@ export default defineComponent({
timeInputVaue,
visiblePanel,
panelValue,
+ dateInputFocused,
+ timeInputFocused,
handleDateInput,
handleTimeInput,
handleDateInputClear,
handleTimeInputClear,
handleDateInputFocus,
handleTimeInputFocus,
+ handleDateInputBlur,
+ handleTimeInputBlur,
handleDatePanelChange,
handleTimePanelChange,
},
@@ -74,6 +78,14 @@ export default defineComponent({
}
}
+ const _handleDateInputClear = (evt: Event) => {
+ if (!inputEnableStatus.value.enableOverlayTimeInput) {
+ handleClear(evt)
+ }
+
+ handleDateInputClear()
+ }
+
const renderInputs = (prefixCls: string) => {
if (!inputEnableStatus.value.enableOverlayDateInput) {
return
@@ -90,11 +102,13 @@ export default defineComponent({
clearable={props.clearable ?? config.clearable}
clearIcon={props.clearIcon ?? config.clearIcon}
clearVisible={!!dateInputValue.value}
+ focused={dateInputFocused.value}
placeholder={dateFormatRef.value}
onInput={handleDateInput}
onFocus={handleDateInputFocus}
+ onBlur={handleDateInputBlur}
onKeydown={handleKeyDown}
- onClear={inputEnableStatus.value.enableOverlayTimeInput ? handleDateInputClear : handleClear}
+ onClear={_handleDateInputClear}
/>
{inputEnableStatus.value.enableOverlayTimeInput && (
<ɵInput
@@ -106,8 +120,10 @@ export default defineComponent({
clearIcon={props.clearIcon ?? config.clearIcon}
clearVisible={!!timeInputVaue.value}
placeholder={timeFormatRef.value}
+ focused={timeInputFocused.value}
onInput={handleTimeInput}
onFocus={handleTimeInputFocus}
+ onBlur={handleTimeInputBlur}
onKeydown={handleKeyDown}
onClear={handleTimeInputClear}
/>
diff --git a/packages/components/date-picker/src/content/RangeContent.tsx b/packages/components/date-picker/src/content/RangeContent.tsx
index e21289129..65594113b 100644
--- a/packages/components/date-picker/src/content/RangeContent.tsx
+++ b/packages/components/date-picker/src/content/RangeContent.tsx
@@ -82,28 +82,35 @@ export default defineComponent({
const {
dateInputValue,
timeInputVaue,
+ dateInputFocused,
+ timeInputFocused,
handleDateInput,
handleTimeInput,
handleDateInputClear,
handleTimeInputClear,
handleDateInputFocus,
handleTimeInputFocus,
+ handleDateInputBlur,
+ handleTimeInputBlur,
handleTimePanelChange,
} = isFrom ? fromControl : toControl
const inputs = enableOverlayDateInput && (
<ɵInput
- ref={inputInstance}
+ ref={isFrom ? inputInstance : undefined}
class={`${prefixCls}-date-input`}
v-slots={slots}
value={dateInputValue.value}
size="sm"
clearable={props.clearable ?? config.clearable}
clearIcon={props.clearIcon ?? config.clearIcon}
+ clearVisible={!!dateInputValue.value}
+ focused={dateInputFocused.value}
placeholder={dateFormatRef.value}
onInput={handleDateInput}
onFocus={handleDateInputFocus}
+ onBlur={handleDateInputBlur}
onKeydown={handleKeyDown}
onClear={handleDateInputClear}
/>
@@ -115,9 +122,12 @@ export default defineComponent({
size="sm"
clearable={props.clearable ?? config.clearable}
clearIcon={props.clearIcon ?? config.clearIcon}
+ clearVisible={!!timeInputVaue.value}
+ focused={timeInputFocused.value}
placeholder={timeFormatRef.value}
onInput={handleTimeInput}
onFocus={handleTimeInputFocus}
+ onBlur={handleTimeInputBlur}
onKeydown={handleKeyDown}
onClear={handleTimeInputClear}
/>
@@ -163,7 +173,9 @@ export default defineComponent({
const children = [
{renderBoard(boardPrefixCls, true)}
- {inputEnableStatus.value.enableOverlayDateInput && renderSeparator()}
+
+ {inputEnableStatus.value.enableOverlayDateInput && renderSeparator()}
+
{renderBoard(boardPrefixCls, false)}
,
<ɵFooter
diff --git a/packages/components/date-picker/src/trigger/RangeTrigger.tsx b/packages/components/date-picker/src/trigger/RangeTrigger.tsx
index 941a5f696..1fab0fad3 100644
--- a/packages/components/date-picker/src/trigger/RangeTrigger.tsx
+++ b/packages/components/date-picker/src/trigger/RangeTrigger.tsx
@@ -69,18 +69,23 @@ export default defineComponent({
)
}
+ const renderContent = (prefixCls: string) => (
+
+ {renderSide(true)}
+ {renderSeparator()}
+ {renderSide(false)}
+
+ )
+
return () => {
const prefixCls = mergedPrefixCls.value
+ const triggerSlots = {
+ default: () => renderContent(prefixCls),
+ suffix: slots.suffix,
+ clearIcon: slots.clearIcon,
+ }
- return (
- <ɵTrigger className={prefixCls} v-slots={slots} {...triggerProps.value}>
-
- {renderSide(true)}
- {renderSeparator()}
- {renderSide(false)}
-
-
- )
+ return <ɵTrigger className={prefixCls} v-slots={triggerSlots} {...triggerProps.value} />
}
},
})
diff --git a/packages/components/date-picker/src/trigger/Trigger.tsx b/packages/components/date-picker/src/trigger/Trigger.tsx
index d5670df47..e22c5e949 100644
--- a/packages/components/date-picker/src/trigger/Trigger.tsx
+++ b/packages/components/date-picker/src/trigger/Trigger.tsx
@@ -39,27 +39,35 @@ export default defineComponent({
callEmit(props.onInput, evt)
}
- return () => {
+ const renderContent = (prefixCls: string) => {
const { readonly, disabled } = triggerProps.value
- const prefixCls = mergedPrefixCls.value
return (
- <ɵTrigger className={prefixCls} v-slots={slots} {...triggerProps.value}>
-
-
-
-
+
+
+
)
}
+
+ return () => {
+ const prefixCls = mergedPrefixCls.value
+ const triggerSlots = {
+ default: () => renderContent(prefixCls),
+ suffix: slots.suffix,
+ clearIcon: slots.clearIcon,
+ }
+
+ return <ɵTrigger className={prefixCls} v-slots={triggerSlots} {...triggerProps.value} />
+ }
},
})
diff --git a/packages/components/date-picker/style/index.less b/packages/components/date-picker/style/index.less
index a87633e43..04de99118 100644
--- a/packages/components/date-picker/style/index.less
+++ b/packages/components/date-picker/style/index.less
@@ -1,7 +1,6 @@
@import '../../style/mixins/borderless.less';
@import '../../style/mixins/placeholder.less';
@import '../../style/mixins/reset.less';
-@import './input.less';
@import './panel.less';
.@{date-picker-prefix},
@@ -9,7 +8,10 @@
display: inline-flex;
width: 100%;
line-height: @date-picker-line-height;
- background-color: @date-picker-background-color;
+
+ &:not(.@{trigger-prefix}-disabled) {
+ color: @date-picker-color;
+ }
&-input {
width: 100%;
@@ -32,13 +34,21 @@
}
&-board {
- &-inputs {
+ & &-inputs {
display: flex;
justify-content: center;
margin-bottom: @date-picker-overlay-inputs-margin-bottom;
+ color: @date-picker-color;
+
+ & .@{input-prefix}-focused {
+ box-shadow: none;
+ }
}
& &-date-input {
width: @date-picker-overlay-date-input-width;
+ input {
+ color: @date-picker-color;
+ }
}
& &-date-input:only-child {
width: 100%;
@@ -46,6 +56,9 @@
& &-time-input {
width: @date-picker-overlay-time-input-width;
margin-left: @date-picker-overlay-input-gap;
+ input {
+ color: @date-picker-color;
+ }
}
&-panel {
@@ -93,13 +106,14 @@
display: flex;
padding: @date-range-picker-overlay-content-padding;
}
- &-gap {
+ &-separator {
display: flex;
justify-content: center;
align-items: flex-start;
- width: @date-range-picker-overlay-gap-width;
- padding: @date-range-picker-overlay-gap-padding;
+ width: @date-range-picker-overlay-separator-width;
+ padding: @date-range-picker-overlay-separator-padding;
text-align: center;
+ font-size: @date-range-picker-overlay-separator-font-size;
color: @date-picker-color;
}
diff --git a/packages/components/date-picker/style/input.less b/packages/components/date-picker/style/input.less
deleted file mode 100644
index 98c92dcb0..000000000
--- a/packages/components/date-picker/style/input.less
+++ /dev/null
@@ -1,122 +0,0 @@
-// .date-picker-input-size(@font-size; @padding-vertical; @padding-horizontal; @height) {
-// font-size: @font-size;
-
-// .@{date-picker-prefix}-input {
-// padding: @padding-vertical @padding-horizontal;
-// }
-
-// .@{date-picker-prefix}-clear {
-// right: @padding-horizontal;
-// }
-// }
-
-// .date-picker-input-inner() {
-// display: inline-block;
-// width: 100%;
-// min-width: 0;
-// outline: 0;
-
-// &[disabled] {
-// cursor: not-allowed;
-// }
-
-// .placeholder(@date-picker-placeholder-color);
-// }
-
-.date-picker-input() {
-
- &-input {
- position: relative;
- display: inline-flex;
- align-items: center;
- width: 100%;
- border: @date-picker-border-width @date-picker-border-style @date-picker-border-color;
- border-radius: @date-picker-border-radius;
- transition: all @transition-duration-base @ease-in-out;
-
- &:hover {
- border-color: @date-picker-hover-color;
- }
-
- // &-inner {
- // .date-picker-input-inner();
- // }
- }
-
- // &-suffix,
- // &-clear {
- // color: @date-picker-placeholder-color;
- // transition: color @transition-duration-base;
- // cursor: pointer;
-
- // &:hover {
- // color: @date-picker-color-secondary;
- // }
- // }
-
- // &-clear {
- // position: absolute;
- // z-index: 1;
- // opacity: 0;
- // background-color: @date-picker-background-color;
- // transition: opacity @transition-duration-base;
- // }
-
- // &:hover &-clear {
- // opacity: 1;
- // }
-
- // &-sm {
- // .date-picker-input-size(@date-picker-font-size-sm; @date-picker-padding-vertical-sm; @date-picker-padding-horizontal-sm; @date-picker-height-sm);
- // }
-
- // &-md {
- // .date-picker-input-size(@date-picker-font-size-md; @date-picker-padding-vertical-md; @date-picker-padding-horizontal-md; @date-picker-height-md);
- // }
-
- // &-lg {
- // .date-picker-input-size(@date-picker-font-size-lg; @date-picker-padding-vertical-lg; @date-picker-padding-horizontal-lg; @date-picker-height-lg);
- // }
-
- // &-opened,
- // &-focused {
- // .@{date-picker-prefix}-input {
- // border-color: @date-picker-active-color;
- // box-shadow: @date-picker-active-box-shadow;
- // }
- // }
-
- // &-disabled {
- // color: @date-picker-disabled-color;
- // background-color: @date-picker-disabled-background-color;
- // cursor: not-allowed;
- // opacity: 1;
-
- // .@{date-picker-prefix}-input {
-
- // &:hover {
- // border-color: @date-picker-border-color;
- // }
-
- // .@{input-prefix}-suffix {
- // cursor: not-allowed;
-
- // &:hover {
- // color: @date-picker-disabled-color;
- // }
- // }
- // }
- // }
-
- // &-borderless {
-
- // &,
- // &:hover,
- // &-focused,
- // &-disabled {
- // .@{date-picker-prefix}-input {
- // .borderless();
- // }
- // }
- // }
-}
diff --git a/packages/components/date-picker/style/panel.less b/packages/components/date-picker/style/panel.less
index c5f61ce35..061662113 100644
--- a/packages/components/date-picker/style/panel.less
+++ b/packages/components/date-picker/style/panel.less
@@ -11,8 +11,6 @@
&-header {
display: flex;
- font-size: @date-picker-panel-header-font-size;
- font-weight: @date-picker-panel-header-font-weight;
padding: @date-picker-panel-header-padding;
line-height: @date-picker-panel-header-height - @date-picker-panel-border-width;
border-bottom: @date-picker-panel-header-border-bottom;
@@ -25,6 +23,7 @@
button {
font-size: @date-picker-panel-header-button-font-size;
+ font-weight: @date-picker-panel-header-button-font-weight;
transition: color @transition-duration-base;
&:hover {
@@ -68,22 +67,21 @@
overflow: hidden;
}
- thead {
- background-color: @date-picker-panel-body-header-background-color;
- border-bottom: @date-picker-panel-body-header-border-bottom;
- }
-
th,
td {
position: relative;
z-index: 1;
}
- th {
- font-weight: @date-picker-panel-body-header-font-weight;
+ &-header-cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
min-width: @date-picker-panel-cell-width;
height: @date-picker-panel-cell-height;
- line-height: @date-picker-panel-cell-height;
+ margin-bottom: @date-picker-panel-body-header-margin-bottom;
+ font-weight: @date-picker-panel-body-header-font-weight;
+ background-color: @date-picker-panel-body-header-background-color;
}
}
@@ -96,6 +94,7 @@
&-cell {
padding: @date-picker-panel-cell-padding;
color: @date-picker-panel-color;
+ overflow: hidden;
cursor: pointer;
&-out-view {
@@ -123,22 +122,10 @@
transition: background @transition-duration-base, border @transition-duration-base;
}
- &-today {
- position: relative;
- &::after {
- content: '';
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: @date-picker-panel-cell-today-mark-width;
- height: @date-picker-panel-cell-today-mark-height;
- border: @date-picker-panel-border-width @date-picker-panel-border-style @date-picker-panel-cell-today-border-color;
- border-radius: @date-picker-panel-cell-border-radius;
- color: @date-picker-panel-cell-today-color;
- }
+ &-current:not(&-selected) .@{date-panel-prefix}-cell-trigger {
+ border: @date-picker-panel-border-width @date-picker-panel-border-style
+ @date-picker-panel-cell-current-border-color;
+ color: @date-picker-panel-cell-current-color;
}
&-selected .@{date-panel-prefix}-cell-trigger {
@@ -184,20 +171,21 @@
}
}
&-week {
- .@{date-panel-prefix}-row {
+ .@{date-panel-prefix}-row:not(.@{date-panel-prefix}-week .@{date-panel-prefix}-row:hover)
+ .@{date-panel-prefix}-cell-selected {
&:hover {
- .@{date-panel-prefix}-cell-inner {
+ .@{date-panel-prefix}-cell:not(.@{date-panel-prefix}-cell-disabled) .@{date-panel-prefix}-cell-inner {
border-radius: 0;
background: @date-picker-panel-cell-hover-background-color;
color: @date-picker-panel-cell-hover-color;
}
- .@{date-panel-prefix}-cell:first-child {
+ .@{date-panel-prefix}-cell:not(.@{date-panel-prefix}-cell-disabled):first-child {
.@{date-panel-prefix}-cell-inner {
border-top-left-radius: @date-picker-panel-cell-border-radius;
border-bottom-left-radius: @date-picker-panel-cell-border-radius;
}
}
- .@{date-panel-prefix}-cell:last-child {
+ .@{date-panel-prefix}-cell:not(.@{date-panel-prefix}-cell-disabled):last-child {
.@{date-panel-prefix}-cell-inner {
border-top-right-radius: @date-picker-panel-cell-border-radius;
border-bottom-right-radius: @date-picker-panel-cell-border-radius;
@@ -209,7 +197,8 @@
&-date,
&-week {
- .@{date-panel-prefix}-cell-selected {
+ .@{date-panel-prefix}-row:not(.@{date-panel-prefix}-week .@{date-panel-prefix}-row:hover)
+ .@{date-panel-prefix}-cell-selected {
z-index: 0;
.@{date-panel-prefix}-cell-trigger {
color: @date-picker-panel-color-inverse;
@@ -263,7 +252,7 @@
&-header {
padding: @date-picker-panel-header-padding-lg;
}
-
+
&-body {
padding: @date-picker-panel-body-padding-lg;
}
diff --git a/packages/components/date-picker/style/themes/default.ts b/packages/components/date-picker/style/themes/default.ts
index db6d918c5..0f840c2f1 100644
--- a/packages/components/date-picker/style/themes/default.ts
+++ b/packages/components/date-picker/style/themes/default.ts
@@ -2,5 +2,6 @@
import '@idux/components/style/core/default'
import '@idux/components/_private/overlay/style/themes/default'
import '@idux/components/icon/style/themes/default'
+import '@idux-vue2/components/input/style/themes/default'
import './default.less'
diff --git a/packages/components/date-picker/style/themes/default.variable.less b/packages/components/date-picker/style/themes/default.variable.less
index 1d16a1881..b8f65b77b 100644
--- a/packages/components/date-picker/style/themes/default.variable.less
+++ b/packages/components/date-picker/style/themes/default.variable.less
@@ -1,8 +1,6 @@
// Trigger
@date-picker-line-height: @form-line-height;
@date-picker-color: @form-color;
-@date-picker-background-color: @form-background-color;
-@date-picker-disabled-background-color: @form-disabled-background-color;
// Range Trigger
@date-range-picker-trigger-separator-margin: @spacing-xl;
@@ -23,17 +21,16 @@
@date-picker-panel-header-padding: 0 0 @spacing-xs 0;
@date-picker-panel-header-height: @height-md;
@date-picker-panel-header-item-padding: 0 @spacing-xs;
-@date-picker-panel-header-font-size: @font-size-md;
-@date-picker-panel-header-font-weight: @font-weight-lg;
@date-picker-panel-header-border-bottom: none;
@date-picker-panel-header-button-font-size: @font-size-lg;
+@date-picker-panel-header-button-font-weight: @font-weight-lg;
@date-picker-panel-header-content-spacing: @spacing-lg;
@date-picker-panel-header-padding-lg: 0 0 @spacing-2xl;
@date-picker-panel-body-padding: 0;
@date-picker-panel-body-padding-lg: 0;
@date-picker-panel-body-font-size: @font-size-md;
-@date-picker-panel-body-header-border-bottom: solid transparent @spacing-md;
+@date-picker-panel-body-header-margin-bottom: @spacing-md;
@date-picker-panel-body-header-font-weight: @font-weight-md;
@date-picker-panel-body-header-background-color: @color-graphite-l50;
@@ -53,14 +50,12 @@
@date-picker-panel-cell-trigger-height-lg: 24px;
@date-picker-panel-cell-border-radius: @border-radius-full;
-@date-picker-panel-cell-border-radius-lg: @border-radius-md;
+@date-picker-panel-cell-border-radius-lg: @border-radius-sm;
@date-picker-panel-cell-hover-background-color: @color-graphite-l50;
@date-picker-panel-cell-hover-color: @color-primary;
-@date-picker-panel-cell-today-mark-width: 24px;
-@date-picker-panel-cell-today-mark-height: 24px;
-@date-picker-panel-cell-today-border-color: @color-blue-l40;
-@date-picker-panel-cell-today-color: @color-primary;
+@date-picker-panel-cell-current-border-color: @color-blue-l40;
+@date-picker-panel-cell-current-color: @color-primary;
@date-picker-overlay-footer-border-width: @form-border-width;
@date-picker-overlay-footer-border-style: @form-border-style;
@@ -82,8 +77,9 @@
@date-range-picker-overlay-padding: @spacing-lg @spacing-lg 0 @spacing-lg;
@date-range-picker-overlay-content-padding: 0 0 @spacing-sm 0;
-@date-range-picker-overlay-gap-width: @spacing-2xl;
-@date-range-picker-overlay-gap-padding: 1px 0 0 0;
+@date-range-picker-overlay-separator-width: @spacing-2xl;
+@date-range-picker-overlay-separator-padding: 1px 0 0 0;
+@date-range-picker-overlay-separator-font-size: @font-size-md;
@date-range-picker-overlay-footer-border-width: @date-picker-overlay-footer-border-width;
@date-range-picker-overlay-footer-border-style: @date-picker-overlay-footer-border-style;
@@ -96,4 +92,4 @@
@date-range-picker-panel-border-width: @form-border-width;
@date-range-picker-panel-border-style: @form-border-style;
@date-range-picker-panel-border-color: @form-border-color;
-@date-range-picker-panel-border-radius: 2px;
\ No newline at end of file
+@date-range-picker-panel-border-radius: @border-radius-sm;
\ No newline at end of file
diff --git a/packages/components/input/style/mixin.less b/packages/components/input/style/mixin.less
index 09c34c620..fa38d9289 100644
--- a/packages/components/input/style/mixin.less
+++ b/packages/components/input/style/mixin.less
@@ -4,6 +4,7 @@
width: 100%;
min-width: 0;
outline: 0;
+ color: @input-color;
&[disabled] {
cursor: not-allowed;
|