github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: date-picker add soem icon slot

feat-css-var
tangjinzhou 2022-02-27 15:17:39 +08:00
parent 5da035d275
commit 27e7ed68fb
13 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/config-provider/index.tsx
View File

@ -17,7 +17,7 @@ import type { ValidateMessages } from '../form/interface';
import type { ConfigProviderProps, Theme } from './context';
import { configProviderProps, useProvideGlobalForm } from './context';
export type { ConfigProviderProps, Theme, SizeType, Direction } from './context';
export type { ConfigProviderProps, Theme, SizeType, Direction, CSPConfig } from './context';
export const defaultPrefixCls = 'ant';
function getGlobalPrefixCls() {
return globalConfigForApi.prefixCls || defaultPrefixCls;

9
components/date-picker/demo/format.vue
View File

@ -23,6 +23,7 @@ We can set the date format by `format`.
<a-date-picker v-model:value="value3" :format="monthFormat" picker="month" />
<a-range-picker v-model:value="value4" :format="dateFormat" />
<a-date-picker v-model:value="value5" :format="customFormat" />
<a-date-picker v-model:value="value6" :format="customWeekStartEndFormat" picker="week" />
</a-space>
</template>
<script lang="ts">
@ -31,8 +32,14 @@ import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const customWeekStartEndFormat = value =>
`${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
.endOf('week')
.format(weekFormat)}`;
return {
value1: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
value2: ref<Dayjs>(dayjs('01/01/2015', dateFormatList[0])),
@ -42,9 +49,11 @@ export default defineComponent({
dayjs('2015/01/01', dateFormat),
]),
value5: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
value6: ref<Dayjs>(dayjs()),
dateFormat,
monthFormat,
dateFormatList,
customWeekStartEndFormat,
customFormat: value => `custom format: ${value.format(dateFormat)}`,
};
},

