add isCheckable

docs/components/CheckableItemSelection.vue

@@ -0,0 +1,50 @@
+<template>
+  <treeselect :multiple="true" :options="options" :value="value" />
+</template>
+
+<script>
+export default {
+  data: () => ({
+    options: [
+      {
+        id: "folder",
+        label: "Checkable Folder",
+        isCheckable: true,
+        children: [
+          {
+            id: "uncheckable-checked",
+            label: "Checked",
+            isCheckable: false,
+          },
+          {
+            id: "uncheckable-unchecked",
+            label: "Unchecked",
+            isCheckable: false,
+          },
+          {
+            id: "item-1",
+            label: "Item",
+            isCheckable: true,
+          },
+        ],
+      },
+      {
+        id: "uncheackable-folder",
+        label: "Uncheackable Folder",
+        isCheckable: false,
+        children: [
+          {
+            id: "item-2",
+            label: "Item",
+          },
+          {
+            id: "item-3",
+            label: "Item",
+          },
+        ],
+      },
+    ],
+    value: ["uncheckable-checked"],
+  }),
+};
+</script>

docs/components/DocNode.vue

@@ -49,6 +49,15 @@
             <a href="#disable-item-selection">here</a> for detailed information.
           </td>
         </tr>
+        <tr>
+          <td><strong>isChecakble</strong></td>
+          <td class="type">Boolean</td>
+          <td>
+            Used to make item checkable. See
+            <a href="#checkable-item-selection">here</a> for detailed
+            information.
+          </td>
+        </tr>
         <tr>
           <td><strong>isNew</strong></td>
           <td class="type">Boolean</td>

docs/partials/guides.pug

@@ -94,6 +94,11 @@
     Set `flattenSearchResults: true` to flatten the tree when searching. With this option set to `true`, only the results that match will be shown. With this set to `false` (default), its ancestors will also be displayed, even if they would not individually be included in the results.
   +demo('FlattenSearchResults')
 
++subsection('Checkable Item Selection')
+  :markdown-it
+    You can make item checkable by setting `isCheckable: true` on any leaf node or branch node.
+  +demo('CheckableItemSelection')
+
 +subsection('Disable Item Selection')
   :markdown-it
     You can disable item selection by setting `isDisabled: true` on any leaf node or branch node. For non-flat mode, setting on a branch node will disable all its descendants as well.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energiency/vue-treeselect",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.1",
   "description": "A multi-select component with nested options support for Vue.js",
   "author": "Energiency <[email protected]>",
   "license": "MIT",

src/components/Option.vue

@@ -76,6 +76,9 @@ const renderCheckboxContainer = (h, context, children) => {
   if (instance.disableBranchNodes && node.isBranch) {
     return null;
   }
+  if (!node.isCheckable) {
+    return null;
+  }
 
   return <div class="vue-treeselect__checkbox-container">{children}</div>;
 };

src/mixins/treeselectMixin.js

@@ -1687,6 +1687,7 @@ export default {
           const isDisabled =
             !!node.isDisabled ||
             (!this.flat && !isRootNode && parentNode.isDisabled);
+          const isCheckable = node.isCheckable ?? true;
           const isNew = !!node.isNew;
           const lowerCased = this.matchKeys.reduce(
             (prev, key) => ({
@@ -1717,6 +1718,7 @@ export default {
           this.$set(normalized, "lowerCased", lowerCased);
           this.$set(normalized, "nestedSearchLabel", nestedSearchLabel);
           this.$set(normalized, "isDisabled", isDisabled);
+          this.$set(normalized, "isCheckable", isCheckable);
           this.$set(normalized, "isNew", isNew);
           this.$set(normalized, "isMatched", false);
           this.$set(normalized, "isHighlighted", false);
@@ -1962,7 +1964,7 @@ export default {
     },
 
     select(node) {
-      if (this.disabled || node.isDisabled) {
+      if (this.disabled || node.isDisabled || !node.isCheckable) {
         return;
       }