@kiva/kv-components 2.0.0 → 3.0.2

package/tests/unit/specs/components/KvToast.spec.js

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvToast from '../../../../vue/KvToast.vue';
+
+describe('KvToast', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = render(KvToast);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

package/tests/unit/utils/addVueRouter.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { isVue3 } from 'vue-demi';
+import * as VueRouter from 'vue-router';
+
+export default function addVueRouter(testingLibraryOptions, vueRouterOptions) {
+	const opts = { ...testingLibraryOptions };
+
+	if (isVue3) {
+		// create opts.global.plugins array if it does not exist
+		opts.global = opts.global ?? {};
+		opts.global.plugins = opts.global.plugins ?? [];
+
+		// add Vue Router to plugins array
+		opts.global.plugins.push(VueRouter.createRouter(vueRouterOptions ?? {
+			history: VueRouter.createWebHashHistory(),
+			routes: [{ path: '/:path(.*)', component: {} }],
+		}));
+	} else {
+		const VueRouterDefault = VueRouter.default;
+		opts.routes = new VueRouterDefault(vueRouterOptions);
+	}
+
+	return opts;
+}

package/utils/attrs.js

@@ -0,0 +1,62 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Return input value as an array.
+ */
+function asArray(input) {
+	if (!input) return [];
+	return Array.isArray(input) ? input : [input];
+}
+
+/**
+ * Separates class, style, and event listener attributes from other attributes. This allows the
+ * classes and styles to be applied to the root element of a component while applying the other
+ * attributes and listeners to the inner <input> element of the component. This is useful due to
+ * the differences in how Vue 3 and Vue 2 use $attrs. Read more about those differences in
+ * https://v3.vuejs.org/guide/migration/attrs-includes-class-style.html and
+ * https://v3.vuejs.org/guide/migration/listeners-removed.html.
+ *
+ * Usage:
+ *
+ * <script>
+ *   ...
+ *   emits: ['eventName'],
+ *   setup(props, context) {
+ *     const { classes, styles, inputAttrs, inputListeners } = useAttrs(context, ['eventName']);
+ *     return { classes, styles, inputAttrs, inputListeners };
+ *   },
+ *   ...
+ * </script>
+ *
+ * <template>
+ *   <div :class="classes" :style="styles">
+ *     ...
+ *     <input v-bind="inputAttrs" v-on="inputListeners">
+ *     ...
+ *   </div>
+ * </template>
+ *
+ * @param   context        vue component context, from the second argument of the `setup()` function
+ * @param   ownEvents      array of event name strings, same as the `emits` component option
+ * @returns { classes, styles, inputAttrs, inputListeners }
+ */
+export function useAttrs({ attrs, listeners }, ownEvents = []) {
+	const classes = asArray(attrs?.class);
+	const styles = asArray(attrs?.style);
+
+	const inputListeners = listeners ? { ...listeners } : {};
+	ownEvents.forEach((event) => {
+		delete inputListeners[event];
+	});
+
+	const inputAttrs = { ...attrs };
+	delete inputAttrs.class;
+	delete inputAttrs.style;
+
+	return {
+		classes,
+		styles,
+		inputAttrs,
+		inputListeners,
+	};
+}

package/vue/.storybook/{main.js → main.cjs}

@@ -13,13 +13,21 @@ module.exports = {
     '@storybook/addon-storysource',
     'storybook-dark-mode',
     {
-    name: '@storybook/addon-postcss',
-    options: {
-      postcssLoaderOptions: {
-        implementation: require('postcss'),
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
       },
     },
+  ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
+    });
+    return config;
   },
-],
   "framework": "@storybook/vue"
 }

package/vue/.storybook/preview.js

@@ -1,7 +1,12 @@
 import './tailwind.css';
 import addons from '@storybook/addons';
 import KvThemeProvider from '../KvThemeProvider.vue';
