Fix filtering docs - Show Code and data source

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 <[email protected]>",
   "license": "MIT",

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" />

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 = {