@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvProgressBar.vue

@@ -0,0 +1,149 @@
+<template>
+	<div
+		class="
+			tw-h-1 tw-w-full tw-rounded-full tw-overflow-hidden tw-relative
+		"
+		:class="backgroundVariant"
+		role="progressbar"
+		:aria-label="ariaLabel"
+		:aria-valuemin="min"
+		:aria-valuemax="max"
+		:aria-valuenow="value"
+	>
+		<div
+			class="
+				tw-h-1 tw-w-full tw-absolute tw--left-full tw-rounded-full
+				tw-transition-all tw-duration-1000 tw-origin-left tw-ease-out
+			"
+			:class="variantClass"
+			:style="{transform: loaded ? `translateX(${percent}%)` : 'translateX(0)' }"
+		>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * Horizontal progress bar which communicates to the user the progress of a particular process
+ */
+import {
+	ref,
+	toRefs,
+	computed,
+	onMounted,
+	nextTick,
+} from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * The words to announce to screenreaders describing what this progress represents
+		 * e.g., "Percent the loan has funded"
+		 * */
+		ariaLabel: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The min value of the progress bar
+		 * */
+		min: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * The max value of the progress bar
+		 * */
+		max: {
+			type: Number,
+			default: 100,
+		},
+		/**
+		 * The current value to display
+		 * */
+		value: {
+			type: Number,
+			default: 0,
+			required: true,
+		},
+		/**
+		 * Appearance of the progress bar
+		 * `primary (default), ghost, danger, caution
+		 * */
+		variant: {
+			type: String,
+			default: 'primary',
+			validator(value) {
+				return ['primary', 'ghost', 'danger', 'caution'].includes(value);
+			},
+		},
+		/**
+		 * Appearance of the progress bar background
+		 * `secondary (default), tertiary
+		 * */
+		bgVariant: {
+			type: String,
+			default: 'secondary',
+			validator(value) {
+				return ['secondary', 'tertiary'].includes(value);
+			},
+		},
+	},
+	setup(props) {
+		const {
+			min,
+			max,
+			value,
+			variant,
+			bgVariant,
+		} = toRefs(props);
+		const loaded = ref(false);
+
+		const percent = computed(() => {
+			const percentValue = ((value.value - min.value) / (max.value - min.value)) * 100;
+			const rounded = Math.round(percentValue * 10) / 10; // Keep percents to 1 decimal places 12.3%
+			const clamped = Math.min(Math.max(rounded, 0), 100); // Always between 0 and 100%
+			return clamped;
+		});
+
+		const variantClass = computed(() => {
+			switch (variant.value) {
+				case 'ghost':
+					return 'tw-bg-tertiary';
+				case 'danger':
+					return 'tw-bg-danger';
+				case 'caution':
+					return 'tw-bg-caution';
+				default:
+					return 'tw-bg-brand';
+			}
+		});
+
+		const backgroundVariant = computed(() => {
+			switch (bgVariant.value) {
+				case 'tertiary':
+					return 'tw-bg-tertiary';
+				default:
+					return 'tw-bg-secondary';
+			}
+		});
+
+		const animateProgressBar = () => {
+			loaded.value = true;
+		};
+
+		onMounted(async () => {
+			await nextTick();
+			animateProgressBar();
+		});
+
+		return {
+			loaded,
+			percent,
+			animateProgressBar,
+			variantClass,
+			backgroundVariant,
+		};
+	},
+};
+</script>

package/dist/components/KvRadio.vue

