Passing style to modal

Author: euvl

README.md

@@ -302,8 +302,8 @@ There is also an SSR build with CSS file extracted. Take a look in /dist folder.
 | clickToClose | false | Boolean       | true        | If set to `false`, it will not be possible to close modal by clicking on the background |
 | transition| false | String           |             | Transition name |
 | overlayTransition| false | String           | 'overlay-fade'| Transition name for the background overlay |
-| classes   | false | [String, Array]  | 'v--modal' | Classes that will be applied to the modal box, if not specified, the default `v--modal` class will be applied |
-| styles    | false | String           | ""          | Style that will be applied to the modal box (currently only supports strings)|
+| classes   | false | [String, Array]  | 'v--modal'  | Classes that will be applied to the modal box, if not specified, the default `v--modal` class will be applied |
+| styles    | false | [String, Array, Object] |      | Style that will be applied to the modal box (currently only supports strings)|
 | width     | false | [String, Number] | 600         | Width in pixels or percents (e.g. 50 or "50px", "50%") |
 | height    | false | [String, Number] | 300         | Height in pixels or percents (e.g. 50 or "50px", "50%") or `"auto"` |
 | minWidth  | false | Number (px)      | 0           | The minimum width to which modal can be resized  |

dist/index.js

@@ -50,7 +50,8 @@ import {
   createModalEvent,
   getMutationObserver,
   blurActiveElement,
-  windowWidthWithoutScrollbar
+  windowWidthWithoutScrollbar,
+  stringStylesToObject
 } from './utils'
 import { parseNumber, validateNumber } from './parser'
 
@@ -346,19 +347,9 @@ export default {
       return ['v--modal-box', this.classes]
     },
     stylesProp () {
-      if (typeof this.styles === 'string') { 
-        return this.styles
-          .split(';')
-          .map(v => v
-            .trim()
-            .split(':')
-          )
-          .reduce((styles, [key, value]) => {
-            return { ...styles, [key]: value }
-          })
-      }
-
-      return this.styles
+      return typeof this.styles === 'string'
+        ? stringStylesToObject(this.styles)
+        : this.styles
     },
     /**
      * CSS styles for position and size of the modal

dist/ssr.index.js

@@ -69,3 +69,12 @@ export const windowWidthWithoutScrollbar = () => {
 
   return clientWidth || innerWidth
 }
+
+export const stringStylesToObject = (styles) => {
+  const lines = styles.split(';').map(line => line.trim()).filter(Boolean)
+  const entries = lines.map(line => line.split(':'))
+
+  return entries.reduce((styles, [key, value]) => {
+    return { ...styles, [key]: value }
+  }, {})
+}