@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvLightbox.vue

@@ -0,0 +1,334 @@
+<template>
+	<transition
+		enter-active-class="tw-transition-opacity tw-duration-300"
+		leave-active-class="tw-transition-opacity tw-duration-300"
+		enter-class="tw-opacity-0"
+		enter-to-class="tw-opacity-full"
+		leave-class="tw-opacity-full"
+		leave-to-class="tw-opacity-0"
+	>
+		<!-- the screen -->
+		<div
+			v-show="visible"
+			class="
+				tw-z-modal
+				tw-fixed
+				tw-inset-0
+				tw-bg-black
+				tw-bg-opacity-[75%]
+			"
+			@click.stop.prevent="onScreenClick"
+		>
+			<div>
+				<div
+					class="
+						tw-flex
+						tw-absolute
+						tw-inset-0
+					"
+					:class="{
+						'md:tw-px-2' : variant === 'lightbox',
+						'tw-px-2' : variant === 'alert',
+					}"
+				>
+					<!-- the lightbox itself -->
+					<div
+						ref="kvLightbox"
+						tabindex="-1"
+						data-test="kv-lightbox"
+						class="
+							tw-bg-primary
+							tw-flex tw-flex-col
+							tw-mx-auto md:tw-my-auto
+
+						"
+						:class="{
+							'tw-w-full md:tw-w-auto' : variant === 'lightbox',
+							'tw-mt-auto md:tw-my-auto' : variant === 'lightbox',
+							'tw-min-h-half-screen md:tw-min-h-0' : variant === 'lightbox',
+							'tw-rounded-t md:tw-rounded' : variant === 'lightbox',
+							'tw-my-auto tw-rounded' : variant === 'alert',
+						}"
+						style="max-width: 55.55rem; max-height: 90%"
+						aria-modal="true"
+						:aria-label="title ? title : null"
+						:aria-describedby="variant === 'alert' ? 'kvLightboxBody' : null"
+						:role="role"
+						@click.stop
+					>
+						<!-- header -->
+						<div
+							class="
+								tw-flex
+								tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5
+							"
+						>
+							<div class="tw-flex-grow">
+								<!-- @slot header -->
+								<slot name="header">
+									<h2	class="tw-text-h3 tw-flex-1">
+										{{ title }}
+									</h2>
+								</slot>
+							</div>
+							<button
+								v-if="!preventClose"
+								class="
+									tw-grid tw-content-center tw-justify-center
+									tw-ml-auto
+									tw-w-6 tw-h-6 tw--m-2
+									hover:tw-text-action-highlight
+								"
+								@click.stop="hide('close-x')"
+							>
+								<kv-material-icon
+									class="tw-w-3 tw-h-3"
+									:icon="mdiClose"
+								/>
+								<span class="tw-sr-only">Close</span>
+							</button>
+						</div>
+
+						<!-- body -->
+						<div
+							id="kvLightboxBody"
+							ref="kvLightboxBody"
+							class="
+								tw-flex-1
+								tw-px-2.5 md:tw-px-4
+								tw-pb-2.5 md:tw-pb-4
+								tw-overflow-auto
+							"
+						>
+							<!-- @slot default -->
+							<slot></slot>
+						</div>
+
+						<!-- controls -->
+						<div
+							v-if="$slots.controls"
+							ref="controlsRef"
+							class="
+								tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5
+								tw-p-2.5 md:tw-px-4 md:tw-pb-4 md:tw-pt-1
+							"
+						>
+							<!-- @slot controls -->
+							<slot name="controls"></slot>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {
+	ref,
+	toRefs,
+	computed,
+	nextTick,
+	watch,
+	onBeforeUnmount,
+	onMounted,
+} from 'vue-demi';
+import { mdiClose } from '@mdi/js';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { hideOthers as makePageInert } from 'aria-hidden';
+import { lockScroll, unlockScroll } from '../utils/scrollLock';
+import { lockPrintSingleEl, unlockPrintSingleEl } from '../utils/printing';
+
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+/**
+ * Alert or a lightbox
+ * Accessibility: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
+ *
+ * - [x] Tab and Shift + Tab do not move focus outside the dialog
+ * - [x] focus is initially set on the first focusable element (close button).
+ * - [x] focus is returned to the element that opened the dialog on close
+ * - [x] role = dialog
+ * - [x] aria-label is set to its title.
+ * - [x] adds aria-hidden=true to all elements other than this dialog when open. - https://github.com/theKashey/vue-focus-lock/issues/16
+ * - [x] scrolling only scrolls the lightbox contents, not the page itself
+
+ * Alert dialog - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
+ *
+ * - [x] focus moves to the first non-destructive control, rather than the close button
+ * - [x] role = alertDialog
+ * - [x] aria-describedby is set to the id of the dialog body
+ *
+ * Printing
+ *
+ * - [x] Only prints the contents of the lightbox when open
+ */
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Whether the dialog is open or not
+		 * */
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Appearance and role of the lightbox
+		 * @values lightbox, alert
+		 * */
+		variant: {
+			type: String,
+			default: 'lightbox',
+			validator(value) {
+				return ['lightbox', 'alert'].includes(value);
+			},
+		},
+		/**
+		 * The title of the dialog which describes the dialog to screenreaders, and if no
+		 * content is in the `header` slot, will be displayed at the top of the lightbox.
+		 * */
+		title: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The dialog has no close X button, clicking the screen does not close,
+		 * pressing ESC does not close.
+		 * */
+		preventClose: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'lightbox-closed',
+	],
+	setup(props, { emit }) {
+		const {
+			visible,
+			variant,
+			preventClose,
+		} = toRefs(props);
+
+		const kvLightbox = ref(null);
+		const kvLightboxBody = ref(null);
+		const controlsRef = ref(null);
+		const activateFocusTrap = ref(null);
+		const deactivateFocusTrap = ref(null);
+
+		// Ensure the lightbox ref isn't null
+		nextTick(() => {
+			const {
+				activate,
+				deactivate,
+			} = useFocusTrap([
+				kvLightbox.value, // This lightbox
+				'[role="alert"]', // Any open toasts/alerts on the page
+			], {
+				allowOutsideClick: true, // allow clicking outside the lightbox to close it
+			});
+			activateFocusTrap.value = activate;
+			deactivateFocusTrap.value = deactivate;
+		});
+
+		let makePageInertCallback = null;
+		let onKeyUp = null;
+
+		const role = computed(() => {
+			if (variant.value === 'alert') {
+				return 'alertdialog';
+			}
+			return 'dialog';
+		});
+
+		const hide = (closedBy = '') => {
+			// scroll any content inside the lightbox back to top
+			if (kvLightbox.value && kvLightboxBody.value) {
+				deactivateFocusTrap.value?.();
+				kvLightboxBody.value.scrollTop = 0;
+				unlockPrintSingleEl(kvLightboxBody.value);
+			}
+			unlockScroll();
+			if (makePageInertCallback) {
+				makePageInertCallback();
+				makePageInertCallback = null;
+			}
+			document.removeEventListener('keyup', onKeyUp);
+
+			/**
+			 * Triggered when the lightbox is closed
+			 * @event lightbox-closed
+			 * @type {Event}
+			*/
+			emit('lightbox-closed', { type: closedBy });
+		};
+
+		onKeyUp = (e) => {
+			if (!!e && e.key === 'Escape' && !preventClose.value) {
+				hide();
+			}
+		};
+
+		const onScreenClick = () => {
+			if (!preventClose.value) {
+				hide('background-click');
+			}
+		};
+
+		const show = () => {
+			if (visible.value) {
+				document.addEventListener('keyup', onKeyUp);
+
+				nextTick(() => {
+					if (kvLightbox.value && kvLightboxBody.value) {
+						activateFocusTrap.value?.();
+						makePageInertCallback = makePageInert(kvLightbox.value);
+						lockPrintSingleEl(kvLightboxBody.value);
+					}
+					lockScroll();
+
+					// alerts should send focus to the first actionable item in the controls
+					if (variant.value === 'alert') {
+						const firstControlEl = controlsRef.value.querySelector('button');
+						if (firstControlEl) {
+							firstControlEl.focus();
+						}
+					}
+				});
+			}
+		};
+
+		watch(visible, () => {
+			if (visible.value) {
+				show();
+			} else {
+				hide();
+			}
+		});
+
+		onMounted(() => {
+			if (visible.value) {
+				show();
+			}
+		});
+
+		onBeforeUnmount(() => hide());
+
+		return {
+			mdiClose,
+			role,
+			kvLightbox,
+			kvLightboxBody,
+			onKeyUp,
+			onScreenClick,
+			hide,
+			show,
+			controlsRef,
+		};
+	},
+};
+</script>

