Comment

The VComment component is a Vue 3 component that displays a user comment with an avatar, text, a title, a date, and an optional badge.

Props

Prop Name	Type	Default	Description
`imageSrc`	String	`undefined`	The source URL for the avatar image.
`text`	String	`undefined`	The main text content of the comment.
`date`	String	`undefined`	The date when the comment was created.
`title`	String	`undefined`	The name of the author of the comment.
`background`	String	`#F0F4FF`	The background color of the comment box.
`tag`	String	`undefined`	A label displayed as a badge next to the author’s name.

Example

vue

<script setup lang="ts">
  import VComment from 'UiKit/components/VComment/VComment.vue'
</script>
<VComment text='This is a comment!' title='John Doe' date='2024-10-10' />

John Doe

2024-10-10

This is a comment!

VCommentThread

The VCommentThread component renders an individual comment along with an optional reply. It uses the VComment component for displaying comments and includes formatting for replies.

Props

Prop Name	Type	Required	Description
`comment`	`IOfferComment`	Yes	The comment data containing user details, creation date, and comment text.

export interface IOfferComment {
  created_at: string;
  comment: string;
  related?: string;
  user: {
    first_name: string;
    last_name: string;
  };
}

VCommentItems

The VCommentItems component is a Vue 3 component that renders a list of comments using the TheCommentThread component. It provides a slot for customizing the title.

Props

Prop Name	Type	Required	Description
`comments`	`IOfferComment[]`	Yes	An array of comments to be displayed.

Slots

Slot Name	Description
`default`	Slot for customizing the title of the comment section.

Example

vue

<script setup lang="ts">
  import VCommentItems from 'UiKit/components/VComment/VCommentItems.vue';
  const comments: IOfferComment[] = [
  {
    created_at: '2024-02-01T12:30:00Z',
    comment: 'Is this product available in different colors?',
    related: 'product',
    user: {
      first_name: 'Alice',
      last_name: 'Johnson',
    },
  },
  {
    created_at: '2024-02-02T14:15:00Z',
    comment: 'Does this service include international shipping?',
    related: 'shipping',
    user: {
      first_name: 'Bob',
      last_name: 'Smith',
    },
  },
];

</script>
<VCommentItems :comments="comments" />

Questions

Alice JohnsonProduct

2/1/2024

Is this product available in different colors?

Bob SmithShipping

2/2/2024

Does this service include international shipping?