layerpro 0.8.5 → 0.9.0

package/README.md

@@ -6,19 +6,21 @@ LayerPro by Dario Passariello
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-006b98?logo=TypeScript&logoColor=white)](#)
 
+[![Socket Badge](https://socket.dev/api/badge/npm/package/layerpro/0.8.5)](https://socket.dev/npm/package/layerpro/overview/0.8.5)
+[![layerpro](https://snyk.io/advisor/npm-package/layerpro/badge.svg)](https://snyk.io/advisor/npm-package/layerpro)
+
 
 ## About
 
-LayerPro give you a complete new way to customize web popups on your application. LP permit you also to have custom alert, promps, confirm and message and override the ugly browser popup.
+LayerPro offers a completely new way to customize web popups in your application. With LayerPro, you can create custom alerts, prompts, confirmations, and messages, effectively replacing the default browser popups.
 
-Please, read the [LICENSE](/LICENSE.md) agreement before to implementing in your application.
+Please make sure to read the [LICENSE](/LICENSE.md) agreement before implementing it in your application.
 
 ## Live demo
 
 [https://a51.dev/tests/](https://a51.dev/tests/)
 
-You can see an HTML version where dpHelper and LayerPro works.
-You can use with html, react, vue or any other frontend / library.
+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.
 
 ---
 
@@ -48,19 +50,17 @@ require("layerpro");
 
 ## Install for ejs or other type of projects (like html)
 
-note: you don't need to use npm install in this case or you get an error
-
 ```html
 <script src="https://unpkg.com/layerpro@latest/index.js"></script>
 ```
 
 ## How to use it
 
-type 'layerpro' in your console to have a look about all available tools that you can use globaly!
-You can call these from everywhere without import (just one at index).
-If you type alert("hello, world!") you can see the result.
+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 use these (also from console) as messages
+You can also use these tools as messages directly from the console.
 
 ```javascript
 alert("Hello world"); // Normal alert
@@ -81,37 +81,120 @@ message(
 
 ---
 
-Another use:
+Popup:
 
 ```javascript
-layerpro.popup.open({
-  id: String,
-  body: String | Component / Module, // text or component
-  width: Number,
-  height: Number,
-  name: String,
-  icon: "&#9888;", // or from html symbols table
-  iconize: true | false,
-  maximize: true | false,
-  close: true | false,
-  isMaximize: true | false,
-  dockable: true | false,
-  raised: true | false,
-  movable: true | false,
-  resizable: true | false,
-  store: true | false,
-  top: Number | Percentance,
-  left: Number | Percentance,
-  right: Number | Percentance,
-  bottom: Number | Percentance,
-  minWidth: Number | Percentance,
-  minHeight: Number | Percentance,
-  fadeIn: 0, // Milliseconds
-  fadeOut: 0, // Milliseconds
-  timer: 0 // Milliseconds
-});
+import 'layerpro';
+
+layerpro.popup.open(
+  {
+    id: String,
+    body: String | Component / Module, // text or component
+
+    buttons: {
+      confirm: {
+        text: "accept", // customizable
+        cb: yourFunctionCallBack() // call your script
+      },
+      cancel: {
+        text: "cancel", // customizable
+        cb: yourFunctionCallBack() // optional
+    }, // optional
+
+    width: Number,
+    height: Number,
+    name: String,
+    icon: "&#9888;", // or from html symbols table
+    iconize: true | false,
+    maximize: true | false,
+    close: true | false,
+    isMaximize: true | false,
+    dockable: true | false,
+    raised: true | false,
+    movable: true | false,
+    resizable: true | false,
+    store: true | false,
+    top: Number | Percentance,
+    left: Number | Percentance,
+    right: Number | Percentance,
+    bottom: Number | Percentance,
+    minWidth: Number | Percentance,
+    minHeight: Number | Percentance,
+    fadeIn: 0, // Milliseconds
+    fadeOut: 0, // Milliseconds
+    timer: 0 // Milliseconds
+  }
+);
+```
+
+Example:
+
+```javascript
+import 'layerpro'
+
+// EXAMPLE WITH ALL OPTIONS
+function App() {
+
+  layerpro.popup.open(
+    {
+      id: 'examplePopup',
+      body: 'Example',
+      buttons: {
+        confirm: {
+          text: "accept",
+          cb: (e) => message("confirmed")
+        },
+        cancel: {
+          text: "cancel"
+        }
+      },
+      width: 400,
+      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
+    }
+  )
+
+}
+
+export default App
+
 ```
 
+Here are some of the main advantages of using LayerPro:
+
+**Complete Customization**: LayerPro allows you to create highly customized web pop-ups, surpassing the limitations of standard browser pop-ups. You can configure every aspect of the pop-up, including size, position, icons, and much more.
+
+**Improved User Interface**: With LayerPro, you can create alerts, prompts, confirmations, and personalized messages that seamlessly integrate with your application's design, enhancing the user experience.
+
+**Compatibility with Various Frameworks**: LayerPro is compatible with HTML, React, Vue, and other frontend frameworks and libraries, making it extremely versatile and easy to integrate into any project.
+
+**Ease of Use**: Once LayerPro is imported into your project, you can access all its features globally without needing additional imports. This simplifies the development process and reduces boilerplate code.
+
+**Advanced Features**: LayerPro offers advanced options such as the ability to maximize, resize, move, and dock pop-ups. You can also configure fade-in and fade-out effects for a smoother experience.
+
+**Override Browser Pop-ups**: LayerPro allows you to replace browser pop-ups with customized versions, eliminating the unattractive look of default pop-ups and providing complete control over the appearance and behavior of your messages.
+
+**Component Support**: You can use components or modules as the body of your pop-ups, allowing you to create complex and interactive user interfaces within the pop-ups themselves.
+
 ---
 
 copyright (c) 2019 - 2024 by Dario Passariello

package/docs/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-modernist

package/docs/index.md

@@ -0,0 +1,200 @@
+# I am LayerPro
+
+```
+LayerPro by Dario Passariello
+```
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-006b98?logo=TypeScript&logoColor=white)](#)
+
+[![Socket Badge](https://socket.dev/api/badge/npm/package/layerpro/0.8.5)](https://socket.dev/npm/package/layerpro/overview/0.8.5)
+[![layerpro](https://snyk.io/advisor/npm-package/layerpro/badge.svg)](https://snyk.io/advisor/npm-package/layerpro)
+
+
+## About
+
+LayerPro offers a completely new way to customize web popups in your application. With LayerPro, you can create custom alerts, prompts, confirmations, and messages, effectively replacing the default browser popups.
+
+Please make sure to read the [LICENSE](/LICENSE.md) agreement before implementing it in your application.
+
+## Live demo
+
+[https://a51.dev/tests/](https://a51.dev/tests/)
+
+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
+
+```
+npm i layerpro --save-dev
+```
+
+or update:
+
+```
+npm i layerpro@latest --save-dev
+```
+
+in the index (and only there):
+
+```javascript
+import "layerpro";
+```
+
+or
+
+```javascript
+require("layerpro");
+```
+
+## Install for ejs or other type of projects (like html)
+
+```html
+<script src="https://unpkg.com/layerpro@latest/index.js"></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.
+
+```javascript
+alert("Hello world"); // Normal alert
+
+prompt("Your Name"); // Ask for input
+
+confirm(
+  "Hello world",
+  ()=>console.log("ciao"), // 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)
+);
+```
+
+---
+
+Popup:
+
+```javascript
+import 'layerpro';
+
+layerpro.popup.open(
+  {
+    id: String,
+    body: String | Component / Module, // text or component
+
+    buttons: {
+      confirm: {
+        text: "accept", // customizable
+        cb: yourFunctionCallBack() // call your script
+      },
+      cancel: {
+        text: "cancel", // customizable
+        cb: yourFunctionCallBack() // optional
+    }, // optional
+
+    width: Number,
+    height: Number,
+    name: String,
+    icon: "&#9888;", // or from html symbols table
+    iconize: true | false,
+    maximize: true | false,
+    close: true | false,
+    isMaximize: true | false,
+    dockable: true | false,
+    raised: true | false,
+    movable: true | false,
+    resizable: true | false,
+    store: true | false,
+    top: Number | Percentance,
+    left: Number | Percentance,
+    right: Number | Percentance,
+    bottom: Number | Percentance,
+    minWidth: Number | Percentance,
+    minHeight: Number | Percentance,
+    fadeIn: 0, // Milliseconds
+    fadeOut: 0, // Milliseconds
+    timer: 0 // Milliseconds
+  }
+);
+```
+
+Example:
+
+```javascript
+import 'layerpro'
+
+// EXAMPLE WITH ALL OPTIONS
+function App() {
+
+  layerpro.popup.open(
+    {
+      id: 'examplePopup',
+      body: 'Example',
+      buttons: {
+        confirm: {
+          text: "accept",
+          cb: (e) => message("confirmed")
+        },
+        cancel: {
+          text: "cancel"
+        }
+      },
+      width: 400,
+      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
+    }
+  )
+
+}
+
+export default App
+
+```
+
+Here are some of the main advantages of using LayerPro:
+
+**Complete Customization**: LayerPro allows you to create highly customized web pop-ups, surpassing the limitations of standard browser pop-ups. You can configure every aspect of the pop-up, including size, position, icons, and much more.
+
+**Improved User Interface**: With LayerPro, you can create alerts, prompts, confirmations, and personalized messages that seamlessly integrate with your application's design, enhancing the user experience.
+
+**Compatibility with Various Frameworks**: LayerPro is compatible with HTML, React, Vue, and other frontend frameworks and libraries, making it extremely versatile and easy to integrate into any project.
+
+**Ease of Use**: Once LayerPro is imported into your project, you can access all its features globally without needing additional imports. This simplifies the development process and reduces boilerplate code.
+
+**Advanced Features**: LayerPro offers advanced options such as the ability to maximize, resize, move, and dock pop-ups. You can also configure fade-in and fade-out effects for a smoother experience.
+
+**Override Browser Pop-ups**: LayerPro allows you to replace browser pop-ups with customized versions, eliminating the unattractive look of default pop-ups and providing complete control over the appearance and behavior of your messages.
+
+**Component Support**: You can use components or modules as the body of your pop-ups, allowing you to create complex and interactive user interfaces within the pop-ups themselves.
+
+---
+
+copyright (c) 2019 - 2024 by Dario Passariello