@overlastic/vue2 0.4.4 → 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,85 +1,29 @@
-# Getting Started
-
-> overlays only supports Vue3 | Vue2 Composition-api
-
-## Install
-
-With pnpm: 
-```sh
-pnpm add @overlastic/vue
-```
-
-With yarn:
-```sh
-yarn add @overlastic/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 '@overlastic/vue'
-
-const app = new Vue({})
-app.use(unoverlay)
-```
-
-## Usage
-
-
-
-### Step 1: Define Component
-
-overlays is suitable for most components. Using usePrograms can provide finer control over the component process.
-
-```vue
-<!-- overlay.vue -->
-<script>
-import { usePrograms } from '@overlastic/vue2'
-export default {
-  mixins: [usePrograms({ 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 '@overlastic/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 '@overlastic/vue'
-import OverlayComponent from './overlay.vue'
-
-const value = await renderOverlay(OverlayComponent, {
-  title: 'usePrograms'
-})
-// value === "usePrograms:confirmed"
-```
+<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/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/en/vue/vue2)

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(src_exports, {
   defineOverlay: () => defineOverlay,
   install: () => install,
   renderOverlay: () => renderOverlay,
-  usePrograms: () => usePrograms
+  useOverlayDefine: () => useOverlayDefine
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -46,7 +46,7 @@ var context = {
 };
 var ScriptsInjectionKey = "$overlay";
 
-// src/composable/createVisibleScripts.ts
+// src/composable/create.ts
 var import_mitt = __toESM(require("mitt"), 1);
 function createVisibleScripts(options) {
   const { reject: _reject, resolve: _resolve } = options.deferred || {};
@@ -79,10 +79,10 @@ function createVisibleScripts(options) {
   };
 }
 
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 var import_core = require("@overlastic/core");
 var import_vue2 = __toESM(require("vue"), 1);
-function usePrograms(options = {}) {
+function useOverlayDefine(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true, events = {} } = options;
   events.reject = events.reject || "reject";
   events.resolve = events.resolve || "resolve";
@@ -141,14 +141,14 @@ var import_vue3 = __toESM(require("vue"), 1);
 var constructor = (0, import_core2.createConstructor)((Inst, props, options) => {
   const { container, id, deferred } = options;
   function vanish() {
-    childApp.$destroy();
+    app.$destroy();
     container.remove();
   }
   const $overlay = createVisibleScripts({
     deferred,
     vanish
   });
-  const childApp = new import_vue3.default({
+  const app = new import_vue3.default({
     name: (0, import_pascal_case.pascalCase)(id),
     parent: options.parent,
     provide: () => ({ $overlay }),
@@ -156,7 +156,7 @@ var constructor = (0, import_core2.createConstructor)((Inst, props, options) =>
   });
   const child = document.createElement("div");
   container.appendChild(child);
-  childApp.$mount(child);
+  app.$mount(child);
 });
 
 // src/define/index.ts
@@ -175,10 +175,10 @@ var Field = {
 };
 
 // src/index.ts
-var install = (_ins, parent) => {
+function install(_ins, parent) {
   if (parent)
     context.parent = parent;
-};
+}
 var unoverlay = { install };
 var src_default = unoverlay;
 // Annotate the CommonJS export names for ESM import in node:
@@ -187,5 +187,5 @@ var src_default = unoverlay;
   defineOverlay,
   install,
   renderOverlay,
-  usePrograms
+  useOverlayDefine
 });

package/dist/index.d.cts

@@ -17,7 +17,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** duration duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -39,7 +39,7 @@ interface ProgramsOptions {
      */
     automatic?: boolean;
 }
-declare function usePrograms(options?: ProgramsOptions): vue_types_vue.ExtendedVue<Vue__default, {
+declare function useOverlayDefine(options?: OverlayDefineOptions): vue_types_vue.ExtendedVue<Vue__default, {
     runtime_visible: boolean;
 } | {
     runtime_visible?: undefined;
@@ -63,7 +63,7 @@ declare const renderOverlay: <Props, Resolved = void>(instance: Vue.Component, p
 
 declare const Field: Component;
 
-declare const install: (_ins: any, parent: any) => void;
+declare function install(_ins: any, parent: any): void;
 declare const unoverlay: PluginObject<Vue__default>;
 
-export { Field, type ProgramsOptions, unoverlay as default, defineOverlay, install, renderOverlay, usePrograms };
+export { Field, type OverlayDefineOptions, unoverlay as default, defineOverlay, install, renderOverlay, useOverlayDefine };

package/dist/index.d.ts

@@ -17,7 +17,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** duration duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -39,7 +39,7 @@ interface ProgramsOptions {
      */
     automatic?: boolean;
 }
-declare function usePrograms(options?: ProgramsOptions): vue_types_vue.ExtendedVue<Vue__default, {
+declare function useOverlayDefine(options?: OverlayDefineOptions): vue_types_vue.ExtendedVue<Vue__default, {
     runtime_visible: boolean;
 } | {
     runtime_visible?: undefined;
@@ -63,7 +63,7 @@ declare const renderOverlay: <Props, Resolved = void>(instance: Vue.Component, p
 
 declare const Field: Component;
 
-declare const install: (_ins: any, parent: any) => void;
+declare function install(_ins: any, parent: any): void;
 declare const unoverlay: PluginObject<Vue__default>;
 
-export { Field, type ProgramsOptions, unoverlay as default, defineOverlay, install, renderOverlay, usePrograms };
+export { Field, type OverlayDefineOptions, unoverlay as default, defineOverlay, install, renderOverlay, useOverlayDefine };

package/dist/index.global.js

@@ -26,7 +26,7 @@ var OverlaysVue = (() => {
     defineOverlay: () => defineOverlay,
     install: () => install,
     renderOverlay: () => renderOverlay,
-    usePrograms: () => usePrograms
+    useOverlayDefine: () => useOverlayDefine
   });
 
   // ../../node_modules/.pnpm/vue@2.6.0/node_modules/vue/dist/vue.runtime.esm.js
@@ -6068,7 +6068,7 @@ var OverlaysVue = (() => {
     } };
   }
 
-  // src/composable/createVisibleScripts.ts
+  // src/composable/create.ts
   function createVisibleScripts(options) {
     const { reject: _reject, resolve: _resolve } = options.deferred || {};
     const { vanish: _vanish } = options;
@@ -6164,14 +6164,15 @@ var OverlaysVue = (() => {
   }
 
   // ../@core/src/constructor.ts
-  function createConstructor(mount) {
-    function define(instance, options) {
-      function executor(props2, options2) {
+  function createConstructor(mount, options = {}) {
+    const { container: globalContainer } = options;
+    function define(instance, options2) {
+      function executor(props2, options3) {
         const deferred = createDeferred();
-        const name = defineName(options2.id, options2.autoIncrement);
-        const index2 = getIndex(options2.id);
-        const container = defineGlobalElement(name, options2.root);
-        mount(instance, props2, Object.assign(options2, {
+        const name = defineName(options3.id, options3.autoIncrement);
+        const index2 = getIndex(options3.id);
+        const container = globalContainer ? defineGlobalElement(name, options3.root) : document.body;
+        mount(instance, props2, Object.assign(options3, {
           position: context2.position,
           id: name,
           deferred,
@@ -6181,21 +6182,21 @@ var OverlaysVue = (() => {
         return deferred;
       }
       let inst;
-      function only(props2, options2) {
+      function only(props2, options3) {
         if (!inst) {
-          inst = executor(props2, options2);
+          inst = executor(props2, options3);
           inst.finally(() => inst = void 0);
         }
         return inst;
       }
       function caller(props2, overrides) {
-        const opts = { ...options, ...overrides };
+        const opts = { ...options2, ...overrides };
         return opts.only ? only(props2, opts) : executor(props2, opts);
       }
       return caller;
     }
-    function render4(instance, props2, options) {
-      return define(instance, options)(props2);
+    function render4(instance, props2, options2) {
+      return define(instance, options2)(props2);
     }
     return { define, render: render4 };
   }
@@ -6206,8 +6207,8 @@ var OverlaysVue = (() => {
     return new Promise((resolve) => setTimeout(resolve, milliseconds));
   }
 
-  // src/composable/usePrograms.ts
-  function usePrograms(options = {}) {
+  // src/composable/define.ts
+  function useOverlayDefine(options = {}) {
     const { duration = 0, immediate = true, model = "visible", automatic = true, events: events2 = {} } = options;
     events2.reject = events2.reject || "reject";
     events2.resolve = events2.resolve || "resolve";
@@ -6323,14 +6324,14 @@ var OverlaysVue = (() => {
   var constructor = createConstructor((Inst, props2, options) => {
     const { container, id, deferred } = options;
     function vanish() {
-      childApp.$destroy();
+      app.$destroy();
       container.remove();
     }
     const $overlay = createVisibleScripts({
       deferred,
       vanish
     });
-    const childApp = new vue_runtime_esm_default({
+    const app = new vue_runtime_esm_default({
       name: pascalCase(id),
       parent: options.parent,
       provide: () => ({ $overlay }),
@@ -6338,7 +6339,7 @@ var OverlaysVue = (() => {
     });
     const child = document.createElement("div");
     container.appendChild(child);
-    childApp.$mount(child);
+    app.$mount(child);
   });
 
   // src/define/index.ts
@@ -6357,10 +6358,10 @@ var OverlaysVue = (() => {
   };
 
   // src/index.ts
-  var install = (_ins, parent) => {
+  function install(_ins, parent) {
     if (parent)
       context.parent = parent;
-  };
+  }
   var unoverlay = { install };
   var src_default = unoverlay;
   return __toCommonJS(src_exports);

package/dist/index.js

@@ -5,7 +5,7 @@ var context = {
 };
 var ScriptsInjectionKey = "$overlay";
 
-// src/composable/createVisibleScripts.ts
+// src/composable/create.ts
 import mitt from "mitt";
 function createVisibleScripts(options) {
   const { reject: _reject, resolve: _resolve } = options.deferred || {};
@@ -38,10 +38,10 @@ function createVisibleScripts(options) {
   };
 }
 
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 import { delay } from "@overlastic/core";
 import Vue2 from "vue";
-function usePrograms(options = {}) {
+function useOverlayDefine(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true, events = {} } = options;
   events.reject = events.reject || "reject";
   events.resolve = events.resolve || "resolve";
@@ -100,14 +100,14 @@ import Vue3 from "vue";
 var constructor = createConstructor((Inst, props, options) => {
   const { container, id, deferred } = options;
   function vanish() {
-    childApp.$destroy();
+    app.$destroy();
     container.remove();
   }
   const $overlay = createVisibleScripts({
     deferred,
     vanish
   });
-  const childApp = new Vue3({
+  const app = new Vue3({
     name: pascalCase(id),
     parent: options.parent,
     provide: () => ({ $overlay }),
@@ -115,7 +115,7 @@ var constructor = createConstructor((Inst, props, options) => {
   });
   const child = document.createElement("div");
   container.appendChild(child);
-  childApp.$mount(child);
+  app.$mount(child);
 });
 
 // src/define/index.ts
@@ -134,10 +134,10 @@ var Field = {
 };
 
 // src/index.ts
-var install = (_ins, parent) => {
+function install(_ins, parent) {
   if (parent)
     context.parent = parent;
-};
+}
 var unoverlay = { install };
 var src_default = unoverlay;
 export {
@@ -146,5 +146,5 @@ export {
   defineOverlay,
   install,
   renderOverlay,
-  usePrograms
+  useOverlayDefine
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vue2",
   "type": "module",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "mitt": "^3.0.1",
     "pascal-case": "3.1.2",
-    "@overlastic/core": "^0.4.3"
+    "@overlastic/core": "^0.5.1"
   },
   "devDependencies": {
     "vue": "^2.6"