@kiva/kv-components 3.107.0 → 3.107.2

package/dist/components/KvSwitch.vue

@@ -0,0 +1,143 @@
+<template>
+	<div
+		:class="classes"
+		:style="styles"
+	>
+		<label
+			class="tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer"
+			:class="{ 'tw-opacity-low': disabled }"
+			:for="uuid"
+		>
+			<input
+				:id="uuid"
+				v-bind="inputAttrs"
+				ref="switchRef"
+				class="tw-sr-only tw-peer"
+				type="checkbox"
+				role="switch"
+				:checked="modelValue"
+				:disabled="disabled"
+				v-on="inputListeners"
+				@change.prevent="onChange"
+			>
+			<!-- switch background -->
+			<div
+				class="
+					tw-w-7 tw-h-4 tw-rounded-full tw-relative tw-overflow-hidden
+					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action
+					tw-bg-tertiary peer-checked:tw-bg-action
+					tw-transition-all tw-ease-in-out
+				"
+			>
+			</div>
+			<!-- switch inner circle -->
+			<div
+				class="
+						tw-flex-shrink-0 tw-w-3 tw-h-3
+						tw-absolute tw-m-0.5 tw-top-0
+						tw-rounded-full
+						tw-bg-white
+						tw-transform tw-transition-all tw-ease-in-out
+						peer-checked:tw-translate-x-3
+					"
+			></div>
+			<!-- label -->
+			<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 {
+	ref,
+	onMounted,
+} from 'vue-demi';
+import { nanoid } from 'nanoid';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'update:modelValue',
+];
+
+/**
+ * KvSwitch
+ * A visual treatment of a checkbox element for handling on/off states in UI.
+ *
+ * A11y considerations:
+ *
+ * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role
+ *
+ * Prior art:
+ *
+ * - https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
+ * - https://adrianroselli.com/2019/08/under-engineered-toggles-too.html
+ * - https://headlessui.dev/react/switch#labels
+ * - https://react-spectrum.adobe.com/react-spectrum/Switch.html
+ *
+*/
+export default {
+	inheritAttrs: false,
+	// v-model will change when checked value changes
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+	props: {
+		/**
+		 * Whether the switch is on or off
+		 * */
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Prevents the switch from being toggled or focused
+		 * */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+		const uuid = ref(`kvs-${nanoid(10)}`);
+		const switchRef = ref(null);
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const onChange = (event) => {
+			emit('update:modelValue', event.target.checked);
+		};
+
+		const focus = () => {
+			switchRef.value.focus();
+		};
+		const blur = () => {
+			switchRef.value.blur();
+		};
+
+		onMounted(() => {
+			uuid.value = `kvs-${nanoid(10)}`;
+		});
+
+		return {
+			uuid,
+			onChange,
+			focus,
+			blur,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		};
+	},
+};
+</script>

package/dist/components/KvTab.vue

@@ -0,0 +1,90 @@
+<template>
+	<button
+		:id="`kv-tab-${forPanel}`"
+		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap tw-text-left"
+		:class="{ 'hover:tw-text-action-highlight' : !isActive,
+			'md:tw-border-l-2 tw-border-transparent md:tw-pl-2' : vertical,
+			'tw-text-action-highlight' : isActive && vertical
+		}"
+		role="tab"
+		:aria-selected="isActive"
+		:aria-controls="`kv-tab-panel-${forPanel}`"
+		:tabindex="isActive ? null : -1"
+		@click="handleTabClicked"
+	>
+		<slot></slot>
+	</button>
+</template>
+
+<script>
+import {
+	toRefs,
+	inject,
+	computed,
+	onMounted,
+	getCurrentInstance,
+} from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * A unique id which correspondes to an `id` property on the KvTabPanel it controls
+		 * e.g., <kv-tab for="foo">... <kv-tab-panel id="foo">
+		 * */
+		forPanel: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The tab should be initially selected.
+		 * */
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			forPanel,
+		} = toRefs(props);
+
+		const kvTabContext = inject('$KvTabContext');
+
+		const isActive = computed(() => {
+			let navItems = [];
+			let selectedIndex = 0;
+			if (kvTabContext) {
+				navItems = kvTabContext.navItems;
+				selectedIndex = kvTabContext.selectedIndex;
+			}
+			return navItems[selectedIndex]?.forPanel === forPanel.value;
+		});
+
+		const index = computed(() => {
+			let navItems = [];
+			if (kvTabContext) {
+				navItems = kvTabContext.navItems;
+			}
+			return navItems?.findIndex((navItem) => navItem.forPanel === forPanel.value);
+		});
+
+		const handleTabClicked = () => {
+			kvTabContext.setTab(index.value);
+		};
+
+		onMounted(() => {
+			const instance = getCurrentInstance();
+			kvTabContext.navItems.push(instance.proxy);
+		});
+
+		return {
+			isActive,
+			handleTabClicked,
+		};
+	},
+};
+</script>

