v1.1.1

This release adds the #inventory scoped slot.

Display the inventory of placed components inside a details HTML element.
The slot exposes:

item : GridPlanItem
deleteItem: void
focusItem: void
isFocused: boolean

Usage:

<template #inventory="{ item, deleteItem, focusItem, isFocused }">
  <div :style="`display: flex; flex-direction:row; flex-wrap: wrap; border: 1px solid ${item.color};width: fit-content; padding: 6px 12px; gap:6px; ${isFocused ? 'background: #FFFFFF20' : ''}`">
    <span>{{ item.description }}</span>
    <span>x:{{ item.x }}</span>
    <span>y:{{ item.y }}</span>
    <span>h:{{ item.h }}</span>
    <span>w:{{ item.w }}</span>
    <button @click="deleteItem" class="bg-red-300 text-red-800 px-2 rounded">DELETE</button>
    <button @click="focusItem" class="bg-gray-300 text-[#1A1A1A] px-2 rounded">{{ isFocused ? 'UNFOCUS' : 'FOCUS' }}</button>
  </div>
</template>