@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvCommentsContainer.vue

@@ -0,0 +1,84 @@
+<template>
+	<div>
+		<kv-comments-add
+			v-if="userPublicId"
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			@add-comment="handleReaction"
+		/>
+		<kv-comments-list
+			v-if="comments"
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			:user-public-id="userPublicId"
+			:comments="comments"
+			@add-reaction="handleReaction"
+		/>
+	</div>
+</template>
+
+<script>
+import KvCommentsAdd from './KvCommentsAdd.vue';
+import KvCommentsList from './KvCommentsList.vue';
+
+export const ADD_COMMENT_EVENT = 'add-comment';
+export const ADD_REACTION_EVENT = 'add-reaction';
+
+export default {
+	name: 'KvCommentsContainer',
+	components: {
+		KvCommentsAdd,
+		KvCommentsList,
+	},
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+	emits: [ADD_REACTION_EVENT],
+	setup(_props, { emit }) {
+		const handleReaction = (reactionPayload) => {
+			let payload;
+			if (reactionPayload.value === undefined) {
+				payload = {
+					reaction: ADD_COMMENT_EVENT,
+					id: null,
+					isChild: false,
+					value: reactionPayload,
+				};
+			} else {
+				payload = reactionPayload;
+			}
+			emit(ADD_REACTION_EVENT, payload);
+		};
+		return {
+			handleReaction,
+		};
+	},
+};
+</script>

package/dist/components/KvCommentsHeartButton.vue

