UNPKG

yk-smart-ui-test

Version:

A Component Library for Vue.js.

1,350 lines (1,191 loc) 111 kB
module.exports = /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "/dist/"; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 52); /******/ }) /************************************************************************/ /******/ ({ /***/ 0: /***/ (function(module, exports) { module.exports = require("vue"); /***/ }), /***/ 1: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return on; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return off; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return once; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return hasClass; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return addClass; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return removeClass; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return getStyle; }); /* unused harmony export setStyle */ /* unused harmony export isScroll */ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getScrollContainer; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isInContainer; }); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /* istanbul ignore next */ var isServer = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer; var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; var MOZ_HACK_REGEXP = /^moz([A-Z])/; var ieVersion = isServer ? 0 : Number(document.documentMode); /* istanbul ignore next */ var trim = function trim(string) { return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, ''); }; /* istanbul ignore next */ var camelCase = function camelCase(name) { return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) { return offset ? letter.toUpperCase() : letter; }).replace(MOZ_HACK_REGEXP, 'Moz$1'); }; /* istanbul ignore next */ var on = function () { if (!isServer && document.addEventListener) { return function (element, event, handler) { if (element && event && handler) { element.addEventListener(event, handler, false); } }; } else { return function (element, event, handler) { if (element && event && handler) { element.attachEvent('on' + event, handler); } }; } }(); /* istanbul ignore next */ var off = function () { if (!isServer && document.removeEventListener) { return function (element, event, handler) { if (element && event) { element.removeEventListener(event, handler, false); } }; } else { return function (element, event, handler) { if (element && event) { element.detachEvent('on' + event, handler); } }; } }(); /* istanbul ignore next */ var once = function once(el, event, fn) { var listener = function listener() { if (fn) { fn.apply(this, arguments); } off(el, event, listener); }; on(el, event, listener); }; /* istanbul ignore next */ function hasClass(el, cls) { if (!el || !cls) return false; if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.'); if (el.classList) { return el.classList.contains(cls); } else { return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1; } }; /* istanbul ignore next */ function addClass(el, cls) { if (!el) return; var curClass = el.className; var classes = (cls || '').split(' '); for (var i = 0, j = classes.length; i < j; i++) { var clsName = classes[i]; if (!clsName) continue; if (el.classList) { el.classList.add(clsName); } else if (!hasClass(el, clsName)) { curClass += ' ' + clsName; } } if (!el.classList) { el.setAttribute('class', curClass); } }; /* istanbul ignore next */ function removeClass(el, cls) { if (!el || !cls) return; var classes = cls.split(' '); var curClass = ' ' + el.className + ' '; for (var i = 0, j = classes.length; i < j; i++) { var clsName = classes[i]; if (!clsName) continue; if (el.classList) { el.classList.remove(clsName); } else if (hasClass(el, clsName)) { curClass = curClass.replace(' ' + clsName + ' ', ' '); } } if (!el.classList) { el.setAttribute('class', trim(curClass)); } }; /* istanbul ignore next */ var getStyle = ieVersion < 9 ? function (element, styleName) { if (isServer) return; if (!element || !styleName) return null; styleName = camelCase(styleName); if (styleName === 'float') { styleName = 'styleFloat'; } try { switch (styleName) { case 'opacity': try { return element.filters.item('alpha').opacity / 100; } catch (e) { return 1.0; } default: return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null; } } catch (e) { return element.style[styleName]; } } : function (element, styleName) { if (isServer) return; if (!element || !styleName) return null; styleName = camelCase(styleName); if (styleName === 'float') { styleName = 'cssFloat'; } try { var computed = document.defaultView.getComputedStyle(element, ''); return element.style[styleName] || computed ? computed[styleName] : null; } catch (e) { return element.style[styleName]; } }; /* istanbul ignore next */ function setStyle(element, styleName, value) { if (!element || !styleName) return; if ((typeof styleName === 'undefined' ? 'undefined' : _typeof(styleName)) === 'object') { for (var prop in styleName) { if (styleName.hasOwnProperty(prop)) { setStyle(element, prop, styleName[prop]); } } } else { styleName = camelCase(styleName); if (styleName === 'opacity' && ieVersion < 9) { element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')'; } else { element.style[styleName] = value; } } }; var isScroll = function isScroll(el, vertical) { if (isServer) return; var determinedDirection = vertical !== null && vertical !== undefined; var overflow = determinedDirection ? vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x') : getStyle(el, 'overflow'); return overflow.match(/(scroll|auto|overlay)/); }; var getScrollContainer = function getScrollContainer(el, vertical) { if (isServer) return; var parent = el; while (parent) { if ([window, document, document.documentElement].includes(parent)) { return window; } if (isScroll(parent, vertical)) { return parent; } parent = parent.parentNode; } return parent; }; var isInContainer = function isInContainer(el, container) { if (isServer || !el || !container) return false; var elRect = el.getBoundingClientRect(); var containerRect = void 0; if ([window, document, document.documentElement, null, undefined].includes(container)) { containerRect = { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 }; } else { containerRect = container.getBoundingClientRect(); } return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right; }; /***/ }), /***/ 10: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var element_ui_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); var PopperJS = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer ? function () {} : __webpack_require__(24); var stop = function stop(e) { return e.stopPropagation(); }; /** * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper. * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper. * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end) * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative). * @param {Boolean} [visible=false] Visibility of the popup element. * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style. */ /* harmony default export */ __webpack_exports__["a"] = ({ props: { transformOrigin: { type: [Boolean, String], default: true }, placement: { type: String, default: 'bottom' }, boundariesPadding: { type: Number, default: 5 }, reference: {}, popper: {}, offset: { default: 0 }, value: Boolean, visibleArrow: Boolean, arrowOffset: { type: Number, default: 35 }, appendToBody: { type: Boolean, default: true }, popperOptions: { type: Object, default: function _default() { return { gpuAcceleration: false }; } } }, data: function data() { return { showPopper: false, currentPlacement: '' }; }, watch: { value: { immediate: true, handler: function handler(val) { this.showPopper = val; this.$emit('input', val); } }, showPopper: function showPopper(val) { if (this.disabled) return; val ? this.updatePopper() : this.destroyPopper(); this.$emit('input', val); } }, methods: { createPopper: function createPopper() { var _this = this; if (this.$isServer) return; this.currentPlacement = this.currentPlacement || this.placement; if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) { return; } var options = this.popperOptions; var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper; var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference; if (!reference && this.$slots.reference && this.$slots.reference[0]) { reference = this.referenceElm = this.$slots.reference[0].elm; } if (!popper || !reference) return; if (this.visibleArrow) this.appendArrow(popper); if (this.appendToBody) document.body.appendChild(this.popperElm); if (this.popperJS && this.popperJS.destroy) { this.popperJS.destroy(); } options.placement = this.currentPlacement; options.offset = this.offset; options.arrowOffset = this.arrowOffset; this.popperJS = new PopperJS(reference, popper, options); this.popperJS.onCreate(function (_) { _this.$emit('created', _this); _this.resetTransformOrigin(); _this.$nextTick(_this.updatePopper); }); if (typeof options.onUpdate === 'function') { this.popperJS.onUpdate(options.onUpdate); } this.popperJS._popper.style.zIndex = element_ui_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex(); this.popperElm.addEventListener('click', stop); }, updatePopper: function updatePopper() { var popperJS = this.popperJS; if (popperJS) { popperJS.update(); if (popperJS._popper) { popperJS._popper.style.zIndex = element_ui_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex(); } } else { this.createPopper(); } }, doDestroy: function doDestroy(forceDestroy) { /* istanbul ignore if */ if (!this.popperJS || this.showPopper && !forceDestroy) return; this.popperJS.destroy(); this.popperJS = null; }, destroyPopper: function destroyPopper() { if (this.popperJS) { this.resetTransformOrigin(); } }, resetTransformOrigin: function resetTransformOrigin() { if (!this.transformOrigin) return; var placementMap = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }; var placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0]; var origin = placementMap[placement]; this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center'; }, appendArrow: function appendArrow(element) { var hash = void 0; if (this.appended) { return; } this.appended = true; for (var item in element.attributes) { if (/^_v-/.test(element.attributes[item].name)) { hash = element.attributes[item].name; break; } } var arrow = document.createElement('div'); if (hash) { arrow.setAttribute(hash, ''); } arrow.setAttribute('x-arrow', ''); arrow.className = 'popper__arrow'; element.appendChild(arrow); } }, beforeDestroy: function beforeDestroy() { this.doDestroy(true); if (this.popperElm && this.popperElm.parentNode === document.body) { this.popperElm.removeEventListener('click', stop); document.body.removeChild(this.popperElm); } }, // call destroy in keep-alive mode deactivated: function deactivated() { this.$options.beforeDestroy[0].call(this); } }); /***/ }), /***/ 19: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var element_ui_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1); var nodeList = []; var ctx = '@@clickoutsideContext'; var startClick = void 0; var seed = 0; !vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(element_ui_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mousedown', function (e) { return startClick = e; }); !vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(element_ui_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mouseup', function (e) { nodeList.forEach(function (node) { return node[ctx].documentHandler(e, startClick); }); }); function createDocumentHandler(el, binding, vnode) { return function () { var mouseup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var mousedown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target || vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target))) return; if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) { vnode.context[el[ctx].methodName](); } else { el[ctx].bindingFn && el[ctx].bindingFn(); } }; } /** * v-clickoutside * @desc 点击元素外面才会触发的事件 * @example * ```vue * <div v-element-clickoutside="handleClose"> * ``` */ /* harmony default export */ __webpack_exports__["a"] = ({ bind: function bind(el, binding, vnode) { nodeList.push(el); var id = seed++; el[ctx] = { id: id, documentHandler: createDocumentHandler(el, binding, vnode), methodName: binding.expression, bindingFn: binding.value }; }, update: function update(el, binding, vnode) { el[ctx].documentHandler = createDocumentHandler(el, binding, vnode); el[ctx].methodName = binding.expression; el[ctx].bindingFn = binding.value; }, unbind: function unbind(el) { var len = nodeList.length; for (var i = 0; i < len; i++) { if (nodeList[i][ctx].id === el[ctx].id) { nodeList.splice(i, 1); break; } } delete el[ctx]; } }); /***/ }), /***/ 2: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; }); /* globals __VUE_SSR_CONTEXT__ */ // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). // This module is a runtime utility for cleaner component module output and will // be included in the final webpack user bundle. function normalizeComponent ( scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, /* server only */ shadowMode /* vue-cli only */ ) { // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (render) { options.render = render options.staticRenderFns = staticRenderFns options._compiled = true } // functional template if (functionalTemplate) { options.functional = true } // scopedId if (scopeId) { options._scopeId = 'data-v-' + scopeId } var hook if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__ } // inject component styles if (injectStyles) { injectStyles.call(this, context) } // register component module identifier for async chunk inferrence if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier) } } // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook } else if (injectStyles) { hook = shadowMode ? function () { injectStyles.call( this, (options.functional ? this.parent : this).$root.$options.shadowRoot ) } : injectStyles } if (hook) { if (options.functional) { // for template-only hot-reload because in that case the render fn doesn't // go through the normalizer options._injectStyles = hook // register for functional component in vue file var originalRender = options.render options.render = function renderWithStyleInjection (h, context) { hook.call(context) return originalRender(h, context) } } else { // inject component registration as beforeCreate hook var existing = options.beforeCreate options.beforeCreate = existing ? [].concat(existing, hook) : [hook] } } return { exports: scriptExports, options: options } } /***/ }), /***/ 24: /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /** * @fileOverview Kickass library to create and place poppers near their reference elements. * @version {{version}} * @license * Copyright (c) 2016 Federico Zivolo and contributors * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ // // Cross module loader // Supported: Node, AMD, Browser globals // ;(function (root, factory) { if (true) { // AMD. Register as an anonymous module. !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else {} })(this, function () { 'use strict'; var root = window; // default options var DEFAULTS = { // placement of the popper placement: 'bottom', gpuAcceleration: true, // shift popper from its origin by the given amount of pixels (can be negative) offset: 0, // the element which will act as boundary of the popper boundariesElement: 'viewport', // amount of pixel used to define a minimum distance between the boundaries and the popper boundariesPadding: 5, // popper will try to prevent overflow following this order, // by default, then, it could overflow on the left and on top of the boundariesElement preventOverflowOrder: ['left', 'right', 'top', 'bottom'], // the behavior used by flip to change the placement of the popper flipBehavior: 'flip', arrowElement: '[x-arrow]', arrowOffset: 0, // list of functions used to modify the offsets before they are applied to the popper modifiers: ['shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'], modifiersIgnored: [], forceAbsolute: false }; /** * Create a new Popper.js instance * @constructor Popper * @param {HTMLElement} reference - The reference element used to position the popper * @param {HTMLElement|Object} popper * The HTML element used as popper, or a configuration used to generate the popper. * @param {String} [popper.tagName='div'] The tag name of the generated popper. * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper. * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it. * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string. * @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`. * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is. * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element. * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element. * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element. * @param {Object} options * @param {String} [options.placement=bottom] * Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right), * left(-start, -end)` * * @param {HTMLElement|String} [options.arrowElement='[x-arrow]'] * The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of * its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its * reference element. * By default, it will look for a child node of the popper with the `x-arrow` attribute. * * @param {Boolean} [options.gpuAcceleration=true] * When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the * browser to use the GPU to accelerate the rendering. * If set to false, the popper will be placed using `top` and `left` properties, not using the GPU. * * @param {Number} [options.offset=0] * Amount of pixels the popper will be shifted (can be negative). * * @param {String|Element} [options.boundariesElement='viewport'] * The element which will define the boundaries of the popper position, the popper will never be placed outside * of the defined boundaries (except if `keepTogether` is enabled) * * @param {Number} [options.boundariesPadding=5] * Additional padding for the boundaries * * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']] * Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order, * this means that the last ones will never overflow * * @param {String|Array} [options.flipBehavior='flip'] * The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to * overlap its reference element. Defining `flip` as value, the placement will be flipped on * its axis (`right - left`, `top - bottom`). * You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify * how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left, * then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top) * * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']] * List of functions used to modify the data before they are applied to the popper, add your custom functions * to this array to edit the offsets and placement. * The function should reflect the @params and @returns of preventOverflow * * @param {Array} [options.modifiersIgnored=[]] * Put here any built-in modifier name you want to exclude from the modifiers list * The function should reflect the @params and @returns of preventOverflow * * @param {Boolean} [options.removeOnDestroy=false] * Set to true if you want to automatically remove the popper when you call the `destroy` method. */ function Popper(reference, popper, options) { this._reference = reference.jquery ? reference[0] : reference; this.state = {}; // if the popper variable is a configuration object, parse it to generate an HTMLElement // generate a default popper if is not defined var isNotDefined = typeof popper === 'undefined' || popper === null; var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]'; if (isNotDefined || isConfig) { this._popper = this.parse(isConfig ? popper : {}); } // otherwise, use the given HTMLElement as popper else { this._popper = popper.jquery ? popper[0] : popper; } // with {} we create a new object with the options inside it this._options = Object.assign({}, DEFAULTS, options); // refactoring modifiers' list this._options.modifiers = this._options.modifiers.map(function (modifier) { // remove ignored modifiers if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return; // set the x-placement attribute before everything else because it could be used to add margins to the popper // margins needs to be calculated to get the correct popper offsets if (modifier === 'applyStyle') { this._popper.setAttribute('x-placement', this._options.placement); } // return predefined modifier identified by string or keep the custom one return this.modifiers[modifier] || modifier; }.bind(this)); // make sure to apply the popper position before any computation this.state.position = this._getPosition(this._popper, this._reference); setStyle(this._popper, { position: this.state.position, top: 0 }); // fire the first update to position the popper in the right place this.update(); // setup event listeners, they will take care of update the position in specific situations this._setupEventListeners(); return this; } // // Methods // /** * Destroy the popper * @method * @memberof Popper */ Popper.prototype.destroy = function () { this._popper.removeAttribute('x-placement'); this._popper.style.left = ''; this._popper.style.position = ''; this._popper.style.top = ''; this._popper.style[getSupportedPropertyName('transform')] = ''; this._removeEventListeners(); // remove the popper if user explicity asked for the deletion on destroy if (this._options.removeOnDestroy) { this._popper.remove(); } return this; }; /** * Updates the position of the popper, computing the new offsets and applying the new style * @method * @memberof Popper */ Popper.prototype.update = function () { var data = { instance: this, styles: {} }; // store placement inside the data object, modifiers will be able to edit `placement` if needed // and refer to _originalPlacement to know the original value data.placement = this._options.placement; data._originalPlacement = this._options.placement; // compute the popper and reference offsets and put them inside data.offsets data.offsets = this._getOffsets(this._popper, this._reference, data.placement); // get boundaries data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement); data = this.runModifiers(data, this._options.modifiers); if (typeof this.state.updateCallback === 'function') { this.state.updateCallback(data); } }; /** * If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance. * @method * @memberof Popper * @param {Function} callback */ Popper.prototype.onCreate = function (callback) { // the createCallbacks return as first argument the popper instance callback(this); return this; }; /** * If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations * used to style popper and its arrow. * NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor! * @method * @memberof Popper * @param {Function} callback */ Popper.prototype.onUpdate = function (callback) { this.state.updateCallback = callback; return this; }; /** * Helper used to generate poppers from a configuration file * @method * @memberof Popper * @param config {Object} configuration * @returns {HTMLElement} popper */ Popper.prototype.parse = function (config) { var defaultConfig = { tagName: 'div', classNames: ['popper'], attributes: [], parent: root.document.body, content: '', contentType: 'text', arrowTagName: 'div', arrowClassNames: ['popper__arrow'], arrowAttributes: ['x-arrow'] }; config = Object.assign({}, defaultConfig, config); var d = root.document; var popper = d.createElement(config.tagName); addClassNames(popper, config.classNames); addAttributes(popper, config.attributes); if (config.contentType === 'node') { popper.appendChild(config.content.jquery ? config.content[0] : config.content); } else if (config.contentType === 'html') { popper.innerHTML = config.content; } else { popper.textContent = config.content; } if (config.arrowTagName) { var arrow = d.createElement(config.arrowTagName); addClassNames(arrow, config.arrowClassNames); addAttributes(arrow, config.arrowAttributes); popper.appendChild(arrow); } var parent = config.parent.jquery ? config.parent[0] : config.parent; // if the given parent is a string, use it to match an element // if more than one element is matched, the first one will be used as parent // if no elements are matched, the script will throw an error if (typeof parent === 'string') { parent = d.querySelectorAll(config.parent); if (parent.length > 1) { console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used'); } if (parent.length === 0) { throw 'ERROR: the given `parent` doesn\'t exists!'; } parent = parent[0]; } // if the given parent is a DOM nodes list or an array of nodes with more than one element, // the first one will be used as parent if (parent.length > 1 && parent instanceof Element === false) { console.warn('WARNING: you have passed as parent a list of elements, the first one will be used'); parent = parent[0]; } // append the generated popper to its parent parent.appendChild(popper); return popper; /** * Adds class names to the given element * @function * @ignore * @param {HTMLElement} target * @param {Array} classes */ function addClassNames(element, classNames) { classNames.forEach(function (className) { element.classList.add(className); }); } /** * Adds attributes to the given element * @function * @ignore * @param {HTMLElement} target * @param {Array} attributes * @example * addAttributes(element, [ 'data-info:foobar' ]); */ function addAttributes(element, attributes) { attributes.forEach(function (attribute) { element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || ''); }); } }; /** * Helper used to get the position which will be applied to the popper * @method * @memberof Popper * @param config {HTMLElement} popper element * @param reference {HTMLElement} reference element * @returns {String} position */ Popper.prototype._getPosition = function (popper, reference) { var container = getOffsetParent(reference); if (this._options.forceAbsolute) { return 'absolute'; } // Decide if the popper will be fixed // If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together var isParentFixed = isFixed(reference, container); return isParentFixed ? 'fixed' : 'absolute'; }; /** * Get offsets to the popper * @method * @memberof Popper * @access private * @param {Element} popper - the popper element * @param {Element} reference - the reference element (the popper will be relative to this) * @returns {Object} An object containing the offsets which will be applied to the popper */ Popper.prototype._getOffsets = function (popper, reference, placement) { placement = placement.split('-')[0]; var popperOffsets = {}; popperOffsets.position = this.state.position; var isParentFixed = popperOffsets.position === 'fixed'; // // Get reference element position // var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed); // // Get popper sizes // var popperRect = getOuterSizes(popper); // // Compute offsets of popper // // depending by the popper placement we have to compute its offsets slightly differently if (['right', 'left'].indexOf(placement) !== -1) { popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2; if (placement === 'left') { popperOffsets.left = referenceOffsets.left - popperRect.width; } else { popperOffsets.left = referenceOffsets.right; } } else { popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2; if (placement === 'top') { popperOffsets.top = referenceOffsets.top - popperRect.height; } else { popperOffsets.top = referenceOffsets.bottom; } } // Add width and height to our offsets object popperOffsets.width = popperRect.width; popperOffsets.height = popperRect.height; return { popper: popperOffsets, reference: referenceOffsets }; }; /** * Setup needed event listeners used to update the popper position * @method * @memberof Popper * @access private */ Popper.prototype._setupEventListeners = function () { // NOTE: 1 DOM access here this.state.updateBound = this.update.bind(this); root.addEventListener('resize', this.state.updateBound); // if the boundariesElement is window we don't need to listen for the scroll event if (this._options.boundariesElement !== 'window') { var target = getScrollParent(this._reference); // here it could be both `body` or `documentElement` thanks to Firefox, we then check both if (target === root.document.body || target === root.document.documentElement) { target = root; } target.addEventListener('scroll', this.state.updateBound); this.state.scrollTarget = target; } }; /** * Remove event listeners used to update the popper position * @method * @memberof Popper * @access private */ Popper.prototype._removeEventListeners = function () { // NOTE: 1 DOM access here root.removeEventListener('resize', this.state.updateBound); if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) { this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound); this.state.scrollTarget = null; } this.state.updateBound = null; }; /** * Computed the boundaries limits and return them * @method * @memberof Popper * @access private * @param {Object} data - Object containing the property "offsets" generated by `_getOffsets` * @param {Number} padding - Boundaries padding * @param {Element} boundariesElement - Element used to define the boundaries * @returns {Object} Coordinates of the boundaries */ Popper.prototype._getBoundaries = function (data, padding, boundariesElement) { // NOTE: 1 DOM access here var boundaries = {}; var width, height; if (boundariesElement === 'window') { var body = root.document.body, html = root.document.documentElement; height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth); boundaries = { top: 0, right: width, bottom: height, left: 0 }; } else if (boundariesElement === 'viewport') { var offsetParent = getOffsetParent(this._popper); var scrollParent = getScrollParent(this._popper); var offsetParentRect = getOffsetRect(offsetParent); // Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop` var getScrollTopValue = function getScrollTopValue(element) { return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop; }; var getScrollLeftValue = function getScrollLeftValue(element) { return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft; }; // if the popper is fixed we don't have to substract scrolling from the boundaries var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent); var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : getScrollLeftValue(scrollParent); boundaries = { top: 0 - (offsetParentRect.top - scrollTop), right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft), bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop), left: 0 - (offsetParentRect.left - scrollLeft) }; } else { if (getOffsetParent(this._popper) === boundariesElement) { boundaries = { top: 0, left: 0, right: boundariesElement.clientWidth, bottom: boundariesElement.clientHeight }; } else { boundaries = getOffsetRect(boundariesElement); } } boundaries.left += padding; boundaries.right -= padding; boundaries.top = boundaries.top + padding; boundaries.bottom = boundaries.bottom - padding; return boundaries; }; /** * Loop trough the list of modifiers and run them in order, each of them will then edit the data object * @method * @memberof Popper * @access public * @param {Object} data * @param {Array} modifiers * @param {Function} ends */ Popper.prototype.runModifiers = function (data, modifiers, ends) { var modifiersToRun = modifiers.slice(); if (ends !== undefined) { modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends)); } modifiersToRun.forEach(function (modifier) { if (isFunction(modifier)) { data = modifier.call(this, data); } }.bind(this)); return data; }; /** * Helper used to know if the given modifier depends from another one. * @method * @memberof Popper * @param {String} requesting - name of requesting modifier * @param {String} requested - name of requested modifier * @returns {Boolean} */ Popper.prototype.isModifierRequired = function (requesting, requested) { var index = getArrayKeyIndex(this._options.modifiers, requesting); return !!this._options.modifiers.slice(0, index).filter(function (modifier) { return modifier === requested; }).length; }; // // Modifiers // /** * Modifiers list * @namespace Popper.modifiers * @memberof Popper * @type {Object} */ Popper.prototype.modifiers = {}; /** * Apply the computed styles to the popper element * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by `update` method * @returns {Object} The same data object */ Popper.prototype.modifiers.applyStyle = function (data) { // apply the final offsets to the popper // NOTE: 1 DOM access here var styles = { position: data.offsets.popper.position }; // round top and left to avoid blurry text var left = Math.round(data.offsets.popper.left); var top = Math.round(data.offsets.popper.top); // if gpuAcceleration is set to true and transform is supported, we use `translate3d` to apply the position to the popper // we automatically use the supported prefixed