Add documentation

junjizhi · Jun 12, 2021 · 056c92f · 056c92f
1 parent 19a90ef
commit 056c92f
Show file tree

Hide file tree

Showing 4 changed files with 306 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -3,12 +3,17 @@
 ## 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
 
+## Dependencies
+
+
+* [Vue.js 2.6+](https://vuejs.org/2016/04/27/announcing-2.0/)
+* [Bootstrap-Vue (v2.21.2+)](https://bootstrap-vue.org/)
+* [Other Bootstrap-Vue dependencies](https://bootstrap-vue.org/docs).
+
 ## Installation
 
 ```bash
@@ -83,14 +88,22 @@ export default Vue.extend({
 - [x] Support item head color variants
 - [ ] Support custom icons
 - [ ] Refactor timeline and item into separate components
+- [ ] Emit events
 
 ## Component Reference
-### Properties
-TBD
+### Props
+
+| Name          | Type      | Description                                                                                                                                                                                              |
+| ------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`       | `Array`   | A list of timeline items to display. Supported keys include: `timestamp`, `title`, `content`.                                                                                                            |
+| `reverse`     | `Boolean` | The component displays a vertical timeline in the order of the `items` prop. If `reserve` is set to false, it displays items in reverse order.<br/> Default: false.                                      |
+| `loading`     | `Boolean` | If true, display a loading spinner in the last item.                                                                                                                                                     |
+| `date-format` | `String`  | Controls the date format in the tooltip when you hover the human friendly time.  Default: 'yyyy-MM-dd HH:mm:ss'                                                                                          |
+| `variant`     | `String`  | Color variant. It supports [Bootstrap color variants](https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping), including 'primary', 'success'.  Default: 'primary' |
 ### Slots
-TBD
+N/A
 ### Events
-TBD
+N/A
 
 ## Development
 
@@ -114,6 +127,11 @@ yarn serve
 yarn lint
 ```
 
+**Generate component documentation**:
+```bash
+yarn doc src/bootstrap-vue-timeline.vue
+```
+
 ## License
 
 Released under the MIT [License](./LICENSE). Copyright (c) Bootstrap-vue-timeline.
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
     "lint": "vue-cli-service lint --fix && standard --fix",
-    "test": "jest"
+    "test": "jest",
+    "doc": "vuedoc.md"
   },
   "dependencies": {
     "bootstrap-vue": "^2.21.2",
@@ -38,6 +39,8 @@
     "@vue/cli-plugin-unit-jest": "^4.5.13",
     "@vue/cli-service": "^4.5.10",
     "@vue/test-utils": "^1.2.0",
+    "@vuedoc/md": "^3.2.0",
+    "@vuedoc/parser": "^3.3.0",
     "cross-env": "^7.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
@@ -11,10 +11,30 @@ Vue.component('b-spinner', BSpinner)
 export default /*#__PURE__*/{
   name: 'BootstrapVueTimeline',
   props: {
+    /**
+     * A list of timeline items to display. Supported keys include: `timestamp`, `title`, `content`.
+    */
     items: Array,
+    /**
+     * The component displays a vertical timeline in the order of the `items` prop.
+     * If `reserve` is set to false, it displays items in reverse order.
+     *
+     *  Default: false.
+    */
     reverse: Boolean,
+    /**
+     * If true, display a loading spinner in the last item.
+    */
     loading: Boolean,
+    /**
+     * Controls the date format in the tooltip when you hover the human friendly time.
+     *  Default: 'yyyy-MM-dd HH:mm:ss'
+    */
     dateFormat: String,
+    /**
+     * Color variant. It supports [Bootstrap color variants](https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping), including 'primary', 'success'.
+     *  Default: 'primary'
+    */
     variant: String,
   },
   methods: {