chore: refactor space
parent
49fda0f7c8
commit
df771a8fc6
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue