RoomGrid

Grid of room tiles colored by status (occupied, clean, dirty, blocked; extend with statusTones); onSelect fires with the room number. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

import { UiRoomGrid } from '@ziyarago/ui/vue'

Custom statuses (statusTones)

Vue

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'occupied' }, { no: '102', type: 'Twin', status: 'clean' }, { no: '103', type: 'Suite', status: 'maintenance' }, { no: '104', type: 'Double', status: 'inspected' }, { no: '105', type: 'Twin', status: 'unknown' }]"
  :status-tones="{ maintenance: 'danger', inspected: 'sky' }"
 />

Floor plan

Vue

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
 />

Sizes

Vue

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
  size="xs"
 />

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
  size="sm"
 />

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
  size="md"
 />

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
  size="lg"
 />

<UiRoomGrid
  :rooms="[{ no: '101', type: 'Double', status: 'clean' }, { no: '102', type: 'Twin', status: 'occupied' }, { no: '103', type: 'Suite', status: 'occupied' }, { no: '104', type: 'Double', status: 'dirty' }, { no: '201', type: 'Family', status: 'clean' }, { no: '202', type: 'Twin', status: 'blocked' }, { no: '203', type: 'Double', status: 'occupied' }, { no: '204', type: 'Suite', status: 'clean' }]"
  size="xl"
 />

API reference

Tile grid of rooms colored by housekeeping status; use for front-desk room selection.

Props

PropType and valuesDefaultDescription

rooms{ no: string; type: string; status: "occupied" | "clean" | "dirty" | "blocked" }[]'[]'Rooms; no is the room number and the unique key, type is the room class label, status sets the tile color (any other value renders neutral).

statusTonesRecord<string, 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'>'{ occupied: 'brand', clean: 'success', dirty: 'warning', blocked: 'danger' }'Maps a room status to a tile tone. Merged over the defaults, so you can add custom statuses (e.g. { maintenance: "sky" }) or recolor known ones. Statuses without a tone render neutral.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Events

Vue: @name. React: onName.

selectCalled with the room number (room.no) of the clicked tile.

Notes

Each tile is a button; status is conveyed by color only, so add a legend.