Added "top-right" slot fro custom "Close" buttons (#16)

demo/src/components/ConditionalModal.vue

@@ -1,6 +1,5 @@
 <template>
   <modal name="conditional-modal"
-         :height="200"
          :adaptive="true"
          @before-open="beforeOpen">
     <div style="padding:30px; text-align: center">

demo/src/components/DogProfileModal.vue

@@ -5,6 +5,9 @@
          :height="260"
          :width="260"
          @opened="opened">
+    <div slot="top-right" class="ct-top-right">
+      HIDE THE DOGGY
+    </div>
     <img src="/static/cute_dog.gif" />
   </modal>
 </template>
@@ -30,6 +33,15 @@ export default {
     }
   }
 
+  .ct-top-right {
+    cursor: pointer;
+    padding-top: 20px;
+    padding-right: 30px;
+    font-weight: 600;
+    color: white;
+    text-shadow: 0 0px 20px black;
+  }
+
   .scale-enter-active,
   .scale-leave-active {
     transition: all 0.5s;

dist/index.js

@@ -525,6 +525,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
 
 
 
@@ -931,7 +934,7 @@ exports = module.exports = __webpack_require__(2)();
 
 
 // module
-exports.push([module.i, ".v--modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .v--modal-box[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.v--modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}", ""]);
+exports.push([module.i, ".v--modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .v--modal-box[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.v--modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}.v--modal-top-right[data-v-40dd3b1e]{display:block;position:absolute;right:0;top:0}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}", ""]);
 
 // exports
 
@@ -994,7 +997,9 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         _vm.toggle(false)
       }
     }
-  }, [_c('transition', {
+  }, [_c('div', {
+    staticClass: "v--modal-top-right"
+  }, [_vm._t("top-right")], 2), _vm._v(" "), _c('transition', {
     attrs: {
       "name": _vm.transition
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {
@@ -11,7 +11,8 @@
   "keywords": [
     "vue",
     "vuejs",
-    "modal"
+    "modal",
+    "vue-js-modal"
   ],
   "bugs": {
     "url": "https://github.com/euvl/vue-js-modal/issues"

src/Modal.vue

@@ -6,6 +6,9 @@
          :aria-expanded="visible.toString()"
          :data-modal="name"
          @mousedown.stop="toggle(false)">
+      <div class="v--modal-top-right">
+        <slot name="top-right"/>
+      </div>
       <transition :name="transition">
         <div v-if="visibility.modal"
              ref="modal"
@@ -72,7 +75,15 @@
       },
       height: {
         type: Number,
-        default: 300
+        default: 300,
+        /*
+        [Number, String],
+        validator (value) {
+          return typeof value === 'string'
+            ? (value === 'auto')
+            : true
+        }
+        */
       },
       pivotX: {
         type: Number,
@@ -362,6 +373,13 @@
     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;
   }