@kiva/kv-components 2.0.0 → 3.0.0

package/vue/KvCheckbox.vue

@@ -1,12 +1,15 @@
 <template>
-	<div>
+	<div
+		:class="classes"
+		:style="styles"
+	>
 		<label
 			class="tw-inline-flex tw-items-center"
 			:class="{ 'tw-opacity-low': disabled }"
 			:for="uuid"
 		>
 			<input
-				v-bind="$attrs"
+				v-bind="inputAttrs"
 				:id="uuid"
 				ref="checkboxRef"
 				class="tw-peer tw-appearance-none tw-w-max"
@@ -61,6 +64,18 @@
 
 <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" />
@@ -69,16 +84,17 @@ import { nanoid } from 'nanoid';
 
 export default {
 	inheritAttrs: false,
-	// v-model will change when checked value changes
+
 	model: {
-		prop: 'checked',
-		event: 'change',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
+
 	props: {
 		/**
 		 * Whether the checkbox is checked or not
 		 * */
-		checked: {
+		modelValue: {
 			type: [Boolean, Array],
 			default: false,
 		},
@@ -93,7 +109,7 @@ export default {
 		 * Value of the checkbox if v-model is an array
 		 * */
 		value: {
-			type: String,
+			type: [String, Boolean],
 			default: '',
 		},
 		/**
@@ -105,73 +121,83 @@ export default {
 			default: true,
 		},
 	},
-	data() {
-		return {
-			uuid: `kvc-${nanoid(10)}`,
-			isChecked: false,
-		};
-	},
-	computed: {
-		inputListeners() {
-			return {
-				// Pass through any listeners from the parent to the input element, like blur, focus, etc.
-				// https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-				...this.$listeners,
-				// ...except for the listener to the 'change' event which is emitted by this component
-				change: () => {},
-			};
-		},
-	},
-	watch: {
-		checked() {
-			this.setChecked();
-		},
-	},
-	mounted() {
-		this.uuid = `kvc-${nanoid(10)}`;
-	},
-	created() {
-		this.setChecked();
-	},
-	methods: {
-		onChange(event) {
-			// get the input[type=checkbox] state
-			const isChecked = event.target.checked;
+	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(this.checked)) {
+			if (Array.isArray(modelValue.value)) {
 				// if the model is an array, add or remove our value from it
-				if (isChecked) {
-					checkboxValue = [...this.checked, event.target.value];
+				if (inputChecked) {
+					checkboxValue = [...modelValue.value, event.target.value];
 				} else {
-					checkboxValue = this.checked.filter((item) => item !== this.value);
+					checkboxValue = modelValue.value.filter((item) => item !== value.value);
 				}
 			} else {
-				checkboxValue = isChecked;
+				checkboxValue = inputChecked;
 			}
 
 			// emit the change event to update the model
-			this.$emit('change', checkboxValue);
-		},
-		/**
-		 * Updates the visual state of the checkbox
-		 * */
-		setChecked() {
-			if (Array.isArray(this.checked)) {
+			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">
-				this.isChecked = this.checked.includes(this.value);
+				isChecked.value = modelValue.value.includes(value.value);
 			} else {
 				// else it's a boolean like <kv-checkbox v-model="true">
-				this.isChecked = this.checked;
+				isChecked.value = modelValue.value;
 			}
-		},
-		focus() {
-			this.$refs.checkboxRef.focus();
-		},
-		blur() {
-			this.$refs.checkboxRef.blur();
-		},
+		};
+
+		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/vue/KvContentfulImg.vue

@@ -5,29 +5,29 @@
 	>
 		<!-- Set of image sources -->
 		<template v-if="sourceSizes.length > 0">
-			<template v-for="(image, index) in sourceSizes">
-				<!-- browser supports webp -->
-				<source
-					:key="'webp-image'+index"
-					:media="'('+image.media+')'"
-					type="image/webp"
-					:width="image.width ? image.width : null"
-					:height="image.height ? image.height : null"
-					:srcset="`
-						${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
-						${buildUrl(image)}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
-				>
-				<!-- browser doesn't support webp -->
-				<source
-					:key="'fallback-image'+index"
-					:media="'('+image.media+')'"
-					:width="image.width ? image.width : null"
-					:height="image.height ? image.height : null"
-					:srcset="`
-						${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
-						${buildUrl(image)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
-				>
-			</template>
+			<!-- browser supports webp -->
+			<source
+				v-for="(image, index) in sourceSizes"
+				:key="'webp-image'+index"
+				:media="'('+image.media+')'"
+				type="image/webp"
+				:width="image.width ? image.width : null"
+				:height="image.height ? image.height : null"
+				:srcset="`
+					${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
+					${buildUrl(image)}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
+			>
+			<!-- browser doesn't support webp -->
+			<source
+				v-for="(image, index) in sourceSizes"
+				:key="'fallback-image'+index"
+				:media="'('+image.media+')'"
+				:width="image.width ? image.width : null"
+				:height="image.height ? image.height : null"
+				:srcset="`
+					${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
+					${buildUrl(image)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
+			>
 			<!-- browser doesn't support picture element -->
 			<img
 				class="tw-max-w-full tw-max-h-full"
@@ -65,6 +65,7 @@
 </template>
 
 <script>
+import { toRefs } from 'vue-demi';
 // Since it's easy for marketing or other to upload massive images to contentful,
 // in order to be performant respectful of our users data plans, and not damage
 // our SEO, we shouldn't send the source image directly to our users.
@@ -172,23 +173,33 @@ export default {
 			default: () => [],
 		},
 	},
-	methods: {
-		buildUrl(image = null, multiplier = 1) {
-			let src = image && image.url ? `${image.url}?` : `${this.contentfulSrc}?`;
-			const width = image ? image.width : this.width;
-			const height = image ? image.height : this.height;
+	setup(props) {
+		const {
+			contentfulSrc,
+			width,
+			height,
+		} = toRefs(props);
+
+		const buildUrl = (image = null, multiplier = 1) => {
+			let src = image && image.url ? `${image.url}?` : `${contentfulSrc.value}?`;
+			const imgWidth = image ? image.width : width.value;
+			const imgHeight = image ? image.height : height.value;
 
-			if (width) {
-				src += `w=${width * multiplier}`;
+			if (imgWidth) {
+				src += `w=${imgWidth * multiplier}`;
 			}
-			if (width && height) {
+			if (imgWidth && imgHeight) {
 				src += '&';
 			}
-			if (height) {
-				src += `h=${height * multiplier}`;
+			if (imgHeight) {
+				src += `h=${imgHeight * multiplier}`;
 			}
 			return src;
-		},
+		};
+
+		return {
+			buildUrl,
+		};
 	},
 };
 </script>

package/vue/KvLightbox.vue

@@ -19,10 +19,7 @@
 			"
 			@click.stop.prevent="onScreenClick"
 		>
-			<focus-lock
-				:disabled="!visible"
-				:return-focus="true"
-			>
+			<div>
 				<div
 					class="
 						tw-flex
@@ -82,7 +79,7 @@
 									tw-w-6 tw-h-6 tw--m-2
 									hover:tw-text-action-highlight
 								"
-								@click.stop.prevent="hide"
+								@click.stop="hide"
 							>
 								<kv-material-icon
 									class="tw-w-3 tw-h-3"
@@ -121,15 +118,23 @@
 						</div>
 					</div>
 				</div>
-			</focus-lock>
+			</div>
 		</div>
 	</transition>
 </template>
 
 <script>
-
+import {
+	ref,
+	toRefs,
+	computed,
+	nextTick,
+	watch,
+	onBeforeUnmount,
+	onMounted,
+} from 'vue-demi';
 import { mdiClose } from '@mdi/js';
-import FocusLock from 'vue-focus-lock';
+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';
@@ -161,7 +166,6 @@ import KvMaterialIcon from './KvMaterialIcon.vue';
 
 export default {
 	components: {
-		FocusLock,
 		KvMaterialIcon,
 	},
 	props: {
@@ -200,84 +204,119 @@ export default {
 			default: false,
 		},
 	},
-	data() {
-		return {
-			mdiClose,
-			makePageInert() {}, // reference to aria-hide function
-		};
-	},
-	computed: {
-		role() {
-			if (this.variant === 'alert') {
+	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 {
+			activate: activateFocusTrap,
+			deactivate: deactivateFocusTrap,
+		} = useFocusTrap(kvLightbox);
+
+		let makePageInertCallback = null;
+		let onKeyUp = null;
+
+		const role = computed(() => {
+			if (variant.value === 'alert') {
 				return 'alertdialog';
 			}
 			return 'dialog';
-		},
-	},
-	watch: {
-		visible() {
-			if (this.visible) {
-				this.show();
-			} else {
-				this.hide();
+		});
+
+		const hide = () => {
+			// scroll any content inside the lightbox back to top
+			if (kvLightbox.value && kvLightboxBody.value) {
+				deactivateFocusTrap();
+				kvLightboxBody.value.scrollTop = 0;
+				unlockPrintSingleEl(kvLightboxBody.value);
 			}
-		},
-	},
-	beforeDestroy() {
-		this.hide();
-	},
-	methods: {
-		show() {
-			if (this.visible) {
-				document.addEventListener('keyup', this.onKeyUp);
+			unlockScroll();
+			if (makePageInertCallback) {
+				makePageInertCallback();
+				makePageInertCallback = null;
+			}
+			document.removeEventListener('keyup', onKeyUp);
+
+			/**
+			 * Triggered when the lightbox is closed
+			 * @event lightbox-closed
+			 * @type {Event}
+			*/
+			emit('lightbox-closed');
+		};
+
+		onKeyUp = (e) => {
+			if (!!e && e.key === 'Escape' && !preventClose.value) {
+				hide();
+			}
+		};
 
-				this.$nextTick(() => {
-					const lightboxBodyRef = this.$refs.kvLightboxBody;
-					if (lightboxBodyRef) {
-						this.makePageInert = makePageInert(lightboxBodyRef);
-						lockPrintSingleEl(lightboxBodyRef);
+		const onScreenClick = () => {
+			if (!preventClose.value) {
+				hide();
+			}
+		};
+
+		const show = () => {
+			if (visible.value) {
+				document.addEventListener('keyup', onKeyUp);
+
+				nextTick(() => {
+					if (kvLightbox.value && kvLightboxBody.value) {
+						activateFocusTrap();
+						makePageInertCallback = makePageInert(kvLightbox.value);
+						lockPrintSingleEl(kvLightboxBody.value);
 					}
 					lockScroll();
 
 					// alerts should send focus to the first actionable item in the controls
-					if (this.variant === 'alert') {
-						const firstControlEl = this.$refs.controlsRef.querySelector('button');
+					if (variant.value === 'alert') {
+						const firstControlEl = controlsRef.value.querySelector('button');
 						if (firstControlEl) {
 							firstControlEl.focus();
 						}
 					}
 				});
 			}
-		},
-		hide() {
-			// scroll any content inside the lightbox back to top
-			const lightboxBodyRef = this.$refs.kvLightboxBody;
-			if (lightboxBodyRef) {
-				lightboxBodyRef.scrollTop = 0;
-				unlockPrintSingleEl(lightboxBodyRef);
-			}
-			unlockScroll();
-			if (this.makePageInert) {
-				this.makePageInert();
-			}
+		};
 
-			/**
-			 * Triggered when the lightbox is closed
-			 * @event lightbox-closed
-			 * @type {Event}
-			*/
-			this.$emit('lightbox-closed');
-		},
-		onScreenClick() {
-			if (!this.preventClose) {
-				this.hide();
+		watch(visible, () => {
+			if (visible.value) {
+				show();
+			} else {
+				hide();
 			}
-		},
-		onKeyUp(e) {
-			if (e.key === 'Escape' && !this.preventClose) {
-				this.hide();
+		});
+
+		onMounted(() => {
+			if (visible.value) {
+				show();
 			}
-		},
+		});
+
+		onBeforeUnmount(() => hide());
+
+		return {
+			mdiClose,
+			role,
+			kvLightbox,
+			kvLightboxBody,
+			onKeyUp,
+			onScreenClick,
+			hide,
+			show,
+			controlsRef,
+		};
 	},
 };
 </script>

package/vue/KvProgressBar.vue

@@ -25,6 +25,13 @@
 /**
  * Horizontal progress bar which communicates to the user the progress of a particular process
  */
+import {
+	ref,
+	toRefs,
+	computed,
+	onMounted,
+	nextTick,
+} from 'vue-demi';
 
 export default {
 	props: {
@@ -59,28 +66,35 @@ export default {
 			required: true,
 		},
 	},
-	data() {
-		return {
-			loaded: false,
-		};
-	},
-	computed: {
-		percent() {
-			const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
-			const rounded = Math.round(percent * 10) / 10; // Keep percents to 1 demical places (12.3%)
+	setup(props) {
+		const {
+			min,
+			max,
+			value,
+		} = toRefs(props);
+		const loaded = ref(false);
+
+		const percent = computed(() => {
+			const percentValue = ((value.value - min.value) / (max.value - min.value)) * 100;
+			const rounded = Math.round(percentValue * 10) / 10; // Keep percents to 1 decimal places 12.3%
 			const clamped = Math.min(Math.max(rounded, 0), 100); // Always between 0 and 100%
 			return clamped;
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.animateProgressBar();
 		});
-	},
-	methods: {
-		animateProgressBar() {
-			this.loaded = true;
-		},
+
+		const animateProgressBar = () => {
+			loaded.value = true;
+		};
+
+		onMounted(async () => {
+			await nextTick();
+			animateProgressBar();
+		});
+
+		return {
+			loaded,
+			percent,
+			animateProgressBar,
+		};
 	},
 };
 </script>