@overlastic/vue 0.4.7

package/LICENSE

@@ -0,0 +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.
+
+

package/README.md

@@ -0,0 +1,86 @@
+# 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"
+```

package/dist/index.cjs

@@ -0,0 +1,284 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Field: () => Field,
+  OverlaysProvider: () => OverlaysProvider,
+  Provider: () => Provider,
+  default: () => src_default,
+  defineOverlay: () => defineOverlay,
+  install: () => install,
+  renderOverlay: () => renderOverlay,
+  useOverlay: () => useOverlay,
+  useOverlayHolder: () => useOverlayHolder,
+  usePrograms: () => usePrograms
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/internal/index.ts
+var context = {
+  appContext: null
+};
+var ScriptsInjectionKey = Symbol("OverlayScripts");
+var InstancesInjectionKey = Symbol("OverlayInstances");
+
+// src/composable/usePrograms.ts
+var import_vue_demi = require("vue-demi");
+var import_core = require("@vueuse/core");
+var import_core2 = require("@overlastic/core");
+function usePrograms(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");
+  const { visible, deferred, vanish } = overlay;
+  async function destroy() {
+    visible.value = false;
+    await (0, import_core2.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);
+  return overlay;
+}
+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");
+  const visible = (0, import_core.useVModel)(instance.props, model, instance.emit, { passive: true });
+  const _reject = (value) => {
+    instance == null ? void 0 : instance.emit(reject, value);
+    visible.value = false;
+  };
+  const _resolve = (value) => {
+    instance == null ? void 0 : instance.emit(resolve, value);
+    visible.value = false;
+  };
+  return {
+    reject: _reject,
+    resolve: _resolve,
+    vanish: import_core2.noop,
+    visible,
+    in_dec: true
+  };
+}
+
+// src/composable/useScripts.ts
+var import_vue_demi2 = require("vue-demi");
+function useScripts(options) {
+  const { reject: _reject } = options.deferred || {};
+  const { vanish: _vanish } = options;
+  const visible = (0, import_vue_demi2.ref)(false);
+  function vanish() {
+    _vanish == null ? void 0 : _vanish();
+    _reject == null ? void 0 : _reject();
+  }
+  return {
+    resolve: options.deferred.resolve,
+    reject: options.deferred.reject,
+    deferred: options.deferred,
+    visible,
+    vanish
+  };
+}
+
+// src/composable/useOverlayHolder.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() {
+  const visible = (0, import_vue_demi3.ref)(false);
+  const refresh = (0, import_vue_demi3.ref)(false);
+  const props = (0, import_vue_demi3.ref)();
+  const scripts = { vanish, visible };
+  function vanish() {
+    refresh.value = false;
+    props.value = {};
+    scripts.reject();
+  }
+  function callback(_props) {
+    scripts.deferred = (0, import_core3.createDeferred)();
+    scripts.resolve = scripts.deferred.resolve;
+    scripts.reject = scripts.deferred.reject;
+    props.value = _props;
+    refresh.value = true;
+    return scripts.deferred;
+  }
+  return { callback, scripts, props, refresh };
+}
+
+// src/composable/useOverlay.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 InstanceWithProvider = (0, import_vue.defineComponent)({
+    name: (0, import_pascal_case2.pascalCase)(id),
+    setup: () => {
+      const scripts = useScripts({ vanish, deferred });
+      (0, import_vue.provide)(ScriptsInjectionKey, scripts);
+    },
+    render: () => (0, import_vue.h)(Instance, props)
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+    container.remove();
+  }
+  render(Instance, props);
+});
+function useOverlay(Instance) {
+  const { render, vanish } = (0, import_vue.inject)(InstancesInjectionKey);
+  return define(Instance, { render, vanish });
+}
+
+// src/define/constructor.ts
+var import_core5 = require("@overlastic/core");
+var import_pascal_case3 = require("pascal-case");
+var import_vue_demi4 = require("vue-demi");
+
+// src/utils/index.ts
+function inheritParent(app, appContext) {
+  var _a;
+  const parent = (appContext == null ? void 0 : appContext.app) || ((_a = context.appContext) == null ? void 0 : _a.app);
+  if (parent) {
+    app.config.globalProperties = parent.config.globalProperties;
+    Object.assign(app._context, parent._context);
+  }
+}
+
+// src/define/constructor.ts
+var constructor = (0, import_core5.createConstructor)((Instance, props, options) => {
+  const { container, id, deferred, appContext } = options;
+  function vanish() {
+    app.unmount();
+    container.remove();
+  }
+  const InstanceWithProvider = (0, import_vue_demi4.defineComponent)({
+    name: (0, import_pascal_case3.pascalCase)(id),
+    setup: () => {
+      const scripts = useScripts({
+        vanish,
+        deferred
+      });
+      (0, import_vue_demi4.provide)(ScriptsInjectionKey, scripts);
+    },
+    render: () => (0, import_vue_demi4.h)(Instance, props)
+  });
+  const app = (0, import_vue_demi4.createApp)(InstanceWithProvider);
+  inheritParent(app, appContext);
+  app.mount(container);
+  return vanish;
+});
+
+// src/define/index.ts
+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)({
+  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_demi5.h)(props.is) : null;
+    };
+  }
+});
+var OverlaysProvider = (0, import_vue_demi5.defineComponent)({
+  setup(_, { slots }) {
+    const instances = (0, import_vue_demi5.ref)([]);
+    function render(Instance, props) {
+      instances.value.push({ 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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Field,
+  OverlaysProvider,
+  Provider,
+  defineOverlay,
+  install,
+  renderOverlay,
+  useOverlay,
+  useOverlayHolder,
+  usePrograms
+});

package/dist/index.d.cts

@@ -0,0 +1,114 @@
+import * as vue_demi from 'vue-demi';
+import { Ref, Component, AppContext, PropType, VNode, 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';
+
+interface PromptifyEvents {
+    /**
+     * reject event name used by the template
+     *
+     * @default 'reject'
+     */
+    reject?: string;
+    /**
+     * resolve event name used by the template
+     *
+     * @default 'resolve'
+     */
+    resolve?: string;
+}
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+    /**
+     * v-model fields used by template
+     *
+     * @default 'visible'
+     */
+    model?: string;
+    /**
+     * template use event name
+     */
+    events?: PromptifyEvents;
+    /**
+     * whether to automatically handle components based on visible and duration
+     *
+     * @default true
+     */
+    automatic?: boolean;
+}
+interface ProgramsReturn {
+    /** the notification reject, modify visible, and destroy it after the duration ends */
+    reject: Function;
+    /** the notification resolve, modify visible, and destroy it after the duration ends */
+    resolve: Function;
+    /** destroy the current instance (immediately) */
+    vanish: Function;
+    /** visible control popup display and hide */
+    visible: Ref<boolean>;
+    /** current deferred */
+    deferred?: Deferred<any>;
+}
+/**
+ * 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 vanish destroy the current instance (immediately)
+ * @field visible control overlay display and hide
+ * @returns
+ */
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
+
+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>;
+
+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 Provider: Component;
+declare const Field: vue_demi.DefineComponent<{
+    is: {
+        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+            [key: string]: any;
+        }> | Component>;
+        default: string;
+    };
+}, () => string | number | VNode<vue_demi.RendererNode, vue_demi.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<{
+    is: {
+        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+            [key: string]: any;
+        }> | Component>;
+        default: string;
+    };
+}>>, {
+    is: string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }> | Component;
+}, {}>;
+declare const OverlaysProvider: vue_demi.DefineComponent<{}, () => 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 function install(app: App): void;
+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 };

package/dist/index.d.ts

@@ -0,0 +1,114 @@
+import * as vue_demi from 'vue-demi';
+import { Ref, Component, AppContext, PropType, VNode, 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';
+
+interface PromptifyEvents {
+    /**
+     * reject event name used by the template
+     *
+     * @default 'reject'
+     */
+    reject?: string;
+    /**
+     * resolve event name used by the template
+     *
+     * @default 'resolve'
+     */
+    resolve?: string;
+}
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+    /**
+     * v-model fields used by template
+     *
+     * @default 'visible'
+     */
+    model?: string;
+    /**
+     * template use event name
+     */
+    events?: PromptifyEvents;
+    /**
+     * whether to automatically handle components based on visible and duration
+     *
+     * @default true
+     */
+    automatic?: boolean;
+}
+interface ProgramsReturn {
+    /** the notification reject, modify visible, and destroy it after the duration ends */
+    reject: Function;
+    /** the notification resolve, modify visible, and destroy it after the duration ends */
+    resolve: Function;
+    /** destroy the current instance (immediately) */
+    vanish: Function;
+    /** visible control popup display and hide */
+    visible: Ref<boolean>;
+    /** current deferred */
+    deferred?: Deferred<any>;
+}
+/**
+ * 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 vanish destroy the current instance (immediately)
+ * @field visible control overlay display and hide
+ * @returns
+ */
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+type InjectionHolder<Props, Resolved> = [Component, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(component: Component, options?: Omit<GlobalMountOptions, 'appContext'>): InjectionHolder<Props, Resolved>;
+
+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>;
+
+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 Provider: Component;
+declare const Field: vue_demi.DefineComponent<{
+    is: {
+        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+            [key: string]: any;
+        }> | Component>;
+        default: string;
+    };
+}, () => string | number | VNode<vue_demi.RendererNode, vue_demi.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<{
+    is: {
+        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+            [key: string]: any;
+        }> | Component>;
+        default: string;
+    };
+}>>, {
+    is: string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }> | Component;
+}, {}>;
+declare const OverlaysProvider: vue_demi.DefineComponent<{}, () => 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 function install(app: App): void;
+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 };