Add nullLabel option

Author: aldeed

.versions

@@ -1,4 +1,4 @@
-aldeed:autoform@5.4.1
+aldeed:autoform@5.5.0
 aldeed:[email protected]
 [email protected]
 [email protected]
@@ -16,7 +16,7 @@ [email protected]
 [email protected]_2
 [email protected]
 [email protected]
-local-test:aldeed:autoform@5.4.1
+local-test:aldeed:autoform@5.5.0
 [email protected]
 [email protected]
 [email protected]

CHANGELOG.md

@@ -6,9 +6,13 @@ forms with automatic insert and update events, and automatic reactive validation
 
 ## Change Log
 
+### 5.5.0
+
+For `boolean-radios` and `boolean-select` input types, you can now use the `nullLabel` attribute to specify a label (e.g., "None") for when the value is not set (or to unset it). For backwards compatibility, the `boolean-radios` type will not render a radio element for unsetting unless you set `nullLabel`.
+
 ### 5.4.1
 
-* Fix `AutoForm.getFieldValue` so that it reacts properly when first called outside of the form, before the form has been rendered. Also attempt to limit unnecessary reruns.
+Fix `AutoForm.getFieldValue` so that it reacts properly when first called outside of the form, before the form has been rendered. Also attempt to limit unnecessary reruns.
 
 ### 5.4.0
 

README.md

@@ -451,7 +451,7 @@ If you don't include a `type` attribute, the following logic is used to automati
 * Otherwise if the schema type is `String` and you include the `rows` attribute, a `textarea` is used.
 * Otherwise if the schema type is `Number`, a `number` type is used.
 * Otherwise if the schema type is `Date`, a `date` type is used.
-* Otherwise if the schema type is `Boolean`, the `boolean-checkbox` type is used. You may want to specify a `type` of `boolean-radios` or `boolean-select` instead. If you do so, use the `trueLabel` and `falseLabel` attributes to set the labels used in the radio or select control.
+* Otherwise if the schema type is `Boolean`, the `boolean-checkbox` type is used. You may want to specify a `type` of `boolean-radios` or `boolean-select` instead. If you do so, use the `trueLabel`, `falseLabel`, and `nullLabel` attributes to set the labels used in the radio or select control.
 * Otherwise a `text` type is used.
 
 The following attributes are recognized:
@@ -473,6 +473,7 @@ to `true` to render radios or checkboxes for the `options` instead of `select`.
 option for an input with type `boolean-select` or `boolean-radios`.
 * `falseLabel`: Set to the string that should be used as the label for the `false`
 option for an input with type `boolean-select` or `boolean-radios`.
+* `nullLabel`: Set to the string that should be used as the label for the empty value option for an input with type `boolean-select` or `boolean-radios`.
 * `value`: Set a specific, potentially reactive, value for the input. If you have also provided a `doc` attribute on the `autoForm` or `quickForm`, this value will override the value from the `doc` object.
 * `defaultValue`: Set a reactive default value for the input. If you have also provided a `doc` attribute on the `autoForm` or `quickForm`, this value will be used only when the `doc` object has no value for this field. This takes precedence over the `defaultValue` property of the field's schema. (Also, `defaultValue` from the schema is slightly different in that it is never used if you provide a `doc` attribute.)
 *  Any additional attributes are passed along to the generated DOM element, meaning that you can add `class`, etc. When providing a boolean attribute, set it to `true` (no quotation marks) or a helper that returns `true`.

inputTypes/boolean-radios/boolean-radios.html

@@ -6,5 +6,10 @@
     <div>
       <label><input type="radio" value="true" name="{{this.name}}" {{trueAtts}} /> {{#with this.atts.trueLabel}}{{this}}{{else}}True{{/with}}</label>
     </div>
+    {{#with this.atts.nullLabel}}
+    <div>
+      <label><input type="radio" value="" name="{{../name}}" {{nullAtts}} /> {{this}}</label>
+    </div>
+    {{/with}}
   </div>
 </template>

inputTypes/boolean-radios/boolean-radios.js

@@ -45,19 +45,26 @@ AutoForm.addInputType("boolean-radios", {
 
 Template["afBooleanRadioGroup"].helpers({
   falseAtts: function falseAtts() {
-    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'data-schema-key');
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
     if (this.value === false) {
       atts.checked = "";
     }
     return atts;
   },
   trueAtts: function trueAtts() {
-    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'data-schema-key');
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
     if (this.value === true) {
       atts.checked = "";
     }
     return atts;
   },
+  nullAtts: function nullAtts() {
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
+    if (this.value !== true && this.value !== false) {
+      atts.checked = "";
+    }
+    return atts;
+  },
   dsk: function () {
     return {'data-schema-key': this.atts['data-schema-key']};
   }

inputTypes/boolean-select/boolean-select.js

@@ -43,7 +43,7 @@ AutoForm.addInputType("boolean-select", {
     }
   },
   contextAdjust: function (context) {
-    var atts = _.omit(context.atts, 'trueLabel', 'falseLabel', 'firstOption');
+    var atts = _.omit(context.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'firstOption');
 
     // build items list
     context.items = [
@@ -55,7 +55,7 @@ AutoForm.addInputType("boolean-select", {
         // See https://github.com/meteor/meteor/issues/2174
         _id: "",
         selected: (context.value !== false && context.value !== true),
-        label: context.atts.firstOption || "(Select One)",
+        label: context.atts.nullLabel || context.atts.firstOption || "(Select One)",
         atts: atts
       },
       {

package.js

@@ -2,7 +2,7 @@ Package.describe({
   name: "aldeed:autoform",
   summary: "Easily create forms with automatic insert and update, and automatic reactive validation.",
   git: "https://github.com/aldeed/meteor-autoform.git",
-  version: "5.4.1"
+  version: "5.5.0"
 });
 
 Package.onUse(function(api) {

templates/bootstrap3/inputTypes/boolean-radios/boolean-radios.html

@@ -6,5 +6,10 @@
     <div class="radio">
       <label><input type="radio" value="true" name="{{this.name}}" {{trueAtts}} /> {{#with this.atts.trueLabel}}{{this}}{{else}}True{{/with}}</label>
     </div>
+    {{#with this.atts.nullLabel}}
+    <div class="radio">
+      <label><input type="radio" value="" name="{{../name}}" {{nullAtts}} /> {{this}}</label>
+    </div>
+    {{/with}}
   </div>
 </template>

templates/bootstrap3/inputTypes/boolean-radios/boolean-radios.js

@@ -1,18 +1,25 @@
 Template.afBooleanRadioGroup_bootstrap3.helpers({
   falseAtts: function falseAtts() {
-    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'data-schema-key');
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
     if (this.value === false) {
       atts.checked = "";
     }
     return atts;
   },
   trueAtts: function trueAtts() {
-    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'data-schema-key');
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
     if (this.value === true) {
       atts.checked = "";
     }
     return atts;
   },
+  nullAtts: function nullAtts() {
+    var atts = _.omit(this.atts, 'trueLabel', 'falseLabel', 'nullLabel', 'data-schema-key');
+    if (this.value !== true && this.value !== false) {
+      atts.checked = "";
+    }
+    return atts;
+  },
   dsk: function () {
     return {'data-schema-key': this.atts['data-schema-key']};
   }