v0.17.0, add props , ,

Author: hunterliu1003

README.md

@@ -238,14 +238,15 @@ toggle modal by name.
 ## **Props**
 
 ```js
-const CLASS_TYPES = [String, Object, Array]
-
 {
   value: { type: Boolean, default: false },
   ssr: { type: Boolean, default: true },
-  classes: { type: CLASS_TYPES, default: '' },
-  overlayClass: { type: CLASS_TYPES, default: '' },
-  contentClass: { type: CLASS_TYPES, default: '' },
+  classes: { type: [String, Object, Array], default: '' },
+  overlayClass: { type: [String, Object, Array], default: '' },
+  contentClass: { type: [String, Object, Array], default: '' },
+  styles: { type: [String, Object, Array], default: '' },
+  overlayStyle: { type: [String, Object, Array], default: '' },
+  contentStyle: { type: [String, Object, Array], default: '' },
   lockScroll: { type: Boolean, default: true },
   hideOverlay: { type: Boolean, default: false },
   clickToClose: { type: Boolean, default: true },

dist/VueFinalModal.esm.js

@@ -3,6 +3,7 @@ title: Recommended use
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 3
 category: Examples
+version: 0.17
 ---
 
 
@@ -44,7 +45,8 @@ You can create a `higher-order component` easily and can customize `template`, `
 
 <script>
 export default {
-  name: 'VModal'
+  name: 'VModal',
+  inheritAttrs: false
 }
 </script>
 

dist/VueFinalModal.esm.js.map

@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.14
+version: 0.17
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -276,11 +276,35 @@ Custom class names for the modal content element.
 
 ### `overlayClass`
 
-- Type: `String`
+- Type: `[String, Object, Array]`
 - Default: `''`
 
 Custom class names for the modal overlay element.
 
+### `styles`
+<badge>v0.17+</badge>
+
+- Type: `[String, Object, Array]`
+- Default: `''`
+
+Style that will be applied to the modal container element.
+
+### `contentStyle`
+<badge>v0.17+</badge>
+
+- Type: `[String, Object, Array]`
+- Default: `''`
+
+Style that will be applied to the modal content element.
+
+### `overlayStyle`
+<badge>v0.17+</badge>
+
+- Type: `[String, Object, Array]`
+- Default: `''`
+
+Style that will be applied to the modal overlay element.
+
 ### `transition`
 
 - Type: `String`

dist/VueFinalModal.umd.js

@@ -23,7 +23,8 @@
 
 <script>
 export default {
-  name: 'VModal'
+  name: 'VModal',
+  inheritAttrs: false
 }
 </script>
 

dist/VueFinalModal.umd.js.map

@@ -20,7 +20,7 @@
         v-show="!hideOverlay && visibility.overlay"
         class="vfm__overlay vfm--overlay vfm--absolute vfm--inset"
         :class="overlayClass"
-        :aria-expanded="visibility.overlay.toString()"
+        :style="overlayStyle"
       ></div>
     </transition>
     <transition
@@ -35,6 +35,7 @@
         ref="vfmContainer"
         class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
         :class="[classes, { 'vfm--cursor-pointer': clickToClose }]"
+        :style="styles"
         :aria-expanded="visibility.modal.toString()"
         role="dialog"
         aria-modal="true"
@@ -44,6 +45,7 @@
           ref="vfmContent"
           class="vfm__content vfm--cursor-auto"
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
+          :style="contentStyle"
           @click.stop
         >
           <slot />
@@ -72,17 +74,23 @@ function validateAttachTarget(val) {
   return val.nodeType === Node.ELEMENT_NODE
 }
 
-const CLASS_TYPES = [String, Object, Array]
+const STYLE_PROP = {
+  type: [String, Object, Array],
+  default: ''
+}
 
 export default {
   name: 'VueFinalModal',
   props: {
     name: { type: String, default: null },
     value: { type: Boolean, default: false },
     ssr: { type: Boolean, default: true },
-    classes: { type: CLASS_TYPES, default: '' },
-    overlayClass: { type: CLASS_TYPES, default: '' },
-    contentClass: { type: CLASS_TYPES, default: '' },
+    classes: STYLE_PROP,
+    overlayClass: STYLE_PROP,
+    contentClass: STYLE_PROP,
+    styles: STYLE_PROP,
+    overlayStyle: STYLE_PROP,
+    contentStyle: STYLE_PROP,
     lockScroll: { type: Boolean, default: true },
     hideOverlay: { type: Boolean, default: false },
     clickToClose: { type: Boolean, default: true },

docs/content/en/examples/recommended-use.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-final-modal",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.",
   "private": false,
   "main": "dist/VueFinalModal.umd.js",