feat(ktreelist): add prop to filter draggable element selectors (#2610)

* feat(ktreelist): add filter prop

Adds a new prop to pass in a string (or function that evaluates to a string) for
disabling drag behavior from elements in the DOM.

* chore: update sandbox example

* fix: array logic

* fix: use computed prop

docs/components/tree-list.md

@@ -181,6 +181,16 @@ Boolean to turn off drag-n-drop reordering of the list. Defaults to `false`.
 <KTreeList disable-drag :items="items" />
 ```
 
+### ignoreDragSelectors
+
+A `string` or (`function` that returns a `string`) of selectors that should not result in dragging tree list items.
+
+For multiple selectors, you **must** pass in a comma-delimited list of selectors.
+
+```html
+<KTreeList ignore-drag-selectors=".button-element, .another-element > .nested-property" :items="items" />
+```
+
 ### maxDepth
 
 Use this prop to customize the maximum supported depth of the tree. The default value is `3`. The maximum supported value for `maxDepth` is 5.

sandbox/pages/SandboxTreeList.vue

@@ -36,6 +36,22 @@
           :items="items4"
         />
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="ignoreDragSelectors">
+        <KTreeList
+          ignore-drag-selectors=".internal-button"
+          :items="items12"
+        >
+          <template #item-label="{ item }">
+            <KButton
+              appearance="secondary"
+              class="internal-button"
+              size="small"
+            >
+              {{ item.name }}
+            </KButton>
+          </template>
+        </KTreeList>
+      </SandboxSectionComponent>
       <SandboxSectionComponent title="maxDepth">
         <KTreeList
           :items="items5"
@@ -198,6 +214,7 @@ const items8 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items9 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items10 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 const items11 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items12 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
 
 const toggleItems = ref<boolean>(true)
 const kTreeRef = useTemplateRef('k-tree-ref')

src/components/KTreeList/KTreeDraggable.vue

@@ -4,7 +4,7 @@
     class="tree-draggable"
     direction="vertical"
     :disabled="disableDrag"
-    filter=".tree-item-expanded-button"
+    :filter="computedDragFilter"
     :group="{ name: group, pull: [group], put: maxLevelReached ? [] : [group] }"
     :level="level"
     :list="internalList"
@@ -62,6 +62,7 @@
         }"
         :collapsible="collapsible"
         :disable-drag="disableDrag"
+        :filter="computedDragFilter"
         :group="group"
         :hide-icons="hideIcons"
         :initial-collapse-all="initialCollapseAll"
@@ -121,6 +122,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  filter: {
+    type: [String, Function] as PropType<string | (() => string)>,
+    default: () => '',
+  },
   maxDepth: {
     type: Number,
     default: 3,
@@ -176,6 +181,12 @@ const draggableAttrs = {
 }
 const dragging = ref<boolean>(false)
 
+const computedDragFilter = computed((): string => {
+  const selectorList: string = typeof props.filter === 'function' ? props.filter() : props.filter
+  // Always append the internal `.tree-item-expanded-button` selector and separate selectors with a comma
+  return ['.tree-item-expanded-button', ...(selectorList.split(',').map(s => s.trim()).filter(Boolean))].join(', ')
+})
+
 const hasNoChildren = (item: TreeListItem): boolean => {
   return !internalList.value.filter(anItem => anItem.id === item.id)?.[0].children?.length
 }

src/components/KTreeList/KTreeList.vue

@@ -9,6 +9,7 @@
       :collapsible="collapsible"
       :data-testid="`k-tree-list-${group}`"
       :disable-drag="disableDrag"
+      :filter="ignoreDragSelectors"
       :group="group"
       :hide-icons="hideIcons"
       :initial-collapse-all="initialCollapseAll"
@@ -97,6 +98,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /** A `string` or `function` that returns a `string` of selectors that should not result in dragging tree list items. */
+  ignoreDragSelectors: {
+    type: [String, Function] as PropType<string | (() => string)>,
+    default: () => '',
+  },
   maxDepth: {
     type: Number,
     default: 3,