@fesjs/fes-design/es/grid/gridItem.js

fes-design for PC

import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
import { isNumber, isObject, isUndefined } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { GRID_KEY } from './const';

const prefixCls = getPrefixCls('grid-item');
function parseFlex(flex) {
  if (typeof flex === 'number') {
    return `${flex} ${flex} auto`;
  }
  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
    return `0 0 ${flex}`;
  }
  return flex;
}
const gridItemProps = {
  flex: [Number, String],
  offset: {
    type: Number,
    default: 0
  },
  pull: {
    type: Number,
    default: 0
  },
  push: {
    type: Number,
    default: 0
  },
  span: Number,
  order: {
    type: Number,
    default: 0
  },
  xs: [Number, Object],
  sm: [Number, Object],
  md: [Number, Object],
  lg: [Number, Object],
  xl: [Number, Object],
  xxl: [Number, Object],
  xxxl: [Number, Object]
};
var script = defineComponent({
  name: 'FGridItem',
  props: gridItemProps,
  setup(props) {
    const rowProps = inject(GRID_KEY, {
      gutterX: {
        value: 0
      }
    });
    const classList = computed(() => {
      const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
      const classes = [prefixCls, props.offset && `${prefixCls}-offset-${props.offset}`, props.pull && `${prefixCls}-pull-${props.pull}`, props.push && `${prefixCls}-push-${props.push}`, (props.span || props.span === 0) && `${prefixCls}-${props.span}`];
      const sizeClasses = sizes.reduce((pre, size) => {
        let sizeProps = {};
        const propSize = props[size];
        if (isNumber(propSize)) {
          sizeProps.span = propSize;
        } else if (isObject(propSize)) {
          sizeProps = propSize || {};
        }
        return pre.concat([!isUndefined(sizeProps.span) && `${prefixCls}-${size}-${sizeProps.span}`, (sizeProps.offset || sizeProps.offset === 0) && `${prefixCls}-${size}-offset-${sizeProps.offset}`, (sizeProps.pull || sizeProps.pull === 0) && `${prefixCls}-${size}-pull-${sizeProps.pull}`, (sizeProps.push || sizeProps.push === 0) && `${prefixCls}-${size}-push-${sizeProps.push}`]);
      }, []);
      return classes.concat(sizeClasses).filter(Boolean);
    });
    const style = computed(() => {
      var _rowProps$gutterX;
      const _style = {};
      if (props.flex) {
        _style.flex = parseFlex(props.flex);
      }
      if ((_rowProps$gutterX = rowProps.gutterX) !== null && _rowProps$gutterX !== void 0 && _rowProps$gutterX.value) {
        _style['padding-left'] = `${rowProps.gutterX.value / 2}px`;
        _style['padding-right'] = `${rowProps.gutterX.value / 2}px`;
      }
      if (props.order) {
        _style.order = props.order;
      }
      return _style;
    });
    return {
      style,
      classList
    };
  }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.classList),
    style: normalizeStyle(_ctx.style)
  }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
}

script.render = render;
script.__file = "components/grid/gridItem.vue";

export { script as default, gridItemProps };