Add object as valid prop on perPage

robbinjohansson · Oct 19, 2018 · dadc736 · dadc736
1 parent 19d1da7
commit dadc736
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to `v-siema` will be documented in this file.
 
+## 0.0.4
+### Fixed
+- Add object as valid prop on `perPage`. [Example](https://codepen.io/pawelgrzybek/pen/LbgoVK)
+
 ## 0.0.3
 ### Fixed
 - Fix typo in `Siema.insert` ([e84e2be](https://github.com/robbinfellow/v-siema/commit/e84e2be017ca8e6243bda20a767ce65de9994e1c))

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 Vue wrapper for Siema carousel.
 
-> Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said "do that shit yourself". It is 100% open source and [available on Github.](https://github.com/pawelgrzybek/siema)
+> Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. It is 100% open source and [available on Github.](https://github.com/pawelgrzybek/siema)
 
 Full docs with examples: [https://pawelgrzybek.com/siema/](https://pawelgrzybek.com/siema/).
 
@@ -60,8 +60,8 @@ Display the component using any custom markup that fits your use case:
 
         <!-- Example using prev/next buttons -->
         <div>
-            <a href="#" @click.prevent="prev">Prev</a>
-            <a href="#" @click.prevent="next">Next</a>
+            <a @click="prev">Prev</a>
+            <a @click="next">Next</a>
         </div>
     </div>
 </template>
@@ -96,20 +96,20 @@ export default {
 
 Prop                | Data Type  | Default  | Required   | Description
 ------------------- | ---------- | --------- | -------   | -----------
-`autoplay`          | Boolean    | `false`   | `false`   | Enable autoplay
-`autoplay-duration` | Number     | `3000`    | `false`   | Autoplay duration between slide change
-`selector`          | String     | `siema`   | `false`   | The selector to use as a carousel
-`duration`          | Number     | `500`     | `false`   | Slide transition duration in milliseconds
-`easing`            | String     | `ease`    | `false`   | CSS transition-timing-function — describes acceleration curve
-`per-page`          | Number     | `1`       | `false`   | The number of slides to be shown per page
-`start-index`       | Number     | `0`       | `false`   | Index (zero-based) of the starting slide
-`draggable`         | Boolean    | `true`    | `false`   | Use dragging and touch swiping
-`multiple-drag`     | Boolean    | `true`    | `false`   | Allow dragging to move multiple slides
-`threshold`         | Number     | `20`      | `false`   | Touch and mouse dragging threshold (in px)
-`loop`              | Boolean    | `false`   | `false`   | Enable loop
-`rtl`               | Boolean    | `false`   | `false`   | Enables layout for languages written from right to left
-`@init`             | Function   |           | `false`   | Runs immediately after initialization
-`@change`           | Function   |           | `false`   | Runs after slide change
+`autoplay`          | Boolean        | `false`   | `false`   | Enable autoplay
+`autoplay-duration` | Number         | `3000`    | `false`   | Autoplay duration between slide change
+`selector`          | String         | `siema`   | `false`   | The selector to use as a carousel
+`duration`          | Number         | `500`     | `false`   | Slide transition duration in milliseconds
+`easing`            | String         | `ease`    | `false`   | CSS transition-timing-function — describes acceleration curve
+`per-page`          | Number, Object | `1`       | `false`   | The number of slides to be shown per page
+`start-index`       | Number         | `0`       | `false`   | Index (zero-based) of the starting slide
+`draggable`         | Boolean        | `true`    | `false`   | Use dragging and touch swiping
+`multiple-drag`     | Boolean        | `true`    | `false`   | Allow dragging to move multiple slides
+`threshold`         | Number         | `20`      | `false`   | Touch and mouse dragging threshold (in px)
+`loop`              | Boolean        | `false`   | `false`   | Enable loop
+`rtl`               | Boolean        | `false`   | `false`   | Enables layout for languages written from right to left
+`@init`             | Function       |           | `false`   | Runs immediately after initialization
+`@change`           | Function       |           | `false`   | Runs after slide change
 
 ## API
 
@@ -145,7 +145,7 @@ Prints current slide index.
 ### Extras
 
 **`this.$refs.siema.init();`**  
-Initiate the slider instance. Useful for when example the `destroy()` method is being used and you'd want a way to re-init the slider manually. Please note that the slider component is automatically initiated when mounted.
+Initiate the slider instance. Useful when you'd want to initiate the slider manually. Please note that the slider component is automatically initiated when mounted.
 
 ## Changelog
 

diff --git a/dist/index.js b/dist/index.js
@@ -158,7 +158,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 required: false
             },
             perPage: {
-                type: Number,
+                type: [Number, Object],
                 default: 1,
                 required: false
             },

diff --git a/docs/build/app.js b/docs/build/app.js
@@ -11204,7 +11204,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 required: false
             },
             perPage: {
-                type: Number,
+                type: [Number, Object],
                 default: 1,
                 required: false
             },

diff --git a/docs/index.html b/docs/index.html
@@ -19,8 +19,8 @@
         </div>
     </siema>
     <div>
-        <a href="#" @click.prevent="prev">Prev</a>
-        <a href="#" @click.prevent="next">Next</a>
+        <a @click="prev">Prev</a>
+        <a @click="next">Next</a>
     </div>
 </div>
 <script src="/build/app.js"></script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "v-siema",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Vue wrapper for Siema carousel",
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",

diff --git a/src/components/Siema.vue b/src/components/Siema.vue
@@ -35,7 +35,7 @@ export default {
             required: false,
         },
         perPage: {
-            type: Number,
+            type: [Number, Object],
             default: 1,
             required: false,
         },