ten-design-vue
Version:
ten-vue
850 lines (745 loc) • 24.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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // 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 = 6);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("../scripts/utils/helper");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("./util");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("../popup");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("../icon");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("../button");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("../input/value-format");
/***/ }),
/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/date-picker/picker.vue?vue&type=template&id=1e9b0de3&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ten-popup',{attrs:{"trigger-type":"manual","popup-class":"ten-picker","direction":_vm.direction,"show":_vm.popupShow},on:{"change":function($event){_vm.popupShow = false}},scopedSlots:_vm._u([{key:"trigger",fn:function(){return [_c('div',{class:_vm.triggerClassName,on:{"click":_vm.onTriggerClick}},[_c('ten-input-formatted',{attrs:{"get-input":_vm.setInputEle,"disabled":_vm.disabled,"placeholder":_vm.isRange ? _vm.startPlaceholder : _vm.placeholder,"size":_vm.size,"readonly":_vm._readonly,"parser":_vm.inputValueParser,"formatter":_vm.inputValueFormatter,"value":_vm.time[0],"is-changed":_vm.isInputValueChanged},on:{"change":_vm.onInputChange,"focus":_vm.onInputFocus,"keydown":_vm.onInputKeydown,"blur":_vm.onStartInputBlur}}),(_vm.isRange)?[_c('span',{staticClass:"ten-picker__input-separator",on:{"mousedown":function($event){$event.preventDefault();}}},[_vm._v("\n "+_vm._s(_vm.rangeSeparator || '至')+"\n ")]),_c('ten-input-formatted',{attrs:{"get-input":function (el) { return _vm.setInputEle(el, 1); },"disabled":_vm.disabled,"placeholder":_vm.endPlaceholder,"size":_vm.size,"readonly":_vm._readonly,"parser":function (v) { return _vm.inputValueParser(v, 1); },"formatter":_vm.inputValueFormatter,"value":_vm.time[1],"is-changed":_vm.isInputValueChanged},on:{"change":function (v) { return _vm.onInputChange(v, 1); },"focus":function (e) { return _vm.onInputFocus(e, 1); },"keydown":_vm.onInputKeydown,"blur":_vm.onEndInputBlur}})]:_vm._e(),_c('div',{staticClass:"ten-picker__input-suffixicon"},[_c('span',{staticClass:"ten-picker__input-icon ten-picker__input-icon--suffix"},[_vm._t("suffixIcon",function(){return [_c('ten-icon',{attrs:{"icon":_vm._suffixIcon}})]})],2),_c('span',{staticClass:"ten-picker__input-icon ten-picker__input-icon--clear",on:{"click":function($event){$event.stopPropagation();return _vm.clear.apply(null, arguments)}}},[(_vm.allowClear)?_vm._t("clearIcon",function(){return [_c('ten-icon',{attrs:{"icon":_vm.clearIcon || 'circle_clear'}})]}):_vm._e()],2)])],2)]},proxy:true}],null,true)},[_c('div',{staticClass:"ten-picker__popup",on:{"mousedown":function($event){$event.preventDefault();}}},[(_vm.shortCut)?_c('div',{staticClass:"ten-picker__popup-shortcut"},_vm._l((_vm.shortCut),function(item,i){return _c('ten-button',{key:i,staticClass:"ten-picker__popup-shortcut-btn",attrs:{"type":"text","size":"small"},on:{"click":function($event){return _vm.shortCutClickHandler(item.value)}}},[_vm._v("\n "+_vm._s(item.text)+"\n ")])}),1):_vm._e(),_vm._t("default",null,null,_vm.panelProps)],2)])}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/components/date-picker/picker.vue?vue&type=template&id=1e9b0de3&
// EXTERNAL MODULE: external "../popup"
var external_popup_ = __webpack_require__(2);
var external_popup_default = /*#__PURE__*/__webpack_require__.n(external_popup_);
// EXTERNAL MODULE: external "../icon"
var external_icon_ = __webpack_require__(3);
var external_icon_default = /*#__PURE__*/__webpack_require__.n(external_icon_);
// EXTERNAL MODULE: external "../button"
var external_button_ = __webpack_require__(4);
var external_button_default = /*#__PURE__*/__webpack_require__.n(external_button_);
// EXTERNAL MODULE: external "../input/value-format"
var value_format_ = __webpack_require__(5);
var value_format_default = /*#__PURE__*/__webpack_require__.n(value_format_);
// EXTERNAL MODULE: external "./util"
var external_util_ = __webpack_require__(1);
// EXTERNAL MODULE: external "../scripts/utils/helper"
var helper_ = __webpack_require__(0);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/date-picker/picker.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var TenInputFormatted = value_format_default()();
var DEFAULT_FORMAT = {
time: 'HH:mm:ss',
date: 'YYYY-MM-DD',
datetime: 'YYYY-MM-DD HH:mm:ss',
month: 'YYYY-MM',
year: 'YYYY'
};
var pickervue_type_script_lang_js_name = 'ten-picker';
/* harmony default export */ var pickervue_type_script_lang_js_ = ({
name: pickervue_type_script_lang_js_name,
provide: function provide() {
return {
picker: this
};
},
inject: {
formItem: {
from: 'tenFormItem',
default: undefined
},
wrapper: {
from: 'wrapper',
default: undefined
}
},
components: {
TenInputFormatted: TenInputFormatted,
TenPopup: external_popup_default.a,
TenIcon: external_icon_default.a,
TenButton: external_button_default.a
},
inheritAttrs: false,
props: {
/**
* 值
* @model
*/
value: {
type: [Date, String, Array]
},
/**
* 是否为对应类型的范围选择
*/
isRange: Boolean,
/**
* 显示给用户的格式。如果没传，将取 value-format 的值；如果 value-format 没传，将取组件内定义的默认值。
*/
format: String,
/**
* 绑定值的格式。不指定则绑定值为 Date 类型
*/
valueFormat: String,
/**
* 当 value 为 Date 对象并且指定了 value-format，
* 强制格式化成 value-format 指定格式，并触发 change 事件更新
*/
forceValueFormat: {
type: Boolean,
default: true
},
/**
* 定制面板的快捷选择方式
*/
shortCut: Array,
/**
* 是否显示清除按钮
*/
allowClear: {
type: Boolean,
default: true
},
/**
* input 框的尺寸，参考 input size 属性
*/
size: {
type: String,
default: 'default',
validator: function validator(v) {
return ['default', 'small'].indexOf(v) > -1;
}
},
/**
* 是否为错误状态
*/
error: Boolean,
/**
* 禁用
*/
disabled: Boolean,
/**
* 只读
*/
readonly: Boolean,
/**
* 非范围选择时的占位内容
*/
placeholder: {
type: String,
default: '请选择'
},
/**
* 范围选择时开始日期的占位内容
*/
startPlaceholder: {
type: String,
default: '开始'
},
/**
* 范围选择时结束日期的占位内容
*/
endPlaceholder: {
type: String,
default: '结束'
},
/**
* 范围选择input框中的连接符
*/
rangeSeparator: String,
/**
* 后缀 icon，支持同名 slot
*/
suffixIcon: String,
/**
* 清除按钮 icon，支持同名 slot
*/
clearIcon: String,
/**
* 面板的弹出方向，参考 popup 的 direction 属性
*/
direction: {
type: String,
default: 'bottom left'
},
/**
* @ignore
*/
type: {
type: String,
validator: function validator(v) {
return ['time', 'date', 'datetime', 'month', 'year'].indexOf(v) > -1;
}
}
},
data: function data() {
return {
time: this.transform(this.value),
popupShow: false,
startInputfocused: false,
endInputfocused: false
};
},
computed: {
triggerClassName: function triggerClassName() {
return ['ten-picker__input', "ten-picker__input--size-".concat(this.size), {
'ten-date-picker': this.type !== 'time',
'ten-time-picker': this.type === 'time',
'ten-picker__input--focused': this.pickerFocused,
'ten-picker__input--disabled': this.disabled,
'ten-picker__input--readonly': this.readonly,
'ten-picker__input--error': this.error,
'ten-picker__input--empty': !this.time.some(function (v) {
return v;
}),
'ten-picker__input--no-clear': !this.allowClear
}];
},
panelProps: function panelProps() {
return {
time: this.isRange ? this.time : this.time[0],
onChangeHandler: this.onChangeHandler,
getRelatedInput: this.getRelatedInput,
format: this._format
};
},
_readonly: function _readonly() {
return this.readonly || !this.popupShow;
},
pickerFocused: function pickerFocused() {
return this.startInputfocused || this.endInputfocused;
},
_format: function _format() {
var fmt = this.format;
return Object(helper_["isString"])(fmt) && fmt ? fmt : this._valueFormat;
},
_valueFormat: function _valueFormat() {
var fmt = this.valueFormat;
return Object(helper_["isString"])(fmt) && fmt ? fmt : DEFAULT_FORMAT[this.type];
},
_suffixIcon: function _suffixIcon() {
return this.suffixIcon || (this.type === 'time' ? 'line_circle_time' : 'calendar');
}
},
watch: {
value: function value(newValue) {
this.time = this.transform(newValue);
},
popupShow: function popupShow() {
this.$emit('popupShowChange', this.popupShow);
}
},
beforeCreate: function beforeCreate() {
this.inputEle = [];
},
methods: {
transform: function transform(value) {
var _this = this;
var time = value;
var emptyValue = [];
if (!this.isRange) {
time = [value];
} else if (!Array.isArray(value)) {
time = emptyValue;
}
var forceChange = false;
time = time.map(function (v) {
if (v instanceof Date) {
forceChange = _this.valueFormat && _this.forceValueFormat;
} else if (Object(helper_["isString"])(v)) {
var fmt = Object(helper_["isString"])(_this.valueFormat) && _this.valueFormat ? _this.valueFormat : DEFAULT_FORMAT[_this.type];
v = Object(external_util_["parseToDate"])(v, fmt); // data初始化时 this._valueFormat计算属性拿不到
}
return Object(helper_["isDate"])(v) ? v : undefined;
});
if (forceChange) {
this.onChangeHandler(time);
return emptyValue;
}
return time;
},
reverse: function reverse(value) {
var _this2 = this;
var isRange = this.isRange,
valueFormat = this.valueFormat;
if (Object(helper_["isString"])(valueFormat)) {
value = value.map(function (v) {
return Object(external_util_["dateToFormat"])(v, _this2._valueFormat);
});
}
return isRange ? value : value[0];
},
onChangeHandler: function onChangeHandler(newTime, hidePopup) {
var _this3 = this;
hidePopup = hidePopup || this.type.indexOf('time') === -1;
if (hidePopup) {
this.$nextTick(function () {
_this3.popupShow = false;
});
}
if (this.inputEle[this.lastFocusedInput]) {
this.inputEle[this.lastFocusedInput].focus();
} // 兼容panel组件参数
if (!Array.isArray(newTime)) {
newTime = [newTime];
} // 非受控组件，props没有设置value TODO: 使用map-props
if (typeof this.$props.value === 'undefined') {
this.time = newTime;
}
this.wrapper && this.wrapper.$emit('change', this.reverse(newTime));
this.formItem && this.formItem.$emit('form.change');
},
onTriggerClick: function onTriggerClick() {
if (this.readonly || this.disabled || this.popupShow) {
return;
}
this.popupShow = !this.popupShow;
},
clear: function clear() {
if (!this.allowClear) return;
this.onChangeHandler(this.reverse([]), true);
},
setInputEle: function setInputEle(el) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
this.inputEle[index] = el;
},
onInputChange: function onInputChange(value) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var newTime = this.time.slice(0);
newTime[index] = value;
this.onChangeHandler(newTime, true);
},
onInputFocus: function onInputFocus(e) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (!this.startInputfocused && !this.endInputfocused && this.wrapper) {
this.wrapper.$emit('focus', e);
}
this.lastFocusedInput = index;
this[index === 0 ? 'startInputfocused' : 'endInputfocused'] = true;
this.isBluring = false;
},
onInputKeydown: function onInputKeydown(e) {
var keycode = e.keyCode;
if (!this.popupShow && (keycode === 13 || keycode === 38 || keycode === 40)) {
this.popupShow = true;
}
},
onStartInputBlur: function onStartInputBlur(e) {
if (this.isRange) {
// 范围选择时不需要延迟
this.startInputfocused = false;
}
this.inputBlurHandler(e);
},
onEndInputBlur: function onEndInputBlur(e) {
this.endInputfocused = false;
this.inputBlurHandler(e, 1);
},
inputBlurHandler: function inputBlurHandler() {
var _this4 = this;
this.isBluring = true;
setTimeout(function () {
if (_this4.isBluring) {
if (!_this4.isRange) {
_this4.startInputfocused = false;
}
_this4.popupShow = false;
_this4.wrapper && _this4.wrapper.$emit('blur');
_this4.formItem && _this4.formItem.$emit('form.blur');
}
}, 300);
},
inputValueFormatter: function inputValueFormatter(date) {
return Object(external_util_["dateToFormat"])(date, this._format);
},
inputValueParser: function inputValueParser(dateStr) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
// 输入框清空
if (dateStr === '') return;
var value = Object(external_util_["parseToDate"])(dateStr, this._format); // fecha解析失败 尝试使用原生解析
if (value === null) {
// 兼容不写年份
if (!dateStr.match(/\d{4}/)) {
dateStr = "".concat(new Date().getFullYear(), " ").concat(dateStr);
}
value = new Date(dateStr);
} // 验证输入是否为合法值：非空Date、并且在指定范围内，超出范围使用边界值，否则使用上一次的值
if (!Object(helper_["isDate"])(value) || this.isInputValueDisabled(value)) {
var minDate = this.$attrs['min-date'];
var maxDate = this.$attrs['max-date'];
if (minDate && value < minDate) return minDate;
if (maxDate && value > maxDate) return maxDate;
return this.time[index];
}
return value;
},
isInputValueDisabled: function isInputValueDisabled(value) {
var disabledDate = this.$attrs['disabled-date'];
return disabledDate && disabledDate(value) || Object(external_util_["outOfRanges"])(value, this.$attrs['min-date'], this.$attrs['max-date']);
},
isInputValueChanged: function isInputValueChanged(newValue, oldValue) {
var type = this.type;
if (Object(helper_["isDate"])(oldValue) && Object(helper_["isDate"])(newValue)) {
switch (type) {
case 'year':
case 'month':
case 'date':
return !Object(external_util_["isSame"])(oldValue, newValue, type);
case 'time':
return !Object(external_util_["isSameTime"])(oldValue, newValue);
default:
return !Object(external_util_["isSame"])(oldValue, newValue) || !Object(external_util_["isSameTime"])(oldValue, newValue);
}
}
return oldValue !== newValue;
},
getRelatedInput: function getRelatedInput() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return this.inputEle[index];
},
shortCutClickHandler: function shortCutClickHandler(value) {
var _this5 = this;
if (typeof value === 'function') {
value = value();
}
if (!Array.isArray(value)) {
value = [value];
}
value = value.map(function (v) {
var newV = v;
if (Object(helper_["isString"])(v)) {
newV = Object(external_util_["parseToDate"])(v, _this5._valueFormat);
}
if (newV === null) {
newV = new Date(v);
}
if (!Object(helper_["isDate"])(newV)) {
throw new Error("ten-date-picker: shortcut value: ".concat(v, " is invalid date"));
}
return newV;
});
this.onChangeHandler(value, true);
}
}
});
// CONCATENATED MODULE: ./src/components/date-picker/picker.vue?vue&type=script&lang=js&
/* harmony default export */ var date_picker_pickervue_type_script_lang_js_ = (pickervue_type_script_lang_js_);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + 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 = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// 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 {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./src/components/date-picker/picker.vue
/* normalize component */
var component = normalizeComponent(
date_picker_pickervue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var picker = __webpack_exports__["default"] = (component.exports);
/***/ })
/******/ ]);