Moved the default method to a component, so it's no longer a plugin

- Also updated styling to be little more BEM :)

Author: codebryo

README.md

@@ -9,12 +9,12 @@ Messagist
 
 ### Using Messagist
 
-It's quite simple. As a usual plugin just let Vue know about it's existance:
+It's quite simple. Messeagist is prepared as a Vue component object, so the easiest is to use it as a global component:
 
 ```js
 import Messagist from 'vue-messagist'
 
-Vue.use(Messagist)
+Vue.component('messagist', Messagist)
 ```
 
 This makes a `messagist` component available, which has one mandatory `messages` property.
@@ -80,7 +80,7 @@ and the JS on the page could look like this.
 ```js
 import Messagist from 'vue-messagist'
 
-Vue.use(Messagist)
+Vue.component('messagist', Messagist)
 
 const messages = {...} // the message example from above
 

examples/breaking.html

@@ -57,7 +57,9 @@
     </div>
     <script src="/dist/messagist.js"></script>
     <script>
-      Vue.use(Messagist)
+      console.log(Messagist)
+
+      Vue.component('messagist', Messagist)
 
       conversation = {
         init: {

examples/simple.html

@@ -11,7 +11,7 @@
     </div>
     <script src="/dist/messagist.js"></script>
     <script>
-      Vue.use(Messagist)
+      Vue.component('messagist', Messagist)
 
       new Vue({
         el: '#app',

src/Choice.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <a
-    class="choice"
+    class="messagist__choices-list-item"
     :href="primaryKey"
     @click.prevent="selected"
   >
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style lang="stylus">
-  .choice
+  .messagist__choices-list-item
     margin-right 40px
     display block
     text-align right

src/Message.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <li :class="message.author">
+  <li :class="cssClass">
     <span v-html="message.text" />
   </li>
 </template>
@@ -11,6 +11,12 @@ export default {
 
   props: {
     message: Object
+  },
+
+  computed: {
+    cssClass() {
+      return `messagist__list-item-${this.message.author}`
+    }
   }
 }
 </script>
@@ -25,7 +31,7 @@ transparent-body()
   position absolute
   border 8px solid transparent
 
-.message-list-item
+.messagist__list-item
   list-style none
   margin-bottom 5px
 
@@ -37,7 +43,7 @@ transparent-body()
     border-radius .5rem
     max-width 80%
 
-  &.system
+  &-system
     text-align left
 
     span::before
@@ -46,11 +52,7 @@ transparent-body()
       left -16px
       bottom 8px
 
-    + .user
-      margin-top 10px
-
-
-  &.user
+  &-user
     text-align right
 
     span
@@ -62,7 +64,8 @@ transparent-body()
         right -16px
         bottom 8px
 
-      + .system
-        margin-top 10px
+  &-system + &-user,
+  &-user + &-system
+    margin-top 10px
 </style>
 

src/MessagistWrapper.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="Messagist">
-    <transition-group name="message-list" tag="ul">
+    <transition-group name="messagist__list" tag="ul">
       <message
         v-for="message in messagesToPrint"
         :key="message.id"
         :message="message"
-        class="message-list-item"
+        class="messagist__list-item"
       />
     </transition-group>
 
     <div
       v-show="choicesVisible"
-      class="choice-list"
+      class="messagist__choices"
     >
       <choice
         v-for="(value, key) in current.choices"
         :key="key"
         :primaryKey="key"
         :choice="value"
         @selected="selected"
-        class="choice-list-item"
+        class="messagist__choices-list-item"
       />
     </div>
   </div>
@@ -164,22 +164,22 @@ export default {
   ul
     padding 20px 50px
 
-.message-list-item
+.messagist__list-item
   transition all 500ms
 
-.message-list-item-loading
+.messagist__list-item-loading
   text-align left
   margin-left 40p
 
-.message-list-enter
+.messagist__list-enter
   opacity 0
   transform translateY(30px)
 
-.choice-list-item
+.messagist__choices-item
   transition all 1s
 
-.choice-list-enter,
-.choice-list-leave-to
+.messagist__choice-list-enter,
+.messagist__choice-list-leave-to
   opacity 0
   transform translateY(30px)
 </style>

src/main.js

@@ -1,7 +1,3 @@
 import MessagistWrapper from './MessagistWrapper.vue'
 
-export default {
-  install(Vue, options) {
-    Vue.component('messagist', MessagistWrapper)
-  }
-}
+export default MessagistWrapper