mirror of
				https://github.com/KevinMidboe/vue-js-modal.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	Fix linter errors
This commit is contained in:
		| @@ -1,5 +1,5 @@ | ||||
| <template> | ||||
|   <modal  | ||||
|   <modal | ||||
|     name="dialog" | ||||
|     height="auto" | ||||
|     :classes="['v--modal', 'vue-dialog', this.params.class]" | ||||
| @@ -24,7 +24,7 @@ | ||||
|     <div | ||||
|       class="vue-dialog-buttons" | ||||
|       v-if="buttons"> | ||||
|       <button  | ||||
|       <button | ||||
|         v-for="(button, i) in buttons" | ||||
|         :class="button.class || 'vue-dialog-button'" | ||||
|         type="button" | ||||
| @@ -55,40 +55,40 @@ export default { | ||||
|       default: 'fade' | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|   data () { | ||||
|     return { | ||||
|       params: {}, | ||||
|       defaultButtons: [{ title: 'CLOSE' }] | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     buttons() { | ||||
|     buttons () { | ||||
|       return this.params.buttons || this.defaultButtons | ||||
|     }, | ||||
|     /** | ||||
|       * Returns FLEX style with correct width for arbitrary number of | ||||
|       * buttons. | ||||
|       */ | ||||
|     buttonStyle() { | ||||
|     buttonStyle () { | ||||
|       return { | ||||
|         flex: `1 1 ${100 / this.buttons.length}%` | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     beforeOpened(event) { | ||||
|     beforeOpened (event) { | ||||
|       window.addEventListener('keyup', this.onKeyUp) | ||||
|  | ||||
|       this.params = event.params || {} | ||||
|       this.$emit('before-opened', event) | ||||
|     }, | ||||
|     beforeClosed(event) { | ||||
|     beforeClosed (event) { | ||||
|       window.removeEventListener('keyup', this.onKeyUp) | ||||
|  | ||||
|       this.params = {} | ||||
|       this.$emit('before-closed', event) | ||||
|     }, | ||||
|     click(i, event, source = 'click') { | ||||
|     click (i, event, source = 'click') { | ||||
|       const button = this.buttons[i] | ||||
|  | ||||
|       if (button && typeof button.handler === 'function') { | ||||
| @@ -97,7 +97,7 @@ export default { | ||||
|         this.$modal.hide('dialog') | ||||
|       } | ||||
|     }, | ||||
|     onKeyUp(event) { | ||||
|     onKeyUp (event) { | ||||
|       if (event.which === 13 && this.buttons.length > 0) { | ||||
|         const buttonIndex = | ||||
|           this.buttons.length === 1 | ||||
|   | ||||
| @@ -78,14 +78,14 @@ export default { | ||||
|     minWidth: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         return value >= 0 | ||||
|       } | ||||
|     }, | ||||
|     minHeight: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         return value >= 0 | ||||
|       } | ||||
|     }, | ||||
| @@ -100,7 +100,7 @@ export default { | ||||
|     width: { | ||||
|       type: [Number, String], | ||||
|       default: 600, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         if (typeof value === 'string') { | ||||
|           let width = parseNumber(value) | ||||
|           return (width.type === '%' || width.type === 'px') && width.value > 0 | ||||
| @@ -112,7 +112,7 @@ export default { | ||||
|     height: { | ||||
|       type: [Number, String], | ||||
|       default: 300, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         if (typeof value === 'string') { | ||||
|           if (value === 'auto') { | ||||
|             return true | ||||
| @@ -130,14 +130,14 @@ export default { | ||||
|     pivotX: { | ||||
|       type: Number, | ||||
|       default: 0.5, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         return value >= 0 && value <= 1 | ||||
|       } | ||||
|     }, | ||||
|     pivotY: { | ||||
|       type: Number, | ||||
|       default: 0.5, | ||||
|       validator(value) { | ||||
|       validator (value) { | ||||
|         return value >= 0 && value <= 1 | ||||
|       } | ||||
|     } | ||||
| @@ -145,7 +145,7 @@ export default { | ||||
|   components: { | ||||
|     Resizer | ||||
|   }, | ||||
|   data() { | ||||
|   data () { | ||||
|     return { | ||||
|       visible: false, | ||||
|  | ||||
| @@ -182,7 +182,7 @@ export default { | ||||
|      * inside `setTimeout` and `$nextTick`, after the DOM changes. | ||||
|      * This fixes `$refs.modal` `undefined` bug (fixes #15) | ||||
|      */ | ||||
|     visible(value) { | ||||
|     visible (value) { | ||||
|       if (value) { | ||||
|         this.visibility.overlay = true | ||||
|  | ||||
| @@ -206,13 +206,13 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|   created () { | ||||
|     this.setInitialSize() | ||||
|   }, | ||||
|   /** | ||||
|    * Sets global listeners | ||||
|    */ | ||||
|   beforeMount() { | ||||
|   beforeMount () { | ||||
|     Modal.event.$on('toggle', (name, state, params) => { | ||||
|       if (name === this.name) { | ||||
|         if (typeof state === 'undefined') { | ||||
| @@ -247,7 +247,7 @@ export default { | ||||
|        * simply stay at its initial height (won't crash). | ||||
|        * (Provide polyfill to support IE < 11) | ||||
|        */ | ||||
|       const MutationObserver = (function() { | ||||
|       const MutationObserver = (function () { | ||||
|         const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms'] | ||||
|  | ||||
|         for (let i = 0; i < prefixes.length; i++) { | ||||
| @@ -274,7 +274,7 @@ export default { | ||||
|   /** | ||||
|    * Removes "resize" window listener | ||||
|    */ | ||||
|   beforeDestroy() { | ||||
|   beforeDestroy () { | ||||
|     window.removeEventListener('resize', this.onWindowResize) | ||||
|  | ||||
|     if (this.clickToClose) { | ||||
| @@ -285,14 +285,14 @@ export default { | ||||
|     /** | ||||
|      * Returns true if height is set to "auto" | ||||
|      */ | ||||
|     isAutoHeight() { | ||||
|     isAutoHeight () { | ||||
|       return this.modal.heightType === 'auto' | ||||
|     }, | ||||
|     /** | ||||
|      * Calculates and returns modal position based on the | ||||
|      * pivots, window size and modal size | ||||
|      */ | ||||
|     position() { | ||||
|     position () { | ||||
|       const { | ||||
|         window, | ||||
|         shift, | ||||
| @@ -317,7 +317,7 @@ export default { | ||||
|      * Returns pixel width (if set with %) and makes sure that modal size | ||||
|      * fits the window | ||||
|      */ | ||||
|     trueModalWidth() { | ||||
|     trueModalWidth () { | ||||
|       const { window, modal, adaptive, minWidth, maxWidth } = this | ||||
|  | ||||
|       const value = | ||||
| @@ -333,7 +333,7 @@ export default { | ||||
|      * | ||||
|      * Returns modal.renderedHeight if height set as "auto" | ||||
|      */ | ||||
|     trueModalHeight() { | ||||
|     trueModalHeight () { | ||||
|       const { window, modal, isAutoHeight, adaptive, maxHeight } = this | ||||
|  | ||||
|       const value = | ||||
| @@ -353,7 +353,7 @@ export default { | ||||
|     /** | ||||
|      * Returns class list for screen overlay (modal background) | ||||
|      */ | ||||
|     overlayClass() { | ||||
|     overlayClass () { | ||||
|       return { | ||||
|         'v--modal-overlay': true, | ||||
|         scrollable: this.scrollable && this.isAutoHeight | ||||
| @@ -362,13 +362,13 @@ export default { | ||||
|     /** | ||||
|      * Returns class list for modal itself | ||||
|      */ | ||||
|     modalClass() { | ||||
|     modalClass () { | ||||
|       return ['v--modal-box', this.classes] | ||||
|     }, | ||||
|     /** | ||||
|      * CSS styles for position and size of the modal | ||||
|      */ | ||||
|     modalStyle() { | ||||
|     modalStyle () { | ||||
|       return { | ||||
|         top: this.position.top + 'px', | ||||
|         left: this.position.left + 'px', | ||||
| @@ -383,7 +383,7 @@ export default { | ||||
|      * if "reset" flag is set to true - this function will be called | ||||
|      * every time "beforeOpen" is triggered | ||||
|      */ | ||||
|     setInitialSize() { | ||||
|     setInitialSize () { | ||||
|       const { modal } = this | ||||
|       const width = parseNumber(this.width) | ||||
|       const height = parseNumber(this.height) | ||||
| @@ -394,13 +394,13 @@ export default { | ||||
|       modal.heightType = height.type | ||||
|     }, | ||||
|  | ||||
|     onEscapeKeyUp(event) { | ||||
|     onEscapeKeyUp (event) { | ||||
|       if (event.which === 27 && this.visible) { | ||||
|         this.$modal.hide(this.name) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     onWindowResize() { | ||||
|     onWindowResize () { | ||||
|       this.window.width = window.innerWidth | ||||
|       this.window.height = window.innerHeight | ||||
|     }, | ||||
| @@ -408,7 +408,7 @@ export default { | ||||
|     /** | ||||
|      * Generates event object | ||||
|      */ | ||||
|     genEventObject(params) { | ||||
|     genEventObject (params) { | ||||
|       const eventData = { | ||||
|         name: this.name, | ||||
|         timestamp: Date.now(), | ||||
| @@ -421,7 +421,7 @@ export default { | ||||
|     /** | ||||
|      * Event handler which is triggered on modal resize | ||||
|      */ | ||||
|     onModalResize(event) { | ||||
|     onModalResize (event) { | ||||
|       this.modal.widthType = 'px' | ||||
|       this.modal.width = event.size.width | ||||
|  | ||||
| @@ -438,7 +438,7 @@ export default { | ||||
|      * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here, | ||||
|      * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`. | ||||
|      */ | ||||
|     toggle(state, params) { | ||||
|     toggle (state, params) { | ||||
|       const { reset, scrollable, visible } = this | ||||
|       if (visible === state) return | ||||
|       const beforeEventName = visible ? 'before-close' : 'before-open' | ||||
| @@ -484,7 +484,7 @@ export default { | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     getDraggableElement() { | ||||
|     getDraggableElement () { | ||||
|       var selector = | ||||
|         typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable | ||||
|  | ||||
| @@ -499,13 +499,13 @@ export default { | ||||
|     /** | ||||
|      * Event handler that is triggered when background overlay is clicked | ||||
|      */ | ||||
|     onBackgroundClick() { | ||||
|     onBackgroundClick () { | ||||
|       if (this.clickToClose) { | ||||
|         this.toggle(false) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     addDraggableListeners() { | ||||
|     addDraggableListeners () { | ||||
|       if (!this.draggable) { | ||||
|         return | ||||
|       } | ||||
| @@ -570,7 +570,7 @@ export default { | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     removeDraggableListeners() { | ||||
|     removeDraggableListeners () { | ||||
|       //  console.log('removing draggable handlers') | ||||
|     }, | ||||
|  | ||||
| @@ -581,7 +581,7 @@ export default { | ||||
|      * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug. | ||||
|      * (fixes #15) | ||||
|      */ | ||||
|     callAfterEvent(state) { | ||||
|     callAfterEvent (state) { | ||||
|       if (state) { | ||||
|         this.connectObserver() | ||||
|       } else { | ||||
| @@ -600,7 +600,7 @@ export default { | ||||
|      * 1. modal opened | ||||
|      * 2. MutationObserver's observe callback | ||||
|      */ | ||||
|     updateRenderedHeight() { | ||||
|     updateRenderedHeight () { | ||||
|       if (this.$refs.modal) { | ||||
|         this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height | ||||
|       } | ||||
| @@ -610,7 +610,7 @@ export default { | ||||
|      * Start observing modal's DOM, if childList or subtree changes, | ||||
|      * the callback (registered in beforeMount) will be called. | ||||
|      */ | ||||
|     connectObserver() { | ||||
|     connectObserver () { | ||||
|       if (this.mutationObserver) { | ||||
|         this.mutationObserver.observe(this.$refs.modal, { | ||||
|           childList: true, | ||||
| @@ -623,7 +623,7 @@ export default { | ||||
|     /** | ||||
|      * Disconnects MutationObserver | ||||
|      */ | ||||
|     disconnectObserver() { | ||||
|     disconnectObserver () { | ||||
|       if (this.mutationObserver) { | ||||
|         this.mutationObserver.disconnect() | ||||
|       } | ||||
|   | ||||
| @@ -16,22 +16,22 @@ export default { | ||||
|       default: 0 | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|   data () { | ||||
|     return { | ||||
|       clicked: false, | ||||
|       size: {} | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|   mounted () { | ||||
|     this.$el.addEventListener('mousedown', this.start, false) | ||||
|   }, | ||||
|   computed: { | ||||
|     className() { | ||||
|     className () { | ||||
|       return { 'vue-modal-resizer': true, clicked: this.clicked } | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     start(event) { | ||||
|     start (event) { | ||||
|       this.clicked = true | ||||
|  | ||||
|       window.addEventListener('mousemove', this.mousemove, false) | ||||
| @@ -40,7 +40,7 @@ export default { | ||||
|       event.stopPropagation() | ||||
|       event.preventDefault() | ||||
|     }, | ||||
|     stop() { | ||||
|     stop () { | ||||
|       this.clicked = false | ||||
|  | ||||
|       window.removeEventListener('mousemove', this.mousemove, false) | ||||
| @@ -51,10 +51,10 @@ export default { | ||||
|         size: this.size | ||||
|       }) | ||||
|     }, | ||||
|     mousemove(event) { | ||||
|     mousemove (event) { | ||||
|       this.resize(event) | ||||
|     }, | ||||
|     resize(event) { | ||||
|     resize (event) { | ||||
|       var el = this.$el.parentElement | ||||
|  | ||||
|       if (el) { | ||||
|   | ||||
| @@ -4,7 +4,7 @@ import Dialog from './Dialog.vue' | ||||
| const defaultComponentName = 'modal' | ||||
|  | ||||
| const Plugin = { | ||||
|   install(Vue, options = {}) { | ||||
|   install (Vue, options = {}) { | ||||
|     /** | ||||
|      * Makes sure that plugin can be insstalled only once | ||||
|      */ | ||||
| @@ -18,15 +18,15 @@ const Plugin = { | ||||
|      * Plugin API | ||||
|      */ | ||||
|     Vue.prototype.$modal = { | ||||
|       show(name, params) { | ||||
|       show (name, params) { | ||||
|         Plugin.event.$emit('toggle', name, true, params) | ||||
|       }, | ||||
|  | ||||
|       hide(name, params) { | ||||
|       hide (name, params) { | ||||
|         Plugin.event.$emit('toggle', name, false, params) | ||||
|       }, | ||||
|  | ||||
|       toggle(name, params) { | ||||
|       toggle (name, params) { | ||||
|         Plugin.event.$emit('toggle', name, undefined, params) | ||||
|       } | ||||
|     } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user