rename

rename component which omil -> app-omil

packages/omi-cli/template/app/src/elements/app-omil/_index.css

@@ -1,4 +1,4 @@
-.omil {
+.app-omil {
 	margin-top: 20px;
 }
 

packages/omi-cli/template/app/src/elements/app-omil/index.eno

@@ -0,0 +1,49 @@
+<template name="app-omil">
+    <div class="app-omil">
+        <button onClick={this.omiSnippets.bind(this)} class="weui-btn weui-btn_primary" style="width: 200px;">{this.data.title}</button>
+    </div>
+</template>
+<script>
+// Recommend install omi-snippets plugins in VSC
+// Omi-snippets: https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets
+import style from './_index.css'
+export default {
+    static css = style + `
+        button{
+            background-color: #58bc58;
+        }
+    `
+    install() {
+        this.data = {
+            title: 'I am omil button.'
+        }
+    }
+    omiSnippets() {
+        window.open('https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets')
+    }
+}
+</script>
+<style>
+.weui-btn {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 14px;
+    padding-right: 14px;
+    box-sizing: border-box;
+    font-size: 18px;
+    text-align: center;
+    text-decoration: none;
+    color: #FFFFFF;
+    line-height: 2.55555556;
+    border-radius: 3px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    overflow: hidden;
+    border-width: 0;
+    width: 100%;
+    border-width: 0;
+    outline: 0;
+    -webkit-appearance: none;
+}
+</style>

packages/omi-cli/template/app/src/elements/app-omil/index.js

@@ -9,12 +9,12 @@ const appOmil = class extends WeElement {
     return h(
       "div",
       {
-        class: "omil"
+        class: "app-omil"
       },
       h(
         "button",
         {
-          onClick: this.testClick.bind(this),
+          onClick: this.omiSnippets.bind(this),
           class: "weui-btn weui-btn_primary",
           style: "width: 200px;"
         },
@@ -59,8 +59,10 @@ const appOmil = class extends WeElement {
       title: "I am omil button."
     };
   }
-  testClick() {
-    console.log("omil");
+  omiSnippets() {
+    window.open(
+      "https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets"
+    );
   }
 };
 

packages/omi-cli/template/app/src/elements/app-omil/index.omi

@@ -1,6 +1,6 @@
 <template name="app-omil">
-    <div class="omil">
-        <button onClick={this.testClick.bind(this)} class="weui-btn weui-btn_primary" style="width: 200px;">{this.data.title}</button>
+    <div class="app-omil">
+        <button onClick={this.omiSnippets.bind(this)} class="weui-btn weui-btn_primary" style="width: 200px;">{this.data.title}</button>
     </div>
 </template>
 <script>
@@ -18,8 +18,8 @@ export default {
             title: 'I am omil button.'
         }
     }
-    testClick() {
-        console.log('omil')
+    omiSnippets() {
+        window.open('https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets')
     }
 }
 </script>

packages/omi-cli/template/app/src/elements/app/index.js

@@ -1,7 +1,7 @@
 import { define, WeElement } from 'omi'
 import logo from './logo.svg'
 import '../app-intro'
-import '../omil/index.omi.js'
+import '../app-omil'
 import 'omiu/button'
 
 define('my-app', class extends WeElement {