From d824d6d54cd2278688ace11bf2f19c1898080cb2 Mon Sep 17 00:00:00 2001
From: Junji Zhi <junjizhi.to@gmail.com>
Date: Wed, 9 Jun 2021 09:21:51 -0400
Subject: [PATCH] Refactor build logic; Update README

---
 README.md                      | 22 +++++++++++++++++++---
 dev/serve.vue                  |  3 +++
 package.json                   |  3 ++-
 src/bootstrap-vue-timeline.vue |  3 ---
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 1803667..0e8777f 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,8 @@
 ## Introduction
 A simple timeline component similar to [Ant Timeline](https://www.antdv.com/components/timeline/) based on [Bootstrap-Vue](https://bootstrap-vue.org/).
 
+**Note**: This component assumes you use [Bootstrap-Vue (v4)](https://bootstrap-vue.org/) in your project and have installed [the dependencies](https://bootstrap-vue.org/docs).
+
 ## Demo
 
 Link: TBD
@@ -12,7 +14,8 @@ Link: TBD
 ```bash
 npm i bootstrap-vue-timeline
 
-# or:
+# if you use yarn:
+
 yarn add bootstrap-vue-timeline
 ```
 
@@ -21,9 +24,17 @@ yarn add bootstrap-vue-timeline
 ```html
 <script>
 import Vue from 'vue';
-import BootstrapVueTimeline from '@/bootstrap-vue-timeline.vue';
+import BootstrapVueTimeline from 'bootstrap-vue-timeline'
 import { BCard } from 'bootstrap-vue'
 Vue.component('b-card', BCard)
+Vue.component('b-timeline', BootstrapVueTimeline)
+
+// Uncomment the following to import BootstrapVue CSS files if you
+// have not done so when registering BootstrapVue. Order is important.
+// Check out: https://bootstrap-vue.org/docs#using-module-bundlers
+// import 'bootstrap/dist/css/bootstrap.min.css'
+// import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 
 export default Vue.extend({
   name: 'ServeDev',
@@ -61,7 +72,7 @@ export default Vue.extend({
     <b-card
       title="Event Timeline"
     >
-      <bootstrap-vue-timeline
+      <b-timeline
         :items="timelineItems"
       />
     </b-card>
@@ -91,6 +102,11 @@ TBD
 yarn install --dev
 ```
 
+**Build component**:
+```bash
+yarn build
+```
+
 **Run example app locally**:
 ```bash
 yarn serve
diff --git a/dev/serve.vue b/dev/serve.vue
index 1c2ffdf..38d9c0f 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -4,6 +4,9 @@ import BootstrapVueTimeline from '@/bootstrap-vue-timeline.vue';
 import { BCard } from 'bootstrap-vue'
 Vue.component('b-card', BCard)
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 export default Vue.extend({
   name: 'ServeDev',
   components: {
diff --git a/package.json b/package.json
index 832b833..c99436a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,8 @@
   },
   "standard": {
     "ignore": [
-      "*.config.js"
+      "*.config.js",
+      "dist/"
     ]
   }
 }
diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
index 438b469..11c8b42 100644
--- a/src/bootstrap-vue-timeline.vue
+++ b/src/bootstrap-vue-timeline.vue
@@ -7,9 +7,6 @@ Vue.component('b-list-group', BListGroup)
 Vue.component('b-list-group-item', BListGroupItem)
 Vue.component('b-tooltip', BTooltip)
 
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
 export default /*#__PURE__*/{
   name: 'BootstrapVueTimeline', // vue component name
   props: {