Layer Instance

Each call to openLayer() returns a LayerInstance object that can be used to manually control the layer.

LayerInstance

interface LayerInstance {
  /** Unique layer identifier */
  id: string

  /** Unique group identifier; undefined when no uniqueGroup is configured */
  uniqueGroup?: string

  /**
   * Teleport target CSS selector or `'body'`.
   * Empty string when `teleport` is an `HTMLElement` / `RendererNode`;
   * read `teleportKey` instead.
   */
  teleportTarget: string

  /**
   * Normalized Teleport key, stable across all teleport types
   * (CSS selector, HTMLElement, etc.), used for internal grouping and cleanup.
   */
  teleportKey: string

  /** Close the layer (only requests closing; beforeClose decides) */
  close: () => void

  /** Bring the layer to top */
  bringToTop: () => void

  /** Maximize the layer */
  maximize: () => void

  /** Minimize the layer to the dock */
  minimize: () => void

  /** Restore the layer size */
  restore: () => void

  /** Update mutable options */
  update: (options: Partial<Omit<LayerConfig, 'id' | 'uniqueGroup' | 'teleport'>>) => void

  /** Resolves with the close result after the leave animation */
  closed: Promise<LayerCloseResult>
}

Teleport metadata

teleportTarget is the user-facing string field: it carries the CSS selector or 'body' when teleport is a string, and is the empty string when teleport is an HTMLElement / RendererNode (a DOM node has no stable string form). To distinguish Teleport groups or track an instance's mount target, read the stable teleportKey — it is stable across all teleport types. When no uniqueGroup is configured, uniqueGroup is undefined.

Methods

close()

Close the layer. Triggers the leave animation; after the animation completes, the layer instance is automatically destroyed and DOM is cleaned up.

const instance = openLayer({ title: 'Layer' })

// Auto-close after 3 seconds
setTimeout(() => {
  instance?.close()
}, 3000)

Returns: void — the method returns no value. Await instance.closed for the final close result.

bringToTop()

Bring the layer to the top. Among all layers under the same Teleport parent, raises this layer's z-index to the highest.

instance?.bringToTop()

TIP

Clicking the layer window automatically triggers bring-to-top. You usually don't need to call this method manually.

maximize()

Maximize the layer. The layer will fill its container (body or custom teleport target).

instance?.maximize()

restore()

Restore the layer from maximized state to its default size and position. If the layer is minimized, it restores the state it had before minimization.

instance?.restore()

minimize()

Minimize a layer that allows minimization (min: true) to the bottom dock of its Teleport target. The window stays mounted and can be restored with restore() or its dock item.

const instance = openLayer({ title: 'Edit order', min: true })

instance?.minimize()

update()

Update mutable options through Vue's normal parent-to-child props path. id, uniqueGroup, and teleport are immutable after opening.

instance?.update({ title: 'Edit user (unsaved)', size: { width: '720px', height: '520px' } })

closed

Await the completed close result for Promise-style confirmation flows:

const instance = openLayer({ title: 'Confirm', closeOnOk: true })
const result = await instance?.closed
if (result?.action === 'ok') {
  // confirmed
}

action is close, ok, or cancel; reason identifies header, shade, escape, ok, cancel, or programmatic.

Usage Example

<script setup lang="ts">
import { ref } from 'vue'
import { useLiteLayer } from 'vue-lite-layer'
import MyContent from './MyContent.vue'

const { openLayer } = useLiteLayer()

// Save layer instance reference
const layerInstance = ref<ReturnType<typeof openLayer>>(null)

const handleOpen = () => {
  layerInstance.value = openLayer({
    title: 'Controllable Layer',
    content: MyContent,
    size: { width: '600px', height: '400px' },
  })
}

const handleMaximize = () => {
  layerInstance.value?.maximize()
}

const handleRestore = () => {
  layerInstance.value?.restore()
}

const handleClose = () => {
  layerInstance.value?.close()
  layerInstance.value = null
}
</script>

<template>
  <button @click="handleOpen">Open Layer</button>
  <button @click="handleMaximize">Maximize</button>
  <button @click="handleRestore">Restore</button>
  <button @click="handleClose">Close</button>
</template>

Unique Group

Use uniqueGroup to ensure only one layer can be open per group:

// First call: opens normally
const instance1 = openLayer({
  title: 'Settings',
  content: SettingsPanel,
  uniqueGroup: 'settings',
})

// Second call: returns null, won't open a duplicate
const instance2 = openLayer({
  title: 'Settings',
  content: SettingsPanel,
  uniqueGroup: 'settings',
})

console.log(instance2) // null