Map values between lists

Group of list example

With Fluid DnD you map values of elements between lists.
First, we’ll define a group of lists:

<script setup lang="ts">
...
const list = ref([
  { id: "1", value: "Carcu", is_visible: true },
  { id: "2", value: "Rodri", is_visible: true },
  { id: "3", value: "Mbappe", is_visible: true },
]);
const [ parent1 ] = useDragAndDrop<Item>(list, {
  droppableGroup: "group1"
});

const list2 = ref([
  { id: "11", label: "Cholo" },
  { id: "ab", label: "Popi" },
]);
const [ parent2 ] = useDragAndDrop<MinifiedItem>(list2, {
  droppableGroup: "group1"
});
</script>

Add mapFrom parameter

Add the mapFrom parameter to the useDragAndDrop to map values between the lists:

<script setup lang="ts">
...
const MapItemToMinifiedItem = (item:Item) => {
  return {
      id: item.id,
      label: item.value,
    }
}
const MapMinifiedItemToItem = (item:MinifiedItem) => {
  return {
      id: item.id,
      value: item.label,
      is_visible: true,
  }
}
const [ parent1 ] = useDragAndDrop<Item>(list, {
  ...
  mapFrom : (item:Item) => {
    return MapItemToMinifiedItem(item)
  },
});
const [ parent2 ] = useDragAndDrop<MinifiedItem>(list2, {
  ...
  mapFrom : (item:MinifiedItem) => {
    return MapMinifiedItemToItem(item)
  },
});
</script>

Preview

• Carcu - true
• Rodri - true
• Mbappe - true

• Cholo
• Popi