61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
import { TreeItem, TreeRoot } from "reka-ui";
|
||
|
|
import { Icon } from "@iconify/vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
items: {
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<TreeRoot
|
||
|
|
v-slot="{ flattenItems }"
|
||
|
|
class="list-none select-none w-full text-stone-700 p-2 text-sm font-medium"
|
||
|
|
:items="items"
|
||
|
|
:get-key="(item) => item.title"
|
||
|
|
:default-expanded="['components']"
|
||
|
|
>
|
||
|
|
<!-- <h2 class="font-semibold text-sm text-stone-400 px-2 pt-1 pb-3">
|
||
|
|
Directory Structure
|
||
|
|
</h2> -->
|
||
|
|
<TreeItem
|
||
|
|
v-for="item in flattenItems"
|
||
|
|
v-slot="{ isExpanded }"
|
||
|
|
:key="item._id"
|
||
|
|
:style="{ 'margin-right': `${item.level - 0.7}rem` }"
|
||
|
|
v-bind="item.bind"
|
||
|
|
class="tree-item flex items-center py-1.5 px-3 mb-4 rounded-lg border-[#29D985] outline-none bg-[#F0F1F4] focus:ring-grass8 focus:ring-[#29d985]"
|
||
|
|
>
|
||
|
|
<template v-if="item.hasChildren">
|
||
|
|
<Icon v-if="!isExpanded" icon="lucide:plus" class="h-6 w-6" />
|
||
|
|
<Icon v-else icon="lucide:minus" class="h-6 w-6" />
|
||
|
|
</template>
|
||
|
|
<!-- <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-6 w-6" /> -->
|
||
|
|
<div class="pr-1">
|
||
|
|
{{ item.value.title }}
|
||
|
|
</div>
|
||
|
|
</TreeItem>
|
||
|
|
</TreeRoot>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tree-item[aria-expanded="true"] {
|
||
|
|
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
|
||
|
|
font-family: IRANSansX;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 19.5px;
|
||
|
|
letter-spacing: 0%;
|
||
|
|
text-align: right;
|
||
|
|
color: var(--ui-color-two);
|
||
|
|
|
||
|
|
/* &[data-expanded="true"] {
|
||
|
|
background-color: #f7fffd;
|
||
|
|
} */
|
||
|
|
}
|
||
|
|
</style>
|