diff --git a/packages/components/space/index.ts b/packages/components/space/index.ts index a4cc9eee01e32..4aa1f76e150c0 100644 --- a/packages/components/space/index.ts +++ b/packages/components/space/index.ts @@ -6,4 +6,5 @@ export const ElSpace = withInstall(Space) export default ElSpace export * from './src/space' +export * from './src/item' export * from './src/use-space' diff --git a/packages/components/space/src/item.ts b/packages/components/space/src/item.ts new file mode 100644 index 0000000000000..688a3bf08074c --- /dev/null +++ b/packages/components/space/src/item.ts @@ -0,0 +1,30 @@ +import { computed, defineComponent, h, renderSlot } from 'vue' +import { buildProps } from '@element-plus/utils' +import { useNamespace } from '@element-plus/hooks' + +import type { ExtractPropTypes } from 'vue' + +const spaceItemProps = buildProps({ + prefixCls: { + type: String, + }, +} as const) +export type SpaceItemProps = ExtractPropTypes + +const SpaceItem = defineComponent({ + name: 'ElSpaceItem', + + props: spaceItemProps, + + setup(props, { slots }) { + const ns = useNamespace('space') + + const classes = computed(() => `${props.prefixCls || ns.b()}__item`) + + return () => + h('div', { class: classes.value }, renderSlot(slots, 'default')) + }, +}) +export type SpaceItemInstance = InstanceType + +export default SpaceItem diff --git a/packages/components/space/src/item.vue b/packages/components/space/src/item.vue deleted file mode 100644 index a6bed04d705f8..0000000000000 --- a/packages/components/space/src/item.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/packages/components/space/src/space.ts b/packages/components/space/src/space.ts index ca9aebe304caf..fc850683ca097 100644 --- a/packages/components/space/src/space.ts +++ b/packages/components/space/src/space.ts @@ -16,7 +16,7 @@ import { isValidElementNode, } from '@element-plus/utils' import { componentSizes } from '@element-plus/constants' -import Item from './item.vue' +import Item from './item' import { useSpace } from './use-space' import type { ExtractPropTypes, StyleValue, VNode, VNodeChild } from 'vue' @@ -58,15 +58,9 @@ export const spaceProps = buildProps({ validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val), }, - wrap: { - type: Boolean, - default: false, - }, + wrap: Boolean, - fill: { - type: Boolean, - default: false, - }, + fill: Boolean, fillRatio: { type: Number, @@ -79,7 +73,7 @@ export const spaceProps = buildProps({ validator: (val: unknown): val is [number, number] | number => { return ( isNumber(val) || - (isArray(val) && val.length === 2 && val.every((i) => isNumber(i))) + (isArray(val) && val.length === 2 && val.every(isNumber)) ) }, }, diff --git a/packages/components/space/src/use-space.ts b/packages/components/space/src/use-space.ts index 30ac6f1c045c8..f8f57176f1a2e 100644 --- a/packages/components/space/src/use-space.ts +++ b/packages/components/space/src/use-space.ts @@ -1,16 +1,16 @@ import { computed, ref, watchEffect } from 'vue' -import { isNumber } from '@element-plus/utils' +import { isArray, isNumber } from '@element-plus/utils' import { useNamespace } from '@element-plus/hooks' -import type { SpaceProps } from './space' +import type { SpaceProps } from './space' import type { CSSProperties, StyleValue } from 'vue' import type { ComponentSize } from '@element-plus/constants' -const SIZE_MAP: Record = { +const SIZE_MAP = { small: 8, default: 12, large: 16, -} +} as Record export function useSpace(props: SpaceProps) { const ns = useNamespace('space') @@ -48,7 +48,7 @@ export function useSpace(props: SpaceProps) { const { size = 'small', wrap, direction: dir, fill } = props // when the specified size have been given - if (Array.isArray(size)) { + if (isArray(size)) { const [h = 0, v = 0] = size horizontalSize.value = h verticalSize.value = v