Convert addon to gts

ember-basic-dropdown/src/components/basic-dropdown-content.ts → ember-basic-dropdown/src/components/basic-dropdown-content.gts

@@ -10,34 +10,45 @@ import {
 import hasMoved from '../utils/has-moved.ts';
 import { isTesting } from '@embroider/macros';
 import { modifier } from 'ember-modifier';
-import type { Dropdown, TRootEventType } from './basic-dropdown.ts';
+import { element } from 'ember-element-helper';
+import { or } from 'ember-truth-helpers';
+import style from 'ember-style-modifier';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { hash } from '@ember/helper';
+import type {
+  Dropdown,
+  TRootEventType,
+  HorizontalPosition,
+  VerticalPosition,
+} from '../types.ts';
 
 export interface BasicDropdownContentSignature {
-  Element: Element;
+  Element: HTMLElement;
   Args: {
     animationEnabled?: boolean;
     transitioningInClass?: string;
     transitionedInClass?: string;
     transitioningOutClass?: string;
     isTouchDevice?: boolean;
     destination?: string;
-    destinationElement?: HTMLElement;
+    destinationElement?: HTMLElement | null;
     dropdown?: Dropdown;
     renderInPlace?: boolean;
-    preventScroll?: boolean;
+    preventScroll?: boolean | undefined;
     rootEventType?: TRootEventType;
     top?: string | undefined;
     left?: string | undefined;
     right?: string | undefined;
     width?: string | undefined;
     height?: string | undefined;
-    otherStyles?: Record<string, string>;
-    hPosition?: string;
-    vPosition?: string;
+    otherStyles?: Record<string, string | number | undefined>;
+    hPosition?: HorizontalPosition | null;
+    vPosition?: VerticalPosition | null;
     dir?: string;
     defaultClass?: string;
     overlay?: boolean;
-    htmlTag?: string;
+    htmlTag?: keyof HTMLElementTagNameMap;
     onFocusIn?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onFocusOut?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onMouseEnter?: (dropdown?: Dropdown, event?: MouseEvent) => void;
@@ -514,12 +525,94 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
       el.addEventListener('scroll', this.repositionBound);
     });
   }
+
   removeScrollEvents(): void {
     window.removeEventListener('scroll', this.repositionBound);
     this.scrollableAncestors.forEach((el) => {
       el.removeEventListener('scroll', this.repositionBound);
     });
   }
