vuikit/lib/navbar.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 { css } from './util/style';
import { get } from './util/misc';
import { height } from './util/dimensions';
import { Transition } from './util/animation';
import { noop, toFloat, assign } from './util/lang';
import { isVisible, within } from './util/filter';
import { active, constants, Drop } from './drop';
import { Grid } from './grid';
import { query } from './util/selector';
import { isTouch } from './util/touch';
import { isRtl, pointerEnter, pointerLeave, hasTouch } from './util/env';

var ElementNavbarNavigation = {
  functional: true,
  props: {
    align: {
      type: String,
      default: 'left',
      validator: function (val) { return /^(left|center(-left|-right)?|right)$/.test(val); }
    }
  },
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var children = ref.children;
    var align = props.align;
    var wrapContent = /center-(left|right)/.test(align);
    return h('div', mergeData(data, {
      class: ("uk-navbar-" + align)
    }), [
      wrapContent
        ? h('div', children)
        : children
    ])
  }
}

function renderSlots (h, slots) {
  return [
    (slots.left || slots.default) && h(ElementNavbarNavigation, [
      slots.left, slots.default
    ]),
    (slots.center || slots['center-left'] || slots['center-right']) && h(ElementNavbarNavigation, {
      props: { align: 'center' }
    }, [
      slots['center-left'] && h(ElementNavbarNavigation, {
        props: { align: 'center-left' }
      }, slots['center-left']),
      slots.center && slots.center,
      slots['center-right'] && h(ElementNavbarNavigation, {
        props: { align: 'center-right' }
      }, slots['center-right'])
    ]),
    slots.right && h(ElementNavbarNavigation, {
      props: { align: 'right' }
    }, slots.right)
  ]
}

var ElementNavbar = {
  functional: true,
  props: {
    container: {
      type: Boolean,
      default: true
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var slots = ref.slots;
    var container = props.container;
    var transparent = props.transparent;
    return h('nav', mergeData(data, {
      class: ['uk-navbar', {
        'uk-navbar-container': container && !transparent,
        'uk-navbar-transparent': transparent
      }]
    }), renderSlots(h, slots()))
  }
}

var ElementNavbarFull = {
  functional: true,
  props: {
    expanded: {
      type: Boolean,
      default: false
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var slots = ref.slots;
    var expanded = props.expanded;
    var transparent = props.transparent;
    return h('nav', mergeData(data, {
      class: ['uk-navbar-container', {
        'uk-navbar-transparent': transparent
      }]
    }), [
      h('div', {
        class: ['uk-container', {
          'uk-container-expand': expanded
        }]
      }, [
        h('div', {
          class: 'uk-navbar'
        }, renderSlots(h, slots()))
      ])
    ])
  }
}

var ElementNavbarDropbar = {
  functional: true,
  props: {
    slide: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var slide = props.slide;
    return h('div', mergeData(data, {
      class: ['uk-navbar-dropbar', {
        'uk-navbar-dropbar-slide': slide
      }]
    }))
  }
}

var ElementNavbarItem = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    var children = ref.children;
    return h('div', mergeData(data, {
      class: 'uk-navbar-item'
    }), children)
  }
}

var ElementNavbarLogo = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    var children = ref.children;
    return h('span', mergeData(data, {
      class: 'uk-navbar-item uk-logo'
    }), children)
  }
}

var navbar_LogoLink = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    var children = ref.children;
    return h('a', mergeData(data, {
      class: 'uk-navbar-item uk-logo'
    }), children)
  }
}

var IconToggle = {
  functional: true,
  render: function (h, ctx) {
    var props = ctx.props;
    var width = props.width || 20;
    var height$$1 = props.height || 20;
    var viewBox = props.viewBox || '0 0 20 20';
    return h('svg', {
      attrs: {
        version: '1.1',
        width: width,
        height: height$$1,
        viewBox: viewBox
      },
      domProps: {
        innerHTML: '<path d="M0 9h20v2H0zM0 3h20v2H0zM0 15h20v2H0z"/>'
      }
    })
  }
}

var ElementNavbarToggle = {
  functional: true,
  props: {
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: Boolean,
      default: true
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var icon = props.icon;
    var title = props.title;
    var Icon = icon && h(ElementIcon, {
      class: 'uk-navbar-toggle-icon'
    }, [ h(IconToggle) ]);
    return h('a', mergeData(data, {
      class: 'uk-navbar-toggle'
    }), [
      Icon,
      title && h('span', {
        class: 'uk-margin-small-left'
      }, title)
    ])
  }
}

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

