From 2be134436f0d82bce6c43e06bfd4b2b440e5a252 Mon Sep 17 00:00:00 2001
From: yev <yev.vlasenko@gmail.com>
Date: Wed, 27 Dec 2017 20:34:51 +0000
Subject: [PATCH 1/3] extracting css

---
 .prettierrc                                   |    5 +
 build/webpack.srr-no-css.config.js            |   24 +
 ...server.config.js => webpack.ssr.config.js} |    0
 package.json                                  |    5 +-
 src/Modal.vue                                 | 1028 +++++++++--------
 5 files changed, 549 insertions(+), 513 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 build/webpack.srr-no-css.config.js
 rename build/{webpack.server.config.js => webpack.ssr.config.js} (100%)

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..33075ad
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false
+}
diff --git a/build/webpack.srr-no-css.config.js b/build/webpack.srr-no-css.config.js
new file mode 100644
index 0000000..f3d516b
--- /dev/null
+++ b/build/webpack.srr-no-css.config.js
@@ -0,0 +1,24 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+const base = require('./webpack.srr.config')
+
+module.exports = merge(base, {
+  plugins: [new ExtractTextPlugin('styles.css')],
+  output: {
+    filename: 'ssr.pure.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
+      }
+    ]
+  }
+})
diff --git a/build/webpack.server.config.js b/build/webpack.ssr.config.js
similarity index 100%
rename from build/webpack.server.config.js
rename to build/webpack.ssr.config.js
diff --git a/package.json b/package.json
index 11a198b..9c2b84f 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,11 @@
   },
   "scripts": {
     "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
-    "build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules",
+    "build:srr": "webpack --config ./build/webpack.srr.config.js --progress --hide-modules",
+    "build:srr-no-css": "webpack --config ./build/webpack.srr-no-css.config.js --progress --hide-modules",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
-    "build": "npm run lint && npm run unit && npm run build:client && npm run build:server"
+    "build": "npm run lint && npm run unit && npm run build:client && npm run build:srr"
   },
   "license": "MIT",
   "devDependencies": {
diff --git a/src/Modal.vue b/src/Modal.vue
index 6115c6c..60b937c 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -28,673 +28,679 @@
   </transition>
 </template>
 <script>
-  import Modal       from './index'
-  import Resizer     from './Resizer.vue'
-  import { inRange } from './util'
-  import parseNumber from './parser'
+import Modal from "./index";
+import Resizer from "./Resizer.vue";
+import { inRange } from "./util";
+import parseNumber from "./parser";
 
-  export default {
-    name: 'VueJsModal',
-    props: {
-      name: {
-        required: true,
-        type: String
-      },
-      delay: {
-        type: Number,
-        default: 0
-      },
-      resizable: {
-        type: Boolean,
-        default: false
-      },
-      adaptive: {
-        type: Boolean,
-        default: false
-      },
-      draggable: {
-        type: [Boolean, String],
-        default: false
-      },
-      scrollable: {
-        type: Boolean,
-        default: false
-      },
-      reset: {
-        type: Boolean,
-        default: false
-      },
-      transition: {
-        type: String
-      },
-      clickToClose: {
-        type: Boolean,
-        default: true
-      },
-      classes: {
-        type: [String, Array],
-        default: 'v--modal'
-      },
-      minWidth: {
-        type: Number,
-        default: 0,
-        validator (value) {
-          return value >= 0
-        }
-      },
-      minHeight: {
-        type: Number,
-        default: 0,
-        validator (value) {
-          return value >= 0
-        }
-      },
-      width: {
-        type: [Number, String],
-        default: 600,
-        validator (value) {
-          if (typeof value === 'string') {
-            let width = parseNumber(value)
-            return (width.type === '%' || width.type === 'px') &&
-              width.value > 0
-          }
-
-          return value >= 0
-        }
-      },
-      height: {
-        type: [Number, String],
-        default: 300,
-        validator (value) {
-          if (typeof value === 'string') {
-            if (value === 'auto') {
-              return true
-            }
-
-            let height = parseNumber(value)
-            return (height.type === '%' || height.type === 'px') &&
-              height.value > 0
-          }
-
-          return value >= 0
-        }
-      },
-      pivotX: {
-        type: Number,
-        default: 0.5,
-        validator (value) {
-          return value >= 0 && value <= 1
-        }
-      },
-      pivotY: {
-        type: Number,
-        default: 0.5,
-        validator (value) {
-          return value >= 0 && value <= 1
-        }
+export default {
+  name: "VueJsModal",
+  props: {
+    name: {
+      required: true,
+      type: String
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    resizable: {
+      type: Boolean,
+      default: false
+    },
+    adaptive: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: [Boolean, String],
+      default: false
+    },
+    scrollable: {
+      type: Boolean,
+      default: false
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    transition: {
+      type: String
+    },
+    clickToClose: {
+      type: Boolean,
+      default: true
+    },
+    classes: {
+      type: [String, Array],
+      default: "v--modal"
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0;
       }
     },
-    components: {
-      Resizer
-    },
-    data () {
-      return {
-        visible: false,
-
-        visibility: {
-          modal: false,
-          overlay: false
-        },
-
-        shift: {
-          left: 0,
-          top: 0
-        },
-
-        modal: {
-          width: 0,
-          widthType: 'px',
-          height: 0,
-          heightType: 'px',
-          renderedHeight: 0
-        },
-
-        window: {
-          width: 0,
-          height: 0
-        },
-
-        mutationObserver: null
+    minHeight: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0;
       }
     },
-    watch: {
-      /**
+    width: {
+      type: [Number, String],
+      default: 600,
+      validator(value) {
+        if (typeof value === "string") {
+          let width = parseNumber(value);
+          return (width.type === "%" || width.type === "px") && width.value > 0;
+        }
+
+        return value >= 0;
+      }
+    },
+    height: {
+      type: [Number, String],
+      default: 300,
+      validator(value) {
+        if (typeof value === "string") {
+          if (value === "auto") {
+            return true;
+          }
+
+          let height = parseNumber(value);
+          return (
+            (height.type === "%" || height.type === "px") && height.value > 0
+          );
+        }
+
+        return value >= 0;
+      }
+    },
+    pivotX: {
+      type: Number,
+      default: 0.5,
+      validator(value) {
+        return value >= 0 && value <= 1;
+      }
+    },
+    pivotY: {
+      type: Number,
+      default: 0.5,
+      validator(value) {
+        return value >= 0 && value <= 1;
+      }
+    }
+  },
+  components: {
+    Resizer
+  },
+  data() {
+    return {
+      visible: false,
+
+      visibility: {
+        modal: false,
+        overlay: false
+      },
+
+      shift: {
+        left: 0,
+        top: 0
+      },
+
+      modal: {
+        width: 0,
+        widthType: "px",
+        height: 0,
+        heightType: "px",
+        renderedHeight: 0
+      },
+
+      window: {
+        width: 0,
+        height: 0
+      },
+
+      mutationObserver: null
+    };
+  },
+  watch: {
+    /**
        * Sets the visibility of overlay and modal.
        * Events 'opened' and 'closed' is called here
        * inside `setTimeout` and `$nextTick`, after the DOM changes.
        * This fixes `$refs.modal` `undefined` bug (fixes #15)
        */
-      visible (value) {
-        if (value) {
-          this.visibility.overlay = true
+    visible(value) {
+      if (value) {
+        this.visibility.overlay = true;
 
-          setTimeout(() => {
-            this.visibility.modal = true
-            this.$nextTick(() => {
-              this.addDraggableListeners()
-              this.callAfterEvent(true)
-            })
-          }, this.delay)
-        } else {
-          this.visibility.modal = false
+        setTimeout(() => {
+          this.visibility.modal = true;
+          this.$nextTick(() => {
+            this.addDraggableListeners();
+            this.callAfterEvent(true);
+          });
+        }, this.delay);
+      } else {
+        this.visibility.modal = false;
 
-          setTimeout(() => {
-            this.visibility.overlay = false
-            this.$nextTick(() => {
-              this.removeDraggableListeners()
-              this.callAfterEvent(false)
-            })
-          }, this.delay)
-        }
+        setTimeout(() => {
+          this.visibility.overlay = false;
+          this.$nextTick(() => {
+            this.removeDraggableListeners();
+            this.callAfterEvent(false);
+          });
+        }, this.delay);
       }
-    },
-    created () {
-      this.setInitialSize()
-    },
-    /**
+    }
+  },
+  created() {
+    this.setInitialSize();
+  },
+  /**
      * Sets global listeners
      */
-    beforeMount () {
-      Modal.event.$on('toggle', (name, state, params) => {
-        if (name === this.name) {
-          if (typeof state === 'undefined') {
-            state = !this.visible
-          }
-
-          this.toggle(state, params)
+  beforeMount() {
+    Modal.event.$on("toggle", (name, state, params) => {
+      if (name === this.name) {
+        if (typeof state === "undefined") {
+          state = !this.visible;
         }
-      })
 
-      window.addEventListener('resize', this.onWindowResize)
-      this.onWindowResize()
-      /**
+        this.toggle(state, params);
+      }
+    });
+
+    window.addEventListener("resize", this.onWindowResize);
+    this.onWindowResize();
+    /**
        * Making sure that autoHeight is enabled when using "scrollable"
        */
-      if (this.scrollable && !this.isAutoHeight) {
-        console.warn(`Modal "${this.name}" has scrollable flag set to true ` +
-          `but height is not "auto" (${this.height})`)
-      }
-      /**
+    if (this.scrollable && !this.isAutoHeight) {
+      console.warn(
+        `Modal "${this.name}" has scrollable flag set to true ` +
+          `but height is not "auto" (${this.height})`
+      );
+    }
+    /**
        * Only observe when using height: 'auto'
        * The callback will be called when modal DOM changes,
        * this is for updating the `top` attribute for height 'auto' modals.
        */
-      if (this.isAutoHeight) {
-        /**
+    if (this.isAutoHeight) {
+      /**
          * MutationObserver feature detection:
          * Detects if MutationObserver is available, return false if not.
          * No polyfill is provided here, so height 'auto' recalculation will
          * simply stay at its initial height (won't crash).
          * (Provide polyfill to support IE < 11)
          */
-        const MutationObserver = (function () {
-          const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
+      const MutationObserver = (function() {
+        const prefixes = ["", "WebKit", "Moz", "O", "Ms"];
 
-          for (let i = 0; i < prefixes.length; i++) {
-            let name = prefixes[i] + 'MutationObserver'
+        for (let i = 0; i < prefixes.length; i++) {
+          let name = prefixes[i] + "MutationObserver";
 
-            if (name in window) {
-              return window[name]
-            }
+          if (name in window) {
+            return window[name];
           }
-          return false
-        }())
-
-        if (MutationObserver) {
-          this.mutationObserver = new MutationObserver(mutations => {
-            this.updateRenderedHeight()
-          })
         }
-      }
+        return false;
+      })();
 
-      if (this.clickToClose) {
-        window.addEventListener('keyup', this.onEscapeKeyUp)
+      if (MutationObserver) {
+        this.mutationObserver = new MutationObserver(mutations => {
+          this.updateRenderedHeight();
+        });
       }
-    },
-    /**
+    }
+
+    if (this.clickToClose) {
+      window.addEventListener("keyup", this.onEscapeKeyUp);
+    }
+  },
+  /**
      * Removes "resize" window listener
      */
-    beforeDestroy () {
-      window.removeEventListener('resize', this.onWindowResize)
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onWindowResize);
 
-      if (this.clickToClose) {
-        window.removeEventListener('keyup', this.onEscapeKeyUp)
-      }
-    },
-    computed: {
-      /**
+    if (this.clickToClose) {
+      window.removeEventListener("keyup", this.onEscapeKeyUp);
+    }
+  },
+  computed: {
+    /**
        * Returns true if height is set to "auto"
        */
-      isAutoHeight () {
-        return this.modal.heightType === 'auto'
-      },
-      /**
+    isAutoHeight() {
+      return this.modal.heightType === "auto";
+    },
+    /**
        * Calculates and returns modal position based on the
        * pivots, window size and modal size
        */
-      position () {
-        const { window, shift, pivotX, pivotY,
-          trueModalWidth, trueModalHeight } = this
+    position() {
+      const {
+        window,
+        shift,
+        pivotX,
+        pivotY,
+        trueModalWidth,
+        trueModalHeight
+      } = this;
 
-        const maxLeft = window.width - trueModalWidth
-        const maxTop = window.height - trueModalHeight
+      const maxLeft = window.width - trueModalWidth;
+      const maxTop = window.height - trueModalHeight;
 
-        const left = shift.left + pivotX * maxLeft
-        const top = shift.top + pivotY * maxTop
+      const left = shift.left + pivotX * maxLeft;
+      const top = shift.top + pivotY * maxTop;
 
-        return {
-          left: inRange(0, maxLeft, left),
-          top: inRange(0, maxTop, top)
-        }
-      },
-      /**
+      return {
+        left: inRange(0, maxLeft, left),
+        top: inRange(0, maxTop, top)
+      };
+    },
+    /**
        * Returns pixel width (if set with %) and makes sure that modal size
        * fits the window
        */
-      trueModalWidth () {
-        const { window, modal, adaptive, minWidth } = this
+    trueModalWidth() {
+      const { window, modal, adaptive, minWidth } = this;
 
-        const value = modal.widthType === '%'
+      const value =
+        modal.widthType === "%"
           ? window.width / 100 * modal.width
-          : modal.width
+          : modal.width;
 
-        return adaptive
-          ? inRange(minWidth, window.width, value)
-          : value
-      },
-      /**
+      return adaptive ? inRange(minWidth, window.width, value) : value;
+    },
+    /**
        * Returns pixel height (if set with %) and makes sure that modal size
        * fits the window.
        *
        * Returns modal.renderedHeight if height set as "auto"
        */
-      trueModalHeight () {
-        const { window, modal, isAutoHeight, adaptive } = this
+    trueModalHeight() {
+      const { window, modal, isAutoHeight, adaptive } = this;
 
-        const value = (modal.heightType === '%')
+      const value =
+        modal.heightType === "%"
           ? window.height / 100 * modal.height
-          : modal.height
+          : modal.height;
 
-        if (isAutoHeight) {
-          // use renderedHeight when height 'auto'
-          return this.modal.renderedHeight
-        }
+      if (isAutoHeight) {
+        // use renderedHeight when height 'auto'
+        return this.modal.renderedHeight;
+      }
 
-        return adaptive
-          ? inRange(this.minHeight, this.window.height, value)
-          : value
-      },
-      /**
+      return adaptive
+        ? inRange(this.minHeight, this.window.height, value)
+        : value;
+    },
+    /**
        * Returns class list for screen overlay (modal background)
        */
-      overlayClass () {
-        return {
-          'v--modal-overlay': true,
-          'scrollable': this.scrollable && this.isAutoHeight
-        }
-      },
-      /**
+    overlayClass() {
+      return {
+        "v--modal-overlay": true,
+        scrollable: this.scrollable && this.isAutoHeight
+      };
+    },
+    /**
        * Returns class list for modal itself
        */
-      modalClass () {
-        return ['v--modal-box', this.classes]
-      },
-      /**
+    modalClass() {
+      return ["v--modal-box", this.classes];
+    },
+    /**
        * CSS styles for position and size of the modal
        */
-      modalStyle () {
-        return {
-          top: this.position.top + 'px',
-          left: this.position.left + 'px',
-          width: this.trueModalWidth + 'px',
-          height: this.isAutoHeight
-            ? 'auto'
-            : (this.trueModalHeight + 'px')
-        }
-      }
-    },
-    methods: {
-      /**
+    modalStyle() {
+      return {
+        top: this.position.top + "px",
+        left: this.position.left + "px",
+        width: this.trueModalWidth + "px",
+        height: this.isAutoHeight ? "auto" : this.trueModalHeight + "px"
+      };
+    }
+  },
+  methods: {
+    /**
        * Initializes modal's size & position,
        * if "reset" flag is set to true - this function will be called
        * every time "beforeOpen" is triggered
        */
-      setInitialSize () {
-        let { modal } = this
-        let width = parseNumber(this.width)
-        let height = parseNumber(this.height)
+    setInitialSize() {
+      let { modal } = this;
+      let width = parseNumber(this.width);
+      let height = parseNumber(this.height);
 
-        modal.width = width.value
-        modal.widthType = width.type
-        modal.height = height.value
-        modal.heightType = height.type
-      },
+      modal.width = width.value;
+      modal.widthType = width.type;
+      modal.height = height.value;
+      modal.heightType = height.type;
+    },
 
-      onEscapeKeyUp (event) {
-        if (event.which === 27 && this.visible) {
-          this.$modal.hide(this.name)
-        }
-      },
+    onEscapeKeyUp(event) {
+      if (event.which === 27 && this.visible) {
+        this.$modal.hide(this.name);
+      }
+    },
 
-      onWindowResize () {
-        this.window.width = window.innerWidth
-        this.window.height = window.innerHeight
-      },
+    onWindowResize() {
+      this.window.width = window.innerWidth;
+      this.window.height = window.innerHeight;
+    },
 
-      /**
+    /**
        * Generates event object
        */
-      genEventObject (params) {
-        var eventData = {
-          name: this.name,
-          timestamp: Date.now(),
-          canceled: false,
-          ref: this.$refs.modal
-        }
+    genEventObject(params) {
+      var eventData = {
+        name: this.name,
+        timestamp: Date.now(),
+        canceled: false,
+        ref: this.$refs.modal
+      };
 
-        return Object.assign(eventData, params || {})
-      },
-      /**
+      return Object.assign(eventData, params || {});
+    },
+    /**
        * Event handler which is triggered on modal resize
        */
-      onModalResize (event) {
-        this.modal.widthType = 'px'
-        this.modal.width = event.size.width
+    onModalResize(event) {
+      this.modal.widthType = "px";
+      this.modal.width = event.size.width;
 
-        this.modal.heightType = 'px'
-        this.modal.height = event.size.height
+      this.modal.heightType = "px";
+      this.modal.height = event.size.height;
 
-        const { size } = this.modal
-        const resizeEvent = this.genEventObject({ size })
+      const { size } = this.modal;
+      const resizeEvent = this.genEventObject({ size });
 
-        this.$emit('resize', resizeEvent)
-      },
-      /**
+      this.$emit("resize", resizeEvent);
+    },
+    /**
        * Event handler which is triggered on $modal.show and $modal.hight
        * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
        * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
        */
-      toggle (state, params) {
-        const { reset, scrollable, visible } = this
+    toggle(state, params) {
+      const { reset, scrollable, visible } = this;
 
-        const beforeEventName = visible
-          ? 'before-close'
-          : 'before-open'
+      const beforeEventName = visible ? "before-close" : "before-open";
 
-        if (beforeEventName === 'before-open') {
-          /**
+      if (beforeEventName === "before-open") {
+        /**
            * Need to unfocus previously focused element, otherwise
            * all keypress events (ESC press, for example) will trigger on that element.
            */
-          if (document.activeElement) {
-            document.activeElement.blur()
-          }
-
-          if (reset) {
-            this.setInitialSize()
-
-            this.shift.left = 0
-            this.shift.top = 0
-          }
-
-          if (scrollable) {
-            document.body.classList.add('v--modal-block-scroll')
-          }
-        } else {
-          if (scrollable) {
-            document.body.classList.remove('v--modal-block-scroll')
-          }
+        if (document.activeElement) {
+          document.activeElement.blur();
         }
 
-        let stopEventExecution = false
+        if (reset) {
+          this.setInitialSize();
 
-        const stop = () => {
-          stopEventExecution = true
+          this.shift.left = 0;
+          this.shift.top = 0;
         }
 
-        const beforeEvent = this.genEventObject({ stop, state, params })
-
-        this.$emit(beforeEventName, beforeEvent)
-
-        if (!stopEventExecution) {
-          this.visible = state
-          // after events are called in `watch.visible`
+        if (scrollable) {
+          document.body.classList.add("v--modal-block-scroll");
         }
-      },
-
-      getDraggableElement () {
-        var selector = typeof this.draggable !== 'string'
-          ? '.v--modal-box'
-          : this.draggable
-
-        if (selector) {
-          var handler = this.$refs.overlay.querySelector(selector)
-          if (handler) {
-            return handler
-          }
+      } else {
+        if (scrollable) {
+          document.body.classList.remove("v--modal-block-scroll");
         }
-      },
-      /**
+      }
+
+      let stopEventExecution = false;
+
+      const stop = () => {
+        stopEventExecution = true;
+      };
+
+      const beforeEvent = this.genEventObject({ stop, state, params });
+
+      this.$emit(beforeEventName, beforeEvent);
+
+      if (!stopEventExecution) {
+        this.visible = state;
+        // after events are called in `watch.visible`
+      }
+    },
+
+    getDraggableElement() {
+      var selector =
+        typeof this.draggable !== "string" ? ".v--modal-box" : this.draggable;
+
+      if (selector) {
+        var handler = this.$refs.overlay.querySelector(selector);
+        if (handler) {
+          return handler;
+        }
+      }
+    },
+    /**
        * Event handler that is triggered when background overlay is clicked
        */
-      onBackgroundClick () {
-        if (this.clickToClose) {
-          this.toggle(false)
-        }
-      },
+    onBackgroundClick() {
+      if (this.clickToClose) {
+        this.toggle(false);
+      }
+    },
 
-      addDraggableListeners () {
-        if (!this.draggable) {
-          return
-        }
+    addDraggableListeners() {
+      if (!this.draggable) {
+        return;
+      }
 
-        let dragger = this.getDraggableElement()
+      let dragger = this.getDraggableElement();
 
-        if (dragger) {
-          let startX = 0
-          let startY = 0
-          let cachedShiftX = 0
-          let cachedShiftY = 0
+      if (dragger) {
+        let startX = 0;
+        let startY = 0;
+        let cachedShiftX = 0;
+        let cachedShiftY = 0;
 
-          let getPosition = (event) => {
-            return event.touches && event.touches.length > 0
-              ? event.touches[0]
-              : event
+        let getPosition = event => {
+          return event.touches && event.touches.length > 0
+            ? event.touches[0]
+            : event;
+        };
+
+        let mousedown = event => {
+          let target = event.target;
+
+          if (target && target.nodeName === "INPUT") {
+            return;
           }
 
-          let mousedown = (event) => {
-            let target = event.target
+          let { clientX, clientY } = getPosition(event);
 
-            if (target && target.nodeName === 'INPUT') {
-              return
-            }
+          document.addEventListener("mousemove", mousemove);
+          document.addEventListener("mouseup", mouseup);
 
-            let { clientX, clientY } = getPosition(event)
+          document.addEventListener("touchmove", mousemove);
+          document.addEventListener("touchend", mouseup);
 
-            document.addEventListener('mousemove', mousemove)
-            document.addEventListener('mouseup', mouseup)
-
-            document.addEventListener('touchmove', mousemove)
-            document.addEventListener('touchend', mouseup)
-
-            startX = clientX
-            startY = clientY
-            cachedShiftX = this.shift.left
-            cachedShiftY = this.shift.top
+          startX = clientX;
+          startY = clientY;
+          cachedShiftX = this.shift.left;
+          cachedShiftY = this.shift.top;
 
           //  event.preventDefault()
-          }
+        };
 
-          let mousemove = (event) => {
-            let { clientX, clientY } = getPosition(event)
+        let mousemove = event => {
+          let { clientX, clientY } = getPosition(event);
 
-            this.shift.left = cachedShiftX + clientX - startX
-            this.shift.top = cachedShiftY + clientY - startY
-            event.preventDefault()
-          }
+          this.shift.left = cachedShiftX + clientX - startX;
+          this.shift.top = cachedShiftY + clientY - startY;
+          event.preventDefault();
+        };
 
-          let mouseup = (event) => {
-            document.removeEventListener('mousemove', mousemove)
-            document.removeEventListener('mouseup', mouseup)
+        let mouseup = event => {
+          document.removeEventListener("mousemove", mousemove);
+          document.removeEventListener("mouseup", mouseup);
 
-            document.removeEventListener('touchmove', mousemove)
-            document.removeEventListener('touchend', mouseup)
+          document.removeEventListener("touchmove", mousemove);
+          document.removeEventListener("touchend", mouseup);
 
-            event.preventDefault()
-          }
+          event.preventDefault();
+        };
 
-          dragger.addEventListener('mousedown', mousedown)
-          dragger.addEventListener('touchstart', mousedown)
-        }
-      },
+        dragger.addEventListener("mousedown", mousedown);
+        dragger.addEventListener("touchstart", mousedown);
+      }
+    },
 
-      removeDraggableListeners () {
+    removeDraggableListeners() {
       //  console.log('removing draggable handlers')
-      },
+    },
 
-      /**
+    /**
        * 'opened' and 'closed' events are `$emit`ed here.
        * This is called in watch.visible.
        * Because modal DOM updates are async,
        * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
        * (fixes #15)
        */
-      callAfterEvent (state) {
-        if (state) {
-          this.connectObserver()
-        } else {
-          this.disconnectObserver()
-        }
+    callAfterEvent(state) {
+      if (state) {
+        this.connectObserver();
+      } else {
+        this.disconnectObserver();
+      }
 
-        const eventName = state ? 'opened' : 'closed'
-        const event = this.genEventObject({ state })
+      const eventName = state ? "opened" : "closed";
+      const event = this.genEventObject({ state });
 
-        this.$emit(eventName, event)
-      },
+      this.$emit(eventName, event);
+    },
 
-      /**
+    /**
        * Update $data.modal.renderedHeight using getBoundingClientRect.
        * This method is called when:
        * 1. modal opened
        * 2. MutationObserver's observe callback
        */
-      updateRenderedHeight () {
-        if (this.$refs.modal) {
-          this.modal.renderedHeight = this.$refs.modal
-            .getBoundingClientRect().height
-        }
-      },
+    updateRenderedHeight() {
+      if (this.$refs.modal) {
+        this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height;
+      }
+    },
 
-      /**
+    /**
        * Start observing modal's DOM, if childList or subtree changes,
        * the callback (registered in beforeMount) will be called.
        */
-      connectObserver () {
-        if (this.mutationObserver) {
-          this.mutationObserver.observe(this.$refs.modal, {
-            childList: true,
-            attributes: true,
-            subtree: true
-          })
-        }
-      },
+    connectObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.observe(this.$refs.modal, {
+          childList: true,
+          attributes: true,
+          subtree: true
+        });
+      }
+    },
 
-      /**
+    /**
        * Disconnects MutationObserver
        */
-      disconnectObserver () {
-        if (this.mutationObserver) {
-          this.mutationObserver.disconnect()
-        }
+    disconnectObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
       }
     }
   }
+};
 </script>
 <style>
-  .v--modal-block-scroll {
-    overflow: hidden;
-    position: fixed;
-    width: 100vw;
-  }
+.v--modal-block-scroll {
+  overflow: hidden;
+  position: fixed;
+  width: 100vw;
+}
 
-  .v--modal-overlay {
-    position: fixed;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.2);
-    z-index: 999;
-    opacity: 1;
-  }
+.v--modal-overlay {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  opacity: 1;
+}
 
-  .v--modal-overlay.scrollable {
-    height: 100%;
-    min-height: 100vh;
-    overflow-y: auto;
-    padding-bottom: 10px;
-    -webkit-overflow-scrolling: touch;
-  }
+.v--modal-overlay.scrollable {
+  height: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 10px;
+  -webkit-overflow-scrolling: touch;
+}
 
-  .v--modal-overlay .v--modal-box {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
+.v--modal-overlay .v--modal-box {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
 
-  .v--modal-overlay.scrollable .v--modal-box {
-    margin-bottom: 2px;
-    /* transition: top 0.2s ease; */
-  }
+.v--modal-overlay.scrollable .v--modal-box {
+  margin-bottom: 2px;
+  /* transition: top 0.2s ease; */
+}
 
-  .v--modal {
-    background-color: white;
-    text-align: left;
-    border-radius: 3px;
-    box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
-    padding: 0;
-  }
+.v--modal {
+  background-color: white;
+  text-align: left;
+  border-radius: 3px;
+  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);
+  padding: 0;
+}
 
-  .v--modal.v--modal-fullscreen {
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    left: 0;
-    top: 0;
-  }
+.v--modal.v--modal-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  left: 0;
+  top: 0;
+}
 
-  .v--modal-top-right {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
+.v--modal-top-right {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 
-  .overlay-fade-enter-active, .overlay-fade-leave-active {
-    transition: all 0.2s;
-  }
+.overlay-fade-enter-active,
+.overlay-fade-leave-active {
+  transition: all 0.2s;
+}
 
-  .overlay-fade-enter, .overlay-fade-leave-active {
-    opacity: 0;
-  }
+.overlay-fade-enter,
+.overlay-fade-leave-active {
+  opacity: 0;
+}
 
-  .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {
-    transition: all 0.4s;
-  }
+.nice-modal-fade-enter-active,
+.nice-modal-fade-leave-active {
+  transition: all 0.4s;
+}
 
-  .nice-modal-fade-enter, .nice-modal-fade-leave-active {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
+.nice-modal-fade-enter,
+.nice-modal-fade-leave-active {
+  opacity: 0;
+  transform: translateY(-20px);
+}
 </style>

From d302df7310f042aca0a922a469c0389e090efb57 Mon Sep 17 00:00:00 2001
From: yev <yev.vlasenko@gmail.com>
Date: Wed, 27 Dec 2017 20:35:19 +0000
Subject: [PATCH 2/3] extracting css

---
 src/Modal.vue | 320 +++++++++++++++++++++++++-------------------------
 1 file changed, 159 insertions(+), 161 deletions(-)

diff --git a/src/Modal.vue b/src/Modal.vue
index 60b937c..69607cb 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -28,13 +28,13 @@
   </transition>
 </template>
 <script>
-import Modal from "./index";
-import Resizer from "./Resizer.vue";
-import { inRange } from "./util";
-import parseNumber from "./parser";
+import Modal from './index'
+import Resizer from './Resizer.vue'
+import { inRange } from './util'
+import parseNumber from './parser'
 
 export default {
-  name: "VueJsModal",
+  name: 'VueJsModal',
   props: {
     name: {
       required: true,
@@ -73,64 +73,64 @@ export default {
     },
     classes: {
       type: [String, Array],
-      default: "v--modal"
+      default: 'v--modal'
     },
     minWidth: {
       type: Number,
       default: 0,
       validator(value) {
-        return value >= 0;
+        return value >= 0
       }
     },
     minHeight: {
       type: Number,
       default: 0,
       validator(value) {
-        return value >= 0;
+        return value >= 0
       }
     },
     width: {
       type: [Number, String],
       default: 600,
       validator(value) {
-        if (typeof value === "string") {
-          let width = parseNumber(value);
-          return (width.type === "%" || width.type === "px") && width.value > 0;
+        if (typeof value === 'string') {
+          let width = parseNumber(value)
+          return (width.type === '%' || width.type === 'px') && width.value > 0
         }
 
-        return value >= 0;
+        return value >= 0
       }
     },
     height: {
       type: [Number, String],
       default: 300,
       validator(value) {
-        if (typeof value === "string") {
-          if (value === "auto") {
-            return true;
+        if (typeof value === 'string') {
+          if (value === 'auto') {
+            return true
           }
 
-          let height = parseNumber(value);
+          let height = parseNumber(value)
           return (
-            (height.type === "%" || height.type === "px") && height.value > 0
-          );
+            (height.type === '%' || height.type === 'px') && height.value > 0
+          )
         }
 
-        return value >= 0;
+        return value >= 0
       }
     },
     pivotX: {
       type: Number,
       default: 0.5,
       validator(value) {
-        return value >= 0 && value <= 1;
+        return value >= 0 && value <= 1
       }
     },
     pivotY: {
       type: Number,
       default: 0.5,
       validator(value) {
-        return value >= 0 && value <= 1;
+        return value >= 0 && value <= 1
       }
     }
   },
@@ -153,9 +153,9 @@ export default {
 
       modal: {
         width: 0,
-        widthType: "px",
+        widthType: 'px',
         height: 0,
-        heightType: "px",
+        heightType: 'px',
         renderedHeight: 0
       },
 
@@ -165,7 +165,7 @@ export default {
       },
 
       mutationObserver: null
-    };
+    }
   },
   watch: {
     /**
@@ -176,47 +176,47 @@ export default {
        */
     visible(value) {
       if (value) {
-        this.visibility.overlay = true;
+        this.visibility.overlay = true
 
         setTimeout(() => {
-          this.visibility.modal = true;
+          this.visibility.modal = true
           this.$nextTick(() => {
-            this.addDraggableListeners();
-            this.callAfterEvent(true);
-          });
-        }, this.delay);
+            this.addDraggableListeners()
+            this.callAfterEvent(true)
+          })
+        }, this.delay)
       } else {
-        this.visibility.modal = false;
+        this.visibility.modal = false
 
         setTimeout(() => {
-          this.visibility.overlay = false;
+          this.visibility.overlay = false
           this.$nextTick(() => {
-            this.removeDraggableListeners();
-            this.callAfterEvent(false);
-          });
-        }, this.delay);
+            this.removeDraggableListeners()
+            this.callAfterEvent(false)
+          })
+        }, this.delay)
       }
     }
   },
   created() {
-    this.setInitialSize();
+    this.setInitialSize()
   },
   /**
      * Sets global listeners
      */
   beforeMount() {
-    Modal.event.$on("toggle", (name, state, params) => {
+    Modal.event.$on('toggle', (name, state, params) => {
       if (name === this.name) {
-        if (typeof state === "undefined") {
-          state = !this.visible;
+        if (typeof state === 'undefined') {
+          state = !this.visible
         }
 
-        this.toggle(state, params);
+        this.toggle(state, params)
       }
-    });
+    })
 
-    window.addEventListener("resize", this.onWindowResize);
-    this.onWindowResize();
+    window.addEventListener('resize', this.onWindowResize)
+    this.onWindowResize()
     /**
        * Making sure that autoHeight is enabled when using "scrollable"
        */
@@ -224,7 +224,7 @@ export default {
       console.warn(
         `Modal "${this.name}" has scrollable flag set to true ` +
           `but height is not "auto" (${this.height})`
-      );
+      )
     }
     /**
        * Only observe when using height: 'auto'
@@ -240,37 +240,37 @@ export default {
          * (Provide polyfill to support IE < 11)
          */
       const MutationObserver = (function() {
-        const prefixes = ["", "WebKit", "Moz", "O", "Ms"];
+        const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
 
         for (let i = 0; i < prefixes.length; i++) {
-          let name = prefixes[i] + "MutationObserver";
+          let name = prefixes[i] + 'MutationObserver'
 
           if (name in window) {
-            return window[name];
+            return window[name]
           }
         }
-        return false;
-      })();
+        return false
+      })()
 
       if (MutationObserver) {
         this.mutationObserver = new MutationObserver(mutations => {
-          this.updateRenderedHeight();
-        });
+          this.updateRenderedHeight()
+        })
       }
     }
 
     if (this.clickToClose) {
-      window.addEventListener("keyup", this.onEscapeKeyUp);
+      window.addEventListener('keyup', this.onEscapeKeyUp)
     }
   },
   /**
      * Removes "resize" window listener
      */
   beforeDestroy() {
-    window.removeEventListener("resize", this.onWindowResize);
+    window.removeEventListener('resize', this.onWindowResize)
 
     if (this.clickToClose) {
-      window.removeEventListener("keyup", this.onEscapeKeyUp);
+      window.removeEventListener('keyup', this.onEscapeKeyUp)
     }
   },
   computed: {
@@ -278,7 +278,7 @@ export default {
        * Returns true if height is set to "auto"
        */
     isAutoHeight() {
-      return this.modal.heightType === "auto";
+      return this.modal.heightType === 'auto'
     },
     /**
        * Calculates and returns modal position based on the
@@ -292,32 +292,30 @@ export default {
         pivotY,
         trueModalWidth,
         trueModalHeight
-      } = this;
+      } = this
 
-      const maxLeft = window.width - trueModalWidth;
-      const maxTop = window.height - trueModalHeight;
+      const maxLeft = window.width - trueModalWidth
+      const maxTop = window.height - trueModalHeight
 
-      const left = shift.left + pivotX * maxLeft;
-      const top = shift.top + pivotY * maxTop;
+      const left = shift.left + pivotX * maxLeft
+      const top = shift.top + pivotY * maxTop
 
       return {
         left: inRange(0, maxLeft, left),
         top: inRange(0, maxTop, top)
-      };
+      }
     },
     /**
        * Returns pixel width (if set with %) and makes sure that modal size
        * fits the window
        */
     trueModalWidth() {
-      const { window, modal, adaptive, minWidth } = this;
+      const { window, modal, adaptive, minWidth } = this
 
       const value =
-        modal.widthType === "%"
-          ? window.width / 100 * modal.width
-          : modal.width;
+        modal.widthType === '%' ? window.width / 100 * modal.width : modal.width
 
-      return adaptive ? inRange(minWidth, window.width, value) : value;
+      return adaptive ? inRange(minWidth, window.width, value) : value
     },
     /**
        * Returns pixel height (if set with %) and makes sure that modal size
@@ -326,47 +324,47 @@ export default {
        * Returns modal.renderedHeight if height set as "auto"
        */
     trueModalHeight() {
-      const { window, modal, isAutoHeight, adaptive } = this;
+      const { window, modal, isAutoHeight, adaptive } = this
 
       const value =
-        modal.heightType === "%"
+        modal.heightType === '%'
           ? window.height / 100 * modal.height
-          : modal.height;
+          : modal.height
 
       if (isAutoHeight) {
         // use renderedHeight when height 'auto'
-        return this.modal.renderedHeight;
+        return this.modal.renderedHeight
       }
 
       return adaptive
         ? inRange(this.minHeight, this.window.height, value)
-        : value;
+        : value
     },
     /**
        * Returns class list for screen overlay (modal background)
        */
     overlayClass() {
       return {
-        "v--modal-overlay": true,
+        'v--modal-overlay': true,
         scrollable: this.scrollable && this.isAutoHeight
-      };
+      }
     },
     /**
        * Returns class list for modal itself
        */
     modalClass() {
-      return ["v--modal-box", this.classes];
+      return ['v--modal-box', this.classes]
     },
     /**
        * CSS styles for position and size of the modal
        */
     modalStyle() {
       return {
-        top: this.position.top + "px",
-        left: this.position.left + "px",
-        width: this.trueModalWidth + "px",
-        height: this.isAutoHeight ? "auto" : this.trueModalHeight + "px"
-      };
+        top: this.position.top + 'px',
+        left: this.position.left + 'px',
+        width: this.trueModalWidth + 'px',
+        height: this.isAutoHeight ? 'auto' : this.trueModalHeight + 'px'
+      }
     }
   },
   methods: {
@@ -376,25 +374,25 @@ export default {
        * every time "beforeOpen" is triggered
        */
     setInitialSize() {
-      let { modal } = this;
-      let width = parseNumber(this.width);
-      let height = parseNumber(this.height);
+      let { modal } = this
+      let width = parseNumber(this.width)
+      let height = parseNumber(this.height)
 
-      modal.width = width.value;
-      modal.widthType = width.type;
-      modal.height = height.value;
-      modal.heightType = height.type;
+      modal.width = width.value
+      modal.widthType = width.type
+      modal.height = height.value
+      modal.heightType = height.type
     },
 
     onEscapeKeyUp(event) {
       if (event.which === 27 && this.visible) {
-        this.$modal.hide(this.name);
+        this.$modal.hide(this.name)
       }
     },
 
     onWindowResize() {
-      this.window.width = window.innerWidth;
-      this.window.height = window.innerHeight;
+      this.window.width = window.innerWidth
+      this.window.height = window.innerHeight
     },
 
     /**
@@ -406,24 +404,24 @@ export default {
         timestamp: Date.now(),
         canceled: false,
         ref: this.$refs.modal
-      };
+      }
 
-      return Object.assign(eventData, params || {});
+      return Object.assign(eventData, params || {})
     },
     /**
        * Event handler which is triggered on modal resize
        */
     onModalResize(event) {
-      this.modal.widthType = "px";
-      this.modal.width = event.size.width;
+      this.modal.widthType = 'px'
+      this.modal.width = event.size.width
 
-      this.modal.heightType = "px";
-      this.modal.height = event.size.height;
+      this.modal.heightType = 'px'
+      this.modal.height = event.size.height
 
-      const { size } = this.modal;
-      const resizeEvent = this.genEventObject({ size });
+      const { size } = this.modal
+      const resizeEvent = this.genEventObject({ size })
 
-      this.$emit("resize", resizeEvent);
+      this.$emit('resize', resizeEvent)
     },
     /**
        * Event handler which is triggered on $modal.show and $modal.hight
@@ -431,59 +429,59 @@ export default {
        * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
        */
     toggle(state, params) {
-      const { reset, scrollable, visible } = this;
+      const { reset, scrollable, visible } = this
 
-      const beforeEventName = visible ? "before-close" : "before-open";
+      const beforeEventName = visible ? 'before-close' : 'before-open'
 
-      if (beforeEventName === "before-open") {
+      if (beforeEventName === 'before-open') {
         /**
            * Need to unfocus previously focused element, otherwise
            * all keypress events (ESC press, for example) will trigger on that element.
            */
         if (document.activeElement) {
-          document.activeElement.blur();
+          document.activeElement.blur()
         }
 
         if (reset) {
-          this.setInitialSize();
+          this.setInitialSize()
 
-          this.shift.left = 0;
-          this.shift.top = 0;
+          this.shift.left = 0
+          this.shift.top = 0
         }
 
         if (scrollable) {
-          document.body.classList.add("v--modal-block-scroll");
+          document.body.classList.add('v--modal-block-scroll')
         }
       } else {
         if (scrollable) {
-          document.body.classList.remove("v--modal-block-scroll");
+          document.body.classList.remove('v--modal-block-scroll')
         }
       }
 
-      let stopEventExecution = false;
+      let stopEventExecution = false
 
       const stop = () => {
-        stopEventExecution = true;
-      };
+        stopEventExecution = true
+      }
 
-      const beforeEvent = this.genEventObject({ stop, state, params });
+      const beforeEvent = this.genEventObject({ stop, state, params })
 
-      this.$emit(beforeEventName, beforeEvent);
+      this.$emit(beforeEventName, beforeEvent)
 
       if (!stopEventExecution) {
-        this.visible = state;
+        this.visible = state
         // after events are called in `watch.visible`
       }
     },
 
     getDraggableElement() {
       var selector =
-        typeof this.draggable !== "string" ? ".v--modal-box" : this.draggable;
+        typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
 
       if (selector) {
-        var handler = this.$refs.overlay.querySelector(selector);
+        var handler = this.$refs.overlay.querySelector(selector)
         if (handler) {
-          return handler;
+          return handler
         }
       }
     },
@@ -492,72 +490,72 @@ export default {
        */
     onBackgroundClick() {
       if (this.clickToClose) {
-        this.toggle(false);
+        this.toggle(false)
       }
     },
 
     addDraggableListeners() {
       if (!this.draggable) {
-        return;
+        return
       }
 
-      let dragger = this.getDraggableElement();
+      let dragger = this.getDraggableElement()
 
       if (dragger) {
-        let startX = 0;
-        let startY = 0;
-        let cachedShiftX = 0;
-        let cachedShiftY = 0;
+        let startX = 0
+        let startY = 0
+        let cachedShiftX = 0
+        let cachedShiftY = 0
 
         let getPosition = event => {
           return event.touches && event.touches.length > 0
             ? event.touches[0]
-            : event;
-        };
+            : event
+        }
 
         let mousedown = event => {
-          let target = event.target;
+          let target = event.target
 
-          if (target && target.nodeName === "INPUT") {
-            return;
+          if (target && target.nodeName === 'INPUT') {
+            return
           }
 
-          let { clientX, clientY } = getPosition(event);
+          let { clientX, clientY } = getPosition(event)
 
-          document.addEventListener("mousemove", mousemove);
-          document.addEventListener("mouseup", mouseup);
+          document.addEventListener('mousemove', mousemove)
+          document.addEventListener('mouseup', mouseup)
 
-          document.addEventListener("touchmove", mousemove);
-          document.addEventListener("touchend", mouseup);
+          document.addEventListener('touchmove', mousemove)
+          document.addEventListener('touchend', mouseup)
 
-          startX = clientX;
-          startY = clientY;
-          cachedShiftX = this.shift.left;
-          cachedShiftY = this.shift.top;
+          startX = clientX
+          startY = clientY
+          cachedShiftX = this.shift.left
+          cachedShiftY = this.shift.top
 
           //  event.preventDefault()
-        };
+        }
 
         let mousemove = event => {
-          let { clientX, clientY } = getPosition(event);
+          let { clientX, clientY } = getPosition(event)
 
-          this.shift.left = cachedShiftX + clientX - startX;
-          this.shift.top = cachedShiftY + clientY - startY;
-          event.preventDefault();
-        };
+          this.shift.left = cachedShiftX + clientX - startX
+          this.shift.top = cachedShiftY + clientY - startY
+          event.preventDefault()
+        }
 
         let mouseup = event => {
-          document.removeEventListener("mousemove", mousemove);
-          document.removeEventListener("mouseup", mouseup);
+          document.removeEventListener('mousemove', mousemove)
+          document.removeEventListener('mouseup', mouseup)
 
-          document.removeEventListener("touchmove", mousemove);
-          document.removeEventListener("touchend", mouseup);
+          document.removeEventListener('touchmove', mousemove)
+          document.removeEventListener('touchend', mouseup)
 
-          event.preventDefault();
-        };
+          event.preventDefault()
+        }
 
-        dragger.addEventListener("mousedown", mousedown);
-        dragger.addEventListener("touchstart", mousedown);
+        dragger.addEventListener('mousedown', mousedown)
+        dragger.addEventListener('touchstart', mousedown)
       }
     },
 
@@ -574,15 +572,15 @@ export default {
        */
     callAfterEvent(state) {
       if (state) {
-        this.connectObserver();
+        this.connectObserver()
       } else {
-        this.disconnectObserver();
+        this.disconnectObserver()
       }
 
-      const eventName = state ? "opened" : "closed";
-      const event = this.genEventObject({ state });
+      const eventName = state ? 'opened' : 'closed'
+      const event = this.genEventObject({ state })
 
-      this.$emit(eventName, event);
+      this.$emit(eventName, event)
     },
 
     /**
@@ -593,7 +591,7 @@ export default {
        */
     updateRenderedHeight() {
       if (this.$refs.modal) {
-        this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height;
+        this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
       }
     },
 
@@ -607,7 +605,7 @@ export default {
           childList: true,
           attributes: true,
           subtree: true
-        });
+        })
       }
     },
 
@@ -616,11 +614,11 @@ export default {
        */
     disconnectObserver() {
       if (this.mutationObserver) {
-        this.mutationObserver.disconnect();
+        this.mutationObserver.disconnect()
       }
     }
   }
-};
+}
 </script>
 <style>
 .v--modal-block-scroll {

From d3198e1388d4a07c52fd778d58c284bf09a1f885 Mon Sep 17 00:00:00 2001
From: Yev Vlasenko <yev.vlasenko@gmail.com>
Date: Thu, 28 Dec 2017 18:27:58 +0000
Subject: [PATCH 3/3] Added build target without css, started using prettier
 intead of linting

---
 build/webpack.srr-no-css.config.js |  24 -
 build/webpack.ssr-no-css.config.js |  50 ++
 dist/index.js                      |   4 +-
 dist/ssr.index.js                  |   4 +-
 dist/ssr.nocss.js                  | 740 +++++++++++++++++++++++++++++
 dist/styles.css                    | 151 ++++++
 package.json                       |  20 +-
 src/Dialog.vue                     |  21 +-
 src/Resizer.vue                    |  23 +-
 src/index.js                       |   8 +-
 src/parser.js                      |   4 +-
 11 files changed, 984 insertions(+), 65 deletions(-)
 delete mode 100644 build/webpack.srr-no-css.config.js
 create mode 100644 build/webpack.ssr-no-css.config.js
 create mode 100644 dist/ssr.nocss.js
 create mode 100644 dist/styles.css

diff --git a/build/webpack.srr-no-css.config.js b/build/webpack.srr-no-css.config.js
deleted file mode 100644
index f3d516b..0000000
--- a/build/webpack.srr-no-css.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-const base = require('./webpack.srr.config')
-
-module.exports = merge(base, {
-  plugins: [new ExtractTextPlugin('styles.css')],
-  output: {
-    filename: 'ssr.pure.js'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
-      }
-    ]
-  }
-})
diff --git a/build/webpack.ssr-no-css.config.js b/build/webpack.ssr-no-css.config.js
new file mode 100644
index 0000000..1074115
--- /dev/null
+++ b/build/webpack.ssr-no-css.config.js
@@ -0,0 +1,50 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+  target: 'node',
+  entry: path.resolve(__dirname, '../src/index.js'),
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    library: 'vue-js-modal',
+    libraryTarget: 'umd',
+    filename: 'ssr.nocss.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              use: 'css-loader',
+              fallback: 'vue-style-loader'
+            })
+          }
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production')
+      }
+    }),
+    new UglifyJSPlugin({
+      mangle: false,
+      beautify: true
+    }),
+    new ExtractTextPlugin('styles.css')
+  ]
+}
diff --git a/dist/index.js b/dist/index.js
index 88b7e3b..2e08eed 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -718,9 +718,9 @@
     }, function(module, exports, __webpack_require__) {
         exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\n  font-size: 12px !important;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 40px;\n  height: 40px;\n  color: inherit;\n  font: inherit;\n  outline: none;\n}\n.vue-dialog-button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369be9;\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index dc0a400..93b4c5c 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -672,9 +672,9 @@
     }, function(module, exports, __webpack_require__) {
         exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\n  font-size: 12px !important;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 40px;\n  height: 40px;\n  color: inherit;\n  font: inherit;\n  outline: none;\n}\n.vue-dialog-button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369be9;\n}\n", "" ]);
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
diff --git a/dist/ssr.nocss.js b/dist/ssr.nocss.js
new file mode 100644
index 0000000..7069180
--- /dev/null
+++ b/dist/ssr.nocss.js
@@ -0,0 +1,740 @@
+!function(root, factory) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory() : "function" == typeof define && define.amd ? define([], factory) : "object" == typeof exports ? exports["vue-js-modal"] = factory() : root["vue-js-modal"] = factory();
+}(this, function() {
+    return function(modules) {
+        function __webpack_require__(moduleId) {
+            if (installedModules[moduleId]) return installedModules[moduleId].exports;
+            var module = installedModules[moduleId] = {
+                i: moduleId,
+                l: !1,
+                exports: {}
+            };
+            return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), 
+            module.l = !0, module.exports;
+        }
+        var installedModules = {};
+        return __webpack_require__.m = modules, __webpack_require__.c = installedModules, 
+        __webpack_require__.i = function(value) {
+            return value;
+        }, __webpack_require__.d = function(exports, name, getter) {
+            __webpack_require__.o(exports, name) || Object.defineProperty(exports, name, {
+                configurable: !1,
+                enumerable: !0,
+                get: getter
+            });
+        }, __webpack_require__.n = function(module) {
+            var getter = module && module.__esModule ? function() {
+                return module.default;
+            } : function() {
+                return module;
+            };
+            return __webpack_require__.d(getter, "a", getter), getter;
+        }, __webpack_require__.o = function(object, property) {
+            return Object.prototype.hasOwnProperty.call(object, property);
+        }, __webpack_require__.p = "/dist/", __webpack_require__(__webpack_require__.s = 1);
+    }([ function(module, exports) {
+        module.exports = function(rawScriptExports, compiledTemplate, scopeId, cssModules) {
+            var esModule, scriptExports = rawScriptExports = rawScriptExports || {}, type = typeof rawScriptExports.default;
+            "object" !== type && "function" !== type || (esModule = rawScriptExports, scriptExports = rawScriptExports.default);
+            var options = "function" == typeof scriptExports ? scriptExports.options : scriptExports;
+            if (compiledTemplate && (options.render = compiledTemplate.render, options.staticRenderFns = compiledTemplate.staticRenderFns), 
+            scopeId && (options._scopeId = scopeId), cssModules) {
+                var computed = options.computed || (options.computed = {});
+                Object.keys(cssModules).forEach(function(key) {
+                    var module = cssModules[key];
+                    computed[key] = function() {
+                        return module;
+                    };
+                });
+            }
+            return {
+                esModule: esModule,
+                exports: scriptExports,
+                options: options
+            };
+        };
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _Modal = __webpack_require__(4), _Modal2 = _interopRequireDefault(_Modal), _Dialog = __webpack_require__(3), _Dialog2 = _interopRequireDefault(_Dialog), Plugin = {
+            install: function(Vue) {
+                var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+                if (!this.installed) {
+                    this.installed = !0, this.event = new Vue(), Vue.prototype.$modal = {
+                        show: function(name, params) {
+                            Plugin.event.$emit("toggle", name, !0, params);
+                        },
+                        hide: function(name, params) {
+                            Plugin.event.$emit("toggle", name, !1, params);
+                        },
+                        toggle: function(name, params) {
+                            Plugin.event.$emit("toggle", name, void 0, params);
+                        }
+                    };
+                    var componentName = options.componentName || "modal";
+                    Vue.component(componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default);
+                }
+            }
+        };
+        exports.default = Plugin;
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var inRange = exports.inRange = function(from, to, value) {
+            return value < from ? from : value > to ? to : value;
+        };
+        exports.default = {
+            inRange: inRange
+        };
+    }, function(module, exports, __webpack_require__) {
+        __webpack_require__(9);
+        var Component = __webpack_require__(0)(__webpack_require__(5), __webpack_require__(13), null, null);
+        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+            return "default" !== key && "__esModule" !== key;
+        }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
+        module.exports = Component.exports;
+    }, function(module, exports, __webpack_require__) {
+        __webpack_require__(10);
+        var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(14), null, null);
+        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+            return "default" !== key && "__esModule" !== key;
+        }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
+        module.exports = Component.exports;
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.default = {
+            name: "Dialog",
+            props: {
+                width: {
+                    type: [ Number, String ],
+                    default: 400
+                },
+                clickToClose: {
+                    type: Boolean,
+                    default: !0
+                },
+                transition: {
+                    type: String,
+                    default: "fade"
+                }
+            },
+            data: function() {
+                return {
+                    params: {},
+                    defaultButtons: [ {
+                        title: "CLOSE"
+                    } ]
+                };
+            },
+            computed: {
+                buttons: function() {
+                    return this.params.buttons || this.defaultButtons;
+                },
+                buttonStyle: function() {
+                    return {
+                        flex: "1 1 " + 100 / this.buttons.length + "%"
+                    };
+                }
+            },
+            methods: {
+                beforeOpened: function(event) {
+                    window.addEventListener("keyup", this.onKeyUp), this.params = event.params || {}, 
+                    this.$emit("before-opened", event);
+                },
+                beforeClosed: function(event) {
+                    window.removeEventListener("keyup", this.onKeyUp), this.params = {}, this.$emit("before-closed", event);
+                },
+                click: function(i, event) {
+                    var source = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "click", button = this.buttons[i];
+                    button && "function" == typeof button.handler ? button.handler(i, event, {
+                        source: source
+                    }) : this.$modal.hide("dialog");
+                },
+                onKeyUp: function(event) {
+                    if (13 === event.which && this.buttons.length > 0) {
+                        var buttonIndex = 1 === this.buttons.length ? 0 : this.buttons.findIndex(function(button) {
+                            return button.default;
+                        });
+                        -1 !== buttonIndex && this.click(buttonIndex, event, "keypress");
+                    }
+                }
+            }
+        };
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _index = __webpack_require__(1), _index2 = _interopRequireDefault(_index), _Resizer = __webpack_require__(12), _Resizer2 = _interopRequireDefault(_Resizer), _util = __webpack_require__(2), _parser = __webpack_require__(8), _parser2 = _interopRequireDefault(_parser);
+        exports.default = {
+            name: "VueJsModal",
+            props: {
+                name: {
+                    required: !0,
+                    type: String
+                },
+                delay: {
+                    type: Number,
+                    default: 0
+                },
+                resizable: {
+                    type: Boolean,
+                    default: !1
+                },
+                adaptive: {
+                    type: Boolean,
+                    default: !1
+                },
+                draggable: {
+                    type: [ Boolean, String ],
+                    default: !1
+                },
+                scrollable: {
+                    type: Boolean,
+                    default: !1
+                },
+                reset: {
+                    type: Boolean,
+                    default: !1
+                },
+                transition: {
+                    type: String
+                },
+                clickToClose: {
+                    type: Boolean,
+                    default: !0
+                },
+                classes: {
+                    type: [ String, Array ],
+                    default: "v--modal"
+                },
+                minWidth: {
+                    type: Number,
+                    default: 0,
+                    validator: function(value) {
+                        return value >= 0;
+                    }
+                },
+                minHeight: {
+                    type: Number,
+                    default: 0,
+                    validator: function(value) {
+                        return value >= 0;
+                    }
+                },
+                width: {
+                    type: [ Number, String ],
+                    default: 600,
+                    validator: function(value) {
+                        if ("string" == typeof value) {
+                            var width = (0, _parser2.default)(value);
+                            return ("%" === width.type || "px" === width.type) && width.value > 0;
+                        }
+                        return value >= 0;
+                    }
+                },
+                height: {
+                    type: [ Number, String ],
+                    default: 300,
+                    validator: function(value) {
+                        if ("string" == typeof value) {
+                            if ("auto" === value) return !0;
+                            var height = (0, _parser2.default)(value);
+                            return ("%" === height.type || "px" === height.type) && height.value > 0;
+                        }
+                        return value >= 0;
+                    }
+                },
+                pivotX: {
+                    type: Number,
+                    default: .5,
+                    validator: function(value) {
+                        return value >= 0 && value <= 1;
+                    }
+                },
+                pivotY: {
+                    type: Number,
+                    default: .5,
+                    validator: function(value) {
+                        return value >= 0 && value <= 1;
+                    }
+                }
+            },
+            components: {
+                Resizer: _Resizer2.default
+            },
+            data: function() {
+                return {
+                    visible: !1,
+                    visibility: {
+                        modal: !1,
+                        overlay: !1
+                    },
+                    shift: {
+                        left: 0,
+                        top: 0
+                    },
+                    modal: {
+                        width: 0,
+                        widthType: "px",
+                        height: 0,
+                        heightType: "px",
+                        renderedHeight: 0
+                    },
+                    window: {
+                        width: 0,
+                        height: 0
+                    },
+                    mutationObserver: null
+                };
+            },
+            watch: {
+                visible: function(value) {
+                    var _this = this;
+                    value ? (this.visibility.overlay = !0, setTimeout(function() {
+                        _this.visibility.modal = !0, _this.$nextTick(function() {
+                            _this.addDraggableListeners(), _this.callAfterEvent(!0);
+                        });
+                    }, this.delay)) : (this.visibility.modal = !1, setTimeout(function() {
+                        _this.visibility.overlay = !1, _this.$nextTick(function() {
+                            _this.removeDraggableListeners(), _this.callAfterEvent(!1);
+                        });
+                    }, this.delay));
+                }
+            },
+            created: function() {
+                this.setInitialSize();
+            },
+            beforeMount: function() {
+                var _this2 = this;
+                if (_index2.default.event.$on("toggle", function(name, state, params) {
+                    name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params));
+                }), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(), 
+                this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"), 
+                this.isAutoHeight) {
+                    var MutationObserver = function() {
+                        for (var prefixes = [ "", "WebKit", "Moz", "O", "Ms" ], i = 0; i < prefixes.length; i++) {
+                            var name = prefixes[i] + "MutationObserver";
+                            if (name in window) return window[name];
+                        }
+                        return !1;
+                    }();
+                    MutationObserver && (this.mutationObserver = new MutationObserver(function(mutations) {
+                        _this2.updateRenderedHeight();
+                    }));
+                }
+                this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
+            },
+            beforeDestroy: function() {
+                window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp);
+            },
+            computed: {
+                isAutoHeight: function() {
+                    return "auto" === this.modal.heightType;
+                },
+                position: function() {
+                    var window = this.window, shift = this.shift, pivotX = this.pivotX, pivotY = this.pivotY, trueModalWidth = this.trueModalWidth, trueModalHeight = this.trueModalHeight, maxLeft = window.width - trueModalWidth, maxTop = window.height - trueModalHeight, left = shift.left + pivotX * maxLeft, top = shift.top + pivotY * maxTop;
+                    return {
+                        left: (0, _util.inRange)(0, maxLeft, left),
+                        top: (0, _util.inRange)(0, maxTop, top)
+                    };
+                },
+                trueModalWidth: function() {
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
+                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                },
+                trueModalHeight: function() {
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                },
+                overlayClass: function() {
+                    return {
+                        "v--modal-overlay": !0,
+                        scrollable: this.scrollable && this.isAutoHeight
+                    };
+                },
+                modalClass: function() {
+                    return [ "v--modal-box", this.classes ];
+                },
+                modalStyle: function() {
+                    return {
+                        top: this.position.top + "px",
+                        left: this.position.left + "px",
+                        width: this.trueModalWidth + "px",
+                        height: this.isAutoHeight ? "auto" : this.trueModalHeight + "px"
+                    };
+                }
+            },
+            methods: {
+                setInitialSize: function() {
+                    var modal = this.modal, width = (0, _parser2.default)(this.width), height = (0, 
+                    _parser2.default)(this.height);
+                    modal.width = width.value, modal.widthType = width.type, modal.height = height.value, 
+                    modal.heightType = height.type;
+                },
+                onEscapeKeyUp: function(event) {
+                    27 === event.which && this.visible && this.$modal.hide(this.name);
+                },
+                onWindowResize: function() {
+                    this.window.width = window.innerWidth, this.window.height = window.innerHeight;
+                },
+                genEventObject: function(params) {
+                    var eventData = {
+                        name: this.name,
+                        timestamp: Date.now(),
+                        canceled: !1,
+                        ref: this.$refs.modal
+                    };
+                    return Object.assign(eventData, params || {});
+                },
+                onModalResize: function(event) {
+                    this.modal.widthType = "px", this.modal.width = event.size.width, this.modal.heightType = "px", 
+                    this.modal.height = event.size.height;
+                    var size = this.modal.size, resizeEvent = this.genEventObject({
+                        size: size
+                    });
+                    this.$emit("resize", resizeEvent);
+                },
+                toggle: function(state, params) {
+                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
+                    "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
+                    reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
+                    var stopEventExecution = !1, stop = function() {
+                        stopEventExecution = !0;
+                    }, beforeEvent = this.genEventObject({
+                        stop: stop,
+                        state: state,
+                        params: params
+                    });
+                    this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                },
+                getDraggableElement: function() {
+                    var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
+                    if (selector) {
+                        var handler = this.$refs.overlay.querySelector(selector);
+                        if (handler) return handler;
+                    }
+                },
+                onBackgroundClick: function() {
+                    this.clickToClose && this.toggle(!1);
+                },
+                addDraggableListeners: function() {
+                    var _this3 = this;
+                    if (this.draggable) {
+                        var dragger = this.getDraggableElement();
+                        if (dragger) {
+                            var startX = 0, startY = 0, cachedShiftX = 0, cachedShiftY = 0, getPosition = function(event) {
+                                return event.touches && event.touches.length > 0 ? event.touches[0] : event;
+                            }, mousedown = function(event) {
+                                var target = event.target;
+                                if (!target || "INPUT" !== target.nodeName) {
+                                    var _getPosition = getPosition(event), clientX = _getPosition.clientX, clientY = _getPosition.clientY;
+                                    document.addEventListener("mousemove", _mousemove), document.addEventListener("mouseup", _mouseup), 
+                                    document.addEventListener("touchmove", _mousemove), document.addEventListener("touchend", _mouseup), 
+                                    startX = clientX, startY = clientY, cachedShiftX = _this3.shift.left, cachedShiftY = _this3.shift.top;
+                                }
+                            }, _mousemove = function(event) {
+                                var _getPosition2 = getPosition(event), clientX = _getPosition2.clientX, clientY = _getPosition2.clientY;
+                                _this3.shift.left = cachedShiftX + clientX - startX, _this3.shift.top = cachedShiftY + clientY - startY, 
+                                event.preventDefault();
+                            }, _mouseup = function _mouseup(event) {
+                                document.removeEventListener("mousemove", _mousemove), document.removeEventListener("mouseup", _mouseup), 
+                                document.removeEventListener("touchmove", _mousemove), document.removeEventListener("touchend", _mouseup), 
+                                event.preventDefault();
+                            };
+                            dragger.addEventListener("mousedown", mousedown), dragger.addEventListener("touchstart", mousedown);
+                        }
+                    }
+                },
+                removeDraggableListeners: function() {},
+                callAfterEvent: function(state) {
+                    state ? this.connectObserver() : this.disconnectObserver();
+                    var eventName = state ? "opened" : "closed", event = this.genEventObject({
+                        state: state
+                    });
+                    this.$emit(eventName, event);
+                },
+                updateRenderedHeight: function() {
+                    this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height);
+                },
+                connectObserver: function() {
+                    this.mutationObserver && this.mutationObserver.observe(this.$refs.modal, {
+                        childList: !0,
+                        attributes: !0,
+                        subtree: !0
+                    });
+                },
+                disconnectObserver: function() {
+                    this.mutationObserver && this.mutationObserver.disconnect();
+                }
+            }
+        };
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _util = __webpack_require__(2);
+        exports.default = {
+            name: "VueJsModalResizer",
+            props: {
+                minHeight: {
+                    type: Number,
+                    default: 0
+                },
+                minWidth: {
+                    type: Number,
+                    default: 0
+                }
+            },
+            data: function() {
+                return {
+                    clicked: !1,
+                    size: {}
+                };
+            },
+            mounted: function() {
+                this.$el.addEventListener("mousedown", this.start, !1);
+            },
+            computed: {
+                className: function() {
+                    return {
+                        "vue-modal-resizer": !0,
+                        clicked: this.clicked
+                    };
+                }
+            },
+            methods: {
+                start: function(event) {
+                    this.clicked = !0, window.addEventListener("mousemove", this.mousemove, !1), window.addEventListener("mouseup", this.stop, !1), 
+                    event.stopPropagation(), event.preventDefault();
+                },
+                stop: function() {
+                    this.clicked = !1, window.removeEventListener("mousemove", this.mousemove, !1), 
+                    window.removeEventListener("mouseup", this.stop, !1), this.$emit("resize-stop", {
+                        element: this.$el.parentElement,
+                        size: this.size
+                    });
+                },
+                mousemove: function(event) {
+                    this.resize(event);
+                },
+                resize: function(event) {
+                    var el = this.$el.parentElement;
+                    if (el) {
+                        var width = event.clientX - el.offsetLeft, height = event.clientY - el.offsetTop;
+                        width = (0, _util.inRange)(this.minWidth, window.innerWidth, width), height = (0, 
+                        _util.inRange)(this.minHeight, window.innerHeight, height), this.size = {
+                            width: width,
+                            height: height
+                        }, el.style.width = width + "px", el.style.height = height + "px", this.$emit("resize", {
+                            element: el,
+                            size: this.size
+                        });
+                    }
+                }
+            }
+        };
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
+            return typeof obj;
+        } : function(obj) {
+            return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+        }, types = [ {
+            name: "px",
+            regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+px$")
+        }, {
+            name: "%",
+            regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+%$")
+        }, {
+            name: "px",
+            regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+$")
+        } ], getType = function(value) {
+            if ("auto" === value) return {
+                type: value,
+                value: 0
+            };
+            for (var i = 0; i < types.length; i++) {
+                var type = types[i];
+                if (type.regexp.test(value)) return {
+                    type: type.name,
+                    value: parseFloat(value)
+                };
+            }
+            return {
+                type: "",
+                value: value
+            };
+        }, parse = exports.parse = function(value) {
+            switch (void 0 === value ? "undefined" : _typeof(value)) {
+              case "number":
+                return {
+                    type: "px",
+                    value: value
+                };
+
+              case "string":
+                return getType(value);
+
+              default:
+                return {
+                    type: "",
+                    value: value
+                };
+            }
+        };
+        exports.default = parse;
+    }, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) {
+        __webpack_require__(11);
+        var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(15), null, null);
+        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+            return "default" !== key && "__esModule" !== key;
+        }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
+        module.exports = Component.exports;
+    }, function(module, exports) {
+        module.exports = {
+            render: function() {
+                var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+                return _c("modal", {
+                    attrs: {
+                        name: "dialog",
+                        height: "auto",
+                        classes: [ "v--modal", "vue-dialog", this.params.class ],
+                        width: _vm.width,
+                        "pivot-y": .3,
+                        adaptive: !0,
+                        clickToClose: _vm.clickToClose,
+                        transition: _vm.transition
+                    },
+                    on: {
+                        "before-open": _vm.beforeOpened,
+                        "before-close": _vm.beforeClosed,
+                        opened: function($event) {
+                            _vm.$emit("opened", $event);
+                        },
+                        closed: function($event) {
+                            _vm.$emit("closed", $event);
+                        }
+                    }
+                }, [ _c("div", {
+                    staticClass: "dialog-content"
+                }, [ _vm.params.title ? _c("div", {
+                    staticClass: "dialog-c-title",
+                    domProps: {
+                        innerHTML: _vm._s(_vm.params.title || "")
+                    }
+                }) : _vm._e(), _vm._v(" "), _c("div", {
+                    staticClass: "dialog-c-text",
+                    domProps: {
+                        innerHTML: _vm._s(_vm.params.text || "")
+                    }
+                }) ]), _vm._v(" "), _vm.buttons ? _c("div", {
+                    staticClass: "vue-dialog-buttons"
+                }, _vm._l(_vm.buttons, function(button, i) {
+                    return _c("button", {
+                        key: i,
+                        class: button.class || "vue-dialog-button",
+                        style: _vm.buttonStyle,
+                        domProps: {
+                            innerHTML: _vm._s(button.title)
+                        },
+                        on: {
+                            click: function($event) {
+                                $event.stopPropagation(), _vm.click(i, $event);
+                            }
+                        }
+                    }, [ _vm._v("\n      " + _vm._s(button.title) + "\n    ") ]);
+                })) : _c("div", {
+                    staticClass: "vue-dialog-buttons-none"
+                }) ]);
+            },
+            staticRenderFns: []
+        }, module.exports.render._withStripped = !0;
+    }, function(module, exports) {
+        module.exports = {
+            render: function() {
+                var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+                return _c("transition", {
+                    attrs: {
+                        name: "overlay-fade"
+                    }
+                }, [ _vm.visibility.overlay ? _c("div", {
+                    ref: "overlay",
+                    class: _vm.overlayClass,
+                    attrs: {
+                        "aria-expanded": _vm.visible.toString(),
+                        "data-modal": _vm.name
+                    },
+                    on: {
+                        mousedown: function($event) {
+                            $event.stopPropagation(), _vm.onBackgroundClick($event);
+                        },
+                        touchstart: function($event) {
+                            $event.stopPropagation(), _vm.onBackgroundClick($event);
+                        }
+                    }
+                }, [ _c("div", {
+                    staticClass: "v--modal-top-right"
+                }, [ _vm._t("top-right") ], 2), _vm._v(" "), _c("transition", {
+                    attrs: {
+                        name: _vm.transition
+                    }
+                }, [ _vm.visibility.modal ? _c("div", {
+                    ref: "modal",
+                    class: _vm.modalClass,
+                    style: _vm.modalStyle,
+                    on: {
+                        mousedown: function($event) {
+                            $event.stopPropagation();
+                        },
+                        touchstart: function($event) {
+                            $event.stopPropagation();
+                        }
+                    }
+                }, [ _vm._t("default"), _vm._v(" "), _vm.resizable && !_vm.isAutoHeight ? _c("resizer", {
+                    attrs: {
+                        "min-width": _vm.minWidth,
+                        "min-height": _vm.minHeight
+                    },
+                    on: {
+                        resize: _vm.onModalResize
+                    }
+                }) : _vm._e() ], 2) : _vm._e() ]) ], 1) : _vm._e() ]);
+            },
+            staticRenderFns: []
+        }, module.exports.render._withStripped = !0;
+    }, function(module, exports) {
+        module.exports = {
+            render: function() {
+                var _vm = this, _h = _vm.$createElement;
+                return (_vm._self._c || _h)("div", {
+                    class: _vm.className
+                });
+            },
+            staticRenderFns: []
+        }, module.exports.render._withStripped = !0;
+    } ]);
+});
\ No newline at end of file
diff --git a/dist/styles.css b/dist/styles.css
new file mode 100644
index 0000000..3ad389e
--- /dev/null
+++ b/dist/styles.css
@@ -0,0 +1,151 @@
+
+.v--modal-block-scroll {
+  overflow: hidden;
+  position: fixed;
+  width: 100vw;
+}
+.v--modal-overlay {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  opacity: 1;
+}
+.v--modal-overlay.scrollable {
+  height: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 10px;
+  -webkit-overflow-scrolling: touch;
+}
+.v--modal-overlay .v--modal-box {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.v--modal-overlay.scrollable .v--modal-box {
+  margin-bottom: 2px;
+  /* transition: top 0.2s ease; */
+}
+.v--modal {
+  background-color: white;
+  text-align: left;
+  border-radius: 3px;
+  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);
+  padding: 0;
+}
+.v--modal.v--modal-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  left: 0;
+  top: 0;
+}
+.v--modal-top-right {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.overlay-fade-enter-active,
+.overlay-fade-leave-active {
+  transition: all 0.2s;
+}
+.overlay-fade-enter,
+.overlay-fade-leave-active {
+  opacity: 0;
+}
+.nice-modal-fade-enter-active,
+.nice-modal-fade-leave-active {
+  transition: all 0.4s;
+}
+.nice-modal-fade-enter,
+.nice-modal-fade-leave-active {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.vue-modal-resizer {
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  right: 0;
+  bottom: 0;
+  z-index: 9999999;
+  background: transparent;
+  cursor: se-resize;
+}
+.vue-modal-resizer::after {
+  display: block;
+  position: absolute;
+  content: '';
+  background: transparent;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  border-bottom: 10px solid #ddd;
+  border-left: 10px solid transparent;
+}
+.vue-modal-resizer.clicked::after {
+  border-bottom: 10px solid #369be9;
+}
+
+.vue-dialog div {
+  box-sizing: border-box;
+}
+.vue-dialog .dialog-flex {
+  width: 100%;
+  height: 100%;
+}
+.vue-dialog .dialog-content {
+  flex: 1 0 auto;
+  width: 100%;
+  padding: 15px;
+  font-size: 14px;
+}
+.vue-dialog .dialog-c-title {
+  font-weight: 600;
+  padding-bottom: 15px;
+}
+.vue-dialog .dialog-c-text {
+}
+.vue-dialog .vue-dialog-buttons {
+  display: flex;
+  flex: 0 1 auto;
+  width: 100%;
+  border-top: 1px solid #eee;
+}
+.vue-dialog .vue-dialog-buttons-none {
+  width: 100%;
+  padding-bottom: 15px;
+}
+.vue-dialog-button {
+  font-size: 12px !important;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  line-height: 40px;
+  height: 40px;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+.vue-dialog-button:hover {
+  background: rgba(0, 0, 0, 0.01);
+}
+.vue-dialog-button:active {
+  background: rgba(0, 0, 0, 0.025);
+}
+.vue-dialog-button:not(:first-of-type) {
+  border-left: 1px solid #eee;
+}
diff --git a/package.json b/package.json
index 9c2b84f..239b855 100644
--- a/package.json
+++ b/package.json
@@ -8,22 +8,21 @@
     "type": "git",
     "url": "https://github.com/euvl/vue-js-modal.git"
   },
-  "keywords": [
-    "vue",
-    "vuejs",
-    "modal",
-    "vue-js-modal"
-  ],
+  "keywords": ["vue", "vuejs", "modal", "vue-js-modal"],
   "bugs": {
     "url": "https://github.com/euvl/vue-js-modal/issues"
   },
   "scripts": {
-    "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
-    "build:srr": "webpack --config ./build/webpack.srr.config.js --progress --hide-modules",
-    "build:srr-no-css": "webpack --config ./build/webpack.srr-no-css.config.js --progress --hide-modules",
+    "build:client":
+      "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+    "build:ssr":
+      "webpack --config ./build/webpack.ssr.config.js --progress --hide-modules",
+    "build:ssr-no-css":
+      "webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
-    "build": "npm run lint && npm run unit && npm run build:client && npm run build:srr"
+    "build":
+      "npm run unit && npm run build:client && npm run build:ssr && npm run build:ssr-no-css"
   },
   "license": "MIT",
   "devDependencies": {
@@ -40,6 +39,7 @@
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.9.0",
     "jasmine-core": "^2.7.0",
     "karma": "^1.4.1",
diff --git a/src/Dialog.vue b/src/Dialog.vue
index 19df0c0..c288b3d 100644
--- a/src/Dialog.vue
+++ b/src/Dialog.vue
@@ -54,40 +54,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') {
@@ -96,11 +96,12 @@ export default {
         this.$modal.hide('dialog')
       }
     },
-    onKeyUp (event) {
+    onKeyUp(event) {
       if (event.which === 13 && this.buttons.length > 0) {
-        const buttonIndex = this.buttons.length === 1
-          ? 0
-          : this.buttons.findIndex(button => button.default)
+        const buttonIndex =
+          this.buttons.length === 1
+            ? 0
+            : this.buttons.findIndex(button => button.default)
 
         if (buttonIndex !== -1) {
           this.click(buttonIndex, event, 'keypress')
diff --git a/src/Resizer.vue b/src/Resizer.vue
index e40c313..c56dc3f 100644
--- a/src/Resizer.vue
+++ b/src/Resizer.vue
@@ -14,23 +14,24 @@ export default {
     minWidth: {
       type: Number,
       default: 0
-    }},
-  data () {
+    }
+  },
+  data() {
     return {
       clicked: false,
       size: {}
     }
   },
-  mounted () {
+  mounted() {
     this.$el.addEventListener('mousedown', this.start, false)
   },
   computed: {
-    className () {
-      return {'vue-modal-resizer': true, 'clicked': this.clicked}
+    className() {
+      return { 'vue-modal-resizer': true, clicked: this.clicked }
     }
   },
   methods: {
-    start (event) {
+    start(event) {
       this.clicked = true
 
       window.addEventListener('mousemove', this.mousemove, false)
@@ -39,7 +40,7 @@ export default {
       event.stopPropagation()
       event.preventDefault()
     },
-    stop () {
+    stop() {
       this.clicked = false
 
       window.removeEventListener('mousemove', this.mousemove, false)
@@ -50,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) {
@@ -63,7 +64,7 @@ export default {
         width = inRange(this.minWidth, window.innerWidth, width)
         height = inRange(this.minHeight, window.innerHeight, height)
 
-        this.size = {width, height}
+        this.size = { width, height }
         el.style.width = width + 'px'
         el.style.height = height + 'px'
 
@@ -104,6 +105,6 @@ export default {
 }
 
 .vue-modal-resizer.clicked::after {
-  border-bottom: 10px solid #369BE9;
+  border-bottom: 10px solid #369be9;
 }
 </style>
diff --git a/src/index.js b/src/index.js
index 1ed9163..23d2032 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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)
       }
     }
diff --git a/src/parser.js b/src/parser.js
index 7418846..4de3c75 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -19,7 +19,7 @@ const types = [
   }
 ]
 
-var getType = (value) => {
+var getType = value => {
   if (value === 'auto') {
     return {
       type: value,
@@ -43,7 +43,7 @@ var getType = (value) => {
   }
 }
 
-export const parse = (value) => {
+export const parse = value => {
   switch (typeof value) {
     case 'number':
       return { type: 'px', value }