@overlastic/vanilla 0.5.0 → 0.5.1

package/README.md

@@ -1,100 +1,29 @@
-# @overlastic/vanilla
+<p align="center">
+  <a href="https://overlastic.vercel.app/" target="blank">
+    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/circle.svg" width="120" alt="Nest Logo" />
+  </a>
+</p>
 
-create imperative overlays in the native application, support custom-element!
+<p align="center">
+ A create modal | dialog | popup promise deferred library
+</p>
 
-## Install
+<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>
 
-With pnpm:
-```sh
-pnpm add @overlastic/vanilla
-```
-
-With yarn:
-```sh
-yarn add @overlastic/vanilla
-```
-
-## 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, deferred } = useOverlayDefine({
-    // 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')
-  }
-
-  // Use setTimeout to wait for the element to be appended, then add a class name with animation
-  setTimeout(() => element.classList.add('show'))
-  // When the deferred is triggered, remove the displayed class name
-  deferred.finally(() => element.classList.remove('show'))
-
-  return element
-}
-
-export default Component
-```
+## Description
 
-### Step 2: Create Overlay
+Create messages or dialog overlays using Overlastic in native HTML.
 
-You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.
+## Installation
 
-```ts
-import { defineOverlay } from '@overlastic/vanilla'
-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"
+```bash
+$ npm install --save @overlastic/vanilla
 ```
 
-You can also use `renderOverlay` to directly call the component and skip the `defineOverlay` method.
-
-```ts
-import { defineOverlay } from '@overlastic/vanilla'
-import Component from './overlay'
-
-const value = await renderOverlay(Component, {
-  title: 'useOverlayDefine'
-})
-// value === "useOverlayDefine: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.
+## Quick Start
 
-```ts
-const callback1 = defineOverlay('my-custom-element')
-
-callback1({/* props(attrs) */})
-
-function CustomComponent(props) {
-  const customElement = document.createElement('my-custom-element')
-
-  const { resolve, reject } = useOverlayDefine({
-    duration: 1000,
-  })
-
-  // ...
-  return customElement
-}
-
-const callback2 = defineOverlay(CustomComponent)
-```
+[Overview & Tutorial](https://overlastic.vercel.app/en/vanilla/)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vanilla",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -25,7 +25,7 @@
     "dist"
   ],
   "dependencies": {
-    "@overlastic/core": "^0.5.0"
+    "@overlastic/core": "^0.5.1"
   },
   "scripts": {
     "build": "tsup src/index.ts",