deleting unnecessary file
This commit is contained in:
Geriano
@@ -1,81 +0,0 @@
|
||||
<script>
|
||||
import { defineComponent, getCurrentInstance, h } from "vue"
|
||||
import Parent from './Parent.vue'
|
||||
import Child from './Child.vue'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
menus: Array,
|
||||
edit: Function,
|
||||
destroy: Function,
|
||||
up: Function,
|
||||
down: Function,
|
||||
left: Function,
|
||||
right: Function,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
menuOnDrag: null,
|
||||
}),
|
||||
|
||||
setup(props, attrs) {
|
||||
return props => {
|
||||
const self = getCurrentInstance()
|
||||
const { menus, edit, destroy, up, down, left, right } = props
|
||||
const drag = menu => self.menuOnDrag = menu
|
||||
const drop = drop => {
|
||||
const drag = self.menuOnDrag
|
||||
|
||||
if (!drag || !drop) {
|
||||
return
|
||||
}
|
||||
|
||||
if (drag.parent_id !== drop.parent_id) {
|
||||
return
|
||||
}
|
||||
|
||||
if (drag.position === drop.position) {
|
||||
return
|
||||
}
|
||||
|
||||
console.log(drag, drop)
|
||||
}
|
||||
|
||||
const generate = menu => {
|
||||
if (menu.childs?.length > 0) {
|
||||
return h(Parent, {
|
||||
...attrs,
|
||||
menu,
|
||||
edit,
|
||||
destroy,
|
||||
drag,
|
||||
drop,
|
||||
up,
|
||||
down,
|
||||
left,
|
||||
right,
|
||||
}, menu.childs.map(child => generate(child)))
|
||||
}
|
||||
|
||||
return h(Child, {
|
||||
...attrs,
|
||||
menu,
|
||||
edit,
|
||||
destroy,
|
||||
drag,
|
||||
drop,
|
||||
up,
|
||||
down,
|
||||
left,
|
||||
right,
|
||||
})
|
||||
}
|
||||
|
||||
return h('div', {
|
||||
...attrs,
|
||||
class: `flex flex-col space-y-1 ${attrs.class}`,
|
||||
}, menus.map(menu => generate(menu)))
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<script setup>
|
||||
import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
|
||||
import Icon from '@/Components/Icon.vue'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
|
||||
const self = getCurrentInstance()
|
||||
const { menu, edit, destroy, drag, drop } = defineProps({
|
||||
menu: Object,
|
||||
edit: Function,
|
||||
destroy: Function,
|
||||
drag: Function,
|
||||
drop: Function,
|
||||
up: Function,
|
||||
down: Function,
|
||||
left: Function,
|
||||
right: Function,
|
||||
})
|
||||
|
||||
const rounded = () => {
|
||||
const { container } = self.refs
|
||||
|
||||
container?.firstElementChild?.classList.add('rounded-l-md')
|
||||
container?.lastElementChild?.classList.add('rounded-r-md')
|
||||
}
|
||||
|
||||
onMounted(rounded)
|
||||
onUpdated(rounded)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2 transition-all" :draggable="true" :id="`menu:${menu.id}`">
|
||||
<div class="flex items-center space-x-2 w-full" :draggable="false">
|
||||
<Icon :name="menu.icon" :draggable="false" />
|
||||
<p class="uppercase" :draggable="false">{{ menu.name }}</p>
|
||||
</div>
|
||||
|
||||
<div ref="container" class="flex items-center flex-none rounded-md border dark:border-gray-800" :draggable="false">
|
||||
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,62 +0,0 @@
|
||||
<script setup>
|
||||
import { getCurrentInstance, nextTick, onMounted, onUpdated, ref } from 'vue'
|
||||
import Icon from '@/Components/Icon.vue'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
|
||||
const self = getCurrentInstance()
|
||||
const { menu, edit, destroy, drag, drop } = defineProps({
|
||||
menu: Object,
|
||||
edit: Function,
|
||||
destroy: Function,
|
||||
drag: Function,
|
||||
drop: Function,
|
||||
up: Function,
|
||||
down: Function,
|
||||
left: Function,
|
||||
right: Function,
|
||||
})
|
||||
const a = ref(true)
|
||||
const open = ref(false)
|
||||
|
||||
const rounded = () => {
|
||||
const { container } = self.refs
|
||||
|
||||
container?.firstElementChild?.classList.add('rounded-l-md')
|
||||
container?.lastElementChild?.classList.add('rounded-r-md')
|
||||
}
|
||||
|
||||
onMounted(rounded)
|
||||
onUpdated(rounded)
|
||||
|
||||
Inertia.on('finish', () => {
|
||||
a.value = false
|
||||
nextTick(() => a.value = true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col space-y-1" :id="`menu:${menu.id}`">
|
||||
<div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2 transition-all" :draggable="true">
|
||||
<div class="flex items-center space-x-2 w-full" :draggable="false">
|
||||
<Icon :name="menu.icon" :draggable="false" />
|
||||
<p class="uppercase" :draggable="false">{{ menu.name }}</p>
|
||||
</div>
|
||||
|
||||
<div ref="container" class="flex items-center flex-none" :draggable="false">
|
||||
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="open = ! open" :name="open ? 'minus' : 'plus'" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
|
||||
<Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="open" class="flex flex-col space-y-1 ml-8">
|
||||
<slot />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user