leanweb 1.2.0 → 1.2.3

package/README.md

@@ -251,6 +251,11 @@ items = ["one", "two", "three"];
 2: three
 ```
 
+#### access DOM from lw-for
+
+`lw-for` binds the DOM to the list of elements respectively if `typeof element`
+evaluates `object`. To access the DOM node, use `element.getDom()`.
+
 ### 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
@@ -691,7 +716,8 @@ of the event.
 ### Post dist hook
 
 If `post-dist` file is present in the project root directory, it will be called
-after `lw dist` is done. This could be useful to copy dist/\* to somewhere else.
+after `lw dist` is done. This could be useful to copy `dist/\*` to somewhere
+else.
 
 ## More examples and tutorials
 

package/commands/dist.js

@@ -62,8 +62,9 @@ if (args.length >= 3) {
          fse.copySync(`./${utils.dirs.build}/${resource}`, `./${utils.dirs.dist}/${resource}`, { dereference: true });
       });
 
-      if (fs.statSync(`./post-dist`).isFile()) {
-         await utils.exec(`./post-dist`);
+      const postDistFile = './post-dist';
+      if (fs.existsSync(postDistFile) && fs.statSync(postDistFile).isFile()) {
+         await utils.exec(postDistFile);
       }
    });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.2.0",
+   "version": "1.2.3",
    "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) {