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