@kiva/kv-components 4.8.6 → 5.0.0

package/tests/unit/specs/utils/treemap.spec.js

@@ -1,248 +0,0 @@
-import { getTreemap } from '../../../../utils/treemap';
-
-describe('treemap.js', () => {
-	describe('getTreemap', () => {
-		it('should return an error if malformed height argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-				],
-				width: 700,
-			});
-			expect(shouldThrow).toThrow(Error('You need to specify the height of your treemap'));
-		});
-
-		it('should return an error if malformed height argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-				],
-				width: 700,
-				height: '600',
-			});
-			expect(shouldThrow).toThrow(Error('You need to specify the height of your treemap'));
-		});
-
-		it('should return an error if malformed width argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-				],
-				height: 700,
-			});
-			expect(shouldThrow).toThrow(Error('You need to specify the width of your treemap'));
-		});
-
-		it('should return an error if malformed width argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-				],
-				width: '700',
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You need to specify the width of your treemap'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-					{ value: -1 },
-				],
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-					{ value: '1' },
-				],
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [
-					{ value: 10 },
-					1,
-				],
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: '[{ value: 10 }]',
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return an error if malformed data argument', () => {
-			const shouldThrow = () => getTreemap({
-				data: [],
-				width: 700,
-				height: 600,
-			});
-			expect(shouldThrow).toThrow(Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number'));
-		});
-
-		it('should return the result expected', () => {
-			const result = [
-				{
-					x: 0,
-					y: 0,
-					width: 330.56,
-					height: 352.94,
-					data: { value: 10, color: 'red' },
-				},
-				{
-					x: 0,
-					y: 352.94,
-					width: 330.56,
-					height: 247.06,
-					data: { value: 7, color: 'black' },
-				},
-				{
-					x: 330.56,
-					y: 0,
-					width: 295.56,
-					height: 157.89,
-					data: { value: 4, color: 'blue' },
-				},
-				{
-					x: 626.11,
-					y: 0,
-					width: 73.89,
-					height: 157.89,
-					data: { value: 1, color: 'white' },
-				},
-				{
-					x: 330.56,
-					y: 157.89,
-					width: 369.44,
-					height: 157.89,
-					data: { value: 5, color: 'green' },
-				},
-				{
-					x: 330.56,
-					y: 315.79,
-					width: 369.44,
-					height: 284.21,
-					data: { value: 9, color: 'grey' },
-				},
-			];
-			expect(getTreemap({
-				data: [
-					{ value: 10, color: 'red' },
-					{ value: 7, color: 'black' },
-					{ value: 4, color: 'blue' },
-					{ value: 1, color: 'white' },
-					{ value: 5, color: 'green' },
-					{ value: 9, color: 'grey' },
-				],
-				width: 700,
-				height: 600,
-			})).toEqual(result);
-		});
-
-		it('should return the result expected', () => {
-			const result = [
-				{
-					x: 0,
-					y: 0,
-					width: 296.97,
-					height: 257.14,
-					data: { value: 6 },
-				},
-				{
-					x: 0,
-					y: 257.14,
-					width: 296.97,
-					height: 342.86,
-					data: { value: 8 },
-				},
-				{
-					x: 296.97,
-					y: 0,
-					width: 201.52,
-					height: 315.79,
-					data: { value: 5 },
-				},
-				{
-					x: 498.48,
-					y: 0,
-					width: 201.52,
-					height: 315.79,
-					data: { value: 5 },
-				},
-				{
-					x: 296.97,
-					y: 315.79,
-					width: 358.25,
-					height: 284.21,
-					data: { value: 8 },
-				},
-				{
-					x: 655.22,
-					y: 315.79,
-					width: 44.78,
-					height: 284.21,
-					data: { value: 1 },
-				},
-			];
-			expect(getTreemap({
-				data: [
-					{ value: 6 },
-					{ value: 8 },
-					{ value: 5 },
-					{ value: 5 },
-					{ value: 8 },
-					{ value: 1 },
-				],
-				width: 700,
-				height: 600,
-			})).toEqual(result);
-		});
-
-		it('should return the result with one data point', () => {
-			const result = [
-				{
-					data: {
-						value: 9,
-					},
-					height: 600,
-					width: 700,
-					x: 0,
-					y: 0,
-				},
-			];
-			expect(getTreemap({
-				data: [
-					{ value: 9 },
-				],
-				width: 700,
-				height: 600,
-			})).toEqual(result);
-		});
-	});
-});

package/tests/unit/utils/addVueRouter.js

@@ -1,18 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { createRouter, createWebHistory } from 'vue-router';
-
-export default function addVueRouter(testingLibraryOptions, vueRouterOptions) {
-	const opts = { ...testingLibraryOptions };
-
-	// 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(createRouter(vueRouterOptions ?? {
-		history: createWebHistory(),
-		routes: [{ path: '/:path(.*)', component: {} }],
-	}));
-
-	return opts;
-}

