fix(ktreelist): add group prop [KHCP-13028] (#2361)

* fix(ktreelist): add group prop [KHCP-13028] * test(ktreelist): add group prop tests [KHCP-13028] * docs(tree-list): update component docs [KHCP-13028] * fix: address pr feedback
Kong · Aug 28, 2024 · b2c4999 · b2c4999
1 parent 4c93731
commit b2c4999
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 7 deletions.
diff --git a/docs/components/tree-list.md b/docs/components/tree-list.md
@@ -147,6 +147,30 @@ const items = ref<TreeListItem[]>([
 </script>
 ```
 
+### group
+
+To drag elements from one list into another, both lists must have the same `group` value. Defaults to `k-tree-list` (meaning that elements from one list on a page can be dragged into another, unless a different `group` value is provided for one of them).
+
+In the example below, try toggling the grouping on and off and dragging items from one list into another.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ grouping: true }"
+>
+  <KInputSwitch
+    v-model="data.grouping"
+    :label="data.grouping ? 'Different groups' : 'Same group'"
+  />
+  <div class="group-container">
+    <KTreeList :items="groupedItems" />
+    <KTreeList :group="data.grouping ? 'i-stand-alone' : undefined" :items="groupedItems2" />
+  </div>
+</KComponent>
+
+```html
+<KTreeList group="group-name" :items="items" />
+```
+
 ### disableDrag
 
 Boolean to turn off drag-n-drop reordering of the list. Defaults to `false`.
@@ -349,6 +373,10 @@ const defaultItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
 
 const defaultItems2 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
 
+const groupedItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
+
+const groupedItems2 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
+
 const disableItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
 
 const maxLevelsItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
@@ -370,4 +398,14 @@ const reset = (): void => {
   flex-direction: column;
   gap: $kui-space-50;
 }
+
+.group-container {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-40;
+
+  @media (min-width: $kui-breakpoint-mobile) {
+    flex-direction: row;
+  }
+}
 </style>
diff --git a/sandbox/pages/SandboxTreeList.vue b/sandbox/pages/SandboxTreeList.vue
@@ -12,28 +12,46 @@
       <SandboxSectionComponent title="item">
         <KTreeList :items="items1" />
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="group">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ grouping: true }"
+        >
+          <KInputSwitch
+            v-model="data.grouping"
+            :label="data.grouping ? 'Different groups' : 'Same group'"
+          />
+          <div class="groups-example">
+            <KTreeList :items="items2" />
+            <KTreeList
+              :group="data.grouping ? 'i-stand-alone' : undefined"
+              :items="items3"
+            />
+          </div>
+        </KComponent>
+      </SandboxSectionComponent>
       <SandboxSectionComponent title="disableDrag">
         <KTreeList
           disable-drag
-          :items="items2"
+          :items="items4"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="maxDepth">
         <KTreeList
-          :items="items3"
+          :items="items5"
           :max-depth="4"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="width">
         <KTreeList
-          :items="items4"
+          :items="items6"
           width="300"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="hideIcons">
         <KTreeList
           hide-icons
-          :items="items5"
+          :items="items7"
         />
       </SandboxSectionComponent>
 
@@ -43,7 +61,7 @@
         title="Slots"
       />
       <SandboxSectionComponent title="item-icon">
-        <KTreeList :items="items6">
+        <KTreeList :items="items8">
           <template #item-icon="{ item }">
             <InboxIcon
               v-if="item.id.includes('folder')"
@@ -53,7 +71,7 @@
         </KTreeList>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="item-label">
-        <KTreeList :items="items7">
+        <KTreeList :items="items9">
           <template #item-label="{ item }">
             <span v-if="item.id.includes('folder')">
               <strong>{{ item.name }}</strong>
@@ -132,4 +150,18 @@ const items4 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items5 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items6 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items7 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items8 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items9 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 </script>
+
+<style lang="scss" scoped>
+.groups-example {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-40;
+
+  @media (min-width: $kui-breakpoint-mobile) {
+    flex-direction: row;
+  }
+}
+</style>
diff --git a/src/components/KTreeList/KTreeDraggable.vue b/src/components/KTreeList/KTreeDraggable.vue
@@ -4,7 +4,7 @@
     class="tree-draggable"
     direction="vertical"
     :disabled="disableDrag"
-    :group="{ name: 'k-tree-list', put: !maxLevelReached }"
+    :group="{ name: group, pull: [group], put: maxLevelReached ? [] : [group] }"
     :level="level"
     :list="internalList"
     :move="checkMove"
@@ -49,6 +49,7 @@
       <KTreeDraggable
         :key="`tree-item-${element.id}-children-${key}`"
         :disable-drag="disableDrag"
+        :group="group"
         :hide-icons="hideIcons"
         :items="getElementChildren(element)"
         :level="level + 1"
@@ -124,6 +125,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  group: {
+    type: String,
+    default: 'k-tree-list',
+  },
 })
 
 const emit = defineEmits<{

diff --git a/src/components/KTreeList/KTreeList.cy.ts b/src/components/KTreeList/KTreeList.cy.ts
@@ -157,4 +157,44 @@ describe('KTreeList', () => {
     cy.get(`[data-testid="tree-item-${itemId}"] [data-testid="tree-item-icon"]`).should('contain.text', itemIconSlot)
     cy.get(`[data-testid="tree-item-${itemId}"] [data-testid="tree-item-label"]`).should('contain.text', 'Hello ' + itemName)
   })
+
+  it('handles group prop correctly when not provided', () => {
+    const names = ['Name 1', 'Name 2']
+    const ids = ['name-id1', 'name-id2']
+
+    mount(KTreeList, {
+      props: {
+        items: [{
+          name: names[0],
+          id: ids[0],
+        }, {
+          name: names[1],
+          id: ids[1],
+        }],
+      },
+    })
+
+    cy.getTestId('k-tree-list').findTestId('k-tree-list-k-tree-list').should('be.visible')
+  })
+
+  it('handles group prop correctly when provided', () => {
+    const names = ['Name 1', 'Name 2']
+    const ids = ['name-id1', 'name-id2']
+    const group = 'i-stand-alone'
+
+    mount(KTreeList, {
+      props: {
+        items: [{
+          name: names[0],
+          id: ids[0],
+        }, {
+          name: names[1],
+          id: ids[1],
+        }],
+        group,
+      },
+    })
+
+    cy.getTestId('k-tree-list').findTestId(`k-tree-list-${group}`).should('be.visible')
+  })
 })
diff --git a/src/components/KTreeList/KTreeList.vue b/src/components/KTreeList/KTreeList.vue
@@ -5,7 +5,9 @@
     :style="width ? widthStyle : undefined"
   >
     <KTreeDraggable
+      :data-testid="`k-tree-list-${group}`"
       :disable-drag="disableDrag"
+      :group="group"
       :hide-icons="hideIcons"
       :items="internalList"
       :max-depth="maxDepth"
@@ -103,6 +105,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  group: {
+    type: String,
+    default: 'k-tree-list',
+  },
 })
 
 const emit = defineEmits<{