feat: helpers

asvae · Mar 17, 2019 · ffb0639 · ffb0639
1 parent cb1d16b
commit ffb0639
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 3 deletions.
diff --git a/packages/vue-book/README.md → README.md b/packages/vue-book/README.md → README.md
@@ -105,6 +105,33 @@ Leave an issue if something doesn't work for you.
 
 Also remember: Stars fuel package development! 
 
+## Helpers [WIP]
+
+### Install
+
+```js
+import { VueBookComponents } from '../src/app'
+
+Vue.use(VueBookComponents)
+```
+
+Component helpers
+
+```vue
+<VbDemo>
+  <VbContainer title="is active">
+    <YourComponent is-active/>
+  </VbContainer>
+</VbDemo>
+```
+
+Functional helpers:
+
+```vue
+<button @click="$vb.log('log', 'value')">Trigger log</button>
+<button @click="$vb.alert('alert')">Trigger alert</button>
+```
+
 ## Licence
 MIT
 

diff --git a/packages/vue-book/package.json b/packages/vue-book/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-book",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.14",
   "description": "Tree view for your demo components",
   "main": "dist/js/app.js",
   "private": false,
@@ -61,7 +61,8 @@
     "vue-router": "^3.0.2",
     "vue-template-compiler": "^2.5.21",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2"
+    "webpack-cli": "^3.1.2",
+    "vuestic-ui": "^0.1.0-alpha.1"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/vue-book/src/app.ts b/packages/vue-book/src/app.ts
@@ -9,7 +9,17 @@ export const VueBookComponents = {
   install: (Vue: any) => {
     Vue.component('VbDemo', VbDemo)
     Vue.component('VbContainer', VbContainer)
-  }
+
+    Vue.prototype.$vb = {
+      log: (message?: any, ...optionalParams: any[]) => {
+        // eslint-disable-next-line no-console
+        console.log(message, ...optionalParams)
+      },
+      alert: (message?: any) => {
+        alert(message)
+      },
+    }
+  },
 }
 
 export const createRoute =

diff --git a/packages/vue-book/src/components/HelpersTest.demo.vue b/packages/vue-book/src/components/HelpersTest.demo.vue
@@ -0,0 +1,19 @@
+<template>
+  <VbDemo>
+    <VbContainer>
+      <button @click="$vb.log('log', 'value')">Trigger log</button>
+      <button @click="$vb.alert('alert')">Trigger alert</button>
+    </VbContainer>
+  </VbDemo>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+
+})
+export default class Demo extends Vue {
+
+}
+</script>