Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Accordion): emit open event with index #1559

Merged
merged 1 commit into from
Mar 25, 2024
Merged

feat(Accordion): emit open event with index #1559

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/runtime/components/elements/Accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</template>

<script lang="ts">
import { ref, computed, toRef, defineComponent } from 'vue'
import { ref, computed, toRef, defineComponent, watch } from 'vue'
import type { PropType } from 'vue'
import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
import UIcon from '../elements/Icon.vue'
Expand Down Expand Up @@ -108,12 +108,25 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
emits: ['open'],
setup (props, { emit }) {
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))

const uiButton = computed<typeof configButton>(() => configButton)

const buttonRefs = ref<{ open: boolean, close: (e: EventTarget) => {} }[]>([])

const openedStates = computed(() => buttonRefs.value.map(({ open }) => open))
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't read directly the button refs in the watcher, because old and new value were identical, I don't know the reason. I had to use this intermediary state to effectively detect the changes

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you use a function in the watcher? 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just passed the refs like this and the values were always equal

watch(buttonRefs, ...)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just an idea but what if you use watch(() => buttonRefs.value, ...)?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just tried, the exact same thing is happening. I wonder if this is not because the refs are still references to the dom and updated before the watcher's callback is ran, whereas the computed is only updated on the next tick

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That might be the case yes. I don't mind having a computed anyway.

watch(openedStates, (newValue, oldValue) => {
for (const index in newValue) {
const isOpenBefore = oldValue[index]
const isOpenAfter = newValue[index]

if (!isOpenBefore && isOpenAfter) {
emit('open', index)
}
}
}, { immediate: true })

function closeOthers (currentIndex: number, e: Event) {
if (!props.items[currentIndex].closeOthers && props.multiple) {
Expand Down
Loading