@overlastic/vue 0.5.1 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 <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" />
+    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
   </a>
 </p>
 
@@ -26,4 +26,4 @@ $ npm install --save @overlastic/vue
 
 ## Quick Start
 
-[Overview & Tutorial](https://overlastic.vercel.app/en/vue/)
+[Overview & Tutorial](https://overlastic.vercel.app/vue/)

package/dist/index.cjs

@@ -26,9 +26,9 @@ __export(src_exports, {
   defineOverlay: () => defineOverlay,
   install: () => install,
   renderOverlay: () => renderOverlay,
-  useOverlay: () => useOverlay,
-  useOverlayDefine: () => useOverlayDefine,
-  useOverlayHolder: () => useOverlayHolder
+  useExtendOverlay: () => useExtendOverlay,
+  useOverlayHolder: () => useOverlayHolder,
+  useOverlayInject: () => useOverlayInject
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -43,7 +43,7 @@ var InstancesInjectionKey = Symbol("OverlayInstances");
 var import_vue_demi = require("vue-demi");
 var import_core = require("@vueuse/core");
 var import_core2 = require("@overlastic/core");
-function useOverlayDefine(options = {}) {
+function useExtendOverlay(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true } = options;
   const overlay = (0, import_vue_demi.inject)(ScriptsInjectionKey, useDeclarative(model, options));
   const dec = Reflect.get(overlay, "in_dec");
@@ -65,7 +65,7 @@ function useDeclarative(model, options = {}) {
   const { reject = "reject", resolve = "resolve" } = options.events || {};
   const instance = (0, import_vue_demi.getCurrentInstance)();
   if (!instance)
-    throw new Error("Please use useOverlayDefine in component setup");
+    throw new Error("Please use useExtendOverlay in component setup");
   const visible = (0, import_core.useVModel)(instance.props, model, instance.emit, { passive: true });
   const _reject = (value) => {
     instance == null ? void 0 : instance.emit(reject, value);
@@ -111,7 +111,16 @@ function useOverlayHolder(component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
   const name = (0, import_core3.defineName)(options.id, options.autoIncrement);
   function render() {
-    return (0, import_vue_demi3.h)(import_vue_demi3.Teleport, { to: options.root || document.body, disabled: options.root === false }, (0, import_vue_demi3.h)("div", { id: name }, [(0, import_vue_demi3.h)(component, props.value)]));
+    return (0, import_vue_demi3.h)(
+      import_vue_demi3.Teleport,
+      {
+        to: options.root || document.body,
+        disabled: options.root === false
+      },
+      (0, import_vue_demi3.h)("div", { id: name }, [
+        (0, import_vue_demi3.h)(component, props.value)
+      ])
+    );
   }
   const Holder = (0, import_vue_demi3.defineComponent)({
     name: (0, import_pascal_case.pascalCase)(name),
@@ -143,7 +152,7 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/overlay.ts
+// src/composable/inject.ts
 var import_core4 = require("@overlastic/core");
 var import_vue = require("vue");
 var import_pascal_case2 = require("pascal-case");
@@ -162,7 +171,7 @@ var { define } = (0, import_core4.createConstructor)((Instance, props, options)
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlay(Instance) {
+function useOverlayInject(Instance) {
   const { render, vanish } = (0, import_vue.inject)(InstancesInjectionKey);
   return define(Instance, { render, vanish });
 }
@@ -268,7 +277,7 @@ var src_default = unoverlay;
   defineOverlay,
   install,
   renderOverlay,
-  useOverlay,
-  useOverlayDefine,
-  useOverlayHolder
+  useExtendOverlay,
+  useOverlayHolder,
+  useOverlayInject
 });

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as vue_demi from 'vue-demi';
-import { Ref, Component, AppContext, App } from 'vue-demi';
+import { Ref, AppContext, App } from 'vue-demi';
 import * as _overlastic_core from '@overlastic/core';
-import { Deferred, ImperativeOverlay, GlobalMountOptions } from '@overlastic/core';
+import { Deferred, ImperativeOverlay, GlobalMountOptions, MountOptions } from '@overlastic/core';
 import * as vue from 'vue';
-import { Component as Component$1, PropType, VNode } from 'vue';
+import { Component, PropType, VNode } from 'vue';
 
 interface PromptifyEvents {
     /**
@@ -19,7 +19,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface OverlayDefineOptions {
+interface ExtendOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -41,13 +41,13 @@ interface OverlayDefineOptions {
      */
     automatic?: boolean;
 }
-interface ProgramsReturn {
+interface ExtendOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     visible: Ref<boolean>;
     /** current deferred */
@@ -60,30 +60,32 @@ interface ProgramsReturn {
  * @function vanish destroy the current instance (immediately)
  * @field visible control overlay display and hide
  */
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useExtendOverlay(options?: ExtendOverlayOptions): ExtendOverlayReturn;
 
-type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
+type AbstractFn = abstract new (...args: any) => any;
+
+type InjectionHolder<Component extends AbstractFn, Resolved> = [Component, ImperativeOverlay<InstanceType<Component>['$props'], Resolved>];
+declare function useOverlayHolder<Component extends AbstractFn, Resolved = any>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Component, Resolved>;
 
 interface Options {
-    render: (instance: Component$1, props: any) => void;
-    vanish: (instance: Component$1) => void;
+    render: (instance: Component, props: any) => void;
+    vanish: (instance: Component) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: any): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlayInject<Component extends AbstractFn, Resolved>(Instance: Component): _overlastic_core.ImperativeOverlay<InstanceType<Component>["$props"], Resolved, Options>;
 
 interface VMountOptions {
     /** current app context */
     appContext?: AppContext;
 }
 
-declare const defineOverlay: <Props, Resolved = void>(instance: vue.Component, options?: _overlastic_core.MountOptions<VMountOptions> | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, VMountOptions>;
-declare const renderOverlay: <Props, Resolved = void>(instance: vue.Component, props?: Props | undefined, options?: _overlastic_core.MountOptions<VMountOptions> | undefined) => Promise<Resolved>;
+declare const defineOverlay: <Component extends AbstractFn, Resolved = any>(instance: Component, options?: MountOptions<VMountOptions> | undefined) => ImperativeOverlay<InstanceType<Component>['$props'], Resolved, VMountOptions>;
+declare const renderOverlay: <Component extends AbstractFn, Resolved = any>(instance: Component, props?: InstanceType<Component>['$props'] | undefined, options?: MountOptions<VMountOptions> | undefined) => Promise<Resolved>;
 
 declare const Field: vue.DefineComponent<{
     is: {
         type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component$1>;
+        }> | Component>;
         default: string;
     };
 }, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
@@ -92,13 +94,13 @@ declare const Field: vue.DefineComponent<{
     is: {
         type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component$1>;
+        }> | Component>;
         default: string;
     };
 }>>, {
     is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
-    }> | Component$1;
+    }> | Component;
 }, {}>;
 
 declare const OverlayProvider: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -110,4 +112,4 @@ declare const unoverlay: {
     install: typeof install;
 };
 
-export { Field, type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };
+export { type ExtendOverlayOptions, type ExtendOverlayReturn, Field, type InjectionHolder, OverlayProvider, unoverlay as default, defineOverlay, install, renderOverlay, useExtendOverlay, useOverlayHolder, useOverlayInject };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as vue_demi from 'vue-demi';
-import { Ref, Component, AppContext, App } from 'vue-demi';
+import { Ref, AppContext, App } from 'vue-demi';
 import * as _overlastic_core from '@overlastic/core';
-import { Deferred, ImperativeOverlay, GlobalMountOptions } from '@overlastic/core';
+import { Deferred, ImperativeOverlay, GlobalMountOptions, MountOptions } from '@overlastic/core';
 import * as vue from 'vue';
-import { Component as Component$1, PropType, VNode } from 'vue';
+import { Component, PropType, VNode } from 'vue';
 
 interface PromptifyEvents {
     /**
@@ -19,7 +19,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface OverlayDefineOptions {
+interface ExtendOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -41,13 +41,13 @@ interface OverlayDefineOptions {
      */
     automatic?: boolean;
 }
-interface ProgramsReturn {
+interface ExtendOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     visible: Ref<boolean>;
     /** current deferred */
@@ -60,30 +60,32 @@ interface ProgramsReturn {
  * @function vanish destroy the current instance (immediately)
  * @field visible control overlay display and hide
  */
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useExtendOverlay(options?: ExtendOverlayOptions): ExtendOverlayReturn;
 
-type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
+type AbstractFn = abstract new (...args: any) => any;
+
+type InjectionHolder<Component extends AbstractFn, Resolved> = [Component, ImperativeOverlay<InstanceType<Component>['$props'], Resolved>];
+declare function useOverlayHolder<Component extends AbstractFn, Resolved = any>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Component, Resolved>;
 
 interface Options {
-    render: (instance: Component$1, props: any) => void;
-    vanish: (instance: Component$1) => void;
+    render: (instance: Component, props: any) => void;
+    vanish: (instance: Component) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: any): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlayInject<Component extends AbstractFn, Resolved>(Instance: Component): _overlastic_core.ImperativeOverlay<InstanceType<Component>["$props"], Resolved, Options>;
 
 interface VMountOptions {
     /** current app context */
     appContext?: AppContext;
 }
 
-declare const defineOverlay: <Props, Resolved = void>(instance: vue.Component, options?: _overlastic_core.MountOptions<VMountOptions> | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, VMountOptions>;
-declare const renderOverlay: <Props, Resolved = void>(instance: vue.Component, props?: Props | undefined, options?: _overlastic_core.MountOptions<VMountOptions> | undefined) => Promise<Resolved>;
+declare const defineOverlay: <Component extends AbstractFn, Resolved = any>(instance: Component, options?: MountOptions<VMountOptions> | undefined) => ImperativeOverlay<InstanceType<Component>['$props'], Resolved, VMountOptions>;
+declare const renderOverlay: <Component extends AbstractFn, Resolved = any>(instance: Component, props?: InstanceType<Component>['$props'] | undefined, options?: MountOptions<VMountOptions> | undefined) => Promise<Resolved>;
 
 declare const Field: vue.DefineComponent<{
     is: {
         type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component$1>;
+        }> | Component>;
         default: string;
     };
 }, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
@@ -92,13 +94,13 @@ declare const Field: vue.DefineComponent<{
     is: {
         type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component$1>;
+        }> | Component>;
         default: string;
     };
 }>>, {
     is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
-    }> | Component$1;
+    }> | Component;
 }, {}>;
 
 declare const OverlayProvider: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -110,4 +112,4 @@ declare const unoverlay: {
     install: typeof install;
 };
 
-export { Field, type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };
+export { type ExtendOverlayOptions, type ExtendOverlayReturn, Field, type InjectionHolder, OverlayProvider, unoverlay as default, defineOverlay, install, renderOverlay, useExtendOverlay, useOverlayHolder, useOverlayInject };

package/dist/index.global.js

@@ -16500,9 +16500,9 @@ ${codeFrame}` : message);
     defineOverlay: () => defineOverlay,
     install: () => install2,
     renderOverlay: () => renderOverlay,
-    useOverlay: () => useOverlay,
-    useOverlayDefine: () => useOverlayDefine,
-    useOverlayHolder: () => useOverlayHolder
+    useExtendOverlay: () => useExtendOverlay,
+    useOverlayHolder: () => useOverlayHolder,
+    useOverlayInject: () => useOverlayInject
   });
 
   // src/internal/index.ts
@@ -16765,7 +16765,7 @@ ${codeFrame}` : message);
   }
 
   // src/composable/define.ts
-  function useOverlayDefine(options = {}) {
+  function useExtendOverlay(options = {}) {
     const { duration = 0, immediate = true, model = "visible", automatic = true } = options;
     const overlay = (0, lib_exports.inject)(ScriptsInjectionKey, useDeclarative(model, options));
     const dec = Reflect.get(overlay, "in_dec");
@@ -16787,7 +16787,7 @@ ${codeFrame}` : message);
     const { reject = "reject", resolve: resolve2 = "resolve" } = options.events || {};
     const instance = (0, lib_exports.getCurrentInstance)();
     if (!instance)
-      throw new Error("Please use useOverlayDefine in component setup");
+      throw new Error("Please use useExtendOverlay in component setup");
     const visible = useVModel(instance.props, model, instance.emit, { passive: true });
     const _reject = (value) => {
       instance == null ? void 0 : instance.emit(reject, value);
@@ -16889,7 +16889,16 @@ ${codeFrame}` : message);
     const { callback, scripts, props, refresh } = useRefreshMetadata();
     const name = defineName(options.id, options.autoIncrement);
     function render2() {
-      return (0, lib_exports.h)(lib_exports.Teleport, { to: options.root || document.body, disabled: options.root === false }, (0, lib_exports.h)("div", { id: name }, [(0, lib_exports.h)(component, props.value)]));
+      return (0, lib_exports.h)(
+        lib_exports.Teleport,
+        {
+          to: options.root || document.body,
+          disabled: options.root === false
+        },
+        (0, lib_exports.h)("div", { id: name }, [
+          (0, lib_exports.h)(component, props.value)
+        ])
+      );
     }
     const Holder = (0, lib_exports.defineComponent)({
       name: pascalCase(name),
@@ -16921,7 +16930,7 @@ ${codeFrame}` : message);
     return { callback, scripts, props, refresh };
   }
 
-  // src/composable/overlay.ts
+  // src/composable/inject.ts
   var { define } = createConstructor((Instance, props, options) => {
     const { id, deferred, render: render2, vanish: _vanish } = options;
     const InstanceWithProvider = (0, vue_exports.defineComponent)({
@@ -16937,7 +16946,7 @@ ${codeFrame}` : message);
     }
     render2(InstanceWithProvider, props);
   }, { container: false });
-  function useOverlay(Instance) {
+  function useOverlayInject(Instance) {
     const { render: render2, vanish } = (0, vue_exports.inject)(InstancesInjectionKey);
     return define(Instance, { render: render2, vanish });
   }

package/dist/index.js

@@ -9,7 +9,7 @@ var InstancesInjectionKey = Symbol("OverlayInstances");
 import { getCurrentInstance, inject, onMounted, provide } from "vue-demi";
 import { useVModel } from "@vueuse/core";
 import { delay, noop } from "@overlastic/core";
-function useOverlayDefine(options = {}) {
+function useExtendOverlay(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true } = options;
   const overlay = inject(ScriptsInjectionKey, useDeclarative(model, options));
   const dec = Reflect.get(overlay, "in_dec");
@@ -31,7 +31,7 @@ function useDeclarative(model, options = {}) {
   const { reject = "reject", resolve = "resolve" } = options.events || {};
   const instance = getCurrentInstance();
   if (!instance)
-    throw new Error("Please use useOverlayDefine in component setup");
+    throw new Error("Please use useExtendOverlay in component setup");
   const visible = useVModel(instance.props, model, instance.emit, { passive: true });
   const _reject = (value) => {
     instance == null ? void 0 : instance.emit(reject, value);
@@ -77,7 +77,16 @@ function useOverlayHolder(component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
   const name = defineName(options.id, options.autoIncrement);
   function render() {
-    return h(Teleport, { to: options.root || document.body, disabled: options.root === false }, h("div", { id: name }, [h(component, props.value)]));
+    return h(
+      Teleport,
+      {
+        to: options.root || document.body,
+        disabled: options.root === false
+      },
+      h("div", { id: name }, [
+        h(component, props.value)
+      ])
+    );
   }
   const Holder = defineComponent({
     name: pascalCase(name),
@@ -109,7 +118,7 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/overlay.ts
+// src/composable/inject.ts
 import { createConstructor } from "@overlastic/core";
 import { defineComponent as defineComponent2, h as h2, inject as inject2, provide as provide3 } from "vue";
 import { pascalCase as pascalCase2 } from "pascal-case";
@@ -128,7 +137,7 @@ var { define } = createConstructor((Instance, props, options) => {
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlay(Instance) {
+function useOverlayInject(Instance) {
   const { render, vanish } = inject2(InstancesInjectionKey);
   return define(Instance, { render, vanish });
 }
@@ -234,7 +243,7 @@ export {
   defineOverlay,
   install,
   renderOverlay,
-  useOverlay,
-  useOverlayDefine,
-  useOverlayHolder
+  useExtendOverlay,
+  useOverlayHolder,
+  useOverlayInject
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vue",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -29,7 +29,7 @@
     "pascal-case": "3.1.2",
     "vue": "^3.3.2",
     "vue-demi": ">=0.14.7",
-    "@overlastic/core": "^0.5.1"
+    "@overlastic/core": "^0.7.0"
   },
   "scripts": {
     "build": "tsup src/index.ts",