feat: add filter node by text
This commit is contained in:
Methapon Metanipat
parent
f01e3d4ca9
commit
35c8a0ffb3
2 changed files with 197 additions and 170 deletions
|
|
@ -39,6 +39,7 @@ type Props = {
|
|||
|
||||
const props = defineProps<Props>();
|
||||
const nodes = defineModel<Node[]>('nodes', { required: true });
|
||||
const filterText = defineModel<string>('filterText', { required: false });
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'checked'): void;
|
||||
|
|
@ -91,6 +92,25 @@ function toggleExpand(node: Node, ancestor?: []) {
|
|||
node.opened = !node.opened;
|
||||
emits('open', node, ancestor);
|
||||
}
|
||||
|
||||
function filterNode(text: string, node: Node, ancestor?: Node[]) {
|
||||
if (!text) return;
|
||||
|
||||
const getTitle = (n: Node): string => n[props.keyTitle || 'title'];
|
||||
const getSubtitle = (n: Node): string => n[props.keySubtitle || 'subtitle'];
|
||||
const recursiveFilter = (n: Node): boolean => {
|
||||
if (!n.children) {
|
||||
return getTitle(n).includes(text) || getSubtitle(n).includes(text);
|
||||
}
|
||||
return n.children.some((v) => recursiveFilter(v));
|
||||
};
|
||||
|
||||
return (
|
||||
ancestor?.some(
|
||||
(v) => getTitle(v).includes(text) || getSubtitle(v).includes(text),
|
||||
) || recursiveFilter(node)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -101,189 +121,195 @@ function toggleExpand(node: Node, ancestor?: []) {
|
|||
'last-children': level && level === maxLevel,
|
||||
}"
|
||||
>
|
||||
<div v-for="(node, i) in nodes" class="tree-item" :key="i">
|
||||
<slot
|
||||
v-if="$slots['item']"
|
||||
name="item"
|
||||
:data="{ node, toggleExpand, toggleCheck }"
|
||||
/>
|
||||
<template v-for="(node, i) in nodes" :key="i">
|
||||
<div
|
||||
class="tree-item"
|
||||
v-if="filterText ? filterNode(filterText, node, ancestorNode) : true"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots['item']"
|
||||
name="item"
|
||||
:data="{ node, toggleExpand, toggleCheck }"
|
||||
/>
|
||||
|
||||
<div class="row items-center" v-else>
|
||||
<div v-if="!level && movable" style="width: var(--size-16)">
|
||||
<q-btn
|
||||
id="btn-up"
|
||||
for="btn-up"
|
||||
icon="mdi-arrow-up"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="i === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveUp', node)"
|
||||
/>
|
||||
<q-btn
|
||||
id="btn-down"
|
||||
for="btn-down"
|
||||
icon="mdi-arrow-down"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="i === nodes.length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveDown', node)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="item__content row items-center no-wrap col"
|
||||
:class="{ active: selectedNode?.includes(node) }"
|
||||
@click="
|
||||
() => (selectable ? $emit('select', node) : toggleExpand(node))
|
||||
"
|
||||
>
|
||||
<div style="width: var(--size-6); margin-right: var(--size-1)">
|
||||
<div
|
||||
v-if="level !== maxLevel"
|
||||
class="q-mr-md"
|
||||
:style="`color: ${
|
||||
!node.displayDropIcon &&
|
||||
(!node.children || node.children.length === 0)
|
||||
? 'transparent'
|
||||
: $q.dark.isActive
|
||||
? 'var(--gray-7)'
|
||||
: 'var(--gray-4)'
|
||||
}`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-chevron-down-circle"
|
||||
size="sm"
|
||||
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
|
||||
@click.stop="
|
||||
<div class="row items-center" v-else>
|
||||
<div v-if="!level && movable" style="width: var(--size-16)">
|
||||
<q-btn
|
||||
id="btn-up"
|
||||
for="btn-up"
|
||||
icon="mdi-arrow-up"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="i === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveUp', node)"
|
||||
/>
|
||||
<q-btn
|
||||
id="btn-down"
|
||||
for="btn-down"
|
||||
icon="mdi-arrow-down"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="i === nodes.length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveDown', node)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="item__content row items-center no-wrap col"
|
||||
:class="{ active: selectedNode?.includes(node) }"
|
||||
@click="
|
||||
() => (selectable ? $emit('select', node) : toggleExpand(node))
|
||||
"
|
||||
>
|
||||
<div style="width: var(--size-6); margin-right: var(--size-1)">
|
||||
<div
|
||||
v-if="level !== maxLevel"
|
||||
class="q-mr-md"
|
||||
:style="`color: ${
|
||||
!node.displayDropIcon &&
|
||||
(!node.children || node.children.length === 0)
|
||||
? $emit('select', node)
|
||||
: toggleExpand(node)
|
||||
"
|
||||
/>
|
||||
? 'transparent'
|
||||
: $q.dark.isActive
|
||||
? 'var(--gray-7)'
|
||||
: 'var(--gray-4)'
|
||||
}`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-chevron-down-circle"
|
||||
size="sm"
|
||||
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
|
||||
@click.stop="
|
||||
!node.displayDropIcon &&
|
||||
(!node.children || node.children.length === 0)
|
||||
? $emit('select', node)
|
||||
: toggleExpand(node)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
v-if="!hideCheckBox"
|
||||
class="flex items-center item__checkbox"
|
||||
@click.stop
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="node.checked"
|
||||
:indeterminate="
|
||||
node.children?.some((v) => !v.checked) &&
|
||||
!node.children?.every((v) => !v.checked)
|
||||
"
|
||||
:style="`accent-color: var(--blue-7)`"
|
||||
@click="toggleCheck(node)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="item__icon flex items-center justify-center"
|
||||
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
|
||||
<label
|
||||
v-if="!hideCheckBox"
|
||||
class="flex items-center item__checkbox"
|
||||
@click.stop
|
||||
>
|
||||
<Icon
|
||||
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
|
||||
:icon="node.icon || dec.icon"
|
||||
class="full-width full-height"
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="node.checked"
|
||||
:indeterminate="
|
||||
node.children?.some((v) => !v.checked) &&
|
||||
!node.children?.every((v) => !v.checked)
|
||||
"
|
||||
:style="`accent-color: var(--blue-7)`"
|
||||
@click="toggleCheck(node)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="item__icon flex items-center justify-center"
|
||||
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
|
||||
>
|
||||
<Icon
|
||||
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
|
||||
:icon="node.icon || dec.icon"
|
||||
class="full-width full-height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<span class="item__title">
|
||||
{{ node[keyTitle || 'title'] || 'No Title' }}
|
||||
</span>
|
||||
<span class="item__subtitle">
|
||||
{{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="item__title">
|
||||
{{ node[keyTitle || 'title'] || 'No Title' }}
|
||||
</span>
|
||||
<span class="item__subtitle">
|
||||
{{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DeleteButton
|
||||
v-if="deleteable"
|
||||
class="q-ml-auto"
|
||||
icon-only
|
||||
@click.stop="$emit('delete', node)"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="deleteable"
|
||||
class="q-ml-auto"
|
||||
icon-only
|
||||
@click.stop="$emit('delete', node)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="slide">
|
||||
<div
|
||||
v-if="node.opened && node.children && node.children.length > 0"
|
||||
:class="{ 'q-pl-xl': movable }"
|
||||
class="tree-children"
|
||||
>
|
||||
<TreeView
|
||||
:iconSize
|
||||
:hideCheckBox
|
||||
:selectable
|
||||
:selectedNode
|
||||
:deleteable="deleteableDeep"
|
||||
class="item__children"
|
||||
v-if="node.children"
|
||||
v-model:nodes="node.children"
|
||||
@open="
|
||||
(n) => {
|
||||
$emit(
|
||||
'open',
|
||||
n,
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node],
|
||||
);
|
||||
}
|
||||
"
|
||||
@checked="
|
||||
() => {
|
||||
node.checked = true;
|
||||
$emit('checked');
|
||||
}
|
||||
"
|
||||
@unchecked="
|
||||
() => {
|
||||
if (node.children?.every((v) => v.checked === false)) {
|
||||
node.checked = false;
|
||||
<transition name="slide">
|
||||
<div
|
||||
v-if="node.opened && node.children && node.children.length > 0"
|
||||
:class="{ 'q-pl-xl': movable }"
|
||||
class="tree-children"
|
||||
>
|
||||
<TreeView
|
||||
:iconSize
|
||||
:hideCheckBox
|
||||
:selectable
|
||||
:selectedNode
|
||||
:filterText
|
||||
:deleteable="deleteableDeep"
|
||||
class="item__children"
|
||||
v-if="node.children"
|
||||
v-model:nodes="node.children"
|
||||
@open="
|
||||
(n) => {
|
||||
$emit(
|
||||
'open',
|
||||
n,
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node],
|
||||
);
|
||||
}
|
||||
$emit('checked');
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(v) =>
|
||||
$emit(
|
||||
'select',
|
||||
v,
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node],
|
||||
)
|
||||
"
|
||||
:level="(level || 0) + 1"
|
||||
:ancestorNode="
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node]
|
||||
"
|
||||
:expandable
|
||||
:decoration
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
|
||||
</div>
|
||||
"
|
||||
@checked="
|
||||
() => {
|
||||
node.checked = true;
|
||||
$emit('checked');
|
||||
}
|
||||
"
|
||||
@unchecked="
|
||||
() => {
|
||||
if (node.children?.every((v) => v.checked === false)) {
|
||||
node.checked = false;
|
||||
}
|
||||
$emit('checked');
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(v) =>
|
||||
$emit(
|
||||
'select',
|
||||
v,
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node],
|
||||
)
|
||||
"
|
||||
:level="(level || 0) + 1"
|
||||
:ancestorNode="
|
||||
!props.ancestorNode || props.ancestorNode.length === 0
|
||||
? [node]
|
||||
: [...props.ancestorNode, node]
|
||||
"
|
||||
:expandable
|
||||
:decoration
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -540,6 +540,7 @@ watch(
|
|||
movable
|
||||
deleteable
|
||||
selectable
|
||||
:filter-text="inputSearch"
|
||||
:selected-node="selectedNode"
|
||||
@move-up="(node) => toggleMove(node, 'up')"
|
||||
@move-down="(node) => toggleMove(node, 'down')"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue