Merge pull request #1774 from kaliber5/glimmer-form

Convert remaining form components to TO/Glimmer

addon/components/bs-form/element/errors.hbs

@@ -1,5 +1,5 @@
-{{#if this.show}}
-  {{#if this.showMultipleErrors}}
+{{#if @show}}
+  {{#if @showMultipleErrors}}
     <div class="pre-scrollable">
       {{#each @messages as |message|}}
         <div class="invalid-feedback d-block">{{message}}</div>

addon/components/bs-form/element/feedback-icon.hbs

@@ -1,3 +1,3 @@
-{{#if this.show}}
-  <span class="form-control-feedback {{this.iconName}}" aria-hidden="true"></span>
+{{#if @show}}
+  <span class="form-control-feedback {{@iconName}}" aria-hidden="true"></span>
 {{/if}}

addon/components/bs-form/element/label.hbs

@@ -1,4 +1,15 @@
-<label class="{{if (macroCondition (macroGetOwnConfig "isBS5")) "form-label"}} {{if this.invisibleLabel (if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only")}} {{this.labelClass}} {{if this.isHorizontalAndNotCheckbox "col-form-label"}} {{if this.isCheckbox "form-check-label"}} {{if (bs-eq "switch" @controlType) (if (macroCondition (macroGetOwnConfig "isBS5")) "form-check-label" "custom-control-label")}} {{this.sizeClass}}" for={{@formElementId}}>
+<label
+  class="
+    {{if (macroCondition (macroGetOwnConfig "isBS5")) "form-label"}}
+    {{if @invisibleLabel (if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only")}}
+    {{@labelClass}}
+    {{if this.isHorizontalAndNotCheckbox "col-form-label"}}
+    {{if this.isCheckbox "form-check-label"}}
+    {{if (bs-eq "switch" @controlType) (if (macroCondition (macroGetOwnConfig "isBS5")) "form-check-label" "custom-control-label")}}
+    {{if this.isHorizontal (bs-size-class "col-form-label" @size)}}"
+  for={{@formElementId}}
+  ...attributes
+>
   {{#if (has-block)}}
     {{yield}}
   {{/if}}

addon/components/bs-form/element/label.js

@@ -1,10 +1,6 @@
-import { tagName } from '@ember-decorators/component';
-import { computed } from '@ember/object';
-import { equal } from '@ember/object/computed';
-import Component from '@ember/component';
-import defaultValue from 'ember-bootstrap/utils/default-decorator';
-import { isBlank } from '@ember/utils';
+import Component from '@glimmer/component';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
+import arg from 'ember-bootstrap/utils/decorators/arg';
 
 /**
 
@@ -13,7 +9,6 @@ import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
  @extends Ember.Component
  @private
  */
-@tagName('')
 @deprecateSubclassing
 export default class FormElementLabel extends Component {
   /**
@@ -27,32 +22,18 @@ export default class FormElementLabel extends Component {
    * @type boolean
    * @public
    */
-  @defaultValue
-  invisibleLabel = false;
 
-  @computed('isHorizontal', 'isCheckbox')
   get isHorizontalAndNotCheckbox() {
     return this.isHorizontal && !this.isCheckbox;
   }
 
-  @computed('size', 'isHorizontal')
-  get sizeClass() {
-    if (!this.isHorizontal) {
-      return undefined;
-    }
-    let size = this.size;
-    return isBlank(size) ? null : `col-form-label-${size}`;
-  }
-
   /**
    * [BS4 only] Property for size styling, set to 'lg', 'sm'
    *
    * @property size
    * @type String
    * @public
    */
-  @defaultValue
-  size = null;
 
   /**
    * @property formElementId
@@ -80,7 +61,7 @@ export default class FormElementLabel extends Component {
    * @default 'vertical'
    * @public
    */
-  @defaultValue
+  @arg
   formLayout = 'vertical';
 
   /**
@@ -98,7 +79,7 @@ export default class FormElementLabel extends Component {
    * @default 'text'
    * @public
    */
-  @defaultValue
+  @arg
   controlType = 'text';
 
   /**
@@ -108,8 +89,9 @@ export default class FormElementLabel extends Component {
    * @type boolean
    * @private
    */
-  @(equal('controlType', 'checkbox').readOnly())
-  isCheckbox;
+  get isCheckbox() {
+    return this.args.controlType === 'checkbox';
+  }
 
   /**
    * Indicates whether the form type equals `horizontal`
@@ -118,6 +100,7 @@ export default class FormElementLabel extends Component {
    * @type boolean
    * @private
    */
-  @(equal('formLayout', 'horizontal').readOnly())
-  isHorizontal;
+  get isHorizontal() {
+    return this.args.formLayout === 'horizontal';
+  }
 }

addon/components/bs-form/element/legend.hbs

@@ -1,4 +1,10 @@
-<legend class="{{if this.invisibleLabel (if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only")}} {{this.labelClass}} {{if this.isHorizontalAndNotCheckbox "col-form-label"}} {{this.sizeClass}}">
+<legend
+  class="
+    {{if @invisibleLabel (if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only")}}
+    {{@labelClass}}
+    {{if this.isHorizontalAndNotCheckbox "col-form-label"}}
+    {{if this.isHorizontal (bs-size-class "col-form-label" @size)}}"
+>
   {{#if (has-block)}}
     {{yield}}
   {{/if}}

addon/components/bs-form/element/legend.js

@@ -1,8 +1,6 @@
-import { tagName } from '@ember-decorators/component';
 import FormElementLabel from 'ember-bootstrap/components/bs-form/element/label';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
-@tagName('')
 @deprecateSubclassing
 export default class FormElementLegend extends FormElementLabel {
   '__ember-bootstrap_subclass' = true;