mint-ui
Version:
Mobile UI elements for vue.js
754 lines (649 loc) • 19.6 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 215);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// 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 (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
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 (injectStyles) {
hook = injectStyles
}
if (hook) {
var functional = options.functional
var existing = functional
? options.render
: options.beforeCreate
if (!functional) {
// inject component registration as beforeCreate hook
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
} else {
// register for functioal component in vue file
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return existing(h, context)
}
}
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ },
/***/ 112:
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ },
/***/ 136:
/***/ function(module, exports, __webpack_require__) {
function injectStyle (ssrContext) {
__webpack_require__(112)
}
var Component = __webpack_require__(0)(
/* script */
__webpack_require__(58),
/* template */
__webpack_require__(182),
/* styles */
injectStyle,
/* scopeId */
null,
/* moduleIdentifier (server only) */
null
)
module.exports = Component.exports
/***/ },
/***/ 182:
/***/ function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('mt-popup', {
staticClass: "mint-datetime",
attrs: {
"closeOnClickModal": _vm.closeOnClickModal,
"position": "bottom"
},
model: {
value: (_vm.visible),
callback: function($$v) {
_vm.visible = $$v
},
expression: "visible"
}
}, [_c('mt-picker', {
ref: "picker",
staticClass: "mint-datetime-picker",
attrs: {
"slots": _vm.dateSlots,
"visible-item-count": _vm.visibleItemCount,
"show-toolbar": ""
},
on: {
"change": _vm.onChange
}
}, [_c('span', {
staticClass: "mint-datetime-action mint-datetime-cancel",
on: {
"click": function($event) {
_vm.visible = false;
_vm.$emit('cancel')
}
}
}, [_vm._v(_vm._s(_vm.cancelText))]), _vm._v(" "), _c('span', {
staticClass: "mint-datetime-action mint-datetime-confirm",
on: {
"click": _vm.confirm
}
}, [_vm._v(_vm._s(_vm.confirmText))])])], 1)
},staticRenderFns: []}
/***/ },
/***/ 201:
/***/ function(module, exports) {
module.exports = require("mint-ui/lib/picker");
/***/ },
/***/ 202:
/***/ function(module, exports) {
module.exports = require("mint-ui/lib/picker/style.css");
/***/ },
/***/ 203:
/***/ function(module, exports) {
module.exports = require("mint-ui/lib/popup");
/***/ },
/***/ 204:
/***/ function(module, exports) {
module.exports = require("mint-ui/lib/popup/style.css");
/***/ },
/***/ 215:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(24);
/***/ },
/***/ 24:
/***/ function(module, exports, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_datetime_picker_vue__ = __webpack_require__(136);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_datetime_picker_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__src_datetime_picker_vue__);
Object.defineProperty(exports, "__esModule", { value: true });
/* harmony reexport (default from non-hamory) */ __webpack_require__.d(exports, "default", function() { return __WEBPACK_IMPORTED_MODULE_0__src_datetime_picker_vue___default.a; });
/***/ },
/***/ 58:
/***/ function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mint_ui_packages_picker_index_js__ = __webpack_require__(201);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mint_ui_packages_picker_index_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mint_ui_packages_picker_index_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_mint_ui_packages_popup_index_js__ = __webpack_require__(203);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_mint_ui_packages_popup_index_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_mint_ui_packages_popup_index_js__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
if (true) {
__webpack_require__(202);
__webpack_require__(204);
}
var FORMAT_MAP = {
Y: 'year',
M: 'month',
D: 'date',
H: 'hour',
m: 'minute'
};
/* harmony default export */ exports["default"] = {
name: 'mt-datetime-picker',
props: {
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确定'
},
type: {
type: String,
default: 'datetime'
},
startDate: {
type: Date,
default: function default$1() {
return new Date(new Date().getFullYear() - 10, 0, 1);
}
},
endDate: {
type: Date,
default: function default$2() {
return new Date(new Date().getFullYear() + 10, 11, 31);
}
},
startHour: {
type: Number,
default: 0
},
endHour: {
type: Number,
default: 23
},
yearFormat: {
type: String,
default: '{value}'
},
monthFormat: {
type: String,
default: '{value}'
},
dateFormat: {
type: String,
default: '{value}'
},
hourFormat: {
type: String,
default: '{value}'
},
minuteFormat: {
type: String,
default: '{value}'
},
visibleItemCount: {
type: Number,
default: 7
},
closeOnClickModal: {
type: Boolean,
default: true
},
value: null
},
data: function data() {
return {
visible: false,
startYear: null,
endYear: null,
startMonth: 1,
endMonth: 12,
startDay: 1,
endDay: 31,
currentValue: null,
selfTriggered: false,
dateSlots: [],
shortMonthDates: [],
longMonthDates: [],
febDates: [],
leapFebDates: []
};
},
components: {
'mt-picker': __WEBPACK_IMPORTED_MODULE_0_mint_ui_packages_picker_index_js___default.a,
'mt-popup': __WEBPACK_IMPORTED_MODULE_1_mint_ui_packages_popup_index_js___default.a
},
methods: {
open: function open() {
this.visible = true;
},
close: function close() {
this.visible = false;
},
isLeapYear: function isLeapYear(year) {
return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
},
isShortMonth: function isShortMonth(month) {
return [4, 6, 9, 11].indexOf(month) > -1;
},
getMonthEndDay: function getMonthEndDay(year, month) {
if (this.isShortMonth(month)) {
return 30;
} else if (month === 2) {
return this.isLeapYear(year) ? 29 : 28;
} else {
return 31;
}
},
getTrueValue: function getTrueValue(formattedValue) {
if (!formattedValue) return;
while (isNaN(parseInt(formattedValue, 10))) {
formattedValue = formattedValue.slice(1);
}
return parseInt(formattedValue, 10);
},
getValue: function getValue(values) {
var this$1 = this;
var value;
if (this.type === 'time') {
value = values.map(function (value) { return ('0' + this$1.getTrueValue(value)).slice(-2); }).join(':');
} else {
var year = this.getTrueValue(values[0]);
var month = this.getTrueValue(values[1]);
var date = this.getTrueValue(values[2]);
var maxDate = this.getMonthEndDay(year, month);
if (date > maxDate) {
this.selfTriggered = true;
date = 1;
}
var hour = this.typeStr.indexOf('H') > -1 ? this.getTrueValue(values[this.typeStr.indexOf('H')]) : 0;
var minute = this.typeStr.indexOf('m') > -1 ? this.getTrueValue(values[this.typeStr.indexOf('m')]) : 0;
value = new Date(year, month - 1, date, hour, minute);
}
return value;
},
onChange: function onChange(picker) {
var values = picker.$children.filter(function (child) { return child.currentValue !== undefined; }).map(function (child) { return child.currentValue; });
if (this.selfTriggered) {
this.selfTriggered = false;
return;
}
if (values.length !== 0) {
this.currentValue = this.getValue(values);
this.handleValueChange();
}
},
fillValues: function fillValues(type, start, end) {
var this$1 = this;
var values = [];
for (var i = start; i <= end; i++) {
if (i < 10) {
values.push(this$1[((FORMAT_MAP[type]) + "Format")].replace('{value}', ('0' + i).slice(-2)));
} else {
values.push(this$1[((FORMAT_MAP[type]) + "Format")].replace('{value}', i));
}
}
return values;
},
pushSlots: function pushSlots(slots, type, start, end) {
slots.push({
flex: 1,
values: this.fillValues(type, start, end)
});
},
generateSlots: function generateSlots() {
var this$1 = this;
var dateSlots = [];
var INTERVAL_MAP = {
Y: this.rims.year,
M: this.rims.month,
D: this.rims.date,
H: this.rims.hour,
m: this.rims.min
};
var typesArr = this.typeStr.split('');
typesArr.forEach(function (type) {
if (INTERVAL_MAP[type]) {
this$1.pushSlots.apply(null, [dateSlots, type].concat(INTERVAL_MAP[type]));
}
});
if (this.typeStr === 'Hm') {
dateSlots.splice(1, 0, {
divider: true,
content: ':'
});
}
this.dateSlots = dateSlots;
this.handleExceededValue();
},
handleExceededValue: function handleExceededValue() {
var this$1 = this;
var values = [];
if (this.type === 'time') {
var currentValue = this.currentValue.split(':');
values = [
this.hourFormat.replace('{value}', currentValue[0]),
this.minuteFormat.replace('{value}', currentValue[1])
];
} else {
values = [
this.yearFormat.replace('{value}', this.getYear(this.currentValue)),
this.monthFormat.replace('{value}', ('0' + this.getMonth(this.currentValue)).slice(-2)),
this.dateFormat.replace('{value}', ('0' + this.getDate(this.currentValue)).slice(-2))
];
if (this.type === 'datetime') {
values.push(
this.hourFormat.replace('{value}', ('0' + this.getHour(this.currentValue)).slice(-2)),
this.minuteFormat.replace('{value}', ('0' + this.getMinute(this.currentValue)).slice(-2))
);
}
}
this.dateSlots.filter(function (child) { return child.values !== undefined; })
.map(function (slot) { return slot.values; }).forEach(function (slotValues, index) {
if (slotValues.indexOf(values[index]) === -1) {
values[index] = slotValues[0];
}
});
this.$nextTick(function () {
this$1.setSlotsByValues(values);
});
},
setSlotsByValues: function setSlotsByValues(values) {
var setSlotValue = this.$refs.picker.setSlotValue;
if (this.type === 'time') {
setSlotValue(0, values[0]);
setSlotValue(1, values[1]);
}
if (this.type !== 'time') {
setSlotValue(0, values[0]);
setSlotValue(1, values[1]);
setSlotValue(2, values[2]);
if (this.type === 'datetime') {
setSlotValue(3, values[3]);
setSlotValue(4, values[4]);
}
}
[].forEach.call(this.$refs.picker.$children, function (child) { return child.doOnValueChange(); });
},
rimDetect: function rimDetect(result, rim) {
var position = rim === 'start' ? 0 : 1;
var rimDate = rim === 'start' ? this.startDate : this.endDate;
if (this.getYear(this.currentValue) === rimDate.getFullYear()) {
result.month[position] = rimDate.getMonth() + 1;
if (this.getMonth(this.currentValue) === rimDate.getMonth() + 1) {
result.date[position] = rimDate.getDate();
if (this.getDate(this.currentValue) === rimDate.getDate()) {
result.hour[position] = rimDate.getHours();
if (this.getHour(this.currentValue) === rimDate.getHours()) {
result.min[position] = rimDate.getMinutes();
}
}
}
}
},
isDateString: function isDateString(str) {
return /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/.test(str);
},
getYear: function getYear(value) {
return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[0] : value.getFullYear();
},
getMonth: function getMonth(value) {
return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[1] : value.getMonth() + 1;
},
getDate: function getDate(value) {
return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[2] : value.getDate();
},
getHour: function getHour(value) {
if (this.isDateString(value)) {
var str = value.split(' ')[1] || '00:00:00';
return str.split(':')[0];
}
return value.getHours();
},
getMinute: function getMinute(value) {
if (this.isDateString(value)) {
var str = value.split(' ')[1] || '00:00:00';
return str.split(':')[1];
}
return value.getMinutes();
},
confirm: function confirm() {
this.visible = false;
this.$emit('confirm', this.currentValue);
},
handleValueChange: function handleValueChange() {
this.$emit('input', this.currentValue);
}
},
computed: {
rims: function rims() {
if (!this.currentValue) return { year: [], month: [], date: [], hour: [], min: [] };
var result;
if (this.type === 'time') {
result = {
hour: [this.startHour, this.endHour],
min: [0, 59]
};
return result;
}
result = {
year: [this.startDate.getFullYear(), this.endDate.getFullYear()],
month: [1, 12],
date: [1, this.getMonthEndDay(this.getYear(this.currentValue), this.getMonth(this.currentValue))],
hour: [0, 23],
min: [0, 59]
};
this.rimDetect(result, 'start');
this.rimDetect(result, 'end');
return result;
},
typeStr: function typeStr() {
if (this.type === 'time') {
return 'Hm';
} else if (this.type === 'date') {
return 'YMD';
} else {
return 'YMDHm';
}
}
},
watch: {
value: function value(val) {
this.currentValue = val;
},
rims: function rims$1() {
this.generateSlots();
},
visible: function visible(val) {
this.$emit('visible-change', val);
}
},
mounted: function mounted() {
this.currentValue = this.value;
if (!this.value) {
if (this.type.indexOf('date') > -1) {
this.currentValue = this.startDate;
} else {
this.currentValue = (('0' + this.startHour).slice(-2)) + ":00";
}
}
this.generateSlots();
}
};
/***/ }
/******/ });