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

fes-design for PC

import { defineComponent, computed, provide, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
import { isArray } from 'lodash-es';
import { useTheme } from '../_theme/useTheme';
import getPrefixCls from '../_util/getPrefixCls';
import { GRID_KEY, ALIGN, JUSTIFY } from './const';

const prefixCls = getPrefixCls('grid');
const gridProps = {
  align: {
    type: String,
    default: ALIGN[0]
  },
  gutter: {
    type: [Number, Array],
    default: 0
  },
  justify: {
    type: String,
    default: JUSTIFY[0]
  },
  wrap: Boolean
};
var script = defineComponent({
  name: 'FGrid',
  props: gridProps,
  setup(props) {
    useTheme();
    const gutterX = computed(() => {
      if (isArray(props.gutter)) {
        return props.gutter[0];
      }
      return props.gutter;
    });
    const gutterY = computed(() => {
      if (isArray(props.gutter)) {
        return props.gutter[1];
      }
      return 0;
    });
    const style = computed(() => {
      const _style = {
        'flex-wrap': props.wrap ? 'wrap' : 'nowrap',
        'justify-content': props.justify,
        'align-items': props.align
      };
      if (gutterX.value) {
        _style['margin-left'] = `-${gutterX.value / 2}px`;
        _style['margin-right'] = `-${gutterX.value / 2}px`;
      }
      if (gutterY.value) {
        _style['row-gap'] = `${gutterY.value}px`;
      }
      return _style;
    });
    const classList = computed(() => {
      const arr = [prefixCls];
      return arr;
    });
    provide(GRID_KEY, {
      gutterX
    });
    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/grid.vue";

export { script as default, gridProps };