Skip to content

Commit 42b35b9

Browse files
committed
Fix filtering docs - Show Code and data source
1 parent 550ed08 commit 42b35b9

File tree

3 files changed

+21
-4
lines changed

3 files changed

+21
-4
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@grapoza/vue-tree",
3-
"version": "5.2.1",
3+
"version": "5.2.2",
44
"description": "Tree components for Vue 3",
55
"author": "Gregg Rapoza <[email protected]>",
66
"license": "MIT",

src/stories/Examples.docs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ You can drag a node that has the `draggable` property in a node's `treeNodeSpec`
153153

154154
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.
155155

156-
<a target="_blank" href="assets_data/Filtering.js">See the Model Data</a>
156+
<a target="_blank" href="assets_data/filteringTreeViewData.js">See the Model Data</a>
157157

158158
<Canvas>
159159
<Story id="examples-treeview--filtering" />

src/stories/definitions/TreeView.Filtering.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,31 @@ Filtering.args = {
4848

4949
const docsSourceCode = `
5050
<template>
51-
<tree-view :initial-model="tvModel"></tree-view>
51+
<span>
52+
<tree-view :initial-model="tvModel" :filter-method="filterMethod"></tree-view>
53+
<section style="margin: 10px 0">
54+
<input v-model="filterText" type='text' id="filter" placeholder="Filter by label text" style="margin-right: 4px" /><button @click="applyFilter">Apply Filter</button>
55+
</section>
56+
</span>
5257
</template>
5358
<script setup>
5459
import { ref } from "vue";
5560
import { TreeView } from "@grapoza/vue-tree";
56-
import treeViewData from "../data/basicTreeViewData";
61+
import treeViewData from "../data/filteringTreeViewData";
5762
5863
const tvModel = ref(treeViewData);
64+
const filterText = ref("");
65+
const filterMethod = ref(null);
66+
67+
const applyFilter = () => {
68+
if (filterText.value === "") {
69+
filterMethod.value = null;
70+
}
71+
else {
72+
const lowercaseFilter = filterText.value.toLowerCase();
73+
filterMethod.value = (n) => n.label.toLowerCase().includes(lowercaseFilter);
74+
}
75+
}
5976
</script>`;
6077

6178
Filtering.parameters = {

0 commit comments

Comments
 (0)