@kiva/kv-components 4.8.6 → 5.1.0

package/dist/components/KvLightbox.vue

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

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

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

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