From db5d0fb66002d117700ac4473f831269769dd366 Mon Sep 17 00:00:00 2001
From: Gregg Rapoza <grapoza@gmail.com>
Date: Sun, 22 Oct 2023 14:49:24 -0400
Subject: [PATCH] Fix filtering docs - Show Code and data source

---
 package.json                                  |  2 +-
 src/stories/Examples.docs.mdx                 |  2 +-
 src/stories/definitions/TreeView.Filtering.js | 21 +++++++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2205bc04..9ab67df2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grapoza/vue-tree",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "Tree components for Vue 3",
   "author": "Gregg Rapoza <grapoza@gmail.com>",
   "license": "MIT",
diff --git a/src/stories/Examples.docs.mdx b/src/stories/Examples.docs.mdx
index e9db4ca5..ef985e11 100644
--- a/src/stories/Examples.docs.mdx
+++ b/src/stories/Examples.docs.mdx
@@ -153,7 +153,7 @@ You can drag a node that has the `draggable` property in a node's `treeNodeSpec`
 
 You can provide a method by which data should be filtered. Any node for which the method returns `true` or for which a subnode returns `true` will be included in the visual tree.
 
-<a target="_blank" href="assets_data/Filtering.js">See the Model Data</a>
+<a target="_blank" href="assets_data/filteringTreeViewData.js">See the Model Data</a>
 
 <Canvas>
 <Story id="examples-treeview--filtering" />
diff --git a/src/stories/definitions/TreeView.Filtering.js b/src/stories/definitions/TreeView.Filtering.js
index e611bab9..eae85a56 100644
--- a/src/stories/definitions/TreeView.Filtering.js
+++ b/src/stories/definitions/TreeView.Filtering.js
@@ -48,14 +48,31 @@ Filtering.args = {
 
 const docsSourceCode = `
 <template>
-  <tree-view :initial-model="tvModel"></tree-view>
+  <span>
+    <tree-view :initial-model="tvModel" :filter-method="filterMethod"></tree-view>
+    <section style="margin: 10px 0">
+      <input v-model="filterText" type='text' id="filter" placeholder="Filter by label text" style="margin-right: 4px" /><button @click="applyFilter">Apply Filter</button>
+    </section>
+  </span>
 </template>
 <script setup>
 import { ref } from "vue";
 import { TreeView } from "@grapoza/vue-tree";
-import treeViewData from "../data/basicTreeViewData";
+import treeViewData from "../data/filteringTreeViewData";
 
 const tvModel = ref(treeViewData);
+const filterText = ref("");
+const filterMethod = ref(null);
+
+const applyFilter = () => {
+  if (filterText.value === "") {
+    filterMethod.value = null;
+  }
+  else {
+    const lowercaseFilter = filterText.value.toLowerCase();
+    filterMethod.value = (n) => n.label.toLowerCase().includes(lowercaseFilter);
+  }
+}
 </script>`;
 
 Filtering.parameters = {