layerpro 1.0.21 → 1.1.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2019 Dario Passariello - <dariopassariello@gmail.com>
+
+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/docs/index.md

@@ -0,0 +1,208 @@
+# [LayerPro](https://npmjs.com/package/layerpro)
+
+![layerpro](https://raw.githubusercontent.com/passariello/container/be0611e9bead336dcec32d522d103e7e3661f502/layerpro/assets/logos/logo.svg)
+
+[![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)
+
+[![NPM](https://nodei.co/npm/layerpro.png?stars=true&downloads=true)](https://npmjs.com/package/layerpro)
+
+## About
+
+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.
+
+Please make sure to read the [LICENSE](/LICENSE.md) agreement before implementing it in your application.
+
+## Live demo
+
+[https://tests.a51.dev/](https://tests.a51.dev/)
+
+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.
+
+---
+
+## Install for react + webpack projects
+
+```js
+npm i layerpro --save-dev
+```
+
+or update:
+
+```js
+npm i layerpro@latest --save-dev
+```
+
+in the index (and only there):
+
+```js
+import "layerpro";
+```
+
+or
+
+```js
+require("layerpro");
+```
+
+## Install for ejs or other type of projects (like html)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
+```
+
+## How to use it
+
+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).
+
+For example, if you type **alert("hello, world!")**, you can see the result.
+
+You can also use these tools as messages directly from the console.
+
+```js
+alert("Hello world"); // Normal alert
+
+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(
+  "Hello world",
+  ()=>console.log("This happen after OK") // callback for YES / OK)
+);
+```
+
+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
+    }
+  )
+}
+
+export default App
+
+```
+
+Example with a React component:
+
+```js
+
+// Example using React Component
+
+import React from "react"
+import 'layerpro'
+
+export default () => {
+
+  // Custom Component6
+  const TestApp = () => {
+    return (
+      <div>
+        Hello
+        <label>
+          Alert: <input type="button" value="Alert" onClick={() => alert("Hello")} />
+        </label>
+      </div>
+    )
+  }
+
+  // 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