@overlastic/vue2 0.4.4

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,85 @@
+# 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 Vue from 'vue'
+import unoverlay from '@overlastic/vue'
+
+const app = new Vue({})
+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>
+import { usePrograms } from '@overlastic/vue2'
+export default {
+  mixins: [usePrograms({ duration: 1000 })],
+  methods: {
+    onClick() {
+      // use this.$visible
+      // use this.$resolve or this.$reject
+    }
+  }
+}
+</script>
+
+<template>
+  <div v-if="visible" @click="resolve(`${title}:confirmed`)">
+    {{ title }}
+  </div>
+</template>
+```
+
+### 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,191 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Field: () => Field,
+  default: () => src_default,
+  defineOverlay: () => defineOverlay,
+  install: () => install,
+  renderOverlay: () => renderOverlay,
+  usePrograms: () => usePrograms
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/internal/index.ts
+var import_vue = __toESM(require("vue"), 1);
+var context = {
+  parent: import_vue.default
+};
+var ScriptsInjectionKey = "$overlay";
+
+// src/composable/createVisibleScripts.ts
+var import_mitt = __toESM(require("mitt"), 1);
+function createVisibleScripts(options) {
+  const { reject: _reject, resolve: _resolve } = options.deferred || {};
+  const { vanish: _vanish } = options;
+  const { on, off, emit } = (0, import_mitt.default)();
+  function reject(value) {
+    emit("reject", value);
+    _reject == null ? void 0 : _reject(value);
+  }
+  function resolve(value) {
+    var _a;
+    (_a = options.deferred) == null ? void 0 : _a.resolve(value);
+    emit("resolve", value);
+    return _resolve == null ? void 0 : _resolve(value);
+  }
+  function vanish() {
+    _vanish == null ? void 0 : _vanish();
+    reject();
+    off("*");
+  }
+  if (options.deferred) {
+    options.deferred.resolve = resolve;
+    options.deferred.reject = reject;
+  }
+  return {
+    resolve,
+    reject,
+    vanish,
+    on
+  };
+}
+
+// src/composable/usePrograms.ts
+var import_core = require("@overlastic/core");
+var import_vue2 = __toESM(require("vue"), 1);
+function usePrograms(options = {}) {
+  const { duration = 0, immediate = true, model = "visible", automatic = true, events = {} } = options;
+  events.reject = events.reject || "reject";
+  events.resolve = events.resolve || "resolve";
+  const mixinOptions = import_vue2.default.extend({
+    inject: [ScriptsInjectionKey],
+    model: {
+      prop: model,
+      event: "change"
+    },
+    props: { [model]: Boolean },
+    data() {
+      if (this.$overlay)
+        return { runtime_visible: false };
+      return {};
+    },
+    computed: {
+      $visible: {
+        set(value) {
+          this.$overlay ? this.runtime_visible = value : this.$emit("change", value);
+          if (value === false && automatic)
+            (0, import_core.delay)(duration).then(this.$overlay.vanish);
+        },
+        get() {
+          return this.$overlay ? this.runtime_visible : this[model];
+        }
+      }
+    },
+    created() {
+      if (immediate)
+        this.$visible = true;
+      if (this.$overlay)
+        this.$overlay.on("*", this.$runtime_effect);
+    },
+    methods: {
+      async $runtime_effect(type, value) {
+        this.$emit(events[type], value);
+        this.$visible = false;
+      },
+      async $resolve(value) {
+        var _a;
+        (_a = this.$overlay) == null ? void 0 : _a.resolve(value);
+      },
+      async $reject(value) {
+        var _a;
+        (_a = this.$overlay) == null ? void 0 : _a.reject(value);
+      }
+    }
+  });
+  return mixinOptions;
+}
+
+// src/define/constructor.ts
+var import_core2 = require("@overlastic/core");
+var import_pascal_case = require("pascal-case");
+var import_vue3 = __toESM(require("vue"), 1);
+var constructor = (0, import_core2.createConstructor)((Inst, props, options) => {
+  const { container, id, deferred } = options;
+  function vanish() {
+    childApp.$destroy();
+    container.remove();
+  }
+  const $overlay = createVisibleScripts({
+    deferred,
+    vanish
+  });
+  const childApp = new import_vue3.default({
+    name: (0, import_pascal_case.pascalCase)(id),
+    parent: options.parent,
+    provide: () => ({ $overlay }),
+    render: (h) => h(Inst, { props })
+  });
+  const child = document.createElement("div");
+  container.appendChild(child);
+  childApp.$mount(child);
+});
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+
+// src/components/index.ts
+var Field = {
+  name: "Field",
+  props: {
+    value: [String, Object]
+  },
+  render(h) {
+    return h(this.value);
+  }
+};
+
+// src/index.ts
+var install = (_ins, parent) => {
+  if (parent)
+    context.parent = parent;
+};
+var unoverlay = { install };
+var src_default = unoverlay;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Field,
+  defineOverlay,
+  install,
+  renderOverlay,
+  usePrograms
+});

package/dist/index.d.cts

@@ -0,0 +1,69 @@
+import * as Vue from 'vue';
+import Vue__default, { Component, PluginObject } from 'vue';
+import * as vue_types_vue from 'vue/types/vue';
+import * as _overlastic_core from '@overlastic/core';
+
+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 {
+    /** duration 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;
+}
+declare function usePrograms(options?: ProgramsOptions): vue_types_vue.ExtendedVue<Vue__default, {
+    runtime_visible: boolean;
+} | {
+    runtime_visible?: undefined;
+}, {
+    $runtime_effect(type: 'reject' | 'resolve', value: any): Promise<void>;
+    $resolve(value: any): Promise<void>;
+    $reject(value: any): Promise<void>;
+}, {
+    $visible: any;
+}, {
+    [x: string]: any;
+}>;
+
+interface VMountOptions {
+    /** current app context */
+    parent?: Vue__default;
+}
+
+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 Field: Component;
+
+declare const install: (_ins: any, parent: any) => void;
+declare const unoverlay: PluginObject<Vue__default>;
+
+export { Field, type ProgramsOptions, unoverlay as default, defineOverlay, install, renderOverlay, usePrograms };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as Vue from 'vue';
+import Vue__default, { Component, PluginObject } from 'vue';
+import * as vue_types_vue from 'vue/types/vue';
+import * as _overlastic_core from '@overlastic/core';
+
+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 {
+    /** duration 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;
+}
+declare function usePrograms(options?: ProgramsOptions): vue_types_vue.ExtendedVue<Vue__default, {
+    runtime_visible: boolean;
+} | {
+    runtime_visible?: undefined;
+}, {
+    $runtime_effect(type: 'reject' | 'resolve', value: any): Promise<void>;
+    $resolve(value: any): Promise<void>;
+    $reject(value: any): Promise<void>;
+}, {
+    $visible: any;
+}, {
+    [x: string]: any;
+}>;
+
+interface VMountOptions {
+    /** current app context */
+    parent?: Vue__default;
+}
+
+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 Field: Component;
+
+declare const install: (_ins: any, parent: any) => void;
+declare const unoverlay: PluginObject<Vue__default>;
+
+export { Field, type ProgramsOptions, unoverlay as default, defineOverlay, install, renderOverlay, usePrograms };