@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/criteria-field/README.md

@@ -0,0 +1,532 @@
+# CriteriaField Component
+
+A simple layout component for creating consistent criteria and filter form fields with proper labeling and sizing. Perfect for search forms, filter panels, and criteria-based interfaces.
+
+## Features
+
+- **Consistent Layout**: Standardized label and field arrangement
+- **Flexible Sizing**: Multiple predefined size options
+- **Custom Styling**: Flexible label and container styling
+- **Clean Structure**: Simple and lightweight component design
+
+## Basic Usage
+
+```svelte
+<script>
+import CriteriaField from '@ticatec/uniface-element/CriteriaField';
+import TextEditor from '@ticatec/uniface-element/TextEditor';
+
+let searchName = '';
+</script>
+
+<CriteriaField label="Name" size="x25">
+  <TextEditor 
+    variant="outlined" 
+    bind:value={searchName} 
+    placeholder="Enter name to search"
+  />
+</CriteriaField>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `"Label"` | Label text for the field |
+| `style` | `string` | `''` | Custom CSS styles for the container |
+| `label$style` | `string` | `''` | Custom CSS styles for the label |
+| `size` | `'' \| 'x15' \| 'x20' \| 'x25' \| 'x30' \| 'x35' \| 'x40'` | `''` | Predefined size for the field |
+| `labelSuffix` | `string` | `':'` | Suffix text after the label |
+| `class` | `string` | `''` | Additional CSS classes |
+
+## Size Options
+
+The `size` prop provides consistent widths for different layout needs:
+
+- `x15`: Extra small width
+- `x20`: Small width 
+- `x25`: Medium-small width
+- `x30`: Medium width
+- `x35`: Medium-large width
+- `x40`: Large width
+
+## Basic Examples
+
+### Simple Text Search Field
+
+```svelte
+<script>
+import CriteriaField from '@ticatec/uniface-element/CriteriaField';
+import TextEditor from '@ticatec/uniface-element/TextEditor';
+
+let searchText = '';
+</script>
+
+<CriteriaField label="Search" size="x30">
+  <TextEditor 
+    variant="outlined" 
+    bind:value={searchText}
+    placeholder="* is a wildcard character"
+  />
+</CriteriaField>
+```
+
+### Date Range Filter
+
+```svelte
+<script>
+import CriteriaField from '@ticatec/uniface-element/CriteriaField';
+import DateRange from '@ticatec/uniface-element/DateRange';
+
+let dateFrom = '';
+let dateTo = '';
+</script>
+
+<CriteriaField label="Date Range" size="x35">
+  <DateRange 
+    variant="outlined"
+    bind:fromValue={dateFrom}
+    bind:toValue={dateTo}
+  />
+</CriteriaField>
+```
+
+### Number Range Filter
+
+```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="Price Range" size="x30">
+  <NumberRange 
+    variant="outlined"
+    bind:fromValue={priceFrom}
+    bind:toValue={priceTo}
+    placeholder="0.00"
+  />
+</CriteriaField>
+```
+
+### Custom Styled Label
+
+```svelte
+<script>
+import CriteriaField from '@ticatec/uniface-element/CriteriaField';
+import SearchBox from '@ticatec/uniface-element/SearchBox';
+
+let query = '';
+</script>
+
+<CriteriaField 
+  label="Advanced Search" 
+  size="x40"
+  label$style="color: #2563eb; font-weight: 600; font-size: 14px;"
+  labelSuffix=""
+>
+  <SearchBox 
+    bind:value={query}
+    placeholder="Enter search terms..."
+  />
+</CriteriaField>
+```
+
+## Advanced Examples
+
+### Search Form with Multiple Criteria
+
+```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: 'Active' },
+  { code: 'inactive', text: 'Inactive' },
+  { code: 'pending', text: 'Pending' }
+];
+
+const handleSearch = () => {
+  console.log('Searching with criteria:', criteria);
+};
+
+const clearCriteria = () => {
+  criteria = {
+    name: '',
+    email: '',
+    dateFrom: '',
+    dateTo: '',
+    status: '',
+    includeInactive: false
+  };
+};
+</script>
+
+<div class="search-form">
+  <h3>Customer Search</h3>
+  
+  <div class="criteria-row">
+    <CriteriaField label="Name" size="x25">
+      <TextEditor 
+        variant="outlined" 
+        bind:value={criteria.name}
+        placeholder="Customer name (* for wildcard)"
+      />
+    </CriteriaField>
+
+    <CriteriaField label="Email" size="x30">
+      <TextEditor 
+        variant="outlined" 
+        bind:value={criteria.email}
+        placeholder="email@domain.com"
+      />
+    </CriteriaField>
+
+    <CriteriaField label="Status" size="x20">
+      <OptionsSelect 
+        variant="outlined"
+        bind:value={criteria.status}
+        options={statusOptions}
+        placeholder="All statuses"
+      />
+    </CriteriaField>
+  </div>
+
+  <div class="criteria-row">
+    <CriteriaField label="Registration Date" size="x35">
+      <DateRange 
+        variant="outlined"
+        bind:fromValue={criteria.dateFrom}
+        bind:toValue={criteria.dateTo}
+      />
+    </CriteriaField>
+
+    <CriteriaField label="Options" size="x25" labelSuffix="">
+      <CheckBox 
+        label="Include inactive customers"
+        bind:value={criteria.includeInactive}
+      />
+    </CriteriaField>
+  </div>
+
+  <div class="form-actions">
+    <button class="btn-primary" on:click={handleSearch}>Search</button>
+    <button class="btn-secondary" on:click={clearCriteria}>Clear</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>
+```
+
+### Filter Panel Layout
+
+```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: 'Electronics' },
+  { code: 'clothing', text: 'Clothing' },
+  { code: 'books', text: 'Books' },
+  { code: 'home', text: 'Home & Garden' }
+];
+
+const availabilityOptions = [
+  { code: 'in-stock', text: 'In Stock' },
+  { code: 'out-of-stock', text: 'Out of Stock' },
+  { code: 'pre-order', text: 'Pre-order' }
+];
+
+const applyFilters = () => {
+  console.log('Applying filters:', filters);
+};
+</script>
+
+<div class="filter-panel">
+  <h3>Product Filters</h3>
+
+  <div class="filter-group">
+    <h4>Basic</h4>
+    <CriteriaField label="Product Name" size="x35">
+      <TextEditor 
+        variant="outlined"
+        bind:value={filters.productName}
+        placeholder="Search by product name"
+      />
+    </CriteriaField>
+
+    <CriteriaField label="Category" size="x25">
+      <OptionsSelect 
+        variant="outlined"
+        bind:value={filters.category}
+        options={categories}
+        placeholder="Select category"
+      />
+    </CriteriaField>
+  </div>
+
+  <div class="filter-group">
+    <h4>Pricing</h4>
+    <CriteriaField label="Price Range" size="x30">
+      <NumberRange 
+        variant="outlined"
+        bind:fromValue={filters.priceFrom}
+        bind:toValue={filters.priceTo}
+        placeholder="0.00"
+      />
+    </CriteriaField>
+  </div>
+
+  <div class="filter-group">
+    <h4>Advanced</h4>
+    <CriteriaField label="Tags" size="x35">
+      <OptionsMultiSelect 
+        variant="outlined"
+        bind:value={filters.tags}
+        options={[
+          { code: 'new', text: 'New' },
+          { code: 'sale', text: 'On Sale' },
+          { code: 'featured', text: 'Featured' },
+          { code: 'bestseller', text: 'Bestseller' }
+        ]}
+        placeholder="Select tags"
+      />
+    </CriteriaField>
+
+    <CriteriaField label="Availability" size="x25">
+      <OptionsSelect 
+        variant="outlined"
+        bind:value={filters.availability}
+        options={availabilityOptions}
+        placeholder="Any availability"
+      />
+    </CriteriaField>
+  </div>
+
+  <div class="filter-actions">
+    <button class="apply-btn" on:click={applyFilters}>Apply Filters</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>
+```
+
+### Different Sizes Comparison
+
+```svelte
+<script>
+import CriteriaField from '@ticatec/uniface-element/CriteriaField';
+import TextEditor from '@ticatec/uniface-element/TextEditor';
+
+let values = {};
+</script>
+
+<div class="size-comparison">
+  <h3>Size Comparison</h3>
+  
+  <CriteriaField label="Extra Small (x15)" size="x15">
+    <TextEditor variant="outlined" bind:value={values.x15} />
+  </CriteriaField>
+
+  <CriteriaField label="Small (x20)" size="x20">
+    <TextEditor variant="outlined" bind:value={values.x20} />
+  </CriteriaField>
+
+  <CriteriaField label="Medium-Small (x25)" size="x25">
+    <TextEditor variant="outlined" bind:value={values.x25} />
+  </CriteriaField>
+
+  <CriteriaField label="Medium (x30)" size="x30">
+    <TextEditor variant="outlined" bind:value={values.x30} />
+  </CriteriaField>
+
+  <CriteriaField label="Medium-Large (x35)" size="x35">
+    <TextEditor variant="outlined" bind:value={values.x35} />
+  </CriteriaField>
+
+  <CriteriaField label="Large (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>
+```
+
+## Best Practices
+
+```svelte
+<!-- Good: Clear, descriptive labels -->
+<CriteriaField label="Customer Email Address">
+  <TextEditor variant="outlined" type="email" />
+</CriteriaField>
+
+<!-- Good: Consistent sizing in related fields -->
+<div class="criteria-group">
+  <CriteriaField label="First Name" size="x25">
+    <TextEditor variant="outlined" />
+  </CriteriaField>
+  <CriteriaField label="Last Name" size="x25">
+    <TextEditor variant="outlined" />
+  </CriteriaField>
+</div>
+
+<!-- Good: Appropriate field types for content -->
+<CriteriaField label="Birth Date" size="x20">
+  <DatePicker variant="outlined" />
+</CriteriaField>
+
+<!-- Good: Custom label styling for emphasis -->
+<CriteriaField 
+  label="Important Field" 
+  label$style="color: red; font-weight: bold;"
+>
+  <TextEditor variant="outlined" />
+</CriteriaField>
+```
+
+## CSS Classes
+
+The component applies the following CSS classes:
+
+- `.uniface-filter-field` - Base class
+- `.x15`, `.x20`, `.x25`, `.x30`, `.x35`, `.x40` - Size classes
+
+## Browser Support
+
+Works in all modern browsers that support:
+- ES6+ JavaScript
+- Modern DOM APIs
+- CSS custom properties
+- Flexbox layout
+
+## Performance Considerations
+
+- Lightweight component structure
+- Minimal DOM elements
+- Efficient slot-based content projection
+- No complex state management