Merge pull request #104 from logaretm/refactor/render-fns

[refactor] convert to render functions
baianat · Jun 30, 2019 · 7bd674f · 7bd674f
2 parents a09779b + 80d6dcd
commit 7bd674f
Show file tree

Hide file tree

Showing 18 changed files with 846 additions and 609 deletions.
diff --git a/docs/examples.md b/docs/examples.md
@@ -792,11 +792,62 @@ export default {
 </script>
 ```
 
+## Dynamic Slides
+
+Hooper plays well with dynamic slides as well.
+
+<template>
+  <input type="text" v-model="body">
+  <a href="#" @click.prevent="addSlide">Add</a>
+  <hooper>
+    <slide v-for="slide in slides">
+      {{ slide.body }}
+    </slide>
+
+    <hooper-navigation slot="hooper-addons"></hooper-navigation>
+  </hooper>
+</template>
+
+```vue
+<template>
+  <div>
+    <input type="text" v-model="body">
+    <a href="#" @click.prevent="addSlide">Add</a>
+    <hooper>
+      <slide v-for="slide in slides">
+        {{ slide.body }}
+      </slide>
+
+      <hooper-navigation slot="hooper-addons"></hooper-navigation>
+    </hooper>
+  </div>
+</template>
+
 <script>
 export default {
   data () {
     return {
-      myCarouselData: 0
+      slides: [],
+      body: 'New Slide 1'
+    }
+  },
+  methods: {
+    addSlide () {
+      this.slides.push({ body: this.body || 'New Slide' });
+      this.body = 'New Slide ' + this.slides.length;
+    }
+  }
+}
+</script>
+```
+
+<script>
+export default {
+  data () {
+    return {
+      myCarouselData: 0,
+      slides: [],
+      body: 'New Slide'
     }
   },
   watch: {
@@ -805,6 +856,10 @@ export default {
     }
   },
   methods: {
+    addSlide () {
+      this.slides.push({ body: this.body || 'New Slide' });
+      this.body = 'New Slide ' + this.slides.length;
+    },
     slidePrev() {
       this.$refs.myCarousel.slidePrev();
     },

diff --git a/package.json b/package.json
@@ -24,36 +24,36 @@
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "chalk": "^2.4.2",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^5.0.0",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.2.2",
+    "eslint-plugin-vue": "^5.2.3",
     "filesize": "^4.1.2",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "gzip-size": "^5.1.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^2.4.1",
+    "husky": "^2.5.0",
     "jest": "24.8.0",
     "lint-staged": "^8.2.1",
     "mkdirp": "^0.5.1",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "progress-bar-webpack-plugin": "^1.12.1",
-    "rollup": "^1.15.6",
-    "rollup-plugin-babel": "^4.3.2",
+    "rollup": "^1.16.2",
+    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-css-only": "^1.0.0",
-    "rollup-plugin-node-resolve": "^5.0.3",
+    "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-vue": "^5.0.0",
     "uglify-js": "^3.6.0",
     "vue": "^2.6.10",
     "vue-jest": "^3.0.4",
     "vue-server-renderer": "^2.6.10",
     "vue-template-compiler": "^2.6.10",
-    "vuepress": "^1.0.1",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
+    "vuepress": "^1.0.2",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"
   },
   "license": "MIT",