47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
class="custom-storage absolute z-10"
|
|
:style="getStoragePosition(storage)"
|
|
>
|
|
<div
|
|
class="absolute bottom-2 left-1/2 h-20 w-60 -translate-x-1/2 rounded-lg bg-white px-2 py-2 shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<div class="flex flex-col">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="absolute -bottom-2 left-1/2 h-0 w-0 -translate-x-1/2 border-x-8 border-t-[16px] border-x-transparent border-t-white"
|
|
></div>
|
|
<button
|
|
class="absolute left-1/2 bottom-0.5 -translate-x-1/2 rounded-full bg-gray-50 px-1 py-1 ring-1 ring-black ring-opacity-5"
|
|
@click.stop="emit('startMoving')"
|
|
>
|
|
<ArrowsPointingOutIcon class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ArrowsPointingOutIcon } from '@heroicons/vue/24/outline';
|
|
import { StorageSharedType } from '../../../interfaces/storage.interfaces';
|
|
|
|
const props = defineProps<{
|
|
storage: StorageSharedType;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'startMoving'): void;
|
|
}>();
|
|
|
|
const getStoragePosition = (storage: any) => {
|
|
const locationSplit = storage.location
|
|
.split(',')
|
|
.map((int: string) => `${int}px`);
|
|
return {
|
|
left: locationSplit[0],
|
|
top: locationSplit[1],
|
|
};
|
|
};
|
|
</script>
|