Update: isOpen prop

.eslintrc.js

@@ -25,8 +25,3 @@ module.exports = {
     }
   ]
 }
-
-// "plugin:vue/recommended",
-// "eslint:recommended",
-// "prettier/vue",
-// "plugin:prettier/recommended"

README.md

@@ -67,6 +67,7 @@ List of available props to use in the component:
 | `options`          | Object     | see below       | Some options to customize UI |
 | `bot-typing`        | Boolean    | false           | If `true`, the bot typing indicator will show  |
 | `input-disable`     | Boolean    | false           | If `true`, message input will be disabled |
+| `is-open`     | Boolean    | false           | If `true`, the board will open from init |
 
 
 

package.json

@@ -35,7 +35,6 @@
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
-    "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "bootstrap": "^4.3.1",
     "core-js": "^3.3.2",
@@ -44,9 +43,10 @@
     "pug": "^2.0.4",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^8.0.2",
     "standard-version": "^7.0.1",
     "vue": "^2.6.10",
+    "vue-loader": "^15.8.3",
     "vue-svg-loader": "^0.15.0",
     "vue-template-compiler": "^2.6.10"
   },

src/App.vue

@@ -9,14 +9,15 @@
     :messages="messageData",
     :bot-typing="botTyping",
     :input-disable="inputDisable",
+    :is-open="false",
     @init="botStart",
     @msg-send="msgSend",
   )
 </template>
 <script>
-import BotIcon from '@/assets/icons/bot.png'
+import BotIcon from './assets/icons/bot.png'
 import { VueBotUI } from './vue-bot-ui'
-import { messageService } from '@/helpers/message'
+import { messageService } from './helpers/message'
 
 export default {
   components: {

src/components/Board/Action.vue

@@ -23,7 +23,7 @@
           IconSend.qkb-action-icon.qkb-action-icon--send
 </template>
 <script>
-import IconSend from '@/assets/icons/send.svg'
+import IconSend from '../../assets/icons/send.svg'
 
 export default {
   components: {

src/components/BotUI.vue

@@ -37,13 +37,13 @@
     .qkb-msg-avatar__img(v-if="optionsMain.botAvatarImg")
 </template>
 <script>
-import EventBus from '@/helpers/event-bus'
+import EventBus from '../helpers/event-bus'
 import BoardHeader from './Board/Header'
 import BoardContent from './Board/Content'
 import BoardAction from './Board/Action'
 import AppStyle from './AppStyle'
-import BubbleIcon from '@/assets/icons/bubble.svg'
-import CloseIcon from '@/assets/icons/close.svg'
+import BubbleIcon from '../assets/icons/bubble.svg'
+import CloseIcon from '../assets/icons/close.svg'
 
 export default {
   name: 'VueBotUI',
@@ -75,6 +75,11 @@ export default {
     inputDisable: {
       type: Boolean,
       default: false
+    },
+
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -119,6 +124,10 @@ export default {
   },
 
   created () {
+    if (this.isOpen) {
+      this.botToggle()
+    }
+
     EventBus.$on('select-button-option', this.selectOption)
   },
 

src/components/MessageBubble/ButtonOptions.vue

@@ -20,7 +20,7 @@
         span {{ item.text }}
 </template>
 <script>
-import EventBus from '@/helpers/event-bus'
+import EventBus from '../../helpers/event-bus'
 
 export default {
   props: {

src/vue-bot-ui.js

@@ -1,4 +1,4 @@
-import VueBotUI from '@/components/BotUI.vue'
+import VueBotUI from './components/BotUI.vue'
 
 const Plugin = {
   install (Vue, options) {