@meve/ui/es/space/index.js

Argon design system components library

import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import { createNamespace, inherit } from '../utils/create';
import { props, internalSizeValidator } from './props';
import { toPxNum } from '../utils/elements';
import { isArray } from '../utils/shared';



var _createNamespace = createNamespace('space'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var internalSizes = {
  mini: [4, 4],
  small: [6, 6],
  normal: [8, 12],
  large: [12, 20]
};

var getSize = function getSize(size, isInternalSize) {
  return isInternalSize ? internalSizes[size] : isArray(size) ? size.map(toPxNum) : [toPxNum(size), toPxNum(size)];
};

function Space(h, props, slots, ctx) {
  var _slots$default;

  var inline = props.inline,
      justify = props.justify,
      align = props.align,
      wrap = props.wrap,
      direction = props.direction,
      size = props.size;
  var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
  var lastIndex = children.length - 1;
  var isInternalSize = internalSizeValidator(size);

  var _getSize = getSize(size, isInternalSize),
      y = _getSize[0],
      x = _getSize[1];

  var spacers = children.map(function (child, index) {
    var margin = '0';

    if (direction === 'row') {
      if (justify === 'start' || justify === 'center' || justify === 'end') {
        if (index !== lastIndex) {
          margin = y / 2 + "px " + x + "px " + y / 2 + "px 0";
        } else {
          margin = y / 2 + "px 0";
        }
      } else if (justify === 'space-around') {
        margin = y / 2 + "px " + x / 2 + "px";
      } else if (justify === 'space-between') {
        if (index === 0) {
          margin = y / 2 + "px " + x / 2 + "px " + y / 2 + "px 0";
        } else if (index === lastIndex) {
          margin = y / 2 + "px 0 " + y / 2 + "px " + x / 2 + "px";
        } else {
          margin = y / 2 + "px " + x / 2 + "px";
        }
      }
    }

    if (direction === 'column' && index !== lastIndex) {
      margin = "0 0 " + y + "px 0";
    }

    return h("div", {
      "style": {
        margin: margin
      }
    }, [child]);
  });
  return h("div", _mergeJSXProps([{
    "class": [namespace(), 'm--box', inline ? 'm--inline-flex' : null],
    "style": {
      flexDirection: direction,
      justifyContent: justify,
      alignItems: align,
      flexWrap: wrap ? 'wrap' : 'nowrap',
      margin: direction === 'row' ? "-" + y / 2 + "px 0" : undefined
    }
  }, inherit(ctx)]), [spacers]);
}

Space.props = props;
var SpacePlugin = createComponent(Space);
export var _SpaceComponent = SpacePlugin;
export default SpacePlugin;