package/utils/Alea.js

@@ -1,92 +0,0 @@
-/* eslint-disable no-plusplus, no-param-reassign, no-return-assign, no-bitwise, prefer-rest-params, func-names */
-
-/**
- * The hash function used for Alea pseudo random number generator
- *
- * Johannes Baagøe <baagoe@baagoe.com>, 2010
- * Licensed under the MIT license
- *
- * {@link https://github.com/nquinlan/better-random-numbers-for-javascript-mirror}
- *
- * @returns The hash of the provided data
- */
-export function Mash() {
-	let n = 0xefc8249d;
-
-	const mash = function (data) {
-		data = data.toString();
-		for (let i = 0; i < data.length; i++) {
-			n += data.charCodeAt(i);
-			let h = 0.02519603282416938 * n;
-			n = h >>> 0;
-			h -= n;
-			h *= n;
-			n = h >>> 0;
-			h -= n;
-			n += h * 0x100000000; // 2^32
-		}
-		return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
-	};
-
-	mash.version = 'Mash 0.9';
-
-	return mash;
-}
-
-/**
- * Pseudo random number generator that returns a repeatable set of random numbers when supplied matching seeds
- *
- * Johannes Baagøe <baagoe@baagoe.com>, 2010
- * Licensed under the MIT license
- *
- * {@link https://github.com/nquinlan/better-random-numbers-for-javascript-mirror}
- *
- * @returns The seeded generator function
- */
-export default function Alea() {
-	return (function (args) {
-		let s0 = 0;
-		let s1 = 0;
-		let s2 = 0;
-		let c = 1;
-
-		if (args.length === 0) {
-			args = [+new Date()];
-		}
-
-		let mash = Mash();
-		s0 = mash(' ');
-		s1 = mash(' ');
-		s2 = mash(' ');
-
-		for (let i = 0; i < args.length; i++) {
-			s0 -= mash(args[i]);
-			if (s0 < 0) {
-				s0 += 1;
-			}
-			s1 -= mash(args[i]);
-			if (s1 < 0) {
-				s1 += 1;
-			}
-			s2 -= mash(args[i]);
-			if (s2 < 0) {
-				s2 += 1;
-			}
-		}
-
-		mash = null;
-
-		const random = function () {
-			const t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
-			s0 = s1;
-			s1 = s2;
-			return s2 = t - (c = t | 0);
-		};
-
-		random.version = 'Alea 0.9';
-
-		random.args = args;
-
-		return random;
-	}(Array.prototype.slice.call(arguments)));
-}

package/utils/attrs.js

