64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
icon: String,
|
|
title: String,
|
|
description: String,
|
|
});
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['dragstart']);
|
|
|
|
/** Referencias */
|
|
const isDragging = ref(false);
|
|
|
|
/** Métodos */
|
|
const handleDragStart = (event) => {
|
|
isDragging.value = true;
|
|
event.dataTransfer.setData('text/plain', JSON.stringify({
|
|
type: props.type,
|
|
title: props.title
|
|
}));
|
|
emit('dragstart', props.type);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
isDragging.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
draggable="true"
|
|
@dragstart="handleDragStart"
|
|
@dragend="handleDragEnd"
|
|
class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors"
|
|
:class="{
|
|
'opacity-50 cursor-grabbing': isDragging,
|
|
'shadow-sm hover:shadow-md': !isDragging
|
|
}"
|
|
>
|
|
<div class="flex-shrink-0 w-6 h-6 sm:w-8 sm:h-8 rounded-md bg-blue-100 flex items-center justify-center">
|
|
<GoogleIcon
|
|
:name="icon"
|
|
class="text-blue-600 text-sm sm:text-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs sm:text-sm font-medium text-gray-900">
|
|
{{ title }}
|
|
</div>
|
|
<div class="text-xs text-gray-500 truncate hidden sm:block">
|
|
{{ description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |