noob-components/.trellis/spec/plugs-element/list-table-dialog.md

# listTableDialog

> List table dialog with ListTableDialog component and options interface.

## Source

**File**: `plugs/element/listTableDialog.ts`

---

## Interface: ListTableProps

Configuration props for the list table component used within the dialog.

```typescript
export interface ListTableProps {
  props: TableColumn[];        // Column definitions for the table
  rowKey: string;               // Unique row identifier field
  initialPage?: number;         // Starting page number (default: 1)
  initialPageSize?: number;     // Rows per page (default: varies)
  initExample?: Record<string, any>;  // Initial filter/query parameters
  useDicts?: string[];          // Dictionary keys to load for this table
}
```

---

## Interface: Options

Configuration for `showListTableDialog` function.

```typescript
interface Options {
  title: string;                                    // Dialog title
  props: ListTableProps;                            // Table configuration
  query: (example: Record<string, any>) => Promise<PageResponse<Row>>;  // Fetch data callback
  confirm: (rows: Row[]) => Promise<void>;         // Confirm selection callback
  children?: any;                                   // Optional slot content
}
```

---

## Function: showListTableDialog

Opens a modal dialog containing a list table for row selection.

### Signature

```typescript
export function showListTableDialog({ title, props, query, confirm, children }: Options): {
  open: () => Promise<void>;
  close: () => void;
}
```

### Usage Example

```typescript
import { showListTableDialog } from 'plugs/element';

const { open, close } = showListTableDialog({
  title: 'Select Items',
  props: {
    props: [
      { label: 'Name', property: 'name' },
      { label: 'Status', property: 'status' }
    ],
    rowKey: 'id',
    initialPage: 1,
    initialPageSize: 20,
    useDicts: ['status']
  },
  query: async (example) => {
    const response = await api.fetchItems(example);
    return response.data;
  },
  confirm: async (rows) => {
    console.log('Selected:', rows);
  }
});

await open();
```

### Error Handling

```typescript
const open = async () => {
  try {
    await ElMessageBox({ ... });
  } catch (err) {
    if (err === 'cancel' || err === 'close') {
      return;  // User dismissed, not an error
    }
    throw err;  // Re-throw actual errors
  }
};
```

### Dialog Behavior

- Modal dialog with `ListTableDialog` component from `noob-mengyxu`
- `onQuery` handles async data fetching with `handleAsync`
- `onConfirm` logs and calls the confirm callback
- `onClose` closes the message box programmatically
- Max width set to `80%` via `customStyle`
- No default confirm/cancel buttons (handled by ListTableDialog internally)

---

## Related

- `plugs/element/index.ts` exports this module
- Uses `ElMessageBox` from Element Plus for dialog container
- Uses `h()` from Vue for render function