From 86d1b397f160c6e720751be2023fb470492ed485 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 14 Mar 2024 14:53:03 -0400
Subject: [PATCH] docs(tree-list): misc fixes [KHCP-9008]

---
 docs/components/tree-list.md      | 47 -------------------------------
 sandbox/pages/SandboxTreeList.vue | 26 +++++++++++------
 2 files changed, 17 insertions(+), 56 deletions(-)

diff --git a/docs/components/tree-list.md b/docs/components/tree-list.md
index 4c96cbd688..f620add6bc 100644
--- a/docs/components/tree-list.md
+++ b/docs/components/tree-list.md
@@ -277,45 +277,6 @@ Two separate `child-change` events will fire if an item is moved from one parent
 
 Emitted when you click (and don't drag) an item. Returns the selected item's data.
 
-<div class="vertical-container">
-  <KLabel>Selected: {{ mySelection && mySelection.name || '' }}</KLabel>
-  <KLabel>Items:</KLabel>
-  <pre class="json hide-from-percy">{{ JSON.stringify(eventItems, null, 2) }}</pre>
-  <KTreeList
-    :items="eventItems"
-    @selected="(item) => mySelection = item"
-    @change="({ items }) => eventItems = items"
-    @child-change="handleChildChange"
-  />
-</div>
-
-```vue
-<template>
-  <KLabel>Selected: {{ mySelection && mySelection.name || '' }}</KLabel>
-  <KLabel>Items: </KLabel> {{ myItems }}
-  <KTreeList
-    :items="myItems"
-    @selected="(item) => mySelection = item"
-    @change="({ items }) => myItems = items"
-    @child-change="handleChildChange"
-  />
-</template>
-
-<script setup lang="ts">
-import type { TreeListItem } from '@kong/kongponents'
-
-...
-
-const mySelection = ref<TreeListItem | null>(null)
-
-const handleChildChange = (data): void => {
-  const { parentId, children, target } = data
-  const changedParent = myItems.value.find(item => item.id === parentId)
-  changedParent.children = children
-}
-</script>
-```
-
 <script setup lang="ts">
 import { ref } from 'vue'
 import { InboxIcon, DataObjectIcon } from '@kong/icons'
@@ -390,17 +351,9 @@ const hideIconsItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
 
 const slotItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
 
-const eventItems = ref<TreeListItem[]>(JSON.parse(JSON.stringify(items)))
-
 const reset = (): void => {
   myList.value = JSON.parse(JSON.stringify(items))
 }
-
-const handleChildChange = (data): void => {
-  const { parentId, children, target } = data
-  const changedParent = eventItems.value.find(item => item.id === parentId)
-  changedParent.children = children
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/sandbox/pages/SandboxTreeList.vue b/sandbox/pages/SandboxTreeList.vue
index 4acfbe766a..792f051e2f 100644
--- a/sandbox/pages/SandboxTreeList.vue
+++ b/sandbox/pages/SandboxTreeList.vue
@@ -16,30 +16,30 @@
         title="Props"
       />
       <SandboxSectionComponent title="item">
-        <KTreeList :items="items" />
+        <KTreeList :items="items1" />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="disableDrag">
         <KTreeList
           disable-drag
-          :items="items"
+          :items="items2"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="maxDepth">
         <KTreeList
-          :items="items"
+          :items="items3"
           :max-depth="4"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="width">
         <KTreeList
-          :items="items"
+          :items="items4"
           width="300"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="hideIcons">
         <KTreeList
           hide-icons
-          :items="items"
+          :items="items5"
         />
       </SandboxSectionComponent>
 
@@ -49,7 +49,7 @@
         title="Slots"
       />
       <SandboxSectionComponent title="item-icon">
-        <KTreeList :items="items">
+        <KTreeList :items="items6">
           <template #item-icon="{ item }">
             <InboxIcon
               v-if="item.id.includes('folder')"
@@ -59,7 +59,7 @@
         </KTreeList>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="item-label">
-        <KTreeList :items="items">
+        <KTreeList :items="items7">
           <template #item-label="{ item }">
             <span v-if="item.id.includes('folder')">
               <strong>{{ item.name }}</strong>
@@ -82,7 +82,7 @@ import type { TreeListItem } from '@/types'
 import { InboxIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_DECORATIVE_PURPLE, KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG } from '@kong/design-tokens'
 
-const items = ref<TreeListItem[]>([
+const defaultItems = [
   {
     name: 'Components',
     id: 'components-folder',
@@ -129,5 +129,13 @@ const items = ref<TreeListItem[]>([
       id: 'user-types',
     }],
   },
-])
+]
+
+const items1 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items2 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items3 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+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)))
 </script>