fix(ktreelist): fix multiple emits (#2334)

* fix(ktreelist): fix multiple emits * fix(ktreelist): fix multi emit [KHCP-12985] * docs(radio): typo * fix(ktreelist): fix drag behaviour
Kong · Aug 13, 2024 · a167050 · a167050
1 parent 244bb34
commit a167050
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/docs/components/radio.md b/docs/components/radio.md
@@ -241,11 +241,11 @@ KRadio emits two events with same payload.
 
 ### change
 
-Fired on change, returns radio [selectedVale](#selectedvalue).
+Fired on change, returns radio [selectedValue](#selectedvalue).
 
 ### update:modelValue
 
-Fired on change, returns radio [selectedVale](#selectedvalue).
+Fired on change, returns radio [selectedValue](#selectedvalue).
 
 <script setup lang="ts">
 import { ref } from 'vue'

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -181,6 +181,7 @@ onUnmounted(() => {
       padding-right: var(--kui-space-70, $kui-space-70);
 
       .slideout-title {
+        align-items: center;
         display: flex;
         flex: 1;
         font-family: var(--kui-font-family-text, $kui-font-family-text);
@@ -224,6 +225,10 @@ onUnmounted(() => {
       :deep(> *:last-child) {
         padding-bottom: var(--kui-space-70, $kui-space-70); // add padding to the last child to add some spacing before bottom of the page
       }
+
+      :deep(> p) {
+        margin: var(--kui-space-0, $kui-space-0);
+      }
     }
   }
 

diff --git a/src/components/KTreeList/KTreeDraggable.vue b/src/components/KTreeList/KTreeDraggable.vue
@@ -2,6 +2,7 @@
   <VueDraggableNext
     v-bind="draggableAttrs"
     class="tree-draggable"
+    direction="vertical"
     :disabled="disableDrag"
     :group="{ name: 'k-tree-list', put: !maxLevelReached }"
     :level="level"

diff --git a/src/components/KTreeList/KTreeItem.vue b/src/components/KTreeList/KTreeItem.vue
@@ -6,7 +6,7 @@
       'selected': item.selected
     }"
     :data-testid="`tree-item-${item.id}`"
-    :draggable="!disabled"
+    draggable="false"
     type="button"
     @click.prevent="handleClick"
   >
@@ -42,6 +42,10 @@ export const itemsHaveRequiredProps = (items: TreeListItem[]): boolean => {
 </script>
 
 <script lang="ts" setup>
+/**
+ * button.tree-item has draggable="false" attribute to prevent native drag events in order to let vue-draggable-next handle dragging
+ */
+
 const props = defineProps({
   item: {
     type: Object as PropType<TreeListItem>,

diff --git a/src/components/KTreeList/KTreeList.vue b/src/components/KTreeList/KTreeList.vue
@@ -137,6 +137,7 @@ const handleSelection = (itemToSelect: TreeListItem, list?: TreeListItem[]): voi
   editList.forEach((item: TreeListItem) => {
     if (item.id === itemToSelect.id) {
       item.selected = true
+      emit('selected', itemToSelect)
     } else {
       item.selected = false
     }
@@ -145,7 +146,6 @@ const handleSelection = (itemToSelect: TreeListItem, list?: TreeListItem[]): voi
       handleSelection(itemToSelect, item.children)
     }
   })
-  emit('selected', itemToSelect)
 }
 
 const handleChangeEvent = (data: ChangeEvent): void => {
@@ -207,6 +207,7 @@ onMounted(() => {
 // needs to stay unscoped as it's targeting specific deeply nested elements
 .k-tree-list {
   font-family: var(--kui-font-family-text, $kui-font-family-text);
+  width: 100%;
 
   & > .tree-draggable > .tree-item-container {
     &:before {