ui-thing icon indicating copy to clipboard operation
ui-thing copied to clipboard

How to call the expand and collapse methods of SplitterPanel?

Open mirari opened this issue 3 months ago • 4 comments

I have tried to rewrite UiSplitterPanel like this, with useForwardExpose:

<script lang="ts" setup>
import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'radix-vue'
import type { SplitterPanelEmits, SplitterPanelProps } from 'radix-vue'

const props = withDefaults(defineProps<SplitterPanelProps>(), {})

const emit = defineEmits<SplitterPanelEmits>()

const forwarded = useForwardPropsEmits(props, emit)

const { forwardRef } = useForwardExpose()
</script>

<template>
  <SplitterPanel
    v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"
    v-bind="forwarded"
    :ref="forwardRef"
  >
    <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />
  </SplitterPanel>
</template>

I do get the SplitterPanel object, but it doesn't have these two methods. But when I try to get the SplitterPanel directly with a fixed ref, it is possible to see both methods.

mirari avatar Mar 22 '24 12:03 mirari