@overlastic/vue 0.8.0 → 0.8.3

package/dist/index.cjs

@@ -18,19 +18,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Field: () => Field,
   OverlaysProvider: () => OverlaysProvider,
-  default: () => src_default,
+  default: () => index_default,
   defineOverlay: () => defineOverlay,
   install: () => install,
   renderOverlay: () => renderOverlay,
-  useExtendOverlay: () => useExtendOverlay,
-  useOverlayHolder: () => useOverlayHolder,
-  useOverlayInject: () => useOverlayInject
+  useDisclosure: () => useDisclosure,
+  useOverlay: () => useOverlay
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/internal/index.ts
 var context = {
@@ -39,99 +38,126 @@ var context = {
 var ScriptsInjectionKey = Symbol("OverlayScripts");
 var InstancesInjectionKey = Symbol("OverlayInstances");
 
-// src/composable/define.ts
+// src/components/Field.ts
+var import_vue = require("vue");
+var Field = (0, import_vue.defineComponent)({
+  name: "Field",
+  props: {
+    is: {
+      type: [String, Number, Object],
+      default: ""
+    }
+  },
+  setup(props) {
+    return () => {
+      if (typeof props.is === "string" || typeof props.is === "number")
+        return props.is;
+      return props.is ? (0, import_vue.h)(props.is) : null;
+    };
+  }
+});
+
+// src/components/Provider.ts
+var import_vue2 = require("vue");
 var import_vue_demi = require("vue-demi");
-var import_core = require("@vueuse/core");
-var import_core2 = require("@overlastic/core");
-function useExtendOverlay(options = {}) {
+var OverlaysProvider = (0, import_vue_demi.defineComponent)({
+  setup(_, { slots }) {
+    const instances = (0, import_vue_demi.ref)([]);
+    function render(Instance, props) {
+      instances.value.push({ Instance: (0, import_vue2.markRaw)(Instance), props });
+    }
+    function vanish(instance) {
+      instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
+    }
+    (0, import_vue_demi.provide)(InstancesInjectionKey, { render, vanish });
+    return () => {
+      var _a;
+      return (0, import_vue_demi.h)(import_vue_demi.Fragment, [
+        ...instances.value.map(
+          ({ Instance, props }, index) => (0, import_vue_demi.h)(Instance, { ...props, key: index })
+        ),
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
+      ]);
+    };
+  }
+});
+
+// src/composable/disclosure.ts
+var import_core = require("@overlastic/core");
+var import_core2 = require("@vueuse/core");
+var import_vue_demi2 = require("vue-demi");
+function useDisclosure(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true } = options;
-  const overlay = (0, import_vue_demi.inject)(ScriptsInjectionKey, useDeclarative(model, options));
+  const overlay = (0, import_vue_demi2.inject)(ScriptsInjectionKey, useDeclarative(model, options));
   const dec = Reflect.get(overlay, "in_dec");
   const { visible, deferred, vanish } = overlay;
   async function destroy() {
     visible.value = false;
-    await (0, import_core2.delay)(duration);
+    await (0, import_core.delay)(duration);
     vanish == null ? void 0 : vanish();
     return Promise.resolve();
   }
   if (!dec && automatic)
     deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
   if (!dec && immediate)
-    (0, import_vue_demi.onMounted)(() => visible.value = true);
-  (0, import_vue_demi.provide)(ScriptsInjectionKey, null);
+    (0, import_vue_demi2.onMounted)(() => visible.value = true);
+  (0, import_vue_demi2.provide)(ScriptsInjectionKey, null);
   return overlay;
 }
 function useDeclarative(model, options = {}) {
-  const { reject = "reject", resolve = "resolve" } = options.events || {};
-  const instance = (0, import_vue_demi.getCurrentInstance)();
+  const { cancel = "cancel", confirm = "confirm", close = "close" } = options.events || {};
+  const instance = (0, import_vue_demi2.getCurrentInstance)();
   if (!instance)
-    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);
+    throw new Error("Please use useDisclosure in component setup");
+  const visible = (0, import_core2.useVModel)(instance.props, model, instance.emit, { passive: true });
+  const _cancel = (value) => {
+    instance == null ? void 0 : instance.emit(cancel, value);
+    visible.value = false;
+  };
+  const _confirm = (value) => {
+    instance == null ? void 0 : instance.emit(confirm, value);
     visible.value = false;
   };
-  const _resolve = (value) => {
-    instance == null ? void 0 : instance.emit(resolve, value);
+  const _close = (value) => {
+    instance == null ? void 0 : instance.emit(close, value);
     visible.value = false;
   };
   return {
-    reject: _reject,
-    resolve: _resolve,
-    vanish: import_core2.noop,
+    cancel: _cancel,
+    confirm: _confirm,
+    close: _close,
+    vanish: import_core.noop,
     visible,
     in_dec: true
   };
 }
 
-// src/composable/scripts.ts
-var import_vue_demi2 = require("vue-demi");
-function useScripts(options) {
-  const { reject: _reject } = options.deferred || {};
+// src/composable/overlay.ts
+var import_core4 = require("@overlastic/core");
+var import_pascal_case = require("pascal-case");
+var import_vue3 = require("vue");
+
+// src/composable/utils/index.ts
+var import_core3 = require("@overlastic/core");
+var import_vue_demi3 = require("vue-demi");
+function createScripts(options) {
+  const { cancel: _cancel } = options.deferred || {};
   const { vanish: _vanish } = options;
-  const visible = (0, import_vue_demi2.ref)(false);
+  const visible = (0, import_vue_demi3.ref)(false);
   function vanish() {
     _vanish == null ? void 0 : _vanish();
-    _reject == null ? void 0 : _reject();
+    _cancel == null ? void 0 : _cancel();
   }
   return {
-    resolve: options.deferred.resolve,
-    reject: options.deferred.reject,
+    confirm: options.deferred.confirm,
+    cancel: options.deferred.cancel,
+    close: () => options.deferred.confirm(),
     deferred: options.deferred,
     visible,
     vanish
   };
 }
-
-// src/composable/holder.ts
-var import_vue_demi3 = require("vue-demi");
-var import_core3 = require("@overlastic/core");
-var import_pascal_case = require("pascal-case");
-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)
-      ])
-    );
-  }
-  const Holder = (0, import_vue_demi3.defineComponent)({
-    name: (0, import_pascal_case.pascalCase)(name),
-    setup() {
-      (0, import_vue_demi3.provide)(ScriptsInjectionKey, scripts);
-      return () => refresh.value ? render() : null;
-    }
-  });
-  return [Holder, callback];
-}
-function useRefreshMetadata() {
+function createRefreshMetadata() {
   const visible = (0, import_vue_demi3.ref)(false);
   const refresh = (0, import_vue_demi3.ref)(false);
   const props = (0, import_vue_demi3.ref)();
@@ -139,12 +165,12 @@ function useRefreshMetadata() {
   function vanish() {
     refresh.value = false;
     props.value = {};
-    scripts.reject();
+    scripts.cancel();
   }
   function callback(_props) {
     scripts.deferred = (0, import_core3.createDeferred)();
-    scripts.resolve = scripts.deferred.resolve;
-    scripts.reject = scripts.deferred.reject;
+    scripts.confirm = scripts.deferred.confirm;
+    scripts.cancel = scripts.deferred.cancel;
     props.value = _props;
     refresh.value = true;
     return scripts.deferred;
@@ -152,33 +178,63 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/inject.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) => {
+// src/composable/overlay.ts
+var { define: defineInject } = (0, import_core4.createConstructor)((Instance, props, options) => {
   const { id, deferred, render, vanish: _vanish } = options;
-  const InstanceWithProvider = (0, import_vue.defineComponent)({
-    name: (0, import_pascal_case2.pascalCase)(id),
+  const InstanceWithProvider = (0, import_vue3.defineComponent)({
+    name: (0, import_pascal_case.pascalCase)(id),
     setup: () => {
-      const scripts = useScripts({ vanish, deferred });
-      (0, import_vue.provide)(ScriptsInjectionKey, scripts);
+      const scripts = createScripts({ vanish, deferred });
+      (0, import_vue3.provide)(ScriptsInjectionKey, scripts);
     },
-    render: () => (0, import_vue.h)(Instance, props)
+    render: () => (0, import_vue3.h)(Instance, props)
   });
   function vanish() {
     _vanish(InstanceWithProvider);
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlayInject(Instance) {
-  const { render, vanish } = (0, import_vue.inject)(InstancesInjectionKey);
-  return define(Instance, { render, vanish });
+function defineHolder(component, options = {}) {
+  const { callback, scripts, props, refresh } = createRefreshMetadata();
+  const name = (0, import_core4.defineName)(options.id, options.autoIncrement);
+  function render() {
+    return (0, import_vue3.h)(
+      import_vue3.Teleport,
+      {
+        to: options.root || document.body,
+        disabled: options.root === false
+      },
+      (0, import_vue3.h)("div", { id: name }, [
+        (0, import_vue3.h)(component, props.value)
+      ])
+    );
+  }
+  const Holder = (0, import_vue3.defineComponent)({
+    name: (0, import_pascal_case.pascalCase)(name),
+    setup() {
+      (0, import_vue3.provide)(ScriptsInjectionKey, scripts);
+      return () => refresh.value ? render() : null;
+    }
+  });
+  return [
+    Holder,
+    callback
+  ];
+}
+function useOverlay(Instance, options = {}) {
+  const { type = "inject" } = options != null ? options : {};
+  if (type === "inject") {
+    const { render, vanish } = (0, import_vue3.inject)(InstancesInjectionKey);
+    return defineInject(Instance, { render, vanish });
+  }
+  if (type === "holder") {
+    return defineHolder(Instance, options);
+  }
 }
 
 // src/define/constructor.ts
 var import_core5 = require("@overlastic/core");
-var import_pascal_case3 = require("pascal-case");
+var import_pascal_case2 = require("pascal-case");
 var import_vue_demi4 = require("vue-demi");
 
 // src/utils/index.ts
@@ -199,9 +255,9 @@ var constructor = (0, import_core5.createConstructor)((Instance, props, options)
     container.remove();
   }
   const InstanceWithProvider = (0, import_vue_demi4.defineComponent)({
-    name: (0, import_pascal_case3.pascalCase)(id),
+    name: (0, import_pascal_case2.pascalCase)(id),
     setup: () => {
-      const scripts = useScripts({
+      const scripts = createScripts({
         vanish,
         deferred
       });
@@ -219,57 +275,12 @@ var constructor = (0, import_core5.createConstructor)((Instance, props, options)
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/components/Field.ts
-var import_vue2 = require("vue");
-var Field = (0, import_vue2.defineComponent)({
-  name: "Field",
-  props: {
-    is: {
-      type: [String, Number, Object],
-      default: ""
-    }
-  },
-  setup(props) {
-    return () => {
-      if (typeof props.is === "string" || typeof props.is === "number")
-        return props.is;
-      return props.is ? (0, import_vue2.h)(props.is) : null;
-    };
-  }
-});
-
-// src/components/Provider.ts
-var import_vue_demi5 = require("vue-demi");
-var import_vue3 = require("vue");
-var OverlaysProvider = (0, import_vue_demi5.defineComponent)({
-  setup(_, { slots }) {
-    const instances = (0, import_vue_demi5.ref)([]);
-    function render(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);
-    }
-    (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 })
-        ),
-        (_a = slots.default) == null ? void 0 : _a.call(slots)
-      ]);
-    };
-  }
-});
-
 // src/index.ts
 function install(app) {
   context.appContext = app._context;
 }
 var unoverlay = { install };
-var src_default = unoverlay;
+var index_default = unoverlay;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Field,
@@ -277,7 +288,6 @@ var src_default = unoverlay;
   defineOverlay,
   install,
   renderOverlay,
-  useExtendOverlay,
-  useOverlayHolder,
-  useOverlayInject
+  useDisclosure,
+  useOverlay
 });

package/dist/index.d.cts

@@ -1,25 +1,52 @@
 import * as vue_demi from 'vue-demi';
 import { Ref, AppContext, App } from 'vue-demi';
-import * as _overlastic_core from '@overlastic/core';
-import { Deferred, ImperativeOverlay, GlobalMountOptions, MountOptions } from '@overlastic/core';
 import * as vue from 'vue';
-import { Component, PropType, VNode } from 'vue';
+import { PropType, VNode, Component, VNodeProps } from 'vue';
+import { Deferred, MountOptions, ImperativeOverlay } from '@overlastic/core';
+
+declare const Field: vue.DefineComponent<{
+    is: {
+        type: PropType<string | number | VNode | Component>;
+        default: string;
+    };
+}, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    is: {
+        type: PropType<string | number | VNode | Component>;
+        default: string;
+    };
+}>>, {
+    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | Component;
+}, {}>;
+
+declare const OverlaysProvider: 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<{}>>, {}, {}>;
 
 interface PromptifyEvents {
     /**
-     * reject event name used by the template
+     * cancel event name used by the template
+     *
+     * @default 'cancel'
+     */
+    cancel?: string;
+    /**
+     * confirm event name used by the template
      *
-     * @default 'reject'
+     * @default 'confirm'
      */
-    reject?: string;
+    confirm?: string;
     /**
-     * resolve event name used by the template
+     * confirm event name used by the template
      *
-     * @default 'resolve'
+     * @default 'close'
      */
-    resolve?: string;
+    close?: string;
 }
-interface ExtendOverlayOptions {
+interface UseDisclosureOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -41,11 +68,13 @@ interface ExtendOverlayOptions {
      */
     automatic?: boolean;
 }
-interface ExtendOverlayReturn {
-    /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: (reason?: any) => void;
-    /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: (value?: any) => void;
+interface UseDisclosureReturn {
+    /** the notification cancel, modify visible, and destroy it after the duration ends */
+    cancel: (reason?: any) => void;
+    /** the notification confirm, modify visible, and destroy it after the duration ends */
+    confirm: (value?: any) => void;
+    /** the notification confirm, modify visible, and destroy it after the duration ends */
+    close: () => void;
     /** destroy the current instance (immediately) */
     vanish: () => void;
     /** visible control popup display and hide */
@@ -55,61 +84,39 @@ interface ExtendOverlayReturn {
 }
 /**
  * get overlay layer meta information
- * @function reject  the notification reject, modify visible, and destroy it after the duration ends
- * @function resolve the notification resolve, modify visible, and destroy it after the duration ends
+ * @function cancel  the notification cancel, modify visible, and destroy it after the duration ends
+ * @function confirm the notification confirm, modify visible, and destroy it after the duration ends
  * @function vanish destroy the current instance (immediately)
  * @field visible control overlay display and hide
  */
-declare function useExtendOverlay(options?: ExtendOverlayOptions): ExtendOverlayReturn;
+declare function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;
 
 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, props: any) => void;
-    vanish: (instance: Component) => void;
-}
-declare function useOverlayInject<Component extends AbstractFn, Resolved>(Instance: Component): _overlastic_core.ImperativeOverlay<InstanceType<Component>["$props"], Resolved, Options>;
+type KnownKeys<T> = {
+    [K in keyof T]: T[K] extends unknown ? (unknown extends T[K] ? never : K) : never;
+}[keyof T];
+type PickKnown<T> = Pick<T, KnownKeys<T>>;
+type ExtractEvent<T extends AbstractFn> = Parameters<Required<InstanceType<T>['$props']>['onConfirm']>[0];
+type ExtractProps<T extends AbstractFn> = PickKnown<Omit<InstanceType<T>['$props'], keyof VNodeProps | `on${string}` | 'visible'>>;
+declare function useOverlay<Comp extends AbstractFn, Resolved = ExtractEvent<Comp>>(Instance: Comp, options?: MountOptions<{
+    type?: 'inject';
+}>): ImperativeOverlay<ExtractProps<Comp>, Resolved>;
+declare function useOverlay<Comp extends AbstractFn, Resolved = ExtractEvent<Comp>>(Instance: Comp, options?: MountOptions<{
+    type?: 'holder';
+}>): [Comp, ImperativeOverlay<ExtractProps<Comp>, Resolved>];
 
 interface VMountOptions {
     /** current app context */
     appContext?: AppContext;
 }
 
-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>;
-        default: string;
-    };
-}, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | null, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    is: {
-        type: PropType<string | number | VNode<vue.RendererNode, vue.RendererElement, {
-            [key: string]: any;
-        }> | Component>;
-        default: string;
-    };
-}>>, {
-    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
-        [key: string]: any;
-    }> | Component;
-}, {}>;
-
-declare const OverlaysProvider: 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<{}>>, {}, {}>;
+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 function install(app: App): void;
 declare const unoverlay: {
     install: typeof install;
 };
 
-export { type ExtendOverlayOptions, type ExtendOverlayReturn, Field, type InjectionHolder, OverlaysProvider, unoverlay as default, defineOverlay, install, renderOverlay, useExtendOverlay, useOverlayHolder, useOverlayInject };
+export { Field, OverlaysProvider, type UseDisclosureOptions, type UseDisclosureReturn, unoverlay as default, defineOverlay, install, renderOverlay, useDisclosure, useOverlay };