@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/criteria-field/README_CN.md

@@ -0,0 +1,532 @@
+# 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 的内容投影
+- 无复杂状态管理