chore: refactor space

feat-dayjs
Amour1688 2020-10-17 12:13:55 +08:00
parent 49fda0f7c8
commit df771a8fc6
2 changed files with 60 additions and 51 deletions

View File

@ -1,6 +1,8 @@
import { inject, App, CSSProperties, SetupContext } from 'vue'; import { inject, App, defineComponent, PropType } from 'vue';
import PropTypes from '../_util/vue-types';
import { filterEmpty } from '../_util/props-util'; import { filterEmpty } from '../_util/props-util';
import { defaultConfigProvider, SizeType } from '../config-provider'; import { defaultConfigProvider, SizeType } from '../config-provider';
import { tuple } from '../_util/type';
const spaceSize = { const spaceSize = {
small: 8, small: 8,
@ -8,21 +10,28 @@ const spaceSize = {
large: 24, large: 24,
}; };
export interface SpaceProps { const Space = defineComponent({
prefixCls?: string; name: 'ASpace',
className?: string; props: {
style?: CSSProperties; prefixCls: PropTypes.string,
size?: SizeType | number; size: {
direction?: 'horizontal' | 'vertical'; type: [String, Number] as PropType<number | SizeType>,
// No `stretch` since many components do not support that. },
align?: 'start' | 'end' | 'center' | 'baseline'; direction: PropTypes.oneOf(tuple('horizontal', 'vertical')),
} align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
},
const Space = (props: SpaceProps, { slots }: SetupContext) => { setup(props, { slots }) {
const configProvider = inject('configProvider', defaultConfigProvider); const configProvider = inject('configProvider', defaultConfigProvider);
const { align, size = 'small', direction = 'horizontal', prefixCls: customizePrefixCls } = props; const {
align,
size = 'small',
direction = 'horizontal',
prefixCls: customizePrefixCls,
} = props;
const { getPrefixCls } = configProvider; const { getPrefixCls } = configProvider;
return () => {
const prefixCls = getPrefixCls('space', customizePrefixCls); const prefixCls = getPrefixCls('space', customizePrefixCls);
const items = filterEmpty(slots.default?.()); const items = filterEmpty(slots.default?.());
const len = items.length; const len = items.length;
@ -63,12 +72,12 @@ const Space = (props: SpaceProps, { slots }: SetupContext) => {
</div> </div>
); );
}; };
},
Space.displayName = 'ASpace'; });
/* istanbul ignore next */ /* istanbul ignore next */
Space.install = function(app: App) { Space.install = function(app: App) {
app.component(Space.displayName, Space); app.component(Space.name, Space);
return app; return app;
}; };