Build Output
| File | Content |
|---|---|
| generated/index.md | Directive Group Index |
| generated/groups/ | One per group (package entry, vFocus, vClickOutside, vRipple, etc.) |
| generated/manifest.json | Sync time and file list |
Run in the root directory bun run sync-veltra-directives or bun run sync-skills to regenerate generated/。
Directive Quick Reference
vFocus
Focus on mount: can be used directly on <input> , or used on a container and the directive will look for it internally input。
<input v-focus />
<div v-focus>
<input />
</div>
vClickOutside
Trigger the callback on press and click outside the element (commonly used to close overlays).
<div v-click-outside="handleClose">...</div>
function handleClose() {
open.value = false
}
vRipple
- Enabled by default:
<button v-ripple> - Disabled:
<button v-ripple="false"> - Custom animation duration (milliseconds, directive arg):
<button v-ripple:300> - Custom ripple element class name:
<button v-ripple="'my-ripple-class'">
Registration Method
Global: In consuming projects, typically use the full import method from the root directory README.md :import { UltraUI } from 'ultra-ui/install' then app.use(UltraUI), which registers components and bundled directives (including the above three). When inlining @veltra/desktop within a monorepo, the installation entry used by the current application takes precedence.
On-demand：
import { vFocus, vClickOutside, vRipple } from '@veltra/directives'
app.directive('focus', vFocus)
app.directive('click-outside', vClickOutside)
app.directive('ripple', vRipple)
(in templates, v-focus corresponds to the registered name focus, and so on.)
Style Dependencies
vRipple depends on ripple styles, which need to be imported separately for on-demand builds:
import '@veltra/directives/ripple/style'
Otherwise the ripple has no visual style; when using the UltraUI full installation and full styles have been imported, the ripple style chain is generally already included.