@kiva/kv-components 3.107.0 → 3.107.2

package/dist/components/KvTextLink.vue

@@ -0,0 +1,138 @@
+<template>
+	<component
+		:is="tag"
+		ref="buttonRef"
+		:to="to"
+		:disabled="state === 'disabled'"
+		class="tw-text-h4 tw-text-link"
+		:class="{
+			'tw-opacity-low tw-pointer-events-none': state === 'disabled',
+			'tw-group tw-inline-flex tw-items-center tw-gap-x-0.5': icon
+		}"
+		@click="onClick"
+	>
+		<slot></slot>
+		<kv-material-icon
+			v-if="icon"
+			:icon="icon"
+			class="
+				tw-w-1.5 tw-h-1.5 md:tw-w-2 md:tw-h-2
+				tw-transition-transform tw-ease-in-out tw-duration-200
+				group-hover:tw-translate-x-[0.125rem] group-focus:tw-translate-x-[0.125rem]
+			"
+		/>
+	</component>
+</template>
+
+<script>
+import {
+	computed,
+	onMounted,
+	ref,
+	toRefs,
+	watch,
+} from 'vue-demi';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+/**
+ * A component for displaying a stylized button or link with or without an icon
+ */
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	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,
+		},
+		/**
+		 * SVG path data passed in from an imported @mdi/js module.
+		 * ```
+		 * import { mdiArrowRight } from '@mdi/js';
+		 * data() { return { mdiArrowRight } };
+		 * <kv-text-link :icon="mdiArrowRight" />`
+		 * ```
+		 * */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * State of the button
+		 * @values '', disabled
+		 * */
+		state: {
+			type: String,
+			default: '',
+			validator(value) {
+				return ['', 'disabled'].includes(value);
+			},
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			to,
+			href,
+		} = toRefs(props);
+
+		const buttonRef = ref(null);
+
+		const tag = computed(() => {
+			if (to.value) {
+				return 'router-link';
+			}
+			if (href.value) {
+				return 'a';
+			}
+			return 'button';
+		});
+
+		const onClick = (event) => {
+			// emit a vue event and prevent native event
+			// so we don't have to write @click.native in our templates
+			if (tag.value === 'button') {
+				event.preventDefault();
+				/**
+				 * Fired when the button is clicked
+				 *
+				 * @event click
+				 * @param {Event}
+				 */
+				emit('click', 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 {
+			tag,
+			onClick,
+			buttonRef,
+			setHref,
+		};
+	},
+};
+</script>

package/dist/components/KvThemeProvider.vue

@@ -0,0 +1,122 @@
+<template>
+	<div
+		:style="{
+			...theme,
+			color: 'rgb(var(--text-primary))',
+		}"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+/**
+ * A wrapper component that sets CSS custom properties to theme its children.
+ * Most of the time you'll be importing a predefined theme from kv-tokens.
+ *
+ * @usage
+ * ```
+ * import {
+ *   darkTheme,
+ *   darkGreenTheme,
+ *   mintTheme,
+ *   defaultTheme
+ * } from '@kiva/kv-tokens/configs/kivaColors.cjs';
+ * ...
+ * data() { return { darkTheme }; }
+ * ...
+ * <kv-theme-provider :theme="darkTheme">...</kv-theme-provider>
+ * ```
+ *
+ * */
+export default {
+	props: {
+		/**
+		 * An object containing CSS custom properties set to RGB values.
+		 *
+		 * For custom theming, see all available custom properties set to white in RGB, below
+		 * @usage
+		 * ```
+		 * {
+		 *    --text-primary: '255, 255, 255',
+		 *    --text-primary-inverse: '255, 255, 255',
+		 *    --text-secondary: '255, 255, 255',
+		 *    --text-tertiary: '255, 255, 255',
+		 *    --text-action: '255, 255, 255',
+		 *    --text-action-highlight: '255, 255, 255',
+		 *    --text-danger: '255, 255, 255',
+		 *    --text-danger-highlight: '255, 255, 255',
+		 *
+		 *    --bg-primary: '255, 255, 255',
+		 *    --bg-primary-inverse: '255, 255, 255',
+		 *    --bg-secondary: '255, 255, 255',
+		 *    --bg-tertiary: '255, 255, 255',
+		 *    --bg-action: '255, 255, 255',
+		 *    --bg-action-highlight: '255, 255, 255',
+		 *    --bg-danger: '255, 255, 255',
+		 *    --bg-danger-highlight: '255, 255, 255',
+		 *    --bg-caution: '255, 255, 255',
+		 *
+		 *    --border-primary: '255, 255, 255',
+		 *    --border-primary-inverse: '255, 255, 255',
+		 *    --border-secondary: '255, 255, 255',
+		 *    --border-tertiary: '255, 255, 255',
+		 *    --border-action: '255, 255, 255',
+		 *    --border-action-highlight: '255, 255, 255',
+		 *    --border-danger: '255, 255, 255',
+		 *    --border-danger-highlight: '255, 255, 255',
+		 *
+		 *    --heading-underline-primary: url('/heading-underline.svg#FFFFFF'),
+		 * }
+		 * ```
+		 *
+		 * */
+		theme: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="postcss">
+/* heading underline styling, intentionally not scoped */
+.tw-text-jumbo u,
+.tw-text-h1 u,
+.tw-text-h2 u,
+.tw-text-h3 u,
+h1 u,
+h2 u,
+h3 u {
+  text-decoration: none;
+  box-decoration-break: clone;
+  background-image: var(--heading-underline-primary);
+  background-repeat: no-repeat;
+  background-position: left bottom;
+}
+.tw-text-jumbo u {
+	background-size: 100% 0.75rem;
+	padding-bottom: 0.375rem;
+}
+.tw-text-h1 u,
+h1 u {
+  background-size: 100% 0.75rem;
+  padding-bottom: 0.375rem;
+}
+.tw-text-h2 u,
+h2 u {
+  background-size: 100% 0.375rem;
+  padding-bottom: 0.125rem;
+}
+.tw-text-h3 u,
+h3 u {
+  background-size: 100% 0.375rem;
+  padding-bottom: 0.2rem;
+}
+@screen lg {
+	.tw-text-jumbo u {
+		background-size: 100% 1rem;
+		padding-bottom: 0.375rem;
+	}
+}
+</style>

package/dist/components/KvToast.vue

@@ -0,0 +1,221 @@
+<template>
+	<div
+		role="alert"
+		aria-live="polite"
+	>
+		<transition
+			enter-active-class="tw-transition-opacity tw-duration-300"
+			leave-active-class="tw-transition-opacity tw-duration-300"
+			enter-class="tw-opacity-0"
+			enter-to-class="tw-opacity-full"
+			leave-class="tw-opacity-full"
+			leave-to-class="tw-opacity-0"
+		>
+			<div
+				v-if="isVisible"
+				data-test="tip-message"
+				class="tw-mx-2.5"
+			>
+				<kv-page-container>
+					<div
+						class="
+							tw-rounded tw-overflow-hidden
+							tw-flex
+							tw-bg-secondary
+							tw-mx-auto
+							tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2
+							tw-shadow
+						"
+					>
+						<div
+							class="
+							tw-w-5
+							tw-flex-shrink-0
+							tw-flex
+							tw-items-center tw-justify-center
+						"
+							:class="{
+								'tw-bg-brand tw-text-white' : (
+									messageType === '' || messageType === 'confirmation' ||
+									messageType === 'kiva-logo'
+								),
+								'tw-bg-danger tw-text-primary-inverse' : messageType === 'error',
+								'tw-bg-caution tw-text-primary' : messageType === 'warning',
+							}"
+						>
+							<!-- Kiva Icon SVG -->
+							<!-- eslint-disable max-len -->
+							<svg
+								v-if="messageType === 'kiva-logo'"
+								width="16"
+								height="24"
+								viewBox="0 0 16 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M4.78202 0H0V23.141H4.78202V0ZM6.00533 14.6274C13.6788 14.6274 15.4582 8.05649 15.4582 6.91372H14.7909C7.11743 6.91372 5.33807 13.4846 5.33807 14.6274H6.00533ZM5.33807 15.1988C5.33807 16.3987 6.67259 23.0838 14.9021 23.0838H15.5694C15.5694 21.8839 14.2349 15.1988 6.00533 15.1988H5.33807Z"
+									fill="white"
+								/>
+							</svg>
+							<kv-material-icon
+								v-else
+								class="tw-w-2.5 tw-h-2.5"
+								:icon="icon"
+							/>
+						</div>
+						<div
+							ref="messageRef"
+							class="
+							tw-flex-1
+							tw-px-1 tw-py-2
+							tw-flex
+						"
+						>
+							<slot
+								v-if="hasToastContentSlot"
+								name="toastContent"
+							></slot>
+							<!-- eslint-disable vue/no-v-html -->
+							<p
+								v-else
+								class="tw-inline-block tw-m-auto"
+								v-html="message"
+							>
+							</p>
+							<!--eslint-enable-->
+						</div>
+
+						<button
+							class="
+								tw-w-5
+								tw-flex-shrink-0
+								tw-flex
+								tw-items-center tw-justify-center
+								tw-bg-secondary
+								hover:tw-text-action-highlight
+							"
+							@click="close"
+						>
+							<kv-material-icon
+								class="tw-w-2.5 tw-h-2.5"
+								:icon="mdiClose"
+							/>
+							<span class="tw-sr-only">Close notification</span>
+						</button>
+					</div>
+				</kv-page-container>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import {
+	ref,
+	computed,
+} from 'vue-demi';
+import {
+	mdiClose, mdiAlertCircle, mdiAlert, mdiCheckCircle,
+} from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import KvPageContainer from './KvPageContainer.vue';
+
+/**
+ * A component which displays a temporary notice to the user.
+ * Toasts remain visible for 100ms * message character count, with a minumum of 5 seconds.
+ * Queuing toasts is not included in this component and should be handled by your application.
+ *
+ * Usage:
+ *
+ * ```
+ *  <kv-toast ref="myToastRef" />
+ *
+ *  this.$refs.myToastRef.show(
+ * 		message: String,
+ * 		messageType: 'error' | 'info' | 'confirmation',
+ * 		persist: Boolean
+ *  );
+ *  this.$refs.myToastRef.close();
+ * ```
+ */
+export default {
+	components: {
+		KvMaterialIcon,
+		KvPageContainer,
+	},
+	emits: [
+		'close',
+	],
+	setup(props, { emit, slots }) {
+		const isVisible = ref(false);
+		const message = ref('');
+		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
+		const persist = ref(false);
+		const timeout = ref(null);
+
+		const icon = computed(() => {
+			if (messageType.value === 'warning') {
+				return mdiAlert;
+			}
+			if (messageType.value === 'error') {
+				return mdiAlertCircle;
+			}
+			return mdiCheckCircle;
+		});
+
+		const msToDisplayToast = computed(() => {
+			const MINIMUM_MS = 5000;
+			const MS_PER_CHARACTER = 100;
+
+			// create an empty span to get the character count without HTML
+			const span = document.createElement('span');
+			span.innerHTML = message.value;
+			const characterCount = span.innerText.length;
+
+			const characterMs = MS_PER_CHARACTER * characterCount;
+			return Math.max(characterMs, MINIMUM_MS);
+		});
+
+		const hasToastContentSlot = computed(() => !!slots?.toastContent ?? false);
+
+		const close = () => {
+			isVisible.value = false;
+			clearTimeout(timeout.value);
+
+			/**
+			* Indicates the toast has closed by a user or after timeout
+			* @event close
+			*/
+			emit('close');
+		};
+
+		const show = (messageInput, type, persistInput, hideDelay) => {
+			isVisible.value = true;
+			message.value = typeof messageInput === 'string' ? messageInput : '';
+			messageType.value = typeof type === 'string' ? type : '';
+			persist.value = Boolean(persistInput);
+
+			if (!persist.value) {
+				timeout.value = setTimeout(() => {
+					close();
+				}, hideDelay ?? msToDisplayToast.value);
+			}
+		};
+
+		return {
+			mdiClose,
+			isVisible,
+			message,
+			messageType,
+			persist,
+			timeout,
+			icon,
+			msToDisplayToast,
+			close,
+			show,
+			hasToastContentSlot,
+		};
+	},
+};
+</script>

package/dist/components/KvTooltip.vue

@@ -0,0 +1,168 @@
+<template>
+	<kv-theme-provider
+		:theme="themeStyle"
+		class="kv-tailwind"
+	>
+		<kv-popper
+			:controller="controller"
+			:popper-modifiers="popperModifiers"
+			popper-placement="top"
+			transition-type="kvfastfade"
+			class="tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
+		>
+			<div
+				class="tw-p-2.5"
+				style="max-width: 250px;"
+			>
+				<div
+					v-if="$slots.title"
+					class="tw-text-primary tw-font-medium tw-mb-1.5"
+				>
+					<slot name="title"></slot>
+				</div>
+				<div class="tw-text-primary">
+					<slot></slot>
+				</div>
+			</div>
+			<div
+				class="tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid"
+				x-arrow=""
+			></div>
+		</kv-popper>
+	</kv-theme-provider>
+</template>
+
+<script>
+import { ref, toRefs, computed } from 'vue-demi';
+import {
+	darkTheme,
+	mintTheme,
+} from '@kiva/kv-tokens/configs/kivaColors.cjs';
+import KvPopper from './KvPopper.vue';
+import KvThemeProvider from './KvThemeProvider.vue';
+
+export default {
+	name: 'KvTooltip',
+	components: {
+		KvPopper,
+		KvThemeProvider,
+	},
+	// TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
+	props: {
+		controller: {
+			validator(value) {
+				if (typeof value === 'string') return true;
+				if (typeof window !== 'undefined'
+					&& 'HTMLElement' in window
+					&& value instanceof HTMLElement) return true;
+				return false;
+			},
+			required: true,
+		},
+		theme: {
+			type: String,
+			default: 'default',
+			validator(value) {
+				// The value must match one of these strings
+				return ['default', 'mint', 'dark'].indexOf(value) !== -1;
+			},
+		},
+	},
+	setup(props) {
+		const {
+			theme,
+		} = toRefs(props);
+
+		const popperModifiers = ref({
+			preventOverflow: {
+				padding: 10,
+			},
+		});
+
+		const themeStyle = computed(() => {
+			const themeMapper = {
+				mint: mintTheme,
+				dark: darkTheme,
+			};
+			return themeMapper[theme.value];
+		});
+
+		return {
+			darkTheme,
+			mintTheme,
+			popperModifiers,
+			themeStyle,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.tooltip-pane,
+.tooltip-arrow {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.tooltip-arrow {
+	@apply tw-m-1;
+	@apply tw-border-white;
+}
+
+/* Top Tooltip Arrow appears on Bottom */
+.tooltip-pane[x-placement^="top"] {
+	@apply tw-mb-1;
+}
+
+.tooltip-pane[x-placement^="top"] .tooltip-arrow {
+	border-width: 8px 8px 0 8px;
+	border-left-color: transparent;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	left: calc(50% - 8px);
+	@apply -tw-bottom-1 tw-mt-0 tw-mb-0;
+}
+
+/* Bottom Tooltip Arrow appears on Top */
+.tooltip-pane[x-placement^="bottom"] {
+	@apply tw-mt-1;
+}
+
+.tooltip-pane[x-placement^="bottom"] .tooltip-arrow {
+	border-width: 0 8px 8px 8px;
+	border-left-color: transparent;
+	border-right-color: transparent;
+	border-top-color: transparent;
+	left: calc(50% - 8px);
+	@apply -tw-top-1 tw-mb-0 tw-mt-0;
+}
+
+/* TODO: TWEAK Inner Arrow Styles for Left + Right Orientations */
+
+/* Right Side Tooltip, Arrow appears on Left */
+.tooltip-pane[x-placement^="right"] {
+	@apply tw-ml-1;
+}
+
+.tooltip-pane[x-placement^="right"] .tooltip-arrow {
+	border-width: 8px 8px 8px 0;
+	border-left-color: transparent;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	top: calc(50% - 8px);
+	@apply -tw-left-1 tw-ml-0 tw-mr-0;
+}
+
+/* Left Side Tooltip, Arrow appears on Right */
+.tooltip-pane[x-placement^="left"] {
+	@apply tw-mr-1;
+}
+
+.tooltip-pane[x-placement^="left"] .tooltip-arrow {
+	border-width: 8px 0 8px 8px;
+	border-top-color: transparent;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	top: calc(50% - 8px);
+	@apply -tw-right-1 tw-ml-0 tw-mr-0;
+}
+</style>