# @triptyk/ember-ui

Advanced UI components for Ember applications including modals, tables, menus, and lists.

## Installation

```bash
ember install @triptyk/ember-ui
```

Install peer dependencies:

```bash
ember install @triptyk/ember-input
```

## Importing Types

Add the Glint template-registry to your global.d.ts file:

```ts
import '@glint/environment-ember-loose';
import type EmberUIRegistry from '@triptyk/ember-ui/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry
    extends EmberUIRegistry {}
}
```

## HTML Naming Conventions

Every component has an HTML element with a class assigned to it. The naming follows this rule:

**Path of the component to kebab case**

Examples:
- `<TpkModal>`: .tpk-modal
- `<TpkActionsMenu>`: .tpk-actions-menu

Use the `@classless` argument to prevent the base class from being applied.

## Components

### TpkModal

A modal dialog component with overlay and focus trapping.

**Usage:**
```hbs
<button {{on "click" this.open}} type="button">
  Open the modal
</button>

<TpkModal
  @isOpen={{this.isOpen}}
  @title={{this.title}}
  @onClose={{this.onClose}}
as |Modal|>
  <Modal.Content>
    <p>Modal content here</p>
    <button type="button">Focusable element</button>
  </Modal.Content>
</TpkModal>
```

**Arguments:**
- `@isOpen`: Boolean (required) - Controls modal visibility
- `@title`: String - Modal title
- `@onClose`: Function (required) - Called when modal is closed (clicking outside, escape key, etc.)
- `@classless`: Boolean - Override default CSS classes

**Yields:**
- `Modal.Content`: Main content area

**Features:**
- Click outside to close
- Escape key to close
- Focus trapping within modal
- Accessibility support

### TpkActionsMenu

A tooltip-like actions menu component.

**Usage:**
```hbs
<TpkActionsMenu as |Action|>
  <Action
    @icon="/assets/edit.svg"
    @action={{this.showEditPopup}}
  >
    Edit
  </Action>
  <Action
    @icon="/assets/delete.svg"
    @action={{this.deleteAction}}
  >
    Delete
  </Action>
</TpkActionsMenu>
```

**Action Arguments:**
- `@icon`: String - Path to icon image
- `@action`: Function - Action to execute when clicked
- Content: Text/HTML to display for the action

**Features:**
- Dropdown menu of actions
- Icon support
- Click outside to close

### TpkTableGeneric

A comprehensive table component with sorting, pagination, and search.

**Usage:**
```hbs
<TpkTableGeneric
  @rowClick={{this.rowClick}}
  @pageSize={{this.pageSize}}
  @pageSizes={{this.pageSizes}}
  @entity="user"
as |TG|>
  <TG.SearchBar />
  <TG.Table as |Table|>
    <Table.Header as |Header|>
      <Header.Cell @sortable={{true}} @prop='firstName'>
        First Name
      </Header.Cell>
      <Header.Cell @sortable={{true}} @prop='lastName'>
        Last Name
      </Header.Cell>
      <Header.Cell @sortable={{false}} @prop='email'>
        Email
      </Header.Cell>
    </Table.Header>

    <Table.Body as |Body element|>
      <Body.Cell>
        {{element.firstName}}
      </Body.Cell>
      <Body.Cell>
        {{element.lastName}}
      </Body.Cell>
      <Body.Cell>
        {{element.email}}
      </Body.Cell>
      <Body.ActionMenu as |Action|>
        <Action @action={{this.deleteAction}}>
          Delete
        </Action>
      </Body.ActionMenu>
    </Table.Body>

    <Table.Footer />
  </TG.Table>
</TpkTableGeneric>
```

**Arguments:**
- `@rowClick`: Function - Called when a row is clicked (receives element)
- `@pageSize`: Number - Number of items per page
- `@pageSizes`: Array - Available page size options
- `@entity`: String - Entity name for display/accessibility
- `@classless`: Boolean - Override default CSS classes

**Yielded Components:**
- `TG.SearchBar`: Search input for filtering table
- `TG.Table`: Main table component
  - `Table.Header`: Table header section
    - `Header.Cell`: Header cell with optional sorting
      - `@sortable`: Boolean - Enable sorting for this column
      - `@prop`: String - Property name to sort by
  - `Table.Body`: Table body with row iteration
    - `Body.Cell`: Body cell for data
    - `Body.ActionMenu`: Actions menu for each row (uses TpkActionsMenu)
  - `Table.Footer`: Pagination footer

**Features:**
- Column sorting
- Pagination with customizable page sizes
- Search/filter functionality
- Row click handlers
- Per-row action menus
- Responsive design

### TpkStackList

A collapsible stack list component for managing arrays of items.

**Usage:**
```hbs
<TpkStackList
  @data={{this.data}}
  @onRemove={{this.onRemoveData}}
  @onAdd={{this.onAddData}}
  @titleForAdd="Add new item"
as |S|>
  <S.Title as |T|>
    Item: {{T.item.name}}
  </S.Title>
  <S.Content as |C|>
    <p>Details for {{C.item.name}}</p>
    <p>Index: {{C.index}}</p>
  </S.Content>
</TpkStackList>
```

**Arguments:**
- `@data`: Array (required) - Array of items to display
- `@onAdd`: Function (required) - Called when "add" button is clicked (should add item to array)
- `@onRemove`: Function (required) - Called when remove button is clicked (receives item, should remove from array)
- `@titleForAdd`: String (required) - Label for the add button
- `@classless`: Boolean - Override default CSS classes

**Yields:**
- `S.Title`: Title shown when item is collapsed
  - `T.item`: Current array element
- `S.Content`: Content shown when item is expanded
  - `C.item`: Current array element
  - `C.index`: Index in array

**CSS Classes:**
- `.tpk-stack`: Main container
- `.tpk-stack-title`: Stack list title
- `.tpk-stack-head`: Item header
- `.tpk-stack-head-expand-btn`: Expand/collapse button
- `.origin-top`: Item body
- `[data-is-expanded="true"]`: Applied when item is expanded
- `[data-is-expanded="false"]`: Applied when item is collapsed
- `[data-is-expanded-btn="true"]`: Applied to button when item is expanded
- `[data-is-expanded-btn="false"]`: Applied to button when item is collapsed

**Features:**
- Collapsible items
- Add/remove functionality
- Index tracking
- Item iteration
- Custom title and content templates

### TpkLazyImage

A lazy-loading image component (based on component name in registry).

**Features:**
- Lazy loads images as they enter viewport
- Performance optimization
- Progressive loading

### TpkConfirmModal

A confirmation modal component (based on component name in registry).

**Features:**
- Pre-built confirmation dialog
- Confirm/cancel actions
- Customizable messaging

### TpkStepper

A stepper/wizard component for multi-step processes (based on documentation navigation).

**Features:**
- Multi-step navigation
- Progress indication
- Step validation

## Services

### dialog-layer

A service for managing modal/dialog layers (based on source structure).

**Features:**
- Centralized dialog management
- Layer stacking
- Focus management

## Compatibility

- Ember.js v4.8 or above
- Embroider or ember-auto-import v2
- Requires @triptyk/ember-input

## License

MIT License
