@overlastic/vue2 0.5.0 → 0.6.1

package/README.md

@@ -1,83 +1,29 @@
-# Getting Started
+<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>
 
-> overlays only supports Vue3 | Vue2 Composition-api
+<p align="center">
+ A create modal | dialog | popup promise deferred library
+</p>
 
-## Install
+<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>
 
-With pnpm:
-```sh
-pnpm add @overlastic/vue
-```
-
-With yarn:
-```sh
-yarn add @overlastic/vue
-```
+## Description
 
-## Global
+Create messages or dialog overlays using Overlastic in Vue2 APP.
 
-You can register overlays globally, which will inherit the application context for all popups.
+## Installation
 
-```ts
-// main.js
-import Vue from 'vue'
-import unoverlay from '@overlastic/vue'
-
-const app = new Vue({})
-app.use(unoverlay)
+```bash
+$ npm install --save @overlastic/vue2
 ```
 
-## Usage
-
-### Step 1: Define Component
-
-overlays is suitable for most components. Using useOverlayDefine can provide finer control over the component process.
-
-```vue
-<!-- overlay.vue -->
-<script>
-import { useOverlayDefine } from '@overlastic/vue2'
-export default {
-  mixins: [useOverlayDefine({ 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>
-```
+## Quick Start
 
-### 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: 'useOverlayDefine'
-})
-// value === "useOverlayDefine:confirmed"
-```
+[Overview & Tutorial](https://overlastic.vercel.app/vue/vue2)

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(src_exports, {
   defineOverlay: () => defineOverlay,
   install: () => install,
   renderOverlay: () => renderOverlay,
-  useOverlayDefine: () => useOverlayDefine
+  useDefineOverlay: () => useDefineOverlay
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -82,7 +82,7 @@ function createVisibleScripts(options) {
 // src/composable/define.ts
 var import_core = require("@overlastic/core");
 var import_vue2 = __toESM(require("vue"), 1);
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true, events = {} } = options;
   events.reject = events.reject || "reject";
   events.resolve = events.resolve || "resolve";
@@ -187,5 +187,5 @@ var src_default = unoverlay;
   defineOverlay,
   install,
   renderOverlay,
-  useOverlayDefine
+  useDefineOverlay
 });

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.global.js

@@ -26,7 +26,7 @@ var OverlaysVue = (() => {
     defineOverlay: () => defineOverlay,
     install: () => install,
     renderOverlay: () => renderOverlay,
-    useOverlayDefine: () => useOverlayDefine
+    useDefineOverlay: () => useDefineOverlay
   });
 
   // ../../node_modules/.pnpm/vue@2.6.0/node_modules/vue/dist/vue.runtime.esm.js
@@ -6208,7 +6208,7 @@ var OverlaysVue = (() => {
   }
 
   // src/composable/define.ts
-  function useOverlayDefine(options = {}) {
+  function useDefineOverlay(options = {}) {
     const { duration = 0, immediate = true, model = "visible", automatic = true, events: events2 = {} } = options;
     events2.reject = events2.reject || "reject";
     events2.resolve = events2.resolve || "resolve";

package/dist/index.js

@@ -41,7 +41,7 @@ function createVisibleScripts(options) {
 // src/composable/define.ts
 import { delay } from "@overlastic/core";
 import Vue2 from "vue";
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true, events = {} } = options;
   events.reject = events.reject || "reject";
   events.resolve = events.resolve || "resolve";
@@ -146,5 +146,5 @@ export {
   defineOverlay,
   install,
   renderOverlay,
-  useOverlayDefine
+  useDefineOverlay
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vue2",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.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.5.0"
+    "@overlastic/core": "^0.6.1"
   },
   "devDependencies": {
     "vue": "^2.6"