		@@ -56,5 +56,7 @@ declare module "grid-plan" {
		iconColor?: string
		inventoryTitle?: string
		nonSelectedOpacity?: number
		ordinatesType?: "alphabetic" \| "numeric"
		showCrosshair?: boolean
		showInventory?: boolean
		tooltipColor?: string
		@@ -61,0 +63,0 @@ useAccorionMenu?: boolean

package.json

		{
		"name": "grid-plan",
		"version": "1.1.0",
		"version": "1.1.1",
		"private": false,
		@@ -5,0 +5,0 @@ "type": "module",

README.md

		@@ -24,2 +24,3 @@ <p align="center">
		- slots to customize icons related to component types
		- slots to create your available components menu and your inventory

		@@ -178,3 +179,3 @@ ## Installation
		>
		<!-- Create your available types menu (target the .grid-plan-menu css class to style the menu container)-->
		<!-- Create your available types menu -->
		<template #availableType="{ availableType }">
		@@ -185,2 +186,19 @@ <!-- The click event is managed by the component, that will select the type to be used when adding a component to the blueprint -->

		<!-- 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) -->
		@@ -236,5 +254,7 @@ <template #componentIcon="{ placedItem, maxSize }">
		\| iconColor \| string \| "#1A1A1A" \| The text color when using the #componentText slot \|
		\| inventoryTitle \| string \| "Inventory" \| The text content of the inventory details summary element \|
		\| nonSelectedOpacity \| number \| 0.3 \| The opacity of non selected components when a component is selected \|
		\| ordinatesType \| "alphabetic" OR "numeric" \| "numeric" \| Display ordinate coordinates as letters or numbers \|
		\| showCrosshair \| boolean \| true \| Show crosshair when hovering available cells \|
		\| showInventory \| boolean \| true \| Show inventory of placed components inside a details HTML element \|
		\| tooltipColor \| string \| "#FFFFFF" \| The tooltip text color \|
		@@ -248,3 +268,3 @@ \| useAccordionMenu \| boolean \| true \| Display the menu inside a details HTML element \|
		Grid Plan does not ship css.
		To customize the styling of the menu, target the following css classes:
		To customize the styling of the menu and inventory, target the following css classes:

		@@ -258,2 +278,8 @@ ```css
		} /* If useAccordionMenu is true */
		.grid-plan-inventory {
		}
		.grid-plan-inventory__summary {
		}
		.grid-plan-inventory__body {
		}
		```
		@@ -260,0 +286,0 @@

dist/grid-plan.js

Sorry, the diff of this file is too big to display

grid-plan - npm Package Compare versions

Improved metrics