homemanager-fe/src/views/building/floors/StorageBubble.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')"
        title="Move storage"
      >
        <span class="sr-only">Move storage</span>
        <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>