# InlineCellEditor 内联单元格编辑器

一个轻量级的包装组件，用于表格单元格或其他受限空间中的内联编辑。

## 特性

- **最小化包装**: 基于插槽的简单组件，最大化灵活性
- **内联编辑**: 专为内联编辑场景设计
- **自定义样式**: 接受自定义样式
- **焦点处理**: 内置焦点事件处理

## 安装

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

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

## 基本用法

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

<InlineCellEditor>
  <TextEditor placeholder="点击编辑..." />
</InlineCellEditor>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|-------------|
| `style` | `string` | `''` | 自定义CSS样式 |

## 示例

### 基本内联编辑器

```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="点击编辑" />
</InlineCellEditor>
```

### 在表格单元格中

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

  let data = [
    { name: '项目1', price: 100 },
    { name: '项目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>
```

### 自定义样式

```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>
```

## 使用场景

- **表格单元格编辑**: 直接在表格单元格中编辑数据
- **表单网格**: 表单布局中的紧凑编辑
- **列表项**: 列表视图中的内联编辑
- **数据网格**: 类似电子表格的编辑体验

## 最佳实践

1. **使用紧凑编辑器**: 与紧凑的表单组件配对使用
2. **最小化样式**: 保持内联编辑器简单且不突兀
3. **焦点管理**: 确保正确的焦点处理以实现无障碍访问
4. **验证**: 在模糊或更改事件上实现验证