-import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors';
+import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
+import Vue from 'vue';
+import VueCompositionApi from '@vue/composition-api';
+
+// Add vue composition api
+Vue.use(VueCompositionApi);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package/vue/KvButton.vue

@@ -37,6 +37,13 @@
 </template>
 
 <script>
+import {
+	computed,
+	onMounted,
+	ref,
+	toRefs,
+	watch,
+} from 'vue-demi';
 import KvLoadingSpinner from './KvLoadingSpinner.vue';
 
 export default {
@@ -92,12 +99,20 @@ export default {
 			},
 		},
 	},
-	data() {
-		return {};
-	},
-	computed: {
-		loadingColor() {
-			switch (this.variant) {
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			to,
+			href,
+			type,
+			variant,
+			state,
+		} = toRefs(props);
+
+		const loadingColor = computed(() => {
+			switch (variant.value) {
 				case 'secondary':
 					return 'black';
 				case 'ghost':
@@ -105,14 +120,15 @@ export default {
 				default:
 					return 'white';
 			}
-		},
-		computedClass() {
+		});
+
+		const computedClass = computed(() => {
 			let classes = '';
-			switch (this.variant) {
+			switch (variant.value) {
 				case 'primary':
 				default:
 					classes = 'tw-text-primary-inverse';
-					if (this.state === 'active') {
+					if (state.value === 'active') {
 						classes = `${classes} tw-bg-action-highlight tw-border-action-highlight`;
 					} else {
 						classes = `${classes} tw-bg-action hover:tw-bg-action-highlight tw-border-action hover:tw-border-action-highlight`;
@@ -120,7 +136,7 @@ export default {
 					break;
 				case 'secondary':
 					classes = 'tw-text-primary';
-					if (this.state === 'active') {
+					if (state.value === 'active') {
 						classes = `${classes} tw-bg-secondary tw-border-primary`;
 					} else {
 						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-tertiary hover:tw-border-primary`;
@@ -128,7 +144,7 @@ export default {
 					break;
 				case 'danger':
 					classes = 'tw-text-primary-inverse';
-					if (this.state === 'active') {
+					if (state.value === 'active') {
 						classes = `${classes} tw-bg-danger-highlight tw-border-danger-highlight`;
 					} else {
 						classes = `${classes} tw-bg-danger hover:tw-bg-danger-highlight tw-border-danger hover:tw-border-danger-highlight`;
@@ -136,7 +152,7 @@ export default {
 					break;
 				case 'link':
 					classes = 'tw-bg-primary-inverse tw-text-primary-inverse';
-					if (this.state === 'active') {
+					if (state.value === 'active') {
 						classes = `${classes} tw-border-secondary`;
 					} else {
 						classes = `${classes} tw-border-primary hover:tw-border-secondary`;
@@ -144,7 +160,7 @@ export default {
 					break;
 				case 'ghost':
 					classes = 'tw-text-primary tw-border-transparent';
-					if (this.state === 'active') {
+					if (state.value === 'active') {
 						classes = `${classes} tw-bg-secondary`;
 					} else {
 						classes = `${classes} tw-bg-primary hover:tw-bg-secondary`;
@@ -152,44 +168,31 @@ export default {
 					break;
 			}
 			return classes;
-		},
-		isDisabled() {
-			return this.state === 'disabled' || this.state === 'loading';
-		},
-		tag() {
-			if (this.to) {
+		});
+
+		const isDisabled = computed(() => state.value === 'disabled' || state.value === 'loading');
+
+		const tag = computed(() => {
+			if (to.value) {
 				return 'router-link';
 			}
-			if (this.href) {
+			if (href.value) {
 				return 'a';
 			}
 			return 'button';
-		},
-		computedType() {
-			if (this.to || this.href) {
+		});
+
+		const computedType = computed(() => {
+			if (to.value || href.value) {
 				return null;
 			}
-			return this.type;
-		},
-	},
-	watch: { href() { this.setHref(); } },
-	mounted() {
-		this.setHref();
-	},
-	methods: {
-		onClick(event) {
-			// emit a vue event and prevent native event
-			// so we don't have to write @click.native in our templates
-			if (this.tag === 'button' && this.type !== 'submit') {
-				event.preventDefault();
-				this.$emit('click', event);
-			}
+			return type.value;
+		});
 
-			this.createRipple(event);
-		},
-		createRipple(event) {
-			const { buttonRef, buttonInnerRef } = this.$refs;
+		const buttonRef = ref(null);
+		const buttonInnerRef = ref(null);
 
+		const createRipple = (event) => {
 			// build an element to animate
 			const blipEl = document.createElement('span');
 			blipEl.classList = `
@@ -209,7 +212,7 @@ export default {
 
 			// some variants shouldn't have a white blip
 			const darkBlipVariants = ['secondary', 'ghost'];
-			const blipBgColor = darkBlipVariants.includes(this.variant) ? 'tw-bg-tertiary' : 'tw-bg-primary';
+			const blipBgColor = darkBlipVariants.includes(variant.value) ? 'tw-bg-tertiary' : 'tw-bg-primary';
 			blipEl.classList.add(blipBgColor);
 
 			// position the blip where the pointer click is or center it if keyboard
@@ -217,7 +220,7 @@ export default {
 			const { clientX, clientY } = event;
 			const {
 				offsetLeft, offsetTop, offsetWidth, offsetHeight,
-			} = buttonRef;
+			} = buttonRef.value;
 			let blipX;
 			let blipY;
 			if (fromClick) {
@@ -231,20 +234,39 @@ export default {
 			blipEl.style.setProperty('top', blipY);
 
 			// append the blip to the button, remove it when the animation is done
-			buttonInnerRef.appendChild(blipEl);
+			buttonInnerRef.value.appendChild(blipEl);
 			blipEl.addEventListener('animationend', function animationComplete() {
-				buttonInnerRef.removeChild(blipEl);
+				buttonInnerRef.value.removeChild(blipEl);
 				blipEl.removeEventListener('animationend', animationComplete);
 			});
-		},
-		setHref() {
+		};
+
+		const onClick = (event) => {
+			// Pass-through native click event to parent while adding ripple effect
+			emit('click', event);
+			createRipple(event);
+		};
+
+		const setHref = () => {
 			// if the component is a router-link, router-link will set the href
 			// if the href is passed as a prop, use that instead
-			if (this.href) {
-				const { buttonRef } = this.$refs;
-				buttonRef.href = this.href;
+			if (href.value) {
+				buttonRef.value.href = href.value;
 			}
-		},
+		};
+		watch(href, () => setHref());
+		onMounted(() => setHref());
+
+		return {
+			buttonRef,
+			buttonInnerRef,
+			computedClass,
+			computedType,
+			isDisabled,
+			loadingColor,
+			onClick,
+			tag,
+		};
 	},
 };
 </script>

package/vue/KvCarousel.vue

@@ -1,6 +1,6 @@
 <template>
 	<section
-		ref="KvCarousel"
+		ref="rootEl"
 		class="tw-overflow-hidden tw-w-full"
 		aria-label="carousel"
 	>
@@ -72,6 +72,15 @@
 </template>
 
 <script>
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	toRefs,
+	nextTick,
+	getCurrentInstance,
+} from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
 import { throttle } from '../utils/throttle';
@@ -122,84 +131,59 @@ export default {
 			default: '',
 		},
 	},
-	data() {
-		return {
-			mdiChevronLeft,
-			mdiChevronRight,
-			embla: null,
-			slides: [],
-			currentIndex: 0,
+	emits: [
+		'change',
+		'interact-carousel',
+	],
+	setup(props, { emit, slots }) {
+		const {
+			emblaOptions,
+			slidesToScroll,
+		} = toRefs(props);
+		const rootEl = ref(null);
+		const embla = ref(null);
+		const slides = ref([]);
+		const currentIndex = ref(0);
+
+		const forceUpdate = () => {
+			const instance = getCurrentInstance();
+			instance.proxy.$forceUpdate();
 		};
-	},
-	computed: {
-		componentSlotKeys() {
-			return Object.keys(this.$slots);
-		},
-		nextIndex() {
-			const nextSlideIndex = this.currentIndex + 1;
-			if (nextSlideIndex < this.slides.length) {
+
+		const componentSlotKeys = computed(() => {
+			const keys = Object.keys(slots);
+			return keys;
+		});
+
+		const nextIndex = computed(() => {
+			const nextSlideIndex = currentIndex.value + 1;
+			if (nextSlideIndex < slides.value.length) {
 				return nextSlideIndex;
 			}
 			return 0;
-		},
-		previousIndex() {
-			const previousSlideIndex = this.currentIndex - 1;
+		});
+
+		const previousIndex = computed(() => {
+			const previousSlideIndex = currentIndex.value - 1;
 			if (previousSlideIndex >= 0) {
 				return previousSlideIndex;
 			}
-			return this.slides.length - 1;
-		},
-
-	},
-	mounted() {
-		// initialize Embla
-		this.embla = EmblaCarousel(this.$refs.KvCarousel, {
-			loop: true,
-			containScroll: 'trimSnaps',
-			inViewThreshold: 0.9,
-			align: 'start',
-			...this.emblaOptions,
+			return slides.value.length - 1;
 		});
 
-		if (this.slidesToScroll === 'visible') {
-			this.reInitVisible();
-
-			this.embla.on(
-				'resize',
-				throttle(() => {
-					this.embla.reInit({
-						slidesToScroll: this.embla.slidesInView(true).length,
-						inViewThreshold: 0.9,
-					});
-					this.$forceUpdate();
-				}, 250),
-			);
-		}
-
-		// get slide components
-		this.slides = this.embla.slideNodes();
-
-		this.embla.on('select', () => {
-			this.currentIndex = this.embla.selectedScrollSnap();
-
-			/**
-			 * The index of the slide that the carousel has changed to
-			 * @event change
-			 * @type {Event}
-			 */
-			this.$emit('change', this.currentIndex);
-		});
-	},
-	beforeDestroy() {
-		// clean up event listeners
-		this.embla.off('select');
-		this.embla.destroy();
-	},
-	methods: {
-		async handleUserInteraction(index, interactionType) {
+		/**
+		 * Jump to a specific slide index
+		 *
+		 * @param {Number} num Index of slide to show
+		 * @public This is a public method
+		 */
+		const goToSlide = (index) => {
+			embla.value.scrollTo(index);
+		};
+		const handleUserInteraction = async (index, interactionType) => {
 			if (index !== null && typeof index !== 'undefined') {
-				await this.$nextTick(); // wait for embla.
-				this.goToSlide(index);
+				await nextTick(); // wait for embla.
+				goToSlide(index);
 			}
 			/**
 			 * Fires when the user interacts with the carousel.
@@ -207,48 +191,38 @@ export default {
 			 * @event interact-carousel
 			 * @type {Event}
 			 */
-			this.$emit('interact-carousel', interactionType);
-		},
-		/**
-		 * Jump to a specific slide index
-		 *
-		 * @param {Number} num Index of slide to show
-		 * @public This is a public method
-		 */
-		goToSlide(index) {
-			this.embla.scrollTo(index);
-			this.intervalTimerCurrentTime = 0;
-		},
+			emit('interact-carousel', interactionType);
+		};
 		/**
 		 * Reinitialize the carousel.
 		 * Used after adding slides dynamically.
 		 *
 		 * @public This is a public method
 		 */
-		reInit() {
-			this.embla.reInit();
-			if (this.slidesToScroll === 'visible') {
-				this.reInitVisible();
-			}
-			this.slides = this.embla.slideNodes();
-			this.$forceUpdate(); // force a re-render so embla.canScrollNext() gets called in the template
-		},
-		reInitVisible() {
-			const slidesInView = this.embla.slidesInView(true).length;
+		const reInitVisible = () => {
+			const slidesInView = embla.value.slidesInView(true).length;
 			if (slidesInView) {
-				this.embla.reInit({
+				embla.value.reInit({
 					slidesToScroll: slidesInView,
 					inViewThreshold: 0.9,
 				});
 			}
-		},
-		onCarouselContainerClick(e) {
+		};
+		const reInit = () => {
+			embla.value.reInit();
+			if (slidesToScroll.value === 'visible') {
+				reInitVisible();
+			}
+			slides.value = embla.value.slideNodes();
+			forceUpdate(); // force a re-render so embla.canScrollNext() gets called in the template
+		};
+		const onCarouselContainerClick = (e) => {
 			// If we're dragging, block click handlers within slides
-			if (this.embla && !this.embla.clickAllowed()) {
+			if (embla.value && !embla.value.clickAllowed()) {
 				e.preventDefault();
 				e.stopPropagation();
 			}
-		},
+		};
 		/**
 		 * If the slide is not completely in view in the carousel
 		 * it should be aria-hidden
@@ -256,25 +230,87 @@ export default {
 		 * @param {Number} index The current index of the slide (starts at 1)
 		 * @returns {Boolean}
 		 */
-		isAriaHidden(index) {
+		const isAriaHidden = (index) => {
 			// Index starts at 1
 			// Embla starts at 0
-			if (this.embla) {
-				return !this.embla.slidesInView(true).includes(index - 1);
+			if (embla.value) {
+				return !embla.value.slidesInView(true).includes(index - 1);
 			}
 			return false;
-		},
+		};
 		/**
 		 * Returns number of slides in the carousel
 		 *
 		 * @returns {Number}
 		 */
-		slideIndicatorListLength() {
-			return this.embla ? this.embla.scrollSnapList().length : 0;
-		},
+		const slideIndicatorListLength = () => {
+			const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
+			return indicator;
+		};
+
+		onMounted(async () => {
+			getCurrentInstance();
+			embla.value = EmblaCarousel(rootEl.value, {
+				loop: true,
+				containScroll: 'trimSnaps',
+				inViewThreshold: 0.9,
+				align: 'start',
+				...emblaOptions.value,
+			});
+
+			if (slidesToScroll.value === 'visible') {
+				reInitVisible();
+
+				embla.value.on(
+					'resize',
+					throttle(() => {
+						embla.value.reInit({
+							slidesToScroll: embla.value.slidesInView(true).length,
+							inViewThreshold: 0.9,
+						});
+						forceUpdate();
+					}, 250),
+				);
+			}
+
+			// get slide components
+			slides.value = embla.value.slideNodes();
+
+			embla.value.on('select', () => {
+				currentIndex.value = embla.value.selectedScrollSnap();
+
+				/**
+				 * The index of the slide that the carousel has changed to
+				 * @event change
+				 * @type {Event}
+				 */
+				emit('change', currentIndex);
+			});
+		});
+
+		onUnmounted(async () => {
+			embla.value.off('select');
+			embla.value.destroy();
+		});
+
+		return {
+			rootEl,
+			mdiChevronLeft,
+			mdiChevronRight,
+			embla,
+			slides,
+			currentIndex,
+			componentSlotKeys,
+			nextIndex,
+			previousIndex,
+			handleUserInteraction,
+			goToSlide,
+			reInit,
+			reInitVisible,
+			onCarouselContainerClick,
+			isAriaHidden,
+			slideIndicatorListLength,
+		};
 	},
 };
 </script>
-
-<style scoped>
-</style>