@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvButton.vue

@@ -0,0 +1,287 @@
+<template>
+	<component
+		:is="tag"
+		ref="buttonRef"
+		:to="to"
+		:type="computedType"
+		:disabled="isDisabled"
+		class="hover:tw-no-underline focus:tw-no-underline tw-inline-block"
+		:class="{
+			'tw-opacity-low': state === 'disabled',
+			'tw-pointer-events-none': state === 'loading' || isDisabled
+		}"
+		@click="onClick"
+	>
+		<!-- eslint-disable max-len -->
+		<span
+			ref="buttonInnerRef"
+			class="tw-inline-flex tw-w-full tw-justify-center tw-items-center tw-rounded
+				tw-min-h-6 tw-relative tw-overflow-hidden tw-border tw-font-medium tw-text-center"
+			:class="computedClass"
+		>
+			<!-- eslint-enable max-len -->
+			<template v-if="state === 'loading'">
+				<kv-loading-spinner
+					class="tw-absolute tw-w-full tw-text-center tw-z-0"
+					:color="loadingColor"
+				/>
+			</template>
+			<span
+				class="tw-py-1 tw-px-3 tw-z-10"
+				:class="{ 'tw-invisible': state === 'loading' }"
+			>
+				<slot></slot>
+			</span>
+		</span>
+	</component>
+</template>
+
+<script>
+import {
+	computed,
+	onMounted,
+	ref,
+	toRefs,
+	watch,
+} from 'vue-demi';
+import KvLoadingSpinner from './KvLoadingSpinner.vue';
+
+export default {
+	components: {
+		KvLoadingSpinner,
+	},
+	props: {
+		/**
+		 * Use if linking to a Vue route
+		 */
+		to: {
+			type: [String, Object],
+			default: null,
+		},
+		/**
+		 * Use if linking to an external link or old-stack page
+		 */
+		href: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * The behavior of the button when used in an HTML form.
+		 * `button (default), submit, reset`
+		 */
+		type: {
+			type: String,
+			default: 'button',
+			validator(value) {
+				return ['button', 'submit', 'reset'].includes(value);
+			},
+		},
+		/**
+		 * Appearance of the button
+		 * `primary (default), secondary, danger, link, ghost`
+		 */
+		variant: {
+			type: String,
+			default: 'primary',
+			validator(value) {
+				return ['primary', 'secondary', 'link', 'ghost', 'danger', 'caution'].includes(value);
+			},
+		},
+		/**
+		 * State of the button
+		 * `'' (default), active, disabled, loading`
+		 */
+		state: {
+			type: String,
+			default: '',
+			validator(value) {
+				return ['', 'active', 'disabled', 'loading'].includes(value);
+			},
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			to,
+			href,
+			type,
+			variant,
+			state,
+		} = toRefs(props);
+
+		const loadingColor = computed(() => {
+			switch (variant.value) {
+				case 'secondary':
+				case 'caution':
+					return 'black';
+				case 'ghost':
+					return 'brand';
+				default:
+					return 'white';
+			}
+		});
+
+		const computedClass = computed(() => {
+			let classes = '';
+			switch (variant.value) {
+				case 'primary':
+				default:
+					classes = 'tw-text-primary-inverse';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-action-highlight tw-border-action-highlight`;
+					} else {
+						// eslint-disable-next-line max-len
+						classes = `${classes} tw-bg-action hover:tw-bg-action-highlight tw-border-action hover:tw-border-action-highlight`;
+					}
+					break;
+				case 'secondary':
+					classes = 'tw-text-primary';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-secondary tw-border-primary`;
+					} else {
+						// eslint-disable-next-line max-len
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-tertiary hover:tw-border-primary`;
+					}
+					break;
+				case 'danger':
+					classes = 'tw-text-primary-inverse';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-danger-highlight tw-border-danger-highlight`;
+					} else {
+						// eslint-disable-next-line max-len
+						classes = `${classes} tw-bg-danger hover:tw-bg-danger-highlight tw-border-danger hover:tw-border-danger-highlight`;
+					}
+					break;
+				case 'link':
+					classes = 'tw-bg-primary-inverse tw-text-primary-inverse';
+					if (state.value === 'active') {
+						classes = `${classes} tw-border-secondary`;
+					} else {
+						classes = `${classes} tw-border-primary hover:tw-border-secondary`;
+					}
+					break;
+				case 'ghost':
+					classes = 'tw-text-primary tw-border-transparent';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-secondary`;
+					} else {
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary`;
+					}
+					break;
+				case 'caution':
+					classes = 'tw-text-primary tw-border-transparent';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-caution-highlight`;
+					} else {
+						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight`;
+					}
+					break;
+			}
+			return classes;
+		});
+
+		const isDisabled = computed(() => state.value === 'disabled' || state.value === 'loading');
+
+		const tag = computed(() => {
+			if (to.value) {
+				return 'router-link';
+			}
+			if (href.value) {
+				return 'a';
+			}
+			return 'button';
+		});
+
+		const computedType = computed(() => {
+			if (to.value || href.value) {
+				return null;
+			}
+			return type.value;
+		});
+
+		const buttonRef = ref(null);
+		const buttonInnerRef = ref(null);
+
+		const createRipple = (event) => {
+			// build an element to animate
+			const blipEl = document.createElement('span');
+			blipEl.classList = `
+				tw-absolute
+				tw-inline-block
+				tw-h-2
+				tw-w-2
+				tw-rounded-full
+				tw-transform
+				tw--translate-x-1/2
+				tw--translate-y-1/2
+				tw-opacity-0
+				tw-animate-ripple
+				motion-reduce:tw-animate-none
+			`;
+			blipEl.dataset.testid = 'ripple'; // for accessing in tests
+
+			// some variants shouldn't have a white blip
+			const darkBlipVariants = ['secondary', 'ghost'];
+			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
+			const fromClick = event.detail !== 0; // determine if click came from pointer or keyboard
+			const { clientX, clientY } = event;
+
+			if (buttonRef.value) {
+				const {
+					offsetLeft, offsetTop, offsetWidth, offsetHeight,
+				} = buttonRef.value;
+				let blipX;
+				let blipY;
+				if (fromClick) {
+					blipX = `${clientX - offsetLeft}px`;
+					blipY = `${clientY - offsetTop}px`;
+				} else {
+					blipX = `${offsetWidth / 2}px`;
+					blipY = `${offsetHeight / 2}px`;
+				}
+				blipEl.style.setProperty('left', blipX);
+				blipEl.style.setProperty('top', blipY);
+
+				// append the blip to the button, remove it when the animation is done
+				buttonInnerRef.value.appendChild(blipEl);
+				blipEl.addEventListener('animationend', function animationComplete() {
+					buttonInnerRef.value.removeChild(blipEl);
+					blipEl.removeEventListener('animationend', animationComplete);
+				});
+			}
+		};
+
+		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 (href.value) {
+				buttonRef.value.href = href.value;
+			}
+		};
+		watch(href, () => setHref());
+		onMounted(() => setHref());
+
+		return {
+			buttonRef,
+			buttonInnerRef,
+			computedClass,
+			computedType,
+			isDisabled,
+			loadingColor,
+			onClick,
+			tag,
+		};
+	},
+};
+</script>