@@ -0,0 +1,198 @@
+<template>
+	<div
+		:class="classes"
+		:style="styles"
+	>
+		<label
+			class="tw-inline-flex tw-items-center tw-align-middle"
+			:class="{ 'tw-opacity-low': disabled }"
+			:for="uuid"
+		>
+			<input
+				v-bind="inputAttrs"
+				:id="uuid"
+				ref="radioRef"
+				class="tw-peer tw-appearance-none tw-w-max"
+				type="radio"
+				:checked="isChecked"
+				:name="name"
+				:value="value"
+				:disabled="disabled"
+				v-on="inputListeners"
+				@change.prevent="onChange"
+			>
+			<div
+				class="
+					tw-w-3 tw-h-3 tw-mr-2
+					tw-rounded-full
+					tw-border
+					tw-flex-shrink-0
+					tw-overflow-hidden
+					tw-flex tw-justify-center tw-items-center
+					tw-transition-all tw-duration-100
+					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action
+				"
+				:class="{
+					'tw-border-secondary' : !isChecked,
+					'tw-border-action' : isChecked
+				}"
+			>
+				<div
+					v-if="isChecked"
+					class="tw-rounded-full tw-bg-action"
+					style="width: 0.75rem; height: 0.75rem;"
+				></div>
+			</div>
+
+			<div class="tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action">
+				<slot></slot>
+			</div>
+		</label>
+	</div>
+</template>
+
+<script>
+import { nanoid } from 'nanoid';
+import {
+	computed,
+	onMounted,
+	ref,
+	toRefs,
+} from 'vue-demi';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'change',
+	'update:modelValue',
+];
+
+/* eslint-disable max-len */
+
+/**
+ * Use as you would an `<input type="radio" />`. Ensure you're using a fieldset and legend for a11y.
+ *
+ * @usage
+ * ```
+ * <fieldset>
+ *   <legend>Choose an item</legend>
+ *   <KvRadio value="foo" v-model="someDataValue">Label for foo</KvRadio>
+ *   <KvRadio value="bar" v-model="someDataValue">Label for bar</KvRadio>
+ *   <KvRadio value="baz" v-model="someDataValue">Label for baz</KvRadio>
+ * </fieldset>
+ *
+ * or
+ *
+ * <fieldset>
+ *   <legend>Choose an item</legend>
+ *   <KvRadio value="foo" name="myGroupName" @change="(val) => someDataValue = val" :checked="someDataValue === 'foo'" />Label for foo</KvRadio>
+ *   <KvRadio value="bar" name="myGroupName" @change="(val) => someDataValue = val" :checked="someDataValue === 'bar'" />Label for bar</KvRadio>
+ *   <KvRadio value="baz" name="myGroupName" @change="(val) => someDataValue = val" :checked="someDataValue === 'baz'" />Label for baz</KvRadio>
+ * </fieldset>
+ * ```
+*/
+/* eslint-enable max-len */
+
+export default {
+	inheritAttrs: false,
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+	props: {
+		/**
+		 * Value of the input
+		 * */
+		value: {
+			type: [String, Number, Boolean],
+			required: true,
+		},
+		/**
+		 * Prevents the radio from being toggled or focused
+		 * */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Native name attribute. Used to group radios if you're not using v-model. E.g.,
+		 * ```
+		 *  <KvRadio name="cats">Tabby</KvRadio>
+		 *  <KvRadio name="cats">Siamese</KvRadio>
+		 *  <KvRadio name="dogs">Husky</KvRadio>
+		 *  <KvRadio name="dogs">Boxer</KvRadio>
+		 * ```
+		 * */
+		name: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Native checked attribute. Used to select the radio if you're not using v-model E.g.,
+		 * ```
+		 *  <KvRadio value="foo" :checked="myModel === foo">Foo</KvRadio>
+		 *  <KvRadio value="bar" :checked="myModel === bar">Bar</KvRadio>
+		 * ```
+		 * */
+		checked: {
+			type: [String, Number, Boolean],
+			default: false,
+		},
+		modelValue: {
+			type: [String, Number, Boolean],
+			default: false,
+		},
+	},
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+		const {
+			value,
+			checked,
+			modelValue,
+		} = toRefs(props);
+
+		const uuid = ref(`kvr-${nanoid(10)}`);
+		const radioRef = ref(null);
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const isChecked = computed(() => {
+			if (typeof modelValue.value === typeof value.value) {
+				return modelValue.value === value.value;
+			}
+			return Boolean(checked.value);
+		});
+
+		onMounted(() => {
+			uuid.value = `kvr-${nanoid(10)}`;
+		});
+
+		const onChange = (event) => {
+			emit('change', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+
+		const focus = () => radioRef.focus();
+
+		const blur = () => radioRef.blur();
+
+		return {
+			uuid,
+			isChecked,
+			radioRef,
+			onChange,
+			focus,
+			blur,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		};
+	},
+};
+</script>

package/dist/components/KvSelect.vue

@@ -0,0 +1,114 @@
+<template>
+	<div
+		class="tw-inline-flex"
+		:class="classes"
+		:style="styles"
+	>
+		<div class="tw-relative tw-w-full">
+			<!-- eslint-disable max-len -->
+			<select
+				:id="id"
+				v-bind="inputAttrs"
+				v-model="inputValue"
+				:disabled="disabled"
+				class="tw-text-base tw-bg-primary tw-h-6 tw-pr-4 tw-pl-2 tw-border tw-border-tertiary tw-rounded-sm tw-appearance-none tw-w-full tw-ring-inset focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-action focus:tw-border-transparent"
+				:class="{ 'tw-opacity-low': disabled }"
+				@change="onChange"
+			>
+				<!-- eslint-enable max-len -->
+				<slot></slot>
+			</select>
+			<kv-material-icon
+				:icon="mdiChevronDown"
+				class="tw-w-4 tw-absolute tw-top-0 tw-right-0 tw-pt-1.5 tw-pr-1 tw-pointer-events-none"
+				:class="{ 'tw-opacity-low': disabled }"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { ref, watch } from 'vue-demi';
+import { mdiChevronDown } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'change',
+	'update:modelValue',
+];
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	// v-model will change when select value updates
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+	props: {
+		/**
+		 * Unique id to connect label and select
+		 * */
+		id: {
+			type: String,
+			required: true,
+			default: '',
+		},
+		/**
+		 * Use if select is disabled
+		 * */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * modelValue prop
+		 * */
+		modelValue: {
+			type: [Number, String],
+			default: 0,
+		},
+	},
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const inputValue = ref(props.modelValue);
+
+		watch(() => props.modelValue, (newValue) => {
+			if (newValue !== inputValue.value) {
+				inputValue.value = newValue;
+			}
+		});
+
+		const onChange = (event) => {
+			/**
+			* The value that the select has changed to
+			* @event change
+			* @type {Event}
+			*/
+			emit('change', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+
+		return {
+			mdiChevronDown,
+			onChange,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+			inputValue,
+		};
+	},
+};
+</script>

