<script setup> import { GridPlan } from "grid-plan"; </script>

<template> <GridPlan ref="plan" :availableTypes :config :placedItems @change="change" @delete="deleteItem" @select="selectItem" @created="createdItem" @unselect="unselected" @selectType="selectType" > <!-- A slot to do whatever you need before the component --> <template #before="{ items, deleteItem, focusItem, getFocusState, activeEntity }" > <div>ACTIVE ENTITY: {{ activeEntity }}</div> <div v-for="item in items"> {{ item.description }} <button @click="deleteItem(item)">DELETE</button> <button @click="focusItem(item)">DELETE</button> FOCUS STATE: {{ getFocusState(item) }} </div> </template> <!-- Create your available types menu --> <template #availableType="{ availableType }"> <!-- The click event is managed by the component, that will select the type to be used when adding a component to the blueprint --> <button>{{ availableType.description }}</button> </template> <!-- Create your inventory, which will be displayed inside a details element (target the .grid-plan-inventory css class to style) --> <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">DELETE</button> <button @click="focusItem"> {{ isFocused ? 'UNFOCUS' : 'FOCUS' }} </button> </div> </template> <!-- Use your own svg icons for component types (not necessary if the icon provided is part of the available icons) --> <template #componentIcon="{ placedItem, maxSize }"> <svg v-if="placedItem.description === 'server'" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round" :style="`width:${maxSize}px; position: absolute; transform: scale(0.8, 0.8)`" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" /> <path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" /> <path d="M7 8l0 .01" /> <path d="M7 16l0 .01" /> <path d="M11 8h6" /> <path d="M11 16h6" /> </svg> </template> <!-- Or use this slot to display a single letter or an icon font --> <template #componentText="{ placedItem }"> {{ placedItem.icon }} </template> <!-- A slot to do whatever you need after the component --> <template #after="{ items, deleteItem, focusItem, getFocusState, activeEntity }" > <div>ACTIVE ENTITY: {{ activeEntity }}</div> <div v-for="item in items"> {{ item.description }} <button @click="deleteItem(item)">DELETE</button> <button @click="focusItem(item)">DELETE</button> FOCUS STATE: {{ getFocusState(item) }} </div> </template> </GridPlan> </template>