@overlastic/vue 0.4.7 → 0.5.0

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,86 +1,84 @@
-# 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 { createApp } from 'vue'
-import unoverlay from '@overlastic/vue'
-
-const app = createApp({})
-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 setup>
-import { defineEmits, defineProps } from 'vue'
-import { usePrograms } from '@overlastic/vue'
-const props = defineProps({
-  title: String,
-})
-
-// Get Overlay information from usePrograms
-const { visible, resolve, reject } = usePrograms({
-  // Duration of popup layer duration to avoid premature destruction of the component
-  duration: 1000,
-})
-</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"
-```
+# 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 { createApp } from 'vue'
+import unoverlay from '@overlastic/vue'
+
+const app = createApp({})
+app.use(unoverlay)
+```
+
+## 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 setup>
+import { defineEmits, defineProps } from 'vue'
+import { useOverlayDefine } from '@overlastic/vue'
+const props = defineProps({
+  title: String,
+})
+
+// Get Overlay information from useOverlayDefine
+const { visible, resolve, reject } = useOverlayDefine({
+  // Duration of popup layer duration to avoid premature destruction of the component
+  duration: 1000,
+})
+</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: 'useOverlayDefine'
+})
+// value === "useOverlayDefine:confirmed"
+```

package/dist/index.cjs

@@ -21,15 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Field: () => Field,
-  OverlaysProvider: () => OverlaysProvider,
-  Provider: () => Provider,
+  OverlayProvider: () => OverlayProvider,
   default: () => src_default,
   defineOverlay: () => defineOverlay,
   install: () => install,
   renderOverlay: () => renderOverlay,
   useOverlay: () => useOverlay,
-  useOverlayHolder: () => useOverlayHolder,
-  usePrograms: () => usePrograms
+  useOverlayDefine: () => useOverlayDefine,
+  useOverlayHolder: () => useOverlayHolder
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -40,11 +39,11 @@ var context = {
 var ScriptsInjectionKey = Symbol("OverlayScripts");
 var InstancesInjectionKey = Symbol("OverlayInstances");
 
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 var import_vue_demi = require("vue-demi");
 var import_core = require("@vueuse/core");
 var import_core2 = require("@overlastic/core");
-function usePrograms(options = {}) {
+function useOverlayDefine(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");
@@ -66,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 usePrograms in component setup");
+    throw new Error("Please use useOverlayDefine 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);
@@ -85,7 +84,7 @@ function useDeclarative(model, options = {}) {
   };
 }
 
-// src/composable/useScripts.ts
+// src/composable/scripts.ts
 var import_vue_demi2 = require("vue-demi");
 function useScripts(options) {
   const { reject: _reject } = options.deferred || {};
@@ -104,7 +103,7 @@ function useScripts(options) {
   };
 }
 
-// src/composable/useOverlayHolder.ts
+// src/composable/holder.ts
 var import_vue_demi3 = require("vue-demi");
 var import_core3 = require("@overlastic/core");
 var import_pascal_case = require("pascal-case");
@@ -112,11 +111,7 @@ 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),
@@ -148,12 +143,12 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/useOverlay.ts
+// src/composable/overlay.ts
 var import_core4 = require("@overlastic/core");
 var import_vue = require("vue");
 var import_pascal_case2 = require("pascal-case");
 var { define } = (0, import_core4.createConstructor)((Instance, props, options) => {
-  const { container, id, deferred, render, vanish: _vanish } = options;
+  const { id, deferred, render, vanish: _vanish } = options;
   const InstanceWithProvider = (0, import_vue.defineComponent)({
     name: (0, import_pascal_case2.pascalCase)(id),
     setup: () => {
@@ -164,10 +159,9 @@ var { define } = (0, import_core4.createConstructor)((Instance, props, options)
   });
   function vanish() {
     _vanish(InstanceWithProvider);
-    container.remove();
   }
-  render(Instance, props);
-});
+  render(InstanceWithProvider, props);
+}, { container: false });
 function useOverlay(Instance) {
   const { render, vanish } = (0, import_vue.inject)(InstancesInjectionKey);
   return define(Instance, { render, vanish });
@@ -216,19 +210,9 @@ var constructor = (0, import_core5.createConstructor)((Instance, props, options)
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/components/index.ts
-var import_vue_demi5 = require("vue-demi");
-var Provider = (0, import_vue_demi5.defineComponent)({
-  setup(_, { slots }) {
-    const { appContext } = (0, import_vue_demi5.getCurrentInstance)();
-    context.appContext = appContext;
-    return () => {
-      var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots);
-    };
-  }
-});
-var Field = (0, import_vue_demi5.defineComponent)({
+// src/components/Field.ts
+var import_vue2 = require("vue");
+var Field = (0, import_vue2.defineComponent)({
   name: "Field",
   props: {
     is: {
@@ -240,24 +224,31 @@ var Field = (0, import_vue_demi5.defineComponent)({
     return () => {
       if (typeof props.is === "string" || typeof props.is === "number")
         return props.is;
-      return props.is ? (0, import_vue_demi5.h)(props.is) : null;
+      return props.is ? (0, import_vue2.h)(props.is) : null;
     };
   }
 });
-var OverlaysProvider = (0, import_vue_demi5.defineComponent)({
+
+// src/components/OverlayProvider.ts
+var import_vue_demi5 = require("vue-demi");
+var import_vue3 = require("vue");
+var OverlayProvider = (0, import_vue_demi5.defineComponent)({
   setup(_, { slots }) {
     const instances = (0, import_vue_demi5.ref)([]);
     function render(Instance, props) {
-      instances.value.push({ Instance, props });
+      console.log({ Instance, props });
+      instances.value.push({ Instance: (0, import_vue3.markRaw)(Instance), props });
     }
     function vanish(instance) {
-      instances.value = instances.value.filter(({ Instance }) => Instance === instance);
+      instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
     }
     (0, import_vue_demi5.provide)(InstancesInjectionKey, { render, vanish });
     return () => {
       var _a;
       return (0, import_vue_demi5.h)(import_vue_demi5.Fragment, [
-        ...instances.value.map(({ Instance, props }, index) => (0, import_vue_demi5.h)(Instance, { ...props, key: index })),
+        ...instances.value.map(
+          ({ Instance, props }, index) => (0, import_vue_demi5.h)(Instance, { ...props, key: index })
+        ),
         (_a = slots.default) == null ? void 0 : _a.call(slots)
       ]);
     };
@@ -273,12 +264,11 @@ var src_default = unoverlay;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Field,
-  OverlaysProvider,
-  Provider,
+  OverlayProvider,
   defineOverlay,
   install,
   renderOverlay,
   useOverlay,
-  useOverlayHolder,
-  usePrograms
+  useOverlayDefine,
+  useOverlayHolder
 });

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as vue_demi from 'vue-demi';
-import { Ref, Component, AppContext, PropType, VNode, App } from 'vue-demi';
+import { Ref, Component, AppContext, App } from 'vue-demi';
 import * as _overlastic_core from '@overlastic/core';
 import { Deferred, ImperativeOverlay, GlobalMountOptions } from '@overlastic/core';
 import * as vue from 'vue';
-import { DefineComponent, Component as Component$1 } from 'vue';
+import { Component as Component$1, PropType, VNode } from 'vue';
 
 interface PromptifyEvents {
     /**
@@ -19,7 +19,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -59,9 +59,8 @@ interface ProgramsReturn {
  * @function resolve the notification resolve, modify visible, and destroy it after the duration ends
  * @function vanish destroy the current instance (immediately)
  * @field visible control overlay display and hide
- * @returns
  */
-declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
 
 type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
 declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
@@ -70,7 +69,7 @@ interface Options {
     render: (instance: Component$1, props: any) => void;
     vanish: (instance: Component$1) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: DefineComponent<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlay<Props, Resolved>(Instance: any): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
 interface VMountOptions {
     /** current app context */
@@ -80,29 +79,29 @@ interface VMountOptions {
 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 Provider: Component;
-declare const Field: vue_demi.DefineComponent<{
+declare const Field: vue.DefineComponent<{
     is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component>;
+        }> | Component$1>;
         default: string;
     };
-}, () => string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+}, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}> | null, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component>;
+        }> | Component$1>;
         default: string;
     };
 }>>, {
-    is: string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
-    }> | Component;
+    }> | Component$1;
 }, {}>;
-declare const OverlaysProvider: vue_demi.DefineComponent<{}, () => VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+
+declare const OverlayProvider: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
@@ -111,4 +110,4 @@ declare const unoverlay: {
     install: typeof install;
 };
 
-export { Field, type InjectionHolder, OverlaysProvider, type ProgramsOptions, type ProgramsReturn, Provider, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayHolder, usePrograms };
+export { Field, type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as vue_demi from 'vue-demi';
-import { Ref, Component, AppContext, PropType, VNode, App } from 'vue-demi';
+import { Ref, Component, AppContext, App } from 'vue-demi';
 import * as _overlastic_core from '@overlastic/core';
 import { Deferred, ImperativeOverlay, GlobalMountOptions } from '@overlastic/core';
 import * as vue from 'vue';
-import { DefineComponent, Component as Component$1 } from 'vue';
+import { Component as Component$1, PropType, VNode } from 'vue';
 
 interface PromptifyEvents {
     /**
@@ -19,7 +19,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -59,9 +59,8 @@ interface ProgramsReturn {
  * @function resolve the notification resolve, modify visible, and destroy it after the duration ends
  * @function vanish destroy the current instance (immediately)
  * @field visible control overlay display and hide
- * @returns
  */
-declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
 
 type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
 declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
@@ -70,7 +69,7 @@ interface Options {
     render: (instance: Component$1, props: any) => void;
     vanish: (instance: Component$1) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: DefineComponent<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlay<Props, Resolved>(Instance: any): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
 interface VMountOptions {
     /** current app context */
@@ -80,29 +79,29 @@ interface VMountOptions {
 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 Provider: Component;
-declare const Field: vue_demi.DefineComponent<{
+declare const Field: vue.DefineComponent<{
     is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component>;
+        }> | Component$1>;
         default: string;
     };
-}, () => string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+}, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}> | null, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
-        }> | Component>;
+        }> | Component$1>;
         default: string;
     };
 }>>, {
-    is: string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
-    }> | Component;
+    }> | Component$1;
 }, {}>;
-declare const OverlaysProvider: vue_demi.DefineComponent<{}, () => VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+
+declare const OverlayProvider: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
@@ -111,4 +110,4 @@ declare const unoverlay: {
     install: typeof install;
 };
 
-export { Field, type InjectionHolder, OverlaysProvider, type ProgramsOptions, type ProgramsReturn, Provider, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayHolder, usePrograms };
+export { Field, type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, unoverlay as default, defineOverlay, install, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };

package/dist/index.global.js

@@ -7659,7 +7659,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function renderComponentRoot(instance) {
     const {
-      type: Component,
+      type: Component2,
       vnode,
       proxy,
       withProxy,
@@ -7697,7 +7697,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         );
         fallthroughAttrs = attrs;
       } else {
-        const render22 = Component;
+        const render22 = Component2;
         if (process.env.NODE_ENV !== "production" && attrs === props) {
           markAttrsAccessed();
         }
@@ -7718,7 +7718,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             /* we know it doesn't need it */
           )
         );
-        fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs);
+        fallthroughAttrs = Component2.props ? attrs : getFunctionalFallthrough(attrs);
       }
     } catch (err) {
       blockStack.length = 0;
@@ -9155,25 +9155,25 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
     const instance = currentRenderingInstance || currentInstance;
     if (instance) {
-      const Component = instance.type;
+      const Component2 = instance.type;
       if (type === COMPONENTS) {
         const selfName = getComponentName(
-          Component,
+          Component2,
           false
           /* do not include inferred name to avoid breaking existing code */
         );
         if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
-          return Component;
+          return Component2;
         }
       }
       const res = (
         // local registration
         // check instance[type] first which is resolved for options API
-        resolve(instance[type] || Component[type], name) || // global registration
+        resolve(instance[type] || Component2[type], name) || // global registration
         resolve(instance.appContext[type], name)
       );
       if (!res && maybeSelfReference) {
-        return Component;
+        return Component2;
       }
       if (process.env.NODE_ENV !== "production" && warnMissing && !res) {
         const extra = type === COMPONENTS ? `
