open-index/open-npm huggingface dataset:
npm package: @overlastic/react
Description: <p align="center">   <a href="https://overlastic.vercel.app/" target="blank">     <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />   </a> </p>
Latest version: 0.8.7

<p align="center">
  <a href="https://overlastic.vercel.app/" target="blank">
    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
  </a>
</p>

<p align="center">
 A create modal | dialog | popup promise deferred library
</p>

<p align="center">
  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/v/@overlastic/react.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/l/@overlastic/react.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/dm/@overlastic/react.svg" alt="NPM Downloads" /></a>
</p>

## Description

Create messages or dialog overlays using Overlastic in React APP.

## Installation

```bash
$ npm install --save @overlastic/react
```

## Quick Start

[Overview & Tutorial](https://overlastic.vercel.app/react/)
npm package: @overlastic/svelte
Description: <p align="center">   <a href="https://overlastic.vercel.app/" target="blank">     <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />   </a> </p>
Latest version: 0.8.7

<p align="center">
  <a href="https://overlastic.vercel.app/" target="blank">
    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
  </a>
</p>

<p align="center">
 A create modal | dialog | popup promise deferred library
</p>

<p align="center">
  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/v/@overlastic/svelte.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/l/@overlastic/svelte.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/dm/@overlastic/svelte.svg" alt="NPM Downloads" /></a>
</p>

## Description

Create messages or dialog overlays using Overlastic in Svelte APP.

## Installation

```bash
$ npm install --save @overlastic/svelte
```

## Quick Start

[Overview & Tutorial](https://overlastic.vercel.app/svelte/)
npm package: @overlastic/vanilla
Description: <p align="center">   <a href="https://overlastic.vercel.app/" target="blank">     <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />   </a> </p>
Latest version: 0.8.7

<p align="center">
  <a href="https://overlastic.vercel.app/" target="blank">
    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
  </a>
</p>

<p align="center">
 A create modal | dialog | popup promise deferred library
</p>

<p align="center">
  <a href="https://www.npmjs.com/@overlastic/core"><img src="https://img.shields.io/npm/v/@overlastic/core.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/@overlastic/core"><img src="https://img.shields.io/npm/l/@overlastic/core.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/@overlastic/core"><img src="https://img.shields.io/npm/dm/@overlastic/core.svg" alt="NPM Downloads" /></a>
</p>

## Description

Create messages or dialog overlays using Overlastic in native HTML.

## Installation

```bash
$ npm install --save @overlastic/vanilla
```

## Quick Start

[Overview & Tutorial](https://overlastic.vercel.app/vanilla/)
npm package: @overlastic/vue
Description: <p align="center">   <a href="https://overlastic.vercel.app/" target="blank">     <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />   </a> </p>
Latest version: 0.8.7

<p align="center">
  <a href="https://overlastic.vercel.app/" target="blank">
    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
  </a>
</p>

<p align="center">
 A create modal | dialog | popup promise deferred library
</p>

<p align="center">
  <a href="https://www.npmjs.com/@overlastic/vue"><img src="https://img.shields.io/npm/v/@overlastic/vue.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/@overlastic/vue"><img src="https://img.shields.io/npm/l/@overlastic/vue.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/@overlastic/vue"><img src="https://img.shields.io/npm/dm/@overlastic/vue.svg" alt="NPM Downloads" /></a>
</p>

## Description

Create messages or dialog overlays using Overlastic in Vue APP.

## Installation

```bash
$ npm install --save @overlastic/vue
```

## Quick Start

[Overview & Tutorial](https://overlastic.vercel.app/vue/)
npm package: @overlastic/vue2
Description: <p align="center">   <a href="https://overlastic.vercel.app/" target="blank">     <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />   </a> </p>
Latest version: 0.8.7

<p align="center">
  <a href="https://overlastic.vercel.app/" target="blank">
    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
  </a>
</p>

<p align="center">
 A create modal | dialog | popup promise deferred library
</p>

<p align="center">
  <a href="https://www.npmjs.com/@overlastic/vue2"><img src="https://img.shields.io/npm/v/@overlastic/vue2.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/@overlastic/vue2"><img src="https://img.shields.io/npm/l/@overlastic/vue2.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/@overlastic/vue2"><img src="https://img.shields.io/npm/dm/@overlastic/vue2.svg" alt="NPM Downloads" /></a>
</p>

## Description

Create messages or dialog overlays using Overlastic in Vue2 APP.

## Installation

```bash
$ npm install --save @overlastic/vue2
```

## Quick Start

[Overview & Tutorial](https://overlastic.vercel.app/vue/vue2)
npm package: @overlay-stack/tooltip
Description: A smart, edge-aware React Tooltip component that automatically selects the best placement (top, bottom, left, right) to prevent clipping against the viewport, supporting any custom React component as its content.
Author: Oleksandr Brudnovskyi
Latest version: 0.0.23

# 📦 @overlay-stack/tooltip

A **smart, generic React Tooltip component** designed to solve common issues
with z-index, viewport clipping, and component customization.

**No more tooltips cut off by the screen edge or stuck behind overlapping
elements!**

---

## ✨ Features

- **Smart Placement**: Automatically calculates the optimal side (top, bottom,
  left, right) to display the tooltip, ensuring it remains fully visible within
  the viewport bounds.

- **Edge-Awareness**: Intelligently checks for room around the target element to
  avoid clipping against the browser window and nearby elements, dynamically
  choosing the best spot.

- **Generic Content**: The tooltip body can be any valid React component or JSX,
  allowing for full customization of styles, content, and interactivity.

---

## 🚀 Installation

Install the package using npm or yarn:

```bash
npm install @overlay-stack/tooltip
# or
yarn add @overlay-stack/tooltip
```

## 📖 Usage Basic Example

```javascript
import { Tooltip } from "@overlay-stack/tooltip";

<Tooltip>
  <Tooltip.Trigger>
    Hover to View Popover
  </Tooltip.Trigger>
  <Tooltip.Content>
    Some magic text.
  </Tooltip.Content>
</Tooltip>
```

```javascript
import { Tooltip } from "@overlay-stack/tooltip";

<Tooltip>
  <Tooltip.Trigger className="trigger">
    <span>Hover to View Popover</span>
  </Tooltip.Trigger>
  <Tooltip.Content className="content">
    <ul>
      <li>text</li>
      <li>text</li>
      <li>text</li>
    </ul>
  </Tooltip.Content>
</Tooltip>
```
npm package: @overlayed-app/common-ext-tests
Description: common extension tests for an overlayed app extension
Author: Ben Greenier
Latest version: 1.0.1

# common-ext-tests
[![Build Status](https://travis-ci.org/overlayed-app/common-ext-tests.svg?branch=master)](https://travis-ci.org/overlayed-app/common-ext-tests)

Common extension tests for overlayed app extensions.

## Why

There are some tests that all extensions should run to ensure that overlayed will be able to properly handle the extension. This module provides an easy way to include those tests in an extension project's `jest` tests.

## How

`npm i @overlayed-app/common-ext-tests`

Then, in code (if `js`):

```
const includeCommonTests = require('@overlayed-app/common-ext-tests')

// include the common tests
includeCommonTests(`${__dirname}/fixture`)
```

or (if `ts`):

```
import includeCommonTests from '@overlayed-app/common-ext-tests'

// include the common tests
includeCommonTests(`${__dirname}/fixture`)
```

## Contributing

+ To build `npm run build`.
+ To publish `npm run publish`.
+ To test `npm test`.

## License

MIT
npm package: @overlayed-app/contributes-form
Description: Form for contributes providers
Author: Ben Greenier
Latest version: 1.2.1

# contributes-form

[![Build Status](https://travis-ci.org/overlayed-app/contributes-form.svg?branch=master)](https://travis-ci.org/overlayed-app/contributes-form)
[![Coverage Status](https://coveralls.io/repos/github/overlayed-app/contributes-form/badge.svg?branch=master)](https://coveralls.io/github/overlayed-app/contributes-form?branch=master)

Form for contributes providers ✔️ 

## Why

We need a configuration component that works with [contributes](https://github.com/overlayed-app/contributes) settings. This is that component.

## How

`npm i @overlayed-app/contributes-form`

Then in code (if `jsx`):

```
const ContributesForm = require('@overlayed-app/contributes-form')

// use it as a react component
<ContributesForm sources={['test/package.json']} />

```

or (if `tsx`):

```
import ContributesForm from '@overlayed-app/contributes-form'

// use it as a react component
<ContributesForm sources={['test/package.json']} />
```

## API

The default module exports the react component. The options are as follows:

+ `sources` - an array of paths to json files containing contributes objects
+ `rawSources` - an optional array of contributes object literals
+ `data` - an optional data object, containing existing setting data
+ `completed` - an optional [callback](https://github.com/mozilla-services/react-jsonschema-form#form-submission) that's given the changed setting data

Uses [mozilla-services/react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) under the hood.

## Contributing

+ To build `npm run build`.
+ To publish `npm run publish`.
+ To test `npm test`.

## Authors

Ben Greenier - Initial work - [bengreenier](https://github.com/bengreenier)

## License

Contributes is licensed under the MIT License - [Click here for details](https://github.com/overlayed-app/contributes/blob/master/LICENSE)
npm package: @overlayed-app/contributes-parser
Description: A parser for package.json#contributes
Author: bengreenier
Latest version: 1.0.0

# contributes-parser

Parse JSONSchema contribution entries, and validate data against them.

## Why

Overlayed makes use of a common format for defining settings as an extension author. It's very similar to the [vscode configuration contribution point](https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributesconfiguration), so if you're familiar with that you'll understand this easily. This module is specifically designed to allow one to work with this schema - to enumerate expected settings (and what they're for) and to validate settings objects.

## How

`npm i @overlayed-app/contributes-parser`

```
import contributes from '@overlayed-app/contributes'

// load a schema (validating it's legit too)
const contrib = contributes
  .parser({
    "name": "test-fixture",
    "version": "1.1.1",
    "contributes": {
      "configuration": {
        "title": "test settings",
        "properties": {
          "str": {
            "default": "abc123",
            "description": "string field",
            "type": "string"
          },
          "num": {
            "default": 12,
            "description": "number field",
            "type": "number"
          }
        }
      }
    }
  })

// get the title for these settings
const title = contrib.title

// get the settings data objects (describing each setting)
const data = contrib.data

// access one particular setting
const mySetting = data[0]

// prints '{name: 'mySetting', type: 'string', default: 'hi mom', description: 'your setting' }'
console.log(mySetting)
```

## API

Create a `contributes` object from some `package.json` config object:

```
// will throw if there's an error
const contrib = contributes.parse({})
```

This will validate that the included schema is legit, and then expose some ways to use the data.

To access the title, use title:

```
const title = contrib.title
```

To access the settings description data, as an array:

```
const data = contrib.data
```

You can use map to manipulate the data without pulling it out beforehand:

```
const names = contrib.map(entry => entry.data)
```

Note that each data entry contains the following data format:

```
{
  "name": "settingName, from the schema properties key",
  "description": "describing the settings purpose",
  "default": "a default value",
  "type": "string"
}
```

Where type is a [valid json schema type](https://github.com/epoberezkin/ajv/blob/master/KEYWORDS.md#type).

If you wish to validate some settings object against the schema:

```
const settings = { settingName: 'settingValue' }

// will throw if there's an error
contib.validate(settings)
```

Note that when you validate settings objects, types may [be coerced](https://github.com/epoberezkin/ajv/blob/master/COERCION.md) automatically to ensure consistency with the schema. If you wish to prevent this [freeze your object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze).

## License

MIT
npm package: @overlayed-app/element-loader
Description: overlayed element loader
Author: bengreenier
Latest version: 1.0.1

# element-loader

overlayed element loader. This is the logic that loads elements. It is used by the core overlayed runtime to do the following, in sequence:

- parse `package.json` from `url` (ie: `https://site.com/package.json`)
- find `browser` or `main` entry (in that order)
- (optional) find `contributes` if it exists
- attempt to import `url`+`<entryFromAbove>` (ie: `https://site.com/index.js`)
- expect that the result is an esm module (ie: `{default: value}`)
- expect that `default` is an element allocator function
- return the result of calling the allocator function, and `contributes` (if it exists)

The provided url may or may not contain `package.json` suffice. If it isn't there, it will be automatically appended.

Throws if there is no `browser` or `main` entry.

Throws if `import` does not succeed.

Note: expects that calling the allocator function will result in a React Component.

## Usage

```
import React from 'react'
import {loader} from '@overlayed-app/element-loader`

loader("https://site.com", React, React.version).then((result) => {
  // result.element is the allocator fn result (a React component)
  // result.contributes is (possibly) the contributes object (or undefined)
})
```

## License

MIT
npm package: @overlayed-app/grommet-theme
Description: The overlayed grommet-theme
Author: bengreenier
Latest version: 1.0.0

# grommet-theme

> Note: this has no external dependencies.

The overlayed grommet-theme. You probably also want these things:

```
npm i @openfonts/poppins_all grommet styled-components react
```

Mostly useful when coupled with a [`<Grommet/>`](https://v2.grommet.io/grommet) component, but can be consumed as raw data as well (for instance, when referencing a particular hex color as data).

## Usage

```
import theme from '@overlayed-app/grommet-theme'

// theme is a grommet theme object
// if you have grommet, you can pass it to a Grommet component
// or you can access it as raw data
//
// outputs: "#640FC4" (at the time or writing)
console.log(theme.global.colors.brand)

```

Note: this data is generated at build-time, based on overrides applied to the devDependency version of `grommet`.

## License

MIT
npm package: @overlayed-app/loadable-element
Description: loadable element logic for overlayed
Author: bengreenier
Latest version: 1.0.1

# loadable-element

Loadable element logic for overlayed. You need this if you're trying to create an element that the system can load. It contains two key components:

- `injectableElement` - the function that converts a React component into something loadable
- `rollupConfig` - the config rollup needs to swap out your React import for our loader

## Usage

In `your-component.tsx`:

```
import React from 'react'
import { injectableElement } from '@overlayed-app/loadable-element'

const MyComponent = () => <p>Hello world</p>

// wrap your component in our injectableElement wrapper before exposing it
export default injectableElement(MyComponent)
```

In `rollup.config.js`:

```
import typescript from '@rollup/plugin-typescript'
import { rollupConfig } from '@overlayed-app/loadable-element'

export default {
  /* .. some valid rollup config .. */
  plugins: [
    typescript({
      ...rollupConfig,
      baseUrl: 'src',
    }),
    /* .. more config .. */
  ],
})

```

For a complete example, see [@overlayed-app/typescript-element-template](https://github.com/overlayed-app/typescript-element-template).

## License

MIT
npm package: @overlayed-app/loadable-element-tests
Description: A common set of tests that all loadable elements should satisfy
Author: bengreenier
Latest version: 1.0.0

# loadable-element-tests

A common set of tests that all loadable elements should satisfy. If you're creating a loadable element, you probably want to include these in your testbed.

## Usage

In `your-component.spec.tsx` (a test file for `your-component.tsx`):

```
import { includeCommonTests } from '@overlayed-app/loadable-element-tests'
import YourComponent from '../your-component'

// where YourComponent is really an element allocator (ie: wrapped in injectableElement call)

includeCommonTests(YourComponent)

/* .. your other tests .. */

```

Should produce the following jest output:

```
  @overlayed-app/loadable-element-tests
    √ should be renderable (22ms)
    √ should be checking react versioning (2ms)
```

For a complete example, see [@overlayed-app/typescript-element-template](https://github.com/overlayed-app/typescript-element-template).

## License

MIT
npm package: @overlayed-app/require-thunk
Description: Thunk dependencies by modifying require 🧙‍♂️🔁
Author: Ben Greenier
Latest version: 1.0.1

# require-thunk

Thunk dependencies by modifying require 🧙‍♂️🔁

A simple way to [thunk](https://en.wikipedia.org/wiki/Thunk) dependencies (including local dependencies). Typescript is supported out of the box. We need this for better `dry-run` support in some [Overlayed](https://github.com/overlayed-app) modules.

```
import thunker from './index'

// turn on thunking
thunker.enableThunking(['net', 'fs'], (target, original) => {
  if (target === 'net') {
    return { isFakeNet: true }
  } else {
    return { isFakeFs: true }
  }
})

// later on...
import('net').then(mongo => {
  // default: { isFakeNet: true, __thunked: true }
  console.log(mongo)
})

// finally, to turn it off
thunker.disableThunking()
```

## API

Note: If you're using vanilla JS, the API methods exist off of `default`. For example:

```
const enableThunking = require('require-thunk').default.enableThunking

// use enableThunking(...)
```

### Types

#### Thunk handler

> (targets, exports) => { return {someKey: 'someValue' } }

The thunk handler callback signature.

- `target` the target being thunked. `String`.
- `exports` the value being provided for the thunk. `Object`.

### enableThunking(targets, thunkHandler)

Enables dependency thunking via require.

- `targets` target (or targets) to thunk. `String` or `String[]`.
- `thunkHandler` the thunk handler, called when a target requires thunking. See [#thunk-handler](#thunk-handler) for the function signature.

### clearThunkCache(targets)

Clears a portion of (or all of) the thunk cache.

- `targets` the target (or targets) to remove from the thunk cache. `String` or `String[]`.

### disableThunking()

Disables dependency thunking via require.

## License

MIT
npm package: @overlaylabs/propper
Description: Transform React props on the fly without redux
Latest version: 2.0.3

# propper
[![npm (scoped)](https://img.shields.io/npm/v/@overlaylabs/propper)](https://www.npmjs.com/package/@overlaylabs/propper)
[![Travis](https://img.shields.io/travis/overlay-labs/propper/master)](https://travis-ci.org/overlay-labs/propper)
[![Codecov branch](https://img.shields.io/codecov/c/github/overlay-labs/propper/master)](https://codecov.io/gh/overlay-labs/propper)
[![David](https://img.shields.io/david/dev/overlay-labs/propper)](https://david-dm.org/overlay-labs/propper?type=dev)
[![GitHub issues](https://img.shields.io/github/issues-raw/overlay-labs/propper)](https://github.com/overlay-labs/propper/issues)
[![npm](https://img.shields.io/npm/dm/@overlaylabs/propper)](https://www.npmjs.com/package/@overlaylabs/propper)

Reduce React props on the fly without redux

## Example
Propped Component:
```javascript
import { propper } from '@overlaylabs/propper'
import React from 'react'

// standard React components
class MyComponent extends React.Component {}

// function (much like mapStateToProps) which reduces props
const reduceProps = ({ items }) => {
  return {
    visibleItems: items.filter(item => item.visbile)
  }
}

// wrap the component
export default propper(reduceProps)(MyComponent)
```
Parent Component:
```javascript
import MyComponent from 'myComponent'
import React from 'react'

// standard React Component
class ParentComponent extends React.Component {
  render() {
    const itemProps = [
      { id: 1, visible: true },
      { id: 2, visible: false },
      { id: 3, visible: true }
    ]
    return (<MyComponent items={itemProps} />);
  }
}
```
npm package: @overlays/element
Description: create imperative overlays in the native application, support custom-element!
Latest version: 0.4.3

# @overlays/element

create imperative overlays in the native application, support custom-element!

## Install

With pnpm: 
```sh
pnpm add @overlays/element
```

With yarn:
```sh
yarn add @overlays/element
```

## Usage


### Step 1: Define Component

Create custom elements in the form of functions and return them.

```js
// overlay.ts
function Component(props) {
  const element = document.createElement('div')
  element.innerHTML = props.title

  const { resolve, reject } = useOverlay({
    // Duration of overlays duration to avoid premature destruction of the component
    duration: 1000,
  })

  // Add events that cause the overlays to end
  element.onclick = function () {
    resolve('ok')
  }

  return element
}

export default Component
```

### Step 2: Create Overlay

You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.

```ts
import { defineOverlay } from '@overlays/element'
import Component from './overlay'

// Convert to imperative callback
const callback = defineOverlay(Component)
// Call the component and get the value of the resolve callback
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
```

You can also use `renderOverlay` to directly call the component and skip the `defineOverlay` method.

```ts
import { defineOverlay } from '@overlays/element'
import Component from './overlay'

const value = await renderOverlay(Component, {
  title: 'useOverlay'
})
// value === "useOverlay:confirmed"
```

## Custom Element

After mounting a custom element, you can pass in the corresponding custom element or name through 'defineOverlay' to use the custom element.

> You can use [lit](https://lit.dev/) Quickly build custom elements.

```ts
const callback1 = defineOverlay('my-custom-element')

callback1({/* props(attrs) */})

const CustomComponent = (props) => {
  const customElement = document.createElement('my-custom-element')

  const { resolve, reject } = useOverlay({
    duration: 1000,
  })

  // ...
  return customElement
}

const callback2 = defineOverlay(CustomComponent)
```
npm package: @overlays/svelte
Description: create imperative overlays in the svelte application, supporting context inheritance!
Latest version: 0.4.3

# Getting Started

create imperative overlays in the svelte application, supporting context inheritance!

## Install

With pnpm: 
```sh
pnpm add @overlays/svelte
```

With yarn:
```sh
yarn add @overlays/svelte
```

## Usage


### Step 1: Define Component


```svelte
<script lang="ts">
  import { useOverlay, Overlay } from "@overlays/svelte";
  import { fly } from "svelte/transition";
  
  export let title: number
  export let duration = 200

  // duration of overlay duration, helps prevent premature component destroy
  const { resolve, reject } = useOverlay({ duration })

  function onClick() {
    resolve(`${title}:confirmed`)
  }
</script>

<Overlay>
  <div transition:fly={{ opacity: 0, duration }} on:click={onClick}>
    <slot name="title">
      { title }
    </slot>
  </div>
</Overlay>
```

### Step 2: Create Overlay

You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.

```ts
import { defineOverlay } from '@overlays/svelte'
import OverlayComponent from './overlay.svelte'

// Convert to imperative callback
const callback = defineOverlay(OverlayComponent)
// Call the component and get the value of the resolve callback
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
```

You can also use `renderOverlay` to directly call the component and skip the `defineOverlay` method.

```ts
import { renderOverlay } from '@overlays/svelte'
import OverlayComponent from './overlay.svelte'

const value = await renderOverlay(OverlayComponent, {
  title: 'useOverlay'
})
// value === "useOverlay:confirmed"
```

## Controlled manner

By default, you do not need to control the display and hiding of the `visible` variable. The value is controlled by the component `Overlay`, and you can pass in `visible` to control the display


```svelte
<script lang="ts">
  import { useOverlay, Overlay } from "@overlays/svelte";

  let visible = false

  const { resolve, reject, deferred, vanish } = useOverlay({
    // close the transition duration, at this point you need to manually destroy it
    duration: false,
    // cancel setting visible to true immediately
    immediate: false
  })

  // Manually set vanish (when promise ends)
  deferred.finally(() => vanish())
</script>

<Overlay bind:visible={visible}>
  <div on:click={() => resolve(`${title}:confirmed`)}>
    ...
  </div>
</Overlay>
```
npm package: @overlays/vue
Description: > overlays only supports Vue3 | Vue2 Composition-api
Latest version: 0.4.7

# Getting Started

> overlays only supports Vue3 | Vue2 Composition-api

## Install

With pnpm: 
```sh
pnpm add @overlays/vue
```

With yarn:
```sh
yarn add @overlays/vue
```

## Global

You can register overlays globally, which will inherit the application context for all popups.

```ts
// main.js
import { createApp } from 'vue'
import unoverlay from '@overlays/vue'

const app = createApp({})
app.use(unoverlay)
```

## Usage



### Step 1: Define Component

overlays is suitable for most components. Using useOverlay can provide finer control over the component process.

```vue
<!-- overlay.vue -->
<script setup>
import { defineEmits, defineProps } from 'vue'
import { useOverlay } from '@overlays/vue'
const props = defineProps({
  title: String,
})

// Get Overlay information from useOverlay
const { visible, resolve, reject } = useOverlay({
  // Duration of popup layer duration to avoid premature destruction of the component
  duration: 1000,
})
</script>

<template>
  <div v-if="visible" @click="resolve(`${title}:confirmed`)">
    {{ title }}
  </div>
</template>
```

### Step 2: Create Overlay

You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.

```ts
import { defineOverlay } from '@overlays/vue'
import OverlayComponent from './overlay.vue'

// Convert to imperative callback
const callback = defineOverlay(OverlayComponent)
// Call the component and get the value of the resolve callback
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
```

You can also use `renderOverlay` to directly call the component and skip the `defineOverlay` method.

```ts
import { renderOverlay } from '@overlays/vue'
import OverlayComponent from './overlay.vue'

const value = await renderOverlay(OverlayComponent, {
  title: 'useOverlay'
})
// value === "useOverlay:confirmed"
```
npm package: @overlays/vue2
Description: > overlays only supports Vue3 | Vue2 Composition-api
Latest version: 0.4.4

# Getting Started

> overlays only supports Vue3 | Vue2 Composition-api

## Install

With pnpm: 
```sh
pnpm add @overlays/vue
```

With yarn:
```sh
yarn add @overlays/vue
```

## Global

You can register overlays globally, which will inherit the application context for all popups.

```ts
// main.js
import Vue from 'vue'
import unoverlay from '@overlays/vue'

const app = new Vue({})
app.use(unoverlay)
```

## Usage



### Step 1: Define Component

overlays is suitable for most components. Using useOverlay can provide finer control over the component process.

```vue
<!-- overlay.vue -->
<script>
import { useOverlay } from '@overlays/vue2'
export default {
  mixins: [useOverlay({ duration: 1000 })],
  methods: {
    onClick() {
      // use this.$visible
      // use this.$resolve or this.$reject
    }
  }
}
</script>

<template>
  <div v-if="visible" @click="resolve(`${title}:confirmed`)">
    {{ title }}
  </div>
</template>
```

### Step 2: Create Overlay

You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.

```ts
import { defineOverlay } from '@overlays/vue'
import OverlayComponent from './overlay.vue'

// Convert to imperative callback
const callback = defineOverlay(OverlayComponent)
// Call the component and get the value of the resolve callback
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
```

You can also use `renderOverlay` to directly call the component and skip the `defineOverlay` method.

```ts
import { renderOverlay } from '@overlays/vue'
import OverlayComponent from './overlay.vue'

const value = await renderOverlay(OverlayComponent, {
  title: 'useOverlay'
})
// value === "useOverlay:confirmed"
```