# InlineCellEditor

A lightweight wrapper component for inline editing in table cells or other constrained spaces.

## Features

- **Minimal Wrapper**: Simple slot-based component for maximum flexibility
- **Inline Editing**: Designed for inline editing scenarios
- **Custom Styling**: Accepts custom styles
- **Focus Handling**: Built-in focus event handling

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
```

## Basic Usage

```svelte
<script>
  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<InlineCellEditor>
  <TextEditor placeholder="Edit inline..." />
</InlineCellEditor>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `style` | `string` | `''` | Custom CSS styles |

## Examples

### Basic Inline Editor

```svelte
<script>
  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
  import TextEditor from '@ticatec/uniface-element/TextEditor';

  let value = '';
</script>

<InlineCellEditor>
  <TextEditor bind:value={value} placeholder="Click to edit" />
</InlineCellEditor>
```

### In Table Cells

```svelte
<script>
  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
  import TextEditor from '@ticatec/uniface-element/TextEditor';

  let data = [
    { name: 'Item 1', price: 100 },
    { name: 'Item 2', price: 200 }
  ];
</script>

<table>
  {#each data as item}
    <tr>
      <td>
        <InlineCellEditor>
          <TextEditor bind:value={item.name} />
        </InlineCellEditor>
      </td>
      <td>
        <InlineCellEditor>
          <TextEditor bind:value={item.price} type="number" />
        </InlineCellEditor>
      </td>
    </tr>
  {/each}
</table>
```

### With Custom Styling

```svelte
<script>
  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
  import TextEditor from '@ticatec/uniface-element/TextEditor';

  let value = '';
</script>

<InlineCellEditor style="padding: 4px; background: #f5f5f5;">
  <TextEditor bind:value={value} compact />
</InlineCellEditor>
```

## Use Cases

- **Table Cell Editing**: Edit data directly in table cells
- **Form Grids**: Compact editing in form layouts
- **List Items**: Inline editing in list views
- **Data Grids**: Spreadsheet-like editing experience

## Best Practices

1. **Use with Compact Editors**: Pair with compact form components
2. **Minimal Styling**: Keep inline editors simple and unobtrusive
3. **Focus Management**: Ensure proper focus handling for accessibility
4. **Validation**: Implement validation on blur or change events