major rework

Author: paulpflug

README.md

@@ -15,46 +15,95 @@ or include `build/bundle.js`.
 ```coffee
 # in your component
 components:
-  "card": require("vue-card/card")
-  "card-reveal": require("vue-card/card-reveal")
-  "card-toggle": require("vue-card/card-toggle")
+  "card": require("vue-card")
 # or, when using bundle.js
 components:
   "card": window.vueComps.card
-  "card-reveal": window.vueComps.cardReveal
-  "card-toggle": window.vueComps.cardToggle
 ```
 ```html
 <card>
-  <card-toggle>
-    // some image
-  </cards-toggle>
-  <div>
-    <card-toggle>The title</card-toggle>
-    some short content
-  </div>
-  <card-reveal>
-    <card-toggle>The revealed title</card-toggle>
-    The revealed content
-  </card-reveal>
+  <img slot="img" src="..."></img>
+  <span slot="title">The title</span>
+  <p>The content</p>
+  <span slot="revealTitle">The revealed title</span>
+  <p slot="reveal">The revealed content</p>
 </card>
 ```
 For examples see [`dev/`](https://github.com/vue-comps/vue-card/tree/master/dev).
 
 #### Props
-card
 
-| Name | type | default | description |
-| ---:| --- | ---| --- |
-| class | Array or Object | ["card"] | class of the `div`|
+Name | type | default | description
+---:| --- | ---| ---
+z-index | Number | 50 | z-index of the `div`
+transition | String | - | name of a vue transition. [Detailed description](#transition)
+revealStyle | Object / String | {} | style which will be passed down to reavel `div`
+is-opened | Boolean | false | (two-way) set to open / close
 
-card-reveal
+#### slots
 
-| Name | type | default | description |
-| ---:| --- | ---| --- |
-| class | Array or Object | ["card-reveal"] | class of the `div`|
-| z-index | Number | 50 | z-index of the `div` |
-| transition | function | no animation | used to animate the `div`. Arguments: `{el,style,cb}` |
+Name | description
+---:| ---
+default | content
+title | will reveal on click
+img | above title. will reveal on click
+reveal | content of reveal
+revealTitle | title of reveal. If absent, reveal will be disabled.
+action | action div below
+
+#### Events
+Name |  description
+---:| ---
+before-enter | will be called before open animation
+after-enter |  will be called when opened
+before-leave |  will be called before close animation
+after-leave |  will be called when closed
+toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way `is-opened` prop
+
+#### Transition
+
+You can provide a vue transition like this:
+```js
+Vue.transition("fade",{
+  // your transition
+})
+// or in the instance:
+transitions: {
+  fade: {
+    // your transition
+  }
+}
+// usage:
+template: "<card transition='fade'></card>"
+```
+
+You can write to the reveal style in your hooks (remeber it needs a tick to get applied):
+```js
+Velocity = require("velocity-animate")
+beforeEnter: function() {
+  height = this.$el.clientHeight
+  this.rStyle.top = height + "px"
+  this.rStyle.opacity = 0
+  // content of this.rStyle overwrites content of this.revealStyle
+},
+enter: function(el,done) {
+  this.$nextTick(function(){
+    Velocity(el, {top: 0, opacity: 1},{
+      duration: 1000,
+      easing: "easeOutQuart",
+      queue: false,
+      complete: done
+      })
+  })
+}
+```
+
+## Changelog
+- 1.0.0  
+now using vue transitions  
+events are renamed after vue transitions  
+only using a single component now, with multiple slots  
+added unit tests  
 
 # Development
 Clone repository.

build/common.coffee

@@ -1,4 +1,2 @@
 window.vueComps ?= {}
 window.vueComps.card = require('../card.js')
-window.vueComps.cardToggle = require('../card-toggle.js')
-window.vueComps.cardReveal = require('../card-reveal.js')

dev/basic.vue

@@ -1,22 +1,44 @@
-<template lang="jade">
+<template lang="pug">
 .container
-  card(style="display:inline-block")
-    card-toggle
-      img(src="http://materializecss.com/images/office.jpg",width=200)
-    card-toggle(style="border:1px solid black") Title (click me)
-    .card-content Some Content
-    card-reveal(style="background-color:white")
-      card-toggle(style="border:1px solid black") Title (click me)
-      .card-content Significantly more Content
+  card(transition="card",reveal-style="background-color:white",v-ref:card)
+    img(slot="img" src="http://materializecss.com/images/office.jpg",width=200)
+    span(slot="title") Title (click me)
+    p Some Content
+    span(slot="revealTitle")  Title (click me)
+    p(slot="reveal") Significantly more Content
   p
     a(href="https://github.com/vue-comps/vue-card/blob/master/dev/basic.vue") source
 </template>
 
 <script lang="coffee">
+Velocity = require("velocity-animate")
+cancel = (el) -> Velocity el, "stop"
 module.exports =
   components:
     "card" : require "../src/card.vue"
-    "card-reveal" : require "../src/card-reveal.vue"
-    "card-toggle" : require "../src/card-toggle.vue"
-
+  transitions:
+    card:
+      css: false
+      leaveCancelled: cancel
+      enterCancelled: cancel
+      beforeEnter: ->
+        height = @$el.clientHeight
+        @rStyle.top = height + "px"
+        @rStyle.opacity = 0
+      enter: (el,done) ->
+        @$nextTick ->
+          Velocity el, {top: 0, opacity: 1},{
+            duration: 1000
+            easing: "easeOutQuart"
+            queue: false
+            complete: done
+            }
+      leave: (el,done) ->
+        height = el.parentElement.clientHeight
+        Velocity el, {top: height+"px", opacity: 0},{
+          duration: 350
+          easing: "easeOutQuart"
+          queue: false
+          complete: done
+          }
 </script>

karma.conf.coffee

@@ -29,4 +29,4 @@ module.exports = (config) ->
       require("karma-chai-spies")
       require("karma-vue-component")
     ]
-    browsers: ["Chrome","Firefox"]
+    browsers: ["Chromium","Firefox"]

package.json

@@ -8,7 +8,7 @@
     "email": "[email protected]"
   },
   "license": "MIT",
