# CriteriaField 条件字段组件

一个简单的布局组件，用于创建一致的条件和过滤表单字段，具有适当的标签和尺寸设置。非常适合搜索表单、过滤面板和基于条件的界面。

## 功能特性

- **一致的布局**：标准化的标签和字段排列
- **灵活的尺寸**：多种预定义尺寸选项
- **自定义样式**：灵活的标签和容器样式设置
- **简洁结构**：简单轻量的组件设计

## 基本用法

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

let searchName = '';
</script>

<CriteriaField label="姓名" size="x25">
  <TextEditor 
    variant="outlined" 
    bind:value={searchName} 
    placeholder="输入要搜索的姓名"
  />
</CriteriaField>
```

## 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `label` | `string` | `"Label"` | 字段的标签文本 |
| `style` | `string` | `''` | 容器的自定义 CSS 样式 |
| `label$style` | `string` | `''` | 标签的自定义 CSS 样式 |
| `size` | `'' \| 'x15' \| 'x20' \| 'x25' \| 'x30' \| 'x35' \| 'x40'` | `''` | 字段的预定义尺寸 |
| `labelSuffix` | `string` | `':'` | 标签后的后缀文本 |
| `class` | `string` | `''` | 附加的 CSS 类名 |

## 尺寸选项

`size` 属性为不同布局需求提供一致的宽度：

- `x15`：超小宽度
- `x20`：小宽度
- `x25`：中小宽度
- `x30`：中等宽度
- `x35`：中大宽度
- `x40`：大宽度

## 基础示例

### 简单文本搜索字段

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

let searchText = '';
</script>

<CriteriaField label="搜索" size="x30">
  <TextEditor 
    variant="outlined" 
    bind:value={searchText}
    placeholder="* 是通配符"
  />
</CriteriaField>
```

### 日期范围过滤器

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import DateRange from '@ticatec/uniface-element/DateRange';

let dateFrom = '';
let dateTo = '';
</script>

<CriteriaField label="日期范围" size="x35">
  <DateRange 
    variant="outlined"
    bind:fromValue={dateFrom}
    bind:toValue={dateTo}
  />
</CriteriaField>
```

### 数值范围过滤器

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import NumberRange from '@ticatec/uniface-element/NumberRange';

let priceFrom = null;
let priceTo = null;
</script>

<CriteriaField label="价格范围" size="x30">
  <NumberRange 
    variant="outlined"
    bind:fromValue={priceFrom}
    bind:toValue={priceTo}
    placeholder="0.00"
  />
</CriteriaField>
```

### 自定义样式标签

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import SearchBox from '@ticatec/uniface-element/SearchBox';

let query = '';
</script>

<CriteriaField 
  label="高级搜索" 
  size="x40"
  label$style="color: #2563eb; font-weight: 600; font-size: 14px;"
  labelSuffix=""
>
  <SearchBox 
    bind:value={query}
    placeholder="输入搜索关键词..."
  />
</CriteriaField>
```

## 高级示例

### 多条件搜索表单

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';
import DateRange from '@ticatec/uniface-element/DateRange';
import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
import CheckBox from '@ticatec/uniface-element/CheckBox';

let criteria = {
  name: '',
  email: '',
  dateFrom: '',
  dateTo: '',
  status: '',
  includeInactive: false
};

const statusOptions = [
  { code: 'active', text: '激活' },
  { code: 'inactive', text: '未激活' },
  { code: 'pending', text: '待处理' }
];

const handleSearch = () => {
  console.log('搜索条件:', criteria);
};

const clearCriteria = () => {
  criteria = {
    name: '',
    email: '',
    dateFrom: '',
    dateTo: '',
    status: '',
    includeInactive: false
  };
};
</script>

<div class="search-form">
  <h3>客户搜索</h3>
  
  <div class="criteria-row">
    <CriteriaField label="姓名" size="x25">
      <TextEditor 
        variant="outlined" 
        bind:value={criteria.name}
        placeholder="客户姓名 (* 表示通配符)"
      />
    </CriteriaField>

    <CriteriaField label="邮箱" size="x30">
      <TextEditor 
        variant="outlined" 
        bind:value={criteria.email}
        placeholder="email@domain.com"
      />
    </CriteriaField>

    <CriteriaField label="状态" size="x20">
      <OptionsSelect 
        variant="outlined"
        bind:value={criteria.status}
        options={statusOptions}
        placeholder="所有状态"
      />
    </CriteriaField>
  </div>

  <div class="criteria-row">
    <CriteriaField label="注册日期" size="x35">
      <DateRange 
        variant="outlined"
        bind:fromValue={criteria.dateFrom}
        bind:toValue={criteria.dateTo}
      />
    </CriteriaField>

    <CriteriaField label="选项" size="x25" labelSuffix="">
      <CheckBox 
        label="包含未激活客户"
        bind:value={criteria.includeInactive}
      />
    </CriteriaField>
  </div>

  <div class="form-actions">
    <button class="btn-primary" on:click={handleSearch}>搜索</button>
    <button class="btn-secondary" on:click={clearCriteria}>清除</button>
  </div>
</div>

<style>
  .search-form {
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
  }
  
  .criteria-row {
    display: flex;
    gap: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
  }
  
  .form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
  }
  
  .btn-primary, .btn-secondary {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    font-weight: 500;
  }
  
  .btn-primary {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
  }
  
  .btn-secondary {
    background: white;
    color: #374151;
    border-color: #d1d5db;
  }
</style>
```