@@ -0,0 +1,70 @@
+<template>
+	<button
+		aria-label="Like"
+		class="tw-flex tw-flex-col tw-justify-center"
+		@click="$emit('click', !isLiked);"
+	>
+		<kv-material-icon
+			:icon="icon"
+			:class="classState"
+		/>
+	</button>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import { mdiHeart, mdiHeartOutline } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvCommentsHeartButton',
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Use if small icon is needed
+		 */
+		isSmall: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Use if icon is liked
+		 */
+		isLiked: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props) {
+		const {
+			isSmall,
+			isLiked,
+		} = toRefs(props);
+
+		const icon = computed(() => (isLiked.value ? mdiHeart : mdiHeartOutline));
+
+		const classState = computed(() => {
+			let className = isSmall.value ? 'tw-w-2.5 tw-h-2.5' : 'tw-w-3 tw-h-3';
+			className += isLiked.value ? ' filled' : '';
+
+			return className;
+		});
+
+		return {
+			icon,
+			classState,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.filled >>> svg {
+    fill: #F60059;
+}
+</style>

package/dist/components/KvCommentsList.vue

@@ -0,0 +1,68 @@
+<template>
+	<div>
+		<KvCommentsListItem
+			v-for="comment in comments"
+			:id="comment.id"
+			:key="comment.id"
+			:comment="comment"
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			:user-public-id="userPublicId"
+			:is-liked="comment.is_liked"
+			class="tw-mb-2 tw-not-prose"
+			@add-reaction="handleReaction"
+		/>
+	</div>
+</template>
+
+<script>
+
+import KvCommentsListItem from './KvCommentsListItem.vue';
+
+const ADD_REACTION_EVENT = 'add-reaction';
+
+export default {
+	name: 'KvCommentsList',
+	components: { KvCommentsListItem },
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+	emits: [ADD_REACTION_EVENT],
+	setup(_props, { emit }) {
+		const handleReaction = (payload) => {
+			emit(ADD_REACTION_EVENT, payload);
+		};
+
+		return {
+			handleReaction,
+		};
+	},
+};
+</script>

package/dist/components/KvCommentsListItem.vue

@@ -0,0 +1,241 @@
+<template>
+	<div>
+		<div>
+			<div class="tw-flex tw-items-center tw-gap-1">
+				<kv-user-avatar
+					:lender-name="authorName"
+					:lender-image-url="authorImage"
+					is-small
+				/>
+				<p
+					v-if="authorName"
+					class="data-hj-suppress tw-font-medium"
+				>
+					{{ authorName }}
+				</p>
+			</div>
+			<p>
+				{{ commentText }}
+			</p>
+		</div>
+		<div class="tw-flex tw-items-center tw-gap-x-1">
+			<div class="tw-flex tw-items-center tw-gap-0.5">
+				<kv-comments-heart-button
+					:is-small="true"
+					:is-liked="isLiked"
+					:disabled="!userPublicId"
+					@click="addReaction(LIKE_COMMENT_EVENT, $event)"
+				/>
+				<p
+					v-if="numberOfLikes"
+					data-testid="like-count"
+					class="tw-font-medium"
+				>
+					{{ numberOfLikes }}
+				</p>
+			</div>
+			<kv-comments-reply-button
+				v-if="userPublicId && nestLevel === 0"
+				@click="replyClick"
+			/>
+		</div>
+		<div
+			v-if="showInput"
+			class="tw-w-full"
+		>
+			<kv-comments-add
+				ref="commentsAddRef"
+				:user-image-url="userImageUrl"
+				:user-display-name="userDisplayName"
+				:is-reply="true"
+				class="tw-ml-3"
+				@add-comment="addReaction(REPLY_COMMENT_EVENT, $event)"
+				@hide-input="hideInput"
+			/>
+		</div>
+		<div
+			v-if="childComments"
+			class="tw-my-1"
+		>
+			<button
+				v-if="numberOfReplies"
+				class="tw-ml-3 tw-text-action tw-font-medium tw-mb-1 tw-flex tw-items-center"
+				@click="toggleReplies"
+			>
+				<kv-material-icon
+					class="tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease"
+					:class="{ 'tw-rotate-180' : repliesOpened }"
+					:icon="mdiChevronDown"
+				/>
+				{{ numberOfReplies }} {{ numberOfReplies > 1 ? 'replies' : 'reply' }}
+			</button>
+			<div v-if="repliesOpened">
+				<div
+					v-for="childComment in childComments"
+					:key="childComment.id"
+					class="tw-ml-3"
+				>
+					<kv-comments-list-item
+						:user-image-url="userImageUrl"
+						:user-display-name="userDisplayName"
+						:user-public-id="userPublicId"
+						:comment="childComment"
+						:nest-level="nestLevel + 1"
+						@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mdiChevronDown } from '@mdi/js';
+import {
+	ref,
+	nextTick,
+	computed,
+	toRefs,
+	onMounted,
+	inject,
+} from 'vue-demi';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
+import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
+import KvCommentsAdd from './KvCommentsAdd.vue';
+import KvUserAvatar from './KvUserAvatar.vue';
+
+export const REPLY_COMMENT_EVENT = 'reply-comment';
+export const LIKE_COMMENT_EVENT = 'like-comment';
+const ADD_REACTION_EVENT = 'add-reaction';
+
+export default {
+	name: 'KvCommentsListItem',
+	components: {
+		KvCommentsReplyButton,
+		KvCommentsHeartButton,
+		KvCommentsAdd,
+		KvUserAvatar,
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Activity comment
+		 */
+		comment: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * The nest level of the comment
+		 */
+		nestLevel: {
+			type: Number,
+			default: 0,
+		},
+	},
+	emits: [
+		ADD_REACTION_EVENT,
+	],
+	setup(props, { emit }) {
+		const {
+			comment,
+			userPublicId,
+		} = toRefs(props);
+
+		const showInput = ref(false);
+		const commentsAddRef = ref(null);
+		const authorInfo = ref();
+		const repliesOpened = ref(false);
+
+		const commentText = computed(() => comment?.value?.text ?? '');
+
+		const authorId = computed(() => comment?.value?.publicLenderId ?? '');
+		const authorImage = computed(() => authorInfo?.value?.image?.url ?? '');
+		const authorName = computed(() => authorInfo?.value?.name ?? '');
+
+		const childComments = computed(() => comment?.value?.children?.comment ?? null);
+		const childLikes = computed(() => (comment?.value?.children?.like ?? []));
+		const likedObject = computed(() => childLikes.value.find((l) => l.publicLenderId === userPublicId.value));
+		const isLiked = computed(() => likedObject.value !== undefined);
+
+		const replyClick = () => {
+			showInput.value = !showInput.value;
+			nextTick(() => {
+				if (showInput.value) commentsAddRef.value.$refs.input.focus();
+			});
+		};
+
+		const addReaction = (reaction, value) => {
+			const payload = {
+				reaction,
+				id: comment?.value?.id ?? null,
+				isChild: true,
+				value,
+			};
+
+			emit(ADD_REACTION_EVENT, payload);
+		};
+
+		const hideInput = () => { showInput.value = false; };
+
+		const numberOfLikes = computed(() => comment?.value?.children?.like?.length ?? 0);
+
+		const numberOfReplies = computed(() => comment?.value?.children?.comment?.length ?? 0);
+
+		const toggleReplies = () => { repliesOpened.value = !repliesOpened.value; };
+
+		// The fetchLenderInfo method must be provided in the parent component
+		const fetchLenderInfo = inject('fetchLenderInfo');
+
+		onMounted(async () => {
+			if (authorId.value) {
+				const authorData = await fetchLenderInfo(authorId.value);
+				authorInfo.value = authorData;
+			}
+		});
+
+		return {
+			hideInput,
+			showInput,
+			commentsAddRef,
+			replyClick,
+			addReaction,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
+			ADD_REACTION_EVENT,
+			commentText,
+			authorImage,
+			authorName,
+			childComments,
+			isLiked,
+			numberOfLikes,
+			numberOfReplies,
+			repliesOpened,
+			toggleReplies,
+			mdiChevronDown,
+		};
+	},
+};
+</script>

package/dist/components/KvCommentsReplyButton.vue

@@ -0,0 +1,52 @@
+<!-- eslint-disable max-len -->
+<template>
+	<kv-button
+		variant="ghost"
+		aria-label="Reply"
+		@click="$emit('click')"
+	>
+		<svg
+			width="14"
+			height="11"
+			viewBox="0 0 14 11"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.87502 5.12499L4.91669 7.16666C5.06946 7.31943 5.14585 7.49652 5.14585 7.69791C5.14585 7.8993 5.06946 8.0797 4.91669 8.23911C4.76391 8.38525 4.58683 8.45832 4.38544 8.45832C4.18405 8.45832 4.00696 8.38193 3.85419 8.22916L0.520854 4.89582C0.368076 4.7481 0.291687 4.57575 0.291687 4.37878C0.291687 4.18181 0.368076 4.00693 0.520854 3.85416L3.85419 0.520823C4.00696 0.368045 4.18521 0.291656 4.38892 0.291656C4.59261 0.291656 4.76853 0.368045 4.91669 0.520823C5.06946 0.668976 5.14585 0.8449 5.14585 1.04859C5.14585 1.2523 5.06946 1.43055 4.91669 1.58332L2.87502 3.62499H10C11.1067 3.62499 12.05 4.01499 12.83 4.79499C13.61 5.57499 14 6.51832 14 7.62499V9.87499C14 10.0875 13.9286 10.2656 13.7857 10.4094C13.6427 10.5531 13.4657 10.625 13.2544 10.625C13.0432 10.625 12.8646 10.5531 12.7188 10.4094C12.5729 10.2656 12.5 10.0875 12.5 9.87499V7.62499C12.5 6.93055 12.257 6.34027 11.7709 5.85416C11.2847 5.36805 10.6945 5.12499 10 5.12499H2.87502Z"
+				fill="#1C1B1F"
+			/>
+		</svg>
+		<span>
+			reply
+		</span>
+	</kv-button>
+</template>
+
+<script>
+import KvButton from './KvButton.vue';
+
+export default {
+	name: 'KvCommentsReplyButton',
+	components: {
+		KvButton,
+	},
+	emits: [
+		'click',
+	],
+};
+</script>
+
+<style lang="postcss" scoped>
+>>> span {
+	@apply tw-min-h-0;
+}
+
+>>> span > span {
+	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
+}
+
+>>> svg {
+	@apply tw-mx-0.5;
+}
+</style>