+
+  <template>
+    {{#if @dropdown.isOpen}}
+      <div
+        class="ember-basic-dropdown-content-wormhole-origin"
+        {{this.registerDropdownContentWormhole}}
+      >
+        {{#if @renderInPlace}}
+          {{#if @overlay}}
+            <div class="ember-basic-dropdown-overlay"></div>
+          {{/if}}
+
+          {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+            <OptionalTag
+              id={{this.dropdownId}}
+              class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}
+                ember-basic-dropdown-content--{{@vPosition}}
+                {{this.animationClass}}{{if
+                  @renderInPlace
+                  ' ember-basic-dropdown-content--in-place'
+                }}
+                {{@defaultClass}}"
+              dir={{@dir}}
+              ...attributes
+              {{style @otherStyles this.positionStyles}}
+              {{this.respondToEvents}}
+              {{this.initiallyReposition}}
+              {{this.observeMutations}}
+              {{this.animateInAndOut}}
+              {{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
+              {{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
+              {{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
+              {{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
+              {{! V1 compatibility - See #498 }}
+            >
+              {{yield}}
+            </OptionalTag>
+          {{/let}}
+        {{else if this.destinationElement}}
+          {{#in-element this.destinationElement insertBefore=null}}
+            {{#if @overlay}}
+              <div class="ember-basic-dropdown-overlay"></div>
+            {{/if}}
+
+            {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+              <OptionalTag
+                id={{this.dropdownId}}
+                class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}
+                  ember-basic-dropdown-content--{{@vPosition}}
+                  {{this.animationClass}}{{if
+                    @renderInPlace
+                    ' ember-basic-dropdown-content--in-place'
+                  }}
+                  {{@defaultClass}}"
+                dir={{@dir}}
+                ...attributes
+                {{style @otherStyles this.positionStyles}}
+                {{this.respondToEvents}}
+                {{this.initiallyReposition}}
+                {{this.observeMutations}}
+                {{this.animateInAndOut}}
+                {{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
+                {{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
+                {{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
+                {{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
+                {{! V1 compatibility - See #498 }}
+              >
+                {{yield}}
+              </OptionalTag>
+            {{/let}}
+          {{/in-element}}
+        {{/if}}
+      </div>
+    {{else}}
+      <div
+        id={{this.dropdownId}}
+        class="ember-basic-dropdown-content-placeholder"
+        {{style (hash display="none")}}
+      ></div>
+    {{/if}}
+  </template>
 }
 
 function containsRelevantMutation(nodeList: NodeList): boolean {

ember-basic-dropdown/src/components/basic-dropdown-trigger.gts

@@ -0,0 +1,104 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { element } from 'ember-element-helper';
+import { or } from 'ember-truth-helpers';
+import { concat } from '@ember/helper';
+import basicDropdownTriggerModifier from '../modifiers/basic-dropdown-trigger.ts';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import type { Dropdown } from './basic-dropdown';
+import type { HorizontalPosition, VerticalPosition } from '../types.ts';
+
+export interface BasicDropdownTriggerSignature {
+  Element: HTMLElement;
+  Args: {
+    dropdown?: Dropdown;
+    eventType?: 'click' | 'mousedown';
+    stopPropagation?: boolean;
+    vPosition?: VerticalPosition | null;
+    hPosition?: HorizontalPosition | null;
+    defaultClass?: string;
+    renderInPlace?: boolean;
+    htmlTag?: keyof HTMLElementTagNameMap;
+    onBlur?: (dropdown?: Dropdown, event?: FocusEvent) => void;
+    onClick?: (dropdown?: Dropdown, event?: MouseEvent) => void;
+    onFocus?: (dropdown?: Dropdown, event?: FocusEvent) => void;
+    onFocusIn?: (dropdown?: Dropdown, event?: FocusEvent) => void;
+    onFocusOut?: (dropdown?: Dropdown, event?: FocusEvent) => void;
+    onKeyDown?: (dropdown?: Dropdown, event?: KeyboardEvent) => void;
+    onMouseDown?: (dropdown?: Dropdown, event?: MouseEvent) => void;
+    onMouseEnter?: (dropdown?: Dropdown, event?: MouseEvent) => void;
+    onMouseLeave?: (dropdown?: Dropdown, event?: MouseEvent) => void;
+    onTouchEnd?: (dropdown?: Dropdown, event?: TouchEvent) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class BasicDropdownTrigger extends Component<BasicDropdownTriggerSignature> {
+  // Actions
+  /**
+   * Allows similar behavior to `ember-composable-helpers`' `optional` helper.
+   * Avoids adding extra dependencies.
+   * Can be removed when the template `V1` compatibility event handlers are removed.
+   *
+   * @see https://github.com/cibernox/ember-basic-dropdown/issues/498
+   * @memberof BasicDropdownContent
+   */
+  noop(): void {}
+
+  @action
+  disableDocumentTextSelect(disable: boolean) {
+    if (disable) {
+      document.body.classList.add('ember-basic-dropdown-text-select-disabled');
+    } else {
+      document.body.classList.remove(
+        'ember-basic-dropdown-text-select-disabled',
+      );
+    }
+  }
+
+  <template>
+    {{#if @dropdown}}
+      {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+        {{! template-lint-disable no-pointer-down-event-binding }}
+        <OptionalTag
+          class="ember-basic-dropdown-trigger
+            {{if @renderInPlace ' ember-basic-dropdown-trigger--in-place'}}
+            {{if
+              @hPosition
+              (concat ' ember-basic-dropdown-trigger--' @hPosition)
+            }}
+            {{if
+              @vPosition
+              (concat ' ember-basic-dropdown-trigger--' @vPosition)
+            }}
+            {{@defaultClass}}"
+          {{basicDropdownTriggerModifier
+            dropdown=@dropdown
+            eventType=@eventType
+            stopPropagation=@stopPropagation
+          }}
+          tabindex={{unless @dropdown.disabled "0"}}
+          ...attributes
+          {{on "mousedown" (fn this.disableDocumentTextSelect true)}}
+          {{on "mouseup" (fn this.disableDocumentTextSelect false)}}
+          {{! V1 compatibility - See #498 }}
+          {{on "keydown" (fn (or @onKeyDown this.noop) @dropdown)}}
+          {{on "mousedown" (fn (or @onMouseDown this.noop) @dropdown)}}
+          {{on "touchend" (fn (or @onTouchEnd this.noop) @dropdown)}}
+          {{on "click" (fn (or @onClick this.noop) @dropdown)}}
+          {{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
+          {{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
+          {{on "focus" (fn (or @onFocus this.noop) @dropdown)}}
+          {{on "blur" (fn (or @onBlur this.noop) @dropdown)}}
+          {{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
+          {{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
+        >
+          {{yield}}
+        </OptionalTag>
+      {{/let}}
+    {{/if}}
+  </template>
+}