element-nice-ui
Version:
A Component Library for Vue.js.
1,560 lines (1,451 loc) • 48.9 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 = "/dist/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 201);
/******/ })
/************************************************************************/
/******/ ({
/***/ 13:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/mixins/emitter");
/***/ }),
/***/ 17:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/vue-popper");
/***/ }),
/***/ 18:
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/***/ 2:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* 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
}
}
/***/ }),
/***/ 201:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./packages/date-picker/src/picker.vue + 4 modules
var picker = __webpack_require__(73);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time-select.vue?vue&type=template&id=7cee05ae
var render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"transition",
{
attrs: { name: "el-zoom-in-top" },
on: {
"before-enter": _vm.handleMenuEnter,
"after-leave": function ($event) {
return _vm.$emit("dodestroy")
},
},
},
[
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.visible,
expression: "visible",
},
],
ref: "popper",
staticClass: "el-picker-panel time-select el-popper",
class: _vm.popperClass,
style: { width: _vm.width + "px" },
},
[
_c(
"el-scrollbar",
{
attrs: { noresize: "", "wrap-class": "el-picker-panel__content" },
},
_vm._l(_vm.items, function (item) {
return _c(
"div",
{
key: item.value,
staticClass: "time-select-item",
class: {
selected: _vm.value === item.value,
disabled: item.disabled,
default: item.value === _vm.defaultValue,
},
attrs: { disabled: item.disabled },
on: {
click: function ($event) {
return _vm.handleClick(item)
},
},
},
[_vm._v(_vm._s(item.value))]
)
}),
0
),
],
1
),
]
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/date-picker/src/panel/time-select.vue?vue&type=template&id=7cee05ae
// EXTERNAL MODULE: external "element-nice-ui/lib/scrollbar"
var scrollbar_ = __webpack_require__(32);
var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/scroll-into-view"
var scroll_into_view_ = __webpack_require__(70);
var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_view_);
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time-select.vue?vue&type=script&lang=js
const parseTime = function parseTime(time) {
const values = (time || '').split(':');
if (values.length >= 2) {
const hours = parseInt(values[0], 10);
const minutes = parseInt(values[1], 10);
return {
hours,
minutes
};
}
/* istanbul ignore next */
return null;
};
const compareTime = function compareTime(time1, time2) {
const value1 = parseTime(time1);
const value2 = parseTime(time2);
const minutes1 = value1.minutes + value1.hours * 60;
const minutes2 = value2.minutes + value2.hours * 60;
if (minutes1 === minutes2) {
return 0;
}
return minutes1 > minutes2 ? 1 : -1;
};
const formatTime = function formatTime(time) {
return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes);
};
const nextTime = function nextTime(time, step) {
const timeValue = parseTime(time);
const stepValue = parseTime(step);
const next = {
hours: timeValue.hours,
minutes: timeValue.minutes
};
next.minutes += stepValue.minutes;
next.hours += stepValue.hours;
next.hours += Math.floor(next.minutes / 60);
next.minutes = next.minutes % 60;
return formatTime(next);
};
/* harmony default export */ var time_selectvue_type_script_lang_js = ({
components: {
ElScrollbar: scrollbar_default.a
},
watch: {
value(val) {
if (!val) return;
this.$nextTick(() => this.scrollToOption());
}
},
methods: {
handleClick(item) {
if (!item.disabled) {
this.$emit('pick', item.value);
}
},
handleClear() {
this.$emit('pick', null);
},
scrollToOption() {
let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.selected';
const menu = this.$refs.popper.querySelector('.el-picker-panel__content');
scroll_into_view_default()(menu, menu.querySelector(selector));
},
handleMenuEnter() {
const selected = this.items.map(item => item.value).indexOf(this.value) !== -1;
const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1;
const option = selected && '.selected' || hasDefault && '.default' || '.time-select-item:not(.disabled)';
this.$nextTick(() => this.scrollToOption(option));
},
scrollDown(step) {
const items = this.items;
const length = items.length;
let total = items.length;
let index = items.map(item => item.value).indexOf(this.value);
while (total--) {
index = (index + step + length) % length;
if (!items[index].disabled) {
this.$emit('pick', items[index].value, true);
return;
}
}
},
isValidValue(date) {
return this.items.filter(item => !item.disabled).map(item => item.value).indexOf(date) !== -1;
},
handleKeydown(event) {
const keyCode = event.keyCode;
if (keyCode === 38 || keyCode === 40) {
const mapping = {
40: 1,
38: -1
};
const offset = mapping[keyCode.toString()];
this.scrollDown(offset);
event.stopPropagation();
return;
}
}
},
data() {
return {
popperClass: '',
start: '09:00',
end: '18:00',
step: '00:30',
value: '',
defaultValue: '',
visible: false,
minTime: '',
maxTime: '',
width: 0
};
},
computed: {
items() {
const start = this.start;
const end = this.end;
const step = this.step;
const result = [];
if (start && end && step) {
let current = start;
while (compareTime(current, end) <= 0) {
result.push({
value: current,
disabled: compareTime(current, this.minTime || '-1:-1') <= 0 || compareTime(current, this.maxTime || '100:100') >= 0
});
current = nextTime(current, step);
}
}
return result;
}
}
});
// CONCATENATED MODULE: ./packages/date-picker/src/panel/time-select.vue?vue&type=script&lang=js
/* harmony default export */ var panel_time_selectvue_type_script_lang_js = (time_selectvue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);
// CONCATENATED MODULE: ./packages/date-picker/src/panel/time-select.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
panel_time_selectvue_type_script_lang_js,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var time_select = (component.exports);
// CONCATENATED MODULE: ./packages/date-picker/src/picker/time-select.js
/* harmony default export */ var picker_time_select = ({
mixins: [picker["a" /* default */]],
name: 'ElTimeSelect',
componentName: 'ElTimeSelect',
props: {
type: {
type: String,
default: 'time-select'
}
},
beforeCreate() {
this.panel = time_select;
}
});
// CONCATENATED MODULE: ./packages/time-select/index.js
/* istanbul ignore next */
picker_time_select.install = function (Vue) {
Vue.component(picker_time_select.name, picker_time_select);
};
/* harmony default export */ var packages_time_select = __webpack_exports__["default"] = (picker_time_select);
/***/ }),
/***/ 22:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/input");
/***/ }),
/***/ 23:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/merge");
/***/ }),
/***/ 27:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/clickoutside");
/***/ }),
/***/ 32:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/scrollbar");
/***/ }),
/***/ 4:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/date-util");
/***/ }),
/***/ 5:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/util");
/***/ }),
/***/ 70:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/scroll-into-view");
/***/ }),
/***/ 73:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=template&id=20a643ec
var render = function render() {
var _vm = this,
_c = _vm._self._c
return !_vm.ranged
? _c(
"el-input",
_vm._b(
{
directives: [
{
name: "clickoutside",
rawName: "v-clickoutside",
value: _vm.handleClose,
expression: "handleClose",
},
],
ref: "reference",
staticClass: "el-date-editor",
class: "el-date-editor--" + _vm.type,
attrs: {
readonly:
!_vm.editable ||
_vm.pickerReadonly ||
_vm.type === "dates" ||
_vm.type === "week",
disabled: _vm.pickerDisabled,
size: _vm.pickerSize,
name: _vm.name,
placeholder: _vm.placeholder,
value: _vm.displayValue,
clearable: false,
validateEvent: false,
},
on: {
focus: _vm.handleFocus,
input: (value) => (_vm.userInput = value),
change: _vm.handleChange,
},
nativeOn: {
keydown: function ($event) {
return _vm.handleKeydown.apply(null, arguments)
},
mouseenter: function ($event) {
return _vm.handleMouseEnter.apply(null, arguments)
},
mouseleave: function ($event) {
_vm.showClose = false
},
},
},
"el-input",
_vm.firstInputId,
false
),
[
_c("i", {
staticClass: "el-input__icon",
class: _vm.triggerClass,
attrs: { slot: "prefix" },
on: { click: _vm.handleFocus },
slot: "prefix",
}),
_vm.haveTrigger
? _c("i", {
staticClass: "el-input__icon",
class: [_vm.showClose ? "" + _vm.clearIcon : ""],
attrs: { slot: "suffix" },
on: { click: _vm.handleClickIcon },
slot: "suffix",
})
: _vm._e(),
]
)
: _c(
"div",
{
directives: [
{
name: "clickoutside",
rawName: "v-clickoutside",
value: _vm.handleClose,
expression: "handleClose",
},
],
ref: "reference",
staticClass: "el-date-editor el-range-editor el-input__inner",
class: [
"el-date-editor--" + _vm.type,
_vm.pickerSize ? `el-range-editor--${_vm.pickerSize}` : "",
_vm.pickerDisabled ? "is-disabled" : "",
_vm.pickerVisible ? "is-active" : "",
],
on: {
click: _vm.handleRangeClick,
mouseenter: _vm.handleMouseEnter,
mouseleave: function ($event) {
_vm.showClose = false
},
keydown: _vm.handleKeydown,
},
},
[
_c("i", {
class: ["el-input__icon", "el-range__icon", _vm.triggerClass],
}),
_c(
"input",
_vm._b(
{
staticClass: "el-range-input",
attrs: {
autocomplete: "off",
placeholder: _vm.startPlaceholder,
disabled: _vm.pickerDisabled,
readonly: !_vm.editable || _vm.pickerReadonly,
name: _vm.name && _vm.name[0],
},
domProps: { value: _vm.displayValue && _vm.displayValue[0] },
on: {
input: _vm.handleStartInput,
change: _vm.handleStartChange,
focus: _vm.handleFocus,
},
},
"input",
_vm.firstInputId,
false
)
),
_vm._t("range-separator", function () {
return [
_c("span", { staticClass: "el-range-separator" }, [
_vm._v(_vm._s(_vm.rangeSeparator)),
]),
]
}),
_c(
"input",
_vm._b(
{
staticClass: "el-range-input",
attrs: {
autocomplete: "off",
placeholder: _vm.endPlaceholder,
disabled: _vm.pickerDisabled,
readonly: !_vm.editable || _vm.pickerReadonly,
name: _vm.name && _vm.name[1],
},
domProps: { value: _vm.displayValue && _vm.displayValue[1] },
on: {
input: _vm.handleEndInput,
change: _vm.handleEndChange,
focus: _vm.handleFocus,
},
},
"input",
_vm.secondInputId,
false
)
),
_vm.haveTrigger
? _c("i", {
staticClass: "el-input__icon el-range__close-icon",
class: [_vm.showClose ? "" + _vm.clearIcon : ""],
on: { click: _vm.handleClickIcon },
})
: _vm._e(),
],
2
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=template&id=20a643ec
// EXTERNAL MODULE: external "vue"
var external_vue_ = __webpack_require__(18);
var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/clickoutside"
var clickoutside_ = __webpack_require__(27);
var clickoutside_default = /*#__PURE__*/__webpack_require__.n(clickoutside_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/date-util"
var date_util_ = __webpack_require__(4);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/vue-popper"
var vue_popper_ = __webpack_require__(17);
var vue_popper_default = /*#__PURE__*/__webpack_require__.n(vue_popper_);
// EXTERNAL MODULE: external "element-nice-ui/lib/mixins/emitter"
var emitter_ = __webpack_require__(13);
var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
// EXTERNAL MODULE: external "element-nice-ui/lib/input"
var input_ = __webpack_require__(22);
var input_default = /*#__PURE__*/__webpack_require__.n(input_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/merge"
var merge_ = __webpack_require__(23);
var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/util"
var util_ = __webpack_require__(5);
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=script&lang=js
const NewPopper = {
props: {
appendToBody: vue_popper_default.a.props.appendToBody,
offset: vue_popper_default.a.props.offset,
boundariesPadding: vue_popper_default.a.props.boundariesPadding,
arrowOffset: vue_popper_default.a.props.arrowOffset
},
methods: vue_popper_default.a.methods,
data() {
return merge_default()({
visibleArrow: true
}, vue_popper_default.a.data);
},
beforeDestroy: vue_popper_default.a.beforeDestroy
};
const DEFAULT_FORMATS = {
date: 'yyyy-MM-dd',
month: 'yyyy-MM',
datetime: 'yyyy-MM-dd HH:mm:ss',
time: 'HH:mm:ss',
week: 'yyyywWW',
timerange: 'HH:mm:ss',
daterange: 'yyyy-MM-dd',
monthrange: 'yyyy-MM',
datetimerange: 'yyyy-MM-dd HH:mm:ss',
year: 'yyyy'
};
const HAVE_TRIGGER_TYPES = ['date', 'datetime', 'time', 'time-select', 'week', 'month', 'year', 'daterange', 'monthrange', 'timerange', 'datetimerange', 'dates'];
const pickervue_type_script_lang_js_DATE_FORMATTER = function DATE_FORMATTER(value, format) {
if (format === 'timestamp') return value.getTime();
return Object(date_util_["formatDate"])(value, format);
};
const pickervue_type_script_lang_js_DATE_PARSER = function DATE_PARSER(text, format) {
if (format === 'timestamp') return new Date(Number(text));
return Object(date_util_["parseDate"])(text, format);
};
const RANGE_FORMATTER = function RANGE_FORMATTER(value, format) {
if (Array.isArray(value) && value.length === 2) {
const start = value[0];
const end = value[1];
if (start && end) {
return [pickervue_type_script_lang_js_DATE_FORMATTER(start, format), pickervue_type_script_lang_js_DATE_FORMATTER(end, format)];
}
}
return '';
};
const RANGE_PARSER = function RANGE_PARSER(array, format, separator) {
if (!Array.isArray(array)) {
array = array.split(separator);
}
if (array.length === 2) {
const range1 = array[0];
const range2 = array[1];
return [pickervue_type_script_lang_js_DATE_PARSER(range1, format), pickervue_type_script_lang_js_DATE_PARSER(range2, format)];
}
return [];
};
const TYPE_VALUE_RESOLVER_MAP = {
default: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
if (text === undefined || text === '') return null;
return text;
}
},
week: {
formatter(value, format) {
let week = Object(date_util_["getWeekNumber"])(value);
let month = value.getMonth();
const trueDate = new Date(value);
if (week === 1 && month === 11) {
trueDate.setHours(0, 0, 0, 0);
trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);
}
let date = Object(date_util_["formatDate"])(trueDate, format);
date = /WW/.test(date) ? date.replace(/WW/, week < 10 ? '0' + week : week) : date.replace(/W/, week);
return date;
},
parser(text, format) {
// parse as if a normal date
return TYPE_VALUE_RESOLVER_MAP.date.parser(text, format);
}
},
date: {
formatter: pickervue_type_script_lang_js_DATE_FORMATTER,
parser: pickervue_type_script_lang_js_DATE_PARSER
},
datetime: {
formatter: pickervue_type_script_lang_js_DATE_FORMATTER,
parser: pickervue_type_script_lang_js_DATE_PARSER
},
daterange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
monthrange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
datetimerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
timerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
time: {
formatter: pickervue_type_script_lang_js_DATE_FORMATTER,
parser: pickervue_type_script_lang_js_DATE_PARSER
},
month: {
formatter: pickervue_type_script_lang_js_DATE_FORMATTER,
parser: pickervue_type_script_lang_js_DATE_PARSER
},
year: {
formatter: pickervue_type_script_lang_js_DATE_FORMATTER,
parser: pickervue_type_script_lang_js_DATE_PARSER
},
number: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
let result = Number(text);
if (!isNaN(text)) {
return result;
} else {
return null;
}
}
},
dates: {
formatter(value, format) {
return value.map(date => pickervue_type_script_lang_js_DATE_FORMATTER(date, format));
},
parser(value, format) {
return (typeof value === 'string' ? value.split(', ') : value).map(date => date instanceof Date ? date : pickervue_type_script_lang_js_DATE_PARSER(date, format));
}
}
};
const PLACEMENT_MAP = {
left: 'bottom-start',
center: 'bottom',
right: 'bottom-end'
};
const parseAsFormatAndType = function parseAsFormatAndType(value, customFormat, type) {
let rangeSeparator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '-';
if (!value) return null;
const parser = (TYPE_VALUE_RESOLVER_MAP[type] || TYPE_VALUE_RESOLVER_MAP['default']).parser;
const format = customFormat || DEFAULT_FORMATS[type];
return parser(value, format, rangeSeparator);
};
const formatAsFormatAndType = (value, customFormat, type) => {
if (!value) return null;
const formatter = (TYPE_VALUE_RESOLVER_MAP[type] || TYPE_VALUE_RESOLVER_MAP['default']).formatter;
const format = customFormat || DEFAULT_FORMATS[type];
return formatter(value, format);
};
/*
* Considers:
* 1. Date object
* 2. date string
* 3. array of 1 or 2
*/
const valueEquals = function valueEquals(a, b) {
// considers Date object and string
const dateEquals = function dateEquals(a, b) {
const aIsDate = a instanceof Date;
const bIsDate = b instanceof Date;
if (aIsDate && bIsDate) {
return a.getTime() === b.getTime();
}
if (!aIsDate && !bIsDate) {
return a === b;
}
return false;
};
const aIsArray = a instanceof Array;
const bIsArray = b instanceof Array;
if (aIsArray && bIsArray) {
if (a.length !== b.length) {
return false;
}
return a.every((item, index) => dateEquals(item, b[index]));
}
if (!aIsArray && !bIsArray) {
return dateEquals(a, b);
}
return false;
};
const isString = function isString(val) {
return typeof val === 'string' || val instanceof String;
};
const validator = function validator(val) {
// either: String, Array of String, null / undefined
return val === null || val === undefined || isString(val) || Array.isArray(val) && val.length === 2 && val.every(isString);
};
/* harmony default export */ var pickervue_type_script_lang_js = ({
mixins: [emitter_default.a, NewPopper],
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
props: {
size: String,
format: String,
valueFormat: String,
readonly: {
type: Boolean,
default: undefined
},
placeholder: {
type: String,
default: '请选择日期'
},
startPlaceholder: {
type: String,
default: '开始日期'
},
endPlaceholder: {
type: String,
default: '结束日期'
},
prefixIcon: String,
clearIcon: {
type: String,
default: 'el-icon-circle-close'
},
name: {
default: '',
validator
},
disabled: {
type: Boolean,
default: undefined
},
clearable: {
type: Boolean,
default: true
},
id: {
default: '',
validator
},
popperClass: String,
editable: {
type: Boolean,
default: true
},
align: {
type: String,
default: 'left'
},
value: {},
defaultValue: {},
defaultTime: {},
rangeSeparator: {
default: '-'
},
pickerOptions: {},
unlinkPanels: Boolean,
validateEvent: {
type: Boolean,
default: true
}
},
components: {
ElInput: input_default.a
},
directives: {
Clickoutside: clickoutside_default.a
},
data() {
return {
pickerVisible: false,
showClose: false,
userInput: null,
valueOnOpen: null,
// value when picker opens, used to determine whether to emit change
unwatchPickerOptions: null
};
},
watch: {
pickerVisible(val) {
if (this.pickerReadonly || this.pickerDisabled) return;
if (val) {
this.showPicker();
this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value;
} else {
this.hidePicker();
this.emitChange(this.value);
this.userInput = null;
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.blur');
}
this.$emit('blur', this);
this.blur();
}
},
parsedValue: {
immediate: true,
handler(val) {
if (this.picker) {
this.picker.value = val;
}
}
},
defaultValue(val) {
// NOTE: should eventually move to jsx style picker + panel ?
if (this.picker) {
this.picker.defaultValue = val;
}
},
value(val, oldVal) {
if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.change', val);
}
}
},
computed: {
ranged() {
return this.type.indexOf('range') > -1;
},
reference() {
const reference = this.$refs.reference;
return reference.$el || reference;
},
refInput() {
if (this.reference) {
return [].slice.call(this.reference.querySelectorAll('input'));
}
return [];
},
valueIsEmpty() {
const val = this.value;
if (Array.isArray(val)) {
for (let i = 0, len = val.length; i < len; i++) {
if (val[i]) {
return false;
}
}
} else {
if (val) {
return false;
}
}
return true;
},
triggerClass() {
return this.prefixIcon || (this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date');
},
selectionMode() {
if (this.type === 'week') {
return 'week';
} else if (this.type === 'month') {
return 'month';
} else if (this.type === 'year') {
return 'year';
} else if (this.type === 'dates') {
return 'dates';
}
return 'day';
},
haveTrigger() {
if (typeof this.showTrigger !== 'undefined') {
return this.showTrigger;
}
return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1;
},
displayValue() {
const formattedValue = formatAsFormatAndType(this.parsedValue, this.format, this.type, this.rangeSeparator);
if (Array.isArray(this.userInput)) {
return [this.userInput[0] || formattedValue && formattedValue[0] || '', this.userInput[1] || formattedValue && formattedValue[1] || ''];
} else if (this.userInput !== null) {
return this.userInput;
} else if (formattedValue) {
return this.type === 'dates' ? formattedValue.join(', ') : formattedValue;
} else {
return '';
}
},
parsedValue() {
if (!this.value) return this.value; // component value is not set
if (this.type === 'time-select') return this.value; // time-select does not require parsing, this might change in next major version
const valueIsDateObject = Object(date_util_["isDateObject"])(this.value) || Array.isArray(this.value) && this.value.every(date_util_["isDateObject"]);
if (valueIsDateObject) {
return this.value;
}
if (this.valueFormat) {
return parseAsFormatAndType(this.value, this.valueFormat, this.type, this.rangeSeparator) || this.value;
}
// NOTE: deal with common but incorrect usage, should remove in next major version
// user might provide string / timestamp without value-format, coerce them into date (or array of date)
return Array.isArray(this.value) ? this.value.map(val => new Date(val)) : new Date(this.value);
},
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
pickerSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
pickerDisabled() {
return Object(util_["getDefined"])(this.disabled, (this.elForm || {}).disabled, false);
},
pickerReadonly() {
return Object(util_["getDefined"])(this.readonly, (this.elForm || {}).readonly, false);
},
firstInputId() {
const obj = {};
let id;
if (this.ranged) {
id = this.id && this.id[0];
} else {
id = this.id;
}
if (id) obj.id = id;
return obj;
},
secondInputId() {
const obj = {};
let id;
if (this.ranged) {
id = this.id && this.id[1];
}
if (id) obj.id = id;
return obj;
}
},
created() {
// vue-popper
this.popperOptions = {
boundariesPadding: 0,
gpuAcceleration: false
};
this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;
this.$on('fieldReset', this.handleFieldReset);
},
methods: {
focus() {
if (!this.ranged) {
this.$refs.reference.focus();
} else {
this.handleFocus();
}
},
blur() {
this.refInput.forEach(input => input.blur());
},
// {parse, formatTo} Value deals maps component value with internal Date
parseValue(value) {
const isParsed = Object(date_util_["isDateObject"])(value) || Array.isArray(value) && value.every(date_util_["isDateObject"]);
if (this.valueFormat && !isParsed) {
return parseAsFormatAndType(value, this.valueFormat, this.type, this.rangeSeparator) || value;
} else {
return value;
}
},
formatToValue(date) {
const isFormattable = Object(date_util_["isDateObject"])(date) || Array.isArray(date) && date.every(date_util_["isDateObject"]);
if (this.valueFormat && isFormattable) {
return formatAsFormatAndType(date, this.valueFormat, this.type, this.rangeSeparator);
} else {
return date;
}
},
// {parse, formatTo} String deals with user input
parseString(value) {
const type = Array.isArray(value) ? this.type : this.type.replace('range', '');
return parseAsFormatAndType(value, this.format, type);
},
formatToString(value) {
const type = Array.isArray(value) ? this.type : this.type.replace('range', '');
return formatAsFormatAndType(value, this.format, type);
},
handleMouseEnter() {
if (this.pickerReadonly || this.pickerDisabled) return;
if (!this.valueIsEmpty && this.clearable) {
this.showClose = true;
}
},
handleChange() {
if (this.userInput) {
const value = this.parseString(this.displayValue);
if (value) {
this.picker.value = value;
if (this.isValidValue(value)) {
this.emitInput(value);
this.userInput = null;
}
}
}
if (this.userInput === '') {
this.emitInput(null);
this.emitChange(null);
this.userInput = null;
}
},
handleStartInput(event) {
if (this.userInput) {
this.userInput = [event.target.value, this.userInput[1]];
} else {
this.userInput = [event.target.value, null];
}
},
handleEndInput(event) {
if (this.userInput) {
this.userInput = [this.userInput[0], event.target.value];
} else {
this.userInput = [null, event.target.value];
}
},
handleStartChange(event) {
const value = this.parseString(this.userInput && this.userInput[0]);
if (value) {
this.userInput = [this.formatToString(value), this.displayValue[1]];
const newValue = [value, this.picker.value && this.picker.value[1]];
this.picker.value = newValue;
if (this.isValidValue(newValue)) {
this.emitInput(newValue);
this.userInput = null;
}
}
},
handleEndChange(event) {
const value = this.parseString(this.userInput && this.userInput[1]);
if (value) {
this.userInput = [this.displayValue[0], this.formatToString(value)];
const newValue = [this.picker.value && this.picker.value[0], value];
this.picker.value = newValue;
if (this.isValidValue(newValue)) {
this.emitInput(newValue);
this.userInput = null;
}
}
},
handleClickIcon(event) {
if (this.pickerReadonly || this.pickerDisabled) return;
if (this.showClose) {
this.valueOnOpen = this.value;
event.stopPropagation();
this.emitInput(null);
this.emitChange(null);
this.showClose = false;
if (this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
} else {
this.pickerVisible = !this.pickerVisible;
}
},
handleClose() {
if (!this.pickerVisible) return;
this.pickerVisible = false;
if (this.type === 'dates') {
// restore to former value
const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;
this.emitInput(oldValue);
}
},
handleFieldReset(initialValue) {
this.userInput = initialValue === '' ? null : initialValue;
},
handleFocus() {
const type = this.type;
if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
this.pickerVisible = true;
}
this.$emit('focus', this);
},
handleKeydown(event) {
const keyCode = event.keyCode;
// ESC
if (keyCode === 27) {
this.pickerVisible = false;
event.stopPropagation();
return;
}
// Tab
if (keyCode === 9) {
if (!this.ranged) {
this.handleChange();
this.pickerVisible = this.picker.visible = false;
this.blur();
event.stopPropagation();
} else {
// user may change focus between two input
setTimeout(() => {
if (this.refInput.indexOf(document.activeElement) === -1) {
this.pickerVisible = false;
this.blur();
event.stopPropagation();
}
}, 0);
}
return;
}
// Enter
if (keyCode === 13) {
if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {
this.handleChange();
this.pickerVisible = this.picker.visible = false;
this.blur();
}
event.stopPropagation();
return;
}
// if user is typing, do not let picker handle key input
if (this.userInput) {
event.stopPropagation();
return;
}
// delegate other keys to panel
if (this.picker && this.picker.handleKeydown) {
this.picker.handleKeydown(event);
}
},
handleRangeClick() {
const type = this.type;
if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
this.pickerVisible = true;
}
this.$emit('focus', this);
},
hidePicker() {
if (this.picker) {
this.picker.resetView && this.picker.resetView();
this.pickerVisible = this.picker.visible = false;
this.destroyPopper();
}
},
showPicker() {
if (this.$isServer) return;
if (!this.picker) {
this.mountPicker();
}
this.pickerVisible = this.picker.visible = true;
this.updatePopper();
this.picker.value = this.parsedValue;
this.picker.resetView && this.picker.resetView();
this.$nextTick(() => {
this.picker.adjustSpinners && this.picker.adjustSpinners();
});
},
mountPicker() {
var _this = this;
this.picker = new external_vue_default.a(this.panel).$mount();
this.picker.defaultValue = this.defaultValue;
this.picker.defaultTime = this.defaultTime;
this.picker.popperClass = this.popperClass;
this.popperElm = this.picker.$el;
this.picker.width = this.reference.getBoundingClientRect().width;
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
this.picker.selectionMode = this.selectionMode;
this.picker.unlinkPanels = this.unlinkPanels;
this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
this.$watch('format', format => {
this.picker.format = format;
});
const updateOptions = () => {
const options = this.pickerOptions;
if (options && options.selectableRange) {
let ranges = options.selectableRange;
const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
const format = DEFAULT_FORMATS.timerange;
ranges = Array.isArray(ranges) ? ranges : [ranges];
this.picker.selectableRange = ranges.map(range => parser(range, format, this.rangeSeparator));
}
for (const option in options) {
if (options.hasOwnProperty(option) &&
// 忽略 time-picker 的该配置项
option !== 'selectableRange') {
this.picker[option] = options[option];
}
}
// main format must prevail over undocumented pickerOptions.format
if (this.format) {
this.picker.format = this.format;
}
};
updateOptions();
this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), {
deep: true
});
this.$el.appendChild(this.picker.$el);
this.picker.resetView && this.picker.resetView();
this.picker.$on('dodestroy', this.doDestroy);
this.picker.$on('pick', function () {
let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
let visible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
_this.userInput = null;
_this.pickerVisible = _this.picker.visible = visible;
_this.emitInput(date);
_this.picker.resetView && _this.picker.resetView();
});
this.picker.$on('select-range', (start, end, pos) => {
if (this.refInput.length === 0) return;
if (!pos || pos === 'min') {
this.refInput[0].setSelectionRange(start, end);
this.refInput[0].focus();
} else if (pos === 'max') {
this.refInput[1].setSelectionRange(start, end);
this.refInput[1].focus();
}
});
},
unmountPicker() {
if (this.picker) {
this.picker.$destroy();
this.picker.$off();
if (typeof this.unwatchPickerOptions === 'function') {
this.unwatchPickerOptions();
}
this.picker.$el.parentNode.removeChild(this.picker.$el);
}
},
emitChange(val) {
// determine user real change only
if (!valueEquals(val, this.valueOnOpen)) {
this.$emit('change', val);
this.valueOnOpen = val;
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.change', val);
}
}
},
emitInput(val) {
const formatted = this.formatToValue(val);
if (!valueEquals(this.value, formatted)) {
if (['daterange', 'datetimerange'].includes(this.type)) {
this.$emit('input:start', formatted ? formatted[0] : '');
this.$emit('input:end', formatted ? formatted[1] : '');
}
this.$emit('input', formatted);
}
},
isValidValue(value) {
if (!this.picker) {
this.mountPicker();
}
if (this.picker.isValidValue) {
return value && this.picker.isValidValue(value);
} else {
return true;
}
}
}
});
// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=script&lang=js
/* harmony default export */ var src_pickervue_type_script_lang_js = (pickervue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);
// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
src_pickervue_type_script_lang_js,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var picker = __webpack_exports__["a"] = (component.exports);
/***/ })
/******/ });