leanweb 1.2.1 → 1.2.4

package/README.md

@@ -251,6 +251,11 @@ items = ["one", "two", "three"];
 2: three
 ```
 
+#### access DOM from lw-for
+
+You could access DOM nodes for each element in a `lw-for` loop by calling
+`elem.getDom()` as long as `typeof elem` evaluates `object`.
+
 ### lw-model and lw-on:
 
 ```html
@@ -350,6 +355,8 @@ Here is a few examples how Leanweb helps web components work with form binding.
 
 ### Checkbox
 
+#### Multiple chechboxes bound to an array
+
 ```javascript
 // ...
 items = ['one', 'two', 'three'];
@@ -375,6 +382,24 @@ checkedValues = [];
 
 <img src='https://leanweb.app/images/leanweb-form-binding-checkbox.gif' alt='Leanweb Form Binding Checkbox'/>
 
+#### Single checkbox bound to a boolean value
+
+```javascript
+checked = false;
+toggleCheckbox() {
+    this.checked = !this.checked;
+    this.update();
+}
+```
+
+```html
+<button lw-on:click="toggleCheckbox()">Toggle Checkbox</button>
+<div>
+  <input type="checkbox" lw-model="checked" />
+  <span lw>checked</span>
+</div>
+```
+
 ### Select
 
 ```javascript

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.2.1",
+   "version": "1.2.4",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",
@@ -21,7 +21,7 @@
    "license": "MIT",
    "dependencies": {
       "@babel/core": "^7.18.10",
-      "@babel/parser": "^7.18.10",
+      "@babel/parser": "^7.18.11",
       "@babel/plugin-transform-runtime": "^7.18.10",
       "@babel/preset-env": "^7.18.10",
       "babel-loader": "^8.2.5",
@@ -35,7 +35,7 @@
       "node-watch": "^0.7.3",
       "parse5": "^7.0.0",
       "raw-loader": "^4.0.2",
-      "sass": "^1.54.2",
+      "sass": "^1.54.3",
       "sass-loader": "^13.0.2",
       "semver": "^7.3.7",
       "webpack": "^5.74.0",

package/templates/lib/lw-element.js

@@ -284,16 +284,17 @@ export default class LWElement extends HTMLElement {
             modelNode.do_not_update = true;
             object[propertyExpr] = modelNode.value * 1;
          } else if (modelNode.type === 'checkbox') {
-            if (!Array.isArray(object[propertyExpr])) {
-               object[propertyExpr] = [];
-            }
-            if (modelNode.checked) {
-               object[propertyExpr].push(modelNode.value);
-            } else {
-               const index = object[propertyExpr].indexOf(modelNode.value);
-               if (index > -1) {
-                  object[propertyExpr].splice(index, 1);
+            if (Array.isArray(object[propertyExpr])) {
+               if (modelNode.checked) {
+                  object[propertyExpr].push(modelNode.value);
+               } else {
+                  const index = object[propertyExpr].indexOf(modelNode.value);
+                  if (index > -1) {
+                     object[propertyExpr].splice(index, 1);
+                  }
                }
+            } else {
+               object[propertyExpr] = modelNode.checked;
             }
          } else if (modelNode.type === 'select-multiple') {
             if (!Array.isArray(object[propertyExpr])) {
@@ -326,7 +327,11 @@ export default class LWElement extends HTMLElement {
       const interpolation = this.ast[key];
       const parsed = parser.evaluate(interpolation.ast, context, interpolation.loc);
       if (modelNode.type === 'checkbox') {
-         modelNode.checked = parsed[0].includes(modelNode.value);
+         if (Array.isArray(parsed[0])) {
+            modelNode.checked = parsed[0].includes?.(modelNode.value);
+         } else {
+            modelNode.checked = !!parsed[0];
+         }
       } else if (modelNode.type === 'radio') {
          modelNode.checked = parsed[0] === modelNode.value;
       } else if (modelNode.type === 'select-multiple') {
@@ -457,6 +462,9 @@ export default class LWElement extends HTMLElement {
             node.setAttribute('lw-context', '');
             currentNode.insertAdjacentElement('afterend', node);
          }
+         if (item && typeof item === 'object') {
+            item.getDom = () => node;
+         }
          currentNode = node;
          const itemContext = { [interpolation.itemExpr]: item };
          if (interpolation.indexExpr) {