vuikit/lib/skeleton.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 { assign } from './util/lang';

var ElementSkeleton = {
  functional: true,
  props: {
    animated: {
      type: Boolean,
      default: false
    },
    width: {
      type: [Boolean, Number],
      default: false
    },
    height: {
      type: [Boolean, Number],
      default: false
    }
  },
  render: function (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var children = ref.children;
    var animated = props.animated;
    var width = props.width;
    var height = props.height;
    return h('div', mergeData({
      class: {
        'vk-skeleton--animated': animated
      },
      style: {
        width: (width + "px"),
        height: (height + "px")
      }
    }, data), [
      h('div', {
        class: 'vk-skeleton-content'
      })
    ])
  }
}

var ElementSkeletonImage = {
  functional: true,
  props: assign({}, ElementSkeleton.props, {
    width: {
      type: Number,
      default: 150
    },
    height: {
      type: Number,
      default: 120
    }
  }),
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    return h(ElementSkeleton, mergeData(data, {
      class: 'vk-skeleton-image',
      props: props
    }))
  }
}

var ElementSkeletonText = {
  functional: true,
  props: ElementSkeleton.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    return h(ElementSkeleton, mergeData(data, {
      class: 'vk-skeleton-text',
      props: props
    }))
  }
}

var ElementSkeletonTitle = {
  functional: true,
  props: ElementSkeleton.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    return h(ElementSkeleton, mergeData(data, {
      class: 'vk-skeleton-title',
      props: props
    }))
  }
}

var skeletonImage = {
  name: 'VkSkeletonImage',
  functional: true,
  props: ElementSkeletonImage.props,
  render: ElementSkeletonImage.render
}

var skeletonText = {
  name: 'VkSkeletonText',
  functional: true,
  props: ElementSkeletonText.props,
  render: ElementSkeletonText.render
}

var skeletonTitle = {
  name: 'VkSkeletonTitle',
  functional: true,
  props: ElementSkeletonTitle.props,
  render: ElementSkeletonTitle.render
}

export { ElementSkeleton, ElementSkeletonImage, ElementSkeletonText, ElementSkeletonTitle, skeletonImage as SkeletonImage, skeletonText as SkeletonText, skeletonTitle as SkeletonTitle };