PrimeVue Tree checkbox disabled and not hidden when selectable is False

207 views Asked by At

With Vue 3.3.6 in composition API script setup style, Typescript, PrimeVue 3.37.0 and PrimeFlex 3.3.1, I would like, in my Tree component (selectionMode="checkbox"), to be able to disable certain checkboxes.

The TreeNode element offers a selectable key but setting it to false only hides the checkbox. (as some people complain on github)

So I started to develop a hacky solution via TreePassThroughOptions but I ran into two problems:

1- The typing of the lib is chaotic and I have to type TreeProps as any to reach the node key (of type TreeNode) without my IDE having a stroke.

2- Even when applying the PrimeFlex pointer-events-none class, click on the checkbox (which appears disabled) check/uncheck regardless.

Here is the code I tried to make work:

<template>
  <Tree v-model:selectionKeys="selectedTreeItems" :value="treeItems" selectionMode="checkbox" :pt="treeOpt"/>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type { TreeNode, TreePassThroughOptions, TreeProps, TreeSelectionKeys } from 'primevue/tree';

const dataList = [
  { key: 'grid', label: 'Grid', data: 'grid', selectable: true, disabled: true, children:
    [
      { key: 'grid1', label: 'Grid One', data: 'grid1', selectable: true, disabled: false},
      { key: 'grid2', label: 'Grid Two', data: 'grid2', selectable: true, disabled: false}
    ]
  },
  { key: 'biz', label: 'Biz', data: 'biz', selectable: false, disabled: true, children:
    [
      { key: 'biz1', label: 'Biz One', data: 'biz1', selectable: true, disabled: true},
      { key: 'biz2', label: 'Biz Two', data: 'biz2', selectable: true, disabled: true}
    ]
  }
]
const treeOpt: TreePassThroughOptions = {
  root: {class: 'text-xs p-0'},
  checkbox: ({ instance, state, global, context, props }) => {
    const myProps: any = props
    const node: TreeNode = myProps.node as TreeNode
    return {
      class: node.disabled ? 'p-disabled pointer-events-none' : undefined
    }
  }
}
const treeItems: Ref<TreeNode[]> = ref([...dataList])
const selectedTreeItems: Ref<TreeSelectionKeys | undefined> = ref();
</script>
0

There are 0 answers