vuikit
Version:
A Vuejs component library based on UIkit
1,811 lines (1,717 loc) • 101 kB
JavaScript
/**
* Vuikit 0.7.0
* (c) 2018 Miljan Aleksic
* @license MIT
*/
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var util = require('vuikit/core/util');
var mergeData = _interopDefault(require('vuikit/core/helpers/vue-data-merge'));
var debug = require('vuikit/core/helpers/debug');
var event = require('vuikit/core/helpers/dom/event');
var Position = _interopDefault(require('vuikit/core/directives/position'));
var position = require('vuikit/core/helpers/dom/position');
var css = _interopDefault(require('vuikit/core/helpers/css'));
var env = require('vuikit/core/helpers/dom/env');
var _class = require('vuikit/core/helpers/dom/class');
var paginationMatrix = _interopDefault(require('vuikit/core/helpers/pagination/matrix'));
var attr = require('vuikit/core/helpers/dom/attr');
var animation = require('vuikit/core/helpers/dom/animation');
var breadcrumb = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"uk-breadcrumb"},[_vm._t("default")],2)},staticRenderFns: [],
name: 'Breadcrumb',
props: {
location: {
type: String,
default: '/'
}
},
computed: {
items: {
get: function get$$1 () {
return this.$slots.default.filter(function (c) { return c.componentOptions && c.componentOptions.tag === 'vk-breadcrumb-item'; }
)
},
cache: false
}
},
beforeMount: function beforeMount () {
this.updateItems();
},
beforeUpdate: function beforeUpdate () {
this.updateItems();
},
methods: {
updateItems: function updateItems () {
var this$1 = this;
this.items.forEach(function (item) {
var props = item.componentOptions.propsData;
props.active = this$1.location === props.path;
});
}
}
}
var breadcrumbItem = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:{ 'uk-active': _vm.active }},[(!_vm.disabled && !_vm.active)?_c('a',{on:{"click":function($event){$event.preventDefault();_vm.$parent.$emit('change', _vm.path);}}},[_vm._t("default",[_vm._v(" "+_vm._s(_vm.label)+" ")])],2):_c('span',[_vm._t("default",[_vm._v(" "+_vm._s(_vm.label)+" ")])],2)])},staticRenderFns: [],
name: 'BreadcrumbItem',
props: {
label: String,
path: {
type: String,
required: true
},
active: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
}
}
var sizes = ['large', 'small'];
var styles = ['default', 'primary', 'secondary', 'danger', 'text', 'link'];
var button = {
functional: true,
props: {
active: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'default',
validator: function (style) { return styles.indexOf(style) !== -1; }
},
size: {
type: String,
validator: function (size) { return !size || sizes.indexOf(size) !== -1; }
},
htmlType: {
type: String,
default: 'button'
}
},
render: function render (h, ref) {
var obj;
var data = ref.data;
var props = ref.props;
var children = ref.children;
var disabled = props.disabled;
var type = props.type;
var size = props.size;
var active = props.active;
var htmlType = props.htmlType;
var def = {
attrs: {
type: htmlType,
disabled: disabled
},
class: ['uk-button', ("uk-button-" + type), ( obj = {
'uk-active': active
}, obj[("uk-button-" + size)] = size, obj)]
};
return h('button', mergeData(data, def), [
children
])
}
}
var buttonGroupCheckbox = {
functional: true,
render: function render (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
var listeners = ref.listeners;
var buttons = children.filter(function (n) { return n.tag; });
if (!validate(data, buttons)) {
return
}
var groupValue = util.toArray(data.model.value);
buttons.forEach(function (btn) {
var index = buttons.indexOf(btn);
var value = btn.data.attrs.value;
var isActive = util.includes(groupValue, value);
if (isActive) {
btn.data.class.push('uk-active');
}
btn.data.on = {
click: function () {
if (isActive) {
groupValue.splice(index, 1);
} else {
groupValue.splice(index, 0, value);
}
listeners.input(groupValue);
}
};
});
return h('div', {
class: ['uk-button-group']
}, [
children
])
}
}
function validate (data, buttons) {
if (!data.model) {
debug.warn('ButtonGroupCheckbox declaration is missing the v-model directive.');
return false
}
var btnValues = buttons.map(function (btn) { return btn.data.attrs.value; });
if (util.includes(btnValues, undefined)) {
debug.warn("Some of the ButtonGroupCheckbox buttons declaration is missing the 'value' prop.");
return false
}
return true
}
var buttonGroupRadio = {
functional: true,
render: function render (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
var listeners = ref.listeners;
var buttons = children.filter(function (n) { return n.tag; });
if (!validate$1(data, buttons)) {
return
}
var groupValue = data.model.value;
buttons.forEach(function (btn) {
var value = btn.data.attrs.value;
if (value === groupValue) {
btn.data.class.push('uk-active');
}
btn.data.on = {
click: function () { return listeners.input(value); }
};
});
return h('div', {
class: ['uk-button-group']
}, [
children
])
}
}
function validate$1 (data, buttons) {
if (!data.model) {
debug.warn('ButtonGroupRadio declaration is missing the v-model directive.');
return false
}
var btnValues = buttons.map(function (btn) { return btn.data.attrs.value; });
if (util.includes(btnValues, undefined)) {
debug.warn("Some of the ButtonGroupRadio buttons declaration is missing the 'value' prop.");
return false
}
return true
}
var padding = ['small', 'large'];
var types = ['primary', 'secondary', 'blank'];
var Header = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-card-header' }, children);
}
};
var Body = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-card-body' }, children);
}
};
var Footer = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-card-footer' }, children);
}
};
var Badge = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-card-badge' }, children);
}
};
var card = {
functional: true,
props: {
type: {
type: String,
validator: function (val) { return !val || util.includes(types, val); }
},
padding: {
type: String,
validator: function (val) { return !val || util.includes(padding, val); }
},
hover: {
type: Boolean,
default: false
}
},
render: function render (h, ref) {
var obj;
var props = ref.props;
var children = ref.children;
var data = ref.data;
var slots = ref.slots;
var type = props.type;
var padding = props.padding;
var hover = props.hover;
var _slots = slots();
return h('div', mergeData(data, {
class: ['uk-card', ( obj = {
'uk-card-default': !util.includes(types, type),
'uk-card-hover': hover
}, obj[("uk-card-" + type)] = type, obj[("uk-card-" + padding)] = padding, obj)]
}), [
_slots.header && h(Header, _slots.header),
_slots.default && h(Body, _slots.default),
_slots.footer && h(Footer, _slots.footer),
_slots.badge && h(Badge, _slots.badge)
])
}
}
var cardTitle = {
functional: true,
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
var data = ref.data;
return h('h3', mergeData(data, { class: 'uk-card-title' }), children)
}
}
var isRtl = document.documentElement.getAttribute('dir') === 'rtl';
var positions = [
'top-left',
'top-center',
'top-right',
'top-justify',
'bottom-left',
'bottom-center',
'bottom-right',
'bottom-justify',
'left-top',
'left-center',
'left-bottom',
'right-top',
'right-center',
'right-bottom'
];
var Drop = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"position",rawName:"v-position",value:({
flip: _vm.flip,
target: _vm.$target,
position: _vm.$position,
boundary: _vm.$boundary,
classPrefix: 'uk-drop'
}),expression:"{\n flip,\n target: $target,\n position: $position,\n boundary: $boundary,\n classPrefix: 'uk-drop'\n }"}],class:['uk-drop', { 'uk-open': _vm.show }],style:(_vm.$style),on:{"mouseenter":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.triggerShow($event);},"mouseleave":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.hideOnLeave && _vm.triggerHide();}}},[_vm._t("default")],2)},staticRenderFns: [],
name: 'Drop',
directives: {
Position: Position
},
props: {
// a Dom element to attach to
target: {},
// a Dom element as boundary
boundary: {
default: function () { return window; }
},
// a Dom element where to append the drop
placement: {
default: function () { return document.body; }
},
show: {
type: Boolean,
required: true
},
flip: {
type: Boolean,
default: true
},
position: {
type: String,
default: ("bottom-" + (isRtl ? 'right' : 'left')),
validator: function (pos) { return util.includes(positions, pos); }
},
triggers: {
type: String,
default: 'hover focus'
},
showDelay: {
type: Number,
default: 0
},
hideDelay: {
type: Number,
default: 100
},
// determines if hide should be
// trriggered on drop mouseleave
hideOnLeave: {
type: Boolean,
default: true
},
// determines if hide should be
// trriggered on click outside
hideOnClick: {
type: Boolean,
default: true
}
},
computed: {
$position: function $position () {
return this.position.replace('justify', 'center')
},
$dir: function $dir () {
return this.position.split('-')[0]
},
$align: function $align () {
return this.position.split('-')[1]
},
$style: function $style () {
var style = {};
var isJustified = this.$align === 'justify';
if (!this.target || !isJustified) {
return style
}
var rect = this.target.getBoundingClientRect();
var prop = position.getPositionAxis(this.position) === 'y'
? 'width'
: 'height';
style[prop] = (rect[prop]) + "px";
return style
},
$target: function $target () {
return util.isString(this.target)
? util.get(this.$vnode.context.$refs, this.target)
: this.target
},
$boundary: function $boundary () {
return util.isString(this.boundary)
? util.get(this.$vnode.context.$refs, this.boundary)
: this.boundary
},
$placement: function $placement () {
return util.isString(this.placement)
? util.get(this.$vnode.context.$refs, this.placement)
: this.placement
}
},
watch: {
triggers: function triggers () {
this.removeTargetEvents(this.target);
this.setTargetEvents(this.target);
},
target: function target (target$1, oldTarget) {
this.removeTargetEvents(oldTarget);
this.setTargetEvents();
},
show: function show (val) {
var this$1 = this;
if (val && this.triggers.match(/click/) && this.hideOnClick) {
// trigger events when clicked outside drop
event.on(window.document, 'click', function (e) {
var clickInside = this$1.$el.contains(e.target);
if (clickInside) {
return
}
this$1.triggerHide();
}, this._uid);
} else {
event.off(window.document, 'click', this._uid);
}
}
},
methods: {
removeTargetEvents: function removeTargetEvents (target) {
if (!target) {
return
}
event.off(target, 'click mouseenter mouseleave focusin focusout', this._uid);
},
setTargetEvents: function setTargetEvents () {
if (!this.$target) {
return
}
if (this.triggers.match(/click/)) {
event.on(this.$target, 'click', this.toggleShow, this._uid);
}
if (this.triggers.match(/hover/)) {
event.on(this.$target, 'mouseenter', this.triggerShow, this._uid);
event.on(this.$target, 'mouseleave', this.triggerHide, this._uid);
}
if (this.triggers.match(/focus/)) {
event.on(this.$target, 'focusin', this.triggerShow, this._uid);
event.on(this.$target, 'focusout', this.triggerHide, this._uid);
}
},
triggerShow: function triggerShow () {
var this$1 = this;
clearTimeout(this.hideTimeout);
this.showTimeout = setTimeout(function () {
this$1.$emit('update:show', true);
}, this.showDelay);
},
triggerHide: function triggerHide () {
var this$1 = this;
clearTimeout(this.showTimeout);
this.hideTimeout = setTimeout(function () {
this$1.$emit('update:show', false);
}, this.hideDelay);
},
toggleShow: function toggleShow () {
this.show
? this.triggerHide()
: this.triggerShow();
}
},
mounted: function mounted () {
// placed in root to avoid being styled
// from parent elements rules
if (this.$placement) {
this.$placement.appendChild(this.$el);
}
// set events
this.setTargetEvents();
},
beforeDestroy: function beforeDestroy () {
if (this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
}
var Dropdown = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"position",rawName:"v-position",value:({
flip: _vm.flip,
target: _vm.$target,
position: _vm.$position,
boundary: _vm.$boundary,
classPrefix: 'uk-dropdown',
}),expression:"{\n flip,\n target: $target,\n position: $position,\n boundary: $boundary,\n classPrefix: 'uk-dropdown',\n }"}],class:['uk-dropdown', { 'uk-open': _vm.show }],style:(_vm.$style),on:{"mouseenter":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.triggerShow($event);},"mouseleave":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.hideOnLeave && _vm.triggerHide();}}},[_vm._t("default")],2)},staticRenderFns: [],
name: 'Dropdown',
extends: Drop
}
var dropdownNav = {
functional: true,
props: Dropdown.props,
render: function (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
return h(Dropdown, mergeData(data, { props: props }), [
h('ul', { class: 'uk-nav uk-dropdown-nav' }, children)
]);
}
}
var VkIcon = {
functional: true,
props: {
name: {
type: String,
default: ''
},
viewBox: String,
ratio: [String, Number],
width: [String, Number],
height: [String, Number]
},
render: function (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
return h('span', mergeData(data, { class: ['uk-icon'] }), [
props.name
? h(("icon-" + (props.name)), { props: props })
: children
]);
}
}
var VkIconLink = {
functional: true,
props: mergeData(VkIcon.props, {
reset: {
type: Boolean,
default: false
}
}),
render: function (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
return h('a', mergeData(data, {
class: ['uk-icon', {
'uk-icon-link': props.reset
}]
}), [
props.name
? h(("icon-" + (props.name)), { props: props })
: children
]);
}
}
var iconButton = {
functional: true,
props: VkIcon.props,
render: function (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
return h('a', mergeData(data, { class: 'uk-icon uk-icon-button' }), [
props.name
? h(("icon-" + (props.name)), { props: props })
: children
]);
}
}
var iconnav = {
functional: true,
render: function (h, ref) {
var children = ref.children;
var data = ref.data;
return h('ul', mergeData(data, { class: 'uk-iconnav' }), children);
}
}
var iconnavItem = {
functional: true,
props: {
active: {
type: Boolean,
default: false
},
icon: {
type: String,
required: true
}
},
render: function render (h, ref) {
var props = ref.props;
var data = ref.data;
var active = props.active;
var icon = props.icon;
return h('li', { class: { 'uk-active': active } }, [
h(VkIconLink, mergeData(data, {
props: { name: icon }
}))
])
}
}
var iconnavVertical = {
functional: true,
render: function (h, ref) {
var children = ref.children;
var data = ref.data;
return h('ul', mergeData(data, { class: 'uk-iconnav uk-iconnav-vertical' }), children);
}
}
var obj;
var label = {
functional: true,
props: {
type: {
type: String,
default: '',
validator: function (val) { return !val || util.includes(['success', 'warning', 'danger'], val); }
}
},
render: function (h, ref) {
var data = ref.data;
var props = ref.props;
var children = ref.children;
return h('span', mergeData(data, {
class: ['uk-label', ( obj = {}, obj[("uk-label-" + (props.type))] = props.type, obj)]
}), children);
}
}
var doc = document.documentElement;
var active;
var activeModals;
var core = {
props: {
show: {
type: Boolean,
default: false
},
closeOnKey: {
type: [Number, Boolean],
default: 27
},
closeOnBg: {
type: Boolean,
default: true
}
},
methods: {
beforeEnter: function beforeEnter () {
_class.addClass(doc, 'uk-modal-page');
},
enter: function enter (el, done) {
el.offsetWidth;
_class.addClass(el, 'uk-open');
event.one(el, env.transitionend, done, function (e) { return e.target === el; });
},
afterEnter: function afterEnter () {
activeModals++;
if (active) {
active.$emit('update:show', false);
}
active = this;
},
beforeLeave: function beforeLeave (el) {
_class.removeClass(el, 'uk-open');
},
leave: function leave (el, done) {
event.one(el, env.transitionend, done, function (e) { return e.target === el; });
},
afterLeave: function afterLeave () {
activeModals--;
if (!activeModals) {
_class.removeClass(doc, 'uk-modal-page');
}
if (active === this) {
active = null;
}
}
},
mounted: function mounted () {
var this$1 = this;
this.$root.$el.appendChild(this.$el);
event.on(window, 'resize', util.debounce(function () {
if (!this$1.show) {
return
}
this$1.updateOverflowAuto();
}, 30), this._uid);
event.on(doc, 'keyup', function (e) {
if (this$1.closeOnKey && e.keyCode === this$1.closeOnKey) {
e.preventDefault();
this$1.$emit('update:show', false);
}
}, this._uid);
},
beforeDestroy: function beforeDestroy () {
event.off(doc, 'key', this._uid);
event.off(window, 'resize', this._uid);
this.$root.$el.removeChild(this.$el);
this.afterLeave();
}
}
var ModalTransition = {
functional: true,
render: function render (h, ref) {
var modal = ref.parent;
var children = ref.children;
var data = ref.data;
var def = {
props: {
css: false
},
on: {
beforeEnter: modal.beforeEnter,
enter: modal.enter,
afterEnter: modal.afterEnter,
beforeLeave: modal.beforeLeave,
leave: modal.leave,
afterLeave: modal.afterLeave
}
};
return h('transition', mergeData(data, def), children)
}
}
var IconClose = {
functional: true,
render: function (h, ctx) {
var props = ctx.props;
var ratio = props.ratio || 1;
var width$$1 = props.width || 14;
var height$$1 = props.height || 14;
var viewBox = props.viewBox || '0 0 14 14';
if (ratio !== 1) {
width$$1 = width$$1 * ratio;
height$$1 = height$$1 * ratio;
}
return h('svg', {
attrs: {
version: '1.1',
meta: 'icon-close-icon ratio-' + ratio,
width: width$$1,
height: height$$1,
viewBox: viewBox
},
domProps: {
innerHTML: '<path fill="none" stroke="#000" stroke-width="1.1" d="M1 1l12 12M13 1L1 13"/>'
}
})
}
}
var IconCloseLarge = {
functional: true,
render: function (h, ctx) {
var props = ctx.props;
var ratio = props.ratio || 1;
var width$$1 = props.width || 20;
var height$$1 = props.height || 20;
var viewBox = props.viewBox || '0 0 20 20';
if (ratio !== 1) {
width$$1 = width$$1 * ratio;
height$$1 = height$$1 * ratio;
}
return h('svg', {
attrs: {
version: '1.1',
meta: 'icon-close-large ratio-' + ratio,
width: width$$1,
height: height$$1,
viewBox: viewBox
},
domProps: {
innerHTML: '<path fill="none" stroke="#000" stroke-width="1.4" d="M1 1l18 18M19 1L1 19"/>'
}
})
}
}
var ModalBtnClose = {
functional: true,
props: ['type'],
render: function render (h, ref) {
var data = ref.data;
var props = ref.props;
var type = props.type;
var large = type === 'large';
var outside = type === 'outside';
var def = {
class: ['uk-close', 'uk-icon', {
'uk-modal-close-large': large,
'uk-modal-close-outside': outside
}],
attrs: {
type: 'button'
}
};
return h('button', mergeData(data, def), [
large
? h(IconCloseLarge)
: h(IconClose)
])
}
}
var modal = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('modal-transition',{on:{"enter":_vm.updateOverflowAuto}},[(_vm.show)?_c('div',{ref:"modal",class:['uk-modal', { 'uk-modal-container': _vm.container, 'uk-flex uk-flex-top': _vm.center }],style:({
display: _vm.center
? ''
: 'block'
}),on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.closeOnBg && _vm.$emit('update:show', false);}}},[_c('div',{ref:"dialog",class:['uk-modal-dialog', _vm.widthClasses, { 'uk-margin-auto-vertical': _vm.center }]},[(_vm.closeBtn)?_c('modal-btn-close',{staticClass:"uk-modal-close-default",attrs:{"type":_vm.closeBtn},on:{"click":function($event){_vm.$emit('update:show', false);}}}):_vm._e(),_vm._v(" "),(_vm.$slots.header)?_c('div',{ref:"header",staticClass:"uk-modal-header"},[_vm._t("header")],2):_vm._e(),_vm._v(" "),_vm._t("dialog"),_vm._v(" "),(_vm.$slots.default)?_c('div',{ref:"body",class:['uk-modal-body', { 'uk-overflow-auto': _vm.overflowAuto }]},[_vm._t("default")],2):_vm._e(),_vm._v(" "),(_vm.$slots.footer)?_c('div',{ref:"footer",staticClass:"uk-modal-footer"},[_vm._t("footer")],2):_vm._e()],2)]):_vm._e()])},staticRenderFns: [],
name: 'Modal',
extends: core,
components: {
ModalBtnClose: ModalBtnClose,
ModalTransition: ModalTransition
},
props: {
// determines if close button should be displayed
closeBtn: {
type: [Boolean, String],
default: false,
validator: function (val) { return !val || util.includes([true, 'outside'], val); }
},
// determines if the modal should auto
// adjust the height overflow
overflowAuto: {
type: Boolean,
default: false
},
// expands the modal dialog to the default Container width
container: {
type: Boolean,
default: false
},
// vertically centers the modal dialog
center: {
type: Boolean,
default: false
},
// allows setting the dialog with using the uk-width-* classes
width: {
type: String,
default: ''
}
},
computed: {
widthClasses: function widthClasses () {
return this.width
? this.width.split(' ').map(function (width$$1) { return ("uk-width-" + width$$1); })
: ''
}
},
methods: {
updateOverflowAuto: function updateOverflowAuto () {
if (!this.overflowAuto) {
return
}
var modal = this.$el;
var modalBody = this.$refs.body;
var modalDialog = this.$refs.dialog;
css(modalBody, 'maxHeight', '150px');
var maxHeight = Math.max(150, 150 + position.height(modal) - modalDialog.offsetHeight);
css(modalBody, 'maxHeight', (maxHeight + "px"));
}
}
}
var modalFull = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('modal-transition',[(_vm.show)?_c('div',{staticClass:"uk-modal uk-modal-full",staticStyle:{"display":"block"}},[_c('div',{staticClass:"uk-modal-dialog uk-flex uk-flex-center uk-flex-middle",staticStyle:{"box-sizing":"border-box","min-height":"100vh","height":"100vh"}},[(_vm.closeBtn)?_c('modal-btn-close',{staticClass:"uk-modal-close-full",attrs:{"type":_vm.closeBtn},on:{"click":function($event){_vm.$emit('update:show', false);}}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)]):_vm._e()])},staticRenderFns: [],
name: 'ModalFull',
extends: core,
components: {
ModalBtnClose: ModalBtnClose,
ModalTransition: ModalTransition
},
props: {
// determines if close button should be displayed
closeBtn: {
type: [Boolean, String],
default: true,
validator: function (val) { return !val || util.includes([true, 'large'], val); }
}
}
}
var nav = {
functional: true,
props: {
center: {
type: Boolean,
default: false
},
primary: {
type: Boolean,
default: false
}
},
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
var data = ref.data;
var center = props.center;
var primary = props.primary;
return h('ul', mergeData(data, {
class: ['uk-nav', {
'uk-nav-center': center,
'uk-nav-default': !primary,
'uk-nav-primary': primary
}]
}), children)
}
}
var navItem = {
functional: true,
props: {
active: {
type: Boolean,
default: false
},
label: {
type: String,
required: true
},
icon: {
type: String
}
},
render: function render (h, ref) {
var props = ref.props;
var data = ref.data;
var active = props.active;
var label = props.label;
var icon = props.icon;
return h('li', mergeData(data, { class: { 'uk-active': active } }), [
h('a', [
icon && h(VkIcon, {
class: 'uk-margin-small-right',
props: { icon: icon }
}),
label
])
])
}
}
var navItemHeader = {
functional: true,
props: {
label: {
type: String,
required: true
}
},
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
return h('li', {
class: 'uk-nav-header'
}, [
props.label
])
}
}
var navItemParent = {
functional: true,
label: {
type: String,
required: true
},
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
var data = ref.data;
return h('li', mergeData(data, {
class: 'uk-parent'
}), [
h('a', [
props.label
]),
h('ul', {
class: 'uk-nav-sub'
}, children)
])
}
}
var navItemDivider = {
functional: true,
render: function render (h, ref) {
var children = ref.children;
return h('li', {
class: 'uk-nav-divider'
})
}
}
var LeftSlot = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-navbar-left' }, children);
}
};
var CenterSlot = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-navbar-center' }, children);
}
};
var RightSlot = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-navbar-right' }, children);
}
};
var navbar = {
functional: true,
props: {
transparent: {
type: Boolean,
default: false
},
container: {
type: String,
validator: function (val) { return util.includes(['expand', 'small', 'large'], val); }
}
},
render: function render (h, ref) {
var slots = ref.slots;
var props = ref.props;
var data = ref.data;
var container = props.container;
var transparent = props.transparent;
var _slots = slots();
var content = [
(_slots.default || _slots.left) && h(LeftSlot, (_slots.default || _slots.left)),
_slots.center && h(CenterSlot, _slots.center),
_slots.right && h(RightSlot, _slots.right)
];
return h('nav', mergeData(data, {
class: ['uk-navbar-container', {
'uk-navbar-transparent': transparent
}]
}), [
h('div', {
class: ['uk-container', {
'uk-container-small': container === 'small',
'uk-container-large': container === 'large',
'uk-container-expand': container === 'expand'
}]
}, [
h('div', { class: 'uk-navbar' }, content)
])
])
}
}
var navbarItem = {
functional: true,
render: function render (h, ref) {
var children = ref.children;
var data = ref.data;
return h('div', mergeData(data, { class: 'uk-navbar-item' }), children)
}
}
var IconToggle = {
functional: true,
render: function (h, ctx) {
var props = ctx.props;
var ratio = props.ratio || 1;
var width$$1 = props.width || 20;
var height$$1 = props.height || 20;
var viewBox = props.viewBox || '0 0 20 20';
if (ratio !== 1) {
width$$1 = width$$1 * ratio;
height$$1 = height$$1 * ratio;
}
return h('svg', {
attrs: {
version: '1.1',
meta: 'icon-navbar-toggle-icon ratio-' + ratio,
width: width$$1,
height: height$$1,
viewBox: viewBox
},
domProps: {
innerHTML: '<path d="M0 9h20v2H0zM0 3h20v2H0zM0 15h20v2H0z"/>'
}
})
}
}
var NavbarToggleIcon = {
functional: true,
render: function (h) { return h('span', { class: 'uk-navbar-toggle-icon uk-icon' }, [ h(IconToggle) ]); }
};
var NavbarToggleLabel = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('span', { class: 'uk-margin-small-left' }, children);
}
};
var navbarToggle = {
functional: true,
props: {
label: {
type: String,
default: ''
}
},
render: function render (h, ref) {
var children = ref.children;
var data = ref.data;
var props = ref.props;
var label = props.label;
return h('a', mergeData(data, { class: 'uk-navbar-toggle' }), [
h(NavbarToggleIcon),
label && h(NavbarToggleLabel, label)
])
}
}
var navbarNav = {
functional: true,
render: function render (h, ref) {
var children = ref.children;
var data = ref.data;
return h('ul', mergeData(data, { class: 'uk-navbar-nav' }), children)
}
}
var Subtitle = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', { class: 'uk-navbar-subtitle' }, children);
}
};
var navbarNavItem = {
functional: true,
props: {
active: {
type: Boolean,
default: false
},
label: {
type: String,
required: true
},
subtitle: {
type: String,
default: ''
}
},
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
var data = ref.data;
var active = props.active;
var label = props.label;
var subtitle = props.subtitle;
return h('li', mergeData(data, { class: { 'uk-active': active } }), [
h('a', [
subtitle
? h('div', [ label, h(Subtitle, subtitle) ])
: label
]),
children
])
}
}
var navbarNavDropdown = {
functional: true,
props: {
open: {
type: Boolean,
default: false
}
},
render: function render (h, ref) {
var props = ref.props;
var children = ref.children;
var data = ref.data;
var open = props.open;
return h('div', mergeData(data, {
class: ['uk-navbar-dropdown', {
'uk-open': open
}]
}), [
h('ul', { class: 'uk-nav uk-navbar-dropdown-nav' }, children)
])
}
}
var status = [
'primary',
'success',
'warning',
'danger'
];
var NotificationMessage = {
functional: true,
props: {
status: {
type: String,
default: '',
validator: function (val) { return !val || status.indexOf(val) !== -1; }
},
transition: {
type: String,
default: ''
}
},
render: function render (h, ref) {
var parent = ref.parent;
var props = ref.props;
var children = ref.children;
var data = ref.data;
var status = props.status;
var def = {
class: ['uk-notification-message']
};
if (status) {
def.class.push(("uk-notification-message-" + status));
}
return h('div', mergeData(data, def), [
children
])
}
}
var timeouts = {};
var defaultTimeout = 4500;
var positions$1 = [
'bottom-left',
'bottom-center',
'bottom-right',
'top-left',
'top-center',
'top-right'
];
var notification = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[ 'uk-notification', ("uk-notification-" + (this.position)) ]},_vm._l((_vm.normalizedNfcs),function(n){return _c('notification-message',{key:n.key || n.message,attrs:{"status":n.status,"timeout":n.timeout},on:{"click":function($event){_vm.remove(n);},"mouseenter":function($event){_vm.cancelTimeout(n);},"mouseleave":function($event){_vm.initTimeout(n);}}},[_vm._t("default",[_vm._v(" "+_vm._s(n.message)+" ")],{message:n.message})],2)}))},staticRenderFns: [],
name: 'Notification',
components: {
NotificationMessage: NotificationMessage
},
props: {
notifications: {
type: Array,
default: function () { return []; }
// validator: val => {
// const ntfs = val.filter(isObject)
// }
},
position: {
type: String,
default: 'top-center',
validator: function (pos) { return positions$1.indexOf(pos) !== -1; }
}
},
computed: {
normalizedNfcs: function normalizedNfcs () {
var this$1 = this;
return this.notifications.map(function (n) {
if (!util.isObject(n)) {
debug.warn('The Notification value must be an Object');
return
}
this$1.initTimeout(n);
return n
})
}
},
methods: {
remove: function remove (n) {
var index = this.notifications.indexOf(n);
if (index !== -1) {
var notifications = util.cloneArray(this.notifications);
notifications.splice(index, 1);
this.$emit('update:notifications', notifications);
}
},
initTimeout: function initTimeout (n) {
var this$1 = this;
var timeout = n.timeout || defaultTimeout;
if (!util.isInteger(timeout)) {
debug.warn('Notification timeout is invalid');
}
var id = getId(n);
var timeoutIsSet = !util.isUndefined(timeouts[id]);
var timeoutShouldBeSet = timeout > 0;
if (timeoutShouldBeSet && !timeoutIsSet) {
var timeoutId = setTimeout(function () {
this$1.remove(n);
delete timeouts[id];
}, timeout);
timeouts[id] = timeoutId;
}
},
cancelTimeout: function cancelTimeout (n) {
var id = getId(n);
var timeoutIsSet = !util.isUndefined(timeouts[id]);
if (timeoutIsSet) {
clearTimeout(timeouts[id]);
delete timeouts[id];
}
}
},
mounted: function mounted () {
document.body.appendChild(this.$el);
},
beforeDestroy: function beforeDestroy () {
if (this.$el.parentNode) {
document.body.removeChild(this.$el);
}
}
}
function getId (n) {
var msg = n.message.replace(/ /g, '');
var key = n.key || 'key';
var timeout = n.timeout || 0;
return (msg + "-" + key + "-" + timeout)
}
var win$1 = window;
var body = document.body;
var doc$2 = document.documentElement;
var scroll;
var active$1;
var activeCount;
var scrollbarWidth;
function common (vm) { return ({
on: {
beforeEnter: function beforeEnter (el) {
scrollbarWidth = position.width(win$1) - doc$2.offsetWidth;
scroll = scroll || { x: win$1.pageXOffset, y: win$1.pageYOffset };
_class.addClass(doc$2, 'uk-offcanvas-page');
_class.addClass(body, 'uk-offcanvas-container');
if (vm.flip) {
_class.addClass(body, 'uk-offcanvas-flip');
_class.addClass(vm.$refs.bar, 'uk-offcanvas-bar-flip');
}
if (vm.overlay) {
_class.addClass(el, 'uk-offcanvas-overlay');
_class.addClass(body, 'uk-offcanvas-overlay');
}
},
afterEnter: function afterEnter (el) {
if (vm.overlay) {
position.width(vm.$refs.content, position.width(win$1) - scrollbarWidth);
position.height(vm.$refs.content, position.height(win$1));
if (scroll) {
vm.$refs.content.scrollTop = scroll.y;
}
}
if (!activeCount) {
setGlobalEvents();
}
active$1 = vm;
activeCount++;
},
afterLeave: function afterLeave (el) {
if (!vm.overlay) {
scroll = { x: win$1.pageXOffset, y: win$1.pageYOffset };
} else if (!scroll) {
var ref = vm.$refs.content;
var x = ref.scrollLeft;
var y = ref.scrollTop;
scroll = { x: x, y: y };
}
_class.removeClass(body, 'uk-offcanvas-flip');
_class.removeClass(vm.$refs.bar, 'uk-offcanvas-bar-flip');
_class.removeClass(doc$2, 'uk-offcanvas-page');
_class.removeClass(body, 'uk-offcanvas-container');
_class.removeClass(el, 'uk-offcanvas-overlay');
_class.removeClass(body, 'uk-offcanvas-overlay');
body.scrollTop = scroll.y;
css(body, 'overflowY', '');
css(doc$2, 'overflowY', '');
position.width(vm.$refs.content, '');
position.height(vm.$refs.content, '');
win$1.scrollTo(scroll.x, scroll.y);
scroll = null;
activeCount--;
if (!activeCount) {
unsetGlobalEvents();
}
if (active$1 === vm) {
active$1 = null;
}
}
}
}); }
function unsetGlobalEvents () {
event.offAll('vk-offcanvas');
}
function setGlobalEvents () {
event.on(doc$2, 'click', function (e) {
var clickOut = !active$1.$el.contains(e.target);
var clickOnOverlay = e.target === active$1.$el && active$1.overlay;
if (clickOut || clickOnOverlay) {
active$1.hide();
}
}, 'vk-offcanvas');
event.on(doc$2, 'keyup', function (e) {
if (e.keyCode === 27 && active$1) {
e.preventDefault();
active$1.hide();
}
}, 'vk-offcanvas');
}
var win = window;
var doc$1 = document.documentElement;
var VkOffcanvasTransitionNone = {
functional: true,
render: function render (h, ref) {
var vm = ref.parent;
var data = ref.data;
var children = ref.children;
var def = {
props: {
css: false
},
on: {
enter: function (el, done) { return done(); },
leave: function (el, done) { return done(); },
beforeEnter: function beforeEnter (el) {
var scrollbarWidth = position.width(win) - doc$1.offsetWidth;
css(doc$1, 'overflowY', scrollbarWidth && vm.overlay
? 'scroll'
: ''
);
_class.addClass(el, 'uk-open');
_class.addClass(vm.$refs.bar, 'uk-offcanvas-none');
},
afterLeave: function afterLeave (el) {
_class.removeClass(el, 'uk-open');
_class.removeClass(vm.$refs.bar, 'uk-offcanvas-none');
}
}
};
return h('transition', mergeData(data, def, common(vm)), children)
}
}
var win$2 = window;
var doc$3 = document.documentElement;
var VkOffcanvasTransitionPush = {
functional: true,
render: function render (h, ref) {
var vm = ref.parent;
var data = ref.data;
var children = ref.children;
var def = {
props: {
css: false
},
on: {
beforeEnter: function beforeEnter (el) {
var scrollbarWidth = position.width(win$2) - doc$3.offsetWidth;
css(doc$3, 'overflowY', vm.flip && scrollbarWidth && vm.overlay
? 'scroll'
: ''
);
_class.addClass(vm.$refs.bar, 'uk-offcanvas-bar-animation uk-offcanvas-push');
},
enter: function enter (el, done) {
position.height(el);
_class.addClass(el, 'uk-open');
_class.addClass(vm.$refs.content, 'uk-offcanvas-content-animation');
event.one(el, env.transitionend, done, function (e) { return e.target === vm.$refs.bar; });
},
beforeLeave: function beforeLeave (el) {
_class.removeClass(el, 'uk-open');
_class.removeClass(vm.$refs.content, 'uk-offcanvas-content-animation');
},
leave: function leave (el, done) {
var bar = vm.$refs.bar;
event.one(el, env.transitionend, done, function (e) { return e.target === bar; });
},
afterLeave: function afterLeave (el) {
_class.removeClass(vm.$refs.bar, 'uk-offcanvas-bar-animation uk-offcanvas-push');
}
}
};
return h('transition', mergeData(data, def, common(vm)), children)
}
}
var win$3 = window;
var doc$4 = document.documentElement;
var VkOffcanvasTransitionSlide = {
functional: true,
render: function render (h, ref) {
var vm = ref.parent;
var data = ref.data;
var children = ref.children;
var def = {
props: {
css: false
},
on: {
beforeEnter: function beforeEnter (el) {
var scrollbarWidth = position.width(win$3) - doc$4.offsetWidth;
css(doc$4, 'overflowY', scrollbarWidth && vm.overlay
? 'scroll'
: ''
);
_class.addClass(vm.$refs.bar, 'uk-offcanvas-bar-animation uk-offcanvas-slide');
},
enter: function enter (el, done) {
position.height(el);
_class.addClass(el, 'uk-open');
event.one(el, env.transitionend, done, function (e) { return e.target === vm.$refs.bar; });
},
beforeLeave: function beforeLeave (el) {
_class.removeClass(el, 'uk-open');
},
leave: function leave (el, done) {
var bar = vm.$refs.bar;
event.one(el, env.transitionend, done, function (e) { return e.target === bar; });
},
afterLeave: function afterLeave (el) {
_class.removeClass(vm.$refs.bar, 'uk-offcanvas-bar-animation uk-offcanvas-slide');
}
}
};
return h('transition', mergeData(data, def, common(vm)), children)
}
}
var win$4 = window;
var doc$5 = document.documentElement;
var VkOffcanvasTransitionReveal = {
functional: true,
render: function render (h, ref) {
var vm = ref.parent;
var data = ref.data;
var children = ref.children;
var wrapper = vm.$refs.wrapper;
var bar;
var def = {
props: {
css: false
},
on: {
beforeEnter: function beforeEnter (el) {
var scrollbarWidth = position.width(win$4) - doc$5.offsetWidth;
position.width(vm.$refs.content, position.width(win$4) - scrollbarWidth);
css(doc$5, 'overflowY', vm.flip && scrollbarWidth && vm.overlay
? 'scroll'
: ''
);
wrapper = document.createElement('div');
_class.addClass(wrapper, 'uk-offcanvas-reveal');
el.appendChild(wrapper);
wrapper.appendChild(vm.$refs.bar);
vm.$refs.wrapper = wrapper;
},
enter: function enter (el, done) {
position.height(el);
_class.addClass(el, 'uk-open');
_class.addClass(vm.$refs.content, 'uk-offcanvas-content-animation');
event.one(el, env.transitionend, done, function (e) { return e.target === wrapper; });
},
beforeLeave: function beforeLeave (el) {
bar = vm.$refs.bar;
_class.removeClass(el, 'uk-open');
_class.removeClass(vm.$refs.content, 'uk-offcanvas-content-animation');
},
leave: function leave (el, done) {
event.one(el, env.transitionend, done, function (e) { return e.target === wrapper; });
},
afterLeave: function afterLeave (el) {
el.appendChild(bar);
el.removeChild(wrapper);
}
}
};
return h('transition', mergeData(data, def, common(vm)), children)
}
}
var offcanvas = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(("vk-offcanvas-transition-" + (_vm.transition)),{tag:"component"},[(_vm.show)?_c('div',{staticClass:"uk-offcanvas",staticStyle:{"display":"block"}},[_c('div',{ref:"bar",staticClass:"uk-offcanvas-bar"},[_vm._t("default")],2)]):_vm._e()])},staticRenderFns: [],
name: 'Offcanvas',
components: {
VkOffcanvasTransitionNone: VkOffcanvasTransitionNone,
VkOffcanvasTransitionPush: VkOffcanvasTransitionPush,
VkOffcanvasTransitionSlide: VkOffcanvasTransitionSlide,
VkOffcanvasTransitionReveal: VkOffcanvasTransitionReveal
},
props: {
show: {
type: Boolean,
default: false
},
flip: {
type: Boolean,
default: false
},
overlay: {
type: Boolean,
default: false
},
transition: {
type: String,
default: 'slide',
validator: function (mode) { return mode.match(/none|slide|push|reveal/); }
}
},
methods: {
hide: function hide () {
this.$emit('update:show', false);
}
},
mounted: function mounted () {
this.$refs.content = document.body.querySelector(".uk-offcanvas-content");
if (!this.$refs.content) {
debug.warn('Offcanvas content is not detected, make sure to wrap the content with VkOffcanvasContent or a custom div.uk-offcanvas-content.', this);
this.$destroy();
}
}
}
var offcanvasContent = {
functional: true,
render: function (h, ref) {
var children = ref.children;
return h('div', {
class: 'uk-offcanvas-content'
}, children);
}
}
var offcanvasClose = {
functional: true,
render: function (h, ref) {
var data = ref.data;
return h('button', {
class: 'uk-offcanvas-close uk-close uk-icon',
attrs: {
type: 'button'
},
on: data.on
}, [
h(IconClose)
]);
}
}
var IconNext = {
functional: true,
render: function (h, ctx) {
var props = ctx.props;
var ratio = props.ratio || 1;
var width$$1 = props.width || 7;
var height$$1 = props.height || 12;
var viewBox = props.viewBox || '0 0 7 12';
if (ratio !== 1) {
width$$1 = width$$1 * ratio;
height$$1 = height$$1 * ratio;
}
return h('svg', {
attrs: {
version: '1.1',
meta: 'icon-pagination-next ratio-' + ratio,
width: width$$1,
height: height$$1,
viewBox: viewBox
},
domProps: {
innerHTML: '<path fill="none" stroke="#000" stroke-width="1.2" d="M1 1l5 5-5 5"/>'
}
})
}
}
var PaginationLast = {
functional: true,
props: ['label', 'expand'],
render: function render (h, ref) {
var props = ref.props;
var parent = ref.parent;
var label = props.label;
var expand = props.expand;
if (!(parent.$options && parent.$options._componentTag === 'vk-pagination')) {
return h('li', { attrs: { label: label, expand: expand } }, 'last')
}
return h('li', {
class: {
'uk-disabled': parent.nextPage > parent.lastPage,
'uk-margin-auto-left': expand !== undefined
}
}, [
h('a', {
on: { click: function (e) { return parent.$emit('update:page', parent.lastPage); } }
}, [
label && label,
h('span', {
staticClass: 'uk-icon uk-pagination-next',
class: {
'uk-margin-small-left': label
}
}, [ h(IconNext) ])
])
])
}
}
var IconPrevious = {
functional: true,
render: function (h, ctx) {
var props = ctx.props;
var ratio = props.ratio || 1;
var width$$1 = props.width || 7;
var height$$1 = props.height || 12;
var viewBox = props.viewBox || '0 0 7 12';
if (ratio !== 1) {
width$$1 = width$$1 * ratio;
height$$1 = height$$1 * ratio;
}
return h('svg', {
attrs: {
version: '1.1',
meta: 'icon-pagination-previous ratio-' + ratio,
width: width$$1,
height: height$$1,
viewBox: viewBox
},
domProps: {
innerHTML: '<path fill="none" stroke="#000" stroke-width="1.2" d="M6 1L1 6l5 5"/>'
}
})
}
}
var PaginationPrev = {
functional: true,
props: ['label', 'expand'],
render: function render (h, ref) {
var props = ref.props;
var