updated deps / using vue-mixins/vue

paulpflug · paulpflug · commit a2f004f587a0 · 2016-08-11T18:57:03.000+02:00
diff --git a/dev/basic.vue b/dev/basic.vue
@@ -1,29 +1,40 @@
-<template lang="jade">
+<template lang="pug">
 .container
   p
     a(href="https://github.com/vue-comps/vue-comps-waves/blob/master/dev/basic.vue") source
   waves
     button.btn black ripple
-  waves(color="blue",style="margin-left:20px")
+  waves(
+    color="blue"
+    style="margin-left:20px"
+    )
     button.btn blue ripple
 
-  waves(color="white",style="margin-left:20px")
+  waves(
+    color="white"
+    style="margin-left:20px"
+    )
     button.btn white ripple
   br
-  waves(color="red",style="width:100px;height:100px;background-color:blue")
-  waves(color="blue",style="margin-left:20px")
+  waves(
+    color="red"
+    style="width:100px;height:100px;background-color:blue"
+    )
+  waves(
+    color="blue"
+    style="margin-left:20px"
+    )
     div(style="width:100px;height:100px;background-color:red")
 </template>
 
 <script lang="coffee">
 require "hammer-timejs"
 module.exports =
   mixins:[
-    require("vue-mixins/getVue")
+    require("vue-mixins/vue")
   ]
   beforeCompile: ->
-    Vue = @getVue()
-    Vue.use(require('vue-touch'))
+    @Vue.use(require('vue-touch'))
   components:
     "waves" : require "../src/waves.vue"
 
diff --git a/package.json b/package.json
@@ -17,54 +17,39 @@
     "node": "*"
   },
   "dependencies": {
-    "vue-mixins": "^0.2.6"
-  },
-  "peerDependecies": {
-    "vue-touch": "^1.0.2",
-    "velocity-animate": "^1.2.3"
+    "vue-mixins": "^0.2.14"
   },
   "devDependencies": {
-    "hammer-timejs": "^1.1.0",
-    "babel-core": "^6.7.6",
-    "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",
+    "hammer-timejs": "^1.1.0",
+    "karma": "^1.1.2",
     "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": "^1.0.1",
+    "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",
+    "karma-webpack": "^1.8.0",
+    "mocha": "^3.0.2",
+    "pug": "^2.0.0-beta5",
+    "script-runner": "^0.1.5",
     "template-html-loader": "0.0.3",
     "velocity-animate": "^1.2.3",
-    "vue": "^1.0.21",
-    "vue-compiler": "^0.1.1",
+    "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",
-    "vue-touch": "^1.0.2",
-    "vueify-insert-css": "^1.0.0",
-    "webpack": "^1.13.0"
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-touch": "^1.1.0",
+    "webpack": "^1.13.1"
   },
   "keywords": [
     "waves",
diff --git a/src/gradient-store-component.vue b/src/gradient-store-component.vue
@@ -1,13 +1,34 @@
 // out: ..
-<template lang="jade">
-svg(xmlns="http://www.w3.org/2000/svg",style="position:absolute;opacity:0;visibility:hidden;pointer-events:none")
+<template lang="pug">
+svg(
+  xmlns="http://www.w3.org/2000/svg"
+  style="position:absolute;opacity:0;visibility:hidden;pointer-events:none")
   defs
-    radialGradient(:id="hash" cx="50%" cy="50%" r="75%" v-for="(color,hash) in colors")
-      stop(offset="0%",style="stop-opacity:0.2;",:style="{stopColor:color}")
-      stop(offset="40%",style="stop-opacity:0.3;",:style="{stopColor:color}")
-      stop(offset="50%",style="stop-opacity:0.4;",:style="{stopColor:color}")
-      stop(offset="60%",style="stop-opacity:0.5;",:style="{stopColor:color}")
-      stop(offset="70%",style="stop-color:rgb(255,255,255);stop-opacity:0")
+    radialGradient(
+      v-bind:id="hash"
+      cx="50%"
+      cy="50%"
+      r="75%"
+      v-for="(color,hash) in colors")
+      stop(
+        offset="0%"
+        style="stop-opacity:0.2;"
+        v-bind:style="{stopColor:color}")
+      stop(
+        offset="40%"
+        style="stop-opacity:0.3;"
+        v-bind:style="{stopColor:color}")
+      stop(
+        offset="50%"
+        style="stop-opacity:0.4;"
+        v-bind:style="{stopColor:color}")
+      stop(
+        offset="60%"
+        style="stop-opacity:0.5;"
+        v-bind:style="{stopColor:color}")
+      stop(
+        offset="70%"
+        style="stop-color:rgb(255,255,255);stop-opacity:0")
 </template>
 
 <script lang="coffee">
diff --git a/src/waves.vue b/src/waves.vue
@@ -1,14 +1,28 @@
 // out: ..
-<template lang="jade">
-div(:style="{position:'relative',overflow:'hidden',display:'inline-block',touchAction:'auto'}",v-touch:tap="show",@mouseup="release",@mousedown="show")
-  div(style="position:absolute;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;line-height:0",v-el:ripple-div)
+<template lang="pug">
+div(
+  v-bind:style="{position:'relative',overflow:'hidden',display:'inline-block',touchAction:'auto'}"
+  v-touch:tap="show"
+  @mouseup="release"
+  @mousedown="show"
+  )
+  div(
+    style="position:absolute;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;line-height:0"
+    v-el:ripple-div
+    )
     svg(
-      xmlns="http://www.w3.org/2000/svg",
-      height=10,
-      width=10,
+      xmlns="http://www.w3.org/2000/svg"
+      height=10
+      width=10
       style="position:relative;opacity:0;pointer-events:none;"
       )
-      rect(x="0",y="0",width="100%",height="100%",:fill="gradUrl")
+      rect(
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        v-bind:fill="gradUrl"
+        )
   slot
 </template>
 
@@ -19,7 +33,7 @@ module.exports =
 
   mixins: [
     require("vue-mixins/setCss")
-    require("vue-mixins/getVue")
+    require("vue-mixins/vue")
   ]
 
   props:
@@ -30,17 +44,20 @@ module.exports =
       type: Number
       default: 1
 
-  watch:
-    color: "processColor"
+  computed:
+    gradUrl: ->
+      return null unless @getId?
+      console.log "test"
+      return "url(#"+@getId(@color)+")"
+
 
   data: ->
+    getId: null
     gradUrl: null
     ripples: []
     debug: ""
 
   methods:
-    processColor: (val=@color) ->
-      @gradUrl = "url(#"+@getId(@color)+")"
     show: (e) ->
       return if e.pointerType == "mouse"
       isTouch = e.pointerType? and e.pointerType != "mouse"
@@ -87,8 +104,6 @@ module.exports =
         if lastRipple.timeouted
           @hide(lastRipple)
 
-  compiled: ->
-
-    @getId = GradientStore(@getVue()).getId
-    @processColor()
+  ready: ->
+    @getId = GradientStore(@Vue).getId
 </script>
