added radio.attrs.defaultRequired

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akili",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "description": "Akili - javascript framework",
   "main": "./src/akili.js",
   "author": {
@@ -28,18 +28,18 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/eslint-parser": "^7.0.3",
+    "@babel/core": "^7.13.15",
+    "@babel/eslint-parser": "^7.13.14",
     "babel-loader": "^8.2.2",
-    "babel-preset-akili": "^2.0.2",
+    "babel-preset-akili": "^2.0.4",
     "chai": "^4.3.4",
     "coveralls": "^3.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.0.0",
     "eslint-webpack-plugin": "^2.0.0",
     "husky": "^4.3.8",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "karma": "^6.2.0",
+    "karma": "^6.3.2",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
@@ -49,8 +49,8 @@
     "karma-webpack": "^5.0.0",
     "mocha": "^7.2.0",
     "terser-webpack-plugin": "^5.0.0",
-    "webpack": "^5.0.0",
-    "webpack-cli": "^4.5.0"
+    "webpack": "^5.31.0",
+    "webpack-cli": "^4.6.0"
   },
   "repository": {
     "type": "git",

src/components/radio.js

@@ -10,12 +10,14 @@ import Akili from '../akili.js';
  * @selector radio[name]
  * @attr {string} name - name of the group
  * @attr {string|null} value - selected value
+ * @attr {boolean} defaultRequired - default value is required or not
  * @attr [in] @see For
  * @message {string} radio - sent on value change
  */
 export default class Radio extends For {
   static matches = '[name]';
   static events = ['radio'].concat(For.events);
+  static booleanAttributes = ['default-required'].concat(For.booleanAttributes);
 
   static define() {
     Akili.component('radio', this);
@@ -62,13 +64,18 @@ export default class Radio extends For {
   resolved() {
     this.attr('value', this.setValue);
     this.attr('name', this.setNames);
+    this.attr('defaultRequired', this.setDefaultRequired, { callOnStart: false });
     return this.attr('in', this.setIn, { callOnStart: false });
   }
 
   setIn(data) {
     return this.draw(data).then(this.redrawRadio.bind(this));
   }
 
+  setDefaultRequired() {
+    return this.setValue(this.prevValue);
+  }
+
   redrawRadio() {
     this.setNames();    
     const value = this.isProperValue(this.prevValue)? this.prevValue: null;
@@ -93,11 +100,7 @@ export default class Radio extends For {
       radioEl.checked = selection;
       selection && (checkedValue = radioEl.value);
     }
-
-    if(checkedValue === null && children.length) {
-      checkedValue = children[0].el.value;
-    }
-
+
     this.setValue(checkedValue);
   }
 
@@ -121,14 +124,23 @@ export default class Radio extends For {
     }
   }
 
-  setValue(value) {    
+  setValue(value) { 
+    if(!this.attrs.defaultRequired && value === this.prevValue) {
+      return;
+    }
+
+    let children = this.children('input[type=radio]'); 
+
+    if(this.attrs.defaultRequired && value === null && children.length) {
+      value = children[0].el.value;
+    }
+
     if (value === this.prevValue) {
       return;
     }
 
-    let children = this.children('input[type=radio]');    
     this._disableInternalEvents = true;
-    
+
     for (let i = 0, l = children.length; i < l; i++) {
       let radio = children[i];
       radio.setChecked(radio.el.value === value);

test/app/all.js

@@ -115,9 +115,9 @@ export default class All extends Component {
         name="radio"
         value="\${this.cRadioValue}"
         on-radio="\${this.cRadioValue = event.detail}"
-      >
-        <radio-button value="radio-1"></radio-button>
-        <input type="radio" value="radio-2"/>
+      >        
+        <input type="radio" value="radio-1"/>
+        <radio-button value="radio-2"></radio-button>
       </radio>
       <radio
         name="radio2"

test/components.js

@@ -284,22 +284,35 @@ describe('components/', () => {
       component.scope.cRadioValue = 'radio-2';
     });
 
-    it('should set default value to "radio-2"', () => {
+    it('should set the value to "radio-2"', () => {
       assert.isNotOk(radio.el.querySelector("input[value='radio-1']").checked, 'check radio-1');
       assert.isOk(radio.el.querySelector("input[value='radio-2']").checked, 'check radio-2');
     });
 
-    it('should set default value to "radio-1"', () => {
+    it('should set the value to "radio-1"', () => {
       component.scope.cRadioValue = 'radio-1';
       assert.isOk(radio.el.querySelector("input[value='radio-1']").checked, 'check radio-1');
       assert.isNotOk(radio.el.querySelector("input[value='radio-2']").checked, 'check radio-2');
     });
 
-    it('should set default value to null', () => {
+    it('should set the value to null', () => {
       component.scope.cRadioValue = null;
       assert.isNotOk(radio.el.querySelector("input[value='radio-1']").checked, 'check radio-1');
       assert.isNotOk(radio.el.querySelector("input[value='radio-2']").checked, 'check radio-2');
     });
+
+    it('should set the value to the default one because of attrs.defaultRequired', () => {
+      radio.attrs.defaultRequired = true;
+      assert.isOk(radio.el.querySelector("input[value='radio-1']").checked, 'check radio-1');
+      assert.isNotOk(radio.el.querySelector("input[value='radio-2']").checked, 'check radio-2');
+    });
+
+    it('should set the value to the default one because of a null', () => {
+      component.scope.cRadioValue = 'radio-2';
+      component.scope.cRadioValue = null;
+      assert.isOk(radio.el.querySelector("input[value='radio-1']").checked, 'check radio-1');
+      assert.isNotOk(radio.el.querySelector("input[value='radio-2']").checked, 'check radio-2');
+    });
   });
 
   describe('Url, Object, Image', () => {