@kiva/kv-components 3.105.3 → 3.107.0

package/dist/treemap.js

@@ -0,0 +1,109 @@
+// utils/treemap.js
+var getMaximum = (array) => Math.max(...array);
+var getMinimum = (array) => Math.min(...array);
+var sumReducer = (acc, cur) => acc + cur;
+var roundValue = (number) => Math.max(Math.round(number * 100) / 100, 0);
+var validateArguments = ({ data, width, height }) => {
+  if (!width || typeof width !== "number" || width < 0) {
+    throw new Error("You need to specify the width of your treemap");
+  }
+  if (!height || typeof height !== "number" || height < 0) {
+    throw new Error("You need to specify the height of your treemap");
+  }
+  if (!data || !Array.isArray(data) || data.length === 0 || !data.every((dataPoint) => Object.prototype.hasOwnProperty.call(dataPoint, "value") && typeof dataPoint.value === "number" && dataPoint.value >= 0 && !Number.isNaN(dataPoint.value))) {
+    throw new Error("You data must be in this format [{ value: 1 }, { value: 2 }], 'value' being a positive number");
+  }
+};
+function getTreemap({ data, width, height }) {
+  let Rectangle = {};
+  let initialData = [];
+  function worstRatio(row, width2) {
+    const sum = row.reduce(sumReducer, 0);
+    const rowMax = getMaximum(row);
+    const rowMin = getMinimum(row);
+    return Math.max(width2 ** 2 * rowMax / sum ** 2, sum ** 2 / (width2 ** 2 * rowMin));
+  }
+  const getMinWidth = () => {
+    if (Rectangle.totalHeight ** 2 > Rectangle.totalWidth ** 2) {
+      return { value: Rectangle.totalWidth, vertical: false };
+    }
+    return { value: Rectangle.totalHeight, vertical: true };
+  };
+  const layoutRow = (row, width2, vertical) => {
+    const rowHeight = row.reduce(sumReducer, 0) / width2;
+    row.forEach((rowItem) => {
+      const rowWidth = rowItem / rowHeight;
+      const { xBeginning } = Rectangle;
+      const { yBeginning } = Rectangle;
+      let data2;
+      if (vertical) {
+        data2 = {
+          x: xBeginning,
+          y: yBeginning,
+          width: rowHeight,
+          height: rowWidth,
+          data: initialData[Rectangle.data.length]
+        };
+        Rectangle.yBeginning += rowWidth;
+      } else {
+        data2 = {
+          x: xBeginning,
+          y: yBeginning,
+          width: rowWidth,
+          height: rowHeight,
+          data: initialData[Rectangle.data.length]
+        };
+        Rectangle.xBeginning += rowWidth;
+      }
+      Rectangle.data.push(data2);
+    });
+    if (vertical) {
+      Rectangle.xBeginning += rowHeight;
+      Rectangle.yBeginning -= width2;
+      Rectangle.totalWidth -= rowHeight;
+    } else {
+      Rectangle.xBeginning -= width2;
+      Rectangle.yBeginning += rowHeight;
+      Rectangle.totalHeight -= rowHeight;
+    }
+  };
+  const layoutLastRow = (rows, children, width2) => {
+    const { vertical } = getMinWidth();
+    layoutRow(rows, width2, vertical);
+    layoutRow(children, width2, vertical);
+  };
+  const squarify = (children, row, width2) => {
+    if (children.length === 1) {
+      return layoutLastRow(row, children, width2);
+    }
+    const rowWithChild = [...row, children[0]];
+    if (row.length === 0 || worstRatio(row, width2) >= worstRatio(rowWithChild, width2)) {
+      children.shift();
+      return squarify(children, rowWithChild, width2);
+    }
+    layoutRow(row, width2, getMinWidth().vertical);
+    return squarify(children, [], getMinWidth().value);
+  };
+  validateArguments({ data, width, height });
+  Rectangle = {
+    data: [],
+    xBeginning: 0,
+    yBeginning: 0,
+    totalWidth: width,
+    totalHeight: height
+  };
+  initialData = data;
+  const totalValue = data.map((dataPoint) => dataPoint.value).reduce(sumReducer, 0);
+  const dataScaled = data.map((dataPoint) => dataPoint.value * height * width / totalValue);
+  squarify(dataScaled, [], getMinWidth().value);
+  return Rectangle.data.map((dataPoint) => ({
+    ...dataPoint,
+    x: roundValue(dataPoint.x),
+    y: roundValue(dataPoint.y),
+    width: roundValue(dataPoint.width),
+    height: roundValue(dataPoint.height)
+  }));
+}
+export {
+  getTreemap
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.105.3",
+  "version": "3.107.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "main": "index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/eslint-parser": "^7.13.14",
@@ -46,6 +47,7 @@
     "storybook": "7.6.20",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.3",
+    "tsup": "^6.7.0",
     "vue": "2.6.14",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.2",
@@ -56,7 +58,7 @@
     "build-storybook": "vue-demi-switch 2 && storybook build -c vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
     "test": "npm run lint",
-    "build": "echo No build needed for @kiva/kv-components."
+    "build": "tsup utils/*.js --format cjs,esm --clean"
   },
   "dependencies": {
     "@kiva/kv-tokens": "^2.13.0",
@@ -74,6 +76,12 @@
     "popper.js": "^1.16.1",
     "vue-demi": "^0.14.7"
   },
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.6.0 || >=3.0.0"
@@ -83,5 +91,5 @@
       "optional": true
     }
   },
