Composables
useRealtimeLockRoom
Bulk view of every lock tagged with a room.
useRealtimeLockRoom
Get a read-only overview of every lock tagged with a given room, without subscribing to each key individually. Pairs with useRealtimeLock's room option: any lock claimed with the same room string shows up here.
Usage
<script setup lang="ts">
interface Owner { name: string }
const { locks } = useRealtimeLockRoom('board:main')
function ownerName(cardId: string) {
return (locks.value[`card:${cardId}`]?.ownerInfo as Owner | undefined)?.name
}
</script>
<template>
<div v-for="cardId in cardIds" :key="cardId" class="flex items-center gap-2">
Card {{ cardId }}:
<UBadge v-if="locks[`card:${cardId}`]" color="warning" variant="subtle">
Locked by {{ ownerName(cardId) ?? 'someone' }}
</UBadge>
<UBadge v-else color="success" variant="subtle">Free</UBadge>
</div>
</template>
Type Signature
function useRealtimeLockRoom(room: string): UseRealtimeLockRoomReturn
Parameters
room
- Type:
string - Required: Yes
The same opaque group tag passed as the room option to useRealtimeLock. All locks claimed with that tag appear in this composable's locks.
Return Value
interface UseRealtimeLockRoomReturn {
locks: Readonly<Ref<LockRoomSnapshot>>
}
type LockRoomSnapshot = Record<string, { owner: string, ownerInfo?: unknown }>
locks
Current { [key]: { owner, ownerInfo } } for every lock tagged with this room. A key with no entry is unlocked:
const { locks } = useRealtimeLockRoom('board:main')
const lockedCount = computed(() => Object.keys(locks.value).length)
Examples
Locked Cards Overview on a Kanban Board
Show which cards are currently being edited across the whole board, without a per-card subscription:
KanbanBoard.vue
<script setup lang="ts">
const cards = useRealtimeState('board:main:cards', [])
const { locks } = useRealtimeLockRoom('board:main')
</script>
<template>
<div class="grid grid-cols-3 gap-4">
<UCard
v-for="card in cards"
:key="card.id"
:class="{ 'ring-2 ring-warning': locks[`card:${card.id}`] }"
>
<p>{{ card.title }}</p>
<UBadge v-if="locks[`card:${card.id}`]" color="warning" variant="subtle" size="sm">
{{ locks[`card:${card.id}`].ownerInfo?.name }} is editing
</UBadge>
</UCard>
</div>
</template>
Spreadsheet Cell Locks
Highlight cells currently locked by other users while editing a shared sheet:
Spreadsheet.vue
<script setup lang="ts">
interface Owner { name: string }
const { locks } = useRealtimeLockRoom('sheet:123')
function cellLockedBy(cellId: string) {
return locks.value[`cell:${cellId}`]?.ownerInfo as Owner | undefined
}
</script>
<template>
<td
v-for="cell in cells"
:key="cell.id"
:class="{ 'bg-yellow-100': cellLockedBy(cell.id) }"
:title="cellLockedBy(cell.id)?.name"
>
{{ cell.value }}
</td>
</template>