element-plus/es/el-space/index.js

A Component Library for Vue3.0

import { defineComponent, computed, openBlock, createBlock, renderSlot, isVNode, ref, watch, createVNode, createTextVNode } from 'vue';
import { isFragment, PatchFlags, isValidElementNode } from '../utils/vnode';
import { isNumber, isString, isArray } from '../utils/util';
import { isValidComponentSize } from '../utils/validators';

var script = defineComponent({
    props: {
        prefixCls: {
            type: String,
            default: 'el-space',
        },
    },
    setup(props) {
        return {
            classes: computed(() => `${props.prefixCls}__item`),
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock("div", { class: _ctx.classes }, [
    renderSlot(_ctx.$slots, "default")
  ], 2 /* CLASS */))
}

script.render = render;
script.__file = "packages/space/src/item.vue";

const SizeMap = {
    mini: 4,
    small: 8,
    medium: 12,
    large: 16,
};
const defaultProps = {
    direction: {
        type: String,
        default: 'horizontal',
    },
    class: {
        type: [String, Object, Array],
        default: '',
    },
    style: {
        type: [String, Array, Object],
    },
    alignment: {
        type: String,
        default: 'center',
    },
    prefixCls: {
        type: String,
    },
    spacer: {
        type: [Object, String, Number],
        default: null,
        validator: (val) => {
            return isVNode(val) || isNumber(val) || isString(val);
        },
    },
    wrap: {
        type: Boolean,
        default: false,
    },
    size: {
        type: [String, Array, Number],
        validator: (val) => {
            return (isValidComponentSize(val) || isNumber(val) || isArray(val));
        },
    },
};
function useSpace(props) {
    const classes = computed(() => [
        'el-space',
        `el-space--${props.direction}`,
        props.class,
    ]);
    const horizontalSize = ref(0);
    const verticalSize = ref(0);
    watch(() => [props.size, props.wrap, props.direction], ([size = 'small', wrap, dir]) => {
        if (isArray(size)) {
            const [h = 0, v = 0] = size;
            horizontalSize.value = h;
            verticalSize.value = v;
        }
        else {
            let val;
            if (isNumber(size)) {
                val = size;
            }
            else {
                val = SizeMap[size] || SizeMap.small;
            }
            if (wrap && dir === 'horizontal') {
                horizontalSize.value = verticalSize.value = val;
            }
            else {
                if (dir === 'horizontal') {
                    horizontalSize.value = val;
                    verticalSize.value = 0;
                }
                else {
                    verticalSize.value = val;
                    horizontalSize.value = 0;
                }
            }
        }
    }, { immediate: true });
    const containerStyle = computed(() => {
        const wrapKls = props.wrap
            ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` }
            : null;
        const alignment = {
            alignItems: props.alignment,
        };
        return [wrapKls, alignment, props.style];
    });
    const itemStyle = computed(() => {
        return {
            paddingBottom: `${verticalSize.value}px`,
            marginRight: `${horizontalSize.value}px`,
        };
    });
    return {
        classes,
        containerStyle,
        itemStyle,
    };
}

var Space = defineComponent({
    name: 'ElSpace',
    props: defaultProps,
    setup(props) {
        return useSpace(props);
    },
    render(ctx) {
        const { classes, $slots, containerStyle, itemStyle, spacer, prefixCls, } = ctx;
        const children = renderSlot($slots, 'default', { key: 0 }, () => []);
        if (children.children.length === 0)
            return null;
        if (isArray(children.children)) {
            let extractedChildren = [];
            children.children.forEach((child, loopKey) => {
                if (isFragment(child)) {
                    if (isArray(child.children)) {
                        child.children.forEach((nested, key) => {
                            extractedChildren.push(createVNode(script, {
                                style: itemStyle,
                                prefixCls,
                                key: `nested-${key}`,
                            }, {
                                default: () => [nested],
                            }, PatchFlags.PROPS | PatchFlags.STYLE, ['style', 'prefixCls']));
                        });
                    }
                }
                else if (isValidElementNode(child)) {
                    extractedChildren.push(createVNode(script, {
                        style: itemStyle,
                        prefixCls,
                        key: `LoopKey${loopKey}`,
                    }, {
                        default: () => [child],
                    }, PatchFlags.PROPS | PatchFlags.STYLE, ['style', 'prefixCls']));
                }
            });
            if (spacer) {
                const len = extractedChildren.length - 1;
                extractedChildren = extractedChildren.reduce((acc, child, idx) => {
                    return idx === len
                        ? [...acc, child]
                        : [...acc,
                            child, createVNode('span', { style: [itemStyle, 'width: 100%'], key: idx }, [
                                isVNode(spacer)
                                    ? spacer
                                    : createTextVNode(spacer, PatchFlags.TEXT),
                            ], PatchFlags.STYLE),
                        ];
                }, []);
            }
            return createVNode('div', {
                class: classes,
                style: containerStyle,
            }, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS);
        }
        return children.children;
    },
});

Space.install = (app) => {
    app.component(Space.name, Space);
};
const _Space = Space;

export default _Space;