Merge branch 'next' of github.com:vueComponent/ant-design-vue into next

pull/2950/head
tangjinzhou 2020-10-07 22:48:23 +08:00
commit 72b1c0b539
4 changed files with 115 additions and 105 deletions

View File

@ -1,5 +1,6 @@
import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue'; import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import { rowContextState } from './Row'; import { rowContextState } from './Row';
@ -43,40 +44,26 @@ function parseFlex(flex: FlexType): string {
return flex; return flex;
} }
export default defineComponent({ const ACol = defineComponent<ColProps>({
name: 'ACol', name: 'ACol',
inheritAttrs: false, setup(props, { slots }) {
setup(_: ColProps, { slots, attrs }) {
const configProvider = inject('configProvider', defaultConfigProvider); const configProvider = inject('configProvider', defaultConfigProvider);
const rowContext = inject<rowContextState>('rowContext', {}); const rowContext = inject<rowContextState>('rowContext', {});
return () => { return () => {
const { gutter } = rowContext; const { gutter } = rowContext;
const { const { prefixCls: customizePrefixCls, span, order, offset, push, pull, flex } = props;
prefixCls: customizePrefixCls,
span,
order,
offset,
push,
pull,
class: className,
flex,
style,
...others
} = attrs as ColProps;
const prefixCls = configProvider.getPrefixCls('col', customizePrefixCls); const prefixCls = configProvider.getPrefixCls('col', customizePrefixCls);
let sizeClassObj = {}; let sizeClassObj = {};
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => { ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
let sizeProps: ColSize = {}; let sizeProps: ColSize = {};
const propSize = attrs[size]; const propSize = props[size];
if (typeof propSize === 'number') { if (typeof propSize === 'number') {
sizeProps.span = propSize; sizeProps.span = propSize;
} else if (typeof propSize === 'object') { } else if (typeof propSize === 'object') {
sizeProps = propSize || {}; sizeProps = propSize || {};
} }
delete (others as any)[size];
sizeClassObj = { sizeClassObj = {
...sizeClassObj, ...sizeClassObj,
[`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined, [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
@ -97,10 +84,9 @@ export default defineComponent({
[`${prefixCls}-push-${push}`]: push, [`${prefixCls}-push-${push}`]: push,
[`${prefixCls}-pull-${pull}`]: pull, [`${prefixCls}-pull-${pull}`]: pull,
}, },
className,
sizeClassObj, sizeClassObj,
); );
let mergedStyle: CSSProperties = { ...(style as CSSProperties) }; let mergedStyle: CSSProperties = {};
if (gutter) { if (gutter) {
mergedStyle = { mergedStyle = {
...(gutter[0]! > 0 ...(gutter[0]! > 0
@ -123,10 +109,40 @@ export default defineComponent({
} }
return ( return (
<div {...others} style={mergedStyle} class={classes}> <div style={mergedStyle} class={classes}>
{slots.default?.()} {slots.default?.()}
</div> </div>
); );
}; };
}, },
}); });
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
export const ColSize = PropTypes.shape({
span: stringOrNumber,
order: stringOrNumber,
offset: stringOrNumber,
push: stringOrNumber,
pull: stringOrNumber,
}).loose;
const objectOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number, ColSize]);
ACol.props = {
span: stringOrNumber,
order: stringOrNumber,
offset: stringOrNumber,
push: stringOrNumber,
pull: stringOrNumber,
xs: objectOrNumber,
sm: objectOrNumber,
md: objectOrNumber,
lg: objectOrNumber,
xl: objectOrNumber,
xxl: objectOrNumber,
prefixCls: PropTypes.string,
flex: stringOrNumber,
};
export default ACol;

View File

@ -18,13 +18,6 @@ import ResponsiveObserve, {
responsiveArray, responsiveArray,
} from '../_util/responsiveObserve'; } from '../_util/responsiveObserve';
const RowProps = {
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
type: PropTypes.oneOf(['flex']),
align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
prefixCls: PropTypes.string,
};
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch'); const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between'); const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
@ -35,22 +28,21 @@ export interface rowContextState {
} }
export interface RowProps extends HTMLAttributes { export interface RowProps extends HTMLAttributes {
type?: 'flex';
gutter?: Gutter | [Gutter, Gutter]; gutter?: Gutter | [Gutter, Gutter];
align?: typeof RowAligns[number]; align?: typeof RowAligns[number];
justify?: typeof RowJustify[number]; justify?: typeof RowJustify[number];
prefixCls?: string; prefixCls?: string;
} }
export default defineComponent<RowProps>({ const ARow = defineComponent<RowProps>({
name: 'ARow', name: 'ARow',
setup(_: RowProps, { slots, attrs }) { setup(props, { slots }) {
const rowContext = reactive<rowContextState>({ const rowContext = reactive<rowContextState>({
gutter: undefined, gutter: undefined,
}); });
provide('rowContext', rowContext); provide('rowContext', rowContext);
const props = attrs as RowProps;
let token: number; let token: number;
onMounted(() => { onMounted(() => {
@ -81,8 +73,7 @@ export default defineComponent<RowProps>({
const gutterRef = ref<Gutter | [Gutter, Gutter]>(); const gutterRef = ref<Gutter | [Gutter, Gutter]>();
gutterRef.value = props.gutter; gutterRef.value = props.gutter;
const configProvider = inject('configProvider', defaultConfigProvider); const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
const { getPrefixCls } = configProvider;
const getGutter = (): [number, number] => { const getGutter = (): [number, number] => {
const results: [number, number] = [0, 0]; const results: [number, number] = [0, 0];
@ -105,24 +96,13 @@ export default defineComponent<RowProps>({
}; };
return () => { return () => {
const { const { prefixCls: customizePrefixCls, justify, align } = props;
prefixCls: customizePrefixCls,
justify,
align,
class: className,
style,
...others
} = props;
const prefixCls = getPrefixCls('row', customizePrefixCls); const prefixCls = getPrefixCls('row', customizePrefixCls);
const gutter = getGutter(); const gutter = getGutter();
const classes = classNames( const classes = classNames(prefixCls, {
prefixCls,
{
[`${prefixCls}-${justify}`]: justify, [`${prefixCls}-${justify}`]: justify,
[`${prefixCls}-${align}`]: align, [`${prefixCls}-${align}`]: align,
}, });
className,
);
const rowStyle = { const rowStyle = {
...(gutter[0]! > 0 ...(gutter[0]! > 0
? { ? {
@ -137,15 +117,23 @@ export default defineComponent<RowProps>({
} }
: {}), : {}),
}; };
const otherProps = { ...others, style };
delete otherProps.gutter;
rowContext.gutter = gutter; rowContext.gutter = gutter;
return ( return (
<div {...otherProps} class={classes} style={rowStyle}> <div class={classes} style={rowStyle}>
{slots.default?.()} {slots.default?.()}
</div> </div>
); );
}; };
}, },
}); });
ARow.props = {
type: PropTypes.oneOf(['flex']),
align: PropTypes.oneOf(RowAligns),
justify: PropTypes.oneOf(RowJustify),
prefixCls: PropTypes.string,
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
};
export default ARow;

View File

@ -1,29 +1,32 @@
import { inject, CSSProperties, SetupContext } from 'vue'; import { inject, defineComponent, PropType } from 'vue';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types';
export interface CheckableTagProps { const CheckableTag = defineComponent({
prefixCls?: string; name: 'ACheckableTag',
class?: string; props: {
style?: CSSProperties; prefixCls: PropTypes.string,
checked: boolean; checked: PropTypes.bool,
onChange?: (checked: boolean) => void; onChange: {
onClick?: (e: MouseEvent) => void; type: Function as PropType<(checked: boolean) => void>,
} },
onClick: {
const CheckableTag = (props: CheckableTagProps, { slots }: SetupContext) => { type: Function as PropType<(e: MouseEvent) => void>,
},
},
emits: ['update:checked', 'change', 'click'],
setup(props, { slots, emit }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider); const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
const handleClick = (e: MouseEvent) => { const handleClick = (e: MouseEvent) => {
const { checked, onChange, onClick } = props; const { checked } = props;
if (onChange) { emit('update:checked', !checked);
onChange(!checked); emit('change', !checked);
} emit('click', e);
if (onClick) {
onClick(e);
}
}; };
const { prefixCls: customizePrefixCls, checked } = props; return () => {
const { checked, prefixCls: customizePrefixCls } = props;
const prefixCls = getPrefixCls('tag', customizePrefixCls); const prefixCls = getPrefixCls('tag', customizePrefixCls);
const cls = classNames(prefixCls, { const cls = classNames(prefixCls, {
[`${prefixCls}-checkable`]: true, [`${prefixCls}-checkable`]: true,
@ -36,5 +39,7 @@ const CheckableTag = (props: CheckableTagProps, { slots }: SetupContext) => {
</span> </span>
); );
}; };
},
});
export default CheckableTag; export default CheckableTag;

View File

@ -1,14 +1,6 @@
import { import { inject, ref, HTMLAttributes, defineComponent, App, VNodeTypes, watchEffect } from 'vue';
inject,
ref,
HTMLAttributes,
defineComponent,
SetupContext,
App,
VNodeTypes,
watchEffect,
} from 'vue';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import Wave from '../_util/wave'; import Wave from '../_util/wave';
import { import {
@ -36,29 +28,27 @@ export interface TagProps extends HTMLAttributes {
const Tag = defineComponent({ const Tag = defineComponent({
name: 'ATag', name: 'ATag',
emits: ['update:visible'], emits: ['update:visible', 'close'],
setup(props: TagProps, { slots, emit, attrs }: SetupContext) { setup(props: TagProps, { slots, emit, attrs }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider); const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
const visible = ref(true); const visible = ref(true);
watchEffect(() => { watchEffect(() => {
if ('visible' in props) { if (props.visible !== undefined) {
visible.value = props.visible!; visible.value = props.visible!;
} }
}); });
const handleCloseClick = (e: MouseEvent) => { const handleCloseClick = (e: MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
if (props.onClose) {
emit('update:visible', false); emit('update:visible', false);
props.onClose(e); emit('close', e);
}
if (e.defaultPrevented) { if (e.defaultPrevented) {
return; return;
} }
if (!('visible' in props)) { if (props.visible === undefined) {
visible.value = false; visible.value = false;
} }
}; };
@ -131,7 +121,18 @@ const Tag = defineComponent({
}, },
}); });
Tag.props = ['prefixCls', 'color', 'closable', 'closeIcon', 'visible', 'icon']; Tag.props = {
prefixCls: PropTypes.string,
color: PropTypes.string,
closable: PropTypes.bool.def(false),
closeIcon: PropTypes.any,
visible: {
type: Boolean,
default: undefined,
},
onClose: PropTypes.func,
icon: PropTypes.any,
};
Tag.CheckableTag = CheckableTag; Tag.CheckableTag = CheckableTag;