Merge pull request ember-bootstrap#2274 from ember-bootstrap/gjs-codemod

updated components to GJS/GTS using @embroider/template-tag-codemod

Author: SanderKnauff

.git-blame-ignore-revs

@@ -0,0 +1 @@
+fcbc290b83607dd8dba9fffb9ed28e5243a5f8da

ember-bootstrap/.eslintrc.js

@@ -63,6 +63,10 @@ module.exports = {
         'plugin:ember/recommended',
         'plugin:ember/recommended-gts',
       ],
+      rules: {
+        'ember/no-runloop': 'warn',
+        'ember/no-at-ember-render-modifiers': 'warn',
+      },
     },
     {
       files: ['**/*.gjs'],
@@ -73,6 +77,10 @@ module.exports = {
         'plugin:ember/recommended',
         'plugin:ember/recommended-gjs',
       ],
+      rules: {
+        'ember/no-runloop': 'warn',
+        'ember/no-at-ember-render-modifiers': 'warn',
+      },
     },
     // node files
     {

…r-bootstrap/addon/components/bs-alert.ts …-bootstrap/addon/components/bs-alert.gtsember-bootstrap/addon/components/bs-alert.ts renamed to ember-bootstrap/addon/components/bs-alert.gts ember-bootstrap/addon/components/bs-alert.ts renamed to ember-bootstrap/addon/components/bs-alert.gts

@@ -4,6 +4,13 @@ import { tracked } from '@glimmer/tracking';
 import { later } from '@ember/runloop';
 import usesTransition from 'ember-bootstrap/utils/decorators/uses-transition';
 import arg from 'ember-bootstrap/utils/decorators/arg';
+import bsTypeClass from 'ember-bootstrap/helpers/bs-type-class';
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { on } from '@ember/modifier';
+import element_ from 'ember-element-helper/helpers/element';
+import bsDefault from 'ember-bootstrap/helpers/bs-default';
+import { macroCondition } from '@embroider/macros';
+declare function macroGetOwnConfig(path: string): boolean;
 
 interface BsAlertSignature {
   Args: {
@@ -252,4 +259,50 @@ export default class Alert extends Component<BsAlertSignature> {
   updateVisibility() {
     this._visible = this.args.visible;
   }
+
+  <template>
+    <div
+      class='{{unless this.hidden "alert"}}
+        {{if this.fade "fade"}}
+        {{if this.dismissible "alert-dismissible"}}
+        {{bsTypeClass "alert" @type}}
+        {{if this.showAlert "show"}}'
+      ...attributes
+      {{didUpdate this.showOrHide this._visible}}
+      {{didUpdate this.updateVisibility @visible}}
+    >
+      {{#unless this.hidden}}
+        {{#if this.dismissible}}
+          <button
+            type='button'
+            class={{if
+              (macroCondition (macroGetOwnConfig 'isBS4'))
+              'close'
+              'btn-close'
+            }}
+            aria-label='Close'
+            {{on 'click' this.dismiss}}
+          >
+            {{#if (macroCondition (macroGetOwnConfig 'isBS4'))}}<span
+                aria-hidden='true'
+              >&times;</span>{{/if}}
+          </button>
+        {{/if}}
+
+        {{#if (has-block 'header')}}
+          {{#let (element_ (bsDefault @headerTag 'h4')) as |Tag|}}
+            <Tag class='alert-heading'>
+              {{yield to='header'}}
+            </Tag>
+          {{/let}}
+        {{/if}}
+
+        {{#if (has-block 'body')}}
+          {{yield to='body'}}
+        {{else}}
+          {{yield}}
+        {{/if}}
+      {{/unless}}
+    </div>
+  </template>
 }

ember-bootstrap/addon/components/bs-alert.hbs

@@ -1,6 +1,10 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { A, isArray } from '@ember/array';
+import bsSizeClass from 'ember-bootstrap/helpers/bs-size-class';
+import { hash } from '@ember/helper';
+import bsDefault from 'ember-bootstrap/helpers/bs-default';
+import BsButtonGroupButton from 'ember-bootstrap/components/bs-button-group/button';
 
 /**
   Bootstrap-style button group, that visually groups buttons, and optionally adds radio/checkbox like behaviour.
@@ -161,4 +165,25 @@ export default class ButtonGroup extends Component {
 
     this.args.onChange(newValue);
   }
+
+  <template>
+    {{! @glint-nocheck }}
+    <div
+      class='{{if @vertical "btn-group-vertical" "btn-group"}}
+        {{bsSizeClass "btn-group" @size}}'
+      role='group'
+      ...attributes
+    >
+      {{yield
+        (hash
+          button=(component
+            (bsDefault @buttonComponent (component BsButtonGroupButton))
+            buttonGroupType=@type
+            groupValue=@value
+            onClick=this.buttonPressed
+          )
+        )
+      }}
+    </div>
+  </template>
 }

…trap/addon/components/bs-button-group.js …rap/addon/components/bs-button-group.gjsember-bootstrap/addon/components/bs-button-group.js renamed to ember-bootstrap/addon/components/bs-button-group.gjs ember-bootstrap/addon/components/bs-button-group.js renamed to ember-bootstrap/addon/components/bs-button-group.gjs

@@ -0,0 +1,122 @@
+import { isArray } from '@ember/array';
+import Button from 'ember-bootstrap/components/bs-button';
+import { guidFor } from '@ember/object/internals';
+import { getOwnConfig, macroCondition } from '@embroider/macros';
+import { on } from '@ember/modifier';
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import bsSizeClass from 'ember-bootstrap/helpers/bs-size-class';
+import bsTypeClass from 'ember-bootstrap/helpers/bs-type-class';
+import { hash } from '@ember/helper';
+
+/**
+ Internal component for button-group buttons
+
+ @class ButtonGroupButton
+ @namespace Components
+ @extends Components.Button
+ @private
+ */
+export default class ButtonGroupButton extends Button {
+  formId = guidFor(this);
+
+  /**
+   * @property groupValue
+   * @private
+   */
+
+  /**
+   * @property buttonGroupType
+   * @type string
+   * @private
+   */
+
+  /**
+   * @property active
+   * @type boolean
+   * @readonly
+   * @private
+   */
+  get active() {
+    let { value, groupValue } = this.args;
+    if (this.args.buttonGroupType === 'radio') {
+      return value === groupValue;
+    } else {
+      if (isArray(groupValue)) {
+        return groupValue.indexOf(value) !== -1;
+      }
+    }
+    return false;
+  }
+
+  get isBS5ToggleButton() {
+    if (macroCondition(getOwnConfig().isBS4)) {
+      return false;
+    }
+
+    return (
+      this.args.buttonGroupType === 'radio' ||
+      this.args.buttonGroupType === 'checkbox'
+    );
+  }
+
+  <template>
+    {{! @glint-nocheck }}
+    {{#if this.isBS5ToggleButton}}
+      <input
+        type={{@buttonGroupType}}
+        class='btn-check'
+        id={{this.formId}}
+        autocomplete='off'
+        checked={{this.active}}
+        ...attributes
+        {{on 'click' this.handleClick}}
+        {{didUpdate this.resetState @reset}}
+      />
+      <label
+        class='btn
+          {{bsSizeClass "btn" @size}}
+          {{bsTypeClass "btn" @type default='secondary' outline=@outline}}'
+        for={{this.formId}}
+      >
+        {{#if this.icon}}
+          <i class={{this.icon}}></i>
+        {{/if}}
+        {{this.text}}
+        {{yield
+          (hash
+            isFulfilled=this.isFulfilled
+            isPending=this.isPending
+            isRejected=this.isRejected
+            isSettled=this.isSettled
+          )
+        }}
+      </label>
+    {{else}}
+      <button
+        disabled={{this.__disabled}}
+        type='button'
+        class='btn
+          {{if this.active "active"}}
+          {{if this.block "btn-block"}}
+          {{bsSizeClass "btn" @size}}
+          {{bsTypeClass "btn" @type default='secondary' outline=@outline}}'
+        ...attributes
+        {{on 'click' this.handleClick}}
+        {{didUpdate this.resetState @reset}}
+      >
+        {{#if this.icon}}
+          <i class={{this.icon}}></i>
+        {{/if}}
+        {{this.text}}
+        {{yield
+          (hash
+            isFulfilled=this.isFulfilled
+            isPending=this.isPending
+            isRejected=this.isRejected
+            isSettled=this.isSettled
+          )
+        }}
+      </button>
+    {{/if}}
+  </template>
+}