Added new form control type "radio" for a group of radio buttons

ember-bootstrap · Dec 17, 2018 · 508ae1f · 508ae1f
1 parent 5af3a5c
commit 508ae1f
Show file tree

Hide file tree

Showing 11 changed files with 402 additions and 15 deletions.
diff --git a/addon/components/base/bs-form/element.js b/addon/components/base/bs-form/element.js
@@ -29,10 +29,10 @@ const nonDefaultLayouts = A([
 
  ```hbs
  {{#bs-form formLayout="horizontal" onSubmit=(action "submit") as |form|}}
- {{form.element controlType="email" label="Email" placeholder="Email" value=email}}
- {{form.element controlType="password" label="Password" placeholder="Password" value=password}}
- {{form.element controlType="checkbox" label="Remember me" value=rememberMe}}
- {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
+   {{form.element controlType="email" label="Email" placeholder="Email" value=email}}
+   {{form.element controlType="password" label="Password" placeholder="Password" value=password}}
+   {{form.element controlType="checkbox" label="Remember me" value=rememberMe}}
+   {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
  {{/bs-form}}
  ```
 
@@ -43,10 +43,10 @@ const nonDefaultLayouts = A([
 
  ```hbs
  {{#bs-form formLayout="horizontal" model=this onSubmit=(action "submit") as |form|}}
- {{form.element controlType="email" label="Email" placeholder="Email" property="email"}}
- {{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
- {{form.element controlType="checkbox" label="Remember me" property="rememberMe"}}
- {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
+   {{form.element controlType="email" label="Email" placeholder="Email" property="email"}}
+   {{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
+   {{form.element controlType="checkbox" label="Remember me" property="rememberMe"}}
+   {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
  {{/bs-form}}
  ```
 
@@ -167,7 +167,7 @@ const nonDefaultLayouts = A([
  <tr>
  <th></th>
  <th>textarea</th>
- <th>checkbox</th>
+ <th>checkbox/radio</th>
  <th>all others</th>
  </tr>
  </thead>
@@ -283,7 +283,7 @@ const nonDefaultLayouts = A([
  <tr>
  <td>readonly</td>
  <td>✔︎</td>
- <td>✔︎</td>
+ <td>︎</td>
  <td>✔︎</td>
  </tr>
  <tr>

diff --git a/addon/components/base/bs-form/element/control/radio.js b/addon/components/base/bs-form/element/control/radio.js
@@ -0,0 +1,22 @@
+import Control from '../control';
+import layout from 'ember-bootstrap/templates/components/bs-form/element/control/radio';
+
+/**
+
+ @class FormElementControlRadio
+ @namespace Components
+ @extends Components.FormElementControl
+ @private
+ */
+export default Control.extend({
+  layout,
+  tagName: '',
+
+  /**
+   * @property inline
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  inline: false
+});
diff --git a/addon/components/bs3/bs-form/element/control/radio.js b/addon/components/bs3/bs-form/element/control/radio.js
@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap/components/base/bs-form/element/control/radio';
diff --git a/addon/components/bs4/bs-form/element/control/radio.js b/addon/components/bs4/bs-form/element/control/radio.js
@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap/components/base/bs-form/element/control/radio';
diff --git a/addon/templates/components/bs3/bs-form/element/control/radio.hbs b/addon/templates/components/bs3/bs-form/element/control/radio.hbs
@@ -0,0 +1,47 @@
+{{#each options as |option index|}}
+  {{#with (concat this.elementId "-" index) as |id|}}
+    {{#if inline}}
+      <label
+        for={{id}}
+        class="radio-inline"
+      >
+        <input
+          type="radio"
+          id={{id}}
+          checked={{bs-eq option value}}
+          onclick={{action onChange option}}
+        >
+        {{#if hasblock}}
+          {{yield}}
+        {{else}}
+          {{#if optionLabelPath}}
+            {{get option op tionLabelPath}}
+          {{else}}
+            {{option}}
+          {{/if}}
+        {{/if}}
+      </label>
+    {{else}}
+      <div class="radio">
+
+        <label
+          for={{id}}
+        >
+          <input
+            type="radio"
+            id={{id}}
+          >
+          {{#if hasblock}}
+            {{yield}}
+          {{else}}
+            {{#if optionLabelPath}}
+              {{get option optionLabelPath}}
+            {{else}}
+              {{option}}
+            {{/if}}
+          {{/if}}
+        </label>
+      </div>
+    {{/if}}
+  {{/with}}
+{{/each}}
diff --git a/addon/templates/components/bs4/bs-form/element/control/radio.hbs b/addon/templates/components/bs4/bs-form/element/control/radio.hbs
@@ -0,0 +1,34 @@
+{{#each options as |option index|}}
+  <div class="form-check{{if inline " form-check-inline"}}">
+    {{#with (concat this.elementId "-" index) as |id|}}
+      <input
+        type="radio"
+        class="form-check-input"
+        id={{id}}
+        checked={{bs-eq option value}}
+        onclick={{action onChange option}}
+        name={{name}}
+        required={{required}}
+        disabled={{disabled}}
+        autofocus={{autofocus}}
+        tabindex={{tabindex}}
+        form={{form}}
+        title={{title}}
+      >
+      <label
+        for={{id}}
+        class="form-check-label"
+      >
+        {{#if hasblock}}
+          {{yield}}
+        {{else}}
+          {{#if optionLabelPath}}
+            {{get option optionLabelPath}}
+          {{else}}
+            {{option}}
+          {{/if}}
+        {{/if}}
+      </label>
+    {{/with}}
+  </div>
+{{/each}}
diff --git a/app/components/bs-form/element/control/radio.js b/app/components/bs-form/element/control/radio.js
@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap/components/bs-form/element/control/radio';
diff --git a/tests/dummy/app/controllers/demo/forms.js b/tests/dummy/app/controllers/demo/forms.js
@@ -7,7 +7,8 @@ export default Controller.extend({
   formLayout: 'vertical',
   email: null,
   password: null,
-  rememberMe: false,
+  checkbox: false,
+  radio: null,
 
   login: computed(function() {
     return Login.create(
@@ -19,6 +20,18 @@ export default Controller.extend({
     submit() {
       window.alert('Successfully submitted form data!');
     }
+  },
+
+  init() {
+    this._super(...arguments);
+    this.radioOptions = [
+      {
+        label: 'foo'
+      },
+      {
+        label: 'bar'
+      }
+    ];
   }
 
 });
diff --git a/tests/dummy/app/templates/demo/forms.hbs b/tests/dummy/app/templates/demo/forms.hbs
@@ -17,8 +17,9 @@
   {{#bs-form formLayout=formLayout model=this onSubmit=(action "submit") as |form|}}
     {{form.element controlType="email" label="Email" placeholder="Email" property="email" required=true}}
     {{form.element controlType="password" label="Password" placeholder="Password" property="password" required=true helpText="Minimum 6 characters"}}
-    {{form.element controlType="checkbox" label="Remember me" property="rememberMe"}}
-    {{form.element controlType="textarea" label="Comments" property="comments"}}
+    {{form.element controlType="radio" label="Radio" property="radio" options=radioOptions optionLabelPath="label"}}
+    {{form.element controlType="checkbox" label="Checkbox" property="checkbox"}}
+    {{form.element controlType="textarea" label="Textarea" property="textarea"}}
     {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
   {{/bs-form}}
   <!-- END-SNIPPET -->