@mdsfe/mds-ui 0.2.0 → 0.2.9-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +178 -0
- package/README.md +9 -9
- package/dist/_mixin/popper.js +1 -0
- package/dist/_util/_popper/dom-helper.js +284 -0
- package/dist/_util/_popper/popper-mixin.js +35 -0
- package/dist/_util/_popper/popper.js +1267 -0
- package/dist/_util/_popper/popup/popup-main.js +224 -0
- package/dist/_util/_popper/popup/popup-manager.js +205 -0
- package/dist/_util/_popper/vue-popper.js +204 -0
- package/dist/_util/popup/index.js +1 -1
- package/dist/_util/tree/node.js +2 -0
- package/dist/_util/tree/tree.js +65 -21
- package/dist/_util/util.js +29 -1
- package/dist/affix.js +18 -18
- package/dist/anchor.js +18 -18
- package/dist/avatar.js +17 -17
- package/dist/backtop.js +19 -19
- package/dist/badge.js +21 -21
- package/dist/bordershadow.js +20 -9
- package/dist/breadcrumb.js +18 -18
- package/dist/button.js +21 -21
- package/dist/card.js +18 -18
- package/dist/carousel.js +76 -76
- package/dist/cascader.js +4980 -0
- package/dist/cascaderpanel.js +645 -603
- package/dist/checkbox.js +23 -23
- package/dist/col.js +14 -14
- package/dist/collapse.js +6 -6
- package/dist/color.js +6 -6
- package/dist/datepicker.js +2487 -266
- package/dist/divider.js +19 -19
- package/dist/drawer.js +787 -37
- package/dist/dropdown.js +150 -104
- package/dist/empty.js +19 -19
- package/dist/font/iconfont.28359fa.ttf +0 -0
- package/dist/font/iconfont.486e3d3.woff2 +0 -0
- package/dist/font/iconfont.675049e.woff +0 -0
- package/dist/font.js +6 -6
- package/dist/form.js +28 -26
- package/dist/icon.js +55 -47
- package/dist/index.js +1 -1
- package/dist/input.js +65 -49
- package/dist/inputnumber.js +59 -39
- package/dist/layout.js +25 -25
- package/dist/list.js +17 -17
- package/dist/loading.js +21 -8
- package/dist/mds-ui.min.css +3 -3
- package/dist/mds-ui.min.js +19183 -15407
- package/dist/menu.js +31 -31
- package/dist/message.js +773 -24
- package/dist/modal.js +1146 -307
- package/dist/notification.js +27 -27
- package/dist/pagination.js +78 -55
- package/dist/popconfirm.js +36 -36
- package/dist/popover.js +2778 -48
- package/dist/progress.js +107 -65
- package/dist/radio.js +56 -54
- package/dist/rate.js +67 -59
- package/dist/row.js +14 -14
- package/dist/select.js +847 -503
- package/dist/slider.js +25 -25
- package/dist/slottable.js +2663 -129
- package/dist/steps.js +18 -18
- package/dist/style/affix.css +224 -2
- package/dist/style/anchor.css +224 -2
- package/dist/style/avatar.css +224 -2
- package/dist/style/badge.css +224 -2
- package/dist/style/bordershadow.css +236 -59
- package/dist/style/breadcrumb.css +224 -2
- package/dist/style/button.css +234 -5
- package/dist/style/card.css +224 -2
- package/dist/style/carousel.css +224 -2
- package/dist/style/cascader.css +214 -0
- package/dist/style/cascaderpanel.css +13 -16
- package/dist/style/checkbox.css +230 -8
- package/dist/style/col.css +225 -3
- package/dist/style/collapse.css +224 -2
- package/dist/style/color.css +224 -2
- package/dist/style/datepicker.css +236 -2
- package/dist/style/divider.css +227 -2
- package/dist/style/drawer.css +224 -2
- package/dist/style/dropdown.css +234 -5
- package/dist/style/empty.css +224 -2
- package/dist/style/font.css +226 -4
- package/dist/style/form.css +224 -2
- package/dist/style/icon.css +226 -3
- package/dist/style/input.css +231 -5
- package/dist/style/inputnumber.css +224 -2
- package/dist/style/layout.css +224 -2
- package/dist/style/list.css +224 -2
- package/dist/style/loading.css +2527 -2
- package/dist/style/menu.css +340 -129
- package/dist/style/message.css +1 -4
- package/dist/style/modal.css +247 -25
- package/dist/style/notification.css +224 -2
- package/dist/style/pagination.css +236 -7
- package/dist/style/popconfirm.css +334 -180
- package/dist/style/popover.css +324 -177
- package/dist/style/progress.css +226 -3
- package/dist/style/radio.css +225 -3
- package/dist/style/rate.css +226 -3
- package/dist/style/row.css +225 -3
- package/dist/style/select.css +240 -12
- package/dist/style/slider.css +224 -2
- package/dist/style/slottable.css +350 -149
- package/dist/style/steps.css +224 -2
- package/dist/style/switch.css +224 -2
- package/dist/style/table.css +458 -314
- package/dist/style/tabs.css +225 -18
- package/dist/style/tag.css +224 -2
- package/dist/style/text.css +224 -2
- package/dist/style/timeline.css +224 -2
- package/dist/style/timepicker.css +231 -6
- package/dist/style/tooltip.css +340 -129
- package/dist/style/tree.css +228 -6
- package/dist/style/typography.css +224 -2
- package/dist/style/upload.css +224 -2
- package/dist/switch.js +20 -20
- package/dist/table.js +3071 -201
- package/dist/tabs.js +24 -22
- package/dist/tag.js +17 -23
- package/dist/text.js +38 -22
- package/dist/timeline.js +14 -14
- package/dist/timepicker.js +3063 -172
- package/dist/tooltip.js +2550 -27
- package/dist/transfer.js +28 -28
- package/dist/transition.js +6 -6
- package/dist/tree.js +316 -171
- package/dist/typography.js +6 -6
- package/dist/upload.js +46 -38
- package/package.json +9 -5
package/dist/popover.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
2
2
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
3
|
-
module.exports = factory(require("./
|
|
3
|
+
module.exports = factory(require("vue"), require("./transition"));
|
|
4
4
|
else if(typeof define === 'function' && define.amd)
|
|
5
|
-
define(["./
|
|
5
|
+
define(["vue", "./transition"], factory);
|
|
6
6
|
else {
|
|
7
|
-
var a = typeof exports === 'object' ? factory(require("./
|
|
7
|
+
var a = typeof exports === 'object' ? factory(require("vue"), require("./transition")) : factory(root["Vue"], root["./transition"]);
|
|
8
8
|
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
|
|
9
9
|
}
|
|
10
|
-
})(window, function(
|
|
10
|
+
})(window, function(__WEBPACK_EXTERNAL_MODULE__2__, __WEBPACK_EXTERNAL_MODULE__11__) {
|
|
11
11
|
return /******/ (function(modules) { // webpackBootstrap
|
|
12
12
|
/******/ // The module cache
|
|
13
13
|
/******/ var installedModules = {};
|
|
@@ -91,46 +91,2409 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
|
91
91
|
/******/
|
|
92
92
|
/******/
|
|
93
93
|
/******/ // Load entry module and return exports
|
|
94
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
|
94
|
+
/******/ return __webpack_require__(__webpack_require__.s = 55);
|
|
95
95
|
/******/ })
|
|
96
96
|
/************************************************************************/
|
|
97
97
|
/******/ ({
|
|
98
98
|
|
|
99
|
-
/***/
|
|
99
|
+
/***/ 0:
|
|
100
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
101
|
+
|
|
102
|
+
"use strict";
|
|
103
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
|
|
104
|
+
/* globals __VUE_SSR_CONTEXT__ */
|
|
105
|
+
|
|
106
|
+
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
|
|
107
|
+
// This module is a runtime utility for cleaner component module output and will
|
|
108
|
+
// be included in the final webpack user bundle.
|
|
109
|
+
|
|
110
|
+
function normalizeComponent (
|
|
111
|
+
scriptExports,
|
|
112
|
+
render,
|
|
113
|
+
staticRenderFns,
|
|
114
|
+
functionalTemplate,
|
|
115
|
+
injectStyles,
|
|
116
|
+
scopeId,
|
|
117
|
+
moduleIdentifier, /* server only */
|
|
118
|
+
shadowMode /* vue-cli only */
|
|
119
|
+
) {
|
|
120
|
+
// Vue.extend constructor export interop
|
|
121
|
+
var options = typeof scriptExports === 'function'
|
|
122
|
+
? scriptExports.options
|
|
123
|
+
: scriptExports
|
|
124
|
+
|
|
125
|
+
// render functions
|
|
126
|
+
if (render) {
|
|
127
|
+
options.render = render
|
|
128
|
+
options.staticRenderFns = staticRenderFns
|
|
129
|
+
options._compiled = true
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// functional template
|
|
133
|
+
if (functionalTemplate) {
|
|
134
|
+
options.functional = true
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// scopedId
|
|
138
|
+
if (scopeId) {
|
|
139
|
+
options._scopeId = 'data-v-' + scopeId
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
var hook
|
|
143
|
+
if (moduleIdentifier) { // server build
|
|
144
|
+
hook = function (context) {
|
|
145
|
+
// 2.3 injection
|
|
146
|
+
context =
|
|
147
|
+
context || // cached call
|
|
148
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
149
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
|
|
150
|
+
// 2.2 with runInNewContext: true
|
|
151
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
152
|
+
context = __VUE_SSR_CONTEXT__
|
|
153
|
+
}
|
|
154
|
+
// inject component styles
|
|
155
|
+
if (injectStyles) {
|
|
156
|
+
injectStyles.call(this, context)
|
|
157
|
+
}
|
|
158
|
+
// register component module identifier for async chunk inferrence
|
|
159
|
+
if (context && context._registeredComponents) {
|
|
160
|
+
context._registeredComponents.add(moduleIdentifier)
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
// used by ssr in case component is cached and beforeCreate
|
|
164
|
+
// never gets called
|
|
165
|
+
options._ssrRegister = hook
|
|
166
|
+
} else if (injectStyles) {
|
|
167
|
+
hook = shadowMode
|
|
168
|
+
? function () {
|
|
169
|
+
injectStyles.call(
|
|
170
|
+
this,
|
|
171
|
+
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
: injectStyles
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (hook) {
|
|
178
|
+
if (options.functional) {
|
|
179
|
+
// for template-only hot-reload because in that case the render fn doesn't
|
|
180
|
+
// go through the normalizer
|
|
181
|
+
options._injectStyles = hook
|
|
182
|
+
// register for functional component in vue file
|
|
183
|
+
var originalRender = options.render
|
|
184
|
+
options.render = function renderWithStyleInjection (h, context) {
|
|
185
|
+
hook.call(context)
|
|
186
|
+
return originalRender(h, context)
|
|
187
|
+
}
|
|
188
|
+
} else {
|
|
189
|
+
// inject component registration as beforeCreate hook
|
|
190
|
+
var existing = options.beforeCreate
|
|
191
|
+
options.beforeCreate = existing
|
|
192
|
+
? [].concat(existing, hook)
|
|
193
|
+
: [hook]
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return {
|
|
198
|
+
exports: scriptExports,
|
|
199
|
+
options: options
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
/***/ }),
|
|
205
|
+
|
|
206
|
+
/***/ 1:
|
|
207
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
208
|
+
|
|
209
|
+
"use strict";
|
|
210
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return on; });
|
|
211
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return off; });
|
|
212
|
+
/* unused harmony export once */
|
|
213
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return hasClass; });
|
|
214
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return addClass; });
|
|
215
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return removeClass; });
|
|
216
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return getStyle; });
|
|
217
|
+
/* unused harmony export setStyle */
|
|
218
|
+
/* unused harmony export isScroll */
|
|
219
|
+
/* unused harmony export getScrollContainer */
|
|
220
|
+
/* unused harmony export isInContainer */
|
|
221
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return merge; });
|
|
222
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getScrollBarWidth; });
|
|
223
|
+
/* harmony import */ var babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
|
|
224
|
+
/* harmony import */ var babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__);
|
|
225
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
226
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_1__);
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
/* eslint-disable */
|
|
231
|
+
var isServer = vue__WEBPACK_IMPORTED_MODULE_1___default.a.prototype.$isServer;
|
|
232
|
+
var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
|
|
233
|
+
var MOZ_HACK_REGEXP = /^moz([A-Z])/;
|
|
234
|
+
var ieVersion = isServer ? 0 : Number(document.documentMode);
|
|
235
|
+
|
|
236
|
+
/* istanbul ignore next */
|
|
237
|
+
var trim = function trim(string) {
|
|
238
|
+
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
|
239
|
+
};
|
|
240
|
+
/* istanbul ignore next */
|
|
241
|
+
var camelCase = function camelCase(name) {
|
|
242
|
+
return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
|
|
243
|
+
return offset ? letter.toUpperCase() : letter;
|
|
244
|
+
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
/* istanbul ignore next */
|
|
248
|
+
var on = function () {
|
|
249
|
+
if (!isServer && document.addEventListener) {
|
|
250
|
+
return function (element, event, handler) {
|
|
251
|
+
if (element && event && handler) {
|
|
252
|
+
element.addEventListener(event, handler, false);
|
|
253
|
+
}
|
|
254
|
+
};
|
|
255
|
+
} else {
|
|
256
|
+
return function (element, event, handler) {
|
|
257
|
+
if (element && event && handler) {
|
|
258
|
+
element.attachEvent('on' + event, handler);
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
}
|
|
262
|
+
}();
|
|
263
|
+
|
|
264
|
+
/* istanbul ignore next */
|
|
265
|
+
var off = function () {
|
|
266
|
+
if (!isServer && document.removeEventListener) {
|
|
267
|
+
return function (element, event, handler) {
|
|
268
|
+
if (element && event) {
|
|
269
|
+
element.removeEventListener(event, handler, false);
|
|
270
|
+
}
|
|
271
|
+
};
|
|
272
|
+
} else {
|
|
273
|
+
return function (element, event, handler) {
|
|
274
|
+
if (element && event) {
|
|
275
|
+
element.detachEvent('on' + event, handler);
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
}
|
|
279
|
+
}();
|
|
280
|
+
|
|
281
|
+
/* istanbul ignore next */
|
|
282
|
+
var once = function once(el, event, fn) {
|
|
283
|
+
var listener = function listener() {
|
|
284
|
+
if (fn) {
|
|
285
|
+
fn.apply(this, arguments);
|
|
286
|
+
}
|
|
287
|
+
off(el, event, listener);
|
|
288
|
+
};
|
|
289
|
+
on(el, event, listener);
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
/* istanbul ignore next */
|
|
293
|
+
function hasClass(el, cls) {
|
|
294
|
+
if (!el || !cls) return false;
|
|
295
|
+
if (cls.indexOf(' ') !== -1) {
|
|
296
|
+
throw new Error('className should not contain space.');
|
|
297
|
+
}
|
|
298
|
+
if (el.classList) {
|
|
299
|
+
return el.classList.contains(cls);
|
|
300
|
+
} else {
|
|
301
|
+
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* istanbul ignore next */
|
|
306
|
+
function addClass(el, cls) {
|
|
307
|
+
if (!el) return;
|
|
308
|
+
var curClass = el.className;
|
|
309
|
+
var classes = (cls || '').split(' ');
|
|
310
|
+
|
|
311
|
+
for (var i = 0, j = classes.length; i < j; i++) {
|
|
312
|
+
var clsName = classes[i];
|
|
313
|
+
if (!clsName) continue;
|
|
314
|
+
|
|
315
|
+
if (el.classList) {
|
|
316
|
+
el.classList.add(clsName);
|
|
317
|
+
} else if (!hasClass(el, clsName)) {
|
|
318
|
+
curClass += ' ' + clsName;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
if (!el.classList) {
|
|
322
|
+
el.setAttribute('class', curClass);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* istanbul ignore next */
|
|
327
|
+
function removeClass(el, cls) {
|
|
328
|
+
if (!el || !cls) return;
|
|
329
|
+
var classes = cls.split(' ');
|
|
330
|
+
var curClass = ' ' + el.className + ' ';
|
|
331
|
+
|
|
332
|
+
for (var i = 0, j = classes.length; i < j; i++) {
|
|
333
|
+
var clsName = classes[i];
|
|
334
|
+
if (!clsName) continue;
|
|
335
|
+
|
|
336
|
+
if (el.classList) {
|
|
337
|
+
el.classList.remove(clsName);
|
|
338
|
+
} else if (hasClass(el, clsName)) {
|
|
339
|
+
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
if (!el.classList) {
|
|
343
|
+
el.setAttribute('class', trim(curClass));
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/* istanbul ignore next */
|
|
348
|
+
var getStyle = ieVersion < 9 ? function (element, styleName) {
|
|
349
|
+
if (isServer) return;
|
|
350
|
+
if (!element || !styleName) return null;
|
|
351
|
+
styleName = camelCase(styleName);
|
|
352
|
+
if (styleName === 'float') {
|
|
353
|
+
styleName = 'styleFloat';
|
|
354
|
+
}
|
|
355
|
+
try {
|
|
356
|
+
switch (styleName) {
|
|
357
|
+
case 'opacity':
|
|
358
|
+
try {
|
|
359
|
+
return element.filters.item('alpha').opacity / 100;
|
|
360
|
+
} catch (e) {
|
|
361
|
+
return 1.0;
|
|
362
|
+
}
|
|
363
|
+
default:
|
|
364
|
+
return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
|
|
365
|
+
}
|
|
366
|
+
} catch (e) {
|
|
367
|
+
return element.style[styleName];
|
|
368
|
+
}
|
|
369
|
+
} : function (element, styleName) {
|
|
370
|
+
if (isServer) return;
|
|
371
|
+
if (!element || !styleName) return null;
|
|
372
|
+
styleName = camelCase(styleName);
|
|
373
|
+
if (styleName === 'float') {
|
|
374
|
+
styleName = 'cssFloat';
|
|
375
|
+
}
|
|
376
|
+
try {
|
|
377
|
+
var computed = document.defaultView.getComputedStyle(element, '');
|
|
378
|
+
return element.style[styleName] || computed ? computed[styleName] : null;
|
|
379
|
+
} catch (e) {
|
|
380
|
+
return element.style[styleName];
|
|
381
|
+
}
|
|
382
|
+
};
|
|
383
|
+
|
|
384
|
+
/* istanbul ignore next */
|
|
385
|
+
function setStyle(element, styleName, value) {
|
|
386
|
+
if (!element || !styleName) return;
|
|
387
|
+
|
|
388
|
+
if ((typeof styleName === 'undefined' ? 'undefined' : babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default()(styleName)) === 'object') {
|
|
389
|
+
for (var prop in styleName) {
|
|
390
|
+
if (styleName.hasOwnProperty(prop)) {
|
|
391
|
+
setStyle(element, prop, styleName[prop]);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
} else {
|
|
395
|
+
styleName = camelCase(styleName);
|
|
396
|
+
if (styleName === 'opacity' && ieVersion < 9) {
|
|
397
|
+
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
|
|
398
|
+
} else {
|
|
399
|
+
element.style[styleName] = value;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
var isScroll = function isScroll(el, vertical) {
|
|
405
|
+
if (isServer) return;
|
|
406
|
+
|
|
407
|
+
var determinedDirection = vertical !== null && vertical !== undefined;
|
|
408
|
+
var overflow = determinedDirection ? vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x') : getStyle(el, 'overflow');
|
|
409
|
+
|
|
410
|
+
return overflow.match(/(scroll|auto|overlay)/);
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
var getScrollContainer = function getScrollContainer(el, vertical) {
|
|
414
|
+
if (isServer) return;
|
|
415
|
+
|
|
416
|
+
var parent = el;
|
|
417
|
+
while (parent) {
|
|
418
|
+
if ([window, document, document.documentElement].includes(parent)) {
|
|
419
|
+
return window;
|
|
420
|
+
}
|
|
421
|
+
if (isScroll(parent, vertical)) {
|
|
422
|
+
return parent;
|
|
423
|
+
}
|
|
424
|
+
parent = parent.parentNode;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
return parent;
|
|
428
|
+
};
|
|
429
|
+
|
|
430
|
+
var isInContainer = function isInContainer(el, container) {
|
|
431
|
+
if (isServer || !el || !container) return false;
|
|
432
|
+
|
|
433
|
+
var elRect = el.getBoundingClientRect();
|
|
434
|
+
var containerRect = void 0;
|
|
435
|
+
|
|
436
|
+
if ([window, document, document.documentElement, null, undefined].includes(container)) {
|
|
437
|
+
containerRect = {
|
|
438
|
+
top: 0,
|
|
439
|
+
right: window.innerWidth,
|
|
440
|
+
bottom: window.innerHeight,
|
|
441
|
+
left: 0
|
|
442
|
+
};
|
|
443
|
+
} else {
|
|
444
|
+
containerRect = container.getBoundingClientRect();
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
|
|
448
|
+
};
|
|
449
|
+
|
|
450
|
+
function merge(target) {
|
|
451
|
+
for (var i = 1, j = arguments.length; i < j; i++) {
|
|
452
|
+
var source = arguments[i] || {};
|
|
453
|
+
for (var prop in source) {
|
|
454
|
+
if (source.hasOwnProperty(prop)) {
|
|
455
|
+
var value = source[prop];
|
|
456
|
+
if (value !== undefined) {
|
|
457
|
+
target[prop] = value;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
return target;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
var scrollBarWidth = void 0;
|
|
467
|
+
function getScrollBarWidth() {
|
|
468
|
+
if (vue__WEBPACK_IMPORTED_MODULE_1___default.a.prototype.$isServer) return 0;
|
|
469
|
+
if (scrollBarWidth !== undefined) return scrollBarWidth;
|
|
470
|
+
|
|
471
|
+
var outer = document.createElement('div');
|
|
472
|
+
outer.className = 'el-scrollbar__wrap';
|
|
473
|
+
outer.style.visibility = 'hidden';
|
|
474
|
+
outer.style.width = '100px';
|
|
475
|
+
outer.style.position = 'absolute';
|
|
476
|
+
outer.style.top = '-9999px';
|
|
477
|
+
document.body.appendChild(outer);
|
|
478
|
+
|
|
479
|
+
var widthNoScroll = outer.offsetWidth;
|
|
480
|
+
outer.style.overflow = 'scroll';
|
|
481
|
+
|
|
482
|
+
var inner = document.createElement('div');
|
|
483
|
+
inner.style.width = '100%';
|
|
484
|
+
outer.appendChild(inner);
|
|
485
|
+
|
|
486
|
+
var widthWithScroll = inner.offsetWidth;
|
|
487
|
+
outer.parentNode.removeChild(outer);
|
|
488
|
+
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
489
|
+
|
|
490
|
+
return scrollBarWidth;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
/***/ }),
|
|
494
|
+
|
|
495
|
+
/***/ 10:
|
|
496
|
+
/***/ (function(module, exports) {
|
|
497
|
+
|
|
498
|
+
module.exports = require("babel-runtime/core-js/object/keys");
|
|
499
|
+
|
|
500
|
+
/***/ }),
|
|
501
|
+
|
|
502
|
+
/***/ 11:
|
|
503
|
+
/***/ (function(module, exports) {
|
|
504
|
+
|
|
505
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__11__;
|
|
506
|
+
|
|
507
|
+
/***/ }),
|
|
508
|
+
|
|
509
|
+
/***/ 139:
|
|
510
|
+
/***/ (function(module, exports) {
|
|
511
|
+
|
|
512
|
+
// removed by extract-text-webpack-plugin
|
|
513
|
+
|
|
514
|
+
/***/ }),
|
|
515
|
+
|
|
516
|
+
/***/ 14:
|
|
517
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
518
|
+
|
|
519
|
+
"use strict";
|
|
520
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
521
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
|
|
522
|
+
/* harmony import */ var _dom_helper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
|
|
523
|
+
/* harmony import */ var _popup_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
|
|
524
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _popup_manager__WEBPACK_IMPORTED_MODULE_2__["a"]; });
|
|
525
|
+
|
|
526
|
+
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
|
|
530
|
+
var idSeed = 1;
|
|
531
|
+
|
|
532
|
+
var scrollBarWidth = void 0;
|
|
533
|
+
|
|
534
|
+
/* harmony default export */ __webpack_exports__["b"] = ({
|
|
535
|
+
props: {
|
|
536
|
+
visibility: {
|
|
537
|
+
type: Boolean,
|
|
538
|
+
default: false
|
|
539
|
+
},
|
|
540
|
+
openDelay: {},
|
|
541
|
+
closeDelay: {},
|
|
542
|
+
zIndex: {},
|
|
543
|
+
modal: {
|
|
544
|
+
type: Boolean,
|
|
545
|
+
default: false
|
|
546
|
+
},
|
|
547
|
+
modalFade: {
|
|
548
|
+
type: Boolean,
|
|
549
|
+
default: true
|
|
550
|
+
},
|
|
551
|
+
modalClass: {},
|
|
552
|
+
modalAppendToBody: {
|
|
553
|
+
type: Boolean,
|
|
554
|
+
default: false
|
|
555
|
+
},
|
|
556
|
+
lockScroll: {
|
|
557
|
+
type: Boolean,
|
|
558
|
+
default: true
|
|
559
|
+
},
|
|
560
|
+
closeOnPressEscape: {
|
|
561
|
+
type: Boolean,
|
|
562
|
+
default: false
|
|
563
|
+
},
|
|
564
|
+
closeOnClickModal: {
|
|
565
|
+
type: Boolean,
|
|
566
|
+
default: false
|
|
567
|
+
}
|
|
568
|
+
},
|
|
569
|
+
|
|
570
|
+
beforeMount: function beforeMount() {
|
|
571
|
+
this._popupId = 'popup-' + idSeed++;
|
|
572
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].register(this._popupId, this);
|
|
573
|
+
},
|
|
574
|
+
beforeDestroy: function beforeDestroy() {
|
|
575
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].deregister(this._popupId);
|
|
576
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].closeModal(this._popupId);
|
|
577
|
+
|
|
578
|
+
this.restoreBodyStyle();
|
|
579
|
+
},
|
|
580
|
+
data: function data() {
|
|
581
|
+
return {
|
|
582
|
+
opened: false,
|
|
583
|
+
bodyPaddingRight: null,
|
|
584
|
+
computedBodyPaddingRight: 0,
|
|
585
|
+
withoutHiddenClass: true,
|
|
586
|
+
rendered: false
|
|
587
|
+
};
|
|
588
|
+
},
|
|
589
|
+
|
|
590
|
+
|
|
591
|
+
watch: {
|
|
592
|
+
visibility: function visibility(val) {
|
|
593
|
+
var _this = this;
|
|
594
|
+
|
|
595
|
+
if (val) {
|
|
596
|
+
if (this._opening) return;
|
|
597
|
+
if (!this.rendered) {
|
|
598
|
+
this.rendered = true;
|
|
599
|
+
vue__WEBPACK_IMPORTED_MODULE_0___default.a.nextTick(function () {
|
|
600
|
+
_this.open();
|
|
601
|
+
});
|
|
602
|
+
} else {
|
|
603
|
+
this.open();
|
|
604
|
+
}
|
|
605
|
+
} else {
|
|
606
|
+
this.close();
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
},
|
|
610
|
+
|
|
611
|
+
methods: {
|
|
612
|
+
open: function open(options) {
|
|
613
|
+
var _this2 = this;
|
|
614
|
+
|
|
615
|
+
if (!this.rendered) {
|
|
616
|
+
this.rendered = true;
|
|
617
|
+
}
|
|
618
|
+
var props = Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* merge */ "e"])({}, this.$props || this, options);
|
|
619
|
+
|
|
620
|
+
if (this._closeTimer) {
|
|
621
|
+
clearTimeout(this._closeTimer);
|
|
622
|
+
this._closeTimer = null;
|
|
623
|
+
}
|
|
624
|
+
clearTimeout(this._openTimer);
|
|
625
|
+
|
|
626
|
+
var openDelay = Number(props.openDelay);
|
|
627
|
+
if (openDelay > 0) {
|
|
628
|
+
this._openTimer = setTimeout(function () {
|
|
629
|
+
_this2._openTimer = null;
|
|
630
|
+
_this2.doOpen(props);
|
|
631
|
+
}, openDelay);
|
|
632
|
+
} else {
|
|
633
|
+
this.doOpen(props);
|
|
634
|
+
}
|
|
635
|
+
},
|
|
636
|
+
doOpen: function doOpen(props) {
|
|
637
|
+
if (this.$isServer) return;
|
|
638
|
+
if (this.willOpen && !this.willOpen()) return;
|
|
639
|
+
if (this.opened) return;
|
|
640
|
+
|
|
641
|
+
this._opening = true;
|
|
642
|
+
|
|
643
|
+
var dom = this.$el;
|
|
644
|
+
|
|
645
|
+
var modal = props.modal;
|
|
646
|
+
|
|
647
|
+
var zIndex = props.zIndex;
|
|
648
|
+
if (zIndex) {
|
|
649
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].zIndex = zIndex;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
if (modal) {
|
|
653
|
+
if (this._closing) {
|
|
654
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].closeModal(this._popupId);
|
|
655
|
+
this._closing = false;
|
|
656
|
+
}
|
|
657
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].openModal(this._popupId, _popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
|
|
658
|
+
if (props.lockScroll) {
|
|
659
|
+
this.withoutHiddenClass = !Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* hasClass */ "d"])(document.body, 'mds-popup-parent--hidden');
|
|
660
|
+
if (this.withoutHiddenClass) {
|
|
661
|
+
this.bodyPaddingRight = document.body.style.paddingRight;
|
|
662
|
+
this.computedBodyPaddingRight = parseInt(Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* getStyle */ "c"])(document.body, 'paddingRight'), 10);
|
|
663
|
+
}
|
|
664
|
+
scrollBarWidth = Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* getScrollBarWidth */ "b"])();
|
|
665
|
+
var bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
|
|
666
|
+
var bodyOverflowY = Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* getStyle */ "c"])(document.body, 'overflowY');
|
|
667
|
+
if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
|
|
668
|
+
document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';
|
|
669
|
+
}
|
|
670
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* addClass */ "a"])(document.body, 'mds-popup-parent--hidden');
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
if (getComputedStyle(dom).position === 'static') {
|
|
675
|
+
dom.style.position = 'absolute';
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
dom.style.zIndex = _popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].nextZIndex();
|
|
679
|
+
this.opened = true;
|
|
680
|
+
|
|
681
|
+
this.onOpen && this.onOpen();
|
|
682
|
+
|
|
683
|
+
this.doAfterOpen();
|
|
684
|
+
},
|
|
685
|
+
doAfterOpen: function doAfterOpen() {
|
|
686
|
+
this._opening = false;
|
|
687
|
+
},
|
|
688
|
+
close: function close() {
|
|
689
|
+
var _this3 = this;
|
|
690
|
+
|
|
691
|
+
if (this.willClose && !this.willClose()) return;
|
|
692
|
+
|
|
693
|
+
if (this._openTimer !== null) {
|
|
694
|
+
clearTimeout(this._openTimer);
|
|
695
|
+
this._openTimer = null;
|
|
696
|
+
}
|
|
697
|
+
clearTimeout(this._closeTimer);
|
|
698
|
+
|
|
699
|
+
var closeDelay = Number(this.closeDelay);
|
|
700
|
+
|
|
701
|
+
if (closeDelay > 0) {
|
|
702
|
+
this._closeTimer = setTimeout(function () {
|
|
703
|
+
_this3._closeTimer = null;
|
|
704
|
+
_this3.doClose();
|
|
705
|
+
}, closeDelay);
|
|
706
|
+
} else {
|
|
707
|
+
this.doClose();
|
|
708
|
+
}
|
|
709
|
+
},
|
|
710
|
+
doClose: function doClose() {
|
|
711
|
+
this._closing = true;
|
|
712
|
+
|
|
713
|
+
this.onClose && this.onClose();
|
|
714
|
+
|
|
715
|
+
if (this.lockScroll) {
|
|
716
|
+
setTimeout(this.restoreBodyStyle, 200);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
this.opened = false;
|
|
720
|
+
|
|
721
|
+
this.doAfterClose();
|
|
722
|
+
},
|
|
723
|
+
doAfterClose: function doAfterClose() {
|
|
724
|
+
_popup_manager__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].closeModal(this._popupId);
|
|
725
|
+
this._closing = false;
|
|
726
|
+
},
|
|
727
|
+
restoreBodyStyle: function restoreBodyStyle() {
|
|
728
|
+
if (this.modal && this.withoutHiddenClass) {
|
|
729
|
+
document.body.style.paddingRight = this.bodyPaddingRight;
|
|
730
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* removeClass */ "h"])(document.body, 'mds-popup-parent--hidden');
|
|
731
|
+
}
|
|
732
|
+
this.withoutHiddenClass = true;
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
});
|
|
736
|
+
|
|
737
|
+
|
|
738
|
+
|
|
739
|
+
/***/ }),
|
|
740
|
+
|
|
741
|
+
/***/ 17:
|
|
742
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
743
|
+
|
|
744
|
+
"use strict";
|
|
745
|
+
|
|
746
|
+
// EXTERNAL MODULE: ./components/_util/_popper/popup/popup-main.js
|
|
747
|
+
var popup_main = __webpack_require__(14);
|
|
748
|
+
|
|
749
|
+
// EXTERNAL MODULE: external "babel-runtime/core-js/object/get-own-property-descriptor"
|
|
750
|
+
var get_own_property_descriptor_ = __webpack_require__(18);
|
|
751
|
+
var get_own_property_descriptor_default = /*#__PURE__*/__webpack_require__.n(get_own_property_descriptor_);
|
|
752
|
+
|
|
753
|
+
// EXTERNAL MODULE: external "babel-runtime/core-js/object/keys"
|
|
754
|
+
var keys_ = __webpack_require__(10);
|
|
755
|
+
var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
|
|
756
|
+
|
|
757
|
+
// EXTERNAL MODULE: external "babel-runtime/core-js/object/assign"
|
|
758
|
+
var assign_ = __webpack_require__(6);
|
|
759
|
+
var assign_default = /*#__PURE__*/__webpack_require__.n(assign_);
|
|
760
|
+
|
|
761
|
+
// CONCATENATED MODULE: ./components/_util/_popper/popper.js
|
|
762
|
+
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
/**
|
|
766
|
+
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
|
767
|
+
* @version {{version}}
|
|
768
|
+
* @license
|
|
769
|
+
* Copyright (c) 2016 Federico Zivolo and contributors
|
|
770
|
+
*
|
|
771
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
772
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
773
|
+
* in the Software without restriction, including without limitation the rights
|
|
774
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
775
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
776
|
+
* furnished to do so, subject to the following conditions:
|
|
777
|
+
*
|
|
778
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
779
|
+
* copies or substantial portions of the Software.
|
|
780
|
+
*
|
|
781
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
782
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
783
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
784
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
785
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
786
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
787
|
+
* SOFTWARE.
|
|
788
|
+
*/
|
|
789
|
+
/* eslint-disable */
|
|
790
|
+
// Cross module loader
|
|
791
|
+
// Supported: Node, AMD, Browser globals
|
|
792
|
+
//
|
|
793
|
+
function popper_createPopper() {
|
|
794
|
+
'use strict';
|
|
795
|
+
|
|
796
|
+
var root = window;
|
|
797
|
+
|
|
798
|
+
// default options
|
|
799
|
+
var DEFAULTS = {
|
|
800
|
+
// placement of the popper
|
|
801
|
+
placement: 'bottom',
|
|
802
|
+
|
|
803
|
+
gpuAcceleration: false,
|
|
804
|
+
|
|
805
|
+
// shift popper from its origin by the given amount of pixels (can be negative)
|
|
806
|
+
offset: 0,
|
|
807
|
+
|
|
808
|
+
// the element which will act as boundary of the popper
|
|
809
|
+
boundariesElement: 'viewport',
|
|
810
|
+
|
|
811
|
+
// amount of pixel used to define a minimum distance between the boundaries and the popper
|
|
812
|
+
boundariesPadding: 5,
|
|
813
|
+
|
|
814
|
+
// popper will try to prevent overflow following this order,
|
|
815
|
+
// by default, then, it could overflow on the left and on top of the boundariesElement
|
|
816
|
+
preventOverflowOrder: ['left', 'right', 'top', 'bottom'],
|
|
817
|
+
|
|
818
|
+
// the behavior used by flip to change the placement of the popper
|
|
819
|
+
flipBehavior: 'flip',
|
|
820
|
+
|
|
821
|
+
arrowElement: '[x-arrow]',
|
|
822
|
+
|
|
823
|
+
arrowOffset: 0,
|
|
824
|
+
|
|
825
|
+
// list of functions used to modify the offsets before they are applied to the popper
|
|
826
|
+
modifiers: ['shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],
|
|
827
|
+
|
|
828
|
+
modifiersIgnored: [],
|
|
829
|
+
|
|
830
|
+
forceAbsolute: false
|
|
831
|
+
|
|
832
|
+
/**
|
|
833
|
+
* Create a new Popper.js instance
|
|
834
|
+
* @constructor Popper
|
|
835
|
+
* @param {HTMLElement} reference - The reference element used to position the popper
|
|
836
|
+
* @param {HTMLElement|Object} popper
|
|
837
|
+
* The HTML element used as popper, or a configuration used to generate the popper.
|
|
838
|
+
* @param {String} [popper.tagName='div'] The tag name of the generated popper.
|
|
839
|
+
* @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper.
|
|
840
|
+
* @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it.
|
|
841
|
+
* @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string.
|
|
842
|
+
* @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`.
|
|
843
|
+
* @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is.
|
|
844
|
+
* @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element.
|
|
845
|
+
* @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element.
|
|
846
|
+
* @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element.
|
|
847
|
+
* @param {Object} options
|
|
848
|
+
* @param {String} [options.placement=bottom]
|
|
849
|
+
* Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right),
|
|
850
|
+
* left(-start, -end)`
|
|
851
|
+
*
|
|
852
|
+
* @param {HTMLElement|String} [options.arrowElement='[x-arrow]']
|
|
853
|
+
* The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of
|
|
854
|
+
* its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its
|
|
855
|
+
* reference element.
|
|
856
|
+
* By default, it will look for a child node of the popper with the `x-arrow` attribute.
|
|
857
|
+
*
|
|
858
|
+
* @param {Boolean} [options.gpuAcceleration=true]
|
|
859
|
+
* When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the
|
|
860
|
+
* browser to use the GPU to accelerate the rendering.
|
|
861
|
+
* If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.
|
|
862
|
+
*
|
|
863
|
+
* @param {Number} [options.offset=0]
|
|
864
|
+
* Amount of pixels the popper will be shifted (can be negative).
|
|
865
|
+
*
|
|
866
|
+
* @param {String|Element} [options.boundariesElement='viewport']
|
|
867
|
+
* The element which will define the boundaries of the popper position, the popper will never be placed outside
|
|
868
|
+
* of the defined boundaries (except if `keepTogether` is enabled)
|
|
869
|
+
*
|
|
870
|
+
* @param {Number} [options.boundariesPadding=5]
|
|
871
|
+
* Additional padding for the boundaries
|
|
872
|
+
*
|
|
873
|
+
* @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']]
|
|
874
|
+
* Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order,
|
|
875
|
+
* this means that the last ones will never overflow
|
|
876
|
+
*
|
|
877
|
+
* @param {String|Array} [options.flipBehavior='flip']
|
|
878
|
+
* The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to
|
|
879
|
+
* overlap its reference element. Defining `flip` as value, the placement will be flipped on
|
|
880
|
+
* its axis (`right - left`, `top - bottom`).
|
|
881
|
+
* You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify
|
|
882
|
+
* how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left,
|
|
883
|
+
* then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top)
|
|
884
|
+
*
|
|
885
|
+
* @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']]
|
|
886
|
+
* List of functions used to modify the data before they are applied to the popper, add your custom functions
|
|
887
|
+
* to this array to edit the offsets and placement.
|
|
888
|
+
* The function should reflect the @params and @returns of preventOverflow
|
|
889
|
+
*
|
|
890
|
+
* @param {Array} [options.modifiersIgnored=[]]
|
|
891
|
+
* Put here any built-in modifier name you want to exclude from the modifiers list
|
|
892
|
+
* The function should reflect the @params and @returns of preventOverflow
|
|
893
|
+
*
|
|
894
|
+
* @param {Boolean} [options.removeOnDestroy=false]
|
|
895
|
+
* Set to true if you want to automatically remove the popper when you call the `destroy` method.
|
|
896
|
+
*/
|
|
897
|
+
};function Popper(reference, popper, options) {
|
|
898
|
+
this._reference = reference.jquery ? reference[0] : reference;
|
|
899
|
+
this.state = {};
|
|
900
|
+
|
|
901
|
+
// if the popper variable is a configuration object, parse it to generate an HTMLElement
|
|
902
|
+
// generate a default popper if is not defined
|
|
903
|
+
var isNotDefined = typeof popper === 'undefined' || popper === null;
|
|
904
|
+
var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]';
|
|
905
|
+
if (isNotDefined || isConfig) {
|
|
906
|
+
this._popper = this.parse(isConfig ? popper : {});
|
|
907
|
+
}
|
|
908
|
+
// otherwise, use the given HTMLElement as popper
|
|
909
|
+
else {
|
|
910
|
+
this._popper = popper.jquery ? popper[0] : popper;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
// with {} we create a new object with the options inside it
|
|
914
|
+
this._options = assign_default()({}, DEFAULTS, options);
|
|
915
|
+
|
|
916
|
+
// refactoring modifiers' list
|
|
917
|
+
this._options.modifiers = this._options.modifiers.map(function (modifier) {
|
|
918
|
+
// remove ignored modifiers
|
|
919
|
+
if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return;
|
|
920
|
+
|
|
921
|
+
// set the x-placement attribute before everything else because it could be used to add margins to the popper
|
|
922
|
+
// margins needs to be calculated to get the correct popper offsets
|
|
923
|
+
if (modifier === 'applyStyle') {
|
|
924
|
+
this._popper.setAttribute('x-placement', this._options.placement);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
// return predefined modifier identified by string or keep the custom one
|
|
928
|
+
return this.modifiers[modifier] || modifier;
|
|
929
|
+
}.bind(this));
|
|
930
|
+
|
|
931
|
+
// make sure to apply the popper position before any computation
|
|
932
|
+
this.state.position = this._getPosition(this._popper, this._reference);
|
|
933
|
+
setStyle(this._popper, { position: this.state.position, top: 0 });
|
|
934
|
+
|
|
935
|
+
// fire the first update to position the popper in the right place
|
|
936
|
+
this.update();
|
|
937
|
+
|
|
938
|
+
// setup event listeners, they will take care of update the position in specific situations
|
|
939
|
+
this._setupEventListeners();
|
|
940
|
+
return this;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
//
|
|
944
|
+
// Methods
|
|
945
|
+
//
|
|
946
|
+
/**
|
|
947
|
+
* Destroy the popper
|
|
948
|
+
* @method
|
|
949
|
+
* @memberof Popper
|
|
950
|
+
*/
|
|
951
|
+
Popper.prototype.destroy = function () {
|
|
952
|
+
this._popper.removeAttribute('x-placement');
|
|
953
|
+
this._popper.style.left = '';
|
|
954
|
+
this._popper.style.position = '';
|
|
955
|
+
this._popper.style.top = '';
|
|
956
|
+
this._popper.style[getSupportedPropertyName('transform')] = '';
|
|
957
|
+
this._removeEventListeners();
|
|
958
|
+
|
|
959
|
+
// remove the popper if user explicity asked for the deletion on destroy
|
|
960
|
+
if (this._options.removeOnDestroy) {
|
|
961
|
+
this._popper.remove();
|
|
962
|
+
}
|
|
963
|
+
return this;
|
|
964
|
+
};
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* Updates the position of the popper, computing the new offsets and applying the new style
|
|
968
|
+
* @method
|
|
969
|
+
* @memberof Popper
|
|
970
|
+
*/
|
|
971
|
+
Popper.prototype.update = function () {
|
|
972
|
+
var data = { instance: this, styles: {}
|
|
973
|
+
|
|
974
|
+
// store placement inside the data object, modifiers will be able to edit `placement` if needed
|
|
975
|
+
// and refer to _originalPlacement to know the original value
|
|
976
|
+
};data.placement = this._options.placement;
|
|
977
|
+
data._originalPlacement = this._options.placement;
|
|
978
|
+
|
|
979
|
+
// compute the popper and reference offsets and put them inside data.offsets
|
|
980
|
+
data.offsets = this._getOffsets(this._popper, this._reference, data.placement);
|
|
981
|
+
|
|
982
|
+
// get boundaries
|
|
983
|
+
data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);
|
|
984
|
+
|
|
985
|
+
data = this.runModifiers(data, this._options.modifiers);
|
|
986
|
+
|
|
987
|
+
if (typeof this.state.updateCallback === 'function') {
|
|
988
|
+
this.state.updateCallback(data);
|
|
989
|
+
}
|
|
990
|
+
};
|
|
991
|
+
|
|
992
|
+
/**
|
|
993
|
+
* If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance.
|
|
994
|
+
* @method
|
|
995
|
+
* @memberof Popper
|
|
996
|
+
* @param {Function} callback
|
|
997
|
+
*/
|
|
998
|
+
Popper.prototype.onCreate = function (callback) {
|
|
999
|
+
// the createCallbacks return as first argument the popper instance
|
|
1000
|
+
callback(this);
|
|
1001
|
+
return this;
|
|
1002
|
+
};
|
|
1003
|
+
|
|
1004
|
+
/**
|
|
1005
|
+
* If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations
|
|
1006
|
+
* used to style popper and its arrow.
|
|
1007
|
+
* NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor!
|
|
1008
|
+
* @method
|
|
1009
|
+
* @memberof Popper
|
|
1010
|
+
* @param {Function} callback
|
|
1011
|
+
*/
|
|
1012
|
+
Popper.prototype.onUpdate = function (callback) {
|
|
1013
|
+
this.state.updateCallback = callback;
|
|
1014
|
+
return this;
|
|
1015
|
+
};
|
|
1016
|
+
|
|
1017
|
+
/**
|
|
1018
|
+
* Helper used to generate poppers from a configuration file
|
|
1019
|
+
* @method
|
|
1020
|
+
* @memberof Popper
|
|
1021
|
+
* @param config {Object} configuration
|
|
1022
|
+
* @returns {HTMLElement} popper
|
|
1023
|
+
*/
|
|
1024
|
+
Popper.prototype.parse = function (config) {
|
|
1025
|
+
var defaultConfig = {
|
|
1026
|
+
tagName: 'div',
|
|
1027
|
+
classNames: ['popper'],
|
|
1028
|
+
attributes: [],
|
|
1029
|
+
parent: root.document.body,
|
|
1030
|
+
content: '',
|
|
1031
|
+
contentType: 'text',
|
|
1032
|
+
arrowTagName: 'div',
|
|
1033
|
+
arrowClassNames: ['popper__arrow'],
|
|
1034
|
+
arrowAttributes: ['x-arrow']
|
|
1035
|
+
};
|
|
1036
|
+
config = assign_default()({}, defaultConfig, config);
|
|
1037
|
+
|
|
1038
|
+
var d = root.document;
|
|
1039
|
+
|
|
1040
|
+
var popper = d.createElement(config.tagName);
|
|
1041
|
+
addClassNames(popper, config.classNames);
|
|
1042
|
+
addAttributes(popper, config.attributes);
|
|
1043
|
+
if (config.contentType === 'node') {
|
|
1044
|
+
popper.appendChild(config.content.jquery ? config.content[0] : config.content);
|
|
1045
|
+
} else if (config.contentType === 'html') {
|
|
1046
|
+
popper.innerHTML = config.content;
|
|
1047
|
+
} else {
|
|
1048
|
+
popper.textContent = config.content;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
if (config.arrowTagName) {
|
|
1052
|
+
var arrow = d.createElement(config.arrowTagName);
|
|
1053
|
+
addClassNames(arrow, config.arrowClassNames);
|
|
1054
|
+
addAttributes(arrow, config.arrowAttributes);
|
|
1055
|
+
popper.appendChild(arrow);
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
var parent = config.parent.jquery ? config.parent[0] : config.parent;
|
|
1059
|
+
|
|
1060
|
+
// if the given parent is a string, use it to match an element
|
|
1061
|
+
// if more than one element is matched, the first one will be used as parent
|
|
1062
|
+
// if no elements are matched, the script will throw an error
|
|
1063
|
+
if (typeof parent === 'string') {
|
|
1064
|
+
parent = d.querySelectorAll(config.parent);
|
|
1065
|
+
if (parent.length > 1) {
|
|
1066
|
+
console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used');
|
|
1067
|
+
}
|
|
1068
|
+
if (parent.length === 0) {
|
|
1069
|
+
throw "ERROR: the given `parent` doesn't exists!";
|
|
1070
|
+
}
|
|
1071
|
+
parent = parent[0];
|
|
1072
|
+
}
|
|
1073
|
+
// if the given parent is a DOM nodes list or an array of nodes with more than one element,
|
|
1074
|
+
// the first one will be used as parent
|
|
1075
|
+
if (parent.length > 1 && parent instanceof Element === false) {
|
|
1076
|
+
console.warn('WARNING: you have passed as parent a list of elements, the first one will be used');
|
|
1077
|
+
parent = parent[0];
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
// append the generated popper to its parent
|
|
1081
|
+
parent.appendChild(popper);
|
|
1082
|
+
|
|
1083
|
+
return popper;
|
|
1084
|
+
|
|
1085
|
+
/**
|
|
1086
|
+
* Adds class names to the given element
|
|
1087
|
+
* @function
|
|
1088
|
+
* @ignore
|
|
1089
|
+
* @param {HTMLElement} target
|
|
1090
|
+
* @param {Array} classes
|
|
1091
|
+
*/
|
|
1092
|
+
function addClassNames(element, classNames) {
|
|
1093
|
+
classNames.forEach(function (className) {
|
|
1094
|
+
element.classList.add(className);
|
|
1095
|
+
});
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/**
|
|
1099
|
+
* Adds attributes to the given element
|
|
1100
|
+
* @function
|
|
1101
|
+
* @ignore
|
|
1102
|
+
* @param {HTMLElement} target
|
|
1103
|
+
* @param {Array} attributes
|
|
1104
|
+
* @example
|
|
1105
|
+
* addAttributes(element, [ 'data-info:foobar' ]);
|
|
1106
|
+
*/
|
|
1107
|
+
function addAttributes(element, attributes) {
|
|
1108
|
+
attributes.forEach(function (attribute) {
|
|
1109
|
+
element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '');
|
|
1110
|
+
});
|
|
1111
|
+
}
|
|
1112
|
+
};
|
|
1113
|
+
|
|
1114
|
+
/**
|
|
1115
|
+
* Helper used to get the position which will be applied to the popper
|
|
1116
|
+
* @method
|
|
1117
|
+
* @memberof Popper
|
|
1118
|
+
* @param config {HTMLElement} popper element
|
|
1119
|
+
* @param reference {HTMLElement} reference element
|
|
1120
|
+
* @returns {String} position
|
|
1121
|
+
*/
|
|
1122
|
+
Popper.prototype._getPosition = function (popper, reference) {
|
|
1123
|
+
var container = getOffsetParent(reference);
|
|
1124
|
+
|
|
1125
|
+
if (this._options.forceAbsolute) {
|
|
1126
|
+
return 'absolute';
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
// Decide if the popper will be fixed
|
|
1130
|
+
// If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together
|
|
1131
|
+
var isParentFixed = isFixed(reference, container);
|
|
1132
|
+
return isParentFixed ? 'fixed' : 'absolute';
|
|
1133
|
+
};
|
|
1134
|
+
|
|
1135
|
+
/**
|
|
1136
|
+
* Get offsets to the popper
|
|
1137
|
+
* @method
|
|
1138
|
+
* @memberof Popper
|
|
1139
|
+
* @access private
|
|
1140
|
+
* @param {Element} popper - the popper element
|
|
1141
|
+
* @param {Element} reference - the reference element (the popper will be relative to this)
|
|
1142
|
+
* @returns {Object} An object containing the offsets which will be applied to the popper
|
|
1143
|
+
*/
|
|
1144
|
+
Popper.prototype._getOffsets = function (popper, reference, placement) {
|
|
1145
|
+
placement = placement.split('-')[0];
|
|
1146
|
+
var popperOffsets = {};
|
|
1147
|
+
|
|
1148
|
+
popperOffsets.position = this.state.position;
|
|
1149
|
+
var isParentFixed = popperOffsets.position === 'fixed';
|
|
1150
|
+
|
|
1151
|
+
//
|
|
1152
|
+
// Get reference element position
|
|
1153
|
+
//
|
|
1154
|
+
var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);
|
|
1155
|
+
|
|
1156
|
+
//
|
|
1157
|
+
// Get popper sizes
|
|
1158
|
+
//
|
|
1159
|
+
var popperRect = getOuterSizes(popper);
|
|
1160
|
+
|
|
1161
|
+
//
|
|
1162
|
+
// Compute offsets of popper
|
|
1163
|
+
//
|
|
1164
|
+
|
|
1165
|
+
// depending by the popper placement we have to compute its offsets slightly differently
|
|
1166
|
+
if (['right', 'left'].indexOf(placement) !== -1) {
|
|
1167
|
+
popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;
|
|
1168
|
+
if (placement === 'left') {
|
|
1169
|
+
popperOffsets.left = referenceOffsets.left - popperRect.width;
|
|
1170
|
+
} else {
|
|
1171
|
+
popperOffsets.left = referenceOffsets.right;
|
|
1172
|
+
}
|
|
1173
|
+
} else {
|
|
1174
|
+
popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;
|
|
1175
|
+
if (placement === 'top') {
|
|
1176
|
+
popperOffsets.top = referenceOffsets.top - popperRect.height;
|
|
1177
|
+
} else {
|
|
1178
|
+
popperOffsets.top = referenceOffsets.bottom;
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
// Add width and height to our offsets object
|
|
1183
|
+
popperOffsets.width = popperRect.width;
|
|
1184
|
+
popperOffsets.height = popperRect.height;
|
|
1185
|
+
|
|
1186
|
+
return {
|
|
1187
|
+
popper: popperOffsets,
|
|
1188
|
+
reference: referenceOffsets
|
|
1189
|
+
};
|
|
1190
|
+
};
|
|
1191
|
+
|
|
1192
|
+
/**
|
|
1193
|
+
* Setup needed event listeners used to update the popper position
|
|
1194
|
+
* @method
|
|
1195
|
+
* @memberof Popper
|
|
1196
|
+
* @access private
|
|
1197
|
+
*/
|
|
1198
|
+
Popper.prototype._setupEventListeners = function () {
|
|
1199
|
+
// NOTE: 1 DOM access here
|
|
1200
|
+
this.state.updateBound = this.update.bind(this);
|
|
1201
|
+
root.addEventListener('resize', this.state.updateBound);
|
|
1202
|
+
// if the boundariesElement is window we don't need to listen for the scroll event
|
|
1203
|
+
if (this._options.boundariesElement !== 'window') {
|
|
1204
|
+
var target = getScrollParent(this._reference);
|
|
1205
|
+
// here it could be both `body` or `documentElement` thanks to Firefox, we then check both
|
|
1206
|
+
if (target === root.document.body || target === root.document.documentElement) {
|
|
1207
|
+
target = root;
|
|
1208
|
+
}
|
|
1209
|
+
target.addEventListener('scroll', this.state.updateBound);
|
|
1210
|
+
this.state.scrollTarget = target;
|
|
1211
|
+
}
|
|
1212
|
+
};
|
|
1213
|
+
|
|
1214
|
+
/**
|
|
1215
|
+
* Remove event listeners used to update the popper position
|
|
1216
|
+
* @method
|
|
1217
|
+
* @memberof Popper
|
|
1218
|
+
* @access private
|
|
1219
|
+
*/
|
|
1220
|
+
Popper.prototype._removeEventListeners = function () {
|
|
1221
|
+
// NOTE: 1 DOM access here
|
|
1222
|
+
root.removeEventListener('resize', this.state.updateBound);
|
|
1223
|
+
if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) {
|
|
1224
|
+
this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound);
|
|
1225
|
+
this.state.scrollTarget = null;
|
|
1226
|
+
}
|
|
1227
|
+
this.state.updateBound = null;
|
|
1228
|
+
};
|
|
1229
|
+
|
|
1230
|
+
/**
|
|
1231
|
+
* Computed the boundaries limits and return them
|
|
1232
|
+
* @method
|
|
1233
|
+
* @memberof Popper
|
|
1234
|
+
* @access private
|
|
1235
|
+
* @param {Object} data - Object containing the property "offsets" generated by `_getOffsets`
|
|
1236
|
+
* @param {Number} padding - Boundaries padding
|
|
1237
|
+
* @param {Element} boundariesElement - Element used to define the boundaries
|
|
1238
|
+
* @returns {Object} Coordinates of the boundaries
|
|
1239
|
+
*/
|
|
1240
|
+
Popper.prototype._getBoundaries = function (data, padding, boundariesElement) {
|
|
1241
|
+
// NOTE: 1 DOM access here
|
|
1242
|
+
var boundaries = {};
|
|
1243
|
+
var width, height;
|
|
1244
|
+
if (boundariesElement === 'window') {
|
|
1245
|
+
var body = root.document.body,
|
|
1246
|
+
html = root.document.documentElement;
|
|
1247
|
+
|
|
1248
|
+
height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
|
|
1249
|
+
width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
|
|
1250
|
+
|
|
1251
|
+
boundaries = {
|
|
1252
|
+
top: 0,
|
|
1253
|
+
right: width,
|
|
1254
|
+
bottom: height,
|
|
1255
|
+
left: 0
|
|
1256
|
+
};
|
|
1257
|
+
} else if (boundariesElement === 'viewport') {
|
|
1258
|
+
var offsetParent = getOffsetParent(this._popper);
|
|
1259
|
+
var scrollParent = getScrollParent(this._popper);
|
|
1260
|
+
var offsetParentRect = getOffsetRect(offsetParent);
|
|
1261
|
+
|
|
1262
|
+
// Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop`
|
|
1263
|
+
var getScrollTopValue = function getScrollTopValue(element) {
|
|
1264
|
+
return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop;
|
|
1265
|
+
};
|
|
1266
|
+
var getScrollLeftValue = function getScrollLeftValue(element) {
|
|
1267
|
+
return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft;
|
|
1268
|
+
};
|
|
1269
|
+
|
|
1270
|
+
// if the popper is fixed we don't have to substract scrolling from the boundaries
|
|
1271
|
+
var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent);
|
|
1272
|
+
var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : getScrollLeftValue(scrollParent);
|
|
1273
|
+
|
|
1274
|
+
boundaries = {
|
|
1275
|
+
top: 0 - (offsetParentRect.top - scrollTop),
|
|
1276
|
+
right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
|
|
1277
|
+
bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
|
|
1278
|
+
left: 0 - (offsetParentRect.left - scrollLeft)
|
|
1279
|
+
};
|
|
1280
|
+
} else {
|
|
1281
|
+
if (getOffsetParent(this._popper) === boundariesElement) {
|
|
1282
|
+
boundaries = {
|
|
1283
|
+
top: 0,
|
|
1284
|
+
left: 0,
|
|
1285
|
+
right: boundariesElement.clientWidth,
|
|
1286
|
+
bottom: boundariesElement.clientHeight
|
|
1287
|
+
};
|
|
1288
|
+
} else {
|
|
1289
|
+
boundaries = getOffsetRect(boundariesElement);
|
|
1290
|
+
}
|
|
1291
|
+
}
|
|
1292
|
+
boundaries.left += padding;
|
|
1293
|
+
boundaries.right -= padding;
|
|
1294
|
+
boundaries.top = boundaries.top + padding;
|
|
1295
|
+
boundaries.bottom = boundaries.bottom - padding;
|
|
1296
|
+
return boundaries;
|
|
1297
|
+
};
|
|
1298
|
+
|
|
1299
|
+
/**
|
|
1300
|
+
* Loop trough the list of modifiers and run them in order, each of them will then edit the data object
|
|
1301
|
+
* @method
|
|
1302
|
+
* @memberof Popper
|
|
1303
|
+
* @access public
|
|
1304
|
+
* @param {Object} data
|
|
1305
|
+
* @param {Array} modifiers
|
|
1306
|
+
* @param {Function} ends
|
|
1307
|
+
*/
|
|
1308
|
+
Popper.prototype.runModifiers = function (data, modifiers, ends) {
|
|
1309
|
+
var modifiersToRun = modifiers.slice();
|
|
1310
|
+
if (ends !== undefined) {
|
|
1311
|
+
modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends));
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
modifiersToRun.forEach(function (modifier) {
|
|
1315
|
+
if (isFunction(modifier)) {
|
|
1316
|
+
data = modifier.call(this, data);
|
|
1317
|
+
}
|
|
1318
|
+
}.bind(this));
|
|
1319
|
+
|
|
1320
|
+
return data;
|
|
1321
|
+
};
|
|
1322
|
+
|
|
1323
|
+
/**
|
|
1324
|
+
* Helper used to know if the given modifier depends from another one.
|
|
1325
|
+
* @method
|
|
1326
|
+
* @memberof Popper
|
|
1327
|
+
* @param {String} requesting - name of requesting modifier
|
|
1328
|
+
* @param {String} requested - name of requested modifier
|
|
1329
|
+
* @returns {Boolean}
|
|
1330
|
+
*/
|
|
1331
|
+
Popper.prototype.isModifierRequired = function (requesting, requested) {
|
|
1332
|
+
var index = getArrayKeyIndex(this._options.modifiers, requesting);
|
|
1333
|
+
return !!this._options.modifiers.slice(0, index).filter(function (modifier) {
|
|
1334
|
+
return modifier === requested;
|
|
1335
|
+
}).length;
|
|
1336
|
+
};
|
|
1337
|
+
|
|
1338
|
+
//
|
|
1339
|
+
// Modifiers
|
|
1340
|
+
//
|
|
1341
|
+
|
|
1342
|
+
/**
|
|
1343
|
+
* Modifiers list
|
|
1344
|
+
* @namespace Popper.modifiers
|
|
1345
|
+
* @memberof Popper
|
|
1346
|
+
* @type {Object}
|
|
1347
|
+
*/
|
|
1348
|
+
Popper.prototype.modifiers = {};
|
|
1349
|
+
|
|
1350
|
+
/**
|
|
1351
|
+
* Apply the computed styles to the popper element
|
|
1352
|
+
* @method
|
|
1353
|
+
* @memberof Popper.modifiers
|
|
1354
|
+
* @argument {Object} data - The data object generated by `update` method
|
|
1355
|
+
* @returns {Object} The same data object
|
|
1356
|
+
*/
|
|
1357
|
+
Popper.prototype.modifiers.applyStyle = function (data) {
|
|
1358
|
+
// apply the final offsets to the popper
|
|
1359
|
+
// NOTE: 1 DOM access here
|
|
1360
|
+
var styles = {
|
|
1361
|
+
position: data.offsets.popper.position
|
|
1362
|
+
|
|
1363
|
+
// round top and left to avoid blurry text
|
|
1364
|
+
};var left = Math.round(data.offsets.popper.left);
|
|
1365
|
+
var top = Math.round(data.offsets.popper.top);
|
|
1366
|
+
|
|
1367
|
+
// if gpuAcceleration is set to true and transform is supported, we use `translate3d` to apply the position to the popper
|
|
1368
|
+
// we automatically use the supported prefixed version if needed
|
|
1369
|
+
var prefixedProperty;
|
|
1370
|
+
if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) {
|
|
1371
|
+
styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
|
|
1372
|
+
styles.top = 0;
|
|
1373
|
+
styles.left = 0;
|
|
1374
|
+
}
|
|
1375
|
+
// othwerise, we use the standard `left` and `top` properties
|
|
1376
|
+
else {
|
|
1377
|
+
styles.left = left;
|
|
1378
|
+
styles.top = top;
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
// any property present in `data.styles` will be applied to the popper,
|
|
1382
|
+
// in this way we can make the 3rd party modifiers add custom styles to it
|
|
1383
|
+
// Be aware, modifiers could override the properties defined in the previous
|
|
1384
|
+
// lines of this modifier!
|
|
1385
|
+
assign_default()(styles, data.styles);
|
|
1386
|
+
|
|
1387
|
+
setStyle(this._popper, styles);
|
|
1388
|
+
|
|
1389
|
+
// set an attribute which will be useful to style the tooltip (use it to properly position its arrow)
|
|
1390
|
+
// NOTE: 1 DOM access here
|
|
1391
|
+
if (!this._popper._prevClass.includes('mds-date-picker')) {
|
|
1392
|
+
this._popper.setAttribute('x-placement', data.placement);
|
|
1393
|
+
var popper = this._popper;
|
|
1394
|
+
var instanceType = popper.classList[0];
|
|
1395
|
+
popper.classList.replace(popper.classList[1], instanceType + '-placement-' + data.placement);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
// console.log(data.placement)
|
|
1399
|
+
|
|
1400
|
+
// if the arrow modifier is required and the arrow style has been computed, apply the arrow style
|
|
1401
|
+
if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) {
|
|
1402
|
+
setStyle(data.arrowElement, data.offsets.arrow);
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
return data;
|
|
1406
|
+
};
|
|
1407
|
+
|
|
1408
|
+
/**
|
|
1409
|
+
* Modifier used to shift the popper on the start or end of its reference element side
|
|
1410
|
+
* @method
|
|
1411
|
+
* @memberof Popper.modifiers
|
|
1412
|
+
* @argument {Object} data - The data object generated by `update` method
|
|
1413
|
+
* @returns {Object} The data object, properly modified
|
|
1414
|
+
*/
|
|
1415
|
+
Popper.prototype.modifiers.shift = function (data) {
|
|
1416
|
+
var placement = data.placement;
|
|
1417
|
+
var basePlacement = placement.split('-')[0];
|
|
1418
|
+
var shiftVariation = placement.split('-')[1];
|
|
1419
|
+
|
|
1420
|
+
// if shift shiftVariation is specified, run the modifier
|
|
1421
|
+
if (shiftVariation) {
|
|
1422
|
+
var reference = data.offsets.reference;
|
|
1423
|
+
var popper = getPopperClientRect(data.offsets.popper);
|
|
1424
|
+
|
|
1425
|
+
var shiftOffsets = {
|
|
1426
|
+
y: {
|
|
1427
|
+
start: { top: reference.top },
|
|
1428
|
+
end: { top: reference.top + reference.height - popper.height }
|
|
1429
|
+
},
|
|
1430
|
+
x: {
|
|
1431
|
+
start: { left: reference.left },
|
|
1432
|
+
end: { left: reference.left + reference.width - popper.width }
|
|
1433
|
+
}
|
|
1434
|
+
};
|
|
1435
|
+
|
|
1436
|
+
var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y';
|
|
1437
|
+
|
|
1438
|
+
data.offsets.popper = assign_default()(popper, shiftOffsets[axis][shiftVariation]);
|
|
1439
|
+
}
|
|
1440
|
+
return data;
|
|
1441
|
+
};
|
|
1442
|
+
|
|
1443
|
+
/**
|
|
1444
|
+
* Modifier used to make sure the popper does not overflows from it's boundaries
|
|
1445
|
+
* @method
|
|
1446
|
+
* @memberof Popper.modifiers
|
|
1447
|
+
* @argument {Object} data - The data object generated by `update` method
|
|
1448
|
+
* @returns {Object} The data object, properly modified
|
|
1449
|
+
*/
|
|
1450
|
+
Popper.prototype.modifiers.preventOverflow = function (data) {
|
|
1451
|
+
var order = this._options.preventOverflowOrder;
|
|
1452
|
+
var popper = getPopperClientRect(data.offsets.popper);
|
|
1453
|
+
|
|
1454
|
+
var check = {
|
|
1455
|
+
left: function left() {
|
|
1456
|
+
var left = popper.left;
|
|
1457
|
+
if (popper.left < data.boundaries.left) {
|
|
1458
|
+
left = Math.max(popper.left, data.boundaries.left);
|
|
1459
|
+
}
|
|
1460
|
+
return { left: left };
|
|
1461
|
+
},
|
|
1462
|
+
right: function right() {
|
|
1463
|
+
var left = popper.left;
|
|
1464
|
+
if (popper.right > data.boundaries.right) {
|
|
1465
|
+
left = Math.min(popper.left, data.boundaries.right - popper.width);
|
|
1466
|
+
}
|
|
1467
|
+
return { left: left };
|
|
1468
|
+
},
|
|
1469
|
+
top: function top() {
|
|
1470
|
+
var top = popper.top;
|
|
1471
|
+
if (popper.top < data.boundaries.top) {
|
|
1472
|
+
top = Math.max(popper.top, data.boundaries.top);
|
|
1473
|
+
}
|
|
1474
|
+
return { top: top };
|
|
1475
|
+
},
|
|
1476
|
+
bottom: function bottom() {
|
|
1477
|
+
var top = popper.top;
|
|
1478
|
+
if (popper.bottom > data.boundaries.bottom) {
|
|
1479
|
+
top = Math.min(popper.top, data.boundaries.bottom - popper.height);
|
|
1480
|
+
}
|
|
1481
|
+
return { top: top };
|
|
1482
|
+
}
|
|
1483
|
+
};
|
|
1484
|
+
|
|
1485
|
+
order.forEach(function (direction) {
|
|
1486
|
+
data.offsets.popper = assign_default()(popper, check[direction]());
|
|
1487
|
+
});
|
|
1488
|
+
|
|
1489
|
+
return data;
|
|
1490
|
+
};
|
|
1491
|
+
|
|
1492
|
+
/**
|
|
1493
|
+
* Modifier used to make sure the popper is always near its reference
|
|
1494
|
+
* @method
|
|
1495
|
+
* @memberof Popper.modifiers
|
|
1496
|
+
* @argument {Object} data - The data object generated by _update method
|
|
1497
|
+
* @returns {Object} The data object, properly modified
|
|
1498
|
+
*/
|
|
1499
|
+
Popper.prototype.modifiers.keepTogether = function (data) {
|
|
1500
|
+
var popper = getPopperClientRect(data.offsets.popper);
|
|
1501
|
+
var reference = data.offsets.reference;
|
|
1502
|
+
var f = Math.floor;
|
|
1503
|
+
|
|
1504
|
+
if (popper.right < f(reference.left)) {
|
|
1505
|
+
data.offsets.popper.left = f(reference.left) - popper.width;
|
|
1506
|
+
}
|
|
1507
|
+
if (popper.left > f(reference.right)) {
|
|
1508
|
+
data.offsets.popper.left = f(reference.right);
|
|
1509
|
+
}
|
|
1510
|
+
if (popper.bottom < f(reference.top)) {
|
|
1511
|
+
data.offsets.popper.top = f(reference.top) - popper.height;
|
|
1512
|
+
}
|
|
1513
|
+
if (popper.top > f(reference.bottom)) {
|
|
1514
|
+
data.offsets.popper.top = f(reference.bottom);
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
return data;
|
|
1518
|
+
};
|
|
1519
|
+
|
|
1520
|
+
/**
|
|
1521
|
+
* Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element.
|
|
1522
|
+
* Requires the `preventOverflow` modifier before it in order to work.
|
|
1523
|
+
* **NOTE:** This modifier will run all its previous modifiers everytime it tries to flip the popper!
|
|
1524
|
+
* @method
|
|
1525
|
+
* @memberof Popper.modifiers
|
|
1526
|
+
* @argument {Object} data - The data object generated by _update method
|
|
1527
|
+
* @returns {Object} The data object, properly modified
|
|
1528
|
+
*/
|
|
1529
|
+
Popper.prototype.modifiers.flip = function (data) {
|
|
1530
|
+
// check if preventOverflow is in the list of modifiers before the flip modifier.
|
|
1531
|
+
// otherwise flip would not work as expected.
|
|
1532
|
+
if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {
|
|
1533
|
+
console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!');
|
|
1534
|
+
return data;
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
if (data.flipped && data.placement === data._originalPlacement) {
|
|
1538
|
+
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
|
|
1539
|
+
return data;
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
var placement = data.placement.split('-')[0];
|
|
1543
|
+
var placementOpposite = getOppositePlacement(placement);
|
|
1544
|
+
var variation = data.placement.split('-')[1] || '';
|
|
1545
|
+
var flipOrder = [];
|
|
1546
|
+
if (this._options.flipBehavior === 'flip') {
|
|
1547
|
+
flipOrder = [placement, placementOpposite];
|
|
1548
|
+
} else {
|
|
1549
|
+
flipOrder = this._options.flipBehavior;
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
flipOrder.forEach(function (step, index) {
|
|
1553
|
+
if (placement !== step || flipOrder.length === index + 1) {
|
|
1554
|
+
return;
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
placement = data.placement.split('-')[0];
|
|
1558
|
+
placementOpposite = getOppositePlacement(placement);
|
|
1559
|
+
|
|
1560
|
+
var popperOffsets = getPopperClientRect(data.offsets.popper);
|
|
1561
|
+
|
|
1562
|
+
// this boolean is used to distinguish right and bottom from top and left
|
|
1563
|
+
// they need different computations to get flipped
|
|
1564
|
+
var a = ['right', 'bottom'].indexOf(placement) !== -1;
|
|
1565
|
+
|
|
1566
|
+
// using Math.floor because the reference offsets may contain decimals we are not going to consider here
|
|
1567
|
+
if (a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) || !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite])) {
|
|
1568
|
+
// we'll use this boolean to detect any flip loop
|
|
1569
|
+
data.flipped = true;
|
|
1570
|
+
data.placement = flipOrder[index + 1];
|
|
1571
|
+
if (variation) {
|
|
1572
|
+
data.placement += '-' + variation;
|
|
1573
|
+
}
|
|
1574
|
+
data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper;
|
|
1575
|
+
data = this.runModifiers(data, this._options.modifiers, this._flip);
|
|
1576
|
+
}
|
|
1577
|
+
}.bind(this));
|
|
1578
|
+
return data;
|
|
1579
|
+
};
|
|
1580
|
+
|
|
1581
|
+
/**
|
|
1582
|
+
* Modifier used to add an offset to the popper, useful if you more granularity positioning your popper.
|
|
1583
|
+
* The offsets will shift the popper on the side of its reference element.
|
|
1584
|
+
* @method
|
|
1585
|
+
* @memberof Popper.modifiers
|
|
1586
|
+
* @argument {Object} data - The data object generated by _update method
|
|
1587
|
+
* @returns {Object} The data object, properly modified
|
|
1588
|
+
*/
|
|
1589
|
+
Popper.prototype.modifiers.offset = function (data) {
|
|
1590
|
+
var offset = this._options.offset;
|
|
1591
|
+
var popper = data.offsets.popper;
|
|
1592
|
+
|
|
1593
|
+
if (data.placement.indexOf('left') !== -1) {
|
|
1594
|
+
popper.top -= offset;
|
|
1595
|
+
} else if (data.placement.indexOf('right') !== -1) {
|
|
1596
|
+
popper.top += offset;
|
|
1597
|
+
} else if (data.placement.indexOf('top') !== -1) {
|
|
1598
|
+
popper.left -= offset;
|
|
1599
|
+
} else if (data.placement.indexOf('bottom') !== -1) {
|
|
1600
|
+
popper.left += offset;
|
|
1601
|
+
}
|
|
1602
|
+
return data;
|
|
1603
|
+
};
|
|
1604
|
+
|
|
1605
|
+
/**
|
|
1606
|
+
* Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element
|
|
1607
|
+
* It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed
|
|
1608
|
+
* @method
|
|
1609
|
+
* @memberof Popper.modifiers
|
|
1610
|
+
* @argument {Object} data - The data object generated by _update method
|
|
1611
|
+
* @returns {Object} The data object, properly modified
|
|
1612
|
+
*/
|
|
1613
|
+
Popper.prototype.modifiers.arrow = function (data) {
|
|
1614
|
+
var arrow = this._options.arrowElement;
|
|
1615
|
+
var arrowOffset = this._options.arrowOffset;
|
|
1616
|
+
|
|
1617
|
+
// if the arrowElement is a string, suppose it's a CSS selector
|
|
1618
|
+
if (typeof arrow === 'string') {
|
|
1619
|
+
arrow = this._popper.querySelector(arrow);
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
// if arrow element is not found, don't run the modifier
|
|
1623
|
+
if (!arrow) {
|
|
1624
|
+
return data;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
// the arrow element must be child of its popper
|
|
1628
|
+
if (!this._popper.contains(arrow)) {
|
|
1629
|
+
console.warn('WARNING: `arrowElement` must be child of its popper element!');
|
|
1630
|
+
return data;
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
// arrow depends on keepTogether in order to work
|
|
1634
|
+
if (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {
|
|
1635
|
+
console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!');
|
|
1636
|
+
return data;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
var arrowStyle = {};
|
|
1640
|
+
var placement = data.placement.split('-')[0];
|
|
1641
|
+
var popper = getPopperClientRect(data.offsets.popper);
|
|
1642
|
+
var reference = data.offsets.reference;
|
|
1643
|
+
var isVertical = ['left', 'right'].indexOf(placement) !== -1;
|
|
1644
|
+
|
|
1645
|
+
var len = isVertical ? 'height' : 'width';
|
|
1646
|
+
var side = isVertical ? 'top' : 'left';
|
|
1647
|
+
var translate = isVertical ? 'translateY' : 'translateX';
|
|
1648
|
+
var altSide = isVertical ? 'left' : 'top';
|
|
1649
|
+
var opSide = isVertical ? 'bottom' : 'right';
|
|
1650
|
+
var arrowSize = getOuterSizes(arrow)[len];
|
|
1651
|
+
|
|
1652
|
+
//
|
|
1653
|
+
// extends keepTogether behavior making sure the popper and its reference have enough pixels in conjuction
|
|
1654
|
+
//
|
|
1655
|
+
|
|
1656
|
+
// top/left side
|
|
1657
|
+
if (reference[opSide] - arrowSize < popper[side]) {
|
|
1658
|
+
data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
|
|
1659
|
+
}
|
|
1660
|
+
// bottom/right side
|
|
1661
|
+
if (reference[side] + arrowSize > popper[opSide]) {
|
|
1662
|
+
data.offsets.popper[side] += reference[side] + arrowSize - popper[opSide];
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
// compute center of the popper
|
|
1666
|
+
var center = reference[side] + (arrowOffset || reference[len] / 2 - arrowSize / 2);
|
|
1667
|
+
|
|
1668
|
+
var sideValue = center - popper[side];
|
|
1669
|
+
|
|
1670
|
+
// prevent arrow from being placed not contiguously to its popper
|
|
1671
|
+
sideValue = Math.max(Math.min(popper[len] - arrowSize - 8, sideValue), 8);
|
|
1672
|
+
arrowStyle[side] = sideValue;
|
|
1673
|
+
arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow
|
|
1674
|
+
|
|
1675
|
+
data.offsets.arrow = arrowStyle;
|
|
1676
|
+
data.arrowElement = arrow;
|
|
1677
|
+
|
|
1678
|
+
return data;
|
|
1679
|
+
};
|
|
1680
|
+
|
|
1681
|
+
//
|
|
1682
|
+
// Helpers
|
|
1683
|
+
//
|
|
1684
|
+
|
|
1685
|
+
/**
|
|
1686
|
+
* Get the outer sizes of the given element (offset size + margins)
|
|
1687
|
+
* @function
|
|
1688
|
+
* @ignore
|
|
1689
|
+
* @argument {Element} element
|
|
1690
|
+
* @returns {Object} object containing width and height properties
|
|
1691
|
+
*/
|
|
1692
|
+
function getOuterSizes(element) {
|
|
1693
|
+
// NOTE: 1 DOM access here
|
|
1694
|
+
var _display = element.style.display,
|
|
1695
|
+
_visibility = element.style.visibility;
|
|
1696
|
+
element.style.display = 'block';
|
|
1697
|
+
element.style.visibility = 'hidden';
|
|
1698
|
+
var calcWidthToForceRepaint = element.offsetWidth;
|
|
1699
|
+
|
|
1700
|
+
// original method
|
|
1701
|
+
var styles = root.getComputedStyle(element);
|
|
1702
|
+
var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
|
|
1703
|
+
var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
|
|
1704
|
+
var result = {
|
|
1705
|
+
width: element.offsetWidth + y,
|
|
1706
|
+
height: element.offsetHeight + x
|
|
1707
|
+
|
|
1708
|
+
// reset element styles
|
|
1709
|
+
};element.style.display = _display;
|
|
1710
|
+
element.style.visibility = _visibility;
|
|
1711
|
+
return result;
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
/**
|
|
1715
|
+
* Get the opposite placement of the given one/
|
|
1716
|
+
* @function
|
|
1717
|
+
* @ignore
|
|
1718
|
+
* @argument {String} placement
|
|
1719
|
+
* @returns {String} flipped placement
|
|
1720
|
+
*/
|
|
1721
|
+
function getOppositePlacement(placement) {
|
|
1722
|
+
var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
|
1723
|
+
return placement.replace(/left|right|bottom|top/g, function (matched) {
|
|
1724
|
+
return hash[matched];
|
|
1725
|
+
});
|
|
1726
|
+
}
|
|
1727
|
+
|
|
1728
|
+
/**
|
|
1729
|
+
* Given the popper offsets, generate an output similar to getBoundingClientRect
|
|
1730
|
+
* @function
|
|
1731
|
+
* @ignore
|
|
1732
|
+
* @argument {Object} popperOffsets
|
|
1733
|
+
* @returns {Object} ClientRect like output
|
|
1734
|
+
*/
|
|
1735
|
+
function getPopperClientRect(popperOffsets) {
|
|
1736
|
+
var offsets = assign_default()({}, popperOffsets);
|
|
1737
|
+
offsets.right = offsets.left + offsets.width;
|
|
1738
|
+
offsets.bottom = offsets.top + offsets.height;
|
|
1739
|
+
return offsets;
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
/**
|
|
1743
|
+
* Given an array and the key to find, returns its index
|
|
1744
|
+
* @function
|
|
1745
|
+
* @ignore
|
|
1746
|
+
* @argument {Array} arr
|
|
1747
|
+
* @argument keyToFind
|
|
1748
|
+
* @returns index or null
|
|
1749
|
+
*/
|
|
1750
|
+
function getArrayKeyIndex(arr, keyToFind) {
|
|
1751
|
+
var i = 0,
|
|
1752
|
+
key;
|
|
1753
|
+
for (key in arr) {
|
|
1754
|
+
if (arr[key] === keyToFind) {
|
|
1755
|
+
return i;
|
|
1756
|
+
}
|
|
1757
|
+
i++;
|
|
1758
|
+
}
|
|
1759
|
+
return null;
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
/**
|
|
1763
|
+
* Get CSS computed property of the given element
|
|
1764
|
+
* @function
|
|
1765
|
+
* @ignore
|
|
1766
|
+
* @argument {Eement} element
|
|
1767
|
+
* @argument {String} property
|
|
1768
|
+
*/
|
|
1769
|
+
function getStyleComputedProperty(element, property) {
|
|
1770
|
+
// NOTE: 1 DOM access here
|
|
1771
|
+
var css = root.getComputedStyle(element, null);
|
|
1772
|
+
return css[property];
|
|
1773
|
+
}
|
|
1774
|
+
|
|
1775
|
+
/**
|
|
1776
|
+
* Returns the offset parent of the given element
|
|
1777
|
+
* @function
|
|
1778
|
+
* @ignore
|
|
1779
|
+
* @argument {Element} element
|
|
1780
|
+
* @returns {Element} offset parent
|
|
1781
|
+
*/
|
|
1782
|
+
function getOffsetParent(element) {
|
|
1783
|
+
// NOTE: 1 DOM access here
|
|
1784
|
+
var offsetParent = element.offsetParent;
|
|
1785
|
+
return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
/**
|
|
1789
|
+
* Returns the scrolling parent of the given element
|
|
1790
|
+
* @function
|
|
1791
|
+
* @ignore
|
|
1792
|
+
* @argument {Element} element
|
|
1793
|
+
* @returns {Element} offset parent
|
|
1794
|
+
*/
|
|
1795
|
+
function getScrollParent(element) {
|
|
1796
|
+
var parent = element.parentNode;
|
|
1797
|
+
|
|
1798
|
+
if (!parent) {
|
|
1799
|
+
return element;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
if (parent === root.document) {
|
|
1803
|
+
// Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
|
|
1804
|
+
// greater than 0 and return the proper element
|
|
1805
|
+
if (root.document.body.scrollTop || root.document.body.scrollLeft) {
|
|
1806
|
+
return root.document.body;
|
|
1807
|
+
} else {
|
|
1808
|
+
return root.document.documentElement;
|
|
1809
|
+
}
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
// Firefox want us to check `-x` and `-y` variations as well
|
|
1813
|
+
if (['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1) {
|
|
1814
|
+
// If the detected scrollParent is body, we perform an additional check on its parentNode
|
|
1815
|
+
// in this way we'll get body if the browser is Chrome-ish, or documentElement otherwise
|
|
1816
|
+
// fixes issue #65
|
|
1817
|
+
return parent;
|
|
1818
|
+
}
|
|
1819
|
+
return getScrollParent(element.parentNode);
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
/**
|
|
1823
|
+
* Check if the given element is fixed or is inside a fixed parent
|
|
1824
|
+
* @function
|
|
1825
|
+
* @ignore
|
|
1826
|
+
* @argument {Element} element
|
|
1827
|
+
* @argument {Element} customContainer
|
|
1828
|
+
* @returns {Boolean} answer to "isFixed?"
|
|
1829
|
+
*/
|
|
1830
|
+
function isFixed(element) {
|
|
1831
|
+
if (element === root.document.body) {
|
|
1832
|
+
return false;
|
|
1833
|
+
}
|
|
1834
|
+
if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
|
1835
|
+
return true;
|
|
1836
|
+
}
|
|
1837
|
+
return element.parentNode ? isFixed(element.parentNode) : element;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/**
|
|
1841
|
+
* Set the style to the given popper
|
|
1842
|
+
* @function
|
|
1843
|
+
* @ignore
|
|
1844
|
+
* @argument {Element} element - Element to apply the style to
|
|
1845
|
+
* @argument {Object} styles - Object with a list of properties and values which will be applied to the element
|
|
1846
|
+
*/
|
|
1847
|
+
function setStyle(element, styles) {
|
|
1848
|
+
function is_numeric(n) {
|
|
1849
|
+
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
|
1850
|
+
}
|
|
1851
|
+
keys_default()(styles).forEach(function (prop) {
|
|
1852
|
+
var unit = '';
|
|
1853
|
+
// add unit if the value is numeric and is one of the following
|
|
1854
|
+
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && is_numeric(styles[prop])) {
|
|
1855
|
+
unit = 'px';
|
|
1856
|
+
}
|
|
1857
|
+
element.style[prop] = styles[prop] + unit;
|
|
1858
|
+
});
|
|
1859
|
+
}
|
|
1860
|
+
|
|
1861
|
+
/**
|
|
1862
|
+
* Check if the given variable is a function
|
|
1863
|
+
* @function
|
|
1864
|
+
* @ignore
|
|
1865
|
+
* @argument {*} functionToCheck - variable to check
|
|
1866
|
+
* @returns {Boolean} answer to: is a function?
|
|
1867
|
+
*/
|
|
1868
|
+
function isFunction(functionToCheck) {
|
|
1869
|
+
var getType = {};
|
|
1870
|
+
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
/**
|
|
1874
|
+
* Get the position of the given element, relative to its offset parent
|
|
1875
|
+
* @function
|
|
1876
|
+
* @ignore
|
|
1877
|
+
* @param {Element} element
|
|
1878
|
+
* @return {Object} position - Coordinates of the element and its `scrollTop`
|
|
1879
|
+
*/
|
|
1880
|
+
function getOffsetRect(element) {
|
|
1881
|
+
var elementRect = {
|
|
1882
|
+
width: element.offsetWidth,
|
|
1883
|
+
height: element.offsetHeight,
|
|
1884
|
+
left: element.offsetLeft,
|
|
1885
|
+
top: element.offsetTop
|
|
1886
|
+
};
|
|
1887
|
+
|
|
1888
|
+
elementRect.right = elementRect.left + elementRect.width;
|
|
1889
|
+
elementRect.bottom = elementRect.top + elementRect.height;
|
|
1890
|
+
|
|
1891
|
+
// position
|
|
1892
|
+
return elementRect;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
/**
|
|
1896
|
+
* Get bounding client rect of given element
|
|
1897
|
+
* @function
|
|
1898
|
+
* @ignore
|
|
1899
|
+
* @param {HTMLElement} element
|
|
1900
|
+
* @return {Object} client rect
|
|
1901
|
+
*/
|
|
1902
|
+
function getBoundingClientRect(element) {
|
|
1903
|
+
var rect = element.getBoundingClientRect();
|
|
1904
|
+
|
|
1905
|
+
// whether the IE version is lower than 11
|
|
1906
|
+
var isIE = navigator.userAgent.indexOf('MSIE') != -1;
|
|
1907
|
+
|
|
1908
|
+
// fix ie document bounding top always 0 bug
|
|
1909
|
+
var rectTop = isIE && element.tagName === 'HTML' ? -element.scrollTop : rect.top;
|
|
1910
|
+
|
|
1911
|
+
return {
|
|
1912
|
+
left: rect.left,
|
|
1913
|
+
top: rectTop,
|
|
1914
|
+
right: rect.right,
|
|
1915
|
+
bottom: rect.bottom,
|
|
1916
|
+
width: rect.right - rect.left,
|
|
1917
|
+
height: rect.bottom - rectTop
|
|
1918
|
+
};
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
/**
|
|
1922
|
+
* Given an element and one of its parents, return the offset
|
|
1923
|
+
* @function
|
|
1924
|
+
* @ignore
|
|
1925
|
+
* @param {HTMLElement} element
|
|
1926
|
+
* @param {HTMLElement} parent
|
|
1927
|
+
* @return {Object} rect
|
|
1928
|
+
*/
|
|
1929
|
+
function getOffsetRectRelativeToCustomParent(element, parent, fixed) {
|
|
1930
|
+
var elementRect = getBoundingClientRect(element);
|
|
1931
|
+
var parentRect = getBoundingClientRect(parent);
|
|
1932
|
+
|
|
1933
|
+
if (fixed) {
|
|
1934
|
+
var scrollParent = getScrollParent(parent);
|
|
1935
|
+
parentRect.top += scrollParent.scrollTop;
|
|
1936
|
+
parentRect.bottom += scrollParent.scrollTop;
|
|
1937
|
+
parentRect.left += scrollParent.scrollLeft;
|
|
1938
|
+
parentRect.right += scrollParent.scrollLeft;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
var rect = {
|
|
1942
|
+
top: elementRect.top - parentRect.top,
|
|
1943
|
+
left: elementRect.left - parentRect.left,
|
|
1944
|
+
bottom: elementRect.top - parentRect.top + elementRect.height,
|
|
1945
|
+
right: elementRect.left - parentRect.left + elementRect.width,
|
|
1946
|
+
width: elementRect.width,
|
|
1947
|
+
height: elementRect.height
|
|
1948
|
+
};
|
|
1949
|
+
return rect;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
/**
|
|
1953
|
+
* Get the prefixed supported property name
|
|
1954
|
+
* @function
|
|
1955
|
+
* @ignore
|
|
1956
|
+
* @argument {String} property (camelCase)
|
|
1957
|
+
* @returns {String} prefixed property (camelCase)
|
|
1958
|
+
*/
|
|
1959
|
+
function getSupportedPropertyName(property) {
|
|
1960
|
+
var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];
|
|
1961
|
+
|
|
1962
|
+
for (var i = 0; i < prefixes.length; i++) {
|
|
1963
|
+
var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;
|
|
1964
|
+
if (typeof root.document.body.style[toCheck] !== 'undefined') {
|
|
1965
|
+
return toCheck;
|
|
1966
|
+
}
|
|
1967
|
+
}
|
|
1968
|
+
return null;
|
|
1969
|
+
}
|
|
1970
|
+
|
|
1971
|
+
/**
|
|
1972
|
+
* The Object.assign() method is used to copy the values of all enumerable own properties from one or more source
|
|
1973
|
+
* objects to a target object. It will return the target object.
|
|
1974
|
+
* This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway
|
|
1975
|
+
* Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
|
|
1976
|
+
* @function
|
|
1977
|
+
* @ignore
|
|
1978
|
+
*/
|
|
1979
|
+
if (!assign_default.a) {
|
|
1980
|
+
Object.defineProperty(Object, 'assign', {
|
|
1981
|
+
enumerable: false,
|
|
1982
|
+
configurable: true,
|
|
1983
|
+
writable: true,
|
|
1984
|
+
value: function value(target) {
|
|
1985
|
+
if (target === undefined || target === null) {
|
|
1986
|
+
throw new TypeError('Cannot convert first argument to object');
|
|
1987
|
+
}
|
|
1988
|
+
|
|
1989
|
+
var to = Object(target);
|
|
1990
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
1991
|
+
var nextSource = arguments[i];
|
|
1992
|
+
if (nextSource === undefined || nextSource === null) {
|
|
1993
|
+
continue;
|
|
1994
|
+
}
|
|
1995
|
+
nextSource = Object(nextSource);
|
|
1996
|
+
|
|
1997
|
+
var keysArray = keys_default()(nextSource);
|
|
1998
|
+
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
|
|
1999
|
+
var nextKey = keysArray[nextIndex];
|
|
2000
|
+
var desc = get_own_property_descriptor_default()(nextSource, nextKey);
|
|
2001
|
+
if (desc !== undefined && desc.enumerable) {
|
|
2002
|
+
to[nextKey] = nextSource[nextKey];
|
|
2003
|
+
}
|
|
2004
|
+
}
|
|
2005
|
+
}
|
|
2006
|
+
return to;
|
|
2007
|
+
}
|
|
2008
|
+
});
|
|
2009
|
+
}
|
|
2010
|
+
|
|
2011
|
+
return Popper;
|
|
2012
|
+
}
|
|
2013
|
+
/* harmony default export */ var _popper_popper = (popper_createPopper());
|
|
2014
|
+
// CONCATENATED MODULE: ./components/_util/_popper/vue-popper.js
|
|
2015
|
+
|
|
2016
|
+
|
|
2017
|
+
|
|
2018
|
+
var stop = function stop(e) {
|
|
2019
|
+
return e.stopPropagation();
|
|
2020
|
+
};
|
|
2021
|
+
/**
|
|
2022
|
+
* @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
|
|
2023
|
+
* @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
|
|
2024
|
+
* @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
|
|
2025
|
+
* @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
|
|
2026
|
+
* @param {Boolean} [visible=false] Visibility of the popup element.
|
|
2027
|
+
* @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
|
|
2028
|
+
*/
|
|
2029
|
+
/* harmony default export */ var vue_popper = __webpack_exports__["a"] = ({
|
|
2030
|
+
props: {
|
|
2031
|
+
transformOrigin: {
|
|
2032
|
+
type: [Boolean, String],
|
|
2033
|
+
default: true
|
|
2034
|
+
},
|
|
2035
|
+
placement: {
|
|
2036
|
+
type: String,
|
|
2037
|
+
default: 'bottom'
|
|
2038
|
+
},
|
|
2039
|
+
boundariesPadding: {
|
|
2040
|
+
type: Number,
|
|
2041
|
+
default: 5
|
|
2042
|
+
},
|
|
2043
|
+
reference: {},
|
|
2044
|
+
popper: {},
|
|
2045
|
+
offset: {
|
|
2046
|
+
default: 0
|
|
2047
|
+
},
|
|
2048
|
+
value: Boolean,
|
|
2049
|
+
visibleArrow: Boolean,
|
|
2050
|
+
arrowOffset: {
|
|
2051
|
+
type: Number,
|
|
2052
|
+
default: 35
|
|
2053
|
+
},
|
|
2054
|
+
appendToBody: {
|
|
2055
|
+
type: Boolean,
|
|
2056
|
+
default: true
|
|
2057
|
+
},
|
|
2058
|
+
popperOptions: {
|
|
2059
|
+
type: Object,
|
|
2060
|
+
default: function _default() {
|
|
2061
|
+
return {
|
|
2062
|
+
gpuAcceleration: false
|
|
2063
|
+
};
|
|
2064
|
+
}
|
|
2065
|
+
}
|
|
2066
|
+
},
|
|
2067
|
+
|
|
2068
|
+
data: function data() {
|
|
2069
|
+
return {
|
|
2070
|
+
showPopper: false,
|
|
2071
|
+
currentPlacement: ''
|
|
2072
|
+
};
|
|
2073
|
+
},
|
|
2074
|
+
|
|
2075
|
+
|
|
2076
|
+
watch: {
|
|
2077
|
+
value: {
|
|
2078
|
+
immediate: true,
|
|
2079
|
+
handler: function handler(val) {
|
|
2080
|
+
this.showPopper = val;
|
|
2081
|
+
this.$emit('input', val);
|
|
2082
|
+
}
|
|
2083
|
+
},
|
|
2084
|
+
|
|
2085
|
+
showPopper: function showPopper(val) {
|
|
2086
|
+
if (this.disabled) return;
|
|
2087
|
+
val ? this.updatePopper() : this.destroyPopper();
|
|
2088
|
+
this.$emit('input', val);
|
|
2089
|
+
}
|
|
2090
|
+
},
|
|
2091
|
+
|
|
2092
|
+
methods: {
|
|
2093
|
+
createPopper: function createPopper() {
|
|
2094
|
+
var _this = this;
|
|
2095
|
+
|
|
2096
|
+
var options = this.popperOptions;
|
|
2097
|
+
var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
|
|
2098
|
+
var realPlacement = void 0;
|
|
2099
|
+
if (popper.__vue__ && popper.__vue__.$parent && popper.__vue__.$parent.$options.name === 'MdsCascader') {
|
|
2100
|
+
realPlacement = 'bottom-start';
|
|
2101
|
+
} else {
|
|
2102
|
+
realPlacement = this.realPlacement || this.placement;
|
|
2103
|
+
}
|
|
2104
|
+
this.currentPlacement = this.currentPlacement || realPlacement;
|
|
2105
|
+
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
|
|
2106
|
+
return;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
|
|
2110
|
+
|
|
2111
|
+
if (!reference && this.$slots.reference && this.$slots.reference[0]) {
|
|
2112
|
+
reference = this.referenceElm = this.$slots.reference[0].elm;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
if (!popper || !reference) return;
|
|
2116
|
+
if (this.visibleArrow) this.appendArrow(popper);
|
|
2117
|
+
if (this.appendToBody) document.body.appendChild(this.popperElm);
|
|
2118
|
+
if (this.popperJS && this.popperJS.destroy) {
|
|
2119
|
+
this.popperJS.destroy();
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
options.placement = this.currentPlacement;
|
|
2123
|
+
options.offset = this.offset;
|
|
2124
|
+
options.arrowOffset = this.arrowOffset;
|
|
2125
|
+
this.popperJS = new _popper_popper(reference, popper, options);
|
|
2126
|
+
this.popperJS.onCreate(function (_) {
|
|
2127
|
+
_this.$emit('created', _this);
|
|
2128
|
+
_this.resetTransformOrigin();
|
|
2129
|
+
_this.$nextTick(_this.updatePopper);
|
|
2130
|
+
});
|
|
2131
|
+
if (typeof options.onUpdate === 'function') {
|
|
2132
|
+
this.popperJS.onUpdate(options.onUpdate);
|
|
2133
|
+
}
|
|
2134
|
+
this.popperJS._popper.style.zIndex = popup_main["a" /* PopupMain */].nextZIndex();
|
|
2135
|
+
this.popperElm.addEventListener('click', stop);
|
|
2136
|
+
},
|
|
2137
|
+
updatePopper: function updatePopper(zIndexFlag) {
|
|
2138
|
+
var popperJS = this.popperJS;
|
|
2139
|
+
if (popperJS) {
|
|
2140
|
+
popperJS.update();
|
|
2141
|
+
if (popperJS._popper) {
|
|
2142
|
+
if (!zIndexFlag) {
|
|
2143
|
+
popperJS._popper.style.zIndex = popup_main["a" /* PopupMain */].nextZIndex();
|
|
2144
|
+
}
|
|
2145
|
+
}
|
|
2146
|
+
} else {
|
|
2147
|
+
this.createPopper();
|
|
2148
|
+
}
|
|
2149
|
+
},
|
|
2150
|
+
doDestroy: function doDestroy(forceDestroy) {
|
|
2151
|
+
/* istanbul ignore if */
|
|
2152
|
+
if (!this.popperJS || this.showPopper && !forceDestroy) return;
|
|
2153
|
+
this.popperJS.destroy();
|
|
2154
|
+
this.popperJS = null;
|
|
2155
|
+
},
|
|
2156
|
+
destroyPopper: function destroyPopper() {
|
|
2157
|
+
if (this.popperJS) {
|
|
2158
|
+
this.resetTransformOrigin();
|
|
2159
|
+
}
|
|
2160
|
+
},
|
|
2161
|
+
resetTransformOrigin: function resetTransformOrigin() {
|
|
2162
|
+
if (!this.transformOrigin) return;
|
|
2163
|
+
var placementMap = {
|
|
2164
|
+
top: 'bottom',
|
|
2165
|
+
bottom: 'top',
|
|
2166
|
+
left: 'right',
|
|
2167
|
+
right: 'left'
|
|
2168
|
+
};
|
|
2169
|
+
var placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
|
|
2170
|
+
var origin = placementMap[placement];
|
|
2171
|
+
this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
|
|
2172
|
+
},
|
|
2173
|
+
appendArrow: function appendArrow(element) {
|
|
2174
|
+
var hash = void 0;
|
|
2175
|
+
if (this.appended) {
|
|
2176
|
+
return;
|
|
2177
|
+
}
|
|
2178
|
+
|
|
2179
|
+
this.appended = true;
|
|
2180
|
+
|
|
2181
|
+
for (var item in element.attributes) {
|
|
2182
|
+
if (/^_v-/.test(element.attributes[item].name)) {
|
|
2183
|
+
hash = element.attributes[item].name;
|
|
2184
|
+
break;
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
var arrow = document.createElement('div');
|
|
2189
|
+
|
|
2190
|
+
if (hash) {
|
|
2191
|
+
arrow.setAttribute(hash, '');
|
|
2192
|
+
}
|
|
2193
|
+
arrow.setAttribute('x-arrow', '');
|
|
2194
|
+
arrow.className = 'popper__arrow';
|
|
2195
|
+
element.appendChild(arrow);
|
|
2196
|
+
}
|
|
2197
|
+
},
|
|
2198
|
+
|
|
2199
|
+
beforeDestroy: function beforeDestroy() {
|
|
2200
|
+
this.doDestroy(true);
|
|
2201
|
+
if (this.popperElm && this.popperElm.parentNode === document.body) {
|
|
2202
|
+
this.popperElm.removeEventListener('click', stop);
|
|
2203
|
+
document.body.removeChild(this.popperElm);
|
|
2204
|
+
}
|
|
2205
|
+
},
|
|
2206
|
+
deactivated: function deactivated() {
|
|
2207
|
+
this.$options.beforeDestroy[0].call(this);
|
|
2208
|
+
}
|
|
2209
|
+
});
|
|
2210
|
+
|
|
2211
|
+
/***/ }),
|
|
2212
|
+
|
|
2213
|
+
/***/ 18:
|
|
100
2214
|
/***/ (function(module, exports) {
|
|
101
2215
|
|
|
102
|
-
|
|
2216
|
+
module.exports = require("babel-runtime/core-js/object/get-own-property-descriptor");
|
|
103
2217
|
|
|
104
2218
|
/***/ }),
|
|
105
2219
|
|
|
106
|
-
/***/
|
|
2220
|
+
/***/ 19:
|
|
107
2221
|
/***/ (function(module, exports) {
|
|
108
2222
|
|
|
109
|
-
module.exports =
|
|
2223
|
+
module.exports = require("throttle-debounce");
|
|
110
2224
|
|
|
111
2225
|
/***/ }),
|
|
112
2226
|
|
|
113
|
-
/***/
|
|
2227
|
+
/***/ 2:
|
|
2228
|
+
/***/ (function(module, exports) {
|
|
2229
|
+
|
|
2230
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
|
|
2231
|
+
|
|
2232
|
+
/***/ }),
|
|
2233
|
+
|
|
2234
|
+
/***/ 201:
|
|
114
2235
|
/***/ (function(module, exports) {
|
|
115
2236
|
|
|
116
2237
|
// removed by extract-text-webpack-plugin
|
|
117
2238
|
|
|
118
2239
|
/***/ }),
|
|
119
2240
|
|
|
120
|
-
/***/
|
|
2241
|
+
/***/ 22:
|
|
2242
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
2243
|
+
|
|
2244
|
+
"use strict";
|
|
2245
|
+
/* harmony import */ var mds_ui_transition__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
|
|
2246
|
+
/* harmony import */ var mds_ui_transition__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(mds_ui_transition__WEBPACK_IMPORTED_MODULE_0__);
|
|
2247
|
+
|
|
2248
|
+
|
|
2249
|
+
var placementMap = {
|
|
2250
|
+
top: 'top',
|
|
2251
|
+
left: 'left',
|
|
2252
|
+
right: 'right',
|
|
2253
|
+
bottom: 'bottom',
|
|
2254
|
+
topLeft: 'top-start',
|
|
2255
|
+
topRight: 'top-end',
|
|
2256
|
+
bottomLeft: 'bottom-start',
|
|
2257
|
+
bottomRight: 'bottom-end',
|
|
2258
|
+
leftTop: 'left-start',
|
|
2259
|
+
leftBottom: 'left-end',
|
|
2260
|
+
rightTop: 'right-start',
|
|
2261
|
+
rightBottom: 'right-end'
|
|
2262
|
+
};
|
|
2263
|
+
|
|
2264
|
+
/* harmony default export */ __webpack_exports__["a"] = ({
|
|
2265
|
+
components: {
|
|
2266
|
+
mdsTransition: mds_ui_transition__WEBPACK_IMPORTED_MODULE_0___default.a
|
|
2267
|
+
},
|
|
2268
|
+
computed: {
|
|
2269
|
+
realPlacement: function realPlacement() {
|
|
2270
|
+
return placementMap[this.placement];
|
|
2271
|
+
}
|
|
2272
|
+
}
|
|
2273
|
+
});
|
|
2274
|
+
|
|
2275
|
+
/***/ }),
|
|
2276
|
+
|
|
2277
|
+
/***/ 48:
|
|
121
2278
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
122
2279
|
|
|
123
2280
|
"use strict";
|
|
124
|
-
/* harmony import */ var _style_index_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
|
|
2281
|
+
/* harmony import */ var _style_index_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(139);
|
|
125
2282
|
/* harmony import */ var _style_index_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_index_less__WEBPACK_IMPORTED_MODULE_0__);
|
|
126
|
-
/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
|
|
2283
|
+
/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(201);
|
|
127
2284
|
/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_1__);
|
|
128
2285
|
|
|
129
2286
|
|
|
130
2287
|
|
|
131
2288
|
/***/ }),
|
|
132
2289
|
|
|
133
|
-
/***/
|
|
2290
|
+
/***/ 5:
|
|
2291
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
2292
|
+
|
|
2293
|
+
"use strict";
|
|
2294
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
2295
|
+
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
|
|
2296
|
+
/* harmony import */ var _dom_helper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
|
|
2297
|
+
|
|
2298
|
+
|
|
2299
|
+
|
|
2300
|
+
var hasModal = false;
|
|
2301
|
+
var hasInitZIndex = false;
|
|
2302
|
+
var zIndex = void 0;
|
|
2303
|
+
|
|
2304
|
+
var getModal = function getModal() {
|
|
2305
|
+
if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return;
|
|
2306
|
+
var modalDom = PopupManager.modalDom;
|
|
2307
|
+
if (modalDom) {
|
|
2308
|
+
hasModal = true;
|
|
2309
|
+
} else {
|
|
2310
|
+
hasModal = false;
|
|
2311
|
+
modalDom = document.createElement('div');
|
|
2312
|
+
PopupManager.modalDom = modalDom;
|
|
2313
|
+
|
|
2314
|
+
modalDom.addEventListener('touchmove', function (event) {
|
|
2315
|
+
event.preventDefault();
|
|
2316
|
+
event.stopPropagation();
|
|
2317
|
+
});
|
|
2318
|
+
|
|
2319
|
+
modalDom.addEventListener('click', function () {
|
|
2320
|
+
PopupManager.doOnModalClick && PopupManager.doOnModalClick();
|
|
2321
|
+
});
|
|
2322
|
+
}
|
|
2323
|
+
|
|
2324
|
+
return modalDom;
|
|
2325
|
+
};
|
|
2326
|
+
|
|
2327
|
+
var instances = {};
|
|
2328
|
+
|
|
2329
|
+
var PopupManager = {
|
|
2330
|
+
modalFade: true,
|
|
2331
|
+
|
|
2332
|
+
getInstance: function getInstance(id) {
|
|
2333
|
+
return instances[id];
|
|
2334
|
+
},
|
|
2335
|
+
|
|
2336
|
+
register: function register(id, instance) {
|
|
2337
|
+
if (id && instance) {
|
|
2338
|
+
instances[id] = instance;
|
|
2339
|
+
}
|
|
2340
|
+
},
|
|
2341
|
+
|
|
2342
|
+
deregister: function deregister(id) {
|
|
2343
|
+
if (id) {
|
|
2344
|
+
instances[id] = null;
|
|
2345
|
+
delete instances[id];
|
|
2346
|
+
}
|
|
2347
|
+
},
|
|
2348
|
+
|
|
2349
|
+
nextZIndex: function nextZIndex() {
|
|
2350
|
+
return PopupManager.zIndex++;
|
|
2351
|
+
},
|
|
2352
|
+
|
|
2353
|
+
modalStack: [],
|
|
2354
|
+
|
|
2355
|
+
doOnModalClick: function doOnModalClick() {
|
|
2356
|
+
var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
|
2357
|
+
if (!topItem) return;
|
|
2358
|
+
|
|
2359
|
+
var instance = PopupManager.getInstance(topItem.id);
|
|
2360
|
+
if (instance && instance.closeOnClickModal) {
|
|
2361
|
+
instance.close();
|
|
2362
|
+
}
|
|
2363
|
+
},
|
|
2364
|
+
|
|
2365
|
+
openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
|
|
2366
|
+
if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return;
|
|
2367
|
+
if (!id || zIndex === undefined) return;
|
|
2368
|
+
this.modalFade = modalFade;
|
|
2369
|
+
|
|
2370
|
+
var modalStack = this.modalStack;
|
|
2371
|
+
|
|
2372
|
+
for (var i = 0, j = modalStack.length; i < j; i++) {
|
|
2373
|
+
var item = modalStack[i];
|
|
2374
|
+
if (item.id === id) {
|
|
2375
|
+
return;
|
|
2376
|
+
}
|
|
2377
|
+
}
|
|
2378
|
+
|
|
2379
|
+
var modalDom = getModal();
|
|
2380
|
+
|
|
2381
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* addClass */ "a"])(modalDom, 'v-modal');
|
|
2382
|
+
if (this.modalFade && !hasModal) {
|
|
2383
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* addClass */ "a"])(modalDom, 'v-modal-enter');
|
|
2384
|
+
}
|
|
2385
|
+
if (modalClass) {
|
|
2386
|
+
var classArr = modalClass.trim().split(/\s+/);
|
|
2387
|
+
classArr.forEach(function (item) {
|
|
2388
|
+
return Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* addClass */ "a"])(modalDom, item);
|
|
2389
|
+
});
|
|
2390
|
+
}
|
|
2391
|
+
setTimeout(function () {
|
|
2392
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* removeClass */ "h"])(modalDom, 'v-modal-enter');
|
|
2393
|
+
}, 200);
|
|
2394
|
+
|
|
2395
|
+
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
|
2396
|
+
dom.parentNode.appendChild(modalDom);
|
|
2397
|
+
} else {
|
|
2398
|
+
document.body.appendChild(modalDom);
|
|
2399
|
+
}
|
|
2400
|
+
|
|
2401
|
+
if (zIndex) {
|
|
2402
|
+
modalDom.style.zIndex = zIndex;
|
|
2403
|
+
}
|
|
2404
|
+
modalDom.tabIndex = 0;
|
|
2405
|
+
modalDom.style.display = '';
|
|
2406
|
+
|
|
2407
|
+
this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
|
|
2408
|
+
},
|
|
2409
|
+
|
|
2410
|
+
closeModal: function closeModal(id) {
|
|
2411
|
+
var modalStack = this.modalStack;
|
|
2412
|
+
var modalDom = getModal();
|
|
2413
|
+
|
|
2414
|
+
if (modalStack.length > 0) {
|
|
2415
|
+
var topItem = modalStack[modalStack.length - 1];
|
|
2416
|
+
if (topItem.id === id) {
|
|
2417
|
+
if (topItem.modalClass) {
|
|
2418
|
+
var classArr = topItem.modalClass.trim().split(/\s+/);
|
|
2419
|
+
classArr.forEach(function (item) {
|
|
2420
|
+
return Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* removeClass */ "h"])(modalDom, item);
|
|
2421
|
+
});
|
|
2422
|
+
}
|
|
2423
|
+
|
|
2424
|
+
modalStack.pop();
|
|
2425
|
+
if (modalStack.length > 0) {
|
|
2426
|
+
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
|
2427
|
+
}
|
|
2428
|
+
} else {
|
|
2429
|
+
for (var i = modalStack.length - 1; i >= 0; i--) {
|
|
2430
|
+
if (modalStack[i].id === id) {
|
|
2431
|
+
modalStack.splice(i, 1);
|
|
2432
|
+
break;
|
|
2433
|
+
}
|
|
2434
|
+
}
|
|
2435
|
+
}
|
|
2436
|
+
}
|
|
2437
|
+
|
|
2438
|
+
if (modalStack.length === 0) {
|
|
2439
|
+
if (this.modalFade) {
|
|
2440
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* addClass */ "a"])(modalDom, 'v-modal-leave');
|
|
2441
|
+
}
|
|
2442
|
+
setTimeout(function () {
|
|
2443
|
+
if (modalStack.length === 0) {
|
|
2444
|
+
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
|
2445
|
+
modalDom.style.display = 'none';
|
|
2446
|
+
PopupManager.modalDom = undefined;
|
|
2447
|
+
}
|
|
2448
|
+
Object(_dom_helper__WEBPACK_IMPORTED_MODULE_1__[/* removeClass */ "h"])(modalDom, 'v-modal-leave');
|
|
2449
|
+
}, 200);
|
|
2450
|
+
}
|
|
2451
|
+
}
|
|
2452
|
+
};
|
|
2453
|
+
|
|
2454
|
+
Object.defineProperty(PopupManager, 'zIndex', {
|
|
2455
|
+
configurable: true,
|
|
2456
|
+
get: function get() {
|
|
2457
|
+
if (!hasInitZIndex) {
|
|
2458
|
+
zIndex = zIndex || (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$ELEMENT || {}).zIndex || 2000;
|
|
2459
|
+
hasInitZIndex = true;
|
|
2460
|
+
}
|
|
2461
|
+
return zIndex;
|
|
2462
|
+
},
|
|
2463
|
+
set: function set(value) {
|
|
2464
|
+
zIndex = value;
|
|
2465
|
+
}
|
|
2466
|
+
});
|
|
2467
|
+
|
|
2468
|
+
var getTopPopup = function getTopPopup() {
|
|
2469
|
+
if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return;
|
|
2470
|
+
if (PopupManager.modalStack.length > 0) {
|
|
2471
|
+
var topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
|
2472
|
+
if (!topPopup) return;
|
|
2473
|
+
var instance = PopupManager.getInstance(topPopup.id);
|
|
2474
|
+
|
|
2475
|
+
return instance;
|
|
2476
|
+
}
|
|
2477
|
+
};
|
|
2478
|
+
|
|
2479
|
+
if (!vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) {
|
|
2480
|
+
// handle `esc` key when the popup is shown
|
|
2481
|
+
window.addEventListener('keydown', function (event) {
|
|
2482
|
+
if (event.keyCode === 27) {
|
|
2483
|
+
var topPopup = getTopPopup();
|
|
2484
|
+
|
|
2485
|
+
if (topPopup && topPopup.closeOnPressEscape) {
|
|
2486
|
+
topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
|
|
2487
|
+
}
|
|
2488
|
+
}
|
|
2489
|
+
});
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
/* harmony default export */ __webpack_exports__["a"] = (PopupManager);
|
|
2493
|
+
|
|
2494
|
+
/***/ }),
|
|
2495
|
+
|
|
2496
|
+
/***/ 55:
|
|
134
2497
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
135
2498
|
|
|
136
2499
|
"use strict";
|
|
@@ -138,59 +2501,412 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__16__;
|
|
|
138
2501
|
__webpack_require__.r(__webpack_exports__);
|
|
139
2502
|
|
|
140
2503
|
// EXTERNAL MODULE: ./components/popover/style/index.js
|
|
141
|
-
var style = __webpack_require__(
|
|
2504
|
+
var style = __webpack_require__(48);
|
|
2505
|
+
|
|
2506
|
+
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=29a75350&
|
|
2507
|
+
var render = function () {
|
|
2508
|
+
var this$1 = this
|
|
2509
|
+
var _vm = this
|
|
2510
|
+
var _h = _vm.$createElement
|
|
2511
|
+
var _c = _vm._self._c || _h
|
|
2512
|
+
return _c(
|
|
2513
|
+
"span",
|
|
2514
|
+
{ staticClass: "mds-popover-wrapper" },
|
|
2515
|
+
[
|
|
2516
|
+
_c(
|
|
2517
|
+
"mds-transition",
|
|
2518
|
+
{
|
|
2519
|
+
attrs: { type: _vm.transitionType, motion: _vm.transitionMotion },
|
|
2520
|
+
on: {
|
|
2521
|
+
"after-enter": function () {
|
|
2522
|
+
this$1.$emit("after-enter")
|
|
2523
|
+
},
|
|
2524
|
+
"after-leave": function () {
|
|
2525
|
+
this$1.$emit("after-leave")
|
|
2526
|
+
},
|
|
2527
|
+
},
|
|
2528
|
+
},
|
|
2529
|
+
[
|
|
2530
|
+
_vm.content || _vm.$slots.content
|
|
2531
|
+
? _c(
|
|
2532
|
+
"div",
|
|
2533
|
+
{
|
|
2534
|
+
directives: [
|
|
2535
|
+
{
|
|
2536
|
+
name: "show",
|
|
2537
|
+
rawName: "v-show",
|
|
2538
|
+
value: !this.disabled && this.showPopper,
|
|
2539
|
+
expression: "!this.disabled && this.showPopper",
|
|
2540
|
+
},
|
|
2541
|
+
],
|
|
2542
|
+
ref: "popper",
|
|
2543
|
+
class: _vm.calculateClass(),
|
|
2544
|
+
style: { width: _vm.width ? parseInt(_vm.width) + "px" : "" },
|
|
2545
|
+
},
|
|
2546
|
+
[
|
|
2547
|
+
_vm.content
|
|
2548
|
+
? [_vm._v("\n " + _vm._s(_vm.content) + "\n ")]
|
|
2549
|
+
: [_vm._t("content")],
|
|
2550
|
+
],
|
|
2551
|
+
2
|
|
2552
|
+
)
|
|
2553
|
+
: _vm._e(),
|
|
2554
|
+
]
|
|
2555
|
+
),
|
|
2556
|
+
_c("span", { ref: "reference" }, [_vm._t("default")], 2),
|
|
2557
|
+
],
|
|
2558
|
+
1
|
|
2559
|
+
)
|
|
2560
|
+
}
|
|
2561
|
+
var staticRenderFns = []
|
|
2562
|
+
render._withStripped = true
|
|
2563
|
+
|
|
2564
|
+
|
|
2565
|
+
// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=29a75350&
|
|
2566
|
+
|
|
2567
|
+
// EXTERNAL MODULE: ./components/_util/_popper/vue-popper.js + 1 modules
|
|
2568
|
+
var vue_popper = __webpack_require__(17);
|
|
2569
|
+
|
|
2570
|
+
// EXTERNAL MODULE: ./components/_util/_popper/popper-mixin.js
|
|
2571
|
+
var popper_mixin = __webpack_require__(22);
|
|
2572
|
+
|
|
2573
|
+
// EXTERNAL MODULE: external "throttle-debounce"
|
|
2574
|
+
var external_throttle_debounce_ = __webpack_require__(19);
|
|
2575
|
+
|
|
2576
|
+
// EXTERNAL MODULE: ./components/_util/_popper/dom-helper.js
|
|
2577
|
+
var dom_helper = __webpack_require__(1);
|
|
2578
|
+
|
|
2579
|
+
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/popover/popover.vue?vue&type=script&lang=js&
|
|
2580
|
+
//
|
|
2581
|
+
//
|
|
2582
|
+
//
|
|
2583
|
+
//
|
|
2584
|
+
//
|
|
2585
|
+
//
|
|
2586
|
+
//
|
|
2587
|
+
//
|
|
2588
|
+
//
|
|
2589
|
+
//
|
|
2590
|
+
//
|
|
2591
|
+
//
|
|
2592
|
+
//
|
|
2593
|
+
//
|
|
2594
|
+
//
|
|
2595
|
+
//
|
|
2596
|
+
//
|
|
2597
|
+
//
|
|
2598
|
+
//
|
|
2599
|
+
//
|
|
2600
|
+
//
|
|
2601
|
+
//
|
|
2602
|
+
//
|
|
2603
|
+
//
|
|
2604
|
+
//
|
|
2605
|
+
//
|
|
2606
|
+
//
|
|
2607
|
+
//
|
|
2608
|
+
//
|
|
2609
|
+
//
|
|
2610
|
+
//
|
|
2611
|
+
//
|
|
2612
|
+
//
|
|
2613
|
+
//
|
|
2614
|
+
//
|
|
2615
|
+
//
|
|
2616
|
+
//
|
|
2617
|
+
|
|
142
2618
|
|
|
143
|
-
// EXTERNAL MODULE: external "./_mixin/tooltip"
|
|
144
|
-
var tooltip_ = __webpack_require__(16);
|
|
145
|
-
var tooltip_default = /*#__PURE__*/__webpack_require__.n(tooltip_);
|
|
146
2619
|
|
|
147
|
-
// CONCATENATED MODULE: ./components/popover/popover.js
|
|
148
2620
|
|
|
149
2621
|
|
|
150
|
-
/* harmony default export */ var
|
|
2622
|
+
/* harmony default export */ var popovervue_type_script_lang_js_ = ({
|
|
151
2623
|
name: 'MdsPopover',
|
|
152
|
-
mixins: [
|
|
2624
|
+
mixins: [vue_popper["a" /* default */], popper_mixin["a" /* default */]],
|
|
153
2625
|
props: {
|
|
154
|
-
|
|
2626
|
+
arrowOffset: {
|
|
2627
|
+
type: Number,
|
|
2628
|
+
default: 0
|
|
2629
|
+
},
|
|
2630
|
+
offset: {
|
|
2631
|
+
type: Number,
|
|
2632
|
+
default: 0
|
|
2633
|
+
},
|
|
2634
|
+
content: String,
|
|
2635
|
+
placement: {
|
|
2636
|
+
type: String,
|
|
2637
|
+
default: 'top'
|
|
2638
|
+
},
|
|
2639
|
+
trigger: {
|
|
155
2640
|
type: String,
|
|
156
|
-
default: '
|
|
2641
|
+
default: 'hover'
|
|
157
2642
|
},
|
|
158
|
-
|
|
2643
|
+
disabled: Boolean,
|
|
2644
|
+
mouseEnterDelay: {
|
|
2645
|
+
type: Number,
|
|
2646
|
+
default: 0
|
|
2647
|
+
},
|
|
2648
|
+
mouseLeaveDelay: {
|
|
2649
|
+
type: Number,
|
|
2650
|
+
default: 0.2
|
|
2651
|
+
},
|
|
2652
|
+
className: {
|
|
159
2653
|
type: String
|
|
160
2654
|
},
|
|
161
2655
|
popperOptions: {
|
|
162
|
-
|
|
163
|
-
|
|
2656
|
+
default: function _default() {
|
|
2657
|
+
return {
|
|
2658
|
+
boundariesPadding: 5,
|
|
2659
|
+
gpuAcceleration: false
|
|
2660
|
+
};
|
|
2661
|
+
}
|
|
2662
|
+
},
|
|
2663
|
+
visibleArrow: {
|
|
2664
|
+
type: Boolean,
|
|
2665
|
+
default: true
|
|
2666
|
+
},
|
|
2667
|
+
tabindex: {
|
|
2668
|
+
type: Number,
|
|
2669
|
+
default: 0
|
|
2670
|
+
},
|
|
2671
|
+
width: {
|
|
2672
|
+
type: [Number, String]
|
|
2673
|
+
},
|
|
2674
|
+
transitionType: {
|
|
2675
|
+
type: String,
|
|
2676
|
+
default: 'zoom'
|
|
2677
|
+
},
|
|
2678
|
+
transitionMotion: {
|
|
2679
|
+
type: String,
|
|
2680
|
+
default: 'big-fast'
|
|
2681
|
+
},
|
|
2682
|
+
enterClass: String,
|
|
2683
|
+
enterActiveClass: String,
|
|
2684
|
+
enterToClass: String,
|
|
2685
|
+
leaveClass: String
|
|
2686
|
+
},
|
|
2687
|
+
data: function data() {
|
|
2688
|
+
return {
|
|
2689
|
+
timer: null, // mouseEnterDelay定时器flag
|
|
2690
|
+
focusing: false,
|
|
2691
|
+
expectedState: false
|
|
2692
|
+
};
|
|
2693
|
+
},
|
|
2694
|
+
|
|
2695
|
+
computed: {
|
|
2696
|
+
manual: function manual() {
|
|
2697
|
+
return this.trigger === 'manual';
|
|
164
2698
|
}
|
|
165
2699
|
},
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
var
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
2700
|
+
watch: {
|
|
2701
|
+
visibleArrow: function visibleArrow() {
|
|
2702
|
+
this.createPopper();
|
|
2703
|
+
},
|
|
2704
|
+
showPopper: function showPopper(val) {
|
|
2705
|
+
var _this = this;
|
|
2706
|
+
|
|
2707
|
+
if (val && !this.disabled) {
|
|
2708
|
+
var t = setTimeout(function () {
|
|
2709
|
+
clearTimeout(t);
|
|
2710
|
+
_this.updatePopper(true);
|
|
2711
|
+
}, 0);
|
|
2712
|
+
}
|
|
2713
|
+
}
|
|
2714
|
+
},
|
|
2715
|
+
mounted: function mounted() {
|
|
2716
|
+
var _this2 = this;
|
|
2717
|
+
|
|
2718
|
+
var realLeaveDelay = this.manual ? 200 : this.mouseLeaveDelay * 1000;
|
|
2719
|
+
this.debounceClose = Object(external_throttle_debounce_["debounce"])(realLeaveDelay, function () {
|
|
2720
|
+
return _this2.handleClosePopper();
|
|
2721
|
+
});
|
|
2722
|
+
|
|
2723
|
+
this.referenceElm = this.$refs.reference;
|
|
2724
|
+
this.popperInstance = this.$refs.popper;
|
|
2725
|
+
|
|
2726
|
+
if (this.referenceElm.nodeType === 1) {
|
|
2727
|
+
this.referenceElm.setAttribute('tabindex', this.tabindex);
|
|
2728
|
+
this.$nextTick(function () {
|
|
2729
|
+
_this2.bindingEvent(_this2.referenceElm, _this2.popperInstance);
|
|
2730
|
+
});
|
|
2731
|
+
}
|
|
2732
|
+
// if (this.popperInstance) {
|
|
2733
|
+
// this.$nextTick(() => {
|
|
2734
|
+
// this.updatePopper()
|
|
2735
|
+
// })
|
|
2736
|
+
// }
|
|
2737
|
+
},
|
|
2738
|
+
beforeDestroy: function beforeDestroy() {
|
|
2739
|
+
this.popperInstance && this.popperInstance.__vue__ && this.popperInstance.__vue__.$destroy && this.popperInstance.__vue__.$destroy();
|
|
2740
|
+
},
|
|
2741
|
+
destroyed: function destroyed() {
|
|
2742
|
+
var reference = this.referenceElm;
|
|
2743
|
+
var popper = this.popperInstance;
|
|
2744
|
+
Object(dom_helper["f" /* off */])(reference, 'click', this.doToggle);
|
|
2745
|
+
Object(dom_helper["f" /* off */])(reference, 'mouseup', this.hide);
|
|
2746
|
+
Object(dom_helper["f" /* off */])(reference, 'mousedown', this.show);
|
|
2747
|
+
Object(dom_helper["f" /* off */])(reference, 'focusin', this.show);
|
|
2748
|
+
Object(dom_helper["f" /* off */])(reference, 'focusout', this.hide);
|
|
2749
|
+
Object(dom_helper["f" /* off */])(reference, 'mousedown', this.show);
|
|
2750
|
+
Object(dom_helper["f" /* off */])(reference, 'mouseup', this.hide);
|
|
2751
|
+
Object(dom_helper["f" /* off */])(reference, 'mouseleave', this.handleMouseLeave);
|
|
2752
|
+
Object(dom_helper["f" /* off */])(reference, 'mouseenter', this.handleMouseEnter);
|
|
2753
|
+
Object(dom_helper["f" /* off */])(document, 'click', this.handleDocumentClick);
|
|
2754
|
+
Object(dom_helper["f" /* off */])(popper, 'focusin', this.handleFocus);
|
|
2755
|
+
Object(dom_helper["f" /* off */])(popper, 'focusout', this.handleBlur);
|
|
2756
|
+
Object(dom_helper["f" /* off */])(popper, 'mouseenter', this.handleMouseEnter);
|
|
2757
|
+
Object(dom_helper["f" /* off */])(popper, 'mouseleave', this.handleMouseLeave);
|
|
2758
|
+
},
|
|
2759
|
+
|
|
2760
|
+
methods: {
|
|
2761
|
+
bindingEvent: function bindingEvent(reference, popper) {
|
|
2762
|
+
var _this3 = this;
|
|
2763
|
+
|
|
2764
|
+
if (!reference || !popper) {
|
|
2765
|
+
return;
|
|
2766
|
+
}
|
|
2767
|
+
if (this.trigger !== 'click') {
|
|
2768
|
+
Object(dom_helper["g" /* on */])(reference, 'focusin', function () {
|
|
2769
|
+
_this3.handleFocus();
|
|
2770
|
+
// 如果组件有focus方法,则调用
|
|
2771
|
+
var instance = reference.__vue__;
|
|
2772
|
+
if (instance && typeof instance.focus === 'function') {
|
|
2773
|
+
instance.focus();
|
|
2774
|
+
}
|
|
2775
|
+
});
|
|
2776
|
+
Object(dom_helper["g" /* on */])(popper, 'focusin', this.handleFocus);
|
|
2777
|
+
Object(dom_helper["g" /* on */])(reference, 'focusout', this.handleBlur);
|
|
2778
|
+
Object(dom_helper["g" /* on */])(popper, 'focusout', this.handleBlur);
|
|
2779
|
+
}
|
|
2780
|
+
Object(dom_helper["g" /* on */])(reference, 'keydown', this.handleKeydown);
|
|
2781
|
+
Object(dom_helper["g" /* on */])(reference, 'click', this.handleClick);
|
|
2782
|
+
if (this.trigger === 'click') {
|
|
2783
|
+
Object(dom_helper["g" /* on */])(reference, 'click', this.doToggle);
|
|
2784
|
+
Object(dom_helper["g" /* on */])(document, 'click', this.handleDocumentClick);
|
|
2785
|
+
} else if (this.trigger === 'hover') {
|
|
2786
|
+
Object(dom_helper["g" /* on */])(reference, 'mouseenter', this.handleMouseEnter);
|
|
2787
|
+
Object(dom_helper["g" /* on */])(popper, 'mouseenter', this.handleMouseEnter);
|
|
2788
|
+
Object(dom_helper["g" /* on */])(reference, 'mouseleave', this.handleMouseLeave);
|
|
2789
|
+
Object(dom_helper["g" /* on */])(popper, 'mouseleave', this.handleMouseLeave);
|
|
2790
|
+
} else if (this.trigger === 'focus') {
|
|
2791
|
+
if (this.tabindex < 0) {
|
|
2792
|
+
console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
|
|
2793
|
+
}
|
|
2794
|
+
if (reference.querySelector('input, textarea')) {
|
|
2795
|
+
Object(dom_helper["g" /* on */])(reference, 'focusin', this.show);
|
|
2796
|
+
Object(dom_helper["g" /* on */])(reference, 'focusout', this.hide);
|
|
181
2797
|
} else {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}, [h('div', {
|
|
185
|
-
'class': ['mds-popover-title']
|
|
186
|
-
}, data.$slots.title || data.title), h('div', {
|
|
187
|
-
'class': ['mds-popover-inner-content']
|
|
188
|
-
}, data.$slots.content || data.content)]);
|
|
2798
|
+
// on(reference, 'mousedown', this.show)
|
|
2799
|
+
// on(reference, 'mouseup', this.hide)
|
|
189
2800
|
}
|
|
190
2801
|
}
|
|
2802
|
+
},
|
|
2803
|
+
show: function show() {
|
|
2804
|
+
this.setExpectedState(true);
|
|
2805
|
+
this.handleShowPopper();
|
|
2806
|
+
},
|
|
2807
|
+
hide: function hide() {
|
|
2808
|
+
this.setExpectedState(false);
|
|
2809
|
+
this.debounceClose();
|
|
2810
|
+
},
|
|
2811
|
+
setExpectedState: function setExpectedState(val) {
|
|
2812
|
+
this.expectedState = val;
|
|
2813
|
+
},
|
|
2814
|
+
handleShowPopper: function handleShowPopper() {
|
|
2815
|
+
var _this4 = this;
|
|
2816
|
+
|
|
2817
|
+
if (!this.expectedState || this.manual) {
|
|
2818
|
+
return;
|
|
2819
|
+
}
|
|
2820
|
+
clearTimeout(this.timer);
|
|
2821
|
+
this.timer = setTimeout(function () {
|
|
2822
|
+
_this4.showPopper = true;
|
|
2823
|
+
_this4.$emit('show');
|
|
2824
|
+
}, this.mouseEnterDelay * 1000);
|
|
2825
|
+
},
|
|
2826
|
+
handleClosePopper: function handleClosePopper() {
|
|
2827
|
+
if (this.expectedState || this.manual) {
|
|
2828
|
+
return;
|
|
2829
|
+
}
|
|
2830
|
+
clearTimeout(this.timer);
|
|
2831
|
+
this.showPopper = false;
|
|
2832
|
+
this.$emit('hide');
|
|
2833
|
+
if (this.disabled) {
|
|
2834
|
+
this.doDestroy();
|
|
2835
|
+
}
|
|
2836
|
+
},
|
|
2837
|
+
handleFocus: function handleFocus() {
|
|
2838
|
+
Object(dom_helper["a" /* addClass */])(this.referenceElm, 'focusing');
|
|
2839
|
+
if (this.trigger === 'click' || this.trigger === 'focus') {
|
|
2840
|
+
this.show();
|
|
2841
|
+
}
|
|
2842
|
+
},
|
|
2843
|
+
handleBlur: function handleBlur() {
|
|
2844
|
+
Object(dom_helper["h" /* removeClass */])(this.referenceElm, 'focusing');
|
|
2845
|
+
if (this.trigger === 'click' || this.trigger === 'focus') {
|
|
2846
|
+
this.hide();
|
|
2847
|
+
}
|
|
2848
|
+
},
|
|
2849
|
+
handleDocumentClick: function handleDocumentClick(e) {
|
|
2850
|
+
var reference = this.referenceElm;
|
|
2851
|
+
var popper = this.popperInstance;
|
|
2852
|
+
|
|
2853
|
+
if (!this.$el || !reference || this.$el.contains(e.target) || reference.contains(e.target) || !popper || popper.contains(e.target)) {
|
|
2854
|
+
return;
|
|
2855
|
+
}
|
|
2856
|
+
this.hide();
|
|
2857
|
+
},
|
|
2858
|
+
handleClick: function handleClick() {
|
|
2859
|
+
Object(dom_helper["h" /* removeClass */])(this.referenceElm, 'focusing');
|
|
2860
|
+
},
|
|
2861
|
+
handleKeydown: function handleKeydown(e) {
|
|
2862
|
+
if (e.keyCode === 27 && this.trigger !== 'manual') {
|
|
2863
|
+
// esc
|
|
2864
|
+
this.hide();
|
|
2865
|
+
}
|
|
2866
|
+
},
|
|
2867
|
+
doToggle: function doToggle() {
|
|
2868
|
+
this.showPopper ? this.hide() : this.show();
|
|
2869
|
+
},
|
|
2870
|
+
handleMouseEnter: function handleMouseEnter() {
|
|
2871
|
+
this.show();
|
|
2872
|
+
},
|
|
2873
|
+
handleMouseLeave: function handleMouseLeave() {
|
|
2874
|
+
this.hide();
|
|
2875
|
+
},
|
|
2876
|
+
calculateClass: function calculateClass() {
|
|
2877
|
+
var basicClass = 'mds-popover mds-popover-placement-' + this.realPlacement;
|
|
2878
|
+
return this.className ? basicClass + ' ' + this.className : basicClass;
|
|
191
2879
|
}
|
|
192
2880
|
}
|
|
193
2881
|
});
|
|
2882
|
+
// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js&
|
|
2883
|
+
/* harmony default export */ var popover_popovervue_type_script_lang_js_ = (popovervue_type_script_lang_js_);
|
|
2884
|
+
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
|
2885
|
+
var componentNormalizer = __webpack_require__(0);
|
|
2886
|
+
|
|
2887
|
+
// CONCATENATED MODULE: ./components/popover/popover.vue
|
|
2888
|
+
|
|
2889
|
+
|
|
2890
|
+
|
|
2891
|
+
|
|
2892
|
+
|
|
2893
|
+
/* normalize component */
|
|
2894
|
+
|
|
2895
|
+
var component = Object(componentNormalizer["a" /* default */])(
|
|
2896
|
+
popover_popovervue_type_script_lang_js_,
|
|
2897
|
+
render,
|
|
2898
|
+
staticRenderFns,
|
|
2899
|
+
false,
|
|
2900
|
+
null,
|
|
2901
|
+
null,
|
|
2902
|
+
null
|
|
2903
|
+
|
|
2904
|
+
)
|
|
2905
|
+
|
|
2906
|
+
/* hot reload */
|
|
2907
|
+
if (false) { var api; }
|
|
2908
|
+
component.options.__file = "components/popover/popover.vue"
|
|
2909
|
+
/* harmony default export */ var popover = (component.exports);
|
|
194
2910
|
// CONCATENATED MODULE: ./components/popover/index.js
|
|
195
2911
|
|
|
196
2912
|
|
|
@@ -200,6 +2916,20 @@ popover.install = function (Vue) {
|
|
|
200
2916
|
};
|
|
201
2917
|
/* harmony default export */ var components_popover = __webpack_exports__["default"] = (popover);
|
|
202
2918
|
|
|
2919
|
+
/***/ }),
|
|
2920
|
+
|
|
2921
|
+
/***/ 6:
|
|
2922
|
+
/***/ (function(module, exports) {
|
|
2923
|
+
|
|
2924
|
+
module.exports = require("babel-runtime/core-js/object/assign");
|
|
2925
|
+
|
|
2926
|
+
/***/ }),
|
|
2927
|
+
|
|
2928
|
+
/***/ 9:
|
|
2929
|
+
/***/ (function(module, exports) {
|
|
2930
|
+
|
|
2931
|
+
module.exports = require("babel-runtime/helpers/typeof");
|
|
2932
|
+
|
|
203
2933
|
/***/ })
|
|
204
2934
|
|
|
205
2935
|
/******/ });
|