@overlastic/vanilla 0.4.3 → 0.5.1

package/LICENSE

@@ -1,23 +1,23 @@
-MIT License
-
-Copyright (c) 2022-PRESENT Hairyf<https://github.com/hairyf>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
+MIT License
+
+Copyright (c) 2022-PRESENT Hairyf<https://github.com/hairyf>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/README.md

@@ -1,101 +1,29 @@
-# @overlastic/vanilla
-
-create imperative overlays in the native application, support custom-element!
-
-## Install
-
-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 } = usePrograms({
-    // 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
-```
-
-### 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 '@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"
-```
-
-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: 'usePrograms'
-})
-// value === "usePrograms: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 } = usePrograms({
-    duration: 1000,
-  })
-
-  // ...
-  return customElement
-}
-
-const callback2 = defineOverlay(CustomComponent)
-```
+<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>
+
+<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/en/vanilla/)

package/dist/index.cjs

@@ -22,7 +22,7 @@ var src_exports = {};
 __export(src_exports, {
   defineOverlay: () => defineOverlay,
   renderOverlay: () => renderOverlay,
-  usePrograms: () => usePrograms
+  useOverlayDefine: () => useOverlayDefine
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -82,8 +82,8 @@ function parseElement(component, props) {
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/composable/usePrograms.ts
-function usePrograms(options) {
+// src/composable/define.ts
+function useOverlayDefine(options) {
   const trigger = context.trigger;
   if (!trigger)
     throw new Error("Please execute in the overlays constructor");
@@ -94,5 +94,5 @@ function usePrograms(options) {
 0 && (module.exports = {
   defineOverlay,
   renderOverlay,
-  usePrograms
+  useOverlayDefine
 });

package/dist/index.d.cts

@@ -6,7 +6,7 @@ interface EFComponent<T = any> {
 }
 type ElementComponent = HTMLElement | EFComponent | string;
 
-declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
 declare const renderOverlay: <Props, Resolved = void>(instance: ElementComponent, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
 
 interface Context<T = void> {
@@ -16,10 +16,10 @@ interface Context<T = void> {
     vanish: Function;
 }
 
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
 }
-declare function usePrograms(options?: ProgramsOptions): Context<void>;
+declare function useOverlayDefine(options?: OverlayDefineOptions): Context<void>;
 
-export { type Context, type ProgramsOptions, defineOverlay, renderOverlay, usePrograms };
+export { type Context, type OverlayDefineOptions, defineOverlay, renderOverlay, useOverlayDefine };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ interface EFComponent<T = any> {
 }
 type ElementComponent = HTMLElement | EFComponent | string;
 
-declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
 declare const renderOverlay: <Props, Resolved = void>(instance: ElementComponent, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
 
 interface Context<T = void> {
@@ -16,10 +16,10 @@ interface Context<T = void> {
     vanish: Function;
 }
 
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
 }
-declare function usePrograms(options?: ProgramsOptions): Context<void>;
+declare function useOverlayDefine(options?: OverlayDefineOptions): Context<void>;
 
-export { type Context, type ProgramsOptions, defineOverlay, renderOverlay, usePrograms };
+export { type Context, type OverlayDefineOptions, defineOverlay, renderOverlay, useOverlayDefine };

package/dist/index.global.js

@@ -23,7 +23,7 @@ var OverlaysVanilla = (() => {
   __export(src_exports, {
     defineOverlay: () => defineOverlay,
     renderOverlay: () => renderOverlay,
-    usePrograms: () => usePrograms
+    useOverlayDefine: () => useOverlayDefine
   });
 
   // ../@core/src/define/global.ts
@@ -90,14 +90,15 @@ var OverlaysVanilla = (() => {
   }
 
   // ../@core/src/constructor.ts
-  function createConstructor(mount) {
-    function define(instance, options) {
-      function executor(props, options2) {
+  function createConstructor(mount, options = {}) {
+    const { container: globalContainer } = options;
+    function define(instance, options2) {
+      function executor(props, options3) {
         const deferred = createDeferred();
-        const name = defineName(options2.id, options2.autoIncrement);
-        const index = getIndex(options2.id);
-        const container = defineGlobalElement(name, options2.root);
-        mount(instance, props, Object.assign(options2, {
+        const name = defineName(options3.id, options3.autoIncrement);
+        const index = getIndex(options3.id);
+        const container = globalContainer ? defineGlobalElement(name, options3.root) : document.body;
+        mount(instance, props, Object.assign(options3, {
           position: context.position,
           id: name,
           deferred,
@@ -107,21 +108,21 @@ var OverlaysVanilla = (() => {
         return deferred;
       }
       let inst;
-      function only(props, options2) {
+      function only(props, options3) {
         if (!inst) {
-          inst = executor(props, options2);
+          inst = executor(props, options3);
           inst.finally(() => inst = void 0);
         }
         return inst;
       }
       function caller(props, overrides) {
-        const opts = { ...options, ...overrides };
+        const opts = { ...options2, ...overrides };
         return opts.only ? only(props, opts) : executor(props, opts);
       }
       return caller;
     }
-    function render(instance, props, options) {
-      return define(instance, options)(props);
+    function render(instance, props, options2) {
+      return define(instance, options2)(props);
     }
     return { define, render };
   }
@@ -185,8 +186,8 @@ var OverlaysVanilla = (() => {
   var defineOverlay = constructor.define;
   var renderOverlay = constructor.render;
 
-  // src/composable/usePrograms.ts
-  function usePrograms(options) {
+  // src/composable/define.ts
+  function useOverlayDefine(options) {
     const trigger = context2.trigger;
     if (!trigger)
       throw new Error("Please execute in the overlays constructor");

package/dist/index.js

@@ -54,8 +54,8 @@ function parseElement(component, props) {
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/composable/usePrograms.ts
-function usePrograms(options) {
+// src/composable/define.ts
+function useOverlayDefine(options) {
   const trigger = context.trigger;
   if (!trigger)
     throw new Error("Please execute in the overlays constructor");
@@ -65,5 +65,5 @@ function usePrograms(options) {
 export {
   defineOverlay,
   renderOverlay,
-  usePrograms
+  useOverlayDefine
 };

package/package.json

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