haditha_ui/components/haditha/library-show/UTree.vue

61 lines
1.6 KiB
Vue
Raw Permalink Normal View History

2025-03-03 12:27:33 +00:00
<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>