vuikit/lib/card.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';

var ElementCard = {
  functional: true,
  props: {
    type: {
      type: String,
      default: 'default',
      validator: function (val) { return /^(default|primary|secondary|blank)$/.test(val); }
    },
    padding: {
      type: String,
      validator: function (val) { return !val || /^(small|large)$/.test(val); }
    },
    hover: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var obj;
    var props = ref.props;
    var data = ref.data;
    var slots = ref.slots;
    var type = props.type;
    var padding = props.padding;
    var hover = props.hover;
    var _slots = slots();
    var body = _slots.body;
    if (!body || !body.length) {
      _slots.body = _slots.default;
      delete _slots.default;
    }
    return h('div', mergeData(data, {
      class: ['uk-card', ( obj = {
        'uk-card-hover': hover
      }, obj[("uk-card-" + type)] = type, obj[("uk-card-" + padding)] = padding, obj)]
    }), [
      _slots.default && _slots.default,
      _slots['media-top'] && h('div', { class: 'uk-card-media-top' }, _slots['media-top']),
      _slots.badge && h('div', { class: 'uk-card-badge' }, _slots.badge),
      _slots.header && h('div', { class: 'uk-card-header' }, _slots.header),
      _slots['media'] && h('div', { class: 'uk-card-media' }, _slots['media']),
      _slots.body && h('div', { class: 'uk-card-body' }, _slots.body),
      _slots.footer && h('div', { class: 'uk-card-footer' }, _slots.footer),
      _slots['media-bottom'] && h('div', { class: 'uk-card-media-bottom' }, _slots['media-bottom'])
    ])
  }
}

var ElementCardTitle = {
  functional: true,
  props: {
    tag: {
      type: String,
      default: 'h3'
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    return h(props.tag, mergeData(data, {
      class: 'uk-card-title'
    }), children)
  }
}

var card = {
  name: 'VkCard',
  functional: true,
  props: ElementCard.props,
  render: ElementCard.render
}

var card_Title = {
  name: 'VkCardTitle',
  functional: true,
  props: ElementCardTitle.props,
  render: ElementCardTitle.render
}

export { ElementCard, ElementCardTitle, card as Card, card_Title as CardTitle };