@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvMaterialIcon.vue

@@ -0,0 +1,47 @@
+<template>
+	<span
+		class="tw-inline-flex"
+		aria-hidden="true"
+		role="img"
+	>
+		<svg
+			class="tw-w-full tw-h-full tw-fill-current"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+		>
+			<path :d="icon" />
+		</svg>
+	</span>
+</template>
+
+<script>
+/**
+ * This component takes path data as a prop from an imported @mdi/js module and
+ * renders the icon as an SVG.
+ *
+ * Find your icon name from https://materialdesignicons.com/,
+ * The module name to import will be 'mdiPascalCaseIconName'. `account-cowboy-hat` would be
+ * `import { mdiAccountCowboyHat } from '@mdi/js'`;
+ *
+ * These icons do not announce to screenreaders. If you are using a non-decorative icon, be sure
+ * to include screen reader text. E.g.,
+ * `<button>
+ * 	  <kv-material-icon :icon="mdiClose" />
+ * 	  <span class="sr-only">Close modal</span>
+ *  </button>`
+ */
+
+export default {
+	props: {
+		/**
+		 * SVG path data passed in from an imported @mdi/js module.
+		 * E.g., `import { mdiAccount } from '@mdi/js'; <kv-material-icon :icon="mdiAccount" />`
+		 * */
+		icon: {
+			type: String,
+			default: '',
+		},
+	},
+};
+</script>

package/dist/components/KvPageContainer.vue

@@ -0,0 +1,15 @@
+<template>
+	<div
+		class="tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8"
+		style="max-width: 1200px;"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+/**
+ * Wrapper component which contains content to the specified widths and margins set by design
+ */
+export default {};
+</script>

package/dist/components/KvPagination.vue

@@ -0,0 +1,198 @@
+<template>
+	<nav aria-label="Pagination">
+		<ul
+			class="tw-text-center tw-mx-auto tw-my-1.5 tw-flex tw-justify-between tw-items-center"
+			style="max-width: 17rem;"
+		>
+			<li>
+				<a
+					class="tw-cursor-pointer tw-flex"
+					:class="linkClass(0)"
+					aria-label="Previous page"
+					@click="!isCurrent(0) && clickPrevious()"
+				>
+					<kv-material-icon
+						:icon="mdiChevronLeft"
+						class="tw-h-4 tw-w-4"
+					/>
+					<span class="tw-sr-only">Previous page</span>
+				</a>
+			</li>
+			<li
+				v-for="(n, i) in numbers"
+				:key="i"
+				:aria-hidden="isEllipsis(n)"
+			>
+				<template v-if="isEllipsis(n)">
+					...
+				</template>
+				<a
+					v-else
+					class="tw-cursor-pointer"
+					:class="linkClass(n)"
+					:aria-label="`Page ${n + 1}`"
+					@click="!isCurrent(n) && clickPage(n)"
+				>
+					<span
+						v-if="isCurrent(n)"
+						class="tw-sr-only"
+					>You're on page</span>
+					{{ n + 1 }}
+				</a>
+			</li>
+			<li>
+				<a
+					class="tw-cursor-pointer tw-flex"
+					:class="linkClass(totalPages ? totalPages - 1 : 0)"
+					aria-label="Next page"
+					@click="totalPages && !isCurrent(totalPages - 1) && clickNext()"
+				>
+					<kv-material-icon
+						:icon="mdiChevronRight"
+						class="tw-h-4 tw-w-4"
+					/>
+					<span class="tw-sr-only">Next page</span>
+				</a>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script>
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvPagination',
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		limit: {
+			type: Number,
+			required: true,
+			validator: (value) => value > 0,
+		},
+		total: {
+			type: Number,
+			required: true,
+			validator: (value) => value >= 0,
+		},
+		offset: {
+			type: Number,
+			default: 0,
+			validator: (value) => value >= 0,
+		},
+		extraPages: {
+			type: Number,
+			default: 3,
+			validator: (value) => value > 0,
+		},
+		scrollToTop: {
+			type: Boolean,
+			default: true,
+		},
+		kvTrackFunction: {
+			type: Function,
+			default: () => {},
+		},
+		trackEventCategory: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			mdiChevronLeft,
+			mdiChevronRight,
+		};
+	},
+	computed: {
+		current() {
+			const page = Math.ceil(this.offset / this.limit);
+
+			// This component uses a 0-based page index
+			return page < this.totalPages ? page : 0;
+		},
+		totalPages() {
+			return Math.ceil(this.total / this.limit);
+		},
+		numbers() {
+			// If less than the max, there will be no ellipsis, so just return the numbers
+			if (this.totalPages < (this.extraPages + 2)) {
+				return this.range(0, this.totalPages - 1);
+			}
+
+			const numbers = [];
+
+			// Add the 'middle' block of numbers based upon the current page
+			if ([0, 1, 2].includes(this.current)) {
+				numbers.push(...this.range(1, this.extraPages));
+			} else if ([this.totalPages - 3, this.totalPages - 2, this.totalPages - 1]
+				.includes(this.current)) {
+				numbers.push(...this.range(this.totalPages - this.extraPages - 1, this.totalPages - 2));
+			} else {
+				const delta = Math.floor(this.extraPages / 2);
+				numbers.push(...this.range(this.current - delta, this.current + delta));
+			}
+
+			// Add a placeholder for first ellipsis
+			if (numbers[1] !== 2) {
+				numbers.splice(0, 0, -1);
+			}
+
+			// Add a placeholder for second ellipsis
+			const totalNumbers = numbers.length;
+			if (numbers[totalNumbers - 1] !== this.totalPages - 2) {
+				numbers.splice(totalNumbers, 0, -1);
+			}
+
+			// Add first and last pages
+			numbers.unshift(0);
+			numbers.push(this.totalPages - 1);
+
+			return numbers;
+		},
+	},
+	methods: {
+		range(start, end) {
+			return [...Array(end - start + 1)].map((_, n) => n + start);
+		},
+		isCurrent(number) {
+			return number === this.current;
+		},
+		isEllipsis(number) {
+			return number === -1;
+		},
+		linkClass(number) {
+			return { 'tw-text-tertiary': this.isCurrent(number), 'tw-pointer-events-none': this.isCurrent(number) };
+		},
+		pageChange(number) {
+			if (this.scrollToTop && window.scrollTo) {
+				window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+			}
+
+			this.$emit('page-changed', { pageOffset: number * this.limit });
+		},
+		clickPage(number) {
+			this.pageChange(number);
+
+			this.kvTrackFunction(this.trackEventCategory, 'click', 'pagination-number', null, number + 1);
+		},
+		clickPrevious() {
+			const previous = this.current - 1;
+
+			this.pageChange(previous);
+
+			this.kvTrackFunction(this.trackEventCategory, 'click', 'pagination-previous', null, previous + 1);
+		},
+		clickNext() {
+			const next = this.current + 1;
+
+			this.pageChange(next);
+
+			this.kvTrackFunction(this.trackEventCategory, 'click', 'pagination-next', null, next + 1);
+		},
+	},
+};
+</script>

