From 0f8f9c5634f76bb5becddd522bb06928fc5a08be Mon Sep 17 00:00:00 2001
From: "ruosen.chai" <chairuosen@gmail.com>
Date: Thu, 27 Oct 2016 11:06:04 +0800
Subject: [PATCH] vue2

---
 README.md    | 26 ++++++++------------------
 index.js     | 25 ++++++++++---------------
 package.json | 12 ++++++------
 3 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 0f15877..5972a6d 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,13 @@
-vue-ace-editor
+vue2-ace-editor
 ====================
 A packaging of [ace](https://ace.c9.io/)
 
-Demo: https://github.com/chairuosen/vue-ace-editor-demo
-
 ## How to use
 
 1. Install
 
     ```
-    npm install --save-dev vue-ace-editor
+    npm install --save-dev vue2-ace-editor
     ```
     
 2. Require it in `components` of Vue options
@@ -20,22 +18,18 @@ Demo: https://github.com/chairuosen/vue-ace-editor-demo
         methods,
         ...
         components: {
-            editor:require('vue-ace-editor'),
+            editor:require('vue2-ace-editor'),
         },
     }
     ```
  
-3. Require the editor's mode/theme module in options's events `vue-ace-editor:init`
-
-    Because if require the modules inside the component dynamically. The size of bundle.js will be very huge.
+3. Require the editor's mode/theme module in custom methods
     
     ```
     {
         data,
-        methods,
-        components,
-        events:{
-            'vue-ace-editor:init':function () {
+        methods:{
+            editorInit:function () {
                 require('vue-ace-editor/node_modules/brace/mode/html');
                 require('vue-ace-editor/node_modules/brace/mode/javascript');
                 require('vue-ace-editor/node_modules/brace/mode/less');
@@ -48,16 +42,12 @@ Demo: https://github.com/chairuosen/vue-ace-editor-demo
 4. Use the component in template
 
     ```
-    <editor :content.sync="html" lang="html" theme="chrome" width="300" height="300" ></editor>
+    <editor v-model="content" @init="editorInit();" lang="html" theme="chrome" width="500" height="100"></editor>
     ```
     
-    prop `content`  is required
+    prop `v-model`  is required
     
     prop `lang` and `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace)
     
     prop `height` and `width` could be one of these:  `200`, `200px`, `50%`
     
-
-## Notice
-
-This is only a webpack version. If you use browserify. Check this [issue](https://github.com/chairuosen/vue-ace-editor/issues/1#issuecomment-235193574)
diff --git a/index.js b/index.js
index 1a8d9e8..6b0065d 100644
--- a/index.js
+++ b/index.js
@@ -4,14 +4,11 @@ require(['emmet/emmet'],function (data) {
     window.emmet = data.emmet;
 });
 
-var init = false;
-
 module.exports = {
     template:"<div :style=\"{height: height ? px(height) : '100%',width: width ? px(width) : '100%'}\"></div>",
     props:{
-        content:{
+        value:{
             type:String,
-            twoWay:true,
             required:true
         },
         lang:String,
@@ -33,21 +30,18 @@ module.exports = {
             return n;
         }
     },
-    components: {},
     watch:{
-        content:function (val) {
+        value:function (val) {
             if(this.contentBackup !== val)
                 this.editor.setValue(val,1);
         }
     },
-    ready: function () {
+    mounted: function () {
         var vm = this;
         var lang = this.lang||'text';
         var theme = this.theme||'chrome';
-        if(!init){
-            vm.$dispatch('vue-ace-editor:init');
-            init = true;
-        }
+
+        this.$emit('init');
 
         require('brace/ext/emmet');
 
@@ -58,12 +52,13 @@ module.exports = {
         editor.getSession().setMode('ace/mode/'+lang);
         editor.setTheme('ace/theme/'+theme);
 
-        editor.setValue(this.content,1);
+        editor.setValue(this.value,1);
 
         editor.on('change',function () {
-            vm.content = editor.getValue();
-            vm.contentBackup = vm.content;
+            var content = editor.getValue();
+            vm.$emit('input',content);
+            vm.contentBackup = content;
         });
 
     }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 9d0f39a..c668640 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,21 @@
 {
-  "name": "vue-ace-editor",
-  "version": "1.0.2",
-  "description": "A Vue's component based on ace/brace",
+  "name": "vue2-ace-editor",
+  "version": "0.0.1",
+  "description": "A Vue2.0's component based on ace/brace",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chairuosen/vue-ace-editor.git"
+    "url": "git+https://github.com/chairuosen/vue2-ace-editor.git"
   },
   "author": "chairuosen",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/chairuosen/vue-ace-editor/issues"
+    "url": "https://github.com/chairuosen/vue2-ace-editor/issues"
   },
-  "homepage": "https://github.com/chairuosen/vue-ace-editor#readme",
+  "homepage": "https://github.com/chairuosen/vue2-ace-editor#readme",
   "dependencies": {
     "brace": "^0.8.0",
     "emmet": "git+https://github.com/cloud9ide/emmet-core.git"