Merge pull request vue-bulma#124 from vue-bulma/luventa

Implement Brace component
1615450788 · Dec 18, 2016 · d10d1e4 · d10d1e4
2 parents 2dfcb22 + dae7e21
commit d10d1e4
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 0 deletions.
diff --git a/client/store/modules/menu/components.js b/client/store/modules/menu/components.js
@@ -24,6 +24,15 @@ export default {
       },
       component: lazyLoading('components/BackToTop')
     },
+    {
+      name: 'Brace',
+      path: 'brace',
+      meta: {
+        description: 'Code editor component that based on brace',
+        repository: 'https://github.com/vue-bulma/brace'
+      },
+      component: lazyLoading('components/Brace')
+    },
     {
       name: 'Collapse',
       path: 'collapse',

diff --git a/client/views/components/Brace.vue b/client/views/components/Brace.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="tile is-ancestor">
+    <div class="tile is-parent is-4">
+      <article class="tile is-child box">
+          <h1 class="title is-5">Options Panel</h1>
+          <div class="block">
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Modes</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.mode">
+                    <option v-for="mode in modes" :value="mode.name">{{mode.caption}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Themes</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.theme">
+                    <option v-for="theme in themes" :value="theme.name">{{theme.caption}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Font Size</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.fontsize">
+                    <option v-for="fsize in fontsize" :value="fsize">{{fsize}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Code Folding</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.codefolding">
+                    <option v-for="cfolding in codefolding" :value="cfolding">{{cfolding}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Soft Wrap</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.softwrap">
+                    <option v-for="swrap in softwrap" :value="swrap">{{swrap}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Select Style</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="selected.selectionstyle">
+                    <option value="text">text</option>
+                    <option value="line">line</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Highlight Line</label>
+              </div>
+              <div class="control" style="margin-top: 10px;">
+                <label class="radio">
+                  <input type="radio" value="true" v-model="selected.highlightline">
+                  Yes
+                </label>
+                <label class="radio">
+                  <input type="radio" value="false" v-model="selected.highlightline">
+                  No
+                </label>
+              </div>
+            </div>
+          </div>
+        </article>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <brace style="height: 100%" 
+          :fontsize="this.selected.fontsize" 
+          :theme="this.selected.theme" 
+          :mode="this.selected.mode"
+          :codefolding="this.selected.codefolding"
+          :softwrap="this.selected.softwrap"
+          :selectionstyle="this.selected.selectionstyle"
+          :highlightline="this.selected.highlightline === 'true'">
+        </brace>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script>
+import Brace from 'vue-bulma-brace'
+// this is just an example. you don't want to import those things.
+import * as brace from 'brace'
+import 'brace/ext/modelist'
+import 'brace/ext/themelist'
+const modelist = brace.acequire('ace/ext/modelist')
+const themelist = brace.acequire('ace/ext/themelist')
+
+export default {
+  components: {
+    Brace
+  },
+
+  data () {
+    return {
+      modes: modelist.modes,
+      themes: themelist.themes,
+      fontsize: ['12px', '13px', '14px', '16px', '18px', '20px', '22px', '24px'],
+      codefolding: ['manual', 'markbegin', 'markbeginend'],
+      softwrap: ['off', '50', 'free'],
+      selected: {
+        mode: 'json',
+        theme: 'github',
+        fontsize: '12px',
+        codefolding: 'markbegin',
+        softwrap: 'free',
+        selectionstyle: 'text',
+        highlightline: 'true'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.control-label {
+  min-width: 100px;
+}
+</style>
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "mdi": "1.7.22",
     "plotly.js": "1.21.2",
     "vue": "2.1.6",
+    "vue-bulma-brace": "0.0.1",
     "vue-bulma-breadcrumb": "github:vue-bulma/breadcrumb",
     "vue-bulma-card": "github:vue-bulma/card",
     "vue-bulma-chartist": "github:vue-bulma/chartist",

diff --git a/yarn.lock b/yarn.lock
@@ -996,6 +996,12 @@ box-intersect@^1.0.1:
     bit-twiddle "^1.0.2"
     typedarray-pool "^1.1.0"
 
+brace@^0.9.1:
+  version "0.9.1"
+  resolved "http://registry.npm.taobao.org/brace/download/brace-0.9.1.tgz#19dcbae2faec9a9920a0452ec64d8d84df45e7b6"
+  dependencies:
+    w3c-blob "0.0.1"
+
 brace-expansion@^1.0.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
@@ -6964,6 +6970,12 @@ vt-pbf@^2.0.2:
     point-geometry "0.0.0"
     vector-tile "^1.1.3"
 
+vue-bulma-brace@^0.0.1:
+  version "0.0.1"
+  resolved "http://registry.npm.taobao.org/vue-bulma-brace/download/vue-bulma-brace-0.0.1.tgz#8eb140c779d1b3c3cfd66bb4cbe6209e4a7d37d5"
+  dependencies:
+    brace "^0.9.1"
+
 "vue-bulma-breadcrumb@github:vue-bulma/breadcrumb":
   version "1.0.0"
   resolved "https://codeload.github.com/vue-bulma/breadcrumb/tar.gz/0fe6b751313f8d586f60cb05b9b7f272cb4f2d5a"
@@ -7169,6 +7181,10 @@ watchpack@^1.0.0:
     chokidar "^1.4.3"
     graceful-fs "^4.1.2"
 
+[email protected]:
+  version "0.0.1"
+  resolved "http://registry.npm.taobao.org/w3c-blob/download/w3c-blob-0.0.1.tgz#b0cd352a1a50f515563420ffd5861f950f1d85b8"
+
 weak-map@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.5.tgz#79691584d98607f5070bd3b70a40e6bb22e401eb"