ember-primitives 0.48.2 → 0.50.0

package/src/components/accordion/content.gts

@@ -0,0 +1,34 @@
+import Component from "@glimmer/component";
+
+import { getDataState } from "./item.gts";
+
+import type { AccordionContentExternalSignature } from "./public.ts";
+
+interface Signature extends AccordionContentExternalSignature {
+  Args: {
+    isExpanded: boolean;
+    value: string;
+    disabled?: boolean;
+  };
+}
+
+export class AccordionContent extends Component<Signature> {
+  <template>
+    <div
+      role="region"
+      id={{@value}}
+      data-state={{getDataState @isExpanded}}
+      hidden={{this.isHidden}}
+      data-disabled={{@disabled}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+
+  get isHidden() {
+    return !this.args.isExpanded;
+  }
+}
+
+export default AccordionContent;

package/src/components/accordion/header.gts

@@ -0,0 +1,36 @@
+import { hash } from "@ember/helper";
+
+import { getDataState } from "./item.gts";
+import Trigger from "./trigger.gts";
+
+import type { AccordionHeaderExternalSignature } from "./public.ts";
+import type { TOC } from "@ember/component/template-only";
+
+interface Signature extends AccordionHeaderExternalSignature {
+  Args: {
+    value: string;
+    isExpanded: boolean;
+    disabled?: boolean;
+    toggleItem: () => void;
+  };
+}
+
+export const AccordionHeader: TOC<Signature> = <template>
+  <div
+    role="heading"
+    aria-level="3"
+    data-state={{getDataState @isExpanded}}
+    data-disabled={{@disabled}}
+    ...attributes
+  >
+    {{yield
+      (hash
+        Trigger=(component
+          Trigger value=@value isExpanded=@isExpanded disabled=@disabled toggleItem=@toggleItem
+        )
+      )
+    }}
+  </div>
+</template>;
+
+export default AccordionHeader;

package/src/components/accordion/item.gts

@@ -0,0 +1,55 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+
+import Content from "./content.gts";
+import Header from "./header.gts";
+
+import type { AccordionItemExternalSignature } from "./public.ts";
+
+export function getDataState(isExpanded: boolean): string {
+  return isExpanded ? "open" : "closed";
+}
+
+interface Signature extends AccordionItemExternalSignature {
+  Args: AccordionItemExternalSignature["Args"] & {
+    selectedValue?: string | string[];
+    disabled?: boolean;
+    toggleItem: (value: string) => void;
+  };
+}
+
+export class AccordionItem extends Component<Signature> {
+  <template>
+    <div data-state={{getDataState this.isExpanded}} data-disabled={{@disabled}} ...attributes>
+      {{yield
+        (hash
+          isExpanded=this.isExpanded
+          Header=(component
+            Header
+            value=@value
+            isExpanded=this.isExpanded
+            disabled=@disabled
+            toggleItem=this.toggleItem
+          )
+          Content=(component Content value=@value isExpanded=this.isExpanded disabled=@disabled)
+        )
+      }}
+    </div>
+  </template>
+
+  get isExpanded(): boolean {
+    if (Array.isArray(this.args.selectedValue)) {
+      return this.args.selectedValue.includes(this.args.value);
+    }
+
+    return this.args.selectedValue === this.args.value;
+  }
+
+  toggleItem = (): void => {
+    if (this.args.disabled) return;
+
+    this.args.toggleItem(this.args.value);
+  };
+}
+
+export default AccordionItem;

package/src/components/accordion/public.ts

@@ -0,0 +1,64 @@
+import type Content from './content.gts';
+import type Header from './header.gts';
+import type Trigger from './trigger.gts';
+import type { WithBoundArgs } from '@glint/template';
+
+export interface AccordionTriggerExternalSignature {
+  Element: HTMLButtonElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export interface AccordionContentExternalSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export interface AccordionHeaderExternalSignature {
+  /**
+   * Add aria-level according to the heading level where the accordion is used (default: 3).
+   * See https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ for more information.
+   */
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [
+      {
+        /**
+         * The AccordionTrigger component.
+         */
+        Trigger: WithBoundArgs<typeof Trigger, 'value' | 'isExpanded' | 'disabled' | 'toggleItem'>;
+      },
+    ];
+  };
+}
+
+export interface AccordionItemExternalSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [
+      {
+        /**
+         * Whether the accordion item is expanded.
+         */
+        isExpanded: boolean;
+        /**
+         * The AccordionHeader component.
+         */
+        Header: WithBoundArgs<typeof Header, 'value' | 'isExpanded' | 'disabled' | 'toggleItem'>;
+        /**
+         * The AccordionContent component.
+         */
+        Content: WithBoundArgs<typeof Content, 'value' | 'isExpanded' | 'disabled'>;
+      },
+    ];
+  };
+  Args: {
+    /**
+     * The value of the accordion item.
+     */
+    value: string;
+  };
+}

