[add] Vue版本

panel/index.js

@@ -1,57 +1,45 @@
-Editor.Panel.extend({
-	style: `
-    :host { margin: 5px; }
-    h2 { color: #f90; }
-    .bottom {
-      height: 30px;
-    }
-  `,
+const PACKAGE_NAME = "uuidconvert";
+const fs = require("fs");
 
-	template: `
-    <h2 style="text-align:center">Uuid Convert</h2>
-    <hr />
-        <div>
-            1. 填入要轉換的UUID<br>
-        </div>
-    <hr />
-        <div>
-            要轉換的UUID
-            <ui-input placeholder="UUID" id="uuid"></ui-input>
-        </div>
-    <hr />
-         <div style="text-align:right">
-             <ui-button id="run" class="blue">執行</ui-button>
-         </div>      
-  `,
+Editor.Panel.extend({
+    style: fs.readFileSync(Editor.url(`packages://${PACKAGE_NAME}/static/style/default/index.css`), 'utf-8')
+        .concat(fs.readFileSync(Editor.url(`packages://${PACKAGE_NAME}/static/style/default/bootstrap.min.css`), 'utf-8')),
+
+    template: fs.readFileSync(
+        Editor.url(`packages://${PACKAGE_NAME}/static/template/default/index.html`), 'utf-8'),
 
     $: {
-		/** uuid */
-		uuid: "#uuid",
-		/** 生成按鈕 */
-		run: "#run",
+        app: '#app',
     },
 
     ready() {
-		// Editor.Ipc.sendToMain("uuidconvert:panel-load-finish");
-		this.onClickRun();
+        this.app = new Vue({
+            el: this.$app,
+            created: function () {
 
             },
-	/** 保存按鈕點擊事件 */
-	onClickRun() {
-		this.$run.addEventListener("confirm", () => {
-			if (!this.$uuid._value) {
-				Editor.error("請輸入要轉換的UUID");
-				return;
-			}
-			Editor.Ipc.sendToMain("uuidconvert:run-click", this.$uuid._value);
-		});
+
+            components: {
+                "counter": Editor.require(`packages://${PACKAGE_NAME}/static/template/vue/counter.js`)
             },
+
+            data: function () {
+                return {}
+            },
+
+            methods: {
+
+            },
+
+            watch: {
+
+            }
+        })
+    },
+
+    methods: {
+    },
+
     messages: {
-		// "setDefault": function (event, ...agrs) {
-		//     if (event.reply) {
-		//         //if no error, the first argument should be null
-		//         event.reply(null, "Fine, thank you!");
-		//     }
-		// }
     }
 });

static/style/default/index.css

@@ -0,0 +1,8 @@
+#text {
+    color: var(--color-normal-contrast-weakest);
+    margin: auto;
+    width: 180px;
+}
+.counter {
+    text-align: center;
+}

static/template/default/index.html

@@ -0,0 +1,6 @@
+<div>
+    <link href="style/default/bootstrap.min.css" rel="stylesheet">
+    <div id="app">
+        <counter></counter>
+    </div>
+</div>

static/template/vue/counter.html

@@ -0,0 +1,18 @@
+<div class="counter">
+    <h1 style="text-align:center">Uuid Convert</h1>
+    <hr />
+    <div>
+        <h2 style="text-align:left">1. 填入要轉換的UUID</h2>
+    </div>
+    <hr />
+    <div>
+        <h1 style="text-align:left">要轉換的UUID</h1>
+        <div class="input-group input-group-lg">
+            <input id="uuid" v-model="uuid" type="text" class="form-control" placeholder="UUID">
+        </div>
+    </div>
+    <hr />
+    <div style="text-align:right">
+        <button id="run" @click="run()" type="button" class="btn btn-primary btn-lg btn-block">執行</button>
+    </div>
+</div>

static/template/vue/counter.js

@@ -0,0 +1,36 @@
+const PACKAGE_NAME = "uuidconvert";
+const fs = require("fs");
+
+module.exports = {
+    name: "counter",
+
+    template: fs.readFileSync(Editor.url(`packages://${PACKAGE_NAME}/static/template/vue/counter.html`), 'utf-8'),
+
+    created: function () {
+
+    },
+
+    data: function () {
+        return {
+            uuid: ""
+        }
+    },
+
+    props: {
+
+    },
+
+    methods: {
+        run() {
+            if (!this.uuid) {
+                Editor.error("請輸入要轉換的UUID");
+                return;
+            }
+            Editor.Ipc.sendToMain("uuidconvert:run-click", this.uuid);
+        },
+    },
+
+    watch: {
+
+    }
+}