v1.1.3

Technical release : remove local package

v1.1.2

Technical release, fixing build & package.json inaccuracies.

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>

v1.1.0

This release adds more configuration options:

1. Menu options: the following config attributes are added:

useAccordionMenu: boolean; // default: true
accordionMenuTitle: string; // default: "Menu" 

When useAccordionMenu is set to true, the menu is displayed with a details HTML element, which can be styled by targeting the following css classes:

.grid-plan-menu__summary{}
.grid-plan-menu__body{}

2. Opacity of non selected components, when a component is selected can now be managed through the following config attribute:

nonSelectedOpacity: number; // default: 0.3

v1.0.7

Improvements:

When selecting a placed component:

• other items appear with less opacity to gain in readability
• the description of the component is displayed under its coordinates

v1.0.6

Fixed some icons not showing.

v1.0.5

This release adds the @selectType event, which is triggered when selecting a menu item.
Use this event to style menu buttons accordingly.

This event returns a GridPlanItemType object:

 type GridPlanItemType = {
        typeId: string | number
        color?: string
        description: string
        icon?: string
        iconColor?: string
    }

v1.0.4

The menu can now be customized by targeting the following css class:

.grid-plan-menu

Grid Plan !

Grid plan is a Vue3 component to create blueprints for datacenters, racks, or any other kind of 2d space where inventory needs to be tracked.

npm i grid-plan

Features:

• Create your own component types that can be positioned and resized on your blueprint
• Custom blueprint sizing
• Config object to customize the looks of the component
• Events to track and act upon crud actions on the blueprint
• TS types

The documentation website is currently in development, but the package's README has you covered if you want to try it out :)