@kiva/kv-components 3.102.0 → 3.102.2

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.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)
+
+
+### Bug Fixes
+
+* pie chart not visible with only one value MP-791 ([6419cd8](https://github.com/kiva/kv-ui-elements/commit/6419cd8d0f348d32dddadd4170f87a6442bf1b29))
+
+
+
+
+
 # [3.102.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.101.3...@kiva/kv-components@3.102.0) (2024-09-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.102.0",
+  "version": "3.102.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "20b68474c85a4df97dcf32d6a234a237f02cb9ae"
+  "gitHead": "045a91050100e52132289efff23cd542ac1ae89d"
 }

package/vue/KvPieChart.vue

@@ -174,10 +174,18 @@ export default {
 				const value = values.value[i];
 				const end = start + value.percent;
 				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
-				const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
-				const largeArc = value.percent > 0.5 ? 1 : 0;
-				// Draw just the outer arc of the slice
-				const path = `M ${startX} ${startY} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY}`;
+				let path = `M ${startX},${startY} `;
+				if (value.percent === 1) {
+					// Draw a full circle in two arcs
+					const [midX, midY] = circumPointFromAngle(cX, cY, r, (start + end) * Math.PI);
+					path += `A ${r},${r} 0 0,1 ${midX},${midY} `;
+					path += `A ${r},${r} 0 0,1 ${startX},${startY}`;
+				} else {
+					// Draw just the outer arc of the slice
+					const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
+					const largeArc = value.percent > 0.5 ? 1 : 0;
+					path += `A ${r},${r} 0 ${largeArc},1 ${endX},${endY}`;
+				}
 				slicesArr.push({
 					...value,
 					path,

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,
 		};
 	},
 };

package/vue/stories/KvPieChart.stories.js

@@ -40,3 +40,8 @@ export const ManyValues = Template.bind({});
 ManyValues.args = {
 	values: sectorValues,
 };
+
+export const OneValue = Template.bind({});
+OneValue.args = {
+	values: [{ label: 'Female', value: 1, percent: 1 }],
+};