web-manager 4.0.20 → 4.0.22

package/README.md

@@ -314,6 +314,71 @@ const context = Manager.bindings().getContext();
 Manager.bindings().clear();
 ```
 
+#### Attribute Actions
+```html
+<!-- Set an attribute value -->
+<img data-wm-bind="@attr src auth.user.photoURL" />
+<a data-wm-bind="@attr href settings.profileUrl">Profile</a>
+
+<!-- Multiple attributes on same element -->
+<img data-wm-bind="@attr src auth.user.photoURL, @attr alt auth.user.displayName" />
+```
+
+#### Multiple Actions
+You can combine multiple actions on a single element by separating them with commas:
+
+```html
+<!-- Set text AND show/hide -->
+<div data-wm-bind="@show auth.user, @text auth.user.displayName"></div>
+
+<!-- Set text AND multiple attributes -->
+<img data-wm-bind="@text auth.user.displayName, @attr src auth.user.photoURL, @attr title auth.user.email" />
+
+<!-- Multiple attributes -->
+<a data-wm-bind="@attr href settings.url, @attr target settings.target, @text settings.linkText"></a>
+```
+
+#### Skeleton Loaders
+Add the `wm-binding-skeleton` class to show a loading skeleton while data is being bound:
+
+```html
+<!-- Shows a shimmer loading effect until data is bound -->
+<span data-wm-bind="auth.user.displayName" class="wm-binding-skeleton"></span>
+
+<!-- Profile card with multiple skeleton loaders -->
+<div class="profile-card">
+  <img data-wm-bind="@attr src auth.user.photoURL" class="wm-binding-skeleton">
+  <h3 data-wm-bind="auth.user.displayName" class="wm-binding-skeleton"></h3>
+  <p data-wm-bind="auth.user.email" class="wm-binding-skeleton"></p>
+</div>
+
+<!-- Elements without the class won't show skeleton loaders -->
+<span data-wm-bind="settings.theme"></span>
+```
+
+The skeleton loader automatically:
+- Displays a shimmer animation while the element is unbound
+- Hides the text content during loading
+- Prevents interaction until data is loaded
+- Fades in smoothly when data arrives
+- Adapts to dark themes
+- Respects `prefers-reduced-motion` accessibility settings
+
+#### Visual Feedback
+When an element is bound, Web Manager automatically adds the `wm-bound` class to it. You can use this class for styling or debugging:
+
+```css
+/* Add a subtle indicator for bound elements in development */
+.wm-bound {
+  outline: 1px dashed rgba(0, 123, 255, 0.3);
+}
+
+/* Custom styling after binding */
+.wm-bound {
+  /* Element has been successfully bound */
+}
+```
+
 #### Supported Actions
 - **`@text`** (default): Sets the text content of the element
 - **`@show`**: Shows the element when condition is true

package/dist/modules/bindings.js

@@ -43,10 +43,13 @@ class Bindings {
         this._executeAction(element, action, expression, context);
       });
 
-      // Add bound class to indicate element has been processed
-      if (!element.classList.contains('wm-bound')) {
+      // Remove skeleton loader class first to trigger transition
+      element.classList.remove('wm-binding-skeleton');
+
+      // Add bound class after a brief delay to allow for smooth animation (0.25s)
+      setTimeout(() => {
         element.classList.add('wm-bound');
-      }
+      }, 250);
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.0.20",
+  "version": "4.0.22",
   "description": "Easily access important variables such as the query string, current domain, and current page in a single object.",
   "main": "dist/index.js",
   "module": "src/index.js",