layerpro 1.5.1 → 2.0.1

package/README.md

@@ -1,206 +1,184 @@
-# [LayerPro](https://npmjs.com/package/layerpro)
+# LayerPro 🚀
 
-![layerpro](https://raw.githubusercontent.com/passariello/container/be0611e9bead336dcec32d522d103e7e3661f502/layerpro/assets/logos/logo.svg)
+Drop-in replacement for browser modals with superpowers.
 
-[![version](https://img.shields.io/npm/v/layerpro.svg)](https://npmjs.org/package/layerpro)
-[![downloads](https://img.shields.io/npm/dm/layerpro.svg)](https://npmjs.org/package/layerpro)
+---
 
-[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://a51.gitbook.io/layerpro)
+## What is LayerPro?
 
-## About
+LayerPro replaces the boring browser `alert()`, `confirm()`, and `prompt()` with beautiful, customizable modals that work everywhere.
 
-LayerPro offers a completely new way to customize web modals in your application. With LayerPro, you can create custom alerts, prompts, confirmations, and messages, effectively replacing the default browser modals.
+No more ugly popup boxes. No more blocking the main thread. Just clean, modern modals that your users will love.
 
-## Live demo
+---
 
-[https://tests.a51.dev/](https://tests.a51.dev/)
+## Features
 
-You can view an HTML version demonstrating how dpHelper and LayerPro work together. These tools can be used with HTML, React, Vue, or any other frontend framework/library.
+- **Multiple modal types**: alert, confirm, prompt, message
+- **Fully customizable**: appearance, behavior, animations
+- **Dockable windows**: minimize modals to a dock bar
+- **Draggable & Resizable**: users can move and resize
+- **Smooth animations**: fade in/out transitions
+- **XSS protection**: built-in HTML sanitization
+- **TypeScript support**: full type definitions
 
 ---
 
-## Install for react + webpack projects
+## Installation
 
-```js
-npm i layerpro --save-dev
+```bash
+npm install layerpro
 ```
 
-or update:
+Or use directly in HTML:
 
-```js
-npm i layerpro@latest --save-dev
+```html
+<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
 ```
 
-in the index (and only there):
+---
 
-```js
-import "layerpro";
-```
+## Quick Start
 
-or
+Import LayerPro once in your app entry point:
 
-```js
-require("layerpro");
+```javascript
+import "layerpro";
 ```
 
-## Install for ejs or other type of projects (like html)
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
-```
+That's it. Now you have `alert()`, `confirm()`, `prompt()`, and `message()` globally.
 
 ---
 
-## How to use it
+## Usage
 
-ype layerpro in your console to explore all the available tools you can use globally! You can call these tools from anywhere without needing to import them (just include the import once in your index file).
+### Basic Modals
 
-For example, if you type **alert("hello, world!")**, you can see the result.
+```javascript
+alert("Hello World!");
 
-You can also use these tools as messages directly from the console.
+confirm("Are you sure?", () => {
+  console.log("User clicked YES");
+});
 
-```js
-alert("Hello world"); // Normal alert
+prompt("What's your name?", (name) => {
+  console.log("User entered:", name);
+});
 
-prompt("Your Name"); // Ask for input
-
-confirm(
-  "Hello world",
-  ()=>console.log("hello"), // callback for YES / OK
-  ()=>console.log("bye") // callback for NO / CANCEL (you can use null if you don't want CB)
-);
+message("Operation complete!");
+```
 
-message(
-  "Hello world",
-  ()=>console.log("This happen after OK") // callback for YES / OK)
-);
+### Custom Popups
+
+```javascript
+layerpro.popup.open({
+  id: 'myModal',
+  name: 'My Modal',
+  body: '<p>Your content here</p>',
+  width: 450,
+  height: 350,
+  buttons: {
+    confirm: { text: "OK", cb: () => {} },
+    cancel: { text: "Cancel", cb: () => {} }
+  }
+});
 ```
 
-Example:
-
-```js
-import 'layerpro'
-
-// EXAMPLE WITH ALL OPTIONS
-function App() {
-
-  layerpro.popup.open(
-    {
-      id: 'exampleModal',
-      body: 'Example',
-      name: 'example',
-      icon: '&#9888;',
-
-      buttons: {
-        confirm: {
-          text: "accept",
-          cb: (e) => message("confirmed")
-        },
-        cancel: {
-          text: "cancel"
-        }
-      },
-
-      width: 400,
-      height: 300,
-      maxWidth: 500,
-      maxHeight: 350,
-      minWidth: 200,
-      minHeight: 150,
-      top: '10%',
-      left: '10%',
-      right: 'auto',
-      bottom: 'auto',
-
-      fadeIn: 500,
-      fadeOut: 500,
-      timer: 0,
-
-      iconize: true,
-      maximize: true,
-      close: true,
-      isMaximize: false,
-      dockable: false,
-      raised: true,
-      movable: true,
-      resizable: false,
-      store: false
-    }
-  )
-}
+### React Components
 
-export default App
+In a React environment, you can pass React components directly:
 
+```jsx
+layerpro.popup.open({
+  id: 'reactModal',
+  name: 'React Modal',
+  body: <MyComponent />,   // React element
+  width: 500,
+  height: 400
+});
 ```
 
-Example with a React component:
+### The `body` Parameter
 
-```js
+The `body` property accepts different content types:
 
-// Example using React Component
+| Type | Example |
+|------|---------|
+| Plain text | `body: "Hello"` |
+| HTML string | `body: "<p>Hello</p>"` |
+| React element | `body: <Component />` |
 
-import React from "react"
-import 'layerpro'
+> **Note**: In React, always use elements (`<Component />`), not function calls (`Component()`).
 
-export default () => {
+---
 
-  // Custom Component6
-  const TestApp = () => {
-    return (
-      <div>
-        Hello
-        <label>
-          Alert: <input type="button" value="Alert" onClick={() => alert("Hello")} />
-        </label>
-      </div>
-    )
+## Options
+
+```typescript
+{
+  id: string,           // Unique ID
+  body: any,            // Content (text, HTML, or React)
+  name: string,         // Modal title
+  icon: string,         // Icon (HTML entity)
+
+  // Dimensions
+  width: number,
+  height: number,
+  minWidth: number,
+  minHeight: number,
+  maxWidth: number,
+  maxHeight: number,
+
+  // Position
+  top: number | string,
+  left: number | string,
+  right: number | string,
+  bottom: number | string,
+
+  // Animation
+  fadeIn: number,
+  fadeOut: number,
+  timer: number,
+
+  // Features
+  movable: boolean,
+  resizable: boolean,
+  maximize: boolean,
+  iconize: boolean,
+  dockable: boolean,
+  close: boolean,
+  raised: boolean,
+
+  // Buttons
+  buttons: {
+    confirm?: { text: string; cb?: () => void },
+    cancel?: { text: string; cb?: () => void }
   }
-
-  // Run into layerpro
-  layerpro.popup.open(
-    {
-      id: 'exampleModal',
-      body: TestApp(),
-      buttons: {
-        confirm: {
-          text: "accept",
-          cb: () => {
-            message("confirmed")
-          }
-        },
-        cancel: {
-          text: "cancel",
-          cb: () => {
-            alert("cancelled")
-          }
-        }
-      },
-      width: 350,
-      height: 300,
-      name: 'example',
-      icon: '&#9888;',
-      iconize: true,
-      maximize: true,
-      close: true,
-      isMaximize: false,
-      dockable: false,
-      raised: true,
-      movable: true,
-      resizable: false,
-      store: false,
-      top: '10%',
-      left: '10%',
-      right: 'auto',
-      bottom: 'auto',
-      minWidth: 200,
-      minHeight: 150,
-      fadeIn: 500,
-      fadeOut: 500,
-      timer: 0
-    }
-  )
-
 }
 ```
 
-copyright (c) 2019 - 2025 by Dario Passariello
+---
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `layerpro.popup.open(props)` | Open a modal |
+| `layerpro.popup.close(id)` | Close a modal |
+| `layerpro.popup.center(id)` | Center modal |
+| `layerpro.popup.maximize(id)` | Maximize modal |
+| `layerpro.popup.iconize(id)` | Minimize to dock |
+| `layerpro.popup.movable(id)` | Enable drag |
+| `layerpro.popup.resizable(id)` | Enable resize |
+
+---
+
+## Browser Support
+
+Chrome 80+ • Firefox 75+ • Safari 13+ • Edge 80+
+
+---
+
+## License
+
+MIT