38 lines
1.4 KiB
Vue
38 lines
1.4 KiB
Vue
<script setup>
|
|
import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
|
|
import Dragable from 'vuedraggable'
|
|
import Icon from '@/Components/Icon.vue'
|
|
|
|
const self = getCurrentInstance()
|
|
const { menus, edit, destroy } = defineProps({
|
|
menus: Array,
|
|
edit: Function,
|
|
destroy: Function,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Dragable
|
|
tag="ul"
|
|
:list="menus"
|
|
:group="{ name: 'g1' }"
|
|
item-key="name">
|
|
<template #item="{ element }">
|
|
<div class="flex flex-col space-y-1">
|
|
<div class="flex items-center space-x-2 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2">
|
|
<div class="flex items-center space-x-2 w-full">
|
|
<Icon :name="element.icon" />
|
|
<p class="uppercase">{{ element.name }}</p>
|
|
</div>
|
|
|
|
<div ref="container" class="flex-none flex items-center rounded-md space-x-1">
|
|
<Icon @click.prevent="edit(element)" name="edit" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
|
|
<Icon v-if="element.deleteable" @click.prevent="destroy(element)" name="trash" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
|
|
</div>
|
|
</div>
|
|
|
|
<Nested :menus="element.childs" :edit="edit" :destroy="destroy" class="ml-8" />
|
|
</div>
|
|
</template>
|
|
</Dragable>
|
|
</template> |