@kiva/kv-components 4.8.6 → 5.1.0

package/vue/KvSwitch.vue

@@ -1,143 +0,0 @@
-<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/vue/KvTab.vue

@@ -1,90 +0,0 @@
-<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' : !isActive,
-			'md:tw-border-l-2 tw-border-transparent md:tw-pl-2' : vertical,
-			'tw-text-action' : 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/vue/KvTabPanel.vue

@@ -1,64 +0,0 @@
-<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/vue/KvTabs.vue

@@ -1,182 +0,0 @@
-<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' : 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>