Draggable ​

<script setup lang="ts">
import { ref } from 'vue';
import { Draggable, DraggableItem } from '@youcan/ui-vue3';
import type { DraggableItemType } from '@youcan/ui-vue3/dist/types/components/Draggable/types';

const items = ref<DraggableItemType[]>([
  {
    label: 'Navbar',
    value: 1,
  },
  {
    label: 'Hero',
    value: 2,
  },
  {
    label: 'Featured Products',
    value: 3,
  },
]);
</script>

<template>
  <Draggable v-model="items">
    <DraggableItem
      v-for="(item, index) in items"
      :key="item.value as number"
      v-model="items[index]"
    />
  </Draggable>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DraggableItem } from '@youcan/ui-vue3';
import type { DraggableItemType } from '@youcan/ui-vue3/dist/types/components/Draggable/types';

const item = ref<DraggableItemType>({
  label: 'Do the dishes 🧽',
  value: 1,
  checked: false,
});
</script>

<template>
  <DraggableItem v-model="item" :can-check="true" />
</template>