uiv
Version:
Bootstrap 3 components implemented by Vue 2.
1,607 lines (1,541 loc) • 44.4 kB
JavaScript
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
function assign (target, varArgs) {
var arguments$1 = arguments;
if (target === null || target === undefined) {
throw new TypeError('Cannot convert undefined or null to object')
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments$1[index];
if (nextSource !== null && nextSource !== undefined) {
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
/* istanbul ignore else */
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to
}
function isExist (obj) {
return typeof obj !== 'undefined' && obj !== null
}
function isFunction (obj) {
return typeof obj === 'function'
}
function isNumber (obj) {
return typeof obj === 'number'
}
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'
},
multiSelect: {
placeholder: 'Select...',
filterPlaceholder: 'Search...'
}
}
};
// https://github.com/ElemeFE/element/blob/dev/src/locale/index.js
var lang = defaultLang;
var i18nHandler = function () {
var vuei18n = Object.getPrototypeOf(this).$t;
/* istanbul ignore else */
/* istanbul ignore next */
if (isFunction(vuei18n)) {
/* istanbul ignore next */
try {
return vuei18n.apply(this, arguments)
} catch (err) {
return this.$t.apply(this, arguments)
}
}
};
var t$1 = function (path, options) {
options = options || {};
var value;
try {
value = i18nHandler.apply(this, arguments);
/* istanbul ignore next */
if (isExist(value) && !options.$$locale) {
return value
}
} catch (e) {
// ignore
}
var array = path.split('.');
var current = options.$$locale || 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;
}
/* istanbul ignore next */
return ''
};
var Locale = {
methods: {
t: function t$1$1 () {
var arguments$1 = arguments;
var args = [];
for (var i = 0; i < arguments.length; ++i) {
args.push(arguments$1[i]);
}
args[1] = assign({}, { $$locale: this.locale }, args[1]);
return t$1.apply(this, args)
}
},
props: {
locale: Object
}
};
var e=function(){return (e=Object.assign||function(e){for(var t,r=1,s=arguments.length;r<s;r++){ for(var a in t=arguments[r]){ Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]); } }return e}).apply(this,arguments)},t={kebab:/-(\w)/g,styleProp:/:(.*)/,styleList:/;(?![^(]*\))/g};function r(e,t){return t?t.toUpperCase():""}function s(e){for(var s,a={},c=0,o=e.split(t.styleList);c<o.length;c++){var n=o[c].split(t.styleProp),i=n[0],l=n[1];(i=i.trim())&&("string"==typeof l&&(l=l.trim()),a[(s=i,s.replace(t.kebab,r))]=l);}return a}function a(){
var arguments$1 = arguments;
for(var t,r,a={},c=arguments.length;c--;){ for(var o=0,n=Object.keys(arguments[c]);o<n.length;o++){ switch(t=n[o]){case"class":case"style":case"directives":if(Array.isArray(a[t])||(a[t]=[]),"style"===t){var i=void 0;i=Array.isArray(arguments$1[c].style)?arguments$1[c].style:[arguments$1[c].style];for(var l=0;l<i.length;l++){var y=i[l];"string"==typeof y&&(i[l]=s(y));}arguments$1[c].style=i;}a[t]=a[t].concat(arguments$1[c][t]);break;case"staticClass":if(!arguments$1[c][t]){ break; }void 0===a[t]&&(a[t]=""),a[t]&&(a[t]+=" "),a[t]+=arguments$1[c][t].trim();break;case"on":case"nativeOn":a[t]||(a[t]={});for(var p=0,f=Object.keys(arguments[c][t]||{});p<f.length;p++){ r=f[p],a[t][r]?a[t][r]=[].concat(a[t][r],arguments$1[c][t][r]):a[t][r]=arguments$1[c][t][r]; }break;case"attrs":case"props":case"domProps":case"scopedSlots":case"staticStyle":case"hook":case"transition":a[t]||(a[t]={}),a[t]=e({},arguments$1[c][t],a[t]);break;case"slot":case"key":case"ref":case"tag":case"show":case"keepAlive":default:a[t]||(a[t]=arguments$1[c][t]);} } }return a}
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 BtnGroup = {
functional: true,
render: function render (h, ref) {
var obj;
var props = ref.props;
var children = ref.children;
var data = ref.data;
return h(
'div',
a(data, {
class: ( obj = {
'btn-group': !props.vertical,
'btn-group-vertical': props.vertical,
'btn-group-justified': props.justified
}, obj[("btn-group-" + (props.size))] = props.size, obj ),
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 children = ref.children;
var props = ref.props;
var 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 = {
btn: true,
active: props.inputType ? isInputActive : props.active,
disabled: props.disabled,
'btn-block': props.block
};
classes[("btn-" + (props.type))] = Boolean(props.type);
classes[("btn-" + (props.size))] = Boolean(props.size);
// 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, options, slot;
if (props.href) {
// is native link
tag = 'a';
slot = children;
options = a(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 = a(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 = a(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: {
input: function input (evt) {
evt.stopPropagation();
},
change: function change () {
if (props.inputType === INPUT_TYPE_CHECKBOX) {
var valueCopied = props.value.slice();
if (isInputActive) {
valueCopied.splice(valueCopied.indexOf(props.inputValue), 1);
} else {
valueCopied.push(props.inputValue);
}
listeners.input(valueCopied);
} else {
listeners.input(props.inputValue);
}
}
}
}),
children
];
} else if (props.justified) {
// is in justified btn-group
tag = BtnGroup;
options = {};
slot = [
h('button', a(data, {
on: on,
class: classes,
attrs: {
type: props.nativeType,
disabled: props.disabled
}
}), children)
];
} else {
// is button
tag = 'button';
slot = children;
options = a(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
}
}
}
};
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'
];
/**
* Get total days number in a month.
* because we're using 0 as the day so that it returns the last day
* of the last month, so you have to add 1 to the month number
* so it returns the correct amount of days.
* https://stackoverflow.com/questions/1184334/get-number-days-in-a-specified-month-using-javascript
* @param month 0-based
* @param year
* @returns {number}
*/
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())
}
/**
* https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
* For a given date, get the ISO week number
* Based on information at:
* http://www.merlyn.demon.co.uk/weekcalc.htm#WNR
*
* Algorithm is to find nearest thursday, it's year
* is the year of the week number. Then get weeks
* between that date and the first day of that year.
*
* Note that dates in one year can be weeks of previous
* or next year, overlap is up to 3 days.
*
* e.g. 2014/12/29 is Monday in week 1 of 2015
* 2012/1/1 is Sunday in week 52 of 2011
*
* @param {number} d.year year of date
* @param {number} d.month month of date
* @param {number} d.date date of date
* @returns {number}
*/
function getWeekNumber (d) {
// Copy date so don't modify original
var _d = new Date(Date.UTC(d.year, d.month, d.date));
// Set to nearest Thursday: current date + 4 - current day number
// Make Sunday's day number 7
_d.setUTCDate(_d.getUTCDate() + 4 - (_d.getUTCDay() || 7));
// Get first day of year
var yearStart = new Date(Date.UTC(_d.getUTCFullYear(), 0, 1));
// Calculate full weeks to nearest Thursday
return Math.ceil((((_d - yearStart) / 86400000) + 1) / 7)
}
var script$3 = {
mixins: [Locale],
props: {
month: Number,
year: Number,
date: Date,
today: Date,
limit: Object,
weekStartsWith: Number,
iconControlLeft: String,
iconControlRight: String,
dateClass: Function,
yearMonthFormatter: Function,
weekNumbers: Boolean
},
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 () {
if (this.yearMonthFormatter) {
return this.yearMonthFormatter(this.year, this.month)
} else {
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, date.month, date.date);
var afterFrom = true;
var beforeTo = true;
if (this.limit && this.limit.from) {
afterFrom = dateObj >= this.limit.from;
}
if (this.limit && this.limit.to) {
beforeTo = dateObj < this.limit.to;
}
date.disabled = !afterFrom || !beforeTo;
if (isFunction(this.dateClass)) {
date.classes = this.dateClass(dateObj, {
currentMonth: this.month,
currentYear: this.year
});
} else {
date.classes = '';
}
rows[i].push(date);
}
}
return rows
}
},
methods: {
getWeekNumber: getWeekNumber,
tWeekName: function tWeekName (index) {
return this.t(("uiv.datePicker.week" + index))
},
getBtnType: function getBtnType (date) {
if (this.date &&
date.date === this.date.getDate() &&
date.month === this.date.getMonth() &&
date.year === this.date.getFullYear()) {
return 'primary'
} else if (date.date === this.today.getDate() &&
date.month === this.today.getMonth() &&
date.year === this.today.getFullYear()) {
return 'info'
} else {
return 'default'
}
},
select: function select (date) {
this.$emit('date-change', date);
},
goPrevMonth: function goPrevMonth () {
var month = this.month;
var year = this.year;
if (this.month > 0) {
month--;
} else {
month = 11;
year--;
this.$emit('year-change', year);
}
this.$emit('month-change', month);
},
goNextMonth: function goNextMonth () {
var month = this.month;
var year = this.year;
if (this.month < 11) {
month++;
} else {
month = 0;
year++;
this.$emit('year-change', year);
}
this.$emit('month-change', month);
},
changeView: function changeView () {
this.$emit('view-change', 'm');
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function() {
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",
{
staticClass: "uiv-datepicker-pager-prev",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: { click: _vm.goPrevMonth }
},
[_c("i", { class: _vm.iconControlLeft })]
)
],
1
),
_vm._v(" "),
_c(
"td",
{ attrs: { colspan: _vm.weekNumbers ? 6 : 5 } },
[
_c(
"btn",
{
staticClass: "uiv-datepicker-title",
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",
{
staticClass: "uiv-datepicker-pager-next",
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.weekNumbers ? _c("td") : _vm._e(),
_vm._v(" "),
_vm._l(_vm.weekDays, function(day) {
return _c("td", { attrs: { width: "14.2857142857%" } }, [
_c("small", { staticClass: "uiv-datepicker-week" }, [
_vm._v(_vm._s(_vm.tWeekName(day === 0 ? 7 : day)))
])
])
})
],
2
)
]),
_vm._v(" "),
_c(
"tbody",
_vm._l(_vm.monthDayRows, function(row) {
return _c(
"tr",
[
_vm.weekNumbers
? _c(
"td",
{
staticClass: "text-center",
staticStyle: { "border-right": "1px solid #eee" }
},
[
_c("small", { staticClass: "text-muted" }, [
_vm._v(
_vm._s(_vm.getWeekNumber(row[_vm.weekStartsWith]))
)
])
]
)
: _vm._e(),
_vm._v(" "),
_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($event) {
return _vm.select(date)
}
}
},
[
_c(
"span",
{
class: { "text-muted": _vm.month !== date.month },
attrs: { "data-action": "select" }
},
[_vm._v(_vm._s(date.date))]
)
]
)
],
1
)
})
],
2
)
}),
0
)
]
)
};
var __vue_staticRenderFns__$3 = [];
__vue_render__$3._withStripped = true;
/* style */
var __vue_inject_styles__$3 = undefined;
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$3 = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
__vue_inject_styles__$3,
__vue_script__$3,
__vue_scope_id__$3,
__vue_is_functional_template__$3,
__vue_module_identifier__$3,
false,
undefined,
undefined,
undefined
);
var script$2 = {
components: { Btn: Btn },
mixins: [Locale],
props: {
month: Number,
year: Number,
iconControlLeft: String,
iconControlRight: String
},
data: function data () {
return {
rows: []
}
},
mounted: function mounted () {
for (var i = 0; i < 4; i++) {
this.rows.push([]);
for (var j = 0; j < 3; j++) {
this.rows[i].push(i * 3 + j + 1);
}
}
},
methods: {
tCell: function tCell (cell) {
return this.t(("uiv.datePicker.month" + cell))
},
getBtnClass: function getBtnClass (month) {
if (month === this.month) {
return 'primary'
} else {
return 'default'
}
},
goPrevYear: function goPrevYear () {
this.$emit('year-change', this.year - 1);
},
goNextYear: function goNextYear () {
this.$emit('year-change', this.year + 1);
},
changeView: function changeView (monthIndex) {
if (isExist(monthIndex)) {
this.$emit('month-change', monthIndex);
this.$emit('view-change', 'd');
} else {
this.$emit('view-change', 'y');
}
}
}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function() {
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",
{
staticClass: "uiv-datepicker-pager-prev",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: { click: _vm.goPrevYear }
},
[_c("i", { class: _vm.iconControlLeft })]
)
],
1
),
_vm._v(" "),
_c(
"td",
{ attrs: { colspan: "4" } },
[
_c(
"btn",
{
staticClass: "uiv-datepicker-title",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: {
click: function($event) {
return _vm.changeView()
}
}
},
[_c("b", [_vm._v(_vm._s(_vm.year))])]
)
],
1
),
_vm._v(" "),
_c(
"td",
[
_c(
"btn",
{
staticClass: "uiv-datepicker-pager-next",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: { click: _vm.goNextYear }
},
[_c("i", { class: _vm.iconControlRight })]
)
],
1
)
])
]),
_vm._v(" "),
_c(
"tbody",
_vm._l(_vm.rows, function(row, i) {
return _c(
"tr",
_vm._l(row, function(month, j) {
return _c(
"td",
{ attrs: { colspan: "2", width: "33.333333%" } },
[
_c(
"btn",
{
staticStyle: { border: "none" },
attrs: {
block: "",
size: "sm",
type: _vm.getBtnClass(i * 3 + j)
},
on: {
click: function($event) {
return _vm.changeView(i * 3 + j)
}
}
},
[_c("span", [_vm._v(_vm._s(_vm.tCell(month)))])]
)
],
1
)
}),
0
)
}),
0
)
]
)
};
var __vue_staticRenderFns__$2 = [];
__vue_render__$2._withStripped = true;
/* style */
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
__vue_inject_styles__$2,
__vue_script__$2,
__vue_scope_id__$2,
__vue_is_functional_template__$2,
__vue_module_identifier__$2,
false,
undefined,
undefined,
undefined
);
var script$1 = {
components: { Btn: Btn },
props: {
year: Number,
iconControlLeft: String,
iconControlRight: String
},
computed: {
rows: function rows () {
var rows = [];
var yearGroupStart = this.year - this.year % 20;
for (var i = 0; i < 4; i++) {
rows.push([]);
for (var j = 0; j < 5; j++) {
rows[i].push(yearGroupStart + i * 5 + j);
}
}
return rows
},
yearStr: function yearStr () {
var start = this.year - this.year % 20;
return (start + " ~ " + (start + 19))
}
},
methods: {
getBtnClass: function getBtnClass (year) {
if (year === this.year) {
return 'primary'
} else {
return 'default'
}
},
goPrevYear: function goPrevYear () {
this.$emit('year-change', this.year - 20);
},
goNextYear: function goNextYear () {
this.$emit('year-change', this.year + 20);
},
changeView: function changeView (year) {
this.$emit('year-change', year);
this.$emit('view-change', 'm');
}
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function() {
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",
{
staticClass: "uiv-datepicker-pager-prev",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: { click: _vm.goPrevYear }
},
[_c("i", { class: _vm.iconControlLeft })]
)
],
1
),
_vm._v(" "),
_c(
"td",
{ attrs: { colspan: "3" } },
[
_c(
"btn",
{
staticClass: "uiv-datepicker-title",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" }
},
[_c("b", [_vm._v(_vm._s(_vm.yearStr))])]
)
],
1
),
_vm._v(" "),
_c(
"td",
[
_c(
"btn",
{
staticClass: "uiv-datepicker-pager-next",
staticStyle: { border: "none" },
attrs: { block: "", size: "sm" },
on: { click: _vm.goNextYear }
},
[_c("i", { class: _vm.iconControlRight })]
)
],
1
)
])
]),
_vm._v(" "),
_c(
"tbody",
_vm._l(_vm.rows, function(row) {
return _c(
"tr",
_vm._l(row, function(year) {
return _c(
"td",
{ attrs: { width: "20%" } },
[
_c(
"btn",
{
staticStyle: { border: "none" },
attrs: {
block: "",
size: "sm",
type: _vm.getBtnClass(year)
},
on: {
click: function($event) {
return _vm.changeView(year)
}
}
},
[_c("span", [_vm._v(_vm._s(year))])]
)
],
1
)
}),
0
)
}),
0
)
]
)
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
false,
undefined,
undefined,
undefined
);
var script = {
mixins: [Locale],
components: { DateView: __vue_component__$3, MonthView: __vue_component__$2, YearView: __vue_component__$1, Btn: Btn },
props: {
value: null,
width: {
type: Number,
default: 270
},
todayBtn: {
type: Boolean,
default: true
},
clearBtn: {
type: Boolean,
default: true
},
closeOnSelected: {
type: Boolean,
default: true
},
limitFrom: null,
limitTo: null,
format: {
type: String,
default: 'yyyy-MM-dd'
},
initialView: {
type: String,
default: 'd'
},
dateParser: {
type: Function,
default: Date.parse
},
dateClass: Function,
yearMonthFormatter: Function,
weekStartsWith: {
type: Number,
default: 0,
validator: function validator (value) {
return value >= 0 && value <= 6
}
},
weekNumbers: Boolean,
iconControlLeft: {
type: String,
default: 'glyphicon glyphicon-chevron-left'
},
iconControlRight: {
type: String,
default: 'glyphicon glyphicon-chevron-right'
}
},
data: function data () {
return {
show: false,
now: new Date(),
currentMonth: 0,
currentYear: 0,
view: 'd'
}
},
computed: {
valueDateObj: function valueDateObj () {
var ts = this.dateParser(this.value);
if (isNaN(ts)) {
return null
} else {
var date = new Date(ts);
if (date.getHours() !== 0) {
date = new Date(ts + date.getTimezoneOffset() * 60 * 1000);
}
return date
}
},
pickerStyle: function pickerStyle () {
return {
width: this.width + 'px'
}
},
pickerClass: function pickerClass () {
return {
'uiv-datepicker': true,
'uiv-datepicker-date': this.view === 'd',
'uiv-datepicker-month': this.view === 'm',
'uiv-datepicker-year': this.view === 'y'
}
},
limit: function limit () {
var limit = {};
if (this.limitFrom) {
var limitFrom = this.dateParser(this.limitFrom);
if (!isNaN(limitFrom)) {
limitFrom = convertDateToUTC(new Date(limitFrom));
limitFrom.setHours(0, 0, 0, 0);
limit.from = limitFrom;
}
}
if (this.limitTo) {
var limitTo = this.dateParser(this.limitTo);
if (!isNaN(limitTo)) {
limitTo = convertDateToUTC(new Date(limitTo));
limitTo.setHours(0, 0, 0, 0);
limit.to = limitTo;
}
}
return limit
}
},
mounted: function mounted () {
if (this.value) {
this.setMonthAndYearByValue(this.value);
} else {
this.currentMonth = this.now.getMonth();
this.currentYear = this.now.getFullYear();
this.view = this.initialView;
}
},
watch: {
value: function value (val, oldVal) {
this.setMonthAndYearByValue(val, oldVal);
}
},
methods: {
setMonthAndYearByValue: function setMonthAndYearByValue (val, oldVal) {
var ts = this.dateParser(val);
if (!isNaN(ts)) {
var date = new Date(ts);
if (date.getHours() !== 0) {
date = new Date(ts + date.getTimezoneOffset() * 60 * 1000);
}
if (this.limit && ((this.limit.from && date < this.limit.from) || (this.limit.to && date >= this.limit.to))) {
this.$emit('input', oldVal || '');
} else {
this.currentMonth = date.getMonth();
this.currentYear = date.getFullYear();
}
}
},
onMonthChange: function onMonthChange (month) {
this.currentMonth = month;
},
onYearChange: function onYearChange (year) {
this.currentYear = year;
this.currentMonth = undefined;
},
onDateChange: function onDateChange (date) {
if (date && isNumber(date.date) && isNumber(date.month) && isNumber(date.year)) {
var _date = new Date(date.year, date.month, date.date);
this.$emit('input', this.format ? stringify(_date, this.format) : _date);
// if the input event trigger nothing (same value)
// manually correct
this.currentMonth = date.month;
this.currentYear = date.year;
} else {
this.$emit('input', '');
}
},
onViewChange: function onViewChange (view) {
this.view = view;
},
selectToday: function selectToday () {
this.view = 'd';
this.onDateChange({
date: this.now.getDate(),
month: this.now.getMonth(),
year: this.now.getFullYear()
});
},
clearSelect: function clearSelect () {
this.currentMonth = this.now.getMonth();
this.currentYear = this.now.getFullYear();
this.view = this.initialView;
this.onDateChange();
},
onPickerClick: function onPickerClick (event) {
if (event.target.getAttribute('data-action') !== 'select' || !this.closeOnSelected) {
event.stopPropagation();
}
}
}
};
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class: _vm.pickerClass,
style: _vm.pickerStyle,
attrs: { "data-role": "date-picker" },
on: { click: _vm.onPickerClick }
},
[
_c("date-view", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.view === "d",
expression: "view==='d'"
}
],
attrs: {
month: _vm.currentMonth,
year: _vm.currentYear,
date: _vm.valueDateObj,
today: _vm.now,
limit: _vm.limit,
"week-starts-with": _vm.weekStartsWith,
"icon-control-left": _vm.iconControlLeft,
"icon-control-right": _vm.iconControlRight,
"date-class": _vm.dateClass,
"year-month-formatter": _vm.yearMonthFormatter,
"week-numbers": _vm.weekNumbers,
locale: _vm.locale
},
on: {
"month-change": _vm.onMonthChange,
"year-change": _vm.onYearChange,
"date-change": _vm.onDateChange,
"view-change": _vm.onViewChange
}
}),
_vm._v(" "),
_c("month-view", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.view === "m",
expression: "view==='m'"
}
],
attrs: {
month: _vm.currentMonth,
year: _vm.currentYear,
"icon-control-left": _vm.iconControlLeft,
"icon-control-right": _vm.iconControlRight,
locale: _vm.locale
},
on: {
"month-change": _vm.onMonthChange,
"year-change": _vm.onYearChange,
"view-change": _vm.onViewChange
}
}),
_vm._v(" "),
_c("year-view", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.view === "y",
expression: "view==='y'"
}
],
attrs: {
year: _vm.currentYear,
"icon-control-left": _vm.iconControlLeft,
"icon-control-right": _vm.iconControlRight
},
on: { "year-change": _vm.onYearChange, "view-change": _vm.onViewChange }
}),
_vm._v(" "),
_vm.todayBtn || _vm.clearBtn
? _c("div", [
_c("br"),
_vm._v(" "),
_c(
"div",
{ staticClass: "text-center" },
[
_vm.todayBtn
? _c("btn", {
attrs: {
"data-action": "select",
type: "info",
size: "sm"
},
domProps: {
textContent: _vm._s(_vm.t("uiv.datePicker.today"))
},
on: { click: _vm.selectToday }
})
: _vm._e(),
_vm._v(" "),
_vm.clearBtn
? _c("btn", {
attrs: { "data-action": "select", size: "sm" },
domProps: {
textContent: _vm._s(_vm.t("uiv.datePicker.clear"))
},
on: { click: _vm.clearSelect }
})
: _vm._e()
],
1
)
])
: _vm._e()
],
1
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
export default __vue_component__;
//# sourceMappingURL=DatePicker.js.map