var ElementNavbarNavItem = {
  functional: true,
  props: {
    icon: {},
    href: String,
    target: String,
    title: {
      type: String
    },
    subtitle: {
      type: String
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var active$$1 = props.active;
    var title = props.title;
    var subtitle = props.subtitle;
    var icon = props.icon;
    var href = props.href;
    var target = props.target;
    var Icon = icon && h(ElementIcon, {
      class: 'uk-margin-small-right'
    }, [ icon ]);
    var Subtitle = subtitle && h('div', [ title, h('div', {
      class: 'uk-navbar-subtitle'
    }, subtitle) ]);
    return h('li', mergeData(data, {
      class: { 'uk-active': active$$1 }
    }), [
      h('a', {
        attrs: { href: href, target: target }
      }, [
        Icon,
        Subtitle || title
      ]),
      children
    ])
  }
}

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

var navbar = {
  name: 'VkNavbar',
  functional: true,
  props: ElementNavbar.props,
  render: ElementNavbar.render
}

var navbarFull = {
  name: 'VkNavbarFull',
  functional: true,
  props: ElementNavbarFull.props,
  render: ElementNavbarFull.render
}

var SHOW = constants.SHOW;
var HIDE = constants.HIDE;
var navbarDropbar = {
  name: 'VkNavbarDropbar',
  props: {
    mode: {
      type: String,
      default: 'slide',
      validator: function (val) { return /^(slide|push)$/.test(val); }
    },
    duration: {
      type: Number,
      default: 200
    }
  },
  methods: {
    transitionDropbar: function transitionDropbar (dropdownEl) {
      var el = dropdownEl;
      var marginTop = toFloat(css(el, 'margin-top'));
      var marginBottom = toFloat(css(el, 'margin-bottom'));
      var height$$1 = el.offsetHeight + marginTop + marginBottom;
      this.transitionTo(height$$1, el);
    },
    transitionTo: function transitionTo (newHeight, el) {
      var dropbar = this.$refs.dropbar;
      var oldHeight = isVisible(dropbar) ? height(dropbar) : 0;
      el = oldHeight < newHeight && el;
      css(el, { height: oldHeight, overflow: 'hidden' });
      height(dropbar, oldHeight);
      Transition.cancel([el, dropbar]);
      return Transition
        .start([el, dropbar], { height: newHeight }, this.duration)
        .catch(noop)
        .finally(function () { return css(el, { height: '', overflow: '' }); })
    }
  },
  mounted: function mounted () {
    var this$1 = this;
    var dropdowns = get(this, '$children', [])
      .filter(function (child) { return /NavbarNavDropdown/.test(child.$options.name); })
      .map(function (c) { return c.$children[0]; });
    dropdowns.forEach(function (drop) {
      drop.$vnode.data.class['uk-navbar-dropdown-dropbar'] = true;
      drop.$on(SHOW, function () {
        this$1.$nextTick(function () {
          this$1.transitionDropbar(drop.$el);
        });
      });
      drop.$on(HIDE, function () {
        this$1.$nextTick(function () {
          var thereAreActiveDrops = active && within(active.$el, this$1.$el);
          if (!thereAreActiveDrops) {
            this$1.transitionDropbar(drop.$el);
          }
        });
      });
    });
  },
  render: function render (h) {
    return h('div', {
      class: 'uk-position-relative'
    }, [
      this.$slots.default,
      h(ElementNavbarDropbar, {
        ref: 'dropbar',
        props: {
          slide: this.mode === 'slide'
        }
      })
    ])
  }
}

var navbar_Item = {
  name: 'VkNavbarItem',
  functional: true,
  render: ElementNavbarItem.render
}

var navbar_Logo = {
  name: 'VkNavbarLogo',
  functional: true,
  render: ElementNavbarLogo.render
}

var navbar_Toggle = {
  name: 'VkNavbarToggle',
  functional: true,
  props: ElementNavbarToggle.props,
  render: ElementNavbarToggle.render
}

var navbar_Nav = {
  name: 'VkNavbarNav',
  functional: true,
  render: ElementNavbarNav.render
}

var navbar_Nav_Item = {
  name: 'VkNavbarNavItem',
  functional: true,
  props: assign({}, ElementNavbarNavItem.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(ElementNavbarNavItem, mergeData(data, { props: props }))
  }
}

var SHOW$1 = constants.SHOW;
var navbar_Nav_Dropdown = {
  name: 'VkNavbarNavDropdown',
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String
    },
    justified: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: isRtl ? 'right' : 'left',
      validator: function (val) { return /^(left|center|right)$/.test(val); }
    },
    navbarAligned: {
      type: Boolean,
      default: false
    },
    mode: Drop.props.mode,
    offset: Drop.props.offset,
    animation: Drop.props.animation,
    duration: Drop.props.duration,
    delayShow: Drop.props.delayShow,
    delayHide: Drop.props.delayHide
  },
  computed: {
    navbar: function navbar () {
      return query('!.uk-navbar', this.$el)
    },
    dropbar: function dropbar () {
      return /NavbarDropbar/.test(get(this, '$parent.$options.name', ''))
        ? this.$parent
        : false
    }
  },
  mounted: function mounted () {
    var ref = this;
    var mode = ref.mode;
    var ref$1 = this.$refs.drop;
    var on = ref$1.on;
    var toggle = ref$1.toggle;
    var show = ref$1.show;
    var hide = ref$1.hide;
    var target = this.$refs.drop.$refs.target;
    if (/click/.test(mode) || hasTouch) {
      on(target, 'click', toggle);
    }
    if (/hover/.test(mode)) {
      on(target, pointerEnter, function (e) {
        if (isTouch(e)) {
          return
        }
        e.preventDefault();
        show();
      });
      on(this.dropbar ? this.dropbar.$el : target, pointerLeave, function (e) {
        if (isTouch(e)) {
          return
        }
        e.preventDefault();
        hide();
      });
    }
  },
  render: function render (h) {
    var this$1 = this;
    var obj, obj$1, obj$2;
    var ref = this;
    var title = ref.title;
    var justified = ref.justified;
    var mode = ref.mode;
    var align = ref.align;
    var navbarAligned = ref.navbarAligned;
    var subtitle = ref.subtitle;
    var defaultSlots = this.$slots.default || [];
    var childrenNodes = defaultSlots.filter(function (n) { return n.tag; });
    var colCount = childrenNodes.length;
    var Subtitle = subtitle && h('div', [ title, h('div', {
      class: 'uk-navbar-subtitle'
    }, subtitle) ]);
    return h('li', [
      h('a', [Subtitle || title]),
      h(Drop, {
        on: ( obj = {}, obj[SHOW$1] = function (e) {
            this$1.$forceUpdate();
          }, obj),
        nativeOn: ( obj$1 = {}, obj$1[pointerEnter] = function (e) {
            this$1.$refs.drop.clearTimers();
            if (/hover/.test(mode)) {
              this$1.$refs.drop.show();
            }
          }, obj$1[pointerLeave] = function (e) {
            if (!this$1.dropbar && /hover/.test(mode)) {
              this$1.$refs.drop.hide();
            }
          }, obj$1),
        ref: 'drop',
        class: ( obj$2 = {
          'uk-navbar-dropdown-dropbar': Boolean(this.dropbar),
          'uk-navbar-dropdown-boundary': justified || navbarAligned
        }, obj$2[("uk-navbar-dropdown-width-" + colCount)] = colCount > 1 && !justified, obj$2),
        props: assign({}, this.$props, {
          mode: '',
          position: justified
            ? 'bottom-justify'
            : ("bottom-" + align),
          mainClass: 'uk-navbar-dropdown',
          flip: justified ? 'x' : undefined,
          boundary: '!nav',
          boundaryAlign: justified || navbarAligned
        })
      }, [
        colCount >= 2
          ? h(Grid, {
            class: [
              'uk-navbar-dropdown-grid',
              ("uk-child-width-1-" + colCount + (colCount > 2 ? '@m' : ''))
            ]
          }, childrenNodes.map(function (child) { return h('div', [ child ]); }
          ))
          : defaultSlots
      ])
    ])
  }
}

var navbar_Nav_Dropdown_Nav = {
  name: 'VkNavbarNavDropdownNav',
  functional: true,
  render: ElementNavbarNavDropdownNav.render
}

export { ElementNavbar, ElementNavbarFull, ElementNavbarDropbar, ElementNavbarItem, ElementNavbarLogo, navbar_LogoLink as ElementNavbarLogoLink, ElementNavbarToggle, ElementNavbarNavigation, IconToggle as ElementNavbarToggleIcon, ElementNavbarNav, ElementNavbarNavItem, ElementNavbarNavDropdownNav, navbar as Navbar, navbarFull as NavbarFull, navbarDropbar as NavbarDropbar, navbar_Item as NavbarItem, navbar_Logo as NavbarLogo, navbar_Toggle as NavbarToggle, navbar_Nav as NavbarNav, navbar_Nav_Item as NavbarNavItem, navbar_Nav_Dropdown as NavbarNavDropdown, navbar_Nav_Dropdown_Nav as NavbarNavDropdownNav };