Support item slots

junjizhi · Jul 23, 2021 · ced98ff · ced98ff
1 parent 58fa225
commit ced98ff
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -88,20 +88,22 @@ export default Vue.extend({
 - [x] Support `reverse` props
 - [x] Custom timestamp format
 - [x] Support item head color variants
+- [x] Support custom slots
 - [ ] Support custom icons
 - [ ] Refactor timeline and item into separate components
 - [ ] Emit events
 
 ## Component Reference
 ### 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' |
+| Name                  | Type      | Description                                                                                                                                                                                              | Default |
+| --------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `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' |         |
+| `human-friendly-time` | `Boolean` | Displays human friendly time, e.g., '2 months ago'. If false, display the time as formatted according to the `dateFormat` param.  Default: true                                                          | `true`  |
 ### Slots
 N/A
 ### Events

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-timeline",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Junji Zhi <[email protected]>",
   "license": "MIT",
   "repository": {

diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
@@ -36,6 +36,14 @@ export default /*#__PURE__*/{
      *  Default: 'primary'
     */
     variant: String,
+    /**
+     * Displays human friendly time, e.g., '2 months ago'. If false, display the time as formatted according to the `dateFormat` param.
+     *  Default: true
+    */
+    humanFriendlyTime: {
+      type: Boolean,
+      default: true
+    }
   },
   methods: {
     bootstrapVariant() {
@@ -104,18 +112,23 @@ export default /*#__PURE__*/{
           <small
             :id="timestampElementId(item)"
             class="mt-2"
-          > {{ formatAgo(item.timestamp) }}</small>
+          > {{ humanFriendlyTime ? formatAgo(item.timestamp) : formatFull(item.timestamp) }}</small>
 
           <b-tooltip
             :target="timestampElementId(item)"
             triggers="hover"
           >
-            {{ formatFull(item.timestamp) }}
+            {{ humanFriendlyTime ? formatFull(item.timestamp) : formatAgo(item.timestamp) }}
           </b-tooltip>
         </div>
 
         <small class="mb-1 item-description">
-          {{ item.content || '' }}
+          <slot
+            :item="item"
+            name="item"
+          >
+            {{ item.content || '' }}
+          </slot>
         </small>
       </div>
     </b-list-group-item>