@kiva/kv-components 0.21.0 → 0.21.4

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.21.3...@kiva/kv-components@0.21.4) (2021-09-30)
+
+
+### Bug Fixes
+
+* **KvCheckbox, KvRadio, KvSwitch:** Avoid SSR problems when setting the UUID ([ff55726](https://github.com/kiva/kv-ui-elements/commit/ff55726e7052908c58dc71ea6d14d6bffb922da7))
+
+
+
+
+
+## [0.21.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.21.2...@kiva/kv-components@0.21.3) (2021-09-30)
+
+
+### Bug Fixes
+
+* **KvCheckbox:** Background color now reliably changes when checkbox is clicked ([fc509b2](https://github.com/kiva/kv-ui-elements/commit/fc509b20fbed89e39df729090aa97beedd684636))
+
+
+
+
+
+## [0.21.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.21.1...@kiva/kv-components@0.21.2) (2021-09-30)
+
+
+### Bug Fixes
+
+* **KvCheckbox:** Allow checkboxes to use an array in v-model ([39b2e92](https://github.com/kiva/kv-ui-elements/commit/39b2e92a3c71ebb94e6da0f7133ae67d40758035))
+
+
+
+
+
+## [0.21.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.21.0...@kiva/kv-components@0.21.1) (2021-09-28)
+
+
+### Bug Fixes
+
+* **KvButton:** prevent underline on focus when button is an anchor tag ([10199ba](https://github.com/kiva/kv-ui-elements/commit/10199badc4bec6ae0badc420df5b0c2d7fed59e3))
+* Use themable class names. Change to low-opacity instead of text-color for disabled state. ([6aa9f0d](https://github.com/kiva/kv-ui-elements/commit/6aa9f0dc9d0952e172848fdbd834fecb94cd0bc2))
+
+
+
+
+
 # [0.21.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.5...@kiva/kv-components@0.21.0) (2021-09-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "0.21.0",
+  "version": "0.21.4",
   "publishConfig": {
     "access": "public"
   },
@@ -53,5 +53,5 @@
     "vue": "^2.6.12",
     "vue-focus-lock": "^1.4.1"
   },
-  "gitHead": "2584a3a30fc82ecaaf33453c5fd32283e09f3e7a"
+  "gitHead": "edea8bf2d45ca9a2e7a27377ab53c2555d76f6be"
 }

package/vue/.storybook/preview.js

@@ -28,7 +28,7 @@ export const decorators = [(story) => ({
 	template: '<kv-theme-provider :theme="theme"><story /></kv-theme-provider>',
 	data() {
 		return {
-			theme: ''
+			theme: {}
 		}
 	},
 	methods: {

package/vue/KvButton.vue

@@ -6,7 +6,7 @@
 		:href="href"
 		:type="computedType"
 		:disabled="isDisabled"
-		class="hover:tw-no-underline tw-inline-block"
+		class="hover:tw-no-underline focus:tw-no-underline tw-inline-block"
 		:class="{
 			'tw-opacity-low': state === 'disabled',
 			'tw-pointer-events-none': state === 'loading' || isDisabled

package/vue/KvCarousel.vue

@@ -33,11 +33,12 @@
 			tw-mt-4 tw-w-full"
 		>
 			<button
-				class="tw-text-gray-800 disabled:tw-text-gray-300
+				class="tw-text-primary
 					tw-rounded-full
-					tw-border-2 tw-border-text-gray-800
+					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
-					tw-flex tw-items-center tw-justify-center"
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
 				:disabled="embla && !embla.canScrollPrev()"
 				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
 			>
@@ -51,11 +52,12 @@
 				{{ currentIndex + 1 }}/{{ slideIndicatorListLength() }}
 			</div>
 			<button
-				class="tw-text-gray-800 disabled:tw-text-gray-300
+				class="tw-text-primary
 					tw-rounded-full
-					tw-border-2 tw-border-text-gray-800
+					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
-					tw-flex tw-items-center tw-justify-center"
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
 				:disabled="embla && !embla.canScrollNext()"
 				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
 			>

package/vue/KvCheckbox.vue

@@ -11,7 +11,7 @@
 				ref="checkboxRef"
 				class="tw-peer tw-appearance-none tw-w-max"
 				type="checkbox"
-				:checked="checked"
+				:checked="isChecked"
 				:value="value"
 				:disabled="disabled"
 				v-on="inputListeners"
@@ -26,14 +26,15 @@
 					tw-border
 					tw-flex tw-justify-center tw-items-center tw-overflow-hidden
 					tw-transition-all tw-duration-100
-					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action
-					tw-bg-white tw-border-secondary
-					peer-checked:tw-bg-action peer-checked:tw-border-action
-				"
+					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action"
+				:class="{
+					'tw-bg-white tw-border-secondary' : !isChecked,
+					'tw-bg-action tw-border-action' : isChecked,
+				}"
 			>
 				<!-- checkbox icon  -->
 				<svg
-					v-if="checked"
+					v-if="isChecked"
 					class="tw-w-1.5 tw-h-auto"
 					viewBox="0 0 12 9"
 					fill="none"
@@ -75,7 +76,7 @@ export default {
 		 * Whether the checkbox is checked or not
 		 * */
 		checked: {
-			type: Boolean,
+			type: [Boolean, Array],
 			default: false,
 		},
 		/**
@@ -85,10 +86,18 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Value of the checkbox if v-model is an array
+		 * */
+		value: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
 			uuid: `kvc-${nanoid(10)}`,
+			isChecked: false,
 		};
 	},
 	computed: {
@@ -102,9 +111,49 @@ export default {
 			};
 		},
 	},
+	watch: {
+		checked() {
+			this.setChecked();
+		},
+	},
+	mounted() {
+		this.uuid = `kvc-${nanoid(10)}`;
+	},
+	created() {
+		this.setChecked();
+	},
 	methods: {
 		onChange(event) {
-			this.$emit('change', event.target.checked);
+			// get the input[type=checkbox] state
+			const isChecked = event.target.checked;
+
+			let checkboxValue;
+
+			if (Array.isArray(this.checked)) {
+				// if the model is an array, add or remove our value from it
+				if (isChecked) {
+					checkboxValue = [...this.checked, event.target.value];
+				} else {
+					checkboxValue = this.checked.filter((item) => item !== this.value);
+				}
+			} else {
+				checkboxValue = isChecked;
+			}
+
+			// emit the change event to update the model
+			this.$emit('change', checkboxValue);
+		},
+		/**
+		 * Updates the visual state of the checkbox
+		 * */
+		setChecked() {
+			if (Array.isArray(this.checked)) {
+				// if the model is array like <kv-checkbox v-model="['item1', 'item2']" value="item1">
+				this.isChecked = this.checked.includes(this.value);
+			} else {
+				// else it's a boolean like <kv-checkbox v-model="true">
+				this.isChecked = this.checked;
+			}
 		},
 		focus() {
 			this.$refs.checkboxRef.focus();

package/vue/KvRadio.vue

@@ -146,6 +146,9 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		this.uuid = `kvr-${nanoid(10)}`;
+	},
 	methods: {
 		onChange(event) {
 			/**

package/vue/KvSwitch.vue

@@ -104,6 +104,9 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		this.uuid = `kvs-${nanoid(10)}`;
+	},
 	methods: {
 		onChange(event) {
 			this.$emit('change', event.target.checked);

package/vue/stories/KvCheckbox.stories.js

@@ -111,3 +111,46 @@ export const Multiple = (args, {
 			</kv-checkbox>
 		</div>`,
 });
+
+const ArrayModelTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvCheckbox,
+	},
+	data: () => ({
+		checkboxExampleModel: ['item1', 'item2'],
+	}),
+	template: `
+	<div class="tw-flex tw-flex-col tw-gap-2">
+			<kv-checkbox
+				value="item1"
+				v-model="checkboxExampleModel"
+				@change="onChange"
+			>
+				item1
+			</kv-checkbox>
+			<kv-checkbox
+				value="item2"
+				v-model="checkboxExampleModel"
+				@change="onChange"
+			>
+				item2
+			</kv-checkbox>
+			<kv-checkbox
+				value="item3"
+				v-model="checkboxExampleModel"
+				@change="onChange"
+			>
+				item3
+			</kv-checkbox>
+			<div>Checked items: <span v-for="item in checkboxExampleModel" :key="item">{{item}} </span></div>
+		</div>`,
+	methods: {
+		onChange(e) {
+			console.log(e);
+		},
+	},
+});
+export const ArrayModel = ArrayModelTemplate.bind({});