vuikit/lib/grid.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { mergeData } from './util/vue';
import { toggleClass } from './util/class';
import { assign } from './util/lang';
import VkMargin from './margin';

var ElementGrid = {
  functional: true,
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    divided: {
      type: Boolean,
      default: false
    },
    matched: {
      type: Boolean,
      default: false
    },
    gutter: {
      type: String,
      validator: function (val) { return !val || /^(small|medium|large|collapse)$/.test(val); }
    }
  },
  render: function render (h, ref) {
    var obj;
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var tag = props.tag;
    var gutter = props.gutter;
    var divided = props.divided;
    var matched = props.matched;
    return h(tag, mergeData(data, {
      class: ['uk-grid', ( obj = {
        'uk-grid-match': matched,
        'uk-grid-divider': divided
      }, obj[("uk-grid-" + gutter)] = gutter, obj)]
    }), children)
  }
}

var grid = {
  name: 'VkGrid',
  directives: { VkMargin: VkMargin },
  props: assign({}, ElementGrid.props, {
    margin: {
      type: String,
      default: 'uk-grid-margin'
    },
    firstColumn: {
      type: String,
      default: 'uk-first-column'
    }
  }),
  render: function render (h) {
    var clsStack = 'uk-grid-stack';
    var ref = this;
    var margin = ref.margin;
    var firstColumn = ref.firstColumn;
    return h(ElementGrid, {
      props: this.$props,
      directives: [{
        name: 'vk-margin',
        value: {
          margin: margin,
          firstColumn: firstColumn,
          onUpdate: function (el, ref) {
            var stacks = ref.stacks;
            toggleClass(el, clsStack, stacks);
          }
        }
      }]
    }, this.$slots.default)
  }
}

export { ElementGrid, grid as Grid };