Overlastic

A create modal | dialog | popup promise deferred library

Unified Overlays are used to create callback methods for
components and also support declarative use of Vue, React, and other components.

Features

💫 Simplify the create message or dialog and call your UI as a promise
🧩 Integration and customization of existing component libraries
🦾 provide secure type prompts for each constructor
➿ Supports component inheritance of global application context

Packages

Devtools

Components created by Unified Overlays support Devtools for their corresponding frameworks (React, Vue).

Supported

React Developer Tools	Vue.js Devtools
✅^(holder)	✅^{(holder\|child-app)}

holder inserts a holder into the corresponding component, making it available in the virtual DOM.
child-app creates a separate application that can be recognized by devtools.

Why?

Creating Model classes repetitive and time-consuming. When reusing a component that uses a Model class, common fields such as reject, resolve, and visible need to be defined repeatedly. Additionally, controlling the Model process (clear data -> open model -> edit data -> onConfirm -> save data) can lead to a lot of redundant code, especially for frequently used components like an image selector.

Unified Overlays simplifies modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively.

Install

pnpm add @overlastic/vue
# Or React
pnpm add @overlastic/react

Usage

Use the useExtendOverlay Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React).

// In your Vue, React overlays component,
// use useExtendOverlay to obtain overlays metadata.
const { visible, resolve, reject } = useExtendOverlay({
  // The duration of the overlays duration prevents
  // the component from being destroyed too early.
  duration: 1000
})

Use defineOverlay|renderOverlay to convert to a callback (imperative) method.

const callback = defineOverlay(Component)
const result = await callback(props)

const result = renderOverlay(Component, props)

hairyf/overlastic