@overlastic/vanilla 0.4.3

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,101 @@
+# @overlastic/vanilla
+
+create imperative overlays in the native application, support custom-element!
+
+## Install
+
+With pnpm: 
+```sh
+pnpm add @overlastic/vanilla
+```
+
+With yarn:
+```sh
+yarn add @overlastic/vanilla
+```
+
+## Usage
+
+
+### Step 1: Define Component
+
+Create custom elements in the form of functions and return them.
+
+```js
+// overlay.ts
+function Component(props) {
+  const element = document.createElement('div')
+  element.innerHTML = props.title
+
+  const { resolve, reject, deferred } = usePrograms({
+    // Duration of overlays duration to avoid premature destruction of the component
+    duration: 1000,
+  })
+
+  // Add events that cause the overlays to end
+  element.onclick = function () {
+    resolve('ok')
+  }
+
+  // Use setTimeout to wait for the element to be appended, then add a class name with animation
+  setTimeout(() => element.classList.add('show'))
+  // When the deferred is triggered, remove the displayed class name
+  deferred.finally(() => element.classList.remove('show'))
+
+  return element
+}
+
+export default Component
+```
+
+### 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/vanilla'
+import Component from './overlay'
+
+// Convert to imperative callback
+const callback = defineOverlay(Component)
+// 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 { defineOverlay } from '@overlastic/vanilla'
+import Component from './overlay'
+
+const value = await renderOverlay(Component, {
+  title: 'usePrograms'
+})
+// value === "usePrograms:confirmed"
+```
+
+## Custom Element
+
+After mounting a custom element, you can pass in the corresponding custom element or name through 'defineOverlay' to use the custom element.
+
+> You can use [lit](https://lit.dev/) Quickly build custom elements.
+
+```ts
+const callback1 = defineOverlay('my-custom-element')
+
+callback1({/* props(attrs) */})
+
+const CustomComponent = (props) => {
+  const customElement = document.createElement('my-custom-element')
+
+  const { resolve, reject } = usePrograms({
+    duration: 1000,
+  })
+
+  // ...
+  return customElement
+}
+
+const callback2 = defineOverlay(CustomComponent)
+```

package/dist/index.cjs

@@ -0,0 +1,98 @@
+"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, {
+  defineOverlay: () => defineOverlay,
+  renderOverlay: () => renderOverlay,
+  usePrograms: () => usePrograms
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/define/constructor.ts
+var import_core = require("@overlastic/core");
+
+// src/internal/index.ts
+var context = {
+  trigger: void 0,
+  options: void 0
+};
+function setupTrigger(c) {
+  context.trigger = c;
+}
+function clearTrigger() {
+  context.trigger = void 0;
+}
+function setupOptions(o = {}) {
+  context.options = o;
+}
+function clearOptions() {
+  context.options = void 0;
+}
+function useOptions() {
+  return context.options || {};
+}
+
+// src/define/constructor.ts
+var constructor = (0, import_core.createConstructor)((Inst, props, options) => {
+  const { container, deferred } = options;
+  function vanish() {
+    container.remove();
+  }
+  setupTrigger({
+    resolve: deferred.resolve,
+    reject: deferred.reject,
+    deferred,
+    vanish
+  });
+  const inst = parseElement(Inst, props);
+  const { duration = 0 } = useOptions();
+  clearTrigger();
+  clearOptions();
+  deferred.finally(() => (0, import_core.delay)(duration).then(vanish));
+  container.append(inst);
+});
+function parseElement(component, props) {
+  if (typeof component === "function")
+    return component(props);
+  const element = typeof component === "string" ? document.createElement(component) : component;
+  for (const [key, value] of Object.entries(props))
+    element.setAttribute(key, value);
+  return element;
+}
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+
+// src/composable/usePrograms.ts
+function usePrograms(options) {
+  const trigger = context.trigger;
+  if (!trigger)
+    throw new Error("Please execute in the overlays constructor");
+  setupOptions(options);
+  return trigger;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineOverlay,
+  renderOverlay,
+  usePrograms
+});

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import * as _overlastic_core from '@overlastic/core';
+import { Deferred } from '@overlastic/core';
+
+interface EFComponent<T = any> {
+    (props: T): HTMLElement;
+}
+type ElementComponent = HTMLElement | EFComponent | string;
+
+declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const renderOverlay: <Props, Resolved = void>(instance: ElementComponent, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+
+interface Context<T = void> {
+    resolve: Deferred<T>['resolve'];
+    reject: Deferred<T>['reject'];
+    deferred: Deferred<T>;
+    vanish: Function;
+}
+
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+}
+declare function usePrograms(options?: ProgramsOptions): Context<void>;
+
+export { type Context, type ProgramsOptions, defineOverlay, renderOverlay, usePrograms };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as _overlastic_core from '@overlastic/core';
+import { Deferred } from '@overlastic/core';
+
+interface EFComponent<T = any> {
+    (props: T): HTMLElement;
+}
+type ElementComponent = HTMLElement | EFComponent | string;
+
+declare const defineOverlay: <Props, Resolved = void>(instance: ElementComponent, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const renderOverlay: <Props, Resolved = void>(instance: ElementComponent, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+
+interface Context<T = void> {
+    resolve: Deferred<T>['resolve'];
+    reject: Deferred<T>['reject'];
+    deferred: Deferred<T>;
+    vanish: Function;
+}
+
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+}
+declare function usePrograms(options?: ProgramsOptions): Context<void>;
+
+export { type Context, type ProgramsOptions, defineOverlay, renderOverlay, usePrograms };

package/dist/index.global.js

@@ -0,0 +1,197 @@
+"use strict";
+var OverlaysVanilla = (() => {
+  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, {
+    defineOverlay: () => defineOverlay,
+    renderOverlay: () => renderOverlay,
+    usePrograms: () => usePrograms
+  });
+
+  // ../@core/src/define/global.ts
+  var UnifiedOverlayProviderID = "unified-overlay";
+  function defineGlobalElement(id = "", root = document.body) {
+    const el = document.createElement("div");
+    if (id)
+      el.id = id;
+    if (root !== false)
+      root.appendChild(el);
+    return el;
+  }
+
+  // ../@core/src/internal/index.ts
+  var context = {
+    position: null,
+    spaces: {}
+  };
+
+  // ../@core/src/define/name-index.ts
+  function defineName(id = UnifiedOverlayProviderID, auto = true) {
+    if (!context.spaces[id])
+      context.spaces[id] = 0;
+    if (auto)
+      return `${id}--${++context.spaces[id]}`;
+    return id;
+  }
+  function getIndex(id = UnifiedOverlayProviderID) {
+    return context.spaces[id] || 0;
+  }
+
+  // ../@core/src/deferred.ts
+  function createDeferred() {
+    let resolve, reject;
+    const promise = new Promise((_resolve, _reject) => {
+      resolve = _resolve;
+      reject = _reject;
+    });
+    promise.resolve = (v) => {
+      resolve(v);
+      return promise;
+    };
+    promise.reject = reject;
+    return promise;
+  }
+
+  // ../@core/src/events/index.ts
+  function watchClickPosition() {
+    if (typeof window === "undefined" && typeof document === "undefined")
+      return;
+    document.addEventListener("click", (event) => {
+      if (event.target instanceof Element) {
+        const { left, top, width, height } = event.target.getBoundingClientRect();
+        if (left > 0 || top > 0) {
+          context.position = { x: left + width / 2, y: top + height / 2 };
+        } else {
+          context.position = null;
+        }
+      } else {
+        context.position = null;
+      }
+      setTimeout(() => context.position = null, 64);
+    });
+  }
+
+  // ../@core/src/constructor.ts
+  function createConstructor(mount) {
+    function define(instance, options) {
+      function executor(props, options2) {
+        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, {
+          position: context.position,
+          id: name,
+          deferred,
+          index,
+          container
+        }));
+        return deferred;
+      }
+      let inst;
+      function only(props, options2) {
+        if (!inst) {
+          inst = executor(props, options2);
+          inst.finally(() => inst = void 0);
+        }
+        return inst;
+      }
+      function caller(props, overrides) {
+        const opts = { ...options, ...overrides };
+        return opts.only ? only(props, opts) : executor(props, opts);
+      }
+      return caller;
+    }
+    function render(instance, props, options) {
+      return define(instance, options)(props);
+    }
+    return { define, render };
+  }
+  watchClickPosition();
+
+  // ../@core/src/utils/util.ts
+  function delay(milliseconds) {
+    return new Promise((resolve) => setTimeout(resolve, milliseconds));
+  }
+
+  // src/internal/index.ts
+  var context2 = {
+    trigger: void 0,
+    options: void 0
+  };
+  function setupTrigger(c) {
+    context2.trigger = c;
+  }
+  function clearTrigger() {
+    context2.trigger = void 0;
+  }
+  function setupOptions(o = {}) {
+    context2.options = o;
+  }
+  function clearOptions() {
+    context2.options = void 0;
+  }
+  function useOptions() {
+    return context2.options || {};
+  }
+
+  // src/define/constructor.ts
+  var constructor = createConstructor((Inst, props, options) => {
+    const { container, deferred } = options;
+    function vanish() {
+      container.remove();
+    }
+    setupTrigger({
+      resolve: deferred.resolve,
+      reject: deferred.reject,
+      deferred,
+      vanish
+    });
+    const inst = parseElement(Inst, props);
+    const { duration = 0 } = useOptions();
+    clearTrigger();
+    clearOptions();
+    deferred.finally(() => delay(duration).then(vanish));
+    container.append(inst);
+  });
+  function parseElement(component, props) {
+    if (typeof component === "function")
+      return component(props);
+    const element = typeof component === "string" ? document.createElement(component) : component;
+    for (const [key, value] of Object.entries(props))
+      element.setAttribute(key, value);
+    return element;
+  }
+
+  // src/define/index.ts
+  var defineOverlay = constructor.define;
+  var renderOverlay = constructor.render;
+
+  // src/composable/usePrograms.ts
+  function usePrograms(options) {
+    const trigger = context2.trigger;
+    if (!trigger)
+      throw new Error("Please execute in the overlays constructor");
+    setupOptions(options);
+    return trigger;
+  }
+  return __toCommonJS(src_exports);
+})();

package/dist/index.js

@@ -0,0 +1,69 @@
+// src/define/constructor.ts
+import { createConstructor, delay } from "@overlastic/core";
+
+// src/internal/index.ts
+var context = {
+  trigger: void 0,
+  options: void 0
+};
+function setupTrigger(c) {
+  context.trigger = c;
+}
+function clearTrigger() {
+  context.trigger = void 0;
+}
+function setupOptions(o = {}) {
+  context.options = o;
+}
+function clearOptions() {
+  context.options = void 0;
+}
+function useOptions() {
+  return context.options || {};
+}
+
+// src/define/constructor.ts
+var constructor = createConstructor((Inst, props, options) => {
+  const { container, deferred } = options;
+  function vanish() {
+    container.remove();
+  }
+  setupTrigger({
+    resolve: deferred.resolve,
+    reject: deferred.reject,
+    deferred,
+    vanish
+  });
+  const inst = parseElement(Inst, props);
+  const { duration = 0 } = useOptions();
+  clearTrigger();
+  clearOptions();
+  deferred.finally(() => delay(duration).then(vanish));
+  container.append(inst);
+});
+function parseElement(component, props) {
+  if (typeof component === "function")
+    return component(props);
+  const element = typeof component === "string" ? document.createElement(component) : component;
+  for (const [key, value] of Object.entries(props))
+    element.setAttribute(key, value);
+  return element;
+}
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+
+// src/composable/usePrograms.ts
+function usePrograms(options) {
+  const trigger = context.trigger;
+  if (!trigger)
+    throw new Error("Please execute in the overlays constructor");
+  setupOptions(options);
+  return trigger;
+}
+export {
+  defineOverlay,
+  renderOverlay,
+  usePrograms
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@overlastic/vanilla",
+  "type": "module",
+  "version": "0.4.3",
+  "license": "MIT",
+  "homepage": "https://github.com/hairyf/overlastic#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hairyf/overlastic.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hairyf/overlastic/issues"
+  },
+  "keywords": [
+    "unified",
+    "overlay",
+    "svelte"
+  ],
+  "main": "./dist/index.cjs",
+  "publishConfig": {
+    "jsdelivr": "./dist/index.global.js",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@overlastic/core": "^0.4.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "lint": "eslint ."
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts"
+}