@overlastic/svelte 0.5.0 → 0.6.1

package/README.md

@@ -1,99 +1,29 @@
-# Getting Started
+<p align="center">
+  <a href="https://overlastic.vercel.app/" target="blank">
+    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
+  </a>
+</p>
 
-create imperative overlays in the svelte application, supporting context inheritance!
+<p align="center">
+ A create modal | dialog | popup promise deferred library
+</p>
 
-## Install
+<p align="center">
+  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/v/@overlastic/svelte.svg" alt="NPM Version" /></a>
+  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/l/@overlastic/svelte.svg" alt="Package License" /></a>
+  <a href="https://www.npmjs.com/@overlastic/svelte"><img src="https://img.shields.io/npm/dm/@overlastic/svelte.svg" alt="NPM Downloads" /></a>
+</p>
 
-With pnpm:
-```sh
-pnpm add @overlastic/svelte
-```
-
-With yarn:
-```sh
-yarn add @overlastic/svelte
-```
-
-## Usage
-
-### Step 1: Define Component
-
-```svelte
-<script lang="ts">
-  import { useOverlayDefine, 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 } = useOverlayDefine({ duration })
-
-  function onClick() {
-    resolve(`${title}:confirmed`)
-  }
-</script>
-
-<Overlay>
-  <div transition:fly={{ opacity: 0, duration }} on:click={onClick}>
-    <slot name="title">
-      { title }
-    </slot>
-  </div>
-</Overlay>
-```
+## Description
 
-### Step 2: Create Overlay
+Create messages or dialog overlays using Overlastic in Svelte APP.
 
-You can use the `defineOverlay` method to convert the component into a modal dialog in Javascript / Typescript, which allows you to call it.
+## Installation
 
-```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: 'useOverlayDefine'
-})
-// value === "useOverlayDefine:confirmed"
+```bash
+$ npm install --save @overlastic/svelte
 ```
 
-## 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
+## Quick Start
 
-```svelte
-<script lang="ts">
-  import { useOverlayDefine, Overlay } from "@overlastic/svelte";
-
-  let visible = false
-
-  const { resolve, reject, deferred, vanish } = useOverlayDefine({
-    // 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>
-```
+[Overview & Tutorial](https://overlastic.vercel.app/svelte/)

package/dist/index.cjs

@@ -23,7 +23,7 @@ __export(src_exports, {
   Overlay: () => Overlay,
   defineOverlay: () => defineOverlay,
   renderOverlay: () => renderOverlay,
-  useOverlayDefine: () => useOverlayDefine
+  useDefineOverlay: () => useDefineOverlay
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -62,7 +62,7 @@ var renderOverlay = constructor.render;
 
 // src/composable/define.ts
 var import_svelte = require("svelte");
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   (0, import_svelte.setContext)(injectOptionsKey, options);
   return (0, import_svelte.getContext)(injectOverlayKey);
 }
@@ -226,5 +226,5 @@ var Overlay = class extends import_internal3.SvelteComponentTyped {
   Overlay,
   defineOverlay,
   renderOverlay,
-  useOverlayDefine
+  useDefineOverlay
 });

package/dist/index.d.cts

@@ -11,25 +11,25 @@ interface SMountOptions {
 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 {
+interface DefineOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     /** current deferred */
     deferred?: Deferred<any>;
 }
 
-interface OverlayDefineOptions {
+interface DefineOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
     immediate?: boolean;
 }
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useDefineOverlay(options?: DefineOverlayOptions): DefineOverlayReturn;
 
 declare class Overlay extends SvelteComponentTyped<{
     visible?: boolean;
@@ -37,4 +37,4 @@ declare class Overlay extends SvelteComponentTyped<{
     constructor(options: ComponentConstructorOptions);
 }
 
-export { Overlay, type OverlayDefineOptions, type ProgramsReturn, defineOverlay, renderOverlay, useOverlayDefine };
+export { type DefineOverlayOptions, type DefineOverlayReturn, Overlay, defineOverlay, renderOverlay, useDefineOverlay };

package/dist/index.d.ts

@@ -11,25 +11,25 @@ interface SMountOptions {
 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 {
+interface DefineOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     /** current deferred */
     deferred?: Deferred<any>;
 }
 
-interface OverlayDefineOptions {
+interface DefineOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
     immediate?: boolean;
 }
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useDefineOverlay(options?: DefineOverlayOptions): DefineOverlayReturn;
 
 declare class Overlay extends SvelteComponentTyped<{
     visible?: boolean;
@@ -37,4 +37,4 @@ declare class Overlay extends SvelteComponentTyped<{
     constructor(options: ComponentConstructorOptions);
 }
 
-export { Overlay, type OverlayDefineOptions, type ProgramsReturn, defineOverlay, renderOverlay, useOverlayDefine };
+export { type DefineOverlayOptions, type DefineOverlayReturn, Overlay, defineOverlay, renderOverlay, useDefineOverlay };

package/dist/index.global.js

@@ -24,7 +24,7 @@ var OverlaysSvelte = (() => {
     Overlay: () => Overlay,
     defineOverlay: () => defineOverlay,
     renderOverlay: () => renderOverlay,
-    useOverlayDefine: () => useOverlayDefine
+    useDefineOverlay: () => useDefineOverlay
   });
 
   // ../@core/src/define/global.ts
@@ -607,7 +607,7 @@ var OverlaysSvelte = (() => {
   }
 
   // src/composable/define.ts
-  function useOverlayDefine(options = {}) {
+  function useDefineOverlay(options = {}) {
     setContext(injectOptionsKey, options);
     return getContext(injectOverlayKey);
   }

package/dist/index.js

@@ -33,7 +33,7 @@ var renderOverlay = constructor.render;
 
 // src/composable/define.ts
 import { getContext, setContext } from "svelte";
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   setContext(injectOptionsKey, options);
   return getContext(injectOverlayKey);
 }
@@ -212,5 +212,5 @@ export {
   Overlay,
   defineOverlay,
   renderOverlay,
-  useOverlayDefine
+  useDefineOverlay
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/svelte",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "svelte": "^3.57.0",
-    "@overlastic/core": "^0.5.0"
+    "@overlastic/core": "^0.6.1"
   },
   "scripts": {
     "build": "tsup src/index.ts",