@@ -9752,7 +9752,7 @@ If this is a native custom element, make sure to exclude it from component resol
   }
   function callHook(hook, instance, type) {
     callWithAsyncErrorHandling(
-      isArray(hook) ? hook.map((h7) => h7.bind(instance.proxy)) : hook.bind(instance.proxy),
+      isArray(hook) ? hook.map((h8) => h8.bind(instance.proxy)) : hook.bind(instance.proxy),
       instance,
       type
     );
@@ -13072,24 +13072,24 @@ Component that was made reactive: `,
   }
   function setupStatefulComponent(instance, isSSR) {
     var _a;
-    const Component = instance.type;
+    const Component2 = instance.type;
     if (process.env.NODE_ENV !== "production") {
-      if (Component.name) {
-        validateComponentName(Component.name, instance.appContext.config);
+      if (Component2.name) {
+        validateComponentName(Component2.name, instance.appContext.config);
       }
-      if (Component.components) {
-        const names = Object.keys(Component.components);
+      if (Component2.components) {
+        const names = Object.keys(Component2.components);
         for (let i = 0; i < names.length; i++) {
           validateComponentName(names[i], instance.appContext.config);
         }
       }
-      if (Component.directives) {
-        const names = Object.keys(Component.directives);
+      if (Component2.directives) {
+        const names = Object.keys(Component2.directives);
         for (let i = 0; i < names.length; i++) {
           validateDirectiveName(names[i]);
         }
       }
-      if (Component.compilerOptions && isRuntimeOnly()) {
+      if (Component2.compilerOptions && isRuntimeOnly()) {
         warn2(
           `"compilerOptions" is only supported when using a build of Vue that includes the runtime compiler. Since you are using a runtime-only build, the options should be passed via your build tool config instead.`
         );
@@ -13100,7 +13100,7 @@ Component that was made reactive: `,
     if (process.env.NODE_ENV !== "production") {
       exposePropsOnRenderContext(instance);
     }
-    const { setup } = Component;
+    const { setup } = Component2;
     if (setup) {
       const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;
       setCurrentInstance(instance);
@@ -13124,7 +13124,7 @@ Component that was made reactive: `,
         } else {
           instance.asyncDep = setupResult;
           if (process.env.NODE_ENV !== "production" && !instance.suspense) {
-            const name = (_a = Component.name) != null ? _a : "Anonymous";
+            const name = (_a = Component2.name) != null ? _a : "Anonymous";
             warn2(
               `Component <${name}>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.`
             );
@@ -13173,16 +13173,16 @@ Component that was made reactive: `,
     };
   }
   function finishComponentSetup(instance, isSSR, skipOptions) {
-    const Component = instance.type;
+    const Component2 = instance.type;
     if (!instance.render) {
-      if (!isSSR && compile2 && !Component.render) {
-        const template = Component.template || resolveMergedOptions(instance).template;
+      if (!isSSR && compile2 && !Component2.render) {
+        const template = Component2.template || resolveMergedOptions(instance).template;
         if (template) {
           if (process.env.NODE_ENV !== "production") {
             startMeasure(instance, `compile`);
           }
           const { isCustomElement, compilerOptions } = instance.appContext.config;
-          const { delimiters, compilerOptions: componentCompilerOptions } = Component;
+          const { delimiters, compilerOptions: componentCompilerOptions } = Component2;
           const finalCompilerOptions = extend(
             extend(
               {
@@ -13193,13 +13193,13 @@ Component that was made reactive: `,
             ),
             componentCompilerOptions
           );
-          Component.render = compile2(template, finalCompilerOptions);
+          Component2.render = compile2(template, finalCompilerOptions);
           if (process.env.NODE_ENV !== "production") {
             endMeasure(instance, `compile`);
           }
         }
       }
-      instance.render = Component.render || NOOP;
+      instance.render = Component2.render || NOOP;
       if (installWithProxy) {
         installWithProxy(instance);
       }
@@ -13211,8 +13211,8 @@ Component that was made reactive: `,
       resetTracking();
       unsetCurrentInstance();
     }
-    if (process.env.NODE_ENV !== "production" && !Component.render && instance.render === NOOP && !isSSR) {
-      if (!compile2 && Component.template) {
+    if (process.env.NODE_ENV !== "production" && !Component2.render && instance.render === NOOP && !isSSR) {
+      if (!compile2 && Component2.template) {
         warn2(
           `Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
           /* should not happen */
@@ -13319,13 +13319,13 @@ Component that was made reactive: `,
       }));
     }
   }
-  function getComponentName(Component, includeInferred = true) {
-    return isFunction(Component) ? Component.displayName || Component.name : Component.name || includeInferred && Component.__name;
+  function getComponentName(Component2, includeInferred = true) {
+    return isFunction(Component2) ? Component2.displayName || Component2.name : Component2.name || includeInferred && Component2.__name;
   }
-  function formatComponentName(instance, Component, isRoot = false) {
-    let name = getComponentName(Component);
-    if (!name && Component.__file) {
-      const match = Component.__file.match(/([^/\\]+)\.\w+$/);
+  function formatComponentName(instance, Component2, isRoot = false) {
+    let name = getComponentName(Component2);
+    if (!name && Component2.__file) {
+      const match = Component2.__file.match(/([^/\\]+)\.\w+$/);
       if (match) {
         name = match[1];
       }
@@ -13333,7 +13333,7 @@ Component that was made reactive: `,
     if (!name && instance && instance.parent) {
       const inferFromRegistry = (registry) => {
         for (const key in registry) {
-          if (registry[key] === Component) {
+          if (registry[key] === Component2) {
             return key;
           }
         }
@@ -16495,15 +16495,14 @@ ${codeFrame}` : message);
   var src_exports = {};
   __export(src_exports, {
     Field: () => Field,
-    OverlaysProvider: () => OverlaysProvider,
-    Provider: () => Provider,
+    OverlayProvider: () => OverlayProvider,
     default: () => src_default,
     defineOverlay: () => defineOverlay,
     install: () => install2,
     renderOverlay: () => renderOverlay,
     useOverlay: () => useOverlay,
-    useOverlayHolder: () => useOverlayHolder,
-    usePrograms: () => usePrograms
+    useOverlayDefine: () => useOverlayDefine,
+    useOverlayHolder: () => useOverlayHolder
   });
 
   // src/internal/index.ts
@@ -16720,14 +16719,15 @@ ${codeFrame}` : message);
   }
 
   // ../@core/src/constructor.ts
-  function createConstructor(mount) {
-    function define2(instance, options) {
-      function executor(props, options2) {
+  function createConstructor(mount, options = {}) {
+    const { container: globalContainer } = options;
+    function define2(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: context2.position,
           id: name,
           deferred,
@@ -16737,21 +16737,21 @@ ${codeFrame}` : message);
         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 render2(instance, props, options) {
-      return define2(instance, options)(props);
+    function render2(instance, props, options2) {
+      return define2(instance, options2)(props);
     }
     return { define: define2, render: render2 };
   }
@@ -16764,8 +16764,8 @@ ${codeFrame}` : message);
     return new Promise((resolve2) => setTimeout(resolve2, milliseconds));
   }
 
-  // src/composable/usePrograms.ts
-  function usePrograms(options = {}) {
+  // src/composable/define.ts
+  function useOverlayDefine(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 usePrograms in component setup");
+      throw new Error("Please use useOverlayDefine in component setup");
     const visible = useVModel(instance.props, model, instance.emit, { passive: true });
     const _reject = (value) => {
       instance == null ? void 0 : instance.emit(reject, value);
@@ -16806,7 +16806,7 @@ ${codeFrame}` : message);
     };
   }
 
-  // src/composable/useScripts.ts
+  // src/composable/scripts.ts
   function useScripts(options) {
     const { reject: _reject } = options.deferred || {};
     const { vanish: _vanish } = options;
@@ -16884,16 +16884,12 @@ ${codeFrame}` : message);
     return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
   }
 
-  // src/composable/useOverlayHolder.ts
+  // src/composable/holder.ts
   function useOverlayHolder(component, options = {}) {
     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),
@@ -16925,9 +16921,9 @@ ${codeFrame}` : message);
     return { callback, scripts, props, refresh };
   }
 
-  // src/composable/useOverlay.ts
+  // src/composable/overlay.ts
   var { define } = createConstructor((Instance, props, options) => {
-    const { container, id, deferred, render: render2, vanish: _vanish } = options;
+    const { id, deferred, render: render2, vanish: _vanish } = options;
     const InstanceWithProvider = (0, vue_exports.defineComponent)({
       name: pascalCase(id),
       setup: () => {
@@ -16938,10 +16934,9 @@ ${codeFrame}` : message);
     });
     function vanish() {
       _vanish(InstanceWithProvider);
-      container.remove();
     }
-    render2(Instance, props);
-  });
+    render2(InstanceWithProvider, props);
+  }, { container: false });
   function useOverlay(Instance) {
     const { render: render2, vanish } = (0, vue_exports.inject)(InstancesInjectionKey);
     return define(Instance, { render: render2, vanish });
@@ -16985,18 +16980,8 @@ ${codeFrame}` : message);
   var defineOverlay = constructor.define;
   var renderOverlay = constructor.render;
 
-  // src/components/index.ts
-  var Provider = (0, lib_exports.defineComponent)({
-    setup(_, { slots }) {
-      const { appContext } = (0, lib_exports.getCurrentInstance)();
-      context.appContext = appContext;
-      return () => {
-        var _a;
-        return (_a = slots.default) == null ? void 0 : _a.call(slots);
-      };
-    }
-  });
-  var Field = (0, lib_exports.defineComponent)({
+  // src/components/Field.ts
+  var Field = (0, vue_exports.defineComponent)({
     name: "Field",
     props: {
       is: {
@@ -17008,24 +16993,29 @@ ${codeFrame}` : message);
       return () => {
         if (typeof props.is === "string" || typeof props.is === "number")
           return props.is;
-        return props.is ? (0, lib_exports.h)(props.is) : null;
+        return props.is ? (0, vue_exports.h)(props.is) : null;
       };
     }
   });
-  var OverlaysProvider = (0, lib_exports.defineComponent)({
+
+  // src/components/OverlayProvider.ts
+  var OverlayProvider = (0, lib_exports.defineComponent)({
     setup(_, { slots }) {
       const instances = (0, lib_exports.ref)([]);
       function render2(Instance, props) {
-        instances.value.push({ Instance, props });
+        console.log({ Instance, props });
+        instances.value.push({ Instance: (0, vue_exports.markRaw)(Instance), props });
       }
       function vanish(instance) {
-        instances.value = instances.value.filter(({ Instance }) => Instance === instance);
+        instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
       }
       (0, lib_exports.provide)(InstancesInjectionKey, { render: render2, vanish });
       return () => {
         var _a;
         return (0, lib_exports.h)(lib_exports.Fragment, [
-          ...instances.value.map(({ Instance, props }, index) => (0, lib_exports.h)(Instance, { ...props, key: index })),
+          ...instances.value.map(
+            ({ Instance, props }, index) => (0, lib_exports.h)(Instance, { ...props, key: index })
+          ),
           (_a = slots.default) == null ? void 0 : _a.call(slots)
         ]);
       };

package/dist/index.js

@@ -5,11 +5,11 @@ var context = {
 var ScriptsInjectionKey = Symbol("OverlayScripts");
 var InstancesInjectionKey = Symbol("OverlayInstances");
 
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 import { getCurrentInstance, inject, onMounted, provide } from "vue-demi";
 import { useVModel } from "@vueuse/core";
 import { delay, noop } from "@overlastic/core";
-function usePrograms(options = {}) {
+function useOverlayDefine(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 usePrograms in component setup");
+    throw new Error("Please use useOverlayDefine in component setup");
   const visible = useVModel(instance.props, model, instance.emit, { passive: true });
   const _reject = (value) => {
     instance == null ? void 0 : instance.emit(reject, value);
@@ -50,7 +50,7 @@ function useDeclarative(model, options = {}) {
   };
 }
 
-// src/composable/useScripts.ts
+// src/composable/scripts.ts
 import { ref } from "vue-demi";
 function useScripts(options) {
   const { reject: _reject } = options.deferred || {};
@@ -69,7 +69,7 @@ function useScripts(options) {
   };
 }
 
-// src/composable/useOverlayHolder.ts
+// src/composable/holder.ts
 import { Teleport, defineComponent, h, provide as provide2, ref as ref2 } from "vue-demi";
 import { createDeferred, defineName } from "@overlastic/core";
 import { pascalCase } from "pascal-case";
@@ -77,11 +77,7 @@ 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),
@@ -113,12 +109,12 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/useOverlay.ts
+// src/composable/overlay.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";
 var { define } = createConstructor((Instance, props, options) => {
-  const { container, id, deferred, render, vanish: _vanish } = options;
+  const { id, deferred, render, vanish: _vanish } = options;
   const InstanceWithProvider = defineComponent2({
     name: pascalCase2(id),
     setup: () => {
@@ -129,10 +125,9 @@ var { define } = createConstructor((Instance, props, options) => {
   });
   function vanish() {
     _vanish(InstanceWithProvider);
-    container.remove();
   }
-  render(Instance, props);
-});
+  render(InstanceWithProvider, props);
+}, { container: false });
 function useOverlay(Instance) {
   const { render, vanish } = inject2(InstancesInjectionKey);
   return define(Instance, { render, vanish });
@@ -181,18 +176,8 @@ var constructor = createConstructor2((Instance, props, options) => {
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/components/index.ts
-import { Fragment, defineComponent as defineComponent4, getCurrentInstance as getCurrentInstance2, h as h4, provide as provide5, ref as ref3 } from "vue-demi";
-var Provider = defineComponent4({
-  setup(_, { slots }) {
-    const { appContext } = getCurrentInstance2();
-    context.appContext = appContext;
-    return () => {
-      var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots);
-    };
-  }
-});
+// src/components/Field.ts
+import { defineComponent as defineComponent4, h as h4 } from "vue";
 var Field = defineComponent4({
   name: "Field",
   props: {
@@ -209,20 +194,27 @@ var Field = defineComponent4({
     };
   }
 });
-var OverlaysProvider = defineComponent4({
+
+// src/components/OverlayProvider.ts
+import { Fragment, defineComponent as defineComponent5, h as h5, provide as provide5, ref as ref3 } from "vue-demi";
+import { markRaw } from "vue";
+var OverlayProvider = defineComponent5({
   setup(_, { slots }) {
     const instances = ref3([]);
     function render(Instance, props) {
-      instances.value.push({ Instance, props });
+      console.log({ Instance, props });
+      instances.value.push({ Instance: markRaw(Instance), props });
     }
     function vanish(instance) {
-      instances.value = instances.value.filter(({ Instance }) => Instance === instance);
+      instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
     }
     provide5(InstancesInjectionKey, { render, vanish });
     return () => {
       var _a;
-      return h4(Fragment, [
-        ...instances.value.map(({ Instance, props }, index) => h4(Instance, { ...props, key: index })),
+      return h5(Fragment, [
+        ...instances.value.map(
+          ({ Instance, props }, index) => h5(Instance, { ...props, key: index })
+        ),
         (_a = slots.default) == null ? void 0 : _a.call(slots)
       ]);
     };
@@ -237,13 +229,12 @@ var unoverlay = { install };
 var src_default = unoverlay;
 export {
   Field,
-  OverlaysProvider,
-  Provider,
+  OverlayProvider,
   src_default as default,
   defineOverlay,
   install,
   renderOverlay,
   useOverlay,
-  useOverlayHolder,
-  usePrograms
+  useOverlayDefine,
+  useOverlayHolder
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vue",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -26,10 +26,10 @@
   ],
   "dependencies": {
     "@vueuse/core": "^10.9.0",
-    "pascal-case": "latest",
+    "pascal-case": "3.1.2",
     "vue": "^3.3.2",
     "vue-demi": ">=0.14.7",
-    "@overlastic/core": "^0.4.3"
+    "@overlastic/core": "^0.5.0"
   },
   "scripts": {
     "build": "tsup src/index.ts",