Add drag behaviour to accordion

[stijns96]

Description

I think it would be very cool and helpful if the accordion items could have some drag functionality. I want my users to be able to add links to their account in a accordion form. They should be able to reorder it as well. Not sure if the accordion is the right component to add it or that it could be something on it's own. You might have different thoughts. See #825

Additional context

No response

[stijns96]

Anyone wondering how to make it work easily with vueuse, use UseSortable.

<script setup>
import { useSortable } from "@vueuse/integrations/useSortable";

const accordion = useTemplateRef("accordion");

const items = ref([
  {
    label: "Icons",
    icon: "i-lucide-smile",
    content: "You have nothing to do, @nuxt/icon will handle it automatically.",
  },
  {
    label: "Colors",
    icon: "i-lucide-swatch-book",
    content:
      "Choose a primary and a neutral color from your Tailwind CSS theme.",
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    content:
      "You can customize components by using the `class` / `ui` props or in your app.config.ts.",
  },
]);

useSortable(accordion, items, {
  animation: 150,
});
</script>

<template>
  <UPageCard variant="subtle" title="Links">
    <UFormField label="Socials">
      <UAccordion ref="accordion" :items="items" />
    </UFormField>
  </UPageCard>
</template>

@benjamincanac maybe nice to add some docs for this that this is even easily possible?

[benjamincanac]

We can definitely add this in the examples yes: https://ui.nuxt.com/components/accordion#examples

[benjamincanac]

@stijns96 Do you plan to open a PR for this?

[stijns96]

@stijns96 Do you plan to open a PR for this?

Sure!

[stijns96]

@benjamincanac

How to correctly contribute now a days? Is that from the V3 branch?

[HugoRCD]

@stijns96 Yes on v3! https://ui.nuxt.com/getting-started/contribution