Updated example

examples/src/App.vue

@@ -1,37 +1,19 @@
 <template>
-  <div id="app">
+<div id="app">
+  <modal name="example-modal" transition="nice-modal-fade" :min-width="200" :min-height="200" :delay="100" :adaptive="adaptive" :resizable="resizable">
+    <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
+      Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
+      implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
+      after tactical vortals. Uniquely productize enabled platforms vis-a-vis timely processes. Conveniently unleash standards compliant niches through highly efficient testing procedures. Rapidiously enable pandemic niche markets whereas viral markets.
+      Assertively simplify alternative partnerships and error-free e-commerce. Professionally formulate 24/365 internal or "organic" sources through equity invested mindshare. Globally redefine unique best practices for.
+    </div>
+  </modal>
+
   <h2>Vue.js Modal</h2>
 
   <pre>
     npm install --save vue-js-modal
   </pre>
-    <modal name="example-modal"
-                transition="nice-modal-fade"
-                :min-width="200"
-                :min-height="200"
-                :delay="100"
-                :adaptive="adaptive"
-                :resizable="resizable">
-      <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
-          Appropriately exploit professional infrastructures rather than unique
-          growth strategies. Assertively build leveraged growth strategies
-          vis-a-vis multimedia based vortals. Progressively simplify
-          cross-platform value through interactive imperatives. Objectively
-          implement enabled web services after plug-and-play ROI. Distinctively
-          impact inexpensive schemas before installed base imperatives.
-          Holisticly benchmark pandemic process improvements without wireless
-          experiences.
-          Efficiently create worldwide partnerships after tactical vortals.
-          Uniquely productize enabled platforms vis-a-vis timely processes.
-          Conveniently unleash standards compliant niches through highly
-          efficient testing procedures. Rapidiously enable pandemic niche
-          markets whereas viral markets.
-          Assertively simplify alternative partnerships and error-free
-          e-commerce. Professionally formulate 24/365 internal or "organic"
-          sources through equity invested mindshare. Globally redefine unique
-          best practices for.
-      </div>
-    </modal>
 
   <table>
     <tr>
@@ -49,25 +31,54 @@
     <tr>
       <td><b>Resizable</b></td>
       <td>
-        Has a small arrow on the bottom-right corner
+        Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
-        (customizable) that you can drag to change the size of the modal
       </td>
     </tr>
     <tr>
       <td><b>Mixed</b></td>
       <td>
-        Is resizable, but if the size of the screen is changed
+        Is resizable, but if the size of the screen is changed modal will return to its initial size as well as it will try to adapt to the page size
-        modal will return to its initial size as well as it will try to adapt to
-        the page size
       </td>
     </tr>
   </table>
 
+  <div style="margin-top: 20px; margin-bottom: 20px;">
     <button @click="show(false, false)">Simple</button>
     <button @click="show(true, false)">Resizable</button>
     <button @click="show(false, true)">Adaptive</button>
     <button @click="show(true, true)">Mixed</button>
   </div>
+
+  <table class="props">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(prop, name) in props">
+        <td>
+          {{name}}
+        </td>
+        <td>
+          <template v-if="Array.isArray(prop.type)">
+            <span v-for="type in prop.type">
+              {{type.name}} /
+            </span>
+          </template>
+          <template v-else>
+            <span>{{prop.type.name}}</span>
+          </template>
+        </td>
+        <td>
+          {{prop.default}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 </template>
 
 <script>
@@ -76,7 +87,49 @@ export default {
   data() {
     return {
       resizable: false,
-      adaptive: false
+      adaptive: false,
+
+      props: {
+        name: {
+          required: true,
+          type: [String, Number],
+        },
+        delay: {
+          type: Number,
+          default: 0,
+        },
+        resizable: {
+          type: Boolean,
+          default: false
+        },
+        adaptive: {
+          type: Boolean,
+          default: false
+        },
+        transition: {
+          type: String,
+        },
+        classes: {
+          type: [String, Array],
+          default: 'nice-modal',
+        },
+        width: {
+          type: Number,
+          default: 600
+        },
+        height: {
+          type: Number,
+          default: 300
+        },
+        minWidth: {
+          type: Number,
+          default: 0
+        },
+        minHeight: {
+          type: Number,
+          default: 0
+        }
+      }
     }
   },
   methods: {
@@ -110,7 +163,8 @@ pre {
     color: #2c3e50;
 }
 
-h1, h2 {
+h1,
+h2 {
     font-weight: normal;
 }
 
@@ -126,11 +180,14 @@ button {
 
     color: #4db3ff;
     border: 1px solid #4db3ff;
-
     &:hover {
         color: #20a0ff;
         border: 1px solid #20a0ff;
     }
 }
 
+table.props {
+  width: 100%;
+  text-align: left;
+}
 </style>