package/dist/components/KvCarousel.vue

@@ -0,0 +1,297 @@
+<template>
+	<section
+		ref="rootEl"
+		class="kv-carousel tw-overflow-hidden tw-w-full"
+		:class="{ 'lg:tw-relative': asideControls }"
+		aria-label="carousel"
+	>
+		<!-- Carousel Content -->
+		<div
+			class="tw-flex tw-gap-x-4"
+			:class="{
+				'tw-mx-auto aside-controls-content': asideControls,
+				'circle-carousel': inCircle
+			}"
+			@click.capture="onCarouselContainerClick"
+		>
+			<div
+				v-for="(slotName, index) in componentSlotKeys"
+				:key="index"
+				class="tw-flex-none tw-relative"
+				role="group"
+				:aria-label="`slide ${index + 1} of ${componentSlotKeys.length}`"
+				:aria-current="currentIndex === index ? 'true' : 'false'"
+				:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
+				:tab-index="isAriaHidden(index) ? '-1' : false"
+				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth, 'circle-slide': inCircle }"
+				:style="slideMaxWidth ? `max-width:${slideMaxWidth}` :''"
+			>
+				<slot
+					:name="slotName"
+				></slot>
+			</div>
+		</div>
+		<!-- Carousel Controls -->
+		<div
+			v-if="slideIndicatorCount > 1 && !isDotted"
+			class="kv-carousel__controls tw-flex
+			tw-justify-between md:tw-justify-center tw-items-center
+			tw-mt-4 tw-w-full"
+			:class="{ 'lg:tw-hidden': asideControls }"
+		>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollPrev()"
+				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="asideControls? mdiArrowLeft : mdiChevronLeft"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
+			</button>
+			<div
+				:aria-label="`screen ${currentIndex + 1} of ${slideIndicatorCount}`"
+				class="tw-mx-2 md:tw-mx-3 lg:tw-mx-4 tw-invisible md:tw-visible"
+			>
+				{{ currentIndex + 1 }}/{{ slideIndicatorCount }}
+			</div>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollNext()"
+				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="asideControls ? mdiArrowRight : mdiChevronRight"
+				/>
+				<span class="tw-sr-only">Show next slide</span>
+			</button>
+		</div>
+		<!-- Dotted Controls -->
+		<div
+			v-else-if="slideIndicatorCount > 1"
+			class="kv-carousel__controls tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-mt-4 tw-w-full"
+		>
+			<button
+				v-for="slide in slideIndicatorCount"
+				:key="slide"
+				@click="goToSlide(slide - 1)"
+			>
+				<div
+					class="tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out"
+					:class="[
+						{ 'tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5': currentIndex === slide - 1 },
+						{ 'tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1': currentIndex !== slide - 1 }
+					]"
+				>
+				</div>
+			</button>
+		</div>
+		<!-- Aside Buttons -->
+		<template v-if="asideControls">
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-items-center"
+				style="background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-ml-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowLeft"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+			</div>
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full
+					tw-top-0 tw-right-0 tw-items-center tw-justify-end tw-w-16"
+				style="background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-mr-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowRight"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+		</template>
+	</section>
+</template>
+
+<script>
+import {
+	mdiChevronLeft,
+	mdiChevronRight,
+	mdiArrowLeft,
+	mdiArrowRight,
+} from '@mdi/js';
+import { carouselUtil } from '../utils/carousels';
+
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Should multiple slides be visible at a time.
+		 * If true, a width must be set for each individual
+		 * carousel slide or slideMaxWidth must
+		 * be used.
+		 * */
+		multipleSlidesVisible: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Options for the embla carousel - // https://davidcetinkaya.github.io/embla-carousel/api#options
+		 * */
+		emblaOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * The type of logic to implement when deciding how many slides
+		 * to scroll when pressing the next/prev button
+		 * `visible, auto`
+		 * */
+		slidesToScroll: {
+			type: String,
+			default: 'auto',
+			validator: (value) => ['visible', 'auto'].indexOf(value) !== -1,
+		},
+		/**
+		 * CSS value and unit to set the max width on responsive slides.
+		 * Slide will be responsive full width until the max width value
+		 * is reached - example value: '32.5rem'
+		 * */
+		slideMaxWidth: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Aside controls version of the carousel
+		 * */
+		asideControls: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Dotted controls version of the carousel
+		 * */
+		isDotted: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Enables carousel slides to have a circle effect
+		 * */
+		inCircle: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'change',
+		'interact-carousel',
+	],
+	setup(props, { emit, slots }) {
+		const {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slideIndicatorListLength,
+			slides,
+		} = carouselUtil(props, { emit, slots });
+
+		return {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			mdiArrowLeft,
+			mdiArrowRight,
+			mdiChevronLeft,
+			mdiChevronRight,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slideIndicatorListLength,
+			slides,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.aside-controls-content {
+	@screen lg {
+		width: 82%;
+	}
+}
+
+.circle-slide {
+	width: auto;
+}
+
+.circle-slide.is-selected {
+	opacity: 1;
+	transform: scale(1.2);
+	max-width: 300px;
+}
+
+.circle-slide:not(.is-selected) {
+	opacity: 0.5;
+	transform: scale(0.7);
+}
+
+.circle-carousel {
+	margin: 0 auto;
+}
+</style>