You've already forked AstralRinth
refactor: migrate to common eslint+prettier configs (#4168)
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
This commit is contained in:
@@ -1,70 +1,70 @@
|
||||
<template>
|
||||
<div class="accordion-wrapper" :class="{ 'has-content': hasContent }">
|
||||
<div class="accordion-content">
|
||||
<div>
|
||||
<div v-bind="$attrs" ref="slotContainer" class="content-container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-wrapper" :class="{ 'has-content': hasContent }">
|
||||
<div class="accordion-content">
|
||||
<div>
|
||||
<div v-bind="$attrs" ref="slotContainer" class="content-container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const slotContainer = ref();
|
||||
const slotContainer = ref()
|
||||
|
||||
const hasContent = ref(false);
|
||||
const hasContent = ref(false)
|
||||
|
||||
const mutationObserver = ref<MutationObserver | null>(null);
|
||||
const mutationObserver = ref<MutationObserver | null>(null)
|
||||
|
||||
function updateContent() {
|
||||
if (!slotContainer.value) return false;
|
||||
if (!slotContainer.value) return false
|
||||
|
||||
hasContent.value = slotContainer.value ? slotContainer.value.children.length > 0 : false;
|
||||
hasContent.value = slotContainer.value ? slotContainer.value.children.length > 0 : false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mutationObserver.value = new MutationObserver(updateContent);
|
||||
mutationObserver.value = new MutationObserver(updateContent)
|
||||
|
||||
mutationObserver.value.observe(slotContainer.value, {
|
||||
childList: true,
|
||||
});
|
||||
mutationObserver.value.observe(slotContainer.value, {
|
||||
childList: true,
|
||||
})
|
||||
|
||||
updateContent();
|
||||
});
|
||||
updateContent()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (mutationObserver.value) {
|
||||
mutationObserver.value.disconnect();
|
||||
}
|
||||
});
|
||||
if (mutationObserver.value) {
|
||||
mutationObserver.value.disconnect()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.accordion-content {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-in-out;
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.accordion-content {
|
||||
transition: none !important;
|
||||
}
|
||||
.accordion-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-content .accordion-content {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.accordion-content > div {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-wrapper.has-content {
|
||||
display: contents;
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user