@kiva/kv-components 2.0.0 → 3.0.0

package/vue/KvRadio.vue

@@ -1,12 +1,15 @@
 <template>
-	<div>
+	<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="$attrs"
+				v-bind="inputAttrs"
 				:id="uuid"
 				ref="radioRef"
 				class="tw-peer tw-appearance-none tw-w-max"
@@ -50,6 +53,18 @@
 
 <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 */
 
@@ -79,10 +94,9 @@ import { nanoid } from 'nanoid';
 
 export default {
 	inheritAttrs: false,
-	// v-model will update when the checked radio changes
 	model: {
-		prop: 'checked',
-		event: 'change',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 	props: {
 		/**
@@ -123,45 +137,62 @@ export default {
 			type: [String, Number, Boolean],
 			default: false,
 		},
+		modelValue: {
+			type: [String, Number, Boolean],
+			default: false,
+		},
 	},
-	data() {
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+		const {
+			value,
+			checked,
+			modelValue,
+		} = toRefs(props);
+
+		let 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 = `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: `kvr-${nanoid(10)}`,
+			uuid,
+			isChecked,
+			radioRef,
+			onChange,
+			focus,
+			blur,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
 		};
 	},
-	computed: {
-		isChecked() {
-			if (typeof this.checked === typeof this.value) {
-				return this.checked === this.value;
-			}
-			return Boolean(this.checked);
-		},
-		inputListeners() {
-			return {
-				// Pass through any listeners from the parent to the input element, like blur, focus, etc.
-				// https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-				...this.$listeners,
-				// ...except for the listener to the 'change' event which is emitted by this component
-				change: () => {},
-			};
-		},
-	},
-	mounted() {
-		this.uuid = `kvr-${nanoid(10)}`;
-	},
-	methods: {
-		onChange(event) {
-			/**
-			 * triggers when the value changes
-			 */
-			this.$emit('change', event.target.value);
-		},
-		focus() {
-			this.$refs.radioRef.focus();
-		},
-		blur() {
-			this.$refs.radioRef.blur();
-		},
-	},
 };
 </script>

package/vue/KvSelect.vue

@@ -1,11 +1,16 @@
 <template>
-	<div class="tw-inline-flex">
+	<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"
 				:disabled="disabled"
-				:value="value"
+				:value="modelValue"
 				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"
@@ -23,8 +28,15 @@
 </template>
 
 <script>
+import '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: {
@@ -32,8 +44,8 @@ export default {
 	},
 	// v-model will change when select value updates
 	model: {
-		prop: 'value',
-		event: 'change',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 	props: {
 		/**
@@ -44,13 +56,6 @@ export default {
 			required: true,
 			default: '',
 		},
-		/**
-		 * Initial selected value
-		 * */
-		value: {
-			type: [Number, String],
-			default: 0,
-		},
 		/**
 		 * Use if select is disabled
 		 * */
@@ -58,21 +63,42 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * modelValue prop
+		 * */
+		modelValue: {
+			type: [Number, String],
+			default: 0,
+		},
 	},
-	data() {
-		return {
-			mdiChevronDown,
-		};
-	},
-	methods: {
-		onChange(event) {
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const onChange = (event) => {
 			/**
 			* The value that the select has changed to
 			* @event change
 			* @type {Event}
 			*/
-			this.$emit('change', event.target.value);
-		},
+			emit('change', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+		return {
+			mdiChevronDown,
+			onChange,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		};
 	},
 };
 </script>

package/vue/KvSwitch.vue

@@ -1,17 +1,21 @@
 <template>
-	<div>
+	<div
+		:class="classes"
+		:style="styles"
+	>
 		<label
-			class="tw-inline-flex tw-gap-2 tw-items-center tw-relative"
+			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="$attrs"
+				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"
@@ -46,7 +50,16 @@
 </template>
 
 <script>
+import {
+	ref,
+	onMounted,
+} from 'vue-demi';
 import { nanoid } from 'nanoid';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'update:modelValue',
+];
 
 /**
  * KvSwitch
@@ -68,14 +81,14 @@ export default {
 	inheritAttrs: false,
 	// v-model will change when checked value changes
 	model: {
-		prop: 'checked',
-		event: 'change',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 	props: {
 		/**
 		 * Whether the switch is on or off
 		 * */
-		checked: {
+		modelValue: {
 			type: Boolean,
 			default: false,
 		},
@@ -87,35 +100,44 @@ export default {
 			default: false,
 		},
 	},
-	data() {
+	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: `kvs-${nanoid(10)}`,
+			uuid,
+			onChange,
+			focus,
+			blur,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
 		};
 	},
-	computed: {
-		inputListeners() {
-			return {
-				// Pass through any listeners from the parent to the input element, like blur, focus, etc.
-				// https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-				...this.$listeners,
-				// ...except for the listener to the 'change' event which is emitted by this component
-				change: () => {},
-			};
-		},
-	},
-	mounted() {
-		this.uuid = `kvs-${nanoid(10)}`;
-	},
-	methods: {
-		onChange(event) {
-			this.$emit('change', event.target.checked);
-		},
-		focus() {
-			this.$refs.switchRef.focus();
-		},
-		blur() {
-			this.$refs.switchRef.blur();
-		},
-	},
 };
 </script>

package/vue/KvTab.vue

@@ -1,11 +1,11 @@
 <template>
 	<button
