@fesjs/fes-design/es/space/space.js

fes-design for PC

import { defineComponent, createVNode, computed } from 'vue';
import { useTheme } from '../_theme/useTheme';
import { flatten, getSlot, isValidElementNode } from '../_util/vnode';
import { createKey } from '../_util/createKey';
import { depx } from '../_util/utils';
import { COMPONENT_NAME, prefixCls } from './const';
import { spaceProps } from './props';

const useMargin = (props, themeVarsRef) => {
  const margin = computed(() => {
    const {
      size
    } = props;
    let horizontal = 0;
    let vertical = 0;
    if (Array.isArray(size)) {
      horizontal = size[0];
      vertical = size[1];
    } else if (typeof size === 'number') {
      horizontal = size;
      vertical = size;
    } else {
      const currentSize = depx(themeVarsRef.value[createKey('padding', size)] || themeVarsRef.value[createKey('padding', 'small')]);
      horizontal = currentSize;
      vertical = currentSize;
    }
    return {
      horizontal: `${horizontal}px`,
      vertical: `${vertical}px`
    };
  });
  return {
    margin
  };
};
var space = defineComponent({
  name: COMPONENT_NAME,
  props: spaceProps,
  setup(props) {
    const {
      themeVars
    } = useTheme();
    const {
      margin
    } = useMargin(props, themeVars);
    return {
      prefixCls,
      margin
    };
  },
  render() {
    const {
      vertical,
      align,
      inline,
      justify,
      wrapItem,
      itemStyle,
      wrap,
      prefixCls,
      margin
    } = this;
    const children = flatten(getSlot(this.$slots) || []).filter(node => isValidElementNode(node));
    return createVNode("div", {
      "role": "none",
      "class": `${prefixCls}`,
      "style": {
        display: inline ? 'inline-flex' : 'flex',
        flexDirection: vertical ? 'column' : 'row',
        justifyContent: ['start', 'end'].includes(justify) ? `flex-${justify}` : justify,
        alignItems: align,
        flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
        gap: `${margin.vertical} ${margin.horizontal}`
      }
    }, [wrapItem ? children === null || children === void 0 ? void 0 : children.map(child => createVNode("div", {
      "role": "none",
      "style": [{
        maxWidth: '100%'
      }, itemStyle]
    }, [child])) : children]);
  }
});

export { space as default };