@kiva/kv-components 4.8.6 → 5.1.0

package/vue/KvMaterialIcon.vue

@@ -1,47 +0,0 @@
-<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/vue/KvPageContainer.vue

@@ -1,15 +0,0 @@
-<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/vue/KvPagination.vue

@@ -1,198 +0,0 @@
-<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/vue/KvPieChart.vue

@@ -1,257 +0,0 @@
-<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/vue/KvPopper.vue

@@ -1,178 +0,0 @@
-<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>