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

var ElementNav = {
  functional: true,
  props: {
    center: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'default',
      validator: function (val) { return /^(default|primary|blank)$/.test(val); }
    }
  },
  render: function render (h, ref) {
    var obj;
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var center = props.center;
    var type = props.type;
    return h('ul', mergeData(data, {
      class: ['uk-nav', ( obj = {
        'uk-nav-center': center
      }, obj[("uk-nav-" + type)] = type, obj)]
    }), children)
  }
}

var ElementNavDropdown = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    var children = ref.children;
    return h('ul', mergeData(data, {
      class: 'uk-nav uk-dropdown-nav'
    }), children)
  }
}

var ElementNavItem = {
  functional: true,
  props: {
    icon: {},
    href: String,
    target: String,
    title: {
      type: String,
      required: true
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var active = props.active;
    var icon = props.icon;
    var title = props.title;
    var href = props.href;
    var target = props.target;
    var content = title;
    if (icon) {
      content = [
        h(ElementIcon, {
          class: 'uk-margin-small-right'
        }, [ icon ]),
        h('span', {
          class: 'uk-text-middle'
        }, title)
      ];
    }
    return h('li', mergeData(data, {
      class: { 'uk-active': active }
    }), [
      h('a', {
        attrs: { href: href, target: target }
      }, content)
    ])
  }
}

var ElementNavItemDivider = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    return h('li', mergeData(data, {
      class: 'uk-nav-divider'
    }))
  }
}

var ElementNavItemHeader = {
  functional: true,
  props: {
    title: {
      type: String,
      required: true
    }
  },
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    return h('li', mergeData(data, {
      class: 'uk-nav-header'
    }), props.title)
  }
}

var ElementNavItemParent = {
  functional: true,
  props: {
    href: String,
    target: String,
    title: {
      type: String,
      required: true
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var title = props.title;
    var href = props.href;
    var target = props.target;
    return h('li', mergeData(data, {
      class: 'uk-parent'
    }), [
      h('a', {
        attrs: { href: href, target: target }
      }, [ title ]),
      h('ul', {
        class: 'uk-nav-sub'
      }, children)
    ])
  }
}

var nav = {
  name: 'VkNav',
  functional: true,
  props: ElementNav.props,
  render: ElementNav.render
}

var navDropdown = {
  name: 'VkNavDropdown',
  functional: true,
  render: ElementNavDropdown.render
}

var nav_Item = {
  name: 'VkNavItem',
  functional: true,
  props: assign({}, ElementNavItem.props, {
    icon: {
      type: String
    }
  }),
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    props.icon = props.icon && h(("vk-icons-" + (props.icon)));
    return h(ElementNavItem, mergeData(data, { props: props }))
  }
}

var nav_ItemDivider = {
  name: 'VkNavItemDivider',
  functional: true,
  render: ElementNavItemDivider.render
}

var nav_ItemHeader = {
  name: 'VkNavItemHeader',
  functional: true,
  props: ElementNavItemHeader.props,
  render: ElementNavItemHeader.render
}

var nav_ItemParent = {
  name: 'VkNavItemParent',
  functional: true,
  props: ElementNavItemParent.props,
  render: ElementNavItemParent.render
}

export { ElementNav, ElementNavDropdown, ElementNavItem, ElementNavItemDivider, ElementNavItemHeader, ElementNavItemParent, nav as Nav, navDropdown as NavDropdown, nav_Item as NavItem, nav_ItemDivider as NavItemDivider, nav_ItemHeader as NavItemHeader, nav_ItemParent as NavItemParent };