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

182 lines
5.0 KiB
Vue
Raw Normal View History

2025-02-26 07:52:21 +00:00
<script setup>
const props = defineProps({
list: {
default() {
return [];
},
},
noDataText: {
default: "نتیجه‌ای یافت نشد!",
},
noDataIcon: {
2025-03-06 11:28:20 +00:00
default: "/img/haditha/no-data.png",
2025-02-26 07:52:21 +00:00
},
});
const items = [
{
label: "Parent 1",
content: "This is the content of Parent 1",
children: [
{
label: "Child 1.1",
content: "This is the content of Child 1.1",
},
{
label: "Child 1.2",
content: "This is the content of Child 1.2",
},
],
},
{
label: "Parent 2",
content: "This is the content of Parent 2",
children: [
{
label: "Child 2.1",
content: "This is the content of Child 2.1",
},
{
label: "Child 2.2",
content: "This is the content of Child 2.2",
},
],
},
];
2025-02-27 09:48:59 +00:00
function toggleAccordion(id, event) {
2025-02-26 07:52:21 +00:00
const content = document.getElementById(`content-${id}`);
const icon = document.getElementById(`icon-${id}`);
2025-02-27 09:48:59 +00:00
event.target.classList.toggle("active");
2025-02-26 07:52:21 +00:00
// Toggle visibility
content.classList.toggle("hidden");
// Rotate icon
2025-02-27 09:48:59 +00:00
icon.classList.toggle("active");
2025-02-26 07:52:21 +00:00
}
</script>
<template>
<div class="accordion-menu max-w-xl mx-auto p-4">
<!-- Parent Accordion Item 1 -->
2025-02-27 09:48:59 +00:00
<div class="accordion-menu-item mb-2">
2025-02-26 07:52:21 +00:00
<button
2025-02-27 09:48:59 +00:00
type="button"
class="w-full flex justify-start items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all delay-500 duration-300 ease-in-out"
@click.exact="toggleAccordion('parent1', $event)"
2025-02-26 07:52:21 +00:00
>
2025-02-27 09:48:59 +00:00
<div id="icon-parent1" class="icon-container">
<UIcon class="plus" name="i-lucide-plus"></UIcon>
<UIcon class="minus" name="i-lucide-minus"></UIcon>
</div>
<span>فصل اول</span>
2025-02-26 07:52:21 +00:00
</button>
<div
id="content-parent1"
2025-02-27 09:48:59 +00:00
class="mt-2 pe-4 hidden transition delay-500 duration-300 ease-in-out"
2025-02-26 07:52:21 +00:00
>
<!-- Child Accordion Item 1 -->
<div class="mb-2 transition delay-500 duration-300 ease-in-out">
<button
class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
2025-02-27 09:48:59 +00:00
@click.exact.prevent="toggleAccordion('child1', $event)"
2025-02-26 07:52:21 +00:00
>
2025-02-27 09:48:59 +00:00
<div id="icon-child1" class="icon-container">
<UIcon class="plus" name="i-lucide-plus"></UIcon>
<UIcon class="minus" name="i-lucide-minus"></UIcon>
</div>
2025-02-26 07:52:21 +00:00
<span>Child 1.1</span>
</button>
2025-02-27 09:48:59 +00:00
<div id="content-child1" class="mt-2 pe-4 hidden">
<!-- dadadad -->
<button
class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
@click.exact.prevent="toggleAccordion('child3', $event)"
>
<div id="icon-parent3" class="icon-container">
<UIcon class="plus" name="i-lucide-plus"></UIcon>
<UIcon class="minus" name="i-lucide-minus"></UIcon>
</div>
<span>Child 1.1</span>
</button>
<div id="content-child3" class="mt-2 pe-4 hidden">
<p class="p-3 bg-gray-50 rounded-lg">
This is the content of Child 1.1.
</p>
</div>
<!-- sdsadadasd -->
2025-02-26 07:52:21 +00:00
<p class="p-3 bg-gray-50 rounded-lg">
This is the content of Child 1.1.
</p>
</div>
</div>
<!-- Child Accordion Item 2 -->
<div class="mb-2 transition delay-500 duration-300 ease-in-out">
<button
class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
2025-02-27 09:48:59 +00:00
@click.exact.prevent="toggleAccordion('child2', $event)"
2025-02-26 07:52:21 +00:00
>
2025-02-27 09:48:59 +00:00
<div id="icon-child2" class="icon-container">
<UIcon class="plus" name="i-lucide-plus"></UIcon>
<UIcon class="minus" name="i-lucide-minus"></UIcon>
</div>
2025-02-26 07:52:21 +00:00
<span>Child 1.2</span>
</button>
2025-02-27 09:48:59 +00:00
<div id="content-child2" class="mt-2 pe-4 hidden">
2025-02-26 07:52:21 +00:00
<p class="p-3 bg-gray-50 rounded-lg">
This is the content of Child 1.2.
</p>
</div>
</div>
</div>
</div>
</div>
</template>
2025-02-27 09:48:59 +00:00
<style scoped>
.accordion-menu {
.accordion-menu-item {
font-family: IRANSansX;
font-weight: 400;
font-size: 13px;
line-height: 19.5px;
letter-spacing: 0%;
text-align: right;
color: var(--ui-color-two);
.icon-container {
.minus {
display: none;
}
.plus {
display: inline-block;
}
}
.icon-container {
&.active {
.plus {
display: none;
}
.minus {
display: inline-block;
}
}
}
button.active {
border: 0.3px solid #29d985;
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
button {
background: #f7fffd;
border: 0.3px solid #29d985;
}
}
}
}
</style>