@kiva/kv-components 4.8.6 → 5.1.0

package/dist/components/KvButton.vue

@@ -1,288 +0,0 @@
-<template>
-	<component
-		:is="tag"
-		ref="buttonRef"
-		:to="to"
-		:type="computedType"
-		:disabled="isDisabled"
-		class="tw-no-underline 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-action-highlight';
-					if (state.value === 'active') {
-						classes = `${classes} tw-bg-secondary`;
-					} else {
-						// eslint-disable-next-line max-len
-						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-action-highlight`;
-					}
-					break;
-				case 'danger':
-					classes = 'tw-text-danger';
-					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 tw-bg-action`;
-					} else {
-						classes = `${classes} tw-border-action-highlight hover:tw-border-action hover:tw-bg-action`;
-					}
-					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-caution';
-					if (state.value === 'active') {
-						classes = `${classes} tw-bg-caution-highlight tw-border-caution-highlight`;
-					} else {
-						// eslint-disable-next-line max-len
-						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight tw-border-caution hover:tw-border-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

@@ -1,314 +0,0 @@
-<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
-			}"
-		>
-			<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 {};
-			},
-		},
-		/**
-		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
-		 * */
-		autoplayOptions: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-		/**
-		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
-		 * */
-		fadeEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * 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,
-			isAutoplaying,
-			nextIndex,
-			previousIndex,
-			reInit,
-			reInitVisible,
-			rootEl,
-			slideIndicatorCount,
-			slideIndicatorListLength,
-			slides,
-			toggleAutoPlay,
-		} = carouselUtil(props, { emit, slots });
-
-		return {
-			componentSlotKeys,
-			currentIndex,
-			embla,
-			goToSlide,
-			handleUserInteraction,
-			isAriaHidden,
-			isAutoplaying,
-			mdiArrowLeft,
-			mdiArrowRight,
-			mdiChevronLeft,
-			mdiChevronRight,
-			nextIndex,
-			previousIndex,
-			reInit,
-			reInitVisible,
-			rootEl,
-			slideIndicatorCount,
-			slideIndicatorListLength,
-			slides,
-			toggleAutoPlay,
-		};
-	},
-};
-</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>