package/dist/components/KvPieChart.vue

@@ -0,0 +1,257 @@
+<template>
+	<figure
+		class="pie-chart tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center tw-gap-2"
+		@mouseleave="activeSlice = null"
+	>
+		<!-- pie chart -->
+		<div class="tw-relative">
+			<div
+				v-if="loading"
+				class="pie-placeholder tw-mt-2.5"
+			>
+				<div class="tw-overflow-hidden tw-rounded-full">
+					<kv-loading-placeholder />
+				</div>
+			</div>
+			<svg
+				v-else
+				viewBox="0 0 32 32"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:xlink="http://www.w3.org/1999/xlink"
+			>
+				<path
+					v-for="(slice, index) in slices"
+					:key="index"
+					class="tw-origin-center tw-transition-transform"
+					:style="isSliceActive(slice) ? { transform: 'scale(1.1)' } : {}"
+					:d="slice.path"
+					:stroke="slice.color"
+					:stroke-width="lineWidth"
+					fill="none"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
+				/>
+			</svg>
+			<!-- active slice -->
+			<div
+				v-if="activeSlice"
+				class="
+					tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2
+					tw-flex tw-flex-col tw-items-center tw-text-center"
+				style="max-width: 8.5rem;"
+			>
+				<div class="tw-font-medium tw-line-clamp-4">
+					{{ activeSlice.label }}
+				</div>
+				<div>
+					{{ activeSlice.value }} ({{ activeSlicePercent }})
+				</div>
+			</div>
+		</div>
+		<!-- key -->
+		<div
+			style="width: 14rem; height: 85%;"
+			class="tw-flex tw-flex-col tw-justify-between"
+		>
+			<ol class="tw-pl-4 md:tw-pl-0">
+				<li
+					v-for="(slice, index) in slices.slice(pageIndex * slicesPerPage, (pageIndex + 1) * slicesPerPage)"
+					:key="index"
+					class="tw-flex tw-items-center"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
+				>
+					<div
+						class="tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none"
+						:style="{ backgroundColor: slice.color }"
+					></div>
+					<span class="tw-truncate">
+						{{ slice.label }}
+					</span>
+				</li>
+			</ol>
+			<!-- paging controls -->
+			<div
+				v-if="pageCount > 1"
+				class="tw-flex tw-justify-center md:tw-justify-start"
+			>
+				<button
+					:disabled="pageIndex === 0"
+					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
+					@click="prevPage"
+				>
+					&lt;
+				</button>
+				{{ pageIndex + 1 }} / {{ pageCount }}
+				<button
+					:disabled="pageIndex === pageCount - 1"
+					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
+					@click="nextPage"
+				>
+					&gt;
+				</button>
+			</div>
+		</div>
+	</figure>
+</template>
+
+<script>
+import numeral from 'numeral';
+import {
+	ref,
+	toRaw,
+	toRefs,
+	computed,
+} from 'vue-demi';
+import Alea from '../utils/Alea';
+import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
+
+// convenience function to get point on circumference of a given circle (from https://codepen.io/grieve/pen/xwGMJp)
+function circumPointFromAngle(cx, cy, r, a) {
+	return [
+		cx + r * Math.cos(a),
+		cy + r * Math.sin(a),
+	];
+}
+
+export default {
+	name: 'PieChartFigure',
+	components: {
+		KvLoadingPlaceholder,
+	},
+	props: {
+		loading: {
+			type: Boolean,
+			default: true,
+		},
+		values: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			values,
+		} = toRefs(props);
+
+		const svgSize = ref(32);
+		const lineWidth = ref(5);
+		const activeSlice = ref(null);
+		const pageIndex = ref(0);
+		const slicesPerPage = ref(10);
+
+		const activeSlicePercent = computed(() => {
+			return activeSlice.value ? numeral(activeSlice.value.percent).format('0.00%') : '';
+		});
+
+		const radius = computed(() => {
+			return (svgSize.value / 2) - (lineWidth.value / 2) - 2;
+		});
+
+		const center = computed(() => {
+			return svgSize.value / 2;
+		});
+
+		const pickColor = (index) => {
+			const rng = new Alea('loans', index, 'kiva');
+			let color = '#';
+			for (let i = 0; i < 3; i += 1) {
+				color += Math.floor(rng() * 256).toString(16).padStart(2, '0');
+			}
+			return color;
+		};
+
+		const slices = computed(() => {
+			const slicesArr = [];
+			// center point
+			const cX = center.value;
+			const cY = cX;
+			// radius
+			const r = radius.value;
+			// starting angle
+			let start = -0.25;
+			// loop through each value and create a pie slice path
+			for (let i = 0; i < values.value.length; i += 1) {
+				const value = values.value[i];
+				const end = start + value.percent;
+				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
+				let path = `M ${startX},${startY} `;
+				if (value.percent > 0.99) {
+					// Draw a full circle in two arcs
+					const [midX, midY] = circumPointFromAngle(cX, cY, r, (start + end) * Math.PI);
+					path += `A ${r},${r} 0 0,1 ${midX},${midY} `;
+					path += `A ${r},${r} 0 0,1 ${startX},${startY}`;
+				} else {
+					// Draw just the outer arc of the slice
+					const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
+					const largeArc = value.percent > 0.5 ? 1 : 0;
+					path += `A ${r},${r} 0 ${largeArc},1 ${endX},${endY}`;
+				}
+				slicesArr.push({
+					...value,
+					path,
+					color: pickColor(i),
+				});
+				start = end;
+			}
+			return slicesArr;
+		});
+
+		const pageCount = computed(() => {
+			return Math.ceil(slices.value.length / slicesPerPage.value);
+		});
+
+		const prevPage = () => {
+			if (pageIndex.value > 0) {
+				pageIndex.value -= 1;
+			}
+		};
+		const nextPage = () => {
+			if (pageIndex.value < pageCount.value - 1) {
+				pageIndex.value += 1;
+			}
+		};
+
+		const isSliceActive = (slice) => {
+			return toRaw(activeSlice.value) === slice;
+		};
+
+		const setActiveSlice = (slice) => {
+			activeSlice.value = slice;
+			emit('click', slice.label);
+		};
+
+		return {
+			svgSize,
+			lineWidth,
+			activeSlice,
+			pageIndex,
+			slicesPerPage,
+			activeSlicePercent,
+			radius,
+			center,
+			slices,
+			pageCount,
+			prevPage,
+			nextPage,
+			isSliceActive,
+			setActiveSlice,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.pie-chart svg {
+	width: 20rem;
+	height: 20rem;
+}
+
+.pie-placeholder, .pie-placeholder div {
+	width: 17.5rem;
+	height: 17.5rem;
+}
+</style>

package/dist/components/KvPopper.vue

@@ -0,0 +1,178 @@
+<template>
+	<transition :name="transitionType">
+		<div
+			v-show="show"
+			class="tw-absolute"
+			:style="styles"
+			:aria-hidden="show ? 'false' : 'true'"
+		>
+			<slot></slot>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {
+	onBodyTouchstart,
+	offBodyTouchstart,
+	isTargetElement,
+} from '../utils/touchEvents';
+
+export default {
+	name: 'KvPopper',
+	props: {
+		controller: {
+			validator(value) {
+				if (typeof value === 'string') return true;
+				if (typeof window === 'object'
+					&& 'HTMLElement' in window
+					&& value instanceof HTMLElement) return true;
+				return false;
+			},
+			required: true,
+		},
+		openDelay: { type: Number, default: 0 },
+		closeDelay: { type: Number, default: 200 },
+		// must be defined in our globa/transitions.scss
+		transitionType: { type: String, default: '' },
+		popperPlacement: { type: String, default: 'bottom-start' },
+		popperModifiers: { type: Object, default: () => {} },
+	},
+	data() {
+		return {
+			popper: null,
+			popperPromise: null,
+			styles: {},
+			show: false,
+			timeout: null,
+		};
+	},
+	computed: {
+		reference() {
+			return typeof this.controller === 'string' ? document.getElementById(this.controller) : this.controller;
+		},
+	},
+	watch: {
+		show(showing) {
+			if (this.reference) {
+				this.reference.setAttribute('aria-expanded', showing ? 'true' : 'false');
+			}
+			this.$emit(showing ? 'show' : 'hide');
+		},
+	},
+	mounted() {
+		this.reference.tabIndex = 0;
+		this.attachEvents();
+	},
+	updated() {
+		if (this.popper) {
+			this.popper.scheduleUpdate();
+		}
+	},
+	beforeDestroy() {
+		this.removeEvents();
+		if (this.popper) {
+			this.popper.destroy();
+		}
+	},
+	methods: {
+		open() {
+			this.initPopper().then(() => {
+				this.setTimeout(() => {
+					this.show = true;
+					this.popper.scheduleUpdate();
+					this.attachBodyEvents();
+				}, this.openDelay);
+			});
+		},
+		close() {
+			this.setTimeout(() => {
+				this.show = false;
+				this.removeBodyEvents();
+			}, this.closeDelay);
+		},
+		toggle() {
+			if (this.show) {
+				this.close();
+			} else {
+				this.open();
+			}
+		},
+		update() {
+			if (this.popper) {
+				this.popper.scheduleUpdate();
+			}
+		},
+		initPopper() {
+			// skip loading if popper already created
+			if (this.popper) return Promise.resolve();
+			// skip loading if loading already started
+			if (this.popperPromise) return this.popperPromise;
+			// import and init Popper.js
+			this.popperPromise = import('popper.js').then(({ default: Popper }) => {
+				this.popper = new Popper(this.reference, this.$el, {
+					placement: this.popperPlacement,
+					modifiers: {
+						applyStyle: (data) => {
+							this.styles = data.styles;
+							this.setAttributes(data.attributes);
+						},
+						preventOverflow: {
+							padding: 0,
+						},
+						...this.popperModifiers,
+					},
+				});
+			});
+			return this.popperPromise;
+		},
+		bodyTouchHandler(e) {
+			if (!isTargetElement(e, [this.reference, this.$el])) {
+				this.show = false;
+				this.removeBodyEvents();
+			}
+		},
+		referenceTapHandler(e) {
+			e.preventDefault();
+			this.toggle();
+		},
+		attachEvents() {
+			this.reference.addEventListener('mouseover', this.open);
+			this.reference.addEventListener('focus', this.open);
+			this.reference.addEventListener('mouseout', this.close);
+			this.reference.addEventListener('blur', this.close);
+			this.$el.addEventListener('mouseover', this.open);
+			this.$el.addEventListener('mouseout', this.close);
+			this.reference.addEventListener('touchstart', this.referenceTapHandler);
+		},
+		attachBodyEvents() {
+			onBodyTouchstart(this.bodyTouchHandler);
+		},
+		removeEvents() {
+			this.removeBodyEvents();
+			this.reference.removeEventListener('touchstart', this.referenceTapHandler);
+			this.reference.removeEventListener('mouseover', this.open);
+			this.reference.removeEventListener('mouseout', this.close);
+			this.$el.removeEventListener('mouseover', this.open);
+			this.$el.removeEventListener('mouseout', this.close);
+		},
+		removeBodyEvents() {
+			offBodyTouchstart(this.bodyTouchHandler);
+		},
+		setAttributes(attrs) {
+			Object.keys(attrs).forEach((attr) => {
+				const value = attrs[attr];
+				if (value === false) {
+					this.$el.removeAttribute(attr);
+				} else {
+					this.$el.setAttribute(attr, value);
+				}
+			});
+		},
+		setTimeout(fn, delay) {
+			window.clearTimeout(this.timeout);
+			this.timeout = window.setTimeout(fn, delay);
+		},
+	},
+};
+</script>