@kiva/kv-components 3.0.0 → 3.0.3

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.2...@kiva/kv-components@3.0.3) (2022-05-16)
+
+
+### Bug Fixes
+
+* added back initial uuid value. ([aa4a88c](https://github.com/kiva/kv-ui-elements/commit/aa4a88c5a65846e9103ce25985bd7d1cc7bfd025))
+* label and input uuids didn't match ([742452a](https://github.com/kiva/kv-ui-elements/commit/742452a9ffe03980f10f444a99f253429d028170))
+
+
+
+
+
+## [3.0.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.1...@kiva/kv-components@3.0.2) (2022-03-18)
+
+
+### Bug Fixes
+
+* clean up tests console errors and props ([37a6da9](https://github.com/kiva/kv-ui-elements/commit/37a6da9b4439463e777ae503b7ccff6562b9c81f))
+* ensure reactive ref state without timeout ([eda1553](https://github.com/kiva/kv-ui-elements/commit/eda1553304e6ed4199e35dbd73cb821b87bf3175))
+* return additional items for access as refs in vue2 ([b34ee52](https://github.com/kiva/kv-ui-elements/commit/b34ee52c39357bb7469418717d99c08a937c5cb8))
+
+
+
+
+
+## [3.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.0...@kiva/kv-components@3.0.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* **KvButton:** pass through click event for parent ([65c042f](https://github.com/kiva/kv-ui-elements/commit/65c042ff7b4780a514766ab476f443562b195eab))
+
+
+
+
+
 # [3.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@2.0.0...@kiva/kv-components@3.0.0) (2022-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "7006bb2c0026a64f278e727ebae46569e1426c68"
+  "gitHead": "bf6cb32b35ce31c41323b3733a7231708876987e"
 }

package/tests/unit/specs/components/KvButton.spec.js

@@ -1,4 +1,5 @@
 import { render, fireEvent } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import addVueRouter from '../../utils/addVueRouter';
 import KvButton from '../../../../vue/KvButton.vue';
@@ -52,6 +53,29 @@ describe('Default Button', () => {
 		getByTestId('ripple');
 	});
 
+	it('passes through click events', async () => {
+		const onClick = jest.fn();
+		const { getByText } = render({
+			template: `<div>
+				<KvButton @click.prevent="onClick">Button tag</KvButton>
+				<KvButton href="#test" @click.prevent="onClick">Anchor tag</KvButton>
+				<KvButton to="/test" @click.native.prevent="onClick">Router-link</KvButton>
+			</div>`,
+			components: {
+				KvButton,
+			},
+			methods: {
+				onClick,
+			},
+		}, addVueRouter());
+
+		// Click all the buttons and expect the onClick method to have been called 3 times
+		await userEvent.click(getByText('Button tag'));
+		await userEvent.click(getByText('Anchor tag'));
+		await userEvent.click(getByText('Router-link'));
+		expect(onClick.mock.calls.length).toBe(3);
+	});
+
 	it('when passed a loading prop, the button is disabled', () => {
 		const { getByRole } = renderTestButton({
 			props: { state: 'loading' },

package/tests/unit/specs/components/KvProgressBar.spec.js

@@ -3,7 +3,7 @@ import KvProgressBar from '../../../../vue/KvProgressBar.vue';
 
 describe('KvProgressBar', () => {
 	it('renders with a role of "progressbar"', () => {
-		const { getByRole } = render(KvProgressBar);
+		const { getByRole } = render(KvProgressBar, { props: { ariaLabel: 'progress-bar', value: 100 } });
 		const progressbarEl = getByRole('progressbar');
 
 		expect(progressbarEl).toBeDefined();

package/tests/unit/specs/components/KvTabPanel.spec.js

@@ -1,10 +1,31 @@
 import { render } from '@testing-library/vue';
 import { axe } from 'jest-axe';
+import '../../../../__mocks__/ResizeObserver';
+import KvTab from '../../../../vue/KvTab.vue';
 import KvTabPanel from '../../../../vue/KvTabPanel.vue';
+import KvTabs from '../../../../vue/KvTabs.vue';
 
 describe('KvTabPanel', () => {
 	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvTabPanel);
+		const { container } = render({
+			components: { KvTabs, KvTab, KvTabPanel },
+			template: `
+				<kv-tabs>
+					<template #tabNav>
+						<kv-tab forPanel="demo-1-first">First</kv-tab>
+						<kv-tab forPanel="demo-1-second">Second</kv-tab>
+						<kv-tab forPanel="demo-1-third">Third</kv-tab>
+						<kv-tab forPanel="demo-1-forth">Fourth is longer</kv-tab>
+					</template>
+					<template #tabPanels>
+						<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-forth"><p>Fourth Panel</p></kv-tab-panel>
+					</template>
+				</kv-tabs>
+			`,
+		});
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});

package/tests/unit/specs/components/KvTabs.spec.js

@@ -5,6 +5,8 @@ import '../../../../__mocks__/ResizeObserver';
 import KvTab from '../../../../vue/KvTab.vue';
 import KvTabPanel from '../../../../vue/KvTabPanel.vue';
 import KvTabs from '../../../../vue/KvTabs.vue';
+import KvButton from '../../../../vue/KvButton.vue';
+import addVueRouter from '../../utils/addVueRouter';
 
 // jsdom does not include scrollIntoView, so define it to avoid errors when switching tabs
 window.HTMLElement.prototype.scrollIntoView = () => {};
@@ -30,7 +32,6 @@ function renderOneTabSet() {
 		`,
 	});
 }
-
 describe('KvTabs', () => {
 	it('has no automated accessibility violations', async () => {
 		const { container } = renderOneTabSet();
@@ -96,4 +97,71 @@ describe('KvTabs', () => {
 		userEvent.keyboard('{Home}');
 		expect(await findByText('First Panel')).toBeVisible();
 	});
+
+	it('verifies setTab method when called by a ref', async () => {
+		const {
+			getByRole,
+			getAllByRole,
+			getByText,
+		} = render({
+			components: {
+				KvTabs,
+				KvTab,
+				KvTabPanel,
+				KvButton,
+			},
+			data() {
+				return { selectedIndexCheck: null };
+			},
+			template: `
+				<div data-testid="tabContainer">
+					<kv-tabs @tab-changed="handleTabChanged" data-testid="tabInstance" ref="tabsRef">
+						<template #tabNav>
+							<kv-tab forPanel="demo-1-first">First</kv-tab>
+							<kv-tab forPanel="demo-1-second">Second</kv-tab>
+							<kv-tab forPanel="demo-1-third">Third</kv-tab>
+							<kv-tab forPanel="demo-1-forth">Fourth is longer</kv-tab>
+						</template>
+						<template #tabPanels>
+							<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-forth"><p>Fourth Panel</p></kv-tab-panel>
+						</template>
+					</kv-tabs>
+					<kv-button @click.native.prevent="setTabButtonClick(1)" role="tabSetButton">Set Tab</kv-button>
+					<p>Tab index is {{ selectedIndexCheck }}</p>
+				</div>
+			`,
+			methods: {
+				handleTabChanged() {
+					this.selectedIndexCheck = this?.$refs?.tabsRef?.tabContext?.selectedIndex;
+				},
+				setTabButtonClick() {
+					this?.$refs?.tabsRef?.tabContext?.setTab(0);
+				},
+			},
+		}, addVueRouter());
+
+		// check for our elements
+		expect(getByRole('tabSetButton')).toBeDefined();
+		expect(getByRole('tablist')).toBeDefined();
+		expect(getAllByRole('tab').length).toBe(4);
+
+		// Click third tab and expect the third panel to be visible
+		await fireEvent.click(getByText('Third'));
+		expect(getByText('First Panel')).not.toBeVisible();
+		expect(getByText('Third Panel')).toBeVisible();
+		// Test access and updating of property ref
+		// expect the selected index value to be set to our new tab index
+		expect(getByText('Tab index is 2')).toBeVisible();
+
+		// click the button to test our ref method
+		await userEvent.click(getByText('Set Tab'));
+		expect(getByText('Third Panel')).not.toBeVisible();
+		expect(getByText('First Panel')).toBeVisible();
+		// Test access and updating of property ref
+		// expect the selected index value to be set to our new tab index
+		expect(getByText('Tab index is 0')).toBeVisible();
+	});
 });

package/vue/KvButton.vue

@@ -242,13 +242,8 @@ export default {
 		};
 
 		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' && type.value !== 'submit') {
-				event.preventDefault();
-				emit('click', event);
-			}
-
+			// Pass-through native click event to parent while adding ripple effect
+			emit('click', event);
 			createRipple(event);
 		};
 

package/vue/KvRadio.vue

@@ -151,7 +151,7 @@ export default {
 			modelValue,
 		} = toRefs(props);
 
-		let uuid = ref(`kvr-${nanoid(10)}`);
+		const uuid = ref(`kvr-${nanoid(10)}`);
 		const radioRef = ref(null);
 
 		const {
@@ -169,7 +169,7 @@ export default {
 		});
 
 		onMounted(() => {
-			uuid = `kvr-${nanoid(10)}`;
+			uuid.value = `kvr-${nanoid(10)}`;
 		});
 
 		const onChange = (event) => {

package/vue/KvTabs.vue

@@ -44,8 +44,8 @@
  * ```
  *  <kv-tabs>
  *   <template #tabNav>
- *    <kv-tab for="foo">Foo</kv-tab>
- *    <kv-tab for="bar">Bar</kv-tab>
+ *    <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>
@@ -163,6 +163,7 @@ export default {
 		return {
 			handleKeyDown,
 			selectedTabEl,
+			tabContext,
 		};
 	},
 };