From e397040be29d1c8bec4dd1569e072c152e205788 Mon Sep 17 00:00:00 2001 From: Le Minh Tri Date: Wed, 19 Dec 2018 02:27:31 +0700 Subject: [PATCH 1/6] Remove trailing whitespace --- src/Popover.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Popover.vue b/src/Popover.vue index 6fd392e..a846dbf 100644 --- a/src/Popover.vue +++ b/src/Popover.vue @@ -113,11 +113,11 @@ export default { this.$nextTick(() => { this.$emit('show', event) - + this.$nextTick(()=>{ let position = this .getDropdownPosition(target, this.$refs.dropdown, direction) - + this.position = { left: `${position.left}px`, top: `${position.top}px` @@ -151,8 +151,8 @@ export default { let shiftY = 0.5 * (ddRect.height + trRect.height) // Center of the target element - let centerX = offsetLeft - 0.5 * (ddRect.width - trRect.width) - let centerY = offsetTop + trRect.height - shiftY + let centerX = offsetLeft - 0.5 * (ddRect.width - trRect.width) + let centerY = offsetTop + trRect.height - shiftY // let anchorX = direction[0] * this.anchor // let anchorY = direction[0] * this.anchor From ed9186f17a9e4d4c2a8d1c7ecbe944619e54c1d1 Mon Sep 17 00:00:00 2001 From: Le Minh Tri Date: Wed, 19 Dec 2018 02:27:52 +0700 Subject: [PATCH 2/6] Update dependencies and migrate config --- .babelrc | 4 +++- package.json | 37 +++++++++++++++++++------------------ webpack.config.js | 11 +++++++++-- 3 files changed, 31 insertions(+), 21 deletions(-) diff --git a/.babelrc b/.babelrc index 2aa352e..3d6f66d 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,6 @@ { - "presets": ["es2015", "stage-2"], + "presets": [ + ["@babel/env", { "modules": false }] + ], "comments": false } diff --git a/package.json b/package.json index 80835da..2639028 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,10 @@ "description": "Vue.js 2+ popover component", "version": "1.1.7", "author": "euvl ", + "license": "MIT", "private": false, "scripts": { - "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" + "build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules" }, "main": "dist/index.js", "repository": { @@ -15,9 +16,6 @@ "bugs": { "url": "https://github.com/euvl/vue-js-popover/issues" }, - "peerDependencies": { - "vue": "^2.0.0" - }, "keywords": [ "vue", "dropdown", @@ -27,19 +25,22 @@ "button" ], "devDependencies": { - "babel-core": "^6.0.0", - "babel-loader": "^6.0.0", - "babel-preset-latest": "^6.0.0", - "babel-preset-stage-2": "^6.24.1", - "cross-env": "^3.0.0", - "css-loader": "^0.25.0", - "file-loader": "^0.9.0", - "node-sass": "^4.5.0", - "sass-loader": "^5.0.1", - "vue": "^2.0.0", - "vue-loader": "^11.1.4", - "vue-template-compiler": "^2.0.0", - "webpack": "^2.2.0", - "webpack-dev-server": "^2.2.0" + "@babel/core": "^7.2.2", + "@babel/preset-env": "^7.2.0", + "babel-loader": "^8.0.4", + "cross-env": "^5.2.0", + "css-loader": "^2.0.1", + "file-loader": "^2.0.0", + "node-sass": "^4.11.0", + "sass-loader": "^7.1.0", + "uglifyjs-webpack-plugin": "^2.0.1", + "vue": "^2.5.21", + "vue-loader": "^15.4.2", + "vue-template-compiler": "^2.5.21", + "webpack": "^4.27.1", + "webpack-cli": "^3.1.2" + }, + "peerDependencies": { + "vue": "^2.5.21" } } diff --git a/webpack.config.js b/webpack.config.js index e86027c..91cc08a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,7 @@ -var path = require('path') -var webpack = require('webpack') +const path = require('path') +const webpack = require('webpack') +const VueLoaderPlugin = require('vue-loader/lib/plugin') +const UglifyJsPlugin = require("uglifyjs-webpack-plugin") module.exports = { entry: './src/index.js', @@ -22,6 +24,10 @@ module.exports = { } } }, + { + test: /\.scss$/, + loader: 'vue-style-loader!css-loader!sass-loader', + }, { test: /\.js$/, loader: 'babel-loader', @@ -46,6 +52,7 @@ module.exports = { }, devtool: '#source-map', plugins: [ + new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' From 151ba76a63b06613cc83cf356166b559a424b91d Mon Sep 17 00:00:00 2001 From: Le Minh Tri Date: Wed, 19 Dec 2018 02:28:01 +0700 Subject: [PATCH 3/6] Add built lib --- dist/index.js | 886 +------------------------------------------------- 1 file changed, 1 insertion(+), 885 deletions(-) diff --git a/dist/index.js b/dist/index.js index 820ecd1..05a7cc4 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,886 +1,2 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("vue")); - else if(typeof define === 'function' && define.amd) - define(["vue"], factory); - else if(typeof exports === 'object') - exports["vue-js-popover"] = factory(require("vue")); - else - root["vue-js-popover"] = factory(root["vue"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_13__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // identity function for calling harmony imports with the correct context -/******/ __webpack_require__.i = function(value) { return value; }; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "/dist/"; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 6); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.events = undefined; - -var _vue = __webpack_require__(13); - -var _vue2 = _interopRequireDefault(_vue); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var events = exports.events = new _vue2.default(); - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -// this module is a runtime utility for cleaner component module output and will -// be included in the final webpack user bundle - -module.exports = function normalizeComponent ( - rawScriptExports, - compiledTemplate, - scopeId, - cssModules -) { - var esModule - var scriptExports = rawScriptExports = rawScriptExports || {} - - // ES6 modules interop - var type = typeof rawScriptExports.default - if (type === 'object' || type === 'function') { - esModule = rawScriptExports - scriptExports = rawScriptExports.default - } - - // Vue.extend constructor export interop - var options = typeof scriptExports === 'function' - ? scriptExports.options - : scriptExports - - // render functions - if (compiledTemplate) { - options.render = compiledTemplate.render - options.staticRenderFns = compiledTemplate.staticRenderFns - } - - // scopedId - if (scopeId) { - options._scopeId = scopeId - } - - // inject cssModules - if (cssModules) { - var computed = Object.create(options.computed || null) - Object.keys(cssModules).forEach(function (key) { - var module = cssModules[key] - computed[key] = function () { return module } - }) - options.computed = computed - } - - return { - esModule: esModule, - exports: scriptExports, - options: options - } -} - - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - - -/* styles */ -__webpack_require__(10) - -var Component = __webpack_require__(1)( - /* script */ - __webpack_require__(4), - /* template */ - null, - /* scopeId */ - null, - /* cssModules */ - null -) - -module.exports = Component.exports - - -/***/ }), -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -var Component = __webpack_require__(1)( - /* script */ - __webpack_require__(5), - /* template */ - __webpack_require__(9), - /* scopeId */ - null, - /* cssModules */ - null -) - -module.exports = Component.exports - - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _bus = __webpack_require__(0); - -var pointerSize = 6; -var directions = { - left: [-1, 0], - right: [1, 0], - top: [0, 1], - bottom: [0, -1] -}; - -exports.default = { - name: 'Popover', - render: function render(createElement) { - if (!this.visible) { - return; - } - - return createElement('div', { - class: this.className, - style: this.style, - attrs: { - 'data-popover': this.name - }, - on: { - click: function click(event) { - event.stopPropagation(); - } - }, - ref: 'dropdown' - }, this.$slots.default); - }, - props: { - name: { - type: String, - required: true - }, - width: { - type: Number, - default: 180 - }, - pointer: { - type: Boolean, - default: true - }, - event: { - type: String, - default: 'click' - }, - anchor: { - type: Number, - default: 0.5, - validator: function validator(v) { - return v >= 0 && v <= 1; - } - } - }, - data: function data() { - return { - visible: false, - positionClass: '', - position: { - left: 0, - top: 0 - } - }; - }, - mounted: function mounted() { - _bus.events.$on(this.showEventName, this.showEventListener); - _bus.events.$on(this.hideEventName, this.hideEventListener); - }, - beforeDestroy: function beforeDestroy() { - _bus.events.$off(this.showEventName, this.showEventListener); - _bus.events.$off(this.hideEventName, this.hideEventListener); - }, - - computed: { - showEventName: function showEventName() { - return 'show:' + this.event; - }, - hideEventName: function hideEventName() { - return 'hide:' + this.event; - }, - className: function className() { - return ['vue-popover', this.pointer && this.positionClass]; - }, - style: function style() { - return _extends({ - width: this.width + 'px' - }, this.position); - } - }, - methods: { - showEventListener: function showEventListener(event) { - var _this = this; - - if (this.visible) { - _bus.events.$emit(this.hideEventName); - return; - } - - this.$nextTick(function () { - var target = event.target, - name = event.name, - position = event.position; - - - if (name === _this.name) { - var direction = directions[position]; - - _this.positionClass = 'dropdown-position-' + position; - _this.visible = true; - - _this.$nextTick(function () { - _this.$emit('show', event); - - _this.$nextTick(function () { - var position = _this.getDropdownPosition(target, _this.$refs.dropdown, direction); - - _this.position = { - left: position.left + 'px', - top: position.top + 'px' - }; - }); - }); - } - }); - }, - hideEventListener: function hideEventListener(event) { - if (this.visible) { - this.visible = false; - this.$emit('hide', event); - } - }, - getDropdownPosition: function getDropdownPosition(target, dropdown, direction) { - var trRect = target.getBoundingClientRect(); - var ddRect = dropdown.getBoundingClientRect(); - - var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; - var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; - - var offsetLeft = trRect.left + scrollLeft; - var offsetTop = trRect.top + scrollTop; - - var shiftY = 0.5 * (ddRect.height + trRect.height); - - var centerX = offsetLeft - 0.5 * (ddRect.width - trRect.width); - var centerY = offsetTop + trRect.height - shiftY; - - var x = direction[0] * 0.5 * (ddRect.width + trRect.width); - var y = direction[1] * shiftY; - - if (this.pointer) { - x += direction[0] * pointerSize; - y += direction[1] * pointerSize; - } - - return { - left: centerX + x, - top: centerY - y - }; - } - } -}; - -/***/ }), -/* 5 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.default = { - name: 'Tooltip', - props: { - event: { - type: String, - default: 'hover' - }, - pointer: { - type: Boolean, - default: false - }, - width: { - type: Number, - default: 160 - } - }, - data: function data() { - return { - value: '' - }; - } -}; - -/***/ }), -/* 6 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -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; }; - -var _Popover = __webpack_require__(2); - -var _Popover2 = _interopRequireDefault(_Popover); - -var _Tooltip = __webpack_require__(3); - -var _Tooltip2 = _interopRequireDefault(_Tooltip); - -var _bus = __webpack_require__(0); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var defaultPosition = 'bottom'; - -var prepareBinding = function prepareBinding(_ref) { - var _ref$arg = _ref.arg, - arg = _ref$arg === undefined ? '' : _ref$arg, - _ref$modifiers = _ref.modifiers, - modifiers = _ref$modifiers === undefined ? {} : _ref$modifiers, - _ref$value = _ref.value, - value = _ref$value === undefined ? {} : _ref$value; - - var mods = Object.keys(modifiers); - var name = (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value.name ? value.name : arg; - var position = mods[0] || value.position || defaultPosition; - - return { name: name, position: position, value: value }; -}; - -var addClickEventListener = function addClickEventListener(target, params) { - var click = function click(srcEvent) { - _bus.events.$emit('show:click', _extends({}, params, { target: target, srcEvent: srcEvent })); - - var handler = function handler(srcEvent) { - _bus.events.$emit('hide:click', _extends({}, params, { target: target, srcEvent: srcEvent })); - document.removeEventListener('click', handler); - }; - - document.addEventListener('click', handler); - srcEvent.stopPropagation(); - }; - - target.addEventListener('click', click); - - target.$popoverRemoveClickHandlers = function () { - target.removeEventListener('click', click); - }; -}; - -var addHoverEventListener = function addHoverEventListener(target, params) { - var mouseenter = function mouseenter(srcEvent) { - _bus.events.$emit('show:hover', _extends({}, params, { target: target, srcEvent: srcEvent })); - }; - - var mouseleave = function mouseleave(srcEvent) { - _bus.events.$emit('hide:hover', _extends({}, params, { target: target, srcEvent: srcEvent })); - }; - - target.addEventListener('mouseenter', mouseenter); - target.addEventListener('mouseleave', mouseleave); - - target.$popoverRemoveHoverHandlers = function () { - target.removeEventListener('mouseenter', mouseenter); - target.removeEventListener('mouseleave', mouseleave); - }; -}; - -exports.default = { - install: function install(Vue) { - var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - document.addEventListener('resize', function (event) { - _bus.events.$emit('hide', { srcEvent: event }); - }); - - Vue.component('Popover', _Popover2.default); - - Vue.directive('popover', { - bind: function bind(target, binding) { - var params = prepareBinding(binding); - - addClickEventListener(target, params); - addHoverEventListener(target, params); - }, - unbind: function unbind(target, binding) { - target.$popoverRemoveHoverHandlers(); - target.$popoverRemoveClickHandlers(); - } - }); - - if (params.tooltip) { - if (params.debug) { - console.log('vue-js-popover | tooltip active'); - } - Vue.component('Tooltip', _Tooltip2.default); - } - } -}; - -/***/ }), -/* 7 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(); -// imports - - -// module -exports.push([module.i, ".vue-popover{display:block;position:absolute;background:#fff;box-shadow:0 4px 20px 0 rgba(52,73,94,.2);padding:5px;border-radius:5px;z-index:998}.vue-popover:before{display:block;position:absolute;width:0;height:0;content:\"\"}.vue-popover.dropdown-position-bottom:before{border-bottom:6px solid #fff;top:-6px;filter:drop-shadow(0 -2px 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-bottom:before,.vue-popover.dropdown-position-top:before{border-left:6px solid transparent;border-right:6px solid transparent;left:calc(50% - 6px)}.vue-popover.dropdown-position-top:before{border-top:6px solid #fff;bottom:-6px;filter:drop-shadow(0 2px 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-left:before{border-left:6px solid #fff;right:-6px;filter:drop-shadow(2px 0 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-left:before,.vue-popover.dropdown-position-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;top:calc(50% - 6px)}.vue-popover.dropdown-position-right:before{border-right:6px solid #fff;left:-6px;filter:drop-shadow(-2px 0 2px rgba(52,73,94,.1))}", ""]); - -// exports - - -/***/ }), -/* 8 */ -/***/ (function(module, exports) { - -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -// css base code, injected by the css-loader -module.exports = function() { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - var result = []; - for(var i = 0; i < this.length; i++) { - var item = this[i]; - if(item[2]) { - result.push("@media " + item[2] + "{" + item[1] + "}"); - } else { - result.push(item[1]); - } - } - return result.join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; -}; - - -/***/ }), -/* 9 */ -/***/ (function(module, exports) { - -module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; - return _c('popover', { - attrs: { - "name": "tooltip", - "pointer": _vm.pointer, - "width": _vm.width, - "event": _vm.event - }, - on: { - "show": function($event) { - _vm.value = $event.value - } - } - }, [_vm._v("\n " + _vm._s(_vm.value) + "\n")]) -},staticRenderFns: []} - -/***/ }), -/* 10 */ -/***/ (function(module, exports, __webpack_require__) { - -// style-loader: Adds some css to the DOM by adding a