@kiva/kv-components 3.102.1 → 3.102.3

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.102.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.2...@kiva/kv-components@3.102.3) (2024-09-30)
+
+
+### Bug Fixes
+
+* width classes added to pie chart ([#463](https://github.com/kiva/kv-ui-elements/issues/463)) ([77715e2](https://github.com/kiva/kv-ui-elements/commit/77715e2d27a19bbb9c3cdd5239a037ae04ee5715))
+
+
+
+
+
+## [3.102.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.1...@kiva/kv-components@3.102.2) (2024-09-26)
+
+
+### Bug Fixes
+
+* change how model value is handled for select component ([5626a8f](https://github.com/kiva/kv-ui-elements/commit/5626a8fcb2a464d72abbda06968dec56496e4204))
+
+
+
+
+
 ## [3.102.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.0...@kiva/kv-components@3.102.1) (2024-09-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.102.1",
+  "version": "3.102.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "6e2360df11de20e781c327c45d43fd8d4dae1c58"
+  "gitHead": "95526e533545173c47b945ef8c8d85509cb8aa18"
 }

package/vue/KvPieChart.vue

@@ -4,18 +4,17 @@
 		@mouseleave="activeSlice = null"
 	>
 		<!-- pie chart -->
-		<div class="tw-relative tw-h-full">
+		<div class="tw-relative">
 			<div
 				v-if="loading"
-				class="pie-placeholder tw-h-full tw-p-2.5"
+				class="pie-placeholder tw-mt-2.5"
 			>
-				<div class="tw-overflow-hidden tw-rounded-full tw-h-full">
+				<div class="tw-overflow-hidden tw-rounded-full">
 					<kv-loading-placeholder />
 				</div>
 			</div>
 			<svg
 				v-else
-				class="tw-h-full"
 				viewBox="0 0 32 32"
 				xmlns="http://www.w3.org/2000/svg"
 				xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -236,14 +235,13 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.pie-chart {
-	height: 40rem;
-	@screen md {
-		height: 20rem;
-	}
+.pie-chart svg {
+	width: 20rem;
+	height: 20rem;
 }
 
-.pie-placeholder {
-	width: 20rem;
+.pie-placeholder, .pie-placeholder div {
+	width: 17.5rem;
+	height: 17.5rem;
 }
 </style>

package/vue/KvSelect.vue

@@ -9,8 +9,8 @@
 			<select
 				:id="id"
 				v-bind="inputAttrs"
+				v-model="inputValue"
 				:disabled="disabled"
-				: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"
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import 'vue-demi';
+import { ref, watch } from 'vue-demi';
 import { mdiChevronDown } from '@mdi/js';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 import { useAttrs } from '../utils/attrs';
@@ -82,6 +82,14 @@ export default {
 			inputListeners,
 		} = useAttrs(context, emits);
 
+		const inputValue = ref(props.modelValue);
+
+		watch(() => props.modelValue, (newValue) => {
+			if (newValue !== inputValue.value) {
+				inputValue.value = newValue;
+			}
+		});
+
 		const onChange = (event) => {
 			/**
 			* The value that the select has changed to
@@ -91,6 +99,7 @@ export default {
 			emit('change', event.target.value);
 			emit('update:modelValue', event.target.value);
 		};
+
 		return {
 			mdiChevronDown,
 			onChange,
@@ -98,6 +107,7 @@ export default {
 			styles,
 			inputAttrs,
 			inputListeners,
+			inputValue,
 		};
 	},
 };