package/src/components/accordion/trigger.gts

@@ -0,0 +1,32 @@
+import { on } from "@ember/modifier";
+
+import { getDataState } from "./item.gts";
+
+import type { AccordionTriggerExternalSignature } from "./public.ts";
+import type { TOC } from "@ember/component/template-only";
+
+interface Signature extends AccordionTriggerExternalSignature {
+  Args: {
+    isExpanded: boolean;
+    value: string;
+    disabled?: boolean;
+    toggleItem: () => void;
+  };
+}
+
+export const AccordionTrigger: TOC<Signature> = <template>
+  <button
+    type="button"
+    aria-controls={{@value}}
+    aria-expanded={{@isExpanded}}
+    data-state={{getDataState @isExpanded}}
+    data-disabled={{@disabled}}
+    aria-disabled={{if @disabled "true" "false"}}
+    {{on "click" @toggleItem}}
+    ...attributes
+  >
+    {{yield}}
+  </button>
+</template>;
+
+export default AccordionTrigger;

package/src/components/accordion.gts

@@ -0,0 +1,195 @@
+import Component from "@glimmer/component";
+import { assert } from "@ember/debug";
+import { hash } from "@ember/helper";
+
+// temp
+//  https://github.com/tracked-tools/tracked-toolbox/issues/38
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { localCopy } from "tracked-toolbox";
+
+import AccordionItem from "./accordion/item.gts";
+
+import type { WithBoundArgs } from "@glint/template";
+
+type AccordionSingleArgs = {
+  /**
+   * The type of accordion. If `single`, only one item can be selected at a time. If `multiple`, multiple items can be selected at a time.
+   */
+  type: "single";
+  /**
+   * Whether the accordion is disabled. When `true`, all items cannot be expanded or collapsed.
+   */
+  disabled?: boolean;
+  /**
+   * When type is `single`, whether the accordion is collapsible. When `true`, the selected item can be collapsed by clicking its trigger.
+   */
+  collapsible?: boolean;
+} & (
+  | {
+      /**
+       * The currently selected value. To be used in a controlled fashion in conjunction with `onValueChange`.
+       */
+      value: string;
+      /**
+       * A callback that is called when the selected value changes. To be used in a controlled fashion in conjunction with `value`.
+       */
+      onValueChange: (value: string | undefined) => void;
+      /**
+       * Not available in a controlled fashion.
+       */
+      defaultValue?: never;
+    }
+  | {
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      value?: never;
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      onValueChange?: never;
+      /**
+       * The default value of the accordion. To be used in an uncontrolled fashion.
+       */
+      defaultValue?: string;
+    }
+);
+
+type AccordionMultipleArgs = {
+  /**
+   * The type of accordion. If `single`, only one item can be selected at a time. If `multiple`, multiple items can be selected at a time.
+   */
+  type: "multiple";
+  /**
+   * Whether the accordion is disabled. When `true`, all items cannot be expanded or collapsed.
+   */
+  disabled?: boolean;
+} & (
+  | {
+      /**
+       * The currently selected values. To be used in a controlled fashion in conjunction with `onValueChange`.
+       */
+      value: string[];
+      /**
+       * A callback that is called when the selected values change. To be used in a controlled fashion in conjunction with `value`.
+       */
+      onValueChange: (value?: string[]) => void;
+      /**
+       * Not available in a controlled fashion.
+       */
+      defaultValue?: never;
+    }
+  | {
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      value?: never;
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      onValueChange?: never;
+      /**
+       * The default values of the accordion. To be used in an uncontrolled fashion.
+       */
+      defaultValue?: string[];
+    }
+);
+
+export class Accordion extends Component<{
+  Element: HTMLDivElement;
+  Args: AccordionSingleArgs | AccordionMultipleArgs;
+  Blocks: {
+    default: [
+      {
+        /**
+         * The AccordionItem component.
+         */
+        Item: WithBoundArgs<typeof AccordionItem, "selectedValue" | "toggleItem" | "disabled">;
+      },
+    ];
+  };
+}> {
+  <template>
+    <div data-disabled={{@disabled}} ...attributes>
+      {{yield
+        (hash
+          Item=(component
+            AccordionItem
+            selectedValue=this.selectedValue
+            toggleItem=this.toggleItem
+            disabled=@disabled
+          )
+        )
+      }}
+    </div>
+  </template>
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  @localCopy("args.defaultValue") declare _internallyManagedValue?: string | string[];
+
+  get selectedValue() {
+    return this.args.value ?? this._internallyManagedValue;
+  }
+
+  toggleItem = (value: string) => {
+    if (this.args.disabled) {
+      return;
+    }
+
+    if (this.args.type === "single") {
+      this.toggleItemSingle(value);
+    } else if (this.args.type === "multiple") {
+      this.toggleItemMultiple(value);
+    }
+  };
+
+  toggleItemSingle = (value: string) => {
+    assert("Cannot call `toggleItemSingle` when `disabled` is true.", !this.args.disabled);
+    assert(
+      "Cannot call `toggleItemSingle` when `type` is not `single`.",
+      this.args.type === "single",
+    );
+
+    if (value === this.selectedValue && !this.args.collapsible) {
+      return;
+    }
+
+    const newValue = value === this.selectedValue ? undefined : value;
+
+    if (this.args.onValueChange) {
+      this.args.onValueChange(newValue);
+    } else {
+      this._internallyManagedValue = newValue;
+    }
+  };
+
+  toggleItemMultiple = (value: string) => {
+    assert("Cannot call `toggleItemMultiple` when `disabled` is true.", !this.args.disabled);
+    assert(
+      "Cannot call `toggleItemMultiple` when `type` is not `multiple`.",
+      this.args.type === "multiple",
+    );
+
+    const currentValues = (this.selectedValue as string[] | undefined) ?? [];
+    const indexOfValue = currentValues.indexOf(value);
+    let newValue: string[];
+
+    if (indexOfValue === -1) {
+      newValue = [...currentValues, value];
+    } else {
+      newValue = [
+        ...currentValues.slice(0, indexOfValue),
+        ...currentValues.slice(indexOfValue + 1),
+      ];
+    }
+
+    if (this.args.onValueChange) {
+      this.args.onValueChange(newValue);
+    } else {
+      this._internallyManagedValue = newValue;
+    }
+  };
+}
+
+export default Accordion;

