@kiva/kv-components 1.2.1 → 1.4.1

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.4.0...@kiva/kv-components@1.4.1) (2021-12-22)
+
+
+### Bug Fixes
+
+* **KvTextInput:** watch for value prop changes ([ffa6c6d](https://github.com/kiva/kv-ui-elements/commit/ffa6c6dda548af021f1472e81469d7fc3a3c0a11))
+
+
+
+
+
+# [1.4.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.3.0...@kiva/kv-components@1.4.0) (2021-12-20)
+
+
+### Features
+
+* **KvTextInput:** focus the input after clearing text ([2093abb](https://github.com/kiva/kv-ui-elements/commit/2093abb30dca870c661f5354e043f0c40290ef81))
+
+
+
+
+
+# [1.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.2...@kiva/kv-components@1.3.0) (2021-12-13)
+
+
+### Features
+
+* **KvTextInput:** adds a button which clears the search form ([bf4166e](https://github.com/kiva/kv-ui-elements/commit/bf4166e604bfd08ab1c128eda10c51fc81c359ec))
+
+
+
+
+
+## [1.2.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.1...@kiva/kv-components@1.2.2) (2021-11-24)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 ## [1.2.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.0...@kiva/kv-components@1.2.1) (2021-11-17)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "1.2.1",
+  "version": "1.4.1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^1.2.0",
+    "@kiva/kv-tokens": "^1.2.1",
     "@mdi/js": "^5.9.55",
     "aria-hidden": "^1.1.3",
     "embla-carousel": "^4.5.3",
@@ -54,5 +54,5 @@
     "vue": "^2.6.12",
     "vue-focus-lock": "^1.4.1"
   },
-  "gitHead": "8cd7e8f40fc2258a5f9ecff162509e146eeddfbb"
+  "gitHead": "eb4916727c36c4c0c1c9be3e4da81b58783c63b4"
 }

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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/vue';
+import { render, fireEvent } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import KvTextInput from '../../../../vue/KvTextInput.vue';
@@ -53,4 +53,22 @@ describe('KvTextInput', () => {
 
 		expect(results).toHaveNoViolations();
 	});
+
+	it('clear button cleans the input value', async () => {
+		const { getByRole } = render(KvTextInput, {
+			props: {
+				canClear: true,
+				valid: true,
+				id: 'foo',
+			},
+		});
+		const textInputEl = getByRole('textbox');
+		expect(textInputEl.value).toEqual('');
+		await userEvent.type(textInputEl, 'abc 123');
+		expect(textInputEl.value).toEqual('abc 123');
+		const buttonInputEl = getByRole('button');
+		expect(buttonInputEl).toBeDefined();
+		await fireEvent.click(buttonInputEl);
+		expect(textInputEl.value).toEqual('');
+	});
 });

package/vue/KvSwitch.vue

@@ -12,7 +12,6 @@
 				class="tw-sr-only tw-peer"
 				type="checkbox"
 				role="switch"
-				:value="value"
 				:disabled="disabled"
 				v-on="inputListeners"
 				@change.prevent="onChange"

package/vue/KvTextInput.vue

@@ -28,9 +28,9 @@
 					'tw-pl-6' : icon,
 				}"
 				:placeholder="placeholder"
-				:value="value"
 				:disabled="disabled"
 				v-bind="$attrs"
+				:value="valueInput"
 				@input="onInput"
 				v-on="inputListeners"
 			>
@@ -45,6 +45,17 @@
 				:icon="mdiAlertCircleOutline"
 				class="tw-absolute tw-top-1.5 tw-right-1.5 tw-pointer-events-none tw-text-danger"
 			/>
+			<button
+				v-if="canClear && valid && !!valueInput"
+				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
+					:icon="mdiClose"
+				/>
+			</button>
 			<div
 				v-if="$slots.error"
 				class="tw-text-danger tw-text-small tw-font-medium tw-mt-1"
@@ -57,7 +68,7 @@
 </template>
 
 <script>
-import { mdiAlertCircleOutline } from '@mdi/js';
+import { mdiAlertCircleOutline, mdiClose } from '@mdi/js';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
 /* eslint-disable max-len */
@@ -152,10 +163,19 @@ export default {
 			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,
+		},
 	},
 	data() {
 		return {
 			mdiAlertCircleOutline,
+			mdiClose,
+			valueInput: this.value,
 		};
 	},
 	computed: {
@@ -168,6 +188,12 @@ export default {
 				input: () => {},
 			};
 		},
+
+	},
+	watch: {
+		value() {
+			this.valueInput = this.value;
+		},
 	},
 	methods: {
 		onInput(event) {
@@ -176,6 +202,7 @@ export default {
 			* @event input
 			* @type {Event}
 			*/
+			this.valueInput = event.target.value;
 			this.$emit('input', event.target.value);
 		},
 		focus() {
@@ -184,6 +211,11 @@ export default {
 		blur() {
 			this.$refs.textInputRef.blur();
 		},
+		clearInput() {
+			this.valueInput = '';
+			this.$emit('input', '');
+			this.focus();
+		},
 	},
 };
 </script>

package/vue/stories/Forms.stories.js

@@ -19,6 +19,8 @@ export default {
 		valid: true,
 		icon: null,
 		type: 'text',
+		canClear: false,
+		value: '',
 	},
 };
 

package/vue/stories/KvTextInput.stories.js

@@ -32,6 +32,7 @@ const DefaultTemplate = (args, {
 				:placeholder="placeholder"
 				:valid="valid"
 				:icon="icon"
+				:canClear="canClear"
 				v-model="textInputModel"
 				@input="onInput"
 				style="width: 25rem;"
@@ -164,6 +165,11 @@ Icon.args = {
 	icon: mdiMagnify,
 };
 
+export const canClear = DefaultTemplate.bind({});
+canClear.args = {
+	canClear: true,
+};
+
 export const PlaceholderText = (args, {
 	argTypes,
 }) => ({