diff --git a/README.md b/README.md
index 8cdb8a9..0028a1d 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ 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
@@ -95,13 +96,14 @@ export default Vue.extend({
## 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.
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.
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
index b6d269d..ee0f8f0 100644
--- 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 ",
"license": "MIT",
"repository": {
diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
index a5d079b..8d65bd1 100644
--- 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__*/{
{{ formatAgo(item.timestamp) }}
+ > {{ humanFriendlyTime ? formatAgo(item.timestamp) : formatFull(item.timestamp) }}
- {{ formatFull(item.timestamp) }}
+ {{ humanFriendlyTime ? formatFull(item.timestamp) : formatAgo(item.timestamp) }}
- {{ item.content || '' }}
+
+ {{ item.content || '' }}
+