-  "gitHead": "eed7b2a41aa41399178b8ca95a26f9333a797ac0"
+  "gitHead": "6efc99e83efc05ac8d3ee259bc24a22012dc22ef"
 }

package/utils/carousels.js

@@ -0,0 +1,190 @@
+/* eslint-disable import/prefer-default-export */
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	toRefs,
+	nextTick,
+} from 'vue-demi';
+import EmblaCarousel from 'embla-carousel';
+import { throttle } from './throttle';
+
+export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
+	const {
+		emblaOptions,
+		slidesToScroll,
+	} = toRefs(props);
+	const rootEl = ref(null);
+	const embla = ref(null);
+	const slides = ref([]);
+	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) => {
+		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);
+	};
+
+	/**
+	 * 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();
+	};
+	const onCarouselContainerClick = (e) => {
+		// If we're dragging, block click handlers within slides
+		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
+	 *
+	 * @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;
+	};
+
+	onMounted(async () => {
+		embla.value = EmblaCarousel(rootEl.value, {
+			loop: true,
+			containScroll: 'trimSnaps',
+			inViewThreshold: 0.9,
+			align: 'start',
+			...extraEmblaOptions,
+			...emblaOptions.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();
+			/**
+			 * The index of the slide that the carousel has changed to
+			 * @event change
+			 * @type {Event}
+			 */
+			nextTick(() => {
+				emit('change', currentIndex);
+			});
+		});
+	});
+
+	onUnmounted(async () => {
+		embla?.value?.off('select');
+		embla?.value?.destroy();
+	});
+
+	return {
+		rootEl,
+		embla,
+		slides,
+		currentIndex,
+		componentSlotKeys,
+		nextIndex,
+		previousIndex,
+		slideIndicatorCount,
+		handleUserInteraction,
+		goToSlide,
+		reInit,
+		reInitVisible,
+		onCarouselContainerClick,
+		isAriaHidden,
+		slideIndicatorListLength,
+	};
+}

package/vue/KvCarousel.vue

@@ -23,7 +23,7 @@
 				:aria-current="currentIndex === index ? 'true' : 'false'"
 				:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
 				:tab-index="isAriaHidden(index) ? '-1' : false"
-				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth, 'cirle-slide': inCircle }"
+				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth, 'circle-slide': inCircle }"
 				:style="slideMaxWidth ? `max-width:${slideMaxWidth}` :''"
 			>
 				<slot
@@ -146,22 +146,13 @@
 </template>
 
 <script>
-import {
-	computed,
-	onMounted,
-	onUnmounted,
-	ref,
-	toRefs,
-	nextTick,
-} from 'vue-demi';
-import EmblaCarousel from 'embla-carousel';
 import {
 	mdiChevronLeft,
 	mdiChevronRight,
 	mdiArrowLeft,
 	mdiArrowRight,
 } from '@mdi/js';
-import { throttle } from '../utils/throttle';
+import { carouselUtil } from '../utils/carousels';
 
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
@@ -236,183 +227,43 @@ export default {
 	],
 	setup(props, { emit, slots }) {
 		const {
-			emblaOptions,
-			slidesToScroll,
-		} = toRefs(props);
-		const rootEl = ref(null);
-		const embla = ref(null);
-		const slides = ref([]);
-		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) => {
-			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);
-		};
-
-		/**
-		 * 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();
-		};
-		const onCarouselContainerClick = (e) => {
-			// If we're dragging, block click handlers within slides
-			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
-		 *
-		 * @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;
-		};
-
-		onMounted(async () => {
-			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 || '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();
-				/**
-				 * The index of the slide that the carousel has changed to
-				 * @event change
-				 * @type {Event}
-				 */
-				nextTick(() => {
-					emit('change', currentIndex);
-				});
-			});
-		});
-
-		onUnmounted(async () => {
-			embla?.value?.off('select');
-			embla?.value?.destroy();
-		});
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slideIndicatorListLength,
+			slides,
+		} = carouselUtil(props, { emit, slots });
 
 		return {
-			rootEl,
-			mdiChevronLeft,
-			mdiChevronRight,
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
 			mdiArrowLeft,
 			mdiArrowRight,
-			embla,
-			slides,
-			currentIndex,
-			componentSlotKeys,
+			mdiChevronLeft,
+			mdiChevronRight,
 			nextIndex,
+			onCarouselContainerClick,
 			previousIndex,
-			slideIndicatorCount,
-			handleUserInteraction,
-			goToSlide,
 			reInit,
 			reInitVisible,
-			onCarouselContainerClick,
-			isAriaHidden,
+			rootEl,
+			slideIndicatorCount,
 			slideIndicatorListLength,
+			slides,
 		};
 	},
 };
@@ -425,17 +276,17 @@ export default {
 	}
 }
 
-.cirle-slide {
+.circle-slide {
 	width: auto;
 }
 
-.cirle-slide.is-selected {
+.circle-slide.is-selected {
 	opacity: 1;
 	transform: scale(1.2);
 	max-width: 300px;
 }
 
-.cirle-slide:not(.is-selected) {
+.circle-slide:not(.is-selected) {
 	opacity: 0.5;
 	transform: scale(0.7);
 }