zmp-vue/esm/zalo-ui-kits/box.js

Build full featured iOS & Android apps using ZMP & Vue

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock } from "vue";

function render(_ctx, _cache) {
  return _openBlock(), _createBlock("div", _mergeProps(_ctx.$attrs, {
    style: _ctx.boxStyle,
    class: _ctx.classes
  }), [_renderSlot(_ctx.$slots, "default")], 16);
}

import { computed } from 'vue';
import { classNames } from '../shared/utils';
import { validateSpacingNumber, isNumber, isValidBoxProps } from '../../common/utils';
export default {
  name: 'zmp-box',
  render: render,
  props: {
    noSpace: Boolean,
    inline: Boolean,
    m: [String, Number],
    p: [String, Number],
    mt: [String, Number],
    ml: [String, Number],
    mb: [String, Number],
    mr: [String, Number],
    pt: [String, Number],
    pl: [String, Number],
    pb: [String, Number],
    pr: [String, Number],
    mx: [String, Number],
    my: [String, Number],
    px: [String, Number],
    py: [String, Number],
    width: Number,
    height: Number,
    verticalAlign: String,
    textAlign: String,
    flex: Boolean,
    flexDirection: String,
    flexWrap: {
      type: Boolean,
      default: undefined
    },
    justifyContent: String,
    alignItems: String,
    alignContent: String
  },
  setup: function setup(props) {
    var classes = computed(function () {
      var _classNames;

      return classNames('box', (_classNames = {
        'box-no-space': props.noSpace,
        'box-inline': props.inline
      }, _classNames["box-m-" + props.m] = validateSpacingNumber(props.m), _classNames["box-mt-" + props.mt] = validateSpacingNumber(props.mt), _classNames["box-ml-" + props.ml] = validateSpacingNumber(props.ml), _classNames["box-mb-" + props.mb] = validateSpacingNumber(props.mb), _classNames["box-mr-" + props.mr] = validateSpacingNumber(props.mr), _classNames["box-mx-" + props.mx] = validateSpacingNumber(props.mx), _classNames["box-my-" + props.my] = validateSpacingNumber(props.my), _classNames["box-p-" + props.p] = validateSpacingNumber(props.p), _classNames["box-pt-" + props.pt] = validateSpacingNumber(props.pt), _classNames["box-pl-" + props.pl] = validateSpacingNumber(props.pl), _classNames["box-pb-" + props.pb] = validateSpacingNumber(props.pb), _classNames["box-pr-" + props.pr] = validateSpacingNumber(props.pr), _classNames["box-px-" + props.px] = validateSpacingNumber(props.px), _classNames["box-py-" + props.py] = validateSpacingNumber(props.py), _classNames['box-flex'] = props.flex, _classNames["box-flex-" + props.flexDirection] = isValidBoxProps(props.flexDirection, 'flexDirection'), _classNames["box-vertical-align-" + props.verticalAlign] = isValidBoxProps(props.verticalAlign, 'verticalAlign'), _classNames["box-text-align-" + props.textAlign] = isValidBoxProps(props.textAlign, 'textAlign'), _classNames['box-flex-wrap'] = props.flexWrap === true, _classNames['box-flex-nowrap'] = props.flexWrap === false, _classNames["box-justify-" + props.justifyContent] = isValidBoxProps(props.justifyContent, 'justifyContent'), _classNames["box-align-items-" + props.alignItems] = isValidBoxProps(props.alignItems, 'alignItems'), _classNames["box-align-content-" + props.alignContent] = isValidBoxProps(props.alignContent, 'alignContent'), _classNames));
    });
    var boxStyle = computed(function () {
      var style = _extends({}, props.style);

      if (props.width) {
        style.width = props.width;
      }

      if (props.height) {
        style.height = props.height;
      }

      return style;
    });
    return {
      classes: classes,
      boxStyle: boxStyle
    };
  }
};