homemanager-fe/src/views/building/floors/StorageBubble.vue

49 lines
1.3 KiB
Vue
Raw Normal View History

2023-01-24 20:40:01 +00:00
<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>
2023-01-25 17:01:58 +00:00
<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')"
2023-01-26 16:15:59 +00:00
title="Move storage"
2023-01-25 17:01:58 +00:00
>
2023-01-26 16:15:59 +00:00
<span class="sr-only">Move storage</span>
2023-01-25 17:01:58 +00:00
<ArrowsPointingOutIcon class="h-4 w-4" />
</button>
2023-01-24 20:40:01 +00:00
</div>
</div>
</template>
<script setup lang="ts">
2023-01-25 17:01:58 +00:00
import { ArrowsPointingOutIcon } from '@heroicons/vue/24/outline';
import { StorageSharedType } from '../../../interfaces/storage.interfaces';
2023-01-24 20:40:01 +00:00
const props = defineProps<{
2023-01-25 17:01:58 +00:00
storage: StorageSharedType;
}>();
const emit = defineEmits<{
(e: 'startMoving'): void;
2023-01-24 20:40:01 +00:00
}>();
const getStoragePosition = (storage: any) => {
const locationSplit = storage.location
.split(',')
.map((int: string) => `${int}px`);
return {
left: locationSplit[0],
top: locationSplit[1],
};
};
</script>