package/dist/components/KvTabPanel.vue

@@ -0,0 +1,64 @@
+<template>
+	<transition
+		enter-active-class="tw-transition-opacity tw-duration-700"
+		leave-active-class=""
+		enter-class="tw-opacity-0 tw-absolute tw-top-0"
+		enter-to-class="tw-opacity-full"
+		leave-class=""
+		leave-to-class="tw-opacity-0 tw-absolute tw-top-0"
+	>
+		<div
+			v-show="isActive"
+			:id="`kv-tab-panel-${id}`"
+			:key="`kv-tab-panel-${id}`"
+			role="tabpanel"
+			:aria-hidden="!isActive"
+			:aria-labelledby="`kv-tab-${id}`"
+			tabindex="0"
+		>
+			<slot></slot>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {
+	computed,
+	toRefs,
+	inject,
+} from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * A unique id which correspondes to a `for` property on the KvTab which controls it
+		 * e.g., <kv-tab for="foo">... <kv-tab-panel id="foo">
+		 * */
+		id: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const {
+			id,
+		} = toRefs(props);
+
+		const kvTabContext = inject('$KvTabContext');
+
+		const isActive = computed(() => {
+			let navItems = [];
+			let selectedIndex = 0;
+			if (kvTabContext) {
+				navItems = kvTabContext.navItems;
+				selectedIndex = kvTabContext.selectedIndex;
+			}
+			return navItems[selectedIndex]?.forPanel === id.value;
+		});
+
+		return {
+			isActive,
+		};
+	},
+};
+</script>

package/dist/components/KvTabs.vue

