@overlastic/svelte 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,102 @@
+# Getting Started
+
+create imperative overlays in the svelte application, supporting context inheritance!
+
+## Install
+
+With pnpm: 
+```sh
+pnpm add @overlastic/svelte
+```
+
+With yarn:
+```sh
+yarn add @overlastic/svelte
+```
+
+## Usage
+
+
+### Step 1: Define Component
+
+
+```svelte
+<script lang="ts">
+  import { usePrograms, Overlay } from "@overlastic/svelte";
+  import { fly } from "svelte/transition";
+  
+  export let title: number
+  export let duration = 200
+
+  // duration of overlay duration, helps prevent premature component destroy
+  const { resolve, reject } = usePrograms({ duration })
+
+  function onClick() {
+    resolve(`${title}:confirmed`)
+  }
+</script>
+
+<Overlay>
+  <div transition:fly={{ opacity: 0, duration }} on:click={onClick}>
+    <slot name="title">
+      { title }
+    </slot>
+  </div>
+</Overlay>
+```
+
+### 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/svelte'
+import OverlayComponent from './overlay.svelte'
+
+// 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/svelte'
+import OverlayComponent from './overlay.svelte'
+
+const value = await renderOverlay(OverlayComponent, {
+  title: 'usePrograms'
+})
+// value === "usePrograms:confirmed"
+```
+
+## Controlled manner
+
+By default, you do not need to control the display and hiding of the `visible` variable. The value is controlled by the component `Overlay`, and you can pass in `visible` to control the display
+
+
+```svelte
+<script lang="ts">
+  import { usePrograms, Overlay } from "@overlastic/svelte";
+
+  let visible = false
+
+  const { resolve, reject, deferred, vanish } = usePrograms({
+    // close the transition duration, at this point you need to manually destroy it
+    duration: false,
+    // cancel setting visible to true immediately
+    immediate: false
+  })
+
+  // Manually set vanish (when promise ends)
+  deferred.finally(() => vanish())
+</script>
+
+<Overlay bind:visible={visible}>
+  <div on:click={() => resolve(`${title}:confirmed`)}>
+    ...
+  </div>
+</Overlay>
+```

package/dist/index.cjs

@@ -0,0 +1,230 @@
+"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, {
+  Overlay: () => Overlay,
+  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 injectOverlayKey = Symbol("overlays:svelte");
+var injectOptionsKey = Symbol("overlays:options");
+
+// src/define/constructor.ts
+var constructor = (0, import_core.createConstructor)((Inst, props, options) => {
+  const { container, deferred, context: _context = /* @__PURE__ */ new Map() } = options;
+  function vanish() {
+    childApp.$destroy();
+    container.remove();
+  }
+  const context = new Map([..._context.entries()]);
+  context.set(injectOverlayKey, {
+    resolve: deferred.resolve,
+    reject: deferred.reject,
+    deferred,
+    visible: false,
+    vanish
+  });
+  const childApp = new Inst({
+    target: container,
+    props,
+    context
+  });
+});
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+
+// src/composable/usePrograms.ts
+var import_svelte = require("svelte");
+function usePrograms(options = {}) {
+  (0, import_svelte.setContext)(injectOptionsKey, options);
+  return (0, import_svelte.getContext)(injectOverlayKey);
+}
+
+// src/components/index.ts
+var import_svelte2 = require("svelte");
+var import_core2 = require("@overlastic/core");
+var import_internal3 = require("svelte/internal");
+function create_if_block(ctx) {
+  let current;
+  const default_slot_template = (
+    /* #slots */
+    ctx[2].default
+  );
+  const default_slot = (0, import_internal3.create_slot)(
+    default_slot_template,
+    ctx,
+    /* $$scope */
+    ctx[1],
+    null
+  );
+  return {
+    c() {
+      if (default_slot)
+        default_slot.c();
+    },
+    m(target, anchor) {
+      if (default_slot)
+        default_slot.m(target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      if (default_slot) {
+        if (default_slot.p && (!current || dirty & 2)) {
+          (0, import_internal3.update_slot_base)(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            /* $$scope */
+            ctx2[1],
+            !current ? (0, import_internal3.get_all_dirty_from_scope)(
+              /* $$scope */
+              ctx2[1]
+            ) : (0, import_internal3.get_slot_changes)(
+              default_slot_template,
+              /* $$scope */
+              ctx2[1],
+              dirty,
+              null
+            ),
+            null
+          );
+        }
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      (0, import_internal3.transition_in)(default_slot, local);
+      current = true;
+    },
+    o(local) {
+      (0, import_internal3.transition_out)(default_slot, local);
+      current = false;
+    },
+    d(detaching) {
+      if (default_slot)
+        default_slot.d(detaching);
+    }
+  };
+}
+function create_fragment(ctx) {
+  let if_block_anchor;
+  let current;
+  let if_block = (
+    /* visible */
+    ctx[0] && create_if_block(ctx)
+  );
+  return {
+    c() {
+      if (if_block)
+        if_block.c();
+      if_block_anchor = (0, import_internal3.empty)();
+    },
+    m(target, anchor) {
+      if (if_block)
+        if_block.m(target, anchor);
+      (0, import_internal3.insert)(target, if_block_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, [dirty]) {
+      if (
+        /* visible */
+        ctx2[0]
+      ) {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+          if (dirty & 1)
+            (0, import_internal3.transition_in)(if_block, 1);
+        } else {
+          if_block = create_if_block(ctx2);
+          if_block.c();
+          (0, import_internal3.transition_in)(if_block, 1);
+          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+        }
+      } else if (if_block) {
+        (0, import_internal3.group_outros)();
+        (0, import_internal3.transition_out)(if_block, 1, 1, () => {
+          if_block = null;
+        });
+        (0, import_internal3.check_outros)();
+      }
+    },
+    i() {
+      if (current)
+        return;
+      (0, import_internal3.transition_in)(if_block);
+      current = true;
+    },
+    o() {
+      (0, import_internal3.transition_out)(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if (if_block)
+        if_block.d(detaching);
+      if (detaching)
+        (0, import_internal3.detach)(if_block_anchor);
+    }
+  };
+}
+function instance($$self, $$props, $$invalidate) {
+  let { $$slots: slots = {}, $$scope } = $$props;
+  let { visible = false } = $$props;
+  const { duration = 0, immediate = true } = (0, import_svelte2.getContext)(injectOptionsKey) || {};
+  const { deferred, vanish } = (0, import_svelte2.getContext)(injectOverlayKey);
+  async function destroy() {
+    $$invalidate(0, visible = false);
+    await (0, import_core2.delay)(duration);
+    vanish == null ? void 0 : vanish();
+    return Promise.resolve();
+  }
+  (0, import_svelte2.onMount)(() => immediate && $$invalidate(0, visible = true));
+  deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
+  $$self.$$set = ($$props2) => {
+    if ("visible" in $$props2)
+      $$invalidate(0, visible = $$props2.visible);
+    if ("$$scope" in $$props2)
+      $$invalidate(1, $$scope = $$props2.$$scope);
+  };
+  return [visible, $$scope, slots];
+}
+var Overlay = class extends import_internal3.SvelteComponentTyped {
+  constructor(options) {
+    super(options);
+    (0, import_internal3.init)(this, options, instance, create_fragment, import_internal3.safe_not_equal, { visible: 0 }, import_internal3.noop);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Overlay,
+  defineOverlay,
+  renderOverlay,
+  usePrograms
+});

package/dist/index.d.cts

@@ -0,0 +1,40 @@
+import * as _overlastic_core from '@overlastic/core';
+import { Deferred } from '@overlastic/core';
+import { ComponentConstructorOptions } from 'svelte';
+import { SvelteComponentTyped } from 'svelte/internal';
+
+interface SMountOptions {
+    /** current app context */
+    context?: Map<any, any>;
+}
+
+declare const defineOverlay: <Props, Resolved = void>(instance: any, options?: _overlastic_core.MountOptions<SMountOptions> | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, SMountOptions>;
+declare const renderOverlay: <Props, Resolved = void>(instance: any, props?: Props | undefined, options?: _overlastic_core.MountOptions<SMountOptions> | undefined) => Promise<Resolved>;
+
+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 */
+    /** current deferred */
+    deferred?: Deferred<any>;
+}
+
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+}
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+declare class Overlay extends SvelteComponentTyped<{
+    visible?: boolean;
+}> {
+    constructor(options: ComponentConstructorOptions);
+}
+
+export { Overlay, type ProgramsOptions, type ProgramsReturn, defineOverlay, renderOverlay, usePrograms };

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import * as _overlastic_core from '@overlastic/core';
+import { Deferred } from '@overlastic/core';
+import { ComponentConstructorOptions } from 'svelte';
+import { SvelteComponentTyped } from 'svelte/internal';
+
+interface SMountOptions {
+    /** current app context */
+    context?: Map<any, any>;
+}
+
+declare const defineOverlay: <Props, Resolved = void>(instance: any, options?: _overlastic_core.MountOptions<SMountOptions> | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, SMountOptions>;
+declare const renderOverlay: <Props, Resolved = void>(instance: any, props?: Props | undefined, options?: _overlastic_core.MountOptions<SMountOptions> | undefined) => Promise<Resolved>;
+
+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 */
+    /** current deferred */
+    deferred?: Deferred<any>;
+}
+
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+}
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+declare class Overlay extends SvelteComponentTyped<{
+    visible?: boolean;
+}> {
+    constructor(options: ComponentConstructorOptions);
+}
+
+export { Overlay, type ProgramsOptions, type ProgramsReturn, defineOverlay, renderOverlay, usePrograms };