17
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -33,10 +33,10 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
slots: [
'suffixIcon',
// 'clearIcon',
// 'prevIcon',
// 'nextIcon',
// 'superPrevIcon',
// 'superNextIcon',
'prevIcon',
'nextIcon',
'superPrevIcon',
'superNextIcon',
// 'panelRender',
'dateRender',
'renderExtraFooter',
@ -157,7 +157,6 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
const { format, showTime } = p as any;
let additionalOverrideProps: any = {};
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
@ -201,10 +200,10 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
prefixCls={pre}
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
generateConfig={generateConfig}
prevIcon={<span class={`${pre}-prev-icon`} />}
nextIcon={<span class={`${pre}-next-icon`} />}
superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
superNextIcon={<span class={`${pre}-super-next-icon`} />}
prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
components={Components}
direction={direction.value}
onChange={onChange}

16
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -34,10 +34,10 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
slots: [
'suffixIcon',
// 'clearIcon',
// 'prevIcon',
// 'nextIcon',
// 'superPrevIcon',
// 'superNextIcon',
'prevIcon',
'nextIcon',
'superPrevIcon',
'superNextIcon',
// 'panelRender',
'dateRender',
'renderExtraFooter',
@ -216,10 +216,10 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
prefixCls={pre}
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
generateConfig={generateConfig}
prevIcon={<span class={`${pre}-prev-icon`} />}
nextIcon={<span class={`${pre}-next-icon`} />}
superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
superNextIcon={<span class={`${pre}-super-next-icon`} />}
prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
components={Components}
direction={direction.value}
onChange={onChange}

4
components/date-picker/index.en-US.md
View File

@ -95,6 +95,10 @@ The following APIs are shared by DatePicker, RangePicker.
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
| suffixIcon | The custom suffix icon | v-slot:suffixIcon | - | |
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
| nextIcon | The custom next icon | slot | - | 3.0 |
| prevIcon | The custom prev icon | slot | - | 3.0 |
| superNextIcon | The custom super next icon | slot | - | 3.0 |
| superPrevIcon | The custom super prev icon | slot | - | 3.0 |
### Common Events

4
components/date-picker/index.zh-CN.md
View File

@ -96,6 +96,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
| suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
| nextIcon | 自定义下一个图标 | slot | - | 3.0 |
| prevIcon | 自定义上一个图标 | slot | - | 3.0 |
| superNextIcon | 自定义 `<<` 切换图标 | slot | - | 3.0 |
| superPrevIcon | 自定义 `>>` 切换图标 | slot | - | 3.0 |
### 共有的事件

5
components/date-picker/style/index.less
View File

@ -346,6 +346,11 @@
border-width: 0 0 @border-width-base 0;
border-radius: 0;
.@{picker-prefix-cls}-content,
table {
text-align: center;
}
&-focused {
border-color: @border-color-split;
}

24
components/date-picker/style/panel.less
View File

@ -161,6 +161,7 @@
z-index: 1;
height: @picker-panel-cell-height;
transform: translateY(-50%);
transition: all @animation-duration-slow;
content: '';
}
@ -247,6 +248,7 @@
border-top: @border-width-base dashed @picker-date-hover-range-border-color;
border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
transform: translateY(-50%);
transition: all @animation-duration-slow;
content: '';
}
}
@ -278,6 +280,7 @@
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
// range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
border-radius: 0 @border-radius-base @border-radius-base 0;
@ -292,15 +295,18 @@
bottom: 0;
z-index: -1;
background: @picker-date-hover-range-color;
transition: all @animation-duration-slow;
content: '';
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
right: -5px - @border-width-base;
left: 0;
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
right: 0;
left: -5px - @border-width-base;
@ -310,6 +316,7 @@
&-range-hover&-range-start::after {
right: 50%;
}
&-range-hover&-range-end::after {
left: 50%;
}
@ -340,10 +347,10 @@
// >>> Disabled
&-disabled {
color: @disabled-color;
pointer-events: none;
.@{cellClassName} {
color: @disabled-color;
background: transparent;
}
@ -366,11 +373,6 @@
color: @text-color;
}
// Disabled
&-disabled {
cursor: not-allowed;
}
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
@ -385,12 +387,6 @@
.@{picker-cell-inner-cls} {
padding: 0 @padding-xs;
}
.@{picker-prefix-cls}-cell {
&-disabled .@{picker-cell-inner-cls} {
background: @picker-basic-cell-disabled-bg;
}
}
}
&-quarter-panel {
@ -618,7 +614,7 @@
}
&-active {
background: fade(@calendar-item-active-bg, 20%);
background: @calendar-column-active-bg;
}
&:hover {
@ -669,7 +665,7 @@
// Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
/* stylelint-disable-next-line */
/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
_:-ms-fullscreen,
:root {
.@{picker-prefix-cls}-range-wrapper {

10
components/date-picker/style/rtl.less
View File

@ -192,10 +192,7 @@
left: 0;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: none;
border-top-left-radius: 0;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
@ -209,10 +206,7 @@
left: 6px;
border-right: none;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @border-radius-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}

2
components/list/index.tsx
View File

@ -1,7 +1,6 @@
import type { App, Plugin, ExtractPropTypes, PropType } from 'vue';
import { provide, defineComponent, ref, watch, computed, toRef } from 'vue';
import PropTypes, { withUndefined } from '../_util/vue-types';
import type { RenderEmptyHandler } from '../config-provider';
import Spin from '../spin';
import type { PaginationConfig } from '../pagination';
@ -72,6 +71,7 @@ export interface ListLocale {
export type ListProps = Partial<ExtractPropTypes<typeof listProps>>;
import { ListContextKey } from './contextKey';
import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
const List = defineComponent({
name: 'AList',

3
components/style/themes/default.less
View File

@ -654,7 +654,7 @@
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-active-with-range-color: @primary-1;
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-basic-cell-disabled-bg: @disabled-bg;
@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04);
@picker-border-color: @border-color-split;
@picker-date-hover-range-border-color: lighten(@primary-color, 20%);
@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
@ -672,6 +672,7 @@
@calendar-input-bg: @input-bg;
@calendar-border-color: @border-color-inverse;
@calendar-item-active-bg: @item-active-bg;
@calendar-column-active-bg: fade(@calendar-item-active-bg, 20%);
@calendar-full-bg: @calendar-bg;
@calendar-full-panel-bg: @calendar-full-bg;

2
components/transfer/index.tsx
View File

@ -7,13 +7,13 @@ import List from './list';
import Operation from './operation';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale-provider/default';
import type { RenderEmptyHandler } from '../config-provider';
import type { VueNode } from '../_util/type';
import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { TransferListBodyProps } from './ListBody';
import type { PaginationType } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext';
import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
export type { TransferListProps } from './list';
export type { TransferOperationProps } from './operation';

3
components/vc-picker/panels/TimePanel/index.tsx
View File

@ -6,6 +6,7 @@ import { createKeydownHandler } from '../../utils/uiUtil';
import classNames from '../../../_util/classNames';
import { ref } from 'vue';
import useMergeProps from '../../hooks/useMergeProps';
// import type { RangeType } from '../../RangePicker';
export type SharedTimeProps<DateType> = {
format?: string;
@ -27,7 +28,7 @@ export type SharedTimeProps<DateType> = {
/** @deprecated Please use `disabledTime` instead. */
disabledSeconds?: DisabledTimes['disabledSeconds'];
disabledTime?: (date: DateType) => DisabledTimes;
// disabledTime?: (date: DateType, type?: RangeType) => DisabledTimes;
};
export type TimePanelProps<DateType> = {