Removed props object when passing props

README.md

@@ -175,7 +175,7 @@ A reference name of the modal. Use to define the css class of that modal
 A Vue component to display inside the modal
 
 #### props
-A props object that will be passed to the component inside the modal, with the name "**props**".
+A props object that will be passed to the component inside the modal.
 
 example:
 
@@ -189,6 +189,7 @@ methods: {
 		this.$vuedals.open({
 			name: 'test-component',
 
+            // Pass these props to the component
 			props: {
 				firstname: 'John',
 				lastname: 'Doe'
@@ -197,12 +198,12 @@ methods: {
 			component: {
 				name: 'show-john-doe',
 
-				// Important, the name of the prop is "props"
-				props: ['props'],
+				// Expect these props values
+				props: ['firstname', 'lastname'],
 
 				template: `
 					<div>
-						Hi {{ props.firstname }} {{ props.lastname }}
+						Hi {{ firstname }} {{ lastname }}
 					</div>
 				`
 			}
@@ -240,6 +241,7 @@ Callback function to call when the modal is closed. Any given data is passed as
 this.$vuedals.open({
 	name: 'test-component',
 
+    // Pass these props to the component
 	props: {
 		firstname: 'John',
 		lastname: 'Doe'
@@ -248,11 +250,12 @@ this.$vuedals.open({
 	component: {
 		name: 'show-john-doe',
 
-		props: ['props'],
+        // Pass these props to the component
+		props: ['firstname', 'lastname'],
 
 		template: `
 			<div>
-				Hi {{ props.firstname }} {{ props.lastname }}
+				Hi {{ firstname }} {{ lastname }}
 			</div>
 		`
 	},
@@ -274,6 +277,7 @@ Example:
 this.$vuedals.open({
 	name: 'test-component',
 
+	// Pass these props to the component
 	props: {
 		firstname: 'John',
 		lastname: 'Doe'
@@ -282,11 +286,12 @@ this.$vuedals.open({
 	component: {
 		name: 'show-john-doe',
 
-		props: ['props'],
+		// expect these props
+		props: ['firstname', 'lastname'],
 
 		template: `
 			<div>
-				Hi {{ props.firstname }} {{ props.lastname }}
+				Hi {{ firstname }} {{ lastname }}
 			</div>
 		`
 	},

dist/vuedals.js

@@ -143,7 +143,7 @@ __webpack_require__(26)(content,{});content.locals&&(module.exports=content.loca
 function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(25)(),
 // imports
 // module
-exports.push([module.id,'.vuedals{background-color:rgba(0,0,0,.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1050;overflow-x:hidden;overflow-y:auto;perspective:500px;transition:opacity .4s ease}.vuedal{background:#fff;box-shadow:3px 5px 20px #333;padding:20px;margin:30px 0;transition:all .6s ease;position:absolute;left:50%;transform:translateX(-50%);will-change:transform;width:650px}.vuedal.xl{width:1024px}.vuedal.lg{width:850px}.vuedal.sm{width:550px}.vuedal.xs{width:350px}.vuedal.disabled{opacity:.2}.vuedal.disabled:after{background:transparent;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:100}.vuedal header{border-bottom:1px solid #eee;min-height:32px;margin-bottom:20px}.vuedal header .title{font-size:21px;font-weight:100}.vuedal header .close{float:right;font-size:26px;font-weight:100;line-height:21px}.vuedal-enter,.vuedal-leave-active{opacity:0}.vuedal-enter .vuedal,.vuedal-leave-active .vuedal{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.95)}',""])},/* 25 */
+exports.push([module.id,'.vuedals{background-color:rgba(0,0,0,.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1050;overflow-x:hidden;overflow-y:auto;perspective:500px;transition:opacity .4s ease}.vuedal{background:#fff;box-shadow:3px 5px 20px #333;padding:20px;margin:30px 0;transition:all .6s ease;position:absolute;left:50%;transform:translateX(-50%);will-change:transform;width:650px}.vuedal.xl{width:1024px}.vuedal.lg{width:850px}.vuedal.sm{width:550px}.vuedal.xs{width:350px}.vuedal.disabled{opacity:.2}.vuedal.disabled:after{background:transparent;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:100}.vuedal header{border-bottom:1px solid #eee;min-height:32px;margin-bottom:20px}.vuedal header .title{font-size:21px;font-weight:100}.vuedal header .close{float:right;font-size:26px;font-weight:100;line-height:21px;cursor:pointer}.vuedal-enter,.vuedal-leave-active{opacity:0}.vuedal-enter .vuedal,.vuedal-leave-active .vuedal{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.95)}',""])},/* 25 */
 /***/
 function(module,exports){/*
 		MIT License http://www.opensource.org/licenses/mit-license.php
@@ -262,4 +262,4 @@ function(module,exports,__webpack_require__){
 // 7.1.13 ToObject(argument)
 var defined=__webpack_require__(39);module.exports=function(it){return Object(defined(it))}},/* 51 */
 /***/
-function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("transition",{attrs:{tag:"div",name:"vuedal"}},[_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.vuedals.length,expression:"vuedals.length"}],staticClass:"vuedals"},_vm._l(_vm.vuedals,function(vuedal,index){return _c("div",{key:vuedal,staticClass:"vuedal",class:_vm.getCssClasses(index)},[vuedal.title||vuedal.dismisable?_c("header",[_c("span",{staticClass:"title"},[_vm._v(_vm._s(vuedal.title))]),_vm._v(" "),vuedal.dismisable?_c("span",{staticClass:"close",on:{click:function($event){_vm.dismiss()}}},[_vm._v("×")]):_vm._e()]):_vm._e(),_vm._v(" "),_c(vuedal.component,{tag:"component",attrs:{props:vuedal.props}})],1)}))])},staticRenderFns:[]}}])});
+function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("transition",{attrs:{tag:"div",name:"vuedal"}},[_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.vuedals.length,expression:"vuedals.length"}],staticClass:"vuedals"},_vm._l(_vm.vuedals,function(vuedal,index){return _c("div",{key:vuedal,staticClass:"vuedal",class:_vm.getCssClasses(index)},[vuedal.title||vuedal.dismisable?_c("header",[_c("span",{staticClass:"title"},[_vm._v(_vm._s(vuedal.title))]),_vm._v(" "),vuedal.dismisable?_c("span",{staticClass:"close",on:{click:function($event){_vm.dismiss()}}},[_vm._v("×")]):_vm._e()]):_vm._e(),_vm._v(" "),_c(vuedal.component,_vm._b({tag:"component"},"component",vuedal.props))],1)}))])},staticRenderFns:[]}}])});