Upgraded to vue 2.6.10, scala 2.12.8, scala.js 0.6.28

.gitignore

@@ -42,3 +42,5 @@ Network Trash Folder
 Temporary Items
 .apdisk
 /bin/
+target/
+/.idea/

.travis.yml

@@ -2,4 +2,4 @@ language: scala
 script:
   - sbt fullOptJS 
 scala:
-   - 2.11.8
+   - 2.12.8

README.md

@@ -22,7 +22,7 @@ This should
 download dependencies and prepare the relevant javascript files. It then kicks off a web server to serve the html and JS files.
 
 If you open
-[localhost:12345/target/scala-2.11/classes/index-dev.html](http://localhost:12345/target/scala-2.11/classes/index-dev.html) in your browser, it will show you a sample app, doing various bindings and Scala code. Its not meant to be pretty, simply instructive. Do open the Console to see debug messages.
+[localhost:12345/target/scala-2.12/classes/index-dev.html](http://localhost:12345/target/scala-2.12/classes/index-dev.html) in your browser, it will show you a sample app, doing various bindings and Scala code. Its not meant to be pretty, simply instructive. Do open the Console to see debug messages.
 
 ## Demo
 
@@ -40,10 +40,6 @@ of the final application, useful for final publication. You may well need to cop
 
 	<script type="text/javascript" src="../scala-js-vue-js-example-opt.js"></script>
 
-## Eclipse integration
-
-If you want to edit in Eclipse (can't compile yet, but still very useful having full IDE with code completion), just run `sbt eclipse` the open the generated .project file inside eclipse. Keep sbt running in order to do the JS Compile. [https://github.com/typesafehub/sbteclipse/wiki](https://github.com/typesafehub/sbteclipse/wiki)
-
 ## Status
 
 This is just a quick proof of concept and some bindings for those wanting to use Vue.js from Scala.js. Feel free to get in contact with any issues etc.

build.sbt

@@ -1,20 +1,12 @@
-import com.lihaoyi.workbench.Plugin._
-
-enablePlugins(ScalaJSPlugin)
-
-workbenchSettings
+enablePlugins(ScalaJSPlugin, WorkbenchPlugin)
 
 name := "Scala.js+Vue.js example"
 
-version := "2.2.4"
+version := "2.6.10"
 
-scalaVersion := "2.11.8"
+scalaVersion := "2.12.8"
 
 libraryDependencies ++= Seq(
-  "org.scala-js" %%% "scalajs-dom" % "0.9.1"
+  "org.scala-js" %%% "scalajs-dom" % "0.9.7"
 )
 
-bootSnippet := ""
-
-updateBrowsers <<= updateBrowsers.triggeredBy(fastOptJS in Compile)
-

project/build.properties

@@ -1 +1 @@
-sbt.version=0.13.7
+sbt.version=1.2.8

project/plugins.sbt

@@ -1,5 +1,3 @@
-addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "4.0.0")
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.28")
 
-addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.14")
-
-addSbtPlugin("com.lihaoyi" % "workbench" % "0.2.3")
+addSbtPlugin("com.lihaoyi" % "workbench" % "0.4.1")

src/main/resources/index-dev.html

@@ -82,18 +82,19 @@
 </div>
 
 
-<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
 <div id="mydiv"></div>
 
 <script type="text/javascript" src="../scala-js-vue-js-example-fastopt.js"></script>
-<script>
 
 <!--  vue end -->
+<script>
+
      // custom filter to pull out field
      // Now done in Scala.
 
 		// we get DemoVue back from Scala, then use it
-    var demo=example.Todo().main();
+    var demo=example.Todo.main();
 
     demo.todos.push({done:false,content:"Extra task"})
 

src/main/resources/index-opt.html

@@ -18,32 +18,22 @@
   	color: #7f8c8d;
   	text-decoration: line-through;
    }
-
-.bounce-enter {
-  animation: bounce-in .5s;
-}
-.bounce-leave {
-  animation: bounce-out .5s;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
+   .bar {
+	    transition: width 0.5s;
+	    -webkit-transition: width 0.5s;
+	    -moz-transition: width 0.5s; 
+	    -o-transition: width 0.5s;
+	    height: 20px;
+	    background: black;
+	}
+
+  .fade-enter-active, .fade-leave-active {
+      transition: opacity .5s
   }
-}
-@keyframes bounce-out {
-  0% {
-    transform: scale(1);
-  }  
-  100% {
-    transform: scale(0);
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+      opacity: 0
   }
-}
+
   </style>
 </head>
 <body>
@@ -52,60 +42,62 @@
 <div id="demo">
   <div style="float:left;height:400px;overflow: auto;">
 	  Title=<input v-model="title"/>
-	  <ol>	    	    
-	    <li v-transition="bounce" v-repeat="todos">
-	      <span v-on="click: done = !done" class="{{done ? 'done' : ''}}">
-	      {{content}}	      
-	      </span>	      
-	      <button v-on="click:remove($index)">Remove</button>
-	     </li>	    
-	  </ol>
+
+        <transition-group name="fade" tag="ol">
+            <li v-for="(todo,index) in todos" :key="todo">
+              <span @click="todo.done = !todo.done" :class="{done: todo.done}">
+                {{todo.content}}
+                <button @click="remove(index)">Remove</button>
+              </span>
+            </li>
+        </transition-group>
+
 	  Tasks# {{todos.length}}<BR/>
 	  N={{n}}<BR/>
   </div>
   <div style="padding-left:30px;height:400px;overflow: auto;width:30%"><pre>data JSON: {{$data | json 2}}</pre></div>
 
   <div style="clear:left">
   Using a v-text directive title=<span v-text="title"></span>
+  <div>Smooth CSS animation:
+        <input type="button" value="+" @click="barValue += 50"/>
+        <input type="button" value="-" @click="barValue -= 50">
+    </div>
+   <div class="bar" :style="{ width: barValue + 'px' }"></div>
   <div v-text="'Using a v-text directive with inline expression, title='+title"></div>
   <div>Title reversed={{title | reverse}}</div>
-  <div>Title wrapper={{title |  wrap '<<' '>>'}}</div>
-  <div v-my-directive="myarg:title">xx</div>
-  <my-component my-msg="hello">Special content</my-component>  
-
-  <button v-on="click:clickHandler">Call clickHandler in Scala</button>  
-  <button v-on="click:n++">Increment N</button>
-
-  <button v-on="click:addTask">Add Task</button>
-  <button v-on="click:change1st">Change 1st</button>
-  <button v-on="click:remove(0,$event)">Remove 1st</button>
-  <button v-on="click:flipAll">Flip All</button><BR/><BR/>
-  Via custom filter <select v-model="selected" options="todos | extract 'content'"></select>
-  Via computed property<select v-model="selected" options="todosFiltered"></select>    
+  <div>Title wrapper={{title | wrap('<<','>>')}}</div>
+  <div v-mydirective="title">xx</div>
+  <my-component my-msg="hello">Special content</my-component>
+  <!---->
+  <button @click="clickHandler">Call clickHandler in Scala</button>
+  <button @click="n++">Increment N</button>
+  <!---->
+  <button @click="addTask">Add Task</button>
+  <button @click="change1st">Change 1st</button>
+  <button @click="remove(0)">Remove 1st</button>
+  <button @click="flipAll">Flip All</button><BR/><BR/>
+  Todos computed: {{ todosComputed }}
   </div>
 </div>
 
 
-<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js'></script> 
+<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
 <div id="mydiv"></div>
 
 <script type="text/javascript" src="../scala-js-vue-js-example-fastopt.js"></script>
-<script>
 
 <!--  vue end -->
+<script>
+
      // custom filter to pull out field
-     // should see if I can do this on Scala side TODO
-	Vue.filter('extract', function (value, keyToExtract) {
-	  return value.map(function (item) {
-	    return item[keyToExtract]
-	  })
-	})
+     // Now done in Scala.
+
 		// we get DemoVue back from Scala, then use it
-    var demo=example.Todo().main();
-    demo.title="Todo Todo Todo"
+    var demo=example.Todo.main();
+
     demo.todos.push({done:false,content:"Extra task"})
-    //demo.todos[0]=({done:false,content:"!!!!"})
-    //demo.todos.$set(0, {done:false,content:"!!!!"})
+
 </script>
 
 </body>

src/main/scala/com/felstar/scalajs/vue/Vue.scala

@@ -4,9 +4,10 @@ import scala.scalajs.js
 import org.scalajs.dom
 import org.scalajs.dom._
 
-import js.annotation.JSName
+import js.annotation._
 
   @js.native
+  @JSGlobal
    class Vue extends js.Object {
     def this(obj: js.Any) = this()   
      // instance properties
@@ -65,11 +66,13 @@ import js.annotation.JSName
   }
 
   @js.native
+  @JSGlobal
    class Unwatch extends js.Object {
     def unwatch:Unit =js.native      
    }
 
   @js.native
+  @JSGlobal
     object Vue extends js.Object{
      def config:js.Dynamic=js.native
      def extend(obj:js.Any):Vue=js.native
@@ -94,6 +97,7 @@ import js.annotation.JSName
     }
 
    @js.native
+   @JSGlobal
    class Directive extends js.Object {
     val name:String =js.native
     val rawName:String =js.native

src/main/scala/example/Todo.scala

@@ -10,13 +10,13 @@ import js.Dynamic.literal
 import com.felstar.scalajs.vue._
 import org.scalajs.dom.raw.HTMLElement
 
-import js.annotation.JSName
+import js.annotation._
 
-@JSExport
+@JSExportTopLevel("example.Todo")
 object Todo extends {
 
     @js.native
-  trait DemoVue extends Vue{
+    trait DemoVue extends Vue{
       var title:String=js.native
       var n:Double=js.native
       var todos:js.Array[DemoVueTodo]=js.native