UNPKG

vue-uiv

Version:

Bootstrap 3 components implemented by Vue 2.

1,646 lines (1,541 loc) 140 kB
import Vue from 'vue'; function isExist(obj) { return typeof obj !== 'undefined' && obj !== null; } function isFunction(obj) { return typeof obj === 'function'; } function isNumber(obj) { return typeof obj === 'number'; } function isString(obj) { return typeof obj === 'string'; } function isBoolean(obj) { return typeof obj === 'boolean'; } function isPromiseSupported() { return typeof window !== 'undefined' && isExist(window.Promise); } var Carousel = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "carousel slide", attrs: { "data-ride": "carousel" }, on: { "mouseenter": _vm.stopInterval, "mouseleave": _vm.startInterval } }, [_vm.indicators ? _vm._t("indicators", [_c('ol', { staticClass: "carousel-indicators" }, _vm._l(_vm.slides, function (slide, index) { return _c('li', { class: { active: index === _vm.activeIndex }, on: { "click": function click($event) { _vm.select(index); } } }); }))], { select: _vm.select, activeIndex: _vm.activeIndex }) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "carousel-inner", attrs: { "role": "listbox" } }, [_vm._t("default")], 2), _vm._v(" "), _vm.controls ? _c('a', { staticClass: "left carousel-control", attrs: { "href": "#", "role": "button" }, on: { "click": function click($event) { $event.preventDefault();_vm.prev(); } } }, [_c('span', { class: _vm.iconControlLeft, attrs: { "aria-hidden": "true" } }), _vm._v(" "), _c('span', { staticClass: "sr-only" }, [_vm._v("Previous")])]) : _vm._e(), _vm._v(" "), _vm.controls ? _c('a', { staticClass: "right carousel-control", attrs: { "href": "#", "role": "button" }, on: { "click": function click($event) { $event.preventDefault();_vm.next(); } } }, [_c('span', { class: _vm.iconControlRight, attrs: { "aria-hidden": "true" } }), _vm._v(" "), _c('span', { staticClass: "sr-only" }, [_vm._v("Next")])]) : _vm._e()], 2); }, staticRenderFns: [], props: { value: Number, indicators: { type: Boolean, default: true }, controls: { type: Boolean, default: true }, interval: { type: Number, default: 5000 }, iconControlLeft: { type: String, default: 'glyphicon glyphicon-chevron-left' }, iconControlRight: { type: String, default: 'glyphicon glyphicon-chevron-right' } }, data: function data() { return { slides: [], activeIndex: 0, // Make v-model not required timeoutId: 0, intervalId: 0 }; }, watch: { interval: function interval() { this.startInterval(); }, value: function value(index, oldValue) { this.run(index, oldValue); this.activeIndex = index; } }, mounted: function mounted() { if (isExist(this.value)) { this.activeIndex = this.value; } if (this.slides.length > 0) { this.$select(this.activeIndex); } this.startInterval(); }, beforeDestroy: function beforeDestroy() { this.stopInterval(); }, methods: { run: function run(newIndex, oldIndex) { var _this = this; var currentActiveIndex = oldIndex || 0; var direction = void 0; if (newIndex > currentActiveIndex) { direction = ['next', 'left']; } else { direction = ['prev', 'right']; } this.slides[newIndex].slideClass[direction[0]] = true; this.$nextTick(function () { _this.slides[newIndex].$el.offsetHeight; _this.slides.forEach(function (slide, i) { if (i === currentActiveIndex) { slide.slideClass.active = true; slide.slideClass[direction[1]] = true; } else if (i === newIndex) { slide.slideClass[direction[1]] = true; } }); _this.timeoutId = setTimeout(function () { _this.$select(newIndex); _this.$emit('change', newIndex); _this.timeoutId = 0; }, 600); }); }, startInterval: function startInterval() { var _this2 = this; this.stopInterval(); if (this.interval > 0) { this.intervalId = setInterval(function () { _this2.next(); }, this.interval); } }, stopInterval: function stopInterval() { clearInterval(this.intervalId); this.intervalId = 0; }, resetAllSlideClass: function resetAllSlideClass() { this.slides.forEach(function (slide) { slide.slideClass.active = false; slide.slideClass.left = false; slide.slideClass.right = false; slide.slideClass.next = false; slide.slideClass.prev = false; }); }, $select: function $select(index) { this.resetAllSlideClass(); this.slides[index].slideClass.active = true; }, select: function select(index) { if (this.timeoutId !== 0 || index === this.activeIndex) { return; } if (isExist(this.value)) { this.$emit('input', index); } else { this.run(index, this.activeIndex); this.activeIndex = index; } }, prev: function prev() { this.select(this.activeIndex === 0 ? this.slides.length - 1 : this.activeIndex - 1); }, next: function next() { this.select(this.activeIndex === this.slides.length - 1 ? 0 : this.activeIndex + 1); } } }; function spliceIfExist(arr, item) { if (Array.isArray(arr)) { var index = arr.indexOf(item); if (index >= 0) { arr.splice(index, 1); } } } function range(end) { var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; var arr = []; for (var i = start; i < end; i += step) { arr.push(i); } return arr; } function nodeListToArray(nodeList) { return Array.prototype.slice.call(nodeList || []); } var Slide = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "item", class: _vm.slideClass }, [_vm._t("default")], 2); }, staticRenderFns: [], data: function data() { return { slideClass: { active: false, prev: false, next: false, left: false, right: false } }; }, created: function created() { try { this.$parent.slides.push(this); } catch (e) { throw new Error('Slide parent must be Carousel.'); } }, beforeDestroy: function beforeDestroy() { var slides = this.$parent && this.$parent.slides; spliceIfExist(slides, this); } }; var EVENTS = { MOUSE_ENTER: 'mouseenter', MOUSE_LEAVE: 'mouseleave', FOCUS: 'focus', BLUR: 'blur', CLICK: 'click', INPUT: 'input', KEY_DOWN: 'keydown', KEY_UP: 'keyup', KEY_PRESS: 'keypress', RESIZE: 'resize', SCROLL: 'scroll' }; var TRIGGERS = { CLICK: 'click', HOVER: 'hover', FOCUS: 'focus', HOVER_FOCUS: 'hover-focus', OUTSIDE_CLICK: 'outside-click', MANUAL: 'manual' }; var PLACEMENTS = { TOP: 'top', RIGHT: 'right', BOTTOM: 'bottom', LEFT: 'left' }; function isIE11() { return !!window.MSInputMethodContext && !!document.documentMode; } function isIE10() { return window.navigator.appVersion.indexOf('MSIE 10') !== -1; } function getComputedStyle(el) { return window.getComputedStyle(el); } function getViewportSize() { var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return { width: width, height: height }; } var scrollbarWidth = null; var savedScreenSize = null; function getScrollbarWidth() { var recalculate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; var screenSize = getViewportSize(); // return directly when already calculated & not force recalculate & screen size not changed if (scrollbarWidth !== null && !recalculate && screenSize.height === savedScreenSize.height && screenSize.width === savedScreenSize.width) { return scrollbarWidth; } if (document.readyState === 'loading') { return null; } var div1 = document.createElement('div'); var div2 = document.createElement('div'); div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'; div1.style.overflow = 'scroll'; div2.style.overflow = 'hidden'; document.body.appendChild(div1); document.body.appendChild(div2); scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight); document.body.removeChild(div1); document.body.removeChild(div2); // save new screen size savedScreenSize = screenSize; return scrollbarWidth; } function on(element, event, handler) { element.addEventListener(event, handler); } function off(element, event, handler) { element.removeEventListener(event, handler); } function isElement(el) { return el && el.nodeType === Node.ELEMENT_NODE; } function removeFromDom(el) { isElement(el) && isElement(el.parentNode) && el.parentNode.removeChild(el); } function ensureElementMatchesFunction() { if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s); var i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } } function addClass(el, className) { if (!isElement(el)) { return; } if (el.className) { var classes = el.className.split(' '); if (classes.indexOf(className) < 0) { classes.push(className); el.className = classes.join(' '); } } else { el.className = className; } } function removeClass(el, className) { if (!isElement(el)) { return; } if (el.className) { var classes = el.className.split(' '); var newClasses = []; for (var i = 0, l = classes.length; i < l; i++) { if (classes[i] !== className) { newClasses.push(classes[i]); } } el.className = newClasses.join(' '); } } function hasClass(el, className) { if (!isElement(el)) { return false; } var classes = el.className.split(' '); for (var i = 0, l = classes.length; i < l; i++) { if (classes[i] === className) { return true; } } return false; } function setDropdownPosition(dropdown, trigger) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; var doc = document.documentElement; var containerScrollLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); var containerScrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); var rect = trigger.getBoundingClientRect(); var dropdownRect = dropdown.getBoundingClientRect(); dropdown.style.right = 'auto'; dropdown.style.bottom = 'auto'; if (options.menuRight) { dropdown.style.left = containerScrollLeft + rect.left + rect.width - dropdownRect.width + 'px'; } else { dropdown.style.left = containerScrollLeft + rect.left + 'px'; } if (options.dropup) { dropdown.style.top = containerScrollTop + rect.top - dropdownRect.height - 4 + 'px'; } else { dropdown.style.top = containerScrollTop + rect.top + rect.height + 'px'; } } function isAvailableAtPosition(trigger, popup, placement) { var triggerRect = trigger.getBoundingClientRect(); var popupRect = popup.getBoundingClientRect(); var viewPortSize = getViewportSize(); var top = true; var right = true; var bottom = true; var left = true; switch (placement) { case PLACEMENTS.TOP: top = triggerRect.top >= popupRect.height; left = triggerRect.left + triggerRect.width / 2 >= popupRect.width / 2; right = triggerRect.right - triggerRect.width / 2 + popupRect.width / 2 <= viewPortSize.width; break; case PLACEMENTS.BOTTOM: bottom = triggerRect.bottom + popupRect.height <= viewPortSize.height; left = triggerRect.left + triggerRect.width / 2 >= popupRect.width / 2; right = triggerRect.right - triggerRect.width / 2 + popupRect.width / 2 <= viewPortSize.width; break; case PLACEMENTS.RIGHT: right = triggerRect.right + popupRect.width <= viewPortSize.width; top = triggerRect.top + triggerRect.height / 2 >= popupRect.height / 2; bottom = triggerRect.bottom - triggerRect.height / 2 + popupRect.height / 2 <= viewPortSize.height; break; case PLACEMENTS.LEFT: left = triggerRect.left >= popupRect.width; top = triggerRect.top + triggerRect.height / 2 >= popupRect.height / 2; bottom = triggerRect.bottom - triggerRect.height / 2 + popupRect.height / 2 <= viewPortSize.height; break; } return top && right && bottom && left; } function setTooltipPosition(tooltip, trigger, placement, auto, appendToSelector) { var container = void 0; var containerScrollTop = void 0; var containerScrollLeft = void 0; if (!isExist(appendToSelector) || appendToSelector === 'body') { container = document.body; var doc = document.documentElement; containerScrollLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); containerScrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); } else { container = document.querySelector(appendToSelector); containerScrollLeft = container.scrollLeft; containerScrollTop = container.scrollTop; } // auto adjust placement if (auto) { // Try: right -> bottom -> left -> top // Cause the default placement is top var placements = [PLACEMENTS.RIGHT, PLACEMENTS.BOTTOM, PLACEMENTS.LEFT, PLACEMENTS.TOP]; // The class switch helper function var changePlacementClass = function changePlacementClass(placement) { // console.log(placement) placements.forEach(function (placement) { removeClass(tooltip, placement); }); addClass(tooltip, placement); }; // No need to adjust if the default placement fits if (!isAvailableAtPosition(trigger, tooltip, placement)) { for (var i = 0, l = placements.length; i < l; i++) { // Re-assign placement class changePlacementClass(placements[i]); // Break if new placement fits if (isAvailableAtPosition(trigger, tooltip, placements[i])) { placement = placements[i]; break; } } changePlacementClass(placement); } } // fix left and top for tooltip var rect = trigger.getBoundingClientRect(); var tooltipRect = tooltip.getBoundingClientRect(); if (placement === PLACEMENTS.BOTTOM) { tooltip.style.top = containerScrollTop + rect.top + rect.height + 'px'; tooltip.style.left = containerScrollLeft + rect.left + rect.width / 2 - tooltipRect.width / 2 + 'px'; } else if (placement === PLACEMENTS.LEFT) { tooltip.style.top = containerScrollTop + rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px'; tooltip.style.left = containerScrollLeft + rect.left - tooltipRect.width + 'px'; } else if (placement === PLACEMENTS.RIGHT) { tooltip.style.top = containerScrollTop + rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px'; tooltip.style.left = containerScrollLeft + rect.left + rect.width + 'px'; } else { tooltip.style.top = containerScrollTop + rect.top - tooltipRect.height + 'px'; tooltip.style.left = containerScrollLeft + rect.left + rect.width / 2 - tooltipRect.width / 2 + 'px'; } } function hasScrollbar(el) { var SCROLL = 'scroll'; var hasVScroll = el.scrollHeight > el.clientHeight; var style = getComputedStyle(el); return hasVScroll || style.overflow === SCROLL || style.overflowY === SCROLL; } function toggleBodyOverflow(enable) { var MODAL_OPEN = 'modal-open'; var body = document.body; if (enable) { removeClass(body, MODAL_OPEN); body.style.paddingRight = null; } else { var browsersWithFloatingScrollbar = isIE10() || isIE11(); var documentHasScrollbar = hasScrollbar(document.documentElement) || hasScrollbar(document.body); if (documentHasScrollbar && !browsersWithFloatingScrollbar) { body.style.paddingRight = getScrollbarWidth() + 'px'; } addClass(body, MODAL_OPEN); } } function getClosest(el, selector) { ensureElementMatchesFunction(); var parent = void 0; var _el = el; while (_el) { parent = _el.parentElement; if (parent && parent.matches(selector)) { return parent; } _el = parent; } return null; } function getParents(el, selector) { var until = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; ensureElementMatchesFunction(); var parents = []; var parent = el.parentElement; while (parent) { if (parent.matches(selector)) { parents.push(parent); } else if (until && (until === parent || parent.matches(until))) { break; } parent = parent.parentElement; } return parents; } var COLLAPSE = 'collapse'; var IN = 'in'; var COLLAPSING = 'collapsing'; var Collapse = { render: function render(h) { return h(this.tag, {}, this.$slots.default); }, props: { tag: { type: String, default: 'div' }, value: { type: Boolean, default: false }, transitionDuration: { type: Number, default: 350 } }, data: function data() { return { timeoutId: 0 }; }, watch: { value: function value(show) { this.toggle(show); } }, mounted: function mounted() { var el = this.$el; addClass(el, COLLAPSE); if (this.value) { addClass(el, IN); } }, methods: { toggle: function toggle(show) { var _this = this; clearTimeout(this.timeoutId); var el = this.$el; if (show) { this.$emit('show'); removeClass(el, COLLAPSE); el.style.height = 'auto'; var height = window.getComputedStyle(el).height; el.style.height = null; addClass(el, COLLAPSING); el.offsetHeight; // force repaint el.style.height = height; this.timeoutId = setTimeout(function () { removeClass(el, COLLAPSING); addClass(el, COLLAPSE); addClass(el, IN); el.style.height = null; _this.timeoutId = 0; _this.$emit('shown'); }, this.transitionDuration); } else { this.$emit('hide'); el.style.height = window.getComputedStyle(el).height; removeClass(el, IN); removeClass(el, COLLAPSE); el.offsetHeight; el.style.height = null; addClass(el, COLLAPSING); this.timeoutId = setTimeout(function () { addClass(el, COLLAPSE); removeClass(el, COLLAPSING); el.style.height = null; _this.timeoutId = 0; _this.$emit('hidden'); }, this.transitionDuration); } } } }; var DEFAULT_TAG = 'div'; var Dropdown = { render: function render(h) { return h(this.tag, { class: { 'btn-group': this.tag === DEFAULT_TAG, dropdown: !this.dropup, dropup: this.dropup, open: this.show } }, [this.$slots.default, h('ul', { class: { 'dropdown-menu': true, 'dropdown-menu-right': this.menuRight }, ref: 'dropdown' }, [this.$slots.dropdown])]); }, props: { tag: { type: String, default: DEFAULT_TAG }, appendToBody: { type: Boolean, default: false }, value: Boolean, dropup: { type: Boolean, default: false }, menuRight: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, notCloseElements: Array, positionElement: null }, data: function data() { return { show: false, triggerEl: undefined }; }, watch: { value: function value(v) { this.toggle(v); } }, mounted: function mounted() { this.initTrigger(); if (this.triggerEl) { on(this.triggerEl, EVENTS.CLICK, this.toggle); } on(window, EVENTS.CLICK, this.windowClicked); if (this.value) { this.toggle(true); } }, beforeDestroy: function beforeDestroy() { this.removeDropdownFromBody(); if (this.triggerEl) { off(this.triggerEl, EVENTS.CLICK, this.toggle); } off(window, EVENTS.CLICK, this.windowClicked); }, methods: { initTrigger: function initTrigger() { var trigger = this.$el.querySelector('[data-role="trigger"]') || this.$el.querySelector('.dropdown-toggle') || this.$el.firstChild; this.triggerEl = trigger && trigger !== this.$refs.dropdown ? trigger : null; }, toggle: function toggle(show) { if (this.disabled) { return; } if (isBoolean(show)) { this.show = show; } else { this.show = !this.show; } if (this.appendToBody) { this.show ? this.appendDropdownToBody() : this.removeDropdownFromBody(); } this.$emit('input', this.show); }, windowClicked: function windowClicked(event) { var target = event.target; if (this.show && target) { var targetInNotCloseElements = false; if (this.notCloseElements) { for (var i = 0, l = this.notCloseElements.length; i < l; i++) { var isTargetInElement = this.notCloseElements[i].contains(target); var shouldBreak = isTargetInElement; if (this.appendToBody) { var isTargetInDropdown = this.$refs.dropdown.contains(target); var isElInElements = this.notCloseElements.indexOf(this.$el) >= 0; shouldBreak = isTargetInElement || isTargetInDropdown && isElInElements; } if (shouldBreak) { targetInNotCloseElements = true; break; } } } var targetInDropdownBody = this.$refs.dropdown.contains(target); var targetInTrigger = this.$el.contains(target) && !targetInDropdownBody; if (!targetInTrigger && !targetInNotCloseElements) { this.toggle(false); } } }, appendDropdownToBody: function appendDropdownToBody() { try { var el = this.$refs.dropdown; el.style.display = 'block'; document.body.appendChild(el); var positionElement = this.positionElement || this.$el; setDropdownPosition(el, positionElement, this); } catch (e) { // Silent } }, removeDropdownFromBody: function removeDropdownFromBody() { try { var el = this.$refs.dropdown; el.removeAttribute('style'); this.$el.appendChild(el); } catch (e) { // Silent } } } }; var defaultLang = { uiv: { datePicker: { clear: 'Clear', today: 'Today', month: 'Month', month1: 'January', month2: 'February', month3: 'March', month4: 'April', month5: 'May', month6: 'June', month7: 'July', month8: 'August', month9: 'September', month10: 'October', month11: 'November', month12: 'December', year: 'Year', week1: 'Mon', week2: 'Tue', week3: 'Wed', week4: 'Thu', week5: 'Fri', week6: 'Sat', week7: 'Sun' }, timePicker: { am: 'AM', pm: 'PM' }, modal: { cancel: 'Cancel', ok: 'OK' } } }; // https://github.com/ElemeFE/element/blob/dev/src/locale/index.js var lang = defaultLang; var i18nHandler = function i18nHandler() { var vuei18n = Object.getPrototypeOf(this).$t; if (isFunction(vuei18n)) { try { return vuei18n.apply(this, arguments); } catch (err) { // vuei18n.apply doesn't work with 7.3.3 of vue-i18n return this.$t.apply(this, arguments); } } }; var t = function t(path, options) { var value = i18nHandler.apply(this, arguments); if (isExist(value)) { return value; } var array = path.split('.'); var current = lang; for (var i = 0, j = array.length; i < j; i++) { var property = array[i]; value = current[property]; if (i === j - 1) return value; if (!value) return ''; current = value; } return ''; }; var use = function use(l) { lang = l || lang; }; var i18n = function i18n(fn) { i18nHandler = fn || i18nHandler; }; var locale = { use: use, t: t, i18n: i18n }; var Local = { methods: { t: function t$$1() { for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return t.apply(this, args); } } }; var __assign = Object.assign || function (e) { for (var a, s = 1, t = arguments.length; s < t; s++) { for (var r in a = arguments[s]) { Object.prototype.hasOwnProperty.call(a, r) && (e[r] = a[r]); } }return e; };function mergeData() { for (var e, a, s = {}, t = arguments.length; t--;) { for (var r = 0, c = Object.keys(arguments[t]); r < c.length; r++) { switch (e = c[r]) {case "class":case "style":case "directives": Array.isArray(s[e]) || (s[e] = []), s[e] = s[e].concat(arguments[t][e]);break;case "staticClass": if (!arguments[t][e]) break;void 0 === s[e] && (s[e] = ""), s[e] && (s[e] += " "), s[e] += arguments[t][e].trim();break;case "on":case "nativeOn": s[e] || (s[e] = {});for (var o = 0, n = Object.keys(arguments[t][e] || {}); o < n.length; o++) { a = n[o], s[e][a] ? s[e][a] = [].concat(s[e][a], arguments[t][e][a]) : s[e][a] = arguments[t][e][a]; }break;case "attrs":case "props":case "domProps":case "scopedSlots":case "staticStyle":case "hook":case "transition": s[e] || (s[e] = {}), s[e] = __assign({}, arguments[t][e], s[e]);break;case "slot":case "key":case "ref":case "tag":case "show":case "keepAlive":default: s[e] || (s[e] = arguments[t][e]);} } }return s; } var linkMixin = { props: { // <a> props href: String, target: String, // <router-link> props to: null, replace: { type: Boolean, default: false }, append: { type: Boolean, default: false }, exact: { type: Boolean, default: false } } }; var defineProperty = function (obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var BtnGroup = { functional: true, render: function render(h, _ref) { var props = _ref.props, children = _ref.children, data = _ref.data; return h('div', mergeData(data, { class: defineProperty({ 'btn-group': !props.vertical, 'btn-group-vertical': props.vertical, 'btn-group-justified': props.justified }, 'btn-group-' + props.size, props.size), attrs: { role: 'group', 'data-toggle': 'buttons' } }), children); }, props: { size: String, vertical: { type: Boolean, default: false }, justified: { type: Boolean, default: false } } }; var INPUT_TYPE_CHECKBOX = 'checkbox'; var INPUT_TYPE_RADIO = 'radio'; var Btn = { functional: true, mixins: [linkMixin], render: function render(h, _ref) { var _classes; var children = _ref.children, props = _ref.props, data = _ref.data; // event listeners var listeners = data.on || {}; // checkbox: model contain inputValue // radio: model === inputValue var isInputActive = props.inputType === INPUT_TYPE_CHECKBOX ? props.value.indexOf(props.inputValue) >= 0 : props.value === props.inputValue; // button class var classes = (_classes = { btn: true, active: props.inputType ? isInputActive : props.active, disabled: props.disabled, 'btn-block': props.block }, defineProperty(_classes, 'btn-' + props.type, Boolean(props.type)), defineProperty(_classes, 'btn-' + props.size, Boolean(props.size)), _classes); // prevent event for disabled links var on = { click: function click(e) { if (props.disabled && e instanceof Event) { e.preventDefault(); e.stopPropagation(); } } }; // render params var tag = void 0, options = void 0, slot = void 0; if (props.href) { // is native link tag = 'a'; slot = children; options = mergeData(data, { on: on, class: classes, attrs: { role: 'button', href: props.href, target: props.target } }); } else if (props.to) { // is vue router link tag = 'router-link'; slot = children; options = mergeData(data, { nativeOn: on, class: classes, props: { event: props.disabled ? '' : 'click', // prevent nav while disabled to: props.to, replace: props.replace, append: props.append, exact: props.exact }, attrs: { role: 'button' } }); } else if (props.inputType) { // is input checkbox or radio tag = 'label'; options = mergeData(data, { on: on, class: classes }); slot = [h('input', { attrs: { autocomplete: 'off', type: props.inputType, checked: isInputActive ? 'checked' : null, disabled: props.disabled }, domProps: { checked: isInputActive // required }, on: { change: function change() { if (props.inputType === INPUT_TYPE_CHECKBOX) { if (isInputActive) { props.value.splice(props.value.indexOf(props.inputValue), 1); } else { props.value.push(props.inputValue); } } else { listeners['input'](props.inputValue); } } } }), children]; } else if (props.justified) { // is in justified btn-group tag = BtnGroup; options = {}; slot = [h('button', mergeData(data, { on: on, class: classes, attrs: { type: props.nativeType, disabled: props.disabled } }), children)]; } else { // is button tag = 'button'; slot = children; options = mergeData(data, { on: on, class: classes, attrs: { type: props.nativeType, disabled: props.disabled } }); } return h(tag, options, slot); }, props: { justified: { type: Boolean, default: false }, type: { type: String, default: 'default' }, nativeType: { type: String, default: 'button' }, size: String, block: { type: Boolean, default: false }, active: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, // <input> props value: null, inputValue: null, inputType: { type: String, validator: function validator(value) { return value === INPUT_TYPE_CHECKBOX || value === INPUT_TYPE_RADIO; } } } }; var MODAL_BACKDROP = 'modal-backdrop'; var IN$1 = 'in'; var getOpenModalNum = function getOpenModalNum() { return document.querySelectorAll('.' + MODAL_BACKDROP).length; }; var Modal = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "modal", class: { fade: _vm.transitionDuration > 0 }, attrs: { "tabindex": "-1", "role": "dialog" }, on: { "click": function click($event) { if ($event.target !== $event.currentTarget) { return null; }return _vm.backdropClicked($event); } } }, [_c('div', { ref: "dialog", staticClass: "modal-dialog", class: _vm.modalSizeClass, attrs: { "role": "document" } }, [_c('div', { staticClass: "modal-content" }, [_vm.header ? _c('div', { staticClass: "modal-header" }, [_vm._t("header", [_vm.dismissBtn ? _c('button', { staticClass: "close", staticStyle: { "position": "relative", "z-index": "1060" }, attrs: { "type": "button", "aria-label": "Close" }, on: { "click": function click($event) { _vm.toggle(false); } } }, [_c('span', { attrs: { "aria-hidden": "true" } }, [_vm._v("×")])]) : _vm._e(), _vm._v(" "), _c('h4', { staticClass: "modal-title" }, [_vm._t("title", [_vm._v(_vm._s(_vm.title))])], 2)])], 2) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "modal-body" }, [_vm._t("default")], 2), _vm._v(" "), _vm.footer ? _c('div', { staticClass: "modal-footer" }, [_vm._t("footer", [_c('btn', { on: { "click": function click($event) { _vm.toggle(false, 'cancel'); } } }, [_c('span', [_vm._v(_vm._s(_vm.cancelText || _vm.t('uiv.modal.cancel')))])]), _vm._v(" "), _c('btn', { attrs: { "type": "primary", "data-action": "auto-focus" }, on: { "click": function click($event) { _vm.toggle(false, 'ok'); } } }, [_c('span', [_vm._v(_vm._s(_vm.okText || _vm.t('uiv.modal.ok')))])])])], 2) : _vm._e()])]), _vm._v(" "), _c('div', { ref: "backdrop", staticClass: "modal-backdrop", class: { fade: _vm.transitionDuration > 0 } })]); }, staticRenderFns: [], mixins: [Local], components: { Btn: Btn }, props: { value: { type: Boolean, default: false }, title: String, size: String, backdrop: { type: Boolean, default: true }, footer: { type: Boolean, default: true }, header: { type: Boolean, default: true }, cancelText: String, okText: String, dismissBtn: { type: Boolean, default: true }, transitionDuration: { type: Number, default: 150 }, autoFocus: { type: Boolean, default: false }, keyboard: { type: Boolean, default: true }, beforeClose: Function, zOffset: { type: Number, default: 20 }, appendToBody: { type: Boolean, default: false } }, data: function data() { return { msg: '', timeoutId: 0 }; }, computed: { modalSizeClass: function modalSizeClass() { return defineProperty({}, 'modal-' + this.size, Boolean(this.size)); } }, watch: { value: function value(v) { this.$toggle(v); } }, mounted: function mounted() { removeFromDom(this.$refs.backdrop); on(window, EVENTS.KEY_UP, this.onKeyPress); if (this.value) { this.$toggle(true); } }, beforeDestroy: function beforeDestroy() { clearTimeout(this.timeoutId); removeFromDom(this.$refs.backdrop); removeFromDom(this.$el); off(window, EVENTS.KEY_UP, this.onKeyPress); }, methods: { onKeyPress: function onKeyPress(event) { if (this.keyboard && this.value && event.keyCode === 27) { this.toggle(false); } }, toggle: function toggle(show, msg) { // skip the hiding while show===false & beforeClose returning falsely value if (!show && isFunction(this.beforeClose) && !this.beforeClose(msg)) { return; } this.msg = msg; this.$emit('input', show); }, $toggle: function $toggle(show) { var _this = this; var modal = this.$el; var backdrop = this.$refs.backdrop; clearTimeout(this.timeoutId); if (show) { var alreadyOpenModalNum = getOpenModalNum(); document.body.appendChild(backdrop); if (this.appendToBody) { document.body.appendChild(modal); } modal.style.display = 'block'; modal.scrollTop = 0; backdrop.offsetHeight; // force repaint toggleBodyOverflow(false); addClass(backdrop, IN$1); addClass(modal, IN$1); // fix z-index for nested modals // no need to calculate if no modal is already open if (alreadyOpenModalNum > 0) { var modalBaseZ = parseInt(getComputedStyle(modal).zIndex) || 1050; // 1050 is default modal z-Index var backdropBaseZ = parseInt(getComputedStyle(backdrop).zIndex) || 1040; // 1040 is default backdrop z-Index var offset = alreadyOpenModalNum * this.zOffset; modal.style.zIndex = '' + (modalBaseZ + offset); backdrop.style.zIndex = '' + (backdropBaseZ + offset); } // z-index fix end this.timeoutId = setTimeout(function () { if (_this.autoFocus) { var btn = _this.$el.querySelector('[data-action="auto-focus"]'); if (btn) { btn.focus(); } } _this.$emit('show'); _this.timeoutId = 0; }, this.transitionDuration); } else { removeClass(backdrop, IN$1); removeClass(modal, IN$1); this.timeoutId = setTimeout(function () { modal.style.display = 'none'; removeFromDom(backdrop); if (_this.appendToBody) { removeFromDom(modal); } if (getOpenModalNum() === 0) { toggleBodyOverflow(true); } _this.$emit('hide', _this.msg || 'dismiss'); _this.msg = ''; _this.timeoutId = 0; // restore z-index for nested modals modal.style.zIndex = ''; backdrop.style.zIndex = ''; // z-index fix end }, this.transitionDuration); } }, backdropClicked: function backdropClicked(event) { if (this.backdrop) { this.toggle(false); } } } }; var ACTIVE_CLASS = 'active'; var IN_CLASS = 'in'; var Tab = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "tab-pane", class: { fade: _vm.transition > 0 }, attrs: { "role": "tabpanel" } }, [_vm._t("default")], 2); }, staticRenderFns: [], props: { title: { type: String, default: 'Tab Title' }, htmlTitle: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, group: String, pullRight: { type: Boolean, default: false } }, data: function data() { return { active: true, transition: 150 }; }, watch: { active: function active(_active) { var _this = this; if (_active) { setTimeout(function () { addClass(_this.$el, ACTIVE_CLASS); _this.$el.offsetHeight; addClass(_this.$el, IN_CLASS); }, this.transition); } else { removeClass(this.$el, IN_CLASS); setTimeout(function () { removeClass(_this.$el, ACTIVE_CLASS); }, this.transition); } } }, created: function created() { try { this.$parent.tabs.push(this); } catch (e) { throw new Error('<tab> parent must be <tabs>.'); } }, beforeDestroy: function beforeDestroy() { var tabs = this.$parent && this.$parent.tabs; spliceIfExist(tabs, this); }, methods: { show: function show() { var _this2 = this; this.$nextTick(function () { addClass(_this2.$el, ACTIVE_CLASS); addClass(_this2.$el, IN_CLASS); }); } } }; var BEFORE_CHANGE_EVENT = 'before-change'; var Tabs = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('section', [_c('ul', { class: _vm.navClasses, attrs: { "role": "tablist" } }, [_vm._l(_vm.groupedTabs, function (tab, index) { return [tab.tabs ? _c('dropdown', { class: _vm.getTabClasses(tab), attrs: { "role": "presentation", "tag": "li" } }, [_c('a', { staticClass: "dropdown-toggle", attrs: { "role": "tab", "href": "#" }, on: { "click": function click($event) { $event.preventDefault(); } } }, [_vm._v(_vm._s(tab.group) + " "), _c('span', { staticClass: "caret" })]), _vm._v(" "), _c('template', { slot: "dropdown" }, _vm._l(tab.tabs, function (subTab) { return _c('li', { class: _vm.getTabClasses(subTab, true) }, [_c('a', { attrs: { "href": "#" }, on: { "click": function click($event) { $event.preventDefault();_vm.select(_vm.tabs.indexOf(subTab)); } } }, [_vm._v(_vm._s(subTab.title))])]); }))], 2) : _c('li', { class: _vm.getTabClasses(tab), attrs: { "role": "presentation" } }, [_c('a', { attrs: { "role": "tab", "href": "#" }, on: { "click": function click($event) { $event.preventDefault();_vm.select(_vm.tabs.indexOf(tab)); } } }, [tab.htmlTitle ? _c('span', { domProps: { "innerHTML": _vm._s(tab.title) } }) : [_vm._v(_vm._s(tab.title))]], 2)])]; }), _vm._v(" "), !_vm.justified && _vm.$slots['nav-right'] ? _c('li', { staticClass: "pull-right" }, [_vm._t("nav-right")], 2) : _vm._e()], 2), _vm._v(" "), _c('div', { staticClass: "tab-content" }, [_vm._t("default")], 2)]); }, staticRenderFns: [], components: { Dropdown: Dropdown }, props: { value: { type: Number, validator: function validator(v) { return v >= 0; } }, transitionDuration: { type: Number, default: 150 }, justified: Boolean, pills: Boolean, stacked: Boolean }, data: function data() { return { tabs: [], activeIndex: 0 // Make v-model not required }; }, watch: { value: { immediate: true, handler: function handler(value) { if (isNumber(value)) { this.activeIndex = value; this.selectCurrent(); } } }, tabs: function tabs(_tabs) { var _this = this; _tabs.forEach(function (tab, index) { tab.transition = _this.transitionDuration; if (index === _this.activeIndex) { tab.show(); } }); this.selectCurrent(); } }, computed: { navClasses: function navClasses() { return { nav: true, 'nav-justified': this.justified, 'nav-tabs': !this.pills, 'nav-pills': this.pills, 'nav-stacked': this.stacked && this.pills }; }, groupedTabs: function groupedTabs() { var tabs = []; var hash = {}; this.tabs.forEach(function (tab) { if (tab.group) { if (hash.hasOwnProperty(tab.group)) { tabs[hash[tab.group]].tabs.push(tab); } else { tabs.push({ tabs: [tab], group: tab.group }); hash[tab.group] = tabs.length - 1; } if (tab.active) { tabs[hash[tab.group]].active = true; } if (tab.pullRight) { tabs[hash[tab.group]].pullRight = true; } } else { tabs.push(tab); } }); return tabs; } }, methods: { getTabClasses: function getTabClasses(tab) { var isSubTab = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; return { active: tab.active, disabled: tab.disabled, 'pull-right': tab.pullRight && !isSubTab }; }, selectCurrent: function selectCurrent() { var _this2 = this; var found = false; this.tabs.forEach(function (tab, index) { if (index === _this2.activeIndex) { found = !tab.active; tab.active = true; } else { tab.active = false; } }); if (found) { this.$emit('change', this.activeIndex); } }, selectValidate: function selectValidate(index) { var _this3 = this; if (isFunction(this.$listeners[BEFORE_CHANGE_EVENT])) { this.$emit(BEFORE_CHANGE_EVENT, this.activeIndex, index, function (result) { if (!isExist(result)) { _this3.$select(index); } }); } else { this.$select(index); } }, select: function select(index) { if (!this.tabs[index].disabled && index !== this.activeIndex) { this.selectValidate(index); } }, $select: function $select(index) { if (isNumber(this.value)) { this.$emit('input', index); } else { this.activeIndex = index; this.selectCurrent(); } } } }; function pad(value, num) { value = value + ''; for (var i = num - value.length; i > 0; i--) { value = '0' + value; } return value; } var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; function daysInMonth(month, year) { return new Date(year, month + 1, 0).getDate(); } function stringify(date, format) { try { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var monthName = monthNames[month - 1]; return format.replace(/yyyy/g, year).replace(/MMMM/g, monthName).replace(/MMM/g, monthName.substring(0, 3)).replace(/MM/g, pad(month, 2)).replace(/dd/g, pad(day, 2)).replace(/yy/g, year).replace(/M(?!a)/g, month).replace(/d/g, day); } catch (e) { return ''; } } function convertDateToUTC(date) { return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); } var DateView = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('table', { staticStyle: { "width": "100%" }, attrs: { "role": "grid" } }, [_c('thead', [_c('tr', [_c('td', [_c('btn', { staticStyle: { "border": "none" }, attrs: { "block": "", "size": "sm" }, on: { "click": _vm.goPrevMonth } }, [_c('i', { class: _vm.iconControlLeft })])], 1), _vm._v(" "), _c('td', { attrs: { "colspan": "5" } }, [_c('btn', { staticStyle: { "border": "none" }, attrs: { "block": "", "size": "sm" }, on: { "click": _vm.changeView } }, [_c('b', [_vm._v(_vm._s(_vm.yearMonthStr))])])], 1), _vm._v(" "), _c('td', [_c('btn', { staticStyle: { "border": "none" }, attrs: { "block": "", "size": "sm" }, on: { "click": _vm.goNextMonth } }, [_c('i', { class: _vm.iconControlRight })])], 1)]), _vm._v(" "), _c('tr', { attrs: { "align": "center" } }, _vm._l(_vm.weekDays, function (day) { return _c('td', { attrs: { "width": "14.2857142857%" } }, [_c('small', [_vm._v(_vm._s(_vm.tWeekName(day === 0 ? 7 : day)))])]); }))]), _vm._v(" "), _c('tbody', _vm._l(_vm.monthDayRows, function (row) { return _c('tr', _vm._l(row, function (date) { return _c('td', [_c('btn', { class: date.classes, staticStyle: { "border": "none" }, attrs: { "block": "", "size": "sm", "data-action": "select", "type": _vm.getBtnType(date), "disabled": date.disabled }, on: { "click": function click($event) { _vm.select(date); } } }, [_c('span', { class: { 'text-muted': _vm.month !== date.month }, attrs: { "data-action": "select" } }, [_vm._v(_vm._s(date.date))])])], 1); })); }))]); }, staticRenderFns: [], mixins: [Local], props: { month: Number, year: Number, date: Date, today: Date, limit: Object, weekStartsWith: Number, iconControlLeft: String, iconControlRight: String, dateClass: Function }, components: { Btn: Btn }, computed: { weekDays: function weekDays() { var days = []; var firstDay = this.weekStartsWith; while (days.length < 7) { days.push(firstDay++); if (firstDay > 6) { firstDay = 0; } } return days; }, yearMonthStr: function yearMonthStr() { return isExist(this.month) ? this.year + ' ' + this.t('uiv.datePicker.month' + (this.month + 1)) : this.year; }, monthDayRows: function monthDayRows() { var rows = []; var firstDay = new Date(this.year, this.month, 1); var prevMonthLastDate = new Date(this.year, this.month, 0).getDate(); var startIndex = firstDay.getDay(); // console.log(startIndex) var daysNum = daysInMonth(this.month, this.year); var weekOffset = 0; if (this.weekStartsWith > startIndex) { weekOffset = 7 - this.weekStartsWith; } else { weekOffset = 0 - this.weekStartsWith; } // console.log(prevMonthLastDate, startIndex, daysNum) for (var i = 0; i < 6; i++) { rows.push([]); for (var j = 0 - weekOffset; j < 7 - weekOffset; j++) { var currentIndex = i * 7 + j; var date = { year: this.year, disabled: false // date in and not in current month };if (currentIndex < startIndex) { date.date = prevMonthLastDate - startIndex + currentIndex + 1; if (this.month > 0) { date.month = this.month - 1; } else { date.month = 11; date.year--; } } else if (currentIndex < startIndex + daysNum) { date.date = currentIndex - startIndex + 1; date.month = this.month; } else { date.date = currentIndex - startIndex - daysNum + 1; if (this.month < 11) { date.month = this.month + 1; } else { date.month = 0; date.year++; } } // process limit dates var dateObj = new Date(date.year, dat