-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
TaskTree.vue
37 lines (34 loc) · 1.02 KB
/
TaskTree.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script setup lang="ts">
import type { Task } from '#types'
import { caseInsensitiveMatch } from '~/utils/task'
defineOptions({ inheritAttrs: false })
const { task, indent = 0, nested = false, search, onItemClick } = defineProps<{
task: Task
indent?: number
nested?: boolean
search?: string
onItemClick?: (task: Task) => void
}>()
</script>
<template>
<!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword -->
<!-- v-if = keepStructure || (!search || caseInsensitiveMatch(task.name, search)) -->
<TaskItem
v-if="!search || caseInsensitiveMatch(task.name, search)"
v-bind="$attrs"
:task="task"
:style="{ paddingLeft: `${indent * 0.75 + 1}rem` }"
@click="onItemClick && onItemClick(task)"
/>
<div v-if="nested && task.type === 'suite' && task.tasks.length">
<TaskTree
v-for="suite in task.tasks"
:key="suite.id"
:task="suite"
:nested="nested"
:indent="indent + 1"
:search="search"
:on-item-click="onItemClick"
/>
</div>
</template>