package/dist/components/KvLineGraph.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="tw-h-full tw-w-full tw-p-2.5">
+		<figure
+			class="tw-w-full tw-relative"
+			:style="{ height: graphHeight }"
+		>
+			<div
+				class="tw-w-full tw-h-full tw-bg-marigold-2 tw-opacity-low"
+				:style="{ clipPath: `polygon(${shade}, 100% 100%, 0% 100%)` }"
+			></div>
+			<div
+				class="tw-absolute tw-top-0 tw-w-full tw-h-full tw-bg-marigold-2"
+				:style="{ clipPath: `polygon(${line})` }"
+			></div>
+			<span
+				v-for="point in normalizedPoints"
+				:key="point.x"
+				class="
+					tw-absolute
+					tw-w-2
+					tw-h-2
+					tw-border
+					tw-border-white
+					tw-bg-marigold-2
+					tw-rounded-full
+				"
+				:style="{ left: `${point.x}%`, top: `${point.y}%`, transform: 'translate(-50%, -50%)' }"
+			></span>
+			<template v-for="point in normalizedPoints">
+				<span
+					v-if="point.label"
+					:key="point.label"
+					class="tw-absolute"
+					:style="{ left: `${point.x}%`, bottom: '-3rem', transform: 'translate(-50%, -50%)' }"
+				>
+					{{ point.label }}
+				</span>
+			</template>
+		</figure>
+		<h4
+			v-if="axisLabel"
+			class="tw-text-center"
+			:class="{ 'tw-pt-1': !hasValueLabels, 'tw-pt-6': hasValueLabels }"
+		>
+			{{ axisLabel }}
+		</h4>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * Array of objects like [{ value: 10, label: '2014' }, { value: 20, label: '2015' }]
+		 */
+		points: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * The optional label to show below the graph on the x-axis
+		 */
+		axisLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props) {
+		const { points, axisLabel } = toRefs(props);
+
+		// Get step to use on x-axis
+		const xIncrement = Math.round(100 / (points.value.length - 1));
+
+		// Find the largest value to be used as the scale of the graph
+		const largestY = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev > current.value ? prev : current.value;
+			}, 0);
+		});
+
+		// Find the largest value to be used as the scale of the graph
+		const hasValueLabels = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev || !!current.label;
+			}, false);
+		});
+
+		// Convert single values to points using increment and largest value
+		const normalizedPoints = computed(() => {
+			return points.value.reduce((prev, next, i) => {
+				prev.push({
+					x: i * xIncrement,
+					y: 100 - ((next.value / largestY.value) * 100),
+					label: next.label,
+				});
+
+				return prev;
+			}, []);
+		});
+
+		// Used for drawing the shading under the line
+		const shade = computed(() => (normalizedPoints.value.map(({ x, y }) => `${x}% ${y}%`).join(',')));
+
+		// Used for drawing the line
+		const line = computed(() => {
+			const topLine = normalizedPoints.value.map(({ x, y }) => `${x}% ${y + 0.3}%`).join(',');
+			const bottomLine = [...normalizedPoints.value].reverse().map(({ x, y }) => `${x}% ${y - 0.3}%`).join(',');
+			return `${topLine}, ${bottomLine}`;
+		});
+
+		const graphHeight = computed(() => {
+			const labelSpace = (axisLabel.value ? 2 : 0) + (hasValueLabels.value ? 2 : 0);
+
+			return `calc(100% - ${labelSpace}rem)`;
+		});
+
+		return {
+			hasValueLabels,
+			graphHeight,
+			normalizedPoints,
+			shade,
+			line,
+		};
+	},
+};
+</script>

package/dist/components/KvLoadingPlaceholder.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		class="
+			loading-placeholder
+			tw-w-full tw-h-full
+			tw-relative
+			tw-overflow-hidden
+			tw-bg-tertiary
+			tw-rounded-sm
+		"
+	>
+	</div>
+</template>
+
+<style scoped>
+.loading-placeholder::before {
+	content: '';
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	transform: translateX(100%);
+	background:
+		linear-gradient(to right, transparent 0%, rgb(var(--bg-secondary)) 50%, transparent 100%);
+	animation: loading-placeholder 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes loading-placeholder {
+	from {
+		transform: translateX(-100%);
+	}
+
+	to {
+		transform: translateX(100%);
+	}
+}
+</style>

package/dist/components/KvLoadingSpinner.vue

@@ -0,0 +1,81 @@
+<template>
+	<svg
+		class="tw-animate-spin-eased"
+		:class="{
+			'tw-h-3 tw-w-3'
+				: size === 'small',
+			'tw-h-4 tw-w-4'
+				: size === 'medium',
+			'tw-h-8 tw-w-8'
+				: size === 'large',
+			'tw-text-brand'
+				: color === 'brand',
+			'tw-text-white'
+				: color === 'white',
+			'tw-text-black'
+				: color === 'black',
+		}"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+	>
+		<g
+			clip-path="url(#clip0)"
+			stroke-width="2"
+		>
+			<circle
+				class="tw-stroke-current tw-text-tertiary tw-opacity-low"
+				cx="12"
+				cy="12"
+				r="8"
+				transform="rotate(135 12 12)"
+			/>
+			<path
+				d="M17.447 17.866c3.24-3.24 3.334-8.399.21-11.523-3.125-3.124-8.284-3.03-11.524.21"
+				stroke="currentColor"
+				stroke-linecap="round"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0">
+				<path
+					fill="#fff"
+					d="M0 0h24v24H0z"
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+</template>
+
+<script>
+/**
+ * Animated SVG Loading Spinner with variable size and color.
+ */
+
+export default {
+	props: {
+		/**
+		 * The size of the loading spinner.
+		 * 'small', 'medium', or 'large'
+		 * */
+		size: {
+			type: String,
+			default: 'medium',
+			validator(value) {
+				return ['small', 'medium', 'large'].includes(value);
+			},
+		},
+		/**
+		 * The color of the loading spinner.
+		 * 'brand', 'white', or 'black'
+		 * */
+		color: {
+			type: String,
+			default: 'brand',
+			validator(value) {
+				return ['brand', 'white', 'black'].includes(value);
+			},
+		},
+	},
+};
+</script>