package/src/components/avatar.gts

@@ -0,0 +1,108 @@
+import { hash } from "@ember/helper";
+
+import { ReactiveImage } from "reactiveweb/image";
+import { WaitUntil } from "reactiveweb/wait-until";
+
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
+
+const Fallback: TOC<{
+  Blocks: { default: [] };
+  Args: {
+    /**
+     * The number of milliseconds to wait for the image to load
+     * before displaying the fallback
+     */
+    delayMs?: number;
+    /**
+     * @private
+     * Bound internally by ember-primitives
+     */
+    isLoaded: boolean;
+  };
+}> = <template>
+  {{#unless @isLoaded}}
+    {{#let (WaitUntil @delayMs) as |delayFinished|}}
+      {{#if delayFinished}}
+        {{yield}}
+      {{/if}}
+    {{/let}}
+  {{/unless}}
+</template>;
+
+const Image: TOC<{
+  Element: HTMLImageElement;
+  Args: {
+    /**
+     * @private
+     * The `src` value for the image.
+     *
+     * Bound internally by ember-primitives
+     */
+    src: string;
+    /**
+     * @private
+     * Bound internally by ember-primitives
+     */
+    isLoaded: boolean;
+  };
+}> = <template>
+  {{#if @isLoaded}}
+    <img alt="__missing__" ...attributes src={{@src}} />
+  {{/if}}
+</template>;
+
+export const Avatar: TOC<{
+  Element: HTMLSpanElement;
+  Args: {
+    /**
+     * The `src` value for the image.
+     */
+    src: string;
+  };
+  Blocks: {
+    default: [
+      avatar: {
+        /**
+         * The image to render. It will only render when it has loaded.
+         */
+        Image: WithBoundArgs<typeof Image, "src" | "isLoaded">;
+        /**
+         * An element that renders when the image hasn't loaded.
+         * This means whilst it's loading, or if there was an error.
+         * If you notice a flash during loading,
+         * you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections.
+         */
+        Fallback: WithBoundArgs<typeof Fallback, "isLoaded">;
+        /**
+         * true while the image is loading
+         */
+        isLoading: boolean;
+        /**
+         * If the image fails to load, this will be `true`
+         */
+        isError: boolean;
+      },
+    ];
+  };
+}> = <template>
+  {{#let (ReactiveImage @src) as |imgState|}}
+    <span
+      data-prim-avatar
+      ...attributes
+      data-loading={{imgState.isLoading}}
+      data-error={{imgState.isError}}
+    >
+      {{yield
+        (hash
+          Image=(component Image src=@src isLoaded=imgState.isResolved)
+          Fallback=(component Fallback isLoaded=imgState.isResolved)
+          isLoading=imgState.isLoading
+          isError=imgState.isError
+        )
+      }}
+    </span>
+  {{/let}}
+</template>;
+
+export default Avatar;