feat: support for vue2 (#88)

* chore: initial setup for vue2 packages

* feat: basic Vue 2 Component

* feat(vue2): add more test cases

* test(preset): add more cases to test in preset

* test(preset-vue2): add more cases to test tags processing

* fix(preset): tag node checking

* test(preset-vue): more coverage for vue preset

* refactor(vue2): move default export to plugin install func

* feat(example-vue2): add vue2 example to examples folder

* chore(example-vue2): remove unused npm scripts

* chore: add vue 2 example in main README

* chore: update package.json descriptions

examples/vue2-example/src/App.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <div class="data">
+      <div class="bbcode">
+        <h2>Raw BB Code here</h2>
+        <textarea name="bbcode" id="bbcode" cols="30" rows="10" v-model="bbcode"></textarea>
+      </div>
+      <div class="html">
+        <h2>Generated HTML here</h2>
+        <bbob-bbcode container="div" :plugins="plugins">{{ bbcode }}</bbob-bbcode>
+      </div>
+    </div>
+    <pre class="code"></pre>
+
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import preset from '@bbob/preset-vue'
+import MyTag from './MyTagComponent'
+
+const myPreset = preset.extend(defTags => ({
+  ...defTags,
+  // bbcode tags always lowercased
+  mytag: (node) => ({
+    ...node,
+    tag: MyTag,
+  })
+}))
+
+export default Vue.extend({
+  name: 'App',
+  data() {
+    return {
+      bbcode: 'Text [b]bolded[/b] and [myTag]Some Name[/myTag]',
+      plugins: [
+        myPreset()
+      ],
+    }
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+
+  width: 700px;
+  margin: 60px auto 0;
+}
+
+.data {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bbcode,
+.html {
+  border: 1px solid #ccc;
+  width: 300px;
+}
+</style>

examples/vue2-example/src/MyTagComponent.vue

@@ -0,0 +1,30 @@
+<template>
+  <span class="my-tag"><span class="avatar"/> <slot></slot></span>
+</template>
+
+<script>
+export default {
+  name: "MyTag"
+}
+</script>
+
+<style scoped>
+.my-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: black;
+  background: #ccc;
+  border-radius: 6px;
+  padding: 2px 4px;
+}
+
+.avatar {
+  margin-right: 8px;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: teal;
+}
+</style>

examples/vue2-example/src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import VueBbob from '@bbob/vue2';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+Vue.use(VueBbob);
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');