-		:id="`kv-tab-${this.for}`"
+		:id="`kv-tab-${forPanel}`"
 		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap"
 		:class="{ 'hover:tw-text-action-highlight' : !isActive }"
 		role="tab"
 		:aria-selected="isActive"
-		:aria-controls="`kv-tab-panel-${this.for}`"
+		:aria-controls="`kv-tab-panel-${forPanel}`"
 		:tabindex="isActive ? null : -1"
 		@click="handleTabClicked"
 	>
@@ -14,14 +14,21 @@
 </template>
 
 <script>
+import {
+	toRefs,
+	inject,
+	computed,
+	onMounted,
+	getCurrentInstance,
+} from 'vue-demi';
+
 export default {
-	inject: ['$KvTabContext'],
 	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">
 		 * */
-		for: {
+		forPanel: {
 			type: String,
 			required: true,
 		},
@@ -33,23 +40,44 @@ export default {
 			default: false,
 		},
 	},
-	computed: {
-		isActive() {
-			const { navItems, selectedIndex } = this.$KvTabContext;
-			return navItems[selectedIndex]?.for === this.for;
-		},
-		index() {
-			const { navItems } = this.$KvTabContext;
-			return navItems?.findIndex((navItem) => navItem.for === this.for);
-		},
-	},
-	mounted() {
-		this.$KvTabContext.navItems.push(this);
-	},
-	methods: {
-		handleTabClicked() {
-			this.$KvTabContext.setTab(this.index);
-		},
+	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

@@ -22,8 +22,13 @@
 </template>
 
 <script>
+import {
+	computed,
+	toRefs,
+	inject,
+} from 'vue-demi';
+
 export default {
-	inject: ['$KvTabContext'],
 	props: {
 		/**
 		 * A unique id which correspondes to a `for` property on the KvTab which controls it
@@ -34,11 +39,26 @@ export default {
 			required: true,
 		},
 	},
-	computed: {
-		isActive() {
-			const { navItems, selectedIndex } = this.$KvTabContext;
-			return navItems[selectedIndex]?.for === this.id;
-		},
+	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

@@ -7,7 +7,7 @@
 				tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6
 				tw-mb-3 lg:tw-mb-4
 			"
-			@keydown="handleKeyDown"
+			@keydown="handleKeyDown($event)"
 		>
 			<!-- @slot Tab Navigation -->
 			<slot name="tabNav"></slot>
@@ -54,63 +54,54 @@
  *  </kv-tabs>
  * ```
  */
+import {
+	ref,
+	reactive,
+	provide,
+	computed,
+	onMounted,
+	getCurrentInstance,
+	onBeforeUnmount,
+} from 'vue-demi';
+
 export default {
-	provide() {
-		return {
-			// Since KvTab and KvTabPanel are tightly coupled to this component we provide
-			// them with a shared context for setting and reading the state of our tabs
-			$KvTabContext: this.tabContext,
-		};
-	},
-	data() {
-		return {
-			tabContext: {
-				selectedIndex: 0,
-				setTab: this.setTab,
-				navItems: [], // populated by KvTab
-			},
-			selectedTabResizeObserver: null,
-		};
-	},
-	computed: {
-		selectedTabEl() {
-			const { navItems, selectedIndex } = this.tabContext;
-			return navItems[selectedIndex]?.$el ?? null;
-		},
-	},
-	mounted() {
-		// check if any of the KvTab components are declaratively selected
-		this.tabContext.navItems.forEach((navItem, index) => {
-			if (navItem.selected) {
-				this.setTab(index);
-			}
+	setup(props, { emit }) {
+		const tabContext = reactive({
+			selectedIndex: 0,
+			setTab: null,
+			navItems: [],
 		});
+		const selectedTabResizeObserver = ref(null);
 
-		// 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.
-		this.selectedTabResizeObserver = new ResizeObserver(() => {
-			this.$forceUpdate();
+		const selectedTabEl = computed(() => {
+			const { navItems, selectedIndex } = tabContext;
+			return navItems[selectedIndex]?.$el ?? null;
 		});
-		this.selectedTabResizeObserver.observe(this.selectedTabEl);
-	},
-	beforeDestroy() {
-		this.selectedTabResizeObserver.disconnect();
-	},
-	methods: {
-		setTab(index) {
-			this.tabContext.selectedIndex = index;
-			this.selectedTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+		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
 			 */
-			this.$emit('tab-changed', index);
-		},
-		handleKeyDown(event) {
-			const { navItems, selectedIndex } = this.tabContext;
+			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
@@ -124,29 +115,55 @@ export default {
 			if (event.key === 'ArrowRight') {
 				event.preventDefault();
 				const nextIndex = (selectedIndex + 1) % count;
-				this.setTab(nextIndex);
+				setTab(nextIndex);
 				focusActiveTab();
 			}
 
 			if (event.key === 'ArrowLeft') {
 				event.preventDefault();
 				const prevIndex = (selectedIndex - 1 + count) % count;
-				this.setTab(prevIndex);
+				setTab(prevIndex);
 				focusActiveTab();
 			}
 
 			if (event.key === 'Home') {
 				event.preventDefault();
-				this.setTab(0);
+				setTab(0);
 				focusActiveTab();
 			}
 
 			if (event.key === 'End') {
 				event.preventDefault();
-				this.setTab(count - 1);
+				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,
+		};
 	},
 };
 </script>