36 lines
904 B
Vue
36 lines
904 B
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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { StorageListItem } from '../../../interfaces/storage.interfaces';
|
|
|
|
const props = defineProps<{
|
|
storage: StorageListItem;
|
|
}>();
|
|
|
|
const getStoragePosition = (storage: any) => {
|
|
const locationSplit = storage.location
|
|
.split(',')
|
|
.map((int: string) => `${int}px`);
|
|
return {
|
|
left: locationSplit[0],
|
|
top: locationSplit[1],
|
|
};
|
|
};
|
|
</script>
|