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

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _utils2 = require("../../common/utils");

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); }

function render(_ctx, _cache) {
  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", (0, _vue.mergeProps)(_ctx.$attrs, {
    style: _ctx.boxStyle,
    class: _ctx.classes
  }), [(0, _vue.renderSlot)(_ctx.$slots, "default")], 16);
}

var _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 = (0, _vue.computed)(function () {
      var _classNames;

      return (0, _utils.classNames)('box', (_classNames = {
        'box-no-space': props.noSpace,
        'box-inline': props.inline
      }, _classNames["box-m-" + props.m] = (0, _utils2.validateSpacingNumber)(props.m), _classNames["box-mt-" + props.mt] = (0, _utils2.validateSpacingNumber)(props.mt), _classNames["box-ml-" + props.ml] = (0, _utils2.validateSpacingNumber)(props.ml), _classNames["box-mb-" + props.mb] = (0, _utils2.validateSpacingNumber)(props.mb), _classNames["box-mr-" + props.mr] = (0, _utils2.validateSpacingNumber)(props.mr), _classNames["box-mx-" + props.mx] = (0, _utils2.validateSpacingNumber)(props.mx), _classNames["box-my-" + props.my] = (0, _utils2.validateSpacingNumber)(props.my), _classNames["box-p-" + props.p] = (0, _utils2.validateSpacingNumber)(props.p), _classNames["box-pt-" + props.pt] = (0, _utils2.validateSpacingNumber)(props.pt), _classNames["box-pl-" + props.pl] = (0, _utils2.validateSpacingNumber)(props.pl), _classNames["box-pb-" + props.pb] = (0, _utils2.validateSpacingNumber)(props.pb), _classNames["box-pr-" + props.pr] = (0, _utils2.validateSpacingNumber)(props.pr), _classNames["box-px-" + props.px] = (0, _utils2.validateSpacingNumber)(props.px), _classNames["box-py-" + props.py] = (0, _utils2.validateSpacingNumber)(props.py), _classNames['box-flex'] = props.flex, _classNames["box-flex-" + props.flexDirection] = (0, _utils2.isValidBoxProps)(props.flexDirection, 'flexDirection'), _classNames["box-vertical-align-" + props.verticalAlign] = (0, _utils2.isValidBoxProps)(props.verticalAlign, 'verticalAlign'), _classNames["box-text-align-" + props.textAlign] = (0, _utils2.isValidBoxProps)(props.textAlign, 'textAlign'), _classNames['box-flex-wrap'] = props.flexWrap === true, _classNames['box-flex-nowrap'] = props.flexWrap === false, _classNames["box-justify-" + props.justifyContent] = (0, _utils2.isValidBoxProps)(props.justifyContent, 'justifyContent'), _classNames["box-align-items-" + props.alignItems] = (0, _utils2.isValidBoxProps)(props.alignItems, 'alignItems'), _classNames["box-align-content-" + props.alignContent] = (0, _utils2.isValidBoxProps)(props.alignContent, 'alignContent'), _classNames));
    });
    var boxStyle = (0, _vue.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
    };
  }
};
exports.default = _default;