layerpro 0.9.55 → 0.9.72

package/README.md

@@ -73,7 +73,7 @@ prompt("Your Name"); // Ask for input
 
 confirm(
   "Hello world",
-  ()=>console.log("ciao"), // callback for YES / OK
+  ()=>console.log("hello"), // callback for YES / OK
   ()=>console.log("bye") // callback for NO / CANCEL (you can use null if you don't want CB)
 );
 
@@ -93,8 +93,9 @@ import 'layerpro';
 layerpro.popup.open(
   {
     id: String,
-    body: String | Component / Module, // text or component
-    // source: "", // TODO
+    body: String | React Component | Module, // text or component
+    name: String,
+    icon: "⚠", // or from html symbols table
 
     buttons: {
       confirm: {
@@ -106,30 +107,31 @@ layerpro.popup.open(
         cb: yourFunctionCallBack() // optional
     }, // optional
 
-    width: Number,
-    height: Number,
-    minWidth: Number | Percentance,
-    minHeight: Number | Percentance,
-    maxWidth: Number | Percentance,
-    maxHeight: Number | Percentance,
-    name: String,
-    icon: "⚠", // 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,
-    fadeIn: 0, // Milliseconds
-    fadeOut: 0, // Milliseconds
-    timer: 0 // Milliseconds
+    top: Number | String,
+    left: Number | String,
+    right: Number | String,
+    bottom: Number | String,
+
+    width: Number | String,
+    height: Number | String,
+    minWidth: Number | String,
+    minHeight: Number | String,
+    maxWidth: Number | String,
+    maxHeight: Number | String,
+
+    fadeIn: Number, // Milliseconds
+    fadeOut: Number, // Milliseconds
+    timer: Number // Milliseconds
+
+    iconize: Boolean,
+    maximize: Boolean,
+    close: Boolean,
+    isMaximize: Boolean,
+    dockable: Boolean,
+    raised: Boolean,
+    movable: Boolean,
+    resizable: Boolean,
+    store: Boolean,
   }
 );
 ```
@@ -146,6 +148,9 @@ function App() {
     {
       id: 'examplePopup',
       body: 'Example',
+      name: 'example',
+      icon: '⚠',
+
       buttons: {
         confirm: {
           text: "accept",
@@ -155,8 +160,83 @@ function App() {
           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:
+
+```javascript
+
+// 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: 'examplePopup',
+      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,
@@ -172,10 +252,8 @@ function App() {
       left: '10%',
       right: 'auto',
       bottom: 'auto',
-      // maxWidth: 500,
-      // maxHeight: 350,
-      // minWidth: 200,
-      // minHeight: 150,
+      minWidth: 200,
+      minHeight: 150,
       fadeIn: 500,
       fadeOut: 500,
       timer: 0
@@ -183,9 +261,6 @@ function App() {
   )
 
 }
-
-export default App
-
 ```
 
 Here are some of the main advantages of using LayerPro:

package/docs/index.md

@@ -73,7 +73,7 @@ prompt("Your Name"); // Ask for input
 
 confirm(
   "Hello world",
-  ()=>console.log("ciao"), // callback for YES / OK
+  ()=>console.log("hello"), // callback for YES / OK
   ()=>console.log("bye") // callback for NO / CANCEL (you can use null if you don't want CB)
 );
 
@@ -93,8 +93,9 @@ import 'layerpro';
 layerpro.popup.open(
   {
     id: String,
-    body: String | Component / Module, // text or component
-    // source: "", // TODO
+    body: String | React Component | Module, // text or component
+    name: String,
+    icon: "⚠", // or from html symbols table
 
     buttons: {
       confirm: {
@@ -106,30 +107,31 @@ layerpro.popup.open(
         cb: yourFunctionCallBack() // optional
     }, // optional
 
-    width: Number,
-    height: Number,
-    minWidth: Number | Percentance,
-    minHeight: Number | Percentance,
-    maxWidth: Number | Percentance,
-    maxHeight: Number | Percentance,
-    name: String,
-    icon: "⚠", // 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,
-    fadeIn: 0, // Milliseconds
-    fadeOut: 0, // Milliseconds
-    timer: 0 // Milliseconds
+    top: Number | String,
+    left: Number | String,
+    right: Number | String,
+    bottom: Number | String,
+
+    width: Number | String,
+    height: Number | String,
+    minWidth: Number | String,
+    minHeight: Number | String,
+    maxWidth: Number | String,
+    maxHeight: Number | String,
+
+    fadeIn: Number, // Milliseconds
+    fadeOut: Number, // Milliseconds
+    timer: Number // Milliseconds
+
+    iconize: Boolean,
+    maximize: Boolean,
+    close: Boolean,
+    isMaximize: Boolean,
+    dockable: Boolean,
+    raised: Boolean,
+    movable: Boolean,
+    resizable: Boolean,
+    store: Boolean,
   }
 );
 ```
@@ -146,6 +148,9 @@ function App() {
     {
       id: 'examplePopup',
       body: 'Example',
+      name: 'example',
+      icon: '⚠',
+
       buttons: {
         confirm: {
           text: "accept",
@@ -155,8 +160,83 @@ function App() {
           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:
+
+```javascript
+
+// 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: 'examplePopup',
+      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,
@@ -172,10 +252,8 @@ function App() {
       left: '10%',
       right: 'auto',
       bottom: 'auto',
-      // maxWidth: 500,
-      // maxHeight: 350,
-      // minWidth: 200,
-      // minHeight: 150,
+      minWidth: 200,
+      minHeight: 150,
       fadeIn: 500,
       fadeOut: 500,
       timer: 0
@@ -183,9 +261,6 @@ function App() {
   )
 
 }
-
-export default App
-
 ```
 
 Here are some of the main advantages of using LayerPro:

package/example/index.tsx

@@ -0,0 +1,62 @@
+// Example using React Component
+
+import React from "react"
+import 'layerpro'
+
+export default () => {
+
+  const TestApp = () => {
+    return (
+      <div>
+        Hello
+        <label>
+          Alert: <input type="button" value="Alert" onClick={() => alert("Hello")} />
+        </label>
+      </div>
+    )
+  }
+
+  layerpro.popup.open(
+    {
+      id: 'examplePopup',
+      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
+    }
+  )
+
+}

package/example/layerpro.scss

@@ -0,0 +1,108 @@
+// created by Dario Passariello
+
+:root {
+  --lp-000: hsl(0, 0%, 5%);
+  --lp-001: hsl(0, 0%, 100%);
+  --lp-011: rgb(80, 170, 250);
+}
+
+//////////////////////////////////////
+
+@mixin popup-hover-styles {
+  background: var(--lp-011) !important;
+  color: var(--lp-001) !important;
+  box-shadow: none !important;
+
+  &:before {
+    filter: invert(1) !important;
+  }
+
+  &:after {
+    background: var(--lp-011) !important;
+    color: var(--lp-000) !important;
+  }
+}
+
+#popup {
+  z-index: 10000 !important;
+
+  * {
+    box-sizing: border-box;
+    box-shadow: none;
+  }
+
+  [class^=popup_internal_] {
+    top: 36px;
+    background: var(--lp-001);
+  }
+
+  [class^=popup_body_] {
+    color: var(--lp-000);
+  }
+
+  [class^=popup_bar_] {
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  [class^=popup_] input,
+  [class^=popup_] button {
+    border: 0;
+  }
+
+  [class^=popup_message_] ul {
+    padding: 0 10px !important;
+    margin: 0 !important;
+    text-align: left;
+  }
+
+  [class^=button_] {
+    &:hover {
+      @include popup-hover-styles;
+    }
+  }
+
+  .iconize:before,
+  .maximize:before,
+  .close:before {
+    filter: invert(1);
+  }
+
+  .buttons {
+    button {
+      background: var(--lp-011) !important;
+      border: none;
+      margin: 0;
+
+      &:hover {
+        @include popup-hover-styles;
+      }
+    }
+  }
+
+  .popup_alert,
+  .popup_message,
+  .popup_prompt,
+  .popup_confirm {
+    word-break: normal !important;
+
+    input[type=text] {
+      position: relative;
+      width: 90%;
+      height: 40px;
+      padding: 15px;
+      margin-top: 10px;
+      border: 2px solid rgba(0, 0, 0, 0.3);
+      background: var(--lp-001) !important;
+      color: var(--lp-000) !important;
+      text-align: center;
+    }
+  }
+
+  .zHigh {
+    border-top-color: var(--lp-011) !important;
+    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5) !important;
+    outline: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border: 0;
+  }
+}