@kiva/kv-components 4.8.5 → 5.0.0

package/dist/components/KvCartModal.vue

@@ -1,365 +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="screen"
-			@click.stop.prevent="onScreenClick"
-		>
-			<div>
-				<div
-					class="container"
-				>
-					<div
-						ref="kvCartModal"
-						tabindex="-1"
-						data-test="kv-cart-modal"
-						class="modal"
-						aria-modal="true"
-						aria-label="Added to basket"
-						@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 tw-flex-grow tw-gap-1 tw-items-center">
-								<!-- header -->
-								<slot name="header">
-									<kv-material-icon
-										class="tw-w-4 tw-h-4 tw-text-brand"
-										:icon="mdiCheckCircle"
-									/>
-									<p class="tw-flex-1 tw-font-medium">
-										Added to basket
-									</p>
-								</slot>
-								<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('x-button')"
-								>
-									<kv-material-icon
-										class="tw-w-3 tw-h-3"
-										:icon="mdiClose"
-									/>
-									<span class="tw-sr-only">Close</span>
-								</button>
-							</div>
-						</div>
-
-						<!-- body -->
-						<div
-							id="kvCartModalBody"
-							ref="kvCartModalBody"
-							class="modal__body"
-						>
-							<div>
-								<kv-borrower-image
-									class="tw-rounded loan-image"
-									:alt="borrowerImage.alt"
-									:aspect-ratio="borrowerImage.aspectRatio"
-									:default-image="borrowerImage.defaultImage"
-									:hash="borrowerImage.hash"
-									:images="borrowerImage.images"
-									:photo-path="photoPath"
-								/>
-							</div>
-							<div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-gap-1">
-								<div class="tw-flex tw-flex-col tw-h-full tw-justify-between">
-									<p class="tw-overflow-hidden tw-text-ellipsis tw-line-clamp-1">
-										{{ borrowerName }}
-									</p>
-									<p class="tw-p-1 tw-text-center tw-rounded tw-bg-secondary tw-text-h5 tw-w-max">
-										{{ borrowerCountry }}
-									</p>
-								</div>
-								<p> ${{ amount }}</p>
-							</div>
-						</div>
-
-						<!-- controls -->
-						<div
-							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 tw-flex-col tw-gap-1
-							"
-						>
-							<kv-button
-								class="tw-w-full"
-								@click="handleClick('view-basket')"
-							>
-								View basket ({{ basketCount }})
-							</kv-button>
-							<kv-button
-								class="tw-w-full"
-								variant="secondary"
-								@click="handleClick('help-another-person')"
-							>
-								Help another person
-							</kv-button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</transition>
-</template>
-
-<script>
-import {
-	ref,
-	toRefs,
-	computed,
-	nextTick,
-	watch,
-	onBeforeUnmount,
-	onMounted,
-} from 'vue-demi';
-import { mdiClose, mdiCheckCircle } 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 KvButton from './KvButton.vue';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-import KvBorrowerImage from './KvBorrowerImage.vue';
-
-/**
- * Based on KvLightbox functionality
- * */
-
-export default {
-	components: {
-		KvMaterialIcon,
-		KvButton,
-		KvBorrowerImage,
-	},
-	props: {
-		/**
-		 * Whether the dialog is open or not
-		 * */
-		visible: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The dialog has no close X button, clicking the screen does not close,
-		 * pressing ESC does not close.
-		 * */
-		preventClose: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The number of loans in the basket
-		 * */
-		basketCount: {
-			type: Number,
-			default: 0,
-		},
-		/**
-		 * The loan added to the basket
-		 * */
-		addedLoan: {
-			type: Object,
-			default: () => ({}),
-		},
-		/**
-		 * The photo path for the borrower image
-		 * */
-		photoPath: {
-			type: String,
-			default: '',
-		},
-	},
-	emits: [
-		'cart-modal-closed',
-	],
-	setup(props, { emit }) {
-		const {
-			visible,
-			preventClose,
-			addedLoan,
-		} = toRefs(props);
-
-		const kvCartModal = ref(null);
-		const kvCartModalBody = ref(null);
-		const controlsRef = ref(null);
-
-		const trapElements = computed(() => [
-			kvCartModal.value, // This cart modal
-		]);
-		const {
-			activate: activateFocusTrap,
-			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(trapElements, {
-			allowOutsideClick: true, // allow clicking outside the cart modal to close it
-		});
-
-		let makePageInertCallback = null;
-		let onKeyUp = null;
-
-		const hide = (closedBy = '') => {
-			// scroll any content inside the cart modal back to top
-			if (kvCartModal.value && kvCartModalBody.value) {
-				deactivateFocusTrap();
-				kvCartModalBody.value.scrollTop = 0;
-				unlockPrintSingleEl(kvCartModalBody.value);
-			}
-			unlockScroll();
-			if (makePageInertCallback) {
-				makePageInertCallback();
-				makePageInertCallback = null;
-			}
-			document.removeEventListener('keyup', onKeyUp);
-
-			/**
-			 * Triggered when the cart modal is closed
-			 * @event cart-modal-closed
-			 * @type {Event}
-			*/
-			emit('cart-modal-closed', { type: closedBy });
-		};
-
-		onKeyUp = (e) => {
-			if (!!e && e.key === 'Escape' && !preventClose.value) {
-				hide();
-			}
-		};
-
-		const onScreenClick = () => {
-			if (!preventClose.value) {
-				hide('background');
-			}
-		};
-
-		const show = () => {
-			if (visible.value) {
-				document.addEventListener('keyup', onKeyUp);
-
-				nextTick(() => {
-					if (kvCartModal.value && kvCartModalBody.value) {
-						activateFocusTrap();
-						makePageInertCallback = makePageInert(kvCartModal.value);
-						lockPrintSingleEl(kvCartModalBody.value);
-					}
-					lockScroll();
-				});
-			}
-		};
-
-		const borrowerName = computed(() => {
-			return addedLoan.value?.name ?? '';
-		});
-		const borrowerImage = computed(() => {
-			return {
-				alt: `Photo of ${borrowerName.value}`,
-				aspectRatio: 1,
-				defaultImage: { width: 300 },
-				hash: addedLoan.value.imageHash,
-				images: [
-					{
-						width: 300,
-					},
-				],
-			};
-		});
-		const borrowerCountry = computed(() => {
-			return addedLoan.value.country ?? '';
-		});
-
-		const amount = computed(() => {
-			return addedLoan.value.amount ?? '';
-		});
-
-		const handleClick = (cta) => {
-			hide(cta);
-		};
-
-		watch(visible, () => {
-			if (visible.value) {
-				show();
-			} else {
-				hide();
-			}
-		});
-
-		onMounted(() => {
-			if (visible.value) {
-				show();
-				setTimeout(() => {
-					// Automatically close the cart modal after 10 seconds
-					emit('cart-modal-closed', { type: 'time' });
-				}, 10000);
-			}
-		});
-
-		onBeforeUnmount(() => hide());
-
-		return {
-			mdiClose,
-			mdiCheckCircle,
-			onKeyUp,
-			onScreenClick,
-			hide,
-			show,
-			controlsRef,
-
-			handleClick,
-			borrowerName,
-			borrowerImage,
-			borrowerCountry,
-			amount,
-		};
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.screen {
-	@apply tw-z-modal tw-fixed tw-inset-0;
-	background-color: rgb(0, 0, 0, 0.2);
-}
-
-.modal {
-	@apply tw-bg-primary md:tw-absolute md:tw-right-0 tw-w-full tw-rounded-b;
-	max-height: 90%;
-}
-
-.modal__body {
-	@apply tw-flex tw-gap-2 tw-px-2.5 md:tw-px-4;
-	height: 3.75rem;
-}
-
-.loan-image {
-	width: 3.75rem;
-}
-
-.container {
-	@apply tw-absolute tw-inset-0;
-}
-
-@screen md {
-	.modal {
-		max-width: 24.5rem;
-	}
-}
-
-</style>

package/dist/components/KvCheckbox.vue

@@ -1,203 +0,0 @@
-<template>
-	<div
-		:class="classes"
-		:style="styles"
-	>
-		<label
-			class="tw-inline-flex tw-items-center"
-			:class="{ 'tw-opacity-low': disabled }"
-			:for="uuid"
-		>
-			<input
-				v-bind="inputAttrs"
-				:id="uuid"
-				ref="checkboxRef"
-				class="tw-peer tw-appearance-none tw-w-max"
-				type="checkbox"
-				:checked="isChecked"
-				:value="value"
-				:disabled="disabled"
-				v-on="inputListeners"
-				@change.prevent="onChange"
-			>
-			<!-- checkbox square background -->
-			<div
-				class="
-					tw-w-3 tw-h-3 tw-mr-2
-					tw-flex-shrink-0
-					tw-rounded-sm
-					tw-border
-					tw-flex tw-justify-center tw-items-center tw-overflow-hidden
-					tw-transition-all tw-duration-100
-					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action"
-				:class="{
-					'tw-bg-white' : !isChecked,
-					'tw-bg-action' : isChecked,
-					'tw-border-secondary' : !isChecked && valid,
-					'tw-border-action' : isChecked && valid,
-					'tw-border-danger' : !valid,
-				}"
-			>
-				<!-- checkbox icon  -->
-				<svg
-					v-if="isChecked"
-					class="tw-w-1.5 tw-h-auto"
-					viewBox="0 0 12 9"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<!-- eslint-disable max-len -->
-					<path
-						d="M3.99975 6.79988L1.66642 4.46655C1.40642 4.20655 0.993086 4.20655 0.733086 4.46655C0.473086 4.72655 0.473086 5.13988 0.733086 5.39988L3.52642 8.19322C3.78642 8.45322 4.20642 8.45322 4.46642 8.19322L11.5331 1.13322C11.7931 0.873216 11.7931 0.459883 11.5331 0.199883C11.2731 -0.0601172 10.8598 -0.0601172 10.5998 0.199883L3.99975 6.79988Z"
-						fill="white"
-					/>
-					<!-- eslint-enable max-len -->
-				</svg>
-			</div>
-			<!-- label -->
-			<div class="tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action">
-				<slot></slot>
-			</div>
-		</label>
-	</div>
-</template>
-
-<script>
-import { nanoid } from 'nanoid';
-import {
-	onMounted,
-	ref,
-	toRefs,
-	watch,
-} from 'vue-demi';
-import { useAttrs } from '../utils/attrs';
-
-const emits = [
-	'change',
-	'update:modelValue',
-];
-
-/**
- * Use as you would an <input type="checkbox" />
- * Does not handle 'indeterminate' state at this time.
-*/
-
-export default {
-	inheritAttrs: false,
-
-	model: {
-		prop: 'modelValue',
-		event: 'update:modelValue',
-	},
-
-	props: {
-		/**
-		 * Whether the checkbox is checked or not
-		 * */
-		modelValue: {
-			type: [Boolean, Array],
-			default: false,
-		},
-		/**
-		 * Prevents the checkbox from being toggled or focused
-		 * */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Value of the checkbox if v-model is an array
-		 * */
-		value: {
-			type: [String, Boolean],
-			default: '',
-		},
-		/**
-		 * When set to false, visually indicates to the user that the contents of the input need
-		 * to be changed
-		 * */
-		valid: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits,
-	setup(props, context) {
-		const {
-			modelValue,
-			value,
-		} = toRefs(props);
-
-		const { emit } = context;
-		const uuid = ref(`kvc-${nanoid(10)}`);
-		const isChecked = ref(false);
-		const checkboxRef = ref(null);
-
-		const {
-			classes,
-			styles,
-			inputAttrs,
-			inputListeners,
-		} = useAttrs(context, emits);
-
-		const onChange = (event) => {
-			const inputChecked = event.target.checked;
-			let checkboxValue;
-
-			if (Array.isArray(modelValue.value)) {
-				// if the model is an array, add or remove our value from it
-				if (inputChecked) {
-					checkboxValue = [...modelValue.value, event.target.value];
-				} else {
-					checkboxValue = modelValue.value.filter((item) => item !== value.value);
-				}
-			} else {
-				checkboxValue = inputChecked;
-			}
-
-			// emit the change event to update the model
-			emit('change', checkboxValue);
-			emit('update:modelValue', checkboxValue);
-		};
-
-		const setChecked = () => {
-			if (Array.isArray(modelValue.value)) {
-				// if the model is array like <kv-checkbox v-model="['item1', 'item2']" value="item1">
-				isChecked.value = modelValue.value.includes(value.value);
-			} else {
-				// else it's a boolean like <kv-checkbox v-model="true">
-				isChecked.value = modelValue.value;
-			}
-		};
-
-		const focus = () => {
-			checkboxRef.focus();
-		};
-
-		const blur = () => {
-			checkboxRef.blur();
-		};
-
-		setChecked();
-		watch(modelValue, () => setChecked());
-		onMounted(() => {
-			uuid.value = `kvc-${nanoid(10)}`;
-		});
-
-		return {
-			uuid,
-			isChecked,
-			checkboxRef,
-			onChange,
-			setChecked,
-			focus,
-			blur,
-			classes,
-			styles,
-			inputAttrs,
-			inputListeners,
-		};
-	},
-};
-
-</script>

package/dist/components/KvChip.vue

@@ -1,54 +0,0 @@
-<template>
-	<div class="tw-inline-flex">
-		<button
-			class="
-			tw-bg-secondary
-			hover:tw-bg-tertiary
-			tw-items-center
-			tw-flex
-			tw-flex-row
-			tw-cursor-pointer
-			tw-whitespace-nowrap
-			tw-rounded
-			tw-h-2
-			tw-py-2
-			tw-px-2
-			tw-select-none
-			"
-			@click="handleClick"
-		>
-			<div
-				class="tw-text-base tw-pr-1"
-			>
-				<slot></slot>
-			</div>
-			<kv-material-icon
-				:icon="mdiClose"
-				class="tw-w-2 tw-h-2"
-				:from-sprite="true"
-			/>
-		</button>
-	</div>
-</template>
-<script>
-import { mdiClose } from '@mdi/js';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-
-export default {
-	name: 'KvChip',
-	components: { KvMaterialIcon },
-	emits: [
-		'click-chip',
-	],
-	setup() {
-		return {
-			mdiClose,
-		};
-	},
-	methods: {
-		handleClick() {
-			this.$emit('click-chip');
-		},
-	},
-};
-</script>