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 || '' }} +