openpencil/packages/docs/programmable/sdk/api/advanced/use-variables-dialog-state.md
2026-03-30 15:17:30 +03:00

31 lines
791 B
Markdown

---
title: useVariablesDialogState
description: Manage variables dialog editing state on top of useVariables().
---
# useVariablesDialogState
`useVariablesDialogState()` builds on `useVariables()` and adds dialog-specific editing state for collection renaming and focus management.
Use it when you are building a custom variables dialog rather than only consuming the combined `useVariablesEditor()` helper.
## Usage
```ts
import { useVariablesDialogState } from '@open-pencil/vue'
const variablesDialog = useVariablesDialogState()
```
## Adds to useVariables()
- `editingCollectionId`
- `setCollectionInputRef()`
- `startRenameCollection()`
- `commitRenameCollection()`
## Related APIs
- [useVariables](./use-variables)
- [useVariablesEditor](../composables/use-variables-editor)