layerpro 3.1.0 → 3.1.5

package/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: passariello
+patreon: passariello
+ko_fi: passariello
+liberapay: passariello
+issuehunt: passariello
+custom:
+ [
+  "https://dario.passariello.ca",
+  "https://www.indiegogo.com/individuals/28513718",
+ ]

package/README.md

@@ -66,7 +66,17 @@ Import LayerPro once in your app entry point:
 import "layerpro";
 ```
 
-That's it. Now you have `alert()`, `confirm()`, `prompt()`, and `message()` globally.
+That's it. Now you have `alert()`, `confirm()`, `prompt()`, `message()`, and `popup()` globally available.
+
+The `popup` alias is a shorthand for `layerpro.popup`:
+
+```javascript
+import "layerpro";
+
+// Both work identically:
+layerpro.popup.open({ id: 'myPopup', body: 'Hello World' });
+popup.open({ id: 'myPopup', body: 'Hello World' });
+```
 
 ---
 
@@ -90,8 +100,23 @@ message("Operation complete!");
 
 ### Custom Popups
 
+You can use either `layerpro.popup.open(...)` or the shorthand `popup.open(...)`:
+
 ```javascript
-layerpro.popup.open({
+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: () => {} }
+  }
+});
+
+// Or using the global alias:
+popup.open({
   id: 'myModal',
   name: 'My Modal',
   body: '<p>Your content here</p>',
@@ -109,7 +134,7 @@ layerpro.popup.open({
 In a React environment, you can pass React components directly:
 
 ```jsx
-layerpro.popup.open({
+popup.open({
   id: 'reactModal',
   name: 'React Modal',
   body: <MyComponent />,   // React element
@@ -226,15 +251,15 @@ message("Done!");                   // LayerPro message
 
 | Method | Description |
 |--------|-------------|
-| `layerpro.popup.open(props)` | Open a modal; returns the props. Re-opens a same-id window to front + refreshes body |
-| `layerpro.popup.close(id)` | Close (and unmount) a modal |
-| `layerpro.popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
-| `layerpro.popup.maximize(props)` | Toggle maximize (pure CSS) |
-| `layerpro.popup.iconize(id)` | Toggle minimize to the dock |
-| `layerpro.popup.index(id)` | Bring a modal to the front (select) |
-| `layerpro.popup.zIndex()` | Get the next z-index counter value |
-| `layerpro.popup.movable(props)` | Enable dragging |
-| `layerpro.popup.resizable(props)` | Enable resizing |
+| `popup.open(props)` | Open a modal; returns the props. Re-opens a same-id window to front + refreshes body. |
+| `popup.close(id)` | Close (and unmount) a modal. |
+| `popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
+| `popup.maximize(props)` | Toggle maximize (pure CSS) |
+| `popup.iconize(id)` | Toggle minimize to the dock |
+| `popup.index(id)` | Bring a modal to the front (select) |
+| `popup.zIndex()` | Get the next z-index counter value |
+| `popup.movable(props)` | Enable dragging |
+| `popup.resizable(props)` | Enable resizing |
 | `layerpro.noGlobals()` | Restore native `alert`/`confirm`/`prompt`; remove `message` |
 
 ---
@@ -271,13 +296,13 @@ properties, so theming needs no `!important` or `[class^=popup_…]` selectors:
 
 | 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 |
+| `popup.open(props)` | Open a modal |
+| `popup.close(id)` | Close a modal |
+| `popup.center(id)` | Center modal |
+| `popup.maximize(id)` | Maximize modal |
+| `popup.iconize(id)` | Minimize to dock |
+| `popup.movable(id)` | Enable drag |
+| `popup.resizable(id)` | Enable resize |
 
 ---