Horizontal collapse support

[Velka-DEV]

Description

I believe we should be able to collapse elements from left to right and invert them using the UCollapsible component.

Additional context

No response

[huongphamx]

Can you show some examples from other UI lib which support that?

[Velka-DEV]

I'm not sure if I know any library that supports that, actually. But, for example, we used the UCollapsible component to make our sidebar toggleable.

<UCollapsible v-else v-model:open="sidebarOpen" :ui="{
    'content' : 'data-[state=open]:animate-[collapsible-right_200ms_ease-out] data-[state=closed]:animate-[collapsible-left_200ms_ease-out] overflow-hidden'
  }">
    <template #content>
      <SidebarContent @toggle-sidebar="sidebarOpen = !sidebarOpen" />
    </template>
</UCollapsible>

How would you achieve this without using UCollapsible?

I think a orientation props would be really easy to implement while having a great value.