package/dist/components/KvSideSheet.vue

@@ -0,0 +1,134 @@
+<template>
+	<div
+		v-if="visible"
+		class="tw-hidden lg:tw-block tw-fixed tw-inset-0
+            tw-bg-black tw-transition-all tw-duration-150 tw-z-modal tw-mt-8"
+		:class="{
+			'tw-bg-opacity-0 tw-delay-300': !open,
+			'tw-bg-opacity-low': open,
+		}"
+		@click.self="closeSideSheet"
+	>
+		<div
+			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white"
+			:class="{
+				'tw-w-0 tw-p-0 tw-delay-200': !open,
+				'tw-w-1/2 tw-p-2': open,
+			}"
+		>
+			<div class="tw-flex tw-justify-between">
+				<button
+					class="hover:tw-text-action-highlight"
+					@click="closeSideSheet"
+				>
+					<kv-material-icon
+						class="tw-w-3 tw-h-3"
+						:icon="mdiClose"
+					/>
+				</button>
+
+				<button
+					v-if="showGoToLink"
+					class="hover:tw-text-action-highlight"
+					@click="goToLink"
+				>
+					<kv-material-icon
+						class="tw-w-3 tw-h-3"
+						:icon="mdiLaunch"
+					/>
+				</button>
+			</div>
+			<div
+				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200"
+				:class="{
+					'tw-opacity-0': !open,
+					'tw-opacity-full': open,
+				}"
+			>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { ref, toRefs, watch } from 'vue-demi';
+import { mdiClose, mdiLaunch } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Whether the side sheet is open or not
+		 * */
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show the go to link button
+		 * */
+		showGoToLink: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Tracking event function
+		 * */
+		kvTrackFunction: {
+			type: Function,
+			default: () => ({}),
+		},
+		/**
+		 * Tracking event category
+		 * */
+		trackEventCategory: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [
+		'side-sheet-closed',
+	],
+	setup(props, { emit }) {
+		const {
+			visible,
+			kvTrackFunction,
+			trackEventCategory,
+		} = toRefs(props);
+
+		const open = ref(false);
+
+		const closeSideSheet = () => {
+			open.value = false;
+			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
+			setTimeout(() => {
+				emit('side-sheet-closed');
+			}, '700');
+		};
+
+		const goToLink = () => {
+			emit('go-to-link');
+		};
+
+		watch(visible, () => {
+			if (visible.value) {
+				setTimeout(() => {
+					open.value = true;
+				}, '300');
+			}
+		});
+
+		return {
+			mdiClose,
+			mdiLaunch,
+			open,
+			closeSideSheet,
+			goToLink,
+		};
+	},
+};
+</script>