Updated vuejs and got it working with current components

diff --git a/gulpfile.js b/gulpfile.js
index 1bbfc9818aaa6b3ebe3ceb71c4570082821e0663..621e665bede0b129c1777e0954c09cf5d369141f 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,10 +1,5 @@
 var elixir = require('laravel-elixir');
 
 var elixir = require('laravel-elixir');
 

-elixir.config.js.browserify.transformers.push({
-    name: 'vueify',
-    options: {}
-});
-

 elixir(function(mix) {
     mix.sass('styles.scss')
         .sass('print-styles.scss')
 elixir(function(mix) {
     mix.sass('styles.scss')
         .sass('print-styles.scss')

diff --git a/package.json b/package.json
index 09edc2b20d5b7487279b0731647cf7fc1b3de99b..af2cbae588ea01b4a65669c406f23a3401764ea3 100644 (file)
--- a/package.json
+++ b/package.json
@@ -2,16 +2,18 @@
   "private": true,
   "devDependencies": {
     "gulp": "^3.8.8",
   "private": true,
   "devDependencies": {
     "gulp": "^3.8.8",

-    "insert-css": "^0.2.0",
-    "laravel-elixir-livereload": "1.1.3",
-    "vueify": "^1.1.5"
+    "insert-css": "^0.2.0"

   },
   "dependencies": {
   },
   "dependencies": {

+    "babel-runtime": "^5.8.29",

     "bootstrap-sass": "^3.0.0",
     "dropzone": "^4.0.1",
     "bootstrap-sass": "^3.0.0",
     "dropzone": "^4.0.1",

-    "laravel-elixir": "^3.3.1",
-    "vue": "^0.12.16",
+    "laravel-elixir": "^3.4.0",
+    "vue": "^1.0.4",
+    "vue-hot-reload-api": "^1.2.1",

     "vue-resource": "^0.1.16",
     "vue-resource": "^0.1.16",

+    "vueify": "^5.0.1",
+    "vueify-insert-css": "^1.0.0",

     "zeroclipboard": "^2.2.0"
   }
 }
     "zeroclipboard": "^2.2.0"
   }
 }

diff --git a/resources/assets/js/components/image-manager.vue b/resources/assets/js/components/image-manager.vue
index f81bf02d1f5acf6ebaaf541658eb41ea8f5dc09a..f00bf1065f12ec8fb41672a77a9d86ae85338f62 100644 (file)
--- a/resources/assets/js/components/image-manager.vue
+++ b/resources/assets/js/components/image-manager.vue
@@ -1,29 +1,29 @@
 <template>
     <div id="image-manager">
 <template>
     <div id="image-manager">

-        <div class="overlay" v-el="overlay" v-on="click: overlayClick">
+        <div class="overlay" v-el:overlay v-on:click="overlayClick">

             <div class="image-manager-body">
                 <div class="image-manager-content">
                     <div class="image-manager-list">
             <div class="image-manager-body">
                 <div class="image-manager-content">
                     <div class="image-manager-list">

-                        <div v-repeat="image: images">
+                        <div v-for="image in images">

                             <img class="anim fadeIn"
                             <img class="anim fadeIn"

-                                 v-class="selected: (image==selectedImage)"
-                                 v-attr="src: image.thumbnail, alt: image.name, title: image.name"
-                                 v-on="click: imageClick(image)"
-                                 v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'">
+                                 :class="{selected: (image==selectedImage)}"
+                                 :src="image.thumbnail" :alt="image.title" :title="image.name"
+                                 v-on:click="imageClick(image)"
+                                 v-bind:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">

                         </div>
                         </div>

-                        <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
+                        <div class="load-more" v-show="hasMore" v-on:click="fetchData">Load More</div>

                     </div>
                 </div>
                     </div>
                 </div>

-                <button class="neg button image-manager-close" v-on="click: hide()">x</button>
+                <button class="neg button image-manager-close" v-on:click="hide">x</button>

                 <div class="image-manager-sidebar">
                 <div class="image-manager-sidebar">

-                    <h2 v-el="imageTitle">Images</h2>
+                    <h2 v-el:image-title>Images</h2>

                     <hr class="even">
                     <hr class="even">

-                    <div class="dropzone-container" v-el="dropZone">
+                    <div class="dropzone-container" v-el:drop-zone>

                         <div class="dz-message">Drop files or click here to upload</div>
                     </div>
                     <div class="image-manager-details anim fadeIn" v-show="selectedImage">
                         <hr class="even">
                         <div class="dz-message">Drop files or click here to upload</div>
                     </div>
                     <div class="image-manager-details anim fadeIn" v-show="selectedImage">
                         <hr class="even">

-                        <form v-on="submit: saveImageDetails" v-el="imageForm">
+                        <form v-on:submit="saveImageDetails" v-el:image-form>

                             <div class="form-group">
                                 <label for="name">Image Name</label>
                                 <input type="text" id="name" name="name" v-model="selectedImage.name">
                             <div class="form-group">
                                 <label for="name">Image Name</label>
                                 <input type="text" id="name" name="name" v-model="selectedImage.name">


@@ -36,18 +36,18 @@
                                 this image.
                             </p>
                             <ul class="text-neg">
                                 this image.
                             </p>
                             <ul class="text-neg">

-                                <li v-repeat="page: dependantPages">
-                                    <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a>
+                                <li v-for="page in dependantPages">
+                                    <a :href="page.url" target="_blank" class="text-neg">{{ page.name }}</a>

                                 </li>
                             </ul>
                         </div>
 
                                 </li>
                             </ul>
                         </div>
 

-                        <form v-on="submit: deleteImage" v-el="imageDeleteForm">
+                        <form v-on:submit="deleteImage" v-el:image-delete-form>

                             <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
                         </form>
                     </div>
                     <div class="image-manager-bottom">
                             <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
                         </form>
                     </div>
                     <div class="image-manager-bottom">

-                        <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i
+                        <button class="button pos anim fadeIn" v-show="selectedImage" v-on:click="selectButtonClick"><i

                                 class="zmdi zmdi-square-right"></i>Select Image
                         </button>
                     </div>
                                 class="zmdi zmdi-square-right"></i>Select Image
                         </button>
                     </div>


@@ -97,7 +97,7 @@
 
             setupDropZone: function () {
                 var _this = this;
 
             setupDropZone: function () {
                 var _this = this;

-                var dropZone = new Dropzone(_this.$$.dropZone, {
+                var dropZone = new Dropzone(_this.$els.dropZone, {

                     url: '/upload/image',
                     init: function () {
                         var dz = this;
                     url: '/upload/image',
                     init: function () {
                         var dz = this;


@@ -140,7 +140,7 @@
 
             show: function (callback) {
                 this.callback = callback;
 
             show: function (callback) {
                 this.callback = callback;

-                this.$$.overlay.style.display = 'block';
+                this.$els.overlay.style.display = 'block';

                 // Get initial images if they have not yet been loaded in.
                 if (!this.dataLoaded) {
                     this.fetchData(this.page);
                 // Get initial images if they have not yet been loaded in.
                 if (!this.dataLoaded) {
                     this.fetchData(this.page);


@@ -155,14 +155,14 @@
             },
 
             hide: function () {
             },
 
             hide: function () {

-                this.$$.overlay.style.display = 'none';
+                this.$els.overlay.style.display = 'none';

             },
 
             saveImageDetails: function (e) {
                 e.preventDefault();
                 var _this = this;
                 _this.selectedImage._token = _this.token;
             },
 
             saveImageDetails: function (e) {
                 e.preventDefault();
                 var _this = this;
                 _this.selectedImage._token = _this.token;

-                var form = $(_this.$$.imageForm);
+                var form = $(_this.$els.imageForm);

                 $.ajax('/images/update/' + _this.selectedImage.id, {
                     method: 'PUT',
                     data: _this.selectedImage
                 $.ajax('/images/update/' + _this.selectedImage.id, {
                     method: 'PUT',
                     data: _this.selectedImage


@@ -184,7 +184,7 @@
                 }).done(function () {
                     _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
                     _this.selectedImage = false;
                 }).done(function () {
                     _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
                     _this.selectedImage = false;

-                    $(_this.$$.imageTitle).showSuccess('Image Deleted');
+                    $(_this.$els.imageTitle).showSuccess('Image Deleted');

                 }).fail(function (jqXHR, textStatus) {
                     // Pages failure
                     if (jqXHR.status === 400) {
                 }).fail(function (jqXHR, textStatus) {
                     // Pages failure
                     if (jqXHR.status === 400) {

diff --git a/resources/assets/js/components/image-picker.vue b/resources/assets/js/components/image-picker.vue
index fe2b1f323f0335b93dfccaf49425e827326df193..bf235aa8a6cdc5727860ecf4685376539fd225bd 100644 (file)
--- a/resources/assets/js/components/image-picker.vue
+++ b/resources/assets/js/components/image-picker.vue
@@ -2,12 +2,12 @@
 <template>
     <div class="image-picker">
         <div>
 <template>
     <div class="image-picker">
         <div>

-            <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview">
+            <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">

         </div>
         </div>

-        <button class="button" type="button" v-on="click: showImageManager">Select Image</button>
+        <button class="button" type="button" v-on:click="showImageManager">Select Image</button>

         <br>
         <br>

-        <button class="text-button" v-on="click: reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on="click: remove" type="button">Remove</button>
-        <input type="hidden" v-attr="name: name, id: name" v-model="image">
+        <button class="text-button" v-on:click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
+        <input type="hidden" :name="name" :id="name" v-model="image">

     </div>
 </template>
 
     </div>
 </template>
 


@@ -33,5 +33,5 @@
                 this.image = 'none';
             }
         }
                 this.image = 'none';
             }
         }

-    }
+    };

 </script>
\ No newline at end of file
 </script>
\ No newline at end of file

diff --git a/resources/assets/js/components/toggle-switch.vue b/resources/assets/js/components/toggle-switch.vue
index d677f665009cd6e855125b222f59e13237e65f9f..d6396f37583ce996d299307e85060688ca842a6b 100644 (file)
--- a/resources/assets/js/components/toggle-switch.vue
+++ b/resources/assets/js/components/toggle-switch.vue
@@ -1,7 +1,7 @@
 
 <template>
 
 <template>

-    <div class="toggle-switch" v-on="click: switch" v-class="active: isActive">
-        <input type="hidden" v-attr="name: name, value: value"/>
+    <div class="toggle-switch" v-on:click="switch" :class="{'active': isActive}">
+        <input type="hidden" :name="name" :value="value"/>

         <div class="switch-handle"></div>
     </div>
 </template>
         <div class="switch-handle"></div>
     </div>
 </template>


@@ -24,5 +24,5 @@
                 this.value = this.isActive ? 'true' : 'false';
             }
         }
                 this.value = this.isActive ? 'true' : 'false';
             }
         }

-    }
+    };

 </script>
\ No newline at end of file
 </script>
\ No newline at end of file