-  "main": "cards.js",
+  "main": "card.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/vue-comps/vue-card"
@@ -17,47 +17,35 @@
     "node": "*"
   },
   "dependencies": {
-    "vue-filters": "^0.1.6"
+    "vue-mixins": "^0.2.18"
   },
   "devDependencies": {
-    "babel-core": "^6.7.7",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-runtime": "^5.8.34",
     "chai": "^3.5.0",
     "chai-spies": "^0.7.1",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.10.0",
-    "css-loader": "^0.23.1",
     "gh-pages": "^0.11.0",
-    "jade": "^1.11.0",
-    "karma": "^0.13.22",
+    "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
     "karma-chai-dom": "^1.1.0",
     "karma-chai-spies": "^0.1.4",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-mocha": "^0.2.2",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-mocha": "^1.1.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.26",
     "karma-vue-component": "^0.1.0",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.4.5",
-    "parse5": "^2.1.5",
-    "script-runner": "^0.1.4",
-    "style-loader": "^0.13.1",
-    "stylus-loader": "^2.0.0",
-    "template-html-loader": "0.0.3",
-    "vue": "^1.0.21",
-    "vue-compiler": "^0.1.1",
+    "karma-webpack": "^1.8.0",
+    "mocha": "^3.0.2",
+    "pug": "^2.0.0-beta6",
+    "script-runner": "^0.1.5",
+    "velocity-animate": "^1.2.3",
+    "vue": "^1.0.26",
+    "vue-compiler": "^0.3.0",
     "vue-dev-server": "^0.2.10",
-    "vue-hot-reload-api": "^1.3.2",
-    "vue-html-loader": "^1.2.2",
-    "vue-loader": "^8.2.3",
-    "vue-style-loader": "^1.0.0",
-    "vueify-insert-css": "^1.0.0",
-    "webpack": "^1.13.0"
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.2",
+    "webpack": "^1.13.2"
   },
   "keywords": [
     "card",
@@ -70,7 +58,7 @@
     "build:webpack": "webpack --config build/webpack.config.coffee",
     "build": "run-npm build:*",
     "dev": "vue-dev-server",
-    "watch": "karma start --browsers Chrome --auto-watch --reporters spec",
+    "watch": "karma start --browsers Chromium --auto-watch --reporters spec",
     "test": "karma start --single-run",
     "preversion": "npm test",
     "version": "npm run build && git add .",