@kiva/kv-components 3.48.1 → 3.48.3

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.48.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.2...@kiva/kv-components@3.48.3) (2023-12-08)
+
+
+### Bug Fixes
+
+* p4 tag on loan card ([8513e93](https://github.com/kiva/kv-ui-elements/commit/8513e93addcb68f9f6f17f4eb52ee4d33f6af481))
+
+
+
+
+
+## [3.48.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.1...@kiva/kv-components@3.48.2) (2023-12-06)
+
+
+### Bug Fixes
+
+* **KvLightbox:** allow focus on open alerts, clicks on browser extensions and outside lightbox ([969cf63](https://github.com/kiva/kv-ui-elements/commit/969cf638d27212052ade5e08e7de9786018bef9e))
+
+
+
+
+
 ## [3.48.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.0...@kiva/kv-components@3.48.1) (2023-11-29)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.48.1",
+  "version": "3.48.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "2c7054617fe956199335addc794ce7ac78003dab"
+  "gitHead": "c2f834e03d69c4df0edfa0abbd9cefc5d193ea48"
 }

package/utils/loanCard.js

@@ -83,8 +83,8 @@ export function loanCardComputedProperties(props) {
 		// Tag as first option for LSE loans
 		if (isLseLoan && tags.length) {
 			const position = Math.floor(Math.random() * tags.length);
-			const atag = tags[position];
-			callouts.push(atag);
+			const p1Tag = tags[position];
+			callouts.push(p1Tag);
 		}
 
 		if (!categoryPageName.value) {
@@ -116,9 +116,9 @@ export function loanCardComputedProperties(props) {
 		// P4 Tag
 		if (!!tags.length && callouts.length < 2) {
 			const position = Math.floor(Math.random() * tags.length);
-			const atag = tags[position];
-			if (!callouts.filter((c) => c.toUpperCase() === tag.toUpperCase()).length) {
-				callouts.push(atag);
+			const p4Tag = tags[position];
+			if (!callouts.filter((c) => c.toUpperCase() === p4Tag.toUpperCase()).length) {
+				callouts.push(p4Tag);
 			}
 		}
 

package/vue/KvLightbox.vue

@@ -218,10 +218,16 @@ export default {
 		const kvLightboxBody = ref(null);
 		const controlsRef = ref(null);
 
+		const trapElements = computed(() => [
+			kvLightbox.value, // This lightbox
+			'[role="alert"]', // Any open toasts/alerts on the page
+		]);
 		const {
 			activate: activateFocusTrap,
 			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(kvLightbox);
+		} = useFocusTrap(trapElements, {
+			allowOutsideClick: true, // allow clicking outside the lightbox to close it
+		});
 
 		let makePageInertCallback = null;
 		let onKeyUp = null;

package/vue/stories/KvLightbox.stories.js

@@ -2,6 +2,7 @@ import { mdiLightningBolt } from '@mdi/js';
 import KvLightbox from '../KvLightbox.vue';
 import KvMaterialIcon from '../KvMaterialIcon.vue';
 import KvButton from '../KvButton.vue';
+import KvToast from '../KvToast.vue';
 
 export default {
 	title: 'KvLightbox',
@@ -253,3 +254,51 @@ export const Informational = InformationalTemplate.bind({});
 Informational.args = {
 	title: 'Lightbox Title',
 };
+
+const ToastInLightboxTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+		KvLightbox,
+	},
+	template: `
+		<div>
+			<kv-button @click="isLightboxVisible = true;">Show lightbox</kv-button>
+
+			<kv-lightbox
+				:visible="isLightboxVisible"
+				title="Toast in Lightbox"
+				@lightbox-closed="isLightboxVisible = false"
+			>
+				<p>Click the button below to show a toast.</p>
+				<template #controls>
+					<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+				</template>
+			</kv-lightbox>
+
+			<!-- div below is a kludge for storybook docs -->
+			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose" />
+				</div>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: false,
+		};
+	},
+	methods: {
+		showToast(messageInput, type, persistInput) {
+			this.$refs.toastRef.show(messageInput, type, persistInput);
+		},
+		onClose() {
+		},
+	},
+});
+export const toastInLightbox = ToastInLightboxTemplate.bind({});
+toastInLightbox.args = { type: 'confirmation', message: 'This is a toast in a lightbox.' };