@@ -0,0 +1,182 @@
+<template>
+	<div :class="vertical ? 'md:tw-flex' : ''">
+		<div
+			role="tablist"
+			class="
+				tw-flex tw-overflow-auto tw-relative
+				tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6
+				tw-mb-3 lg:tw-mb-4
+			"
+			:class="{'md:tw-flex-col md:tw-mr-3' : vertical}"
+			@keydown="handleKeyDown($event)"
+		>
+			<!-- @slot Tab Navigation -->
+			<slot
+				name="tabNav"
+			></slot>
+
+			<!-- indicator bar -->
+			<div
+				class="
+					tw-absolute tw-bottom-0 tw-h-0.5 tw-left-0
+					tw-bg-primary-inverse tw-rounded-full
+					tw-origin-left tw-transition-all tw-duration-300
+				"
+				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action-highlight' : vertical}"
+				:style="`
+					width: ${selectedTabEl && !vertical ? selectedTabEl.clientWidth : 3}px;
+					height: ${selectedTabEl && vertical ? `${selectedTabEl.clientHeight}px` : '0.25rem'};
+					transform: ${selectedTabEl && !vertical ? `translateX(${selectedTabEl.offsetLeft}px)`
+				: selectedTabEl ? `translateY(${selectedTabEl.offsetTop}px)` : null};
+				`"
+			></div>
+		</div>
+		<div class="tw-relative">
+			<!-- @slot Tab Panels -->
+			<slot name="tabPanels"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * Components for implementing a tab UI pattern. Requires KvTab and KvTabPanel components.
+ *
+ * Keyboard navigation and aria roles + attributes handled according to
+ * https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
+ *
+ * Usage:
+ *
+ * ```
+ *  <kv-tabs>
+ *   <template #tabNav>
+ *    <kv-tab for-panel="foo">Foo</kv-tab>
+ *    <kv-tab for-panel="bar">Bar</kv-tab>
+ *   </template>
+ *   <template #tabPanels>
+ *    <kv-tab-panel id="foo">Foo content</kv-tab-panel>
+ *    <kv-tab-panel id="bar">Bar content</kv-tab-panel>
+ *   </template>
+ *  </kv-tabs>
+ * ```
+ */
+import {
+	ref,
+	reactive,
+	provide,
+	computed,
+	onMounted,
+	getCurrentInstance,
+	onBeforeUnmount,
+} from 'vue-demi';
+
+export default {
+	props: {
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const tabContext = reactive({
+			selectedIndex: 0,
+			setTab: null,
+			navItems: [],
+		});
+		const selectedTabResizeObserver = ref(null);
+
+		const selectedTabEl = computed(() => {
+			const { navItems, selectedIndex } = tabContext;
+			return navItems[selectedIndex]?.$el ?? null;
+		});
+
+		const forceUpdate = () => {
+			const instance = getCurrentInstance();
+			if (instance) {
+				instance.proxy.$forceUpdate();
+			}
+		};
+
+		const setTab = (index) => {
+			tabContext.selectedIndex = index;
+			selectedTabEl.value.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+			/**
+			 * Triggers when the selected tab changes
+			 *
+			 * @property {number} index Index of the newly selected tab
+			 */
+			emit('tab-changed', index);
+		};
+
+		tabContext.setTab = setTab; // setTab definition in tab context
+		provide('$KvTabContext', tabContext);
+
+		const handleKeyDown = (event) => {
+			const { navItems, selectedIndex } = tabContext;
+
+			const focusActiveTab = () => {
+				const activeTab = navItems
+					.find((navItem) => navItem.isActive);
+				if (activeTab) {
+					activeTab.$el?.focus();
+				}
+			};
+			const count = navItems.length;
+
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				const nextIndex = (selectedIndex + 1) % count;
+				setTab(nextIndex);
+				focusActiveTab();
+			}
+
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				const prevIndex = (selectedIndex - 1 + count) % count;
+				setTab(prevIndex);
+				focusActiveTab();
+			}
+
+			if (event.key === 'Home') {
+				event.preventDefault();
+				setTab(0);
+				focusActiveTab();
+			}
+
+			if (event.key === 'End') {
+				event.preventDefault();
+				setTab(count - 1);
+				focusActiveTab();
+			}
+		};
+
+		onMounted(() => {
+			// check if any of the KvTab components are declaratively selected
+			tabContext.navItems.forEach((navItem, index) => {
+				if (navItem.selected) {
+					setTab(index);
+				}
+			});
+
+			// Tab size can change as @font-face fonts come in or
+			// the screen breakpoint changes the font size. If this happens
+			// we need to re-size and position the indicator bar.
+			selectedTabResizeObserver.value = new ResizeObserver(() => {
+				forceUpdate();
+			});
+			selectedTabResizeObserver.value.observe(selectedTabEl.value);
+		});
+
+		onBeforeUnmount(() => {
+			selectedTabResizeObserver.value.disconnect();
+		});
+
+		return {
+			handleKeyDown,
+			selectedTabEl,
+			tabContext,
+		};
+	},
+};
+</script>

package/dist/components/KvTextInput.vue

@@ -0,0 +1,247 @@
+<template>
+	<div
+		class="tw-inline-flex"
+		:class="classes"
+		:style="styles"
+	>
+		<div
+			class="tw-relative tw-w-full "
+			:class="{ 'tw-opacity-low': disabled }"
+		>
+			<!-- eslint-disable max-len -->
+			<input
+				:id="id"
+				ref="textInputRef"
+				:type="type"
+				class="
+					tw-h-6 tw-w-full
+					tw-px-2
+					tw-border tw-border-tertiary
+					tw-rounded-sm
+					tw-appearance-none
+					tw-text-base
+					tw-bg-primary
+					tw-ring-inset
+					focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-action focus:tw-border-transparent
+				"
+				:class="{
+					'tw-pr-6 tw-bg-danger tw-border-danger-highlight tw-bg-opacity-low focus:tw-ring-danger-highlight'
+						: !valid,
+					'tw-bg-tertiary'
+						: disabled,
+					'tw-pl-6' : icon,
+				}"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				v-bind="inputAttrs"
+				:value="modelValue"
+				v-on="inputListeners"
+				@input="onInput"
+			>
+			<!-- eslint-enable max-len -->
+			<kv-material-icon
+				v-if="icon"
+				:icon="icon"
+				class="tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-left-1.5 tw-pointer-events-none"
+			/>
+			<kv-material-icon
+				v-if="!valid"
+				:icon="mdiAlertCircleOutline"
+				class="tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-right-1.5
+				tw-pointer-events-none tw-text-danger"
+			/>
+			<button
+				v-show="canClear && valid && !!inputText"
+				type="button"
+				class="tw-absolute tw-top-1.5 tw-right-1.5"
+				@click="clearInput"
+			>
+				<span class="tw-sr-only">clear input</span>
+				<kv-material-icon
+					class="tw-w-3 tw-h-3"
+					:icon="mdiClose"
+				/>
+			</button>
+			<div
+				v-if="$slots.error"
+				class="tw-text-danger tw-text-small tw-font-medium tw-mt-1"
+			>
+				<!-- @slot Used in conjuction with the `valid` prop to tell the user what must be fixed -->
+				<slot name="error"></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	ref,
+	toRefs,
+} from 'vue-demi';
+import { mdiAlertCircleOutline, mdiClose } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'input',
+	'update:modelValue',
+];
+/* eslint-disable max-len */
+
+/**
+ * Use as you would an `<input type="text" />`. Ensure you're using a label element for a11y.
+ *
+ * @usage
+ * ```
+ * <label for="input_id">Street Address</label>
+ * <kv-text-input id="input_id" v-model="streetAddress" />
+ *
+ * or
+ *
+ * <label for="input_id">Street Address</label>
+ * <kv-text-input id="input_id" :value="streetAddress" @input="(val) => streetAddress = val" />
+ * ```
+*/
+/* eslint-enable max-len */
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	inheritAttrs: false,
+	// v-model will update when a different value is input
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+	props: {
+		/**
+		 * Id of the input, used to associate the input with a <label> element.
+		 * */
+		id: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Value of the text in the input. Used if you're not using the standard v-model bindings
+		 * ```
+		 * <kv-text-input :value="streetAddress" @input="(val) => streetAddress = val" />
+		 * ```
+		 * */
+		modelValue: {
+			type: [String, Number, Boolean],
+			default: '',
+		},
+		/**
+		 * Text that appears in the form control when it has no value set
+		 * Should not be used as a label, but rather an example.
+		 * Bad: Enter an address   Good: 1234 E Cherry Lane
+		 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder
+		 * */
+		placeholder: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Prevents the input from being edited or focused
+		 * */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * When set to false, visually indicates to the user that the contents of the input need
+		 * to be changed
+		 * */
+		valid: {
+			type: Boolean,
+			default: true,
+		},
+		/*
+		 * SVG path data passed in from an imported @mdi/js module.
+		 * Displayed on the left hand side of the input
+		 * ```
+		 * import { mdiMagnify } from '@mdi/js';
+		 * data() { return { mdiMagnify } };
+		 * <kv-text-input :icon="mdiMagnify" />`
+		 * ```
+		 * */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Can be used to set show special keyboards for mobile users
+		 * E.g., type="number" or type="tel"
+		 * */
+		type: {
+			type: String,
+			default: 'text',
+		},
+		/**
+		 * When set to true, adds a button positioned to the right edge of the input containing an “X”
+		 * */
+		canClear: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+		const {
+			modelValue,
+		} = toRefs(props);
+
+		const textInputRef = ref(null);
+		const inputText = ref(modelValue.value);
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const onInput = (event) => {
+			/**
+			* The value that is currently in the input
+			* @event input
+			* @type {Event}
+			*/
+			inputText.value = event.target.value;
+			emit('input', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+
+		const focus = () => {
+			textInputRef.value.focus();
+		};
+
+		const blur = () => {
+			textInputRef.value.blur();
+		};
+
+		const clearInput = () => {
+			inputText.value = '';
+			emit('input', '');
+			emit('update:modelValue', '');
+		};
+
+		return {
+			mdiAlertCircleOutline,
+			mdiClose,
+			onInput,
+			focus,
+			blur,
+			clearInput,
+			inputText,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+			textInputRef,
+		};
+	},
+};
+</script>