@@ -1,62 +0,0 @@
-/* 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/utils/carousels.js

@@ -1,252 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import {
-	computed,
-	onMounted,
-	onUnmounted,
-	ref,
-	toRefs,
-	nextTick,
-} from 'vue-demi';
-import EmblaCarousel from 'embla-carousel';
-import Autoplay from 'embla-carousel-autoplay';
-import Fade from 'embla-carousel-fade';
-import { throttle } from './throttle';
-
-export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
-	const {
-		autoplayOptions,
-		fadeEnabled,
-		emblaOptions,
-		slidesToScroll,
-	} = toRefs(props);
-	const rootEl = ref(null);
-	const embla = ref(null);
-	const slides = ref([]);
-	const isAutoplaying = ref(false);
-
-	const startIndex = emblaOptions.value?.startIndex ?? 0;
-	const currentIndex = ref(startIndex);
-	// The indicator count may differ from the slide count when multiple slides are in view
-	const slideIndicatorCount = ref(0);
-
-	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;
-	});
-
-	const previousIndex = computed(() => {
-		const previousSlideIndex = currentIndex.value - 1;
-		if (previousSlideIndex >= 0) {
-			return previousSlideIndex;
-		}
-		return slides.value.length - 1;
-	});
-
-	/**
-	 * Jump to a specific slide index
-	 *
-	 * @param {Number} num Index of slide to show
-	 * @public This is a public method
-	 */
-	const goToSlide = (index) => {
-		/** Stop autoplay on go to slide interaction */
-		const autoplay = embla.value?.plugins()?.autoplay;
-		if (autoplay) {
-			autoplay.stop();
-		}
-		embla.value.scrollTo(index);
-	};
-
-	const handleUserInteraction = async (index, interactionType) => {
-		if (index !== null && typeof index !== 'undefined') {
-			await nextTick(); // wait for embla.
-			goToSlide(index);
-		}
-
-		/**
-		 * Fires when the user interacts with the carousel.
-		 * Contains the interaction type (swipe-left, click-left-arrow, etc.)
-		 * @event interact-carousel
-		 * @type {Event}
-		 */
-		emit('interact-carousel', interactionType);
-	};
-	/**
-	 * Start/Stop autoplay
-	 *
-	 * @public This is a public method
-	 */
-	const toggleAutoPlay = () => {
-		const autoplay = embla.value?.plugins()?.autoplay;
-		if (!autoplay) return;
-		const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
-		playOrStop();
-	};
-
-	/**
-	 * Returns number of slides in the carousel
-	 *
-	 * @returns {Number}
-	 */
-	const slideIndicatorListLength = () => {
-		const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
-		slideIndicatorCount.value = indicator;
-		return indicator;
-	};
-
-	/**
-	 * Reinitialize the carousel.
-	 * Used after adding slides dynamically.
-	 *
-	 * @public This is a public method
-	 */
-	const reInitVisible = () => {
-		const slidesInView = embla.value.slidesInView(true).length;
-		if (slidesInView) {
-			embla.value.reInit({
-				slidesToScroll: slidesInView,
-				inViewThreshold: 0.9,
-			});
-		}
-	};
-
-	const reInit = () => {
-		embla.value.reInit();
-		if (slidesToScroll.value === 'visible') {
-			reInitVisible();
-		}
-		slides.value = embla.value.slideNodes();
-		slideIndicatorListLength();
-	};
-
-	/**
-	 * If the slide is not completely in view in the carousel
-	 * it should be aria-hidden
-	 *
-	 * @param {Number} index The current index of the slide
-	 * @returns {Boolean}
-	 */
-	const isAriaHidden = (index) => {
-		if (embla.value) {
-			return !embla.value.slidesInView(true).includes(index);
-		}
-		return false;
-	};
-
-	const combinedPluginOptions = computed(() => {
-		const options = [];
-		if (Object.keys(autoplayOptions.value).length !== 0) {
-			options.push(Autoplay(autoplayOptions.value));
-		}
-		if (fadeEnabled.value) {
-			options.push(Fade());
-		}
-		return options;
-	});
-
-	onMounted(async () => {
-		embla.value = EmblaCarousel(rootEl.value, {
-			loop: true,
-			containScroll: 'trimSnaps',
-			inViewThreshold: 0.9,
-			align: 'start',
-			...extraEmblaOptions,
-			...emblaOptions.value,
-		}, combinedPluginOptions.value);
-
-		if (slidesToScroll.value === 'visible') {
-			reInitVisible();
-
-			embla.value.on(
-				'resize',
-				throttle(() => {
-					embla.value.reInit({
-						slidesToScroll: embla.value.slidesInView(true).length || 'auto',
-						inViewThreshold: 0.9,
-					});
-					slides.value = embla.value.slideNodes();
-					slideIndicatorListLength();
-				}, 250),
-			);
-		}
-
-		// get slide components
-		slides.value = embla.value.slideNodes();
-		slideIndicatorListLength();
-
-		embla?.value?.on('select', () => {
-			currentIndex.value = embla.value.selectedScrollSnap();
-
-			/** After the select event, it is possible that embla will itself trigger a reinit.
-			 * For example, if the act of selecting a slide causes it to change dimensions and the carousel
-			 * needs to recalculate.
-			 * When this reinit happens, autoplay settings will reset to the initial plugin options.
-			 * Set playOnInit equal to the current state of autoplay to prevent this.
-			*/
-			const autoplay = embla.value?.plugins()?.autoplay;
-			if (autoplay) {
-				embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
-			}
-			/**
-			 * The index of the slide that the carousel has changed to
-			 * @event change
-			 * @type {Event}
-			 */
-			nextTick(() => {
-				emit('change', currentIndex);
-			});
-		});
-
-		embla?.value?.on('autoplay:play', () => {
-			/**
-			 * Fires when autoplay starts
-			 * @event autoplay-play
-			 * @type {Event}
-			 */
-			isAutoplaying.value = true;
-		});
-
-		embla?.value?.on('autoplay:stop', () => {
-			/**
-			 * Fires when autoplay starts
-			 * @event autoplay-play
-			 * @type {Event}
-			 */
-			isAutoplaying.value = false;
-		});
-	});
-
-	onUnmounted(async () => {
-		embla?.value?.off('select');
-		embla?.value?.off('autoplay:play');
-		embla?.value?.off('autoplay:stop');
-		embla?.value?.destroy();
-	});
-
-	return {
-		rootEl,
-		embla,
-		slides,
-		currentIndex,
-		componentSlotKeys,
-		nextIndex,
-		previousIndex,
-		slideIndicatorCount,
-		handleUserInteraction,
-		goToSlide,
-		reInit,
-		reInitVisible,
-		isAriaHidden,
-		isAutoplaying,
-		slideIndicatorListLength,
-		toggleAutoPlay,
-	};
-}