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

A Component Library for Vue3.0

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vnode = require('../utils/vnode');
var util = require('../utils/util');
var validators = require('../utils/validators');

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

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock("div", { class: _ctx.classes }, [
    vue.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 vue.isVNode(val) || util.isNumber(val) || util.isString(val);
        },
    },
    wrap: {
        type: Boolean,
        default: false,
    },
    size: {
        type: [String, Array, Number],
        validator: (val) => {
            return (validators.isValidComponentSize(val) || util.isNumber(val) || util.isArray(val));
        },
    },
};
function useSpace(props) {
    const classes = vue.computed(() => [
        'el-space',
        `el-space--${props.direction}`,
        props.class,
    ]);
    const horizontalSize = vue.ref(0);
    const verticalSize = vue.ref(0);
    vue.watch(() => [props.size, props.wrap, props.direction], ([size = 'small', wrap, dir]) => {
        if (util.isArray(size)) {
            const [h = 0, v = 0] = size;
            horizontalSize.value = h;
            verticalSize.value = v;
        }
        else {
            let val;
            if (util.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 = vue.computed(() => {
        const wrapKls = props.wrap
            ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` }
            : null;
        const alignment = {
            alignItems: props.alignment,
        };
        return [wrapKls, alignment, props.style];
    });
    const itemStyle = vue.computed(() => {
        return {
            paddingBottom: `${verticalSize.value}px`,
            marginRight: `${horizontalSize.value}px`,
        };
    });
    return {
        classes,
        containerStyle,
        itemStyle,
    };
}

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

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

exports.default = _Space;