### 过滤面板布局

```svelte
<script>
import CriteriaField from '@ticatec/uniface-element/CriteriaField';
import TextEditor from '@ticatec/uniface-element/TextEditor';
import NumberRange from '@ticatec/uniface-element/NumberRange';
import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';

let filters = {
  productName: '',
  priceFrom: null,
  priceTo: null,
  category: '',
  tags: '',
  availability: ''
};

const categories = [
  { code: 'electronics', text: '电子产品' },
  { code: 'clothing', text: '服装' },
  { code: 'books', text: '图书' },
  { code: 'home', text: '家居园艺' }
];

const availabilityOptions = [
  { code: 'in-stock', text: '有库存' },
  { code: 'out-of-stock', text: '缺货' },
  { code: 'pre-order', text: '预订' }
];

const applyFilters = () => {
  console.log('应用过滤器:', filters);
};
</script>

<div class="filter-panel">
  <h3>产品过滤器</h3>

  <div class="filter-group">
    <h4>基本</h4>
    <CriteriaField label="产品名称" size="x35">
      <TextEditor 
        variant="outlined"
        bind:value={filters.productName}
        placeholder="按产品名称搜索"
      />
    </CriteriaField>

    <CriteriaField label="分类" size="x25">
      <OptionsSelect 
        variant="outlined"
        bind:value={filters.category}
        options={categories}
        placeholder="选择分类"
      />
    </CriteriaField>
  </div>

  <div class="filter-group">
    <h4>价格</h4>
    <CriteriaField label="价格范围" size="x30">
      <NumberRange 
        variant="outlined"
        bind:fromValue={filters.priceFrom}
        bind:toValue={filters.priceTo}
        placeholder="0.00"
      />
    </CriteriaField>
  </div>

  <div class="filter-group">
    <h4>高级</h4>
    <CriteriaField label="标签" size="x35">
      <OptionsMultiSelect 
        variant="outlined"
        bind:value={filters.tags}
        options={[
          { code: 'new', text: '新品' },
          { code: 'sale', text: '促销' },
          { code: 'featured', text: '精选' },
          { code: 'bestseller', text: '畅销' }
        ]}
        placeholder="选择标签"
      />
    </CriteriaField>

    <CriteriaField label="库存状态" size="x25">
      <OptionsSelect 
        variant="outlined"
        bind:value={filters.availability}
        options={availabilityOptions}
        placeholder="任意状态"
      />
    </CriteriaField>
  </div>

  <div class="filter-actions">
    <button class="apply-btn" on:click={applyFilters}>应用过滤器</button>
  </div>
</div>

<style>
  .filter-panel {
    width: 300px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }
  
  .filter-panel h3 {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .filter-group {
    margin: 16px 0;
  }
  
  .filter-group h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .filter-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }
  
  .apply-btn {
    width: 100%;
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
  }
  
  .apply-btn:hover {
    background: #1d4ed8;
  }
</style>
```

### 不同尺寸对比

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

let values = {};
</script>

<div class="size-comparison">
  <h3>尺寸对比</h3>
  
  <CriteriaField label="超小 (x15)" size="x15">
    <TextEditor variant="outlined" bind:value={values.x15} />
  </CriteriaField>

  <CriteriaField label="小 (x20)" size="x20">
    <TextEditor variant="outlined" bind:value={values.x20} />
  </CriteriaField>

  <CriteriaField label="中小 (x25)" size="x25">
    <TextEditor variant="outlined" bind:value={values.x25} />
  </CriteriaField>

  <CriteriaField label="中等 (x30)" size="x30">
    <TextEditor variant="outlined" bind:value={values.x30} />
  </CriteriaField>

  <CriteriaField label="中大 (x35)" size="x35">
    <TextEditor variant="outlined" bind:value={values.x35} />
  </CriteriaField>

  <CriteriaField label="大 (x40)" size="x40">
    <TextEditor variant="outlined" bind:value={values.x40} />
  </CriteriaField>
</div>

<style>
  .size-comparison {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 600px;
  }
</style>
```

## 最佳实践

```svelte
<!-- 好的：清晰、描述性的标签 -->
<CriteriaField label="客户邮箱地址">
  <TextEditor variant="outlined" type="email" />
</CriteriaField>

<!-- 好的：相关字段使用一致的尺寸 -->
<div class="criteria-group">
  <CriteriaField label="姓" size="x25">
    <TextEditor variant="outlined" />
  </CriteriaField>
  <CriteriaField label="名" size="x25">
    <TextEditor variant="outlined" />
  </CriteriaField>
</div>

<!-- 好的：为内容选择合适的字段类型 -->
<CriteriaField label="出生日期" size="x20">
  <DatePicker variant="outlined" />
</CriteriaField>

<!-- 好的：强调重要字段的自定义标签样式 -->
<CriteriaField 
  label="重要字段" 
  label$style="color: red; font-weight: bold;"
>
  <TextEditor variant="outlined" />
</CriteriaField>
```

## CSS 类名

组件应用以下 CSS 类名：

- `.uniface-filter-field` - 基础类
- `.x15`, `.x20`, `.x25`, `.x30`, `.x35`, `.x40` - 尺寸类

## 浏览器支持

支持所有现代浏览器：
- ES6+ JavaScript
- 现代 DOM API
- CSS 自定义属性
- Flexbox 布局

## 性能考虑

- 轻量的组件结构
- 最少的 DOM 元素
- 高效的基于 slot 的内容投影
- 无复杂状态管理