Add advanced features: date/select fields, clear all button, and enhanced input types

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

examples/prototype/src/FilterBuilderDemo.tsx

@@ -24,13 +24,13 @@ const filterBuilderSchema = {
               className: 'text-muted-foreground',
               body: { 
                 type: 'text', 
-                content: 'Airtable-like filter component for building complex query conditions' 
+                content: 'Airtable-like filter component with advanced field types and operators' 
               }
             }
           ]
         },
 
-        // Example 1: User Data Filtering
+        // Example 1: User Data Filtering with Date and Select
         {
           type: 'card',
           className: 'shadow-lg',
@@ -49,7 +49,7 @@ const filterBuilderSchema = {
                   className: 'text-sm text-muted-foreground mt-1',
                   body: { 
                     type: 'text', 
-                    content: 'Filter users by name, email, age, and status' 
+                    content: 'Advanced filtering with date, select, and boolean fields' 
                   }
                 }
               ]
@@ -65,9 +65,29 @@ const filterBuilderSchema = {
                   { value: 'name', label: 'Name', type: 'text' },
                   { value: 'email', label: 'Email', type: 'text' },
                   { value: 'age', label: 'Age', type: 'number' },
-                  { value: 'status', label: 'Status', type: 'text' },
-                  { value: 'department', label: 'Department', type: 'text' },
-                  { value: 'joinDate', label: 'Join Date', type: 'text' }
+                  { 
+                    value: 'status', 
+                    label: 'Status', 
+                    type: 'select',
+                    options: [
+                      { value: 'active', label: 'Active' },
+                      { value: 'inactive', label: 'Inactive' },
+                      { value: 'pending', label: 'Pending' }
+                    ]
+                  },
+                  { 
+                    value: 'department', 
+                    label: 'Department', 
+                    type: 'select',
+                    options: [
+                      { value: 'engineering', label: 'Engineering' },
+                      { value: 'sales', label: 'Sales' },
+                      { value: 'marketing', label: 'Marketing' },
+                      { value: 'support', label: 'Support' }
+                    ]
+                  },
+                  { value: 'joinDate', label: 'Join Date', type: 'date' },
+                  { value: 'isVerified', label: 'Is Verified', type: 'boolean' }
                 ],
                 value: {
                   id: 'root',
@@ -85,8 +105,6 @@ const filterBuilderSchema = {
             }
           ]
         },
-
-        // Example 2: Product Filtering
         {
           type: 'card',
           className: 'shadow-lg',
@@ -238,6 +256,22 @@ const filterBuilderSchema = {
                       { type: 'div', body: { type: 'text', content: 'AND/OR logic toggling' } }
                     ]
                   },
+                  {
+                    type: 'div',
+                    className: 'flex items-start gap-2',
+                    body: [
+                      { type: 'div', body: { type: 'text', content: '✓' }, className: 'text-primary font-bold' },
+                      { type: 'div', body: { type: 'text', content: 'Date & Select field support' } }
+                    ]
+                  },
+                  {
+                    type: 'div',
+                    className: 'flex items-start gap-2',
+                    body: [
+                      { type: 'div', body: { type: 'text', content: '✓' }, className: 'text-primary font-bold' },
+                      { type: 'div', body: { type: 'text', content: 'Clear all filters button' } }
+                    ]
+                  },
                   {
                     type: 'div',
                     className: 'flex items-start gap-2',

packages/components/docs/FilterBuilder.md

@@ -8,8 +8,11 @@ The Filter Builder component provides a user-friendly interface for creating and
 
 - ✅ Dynamic add/remove filter conditions
 - ✅ Field selection from configurable list
-- ✅ Type-aware operators (text, number, boolean)
+- ✅ Type-aware operators (text, number, boolean, date, select)
 - ✅ AND/OR logic toggling
+- ✅ Clear all filters button
+- ✅ Date picker support for date fields
+- ✅ Dropdown support for select fields
 - ✅ Schema-driven configuration
 - ✅ Tailwind CSS styled with Shadcn UI components
 
@@ -43,7 +46,7 @@ The Filter Builder component provides a user-friendly interface for creating and
 }
 ```
 
-### With Initial Empty State
+### With Select Fields
 
 ```typescript
 {
@@ -53,6 +56,16 @@ The Filter Builder component provides a user-friendly interface for creating and
   fields: [
     { value: 'name', label: 'Product Name', type: 'text' },
     { value: 'price', label: 'Price', type: 'number' },
+    { 
+      value: 'category', 
+      label: 'Category', 
+      type: 'select',
+      options: [
+        { value: 'electronics', label: 'Electronics' },
+        { value: 'clothing', label: 'Clothing' },
+        { value: 'food', label: 'Food' }
+      ]
+    },
     { value: 'inStock', label: 'In Stock', type: 'boolean' }
   ],
   value: {
@@ -63,6 +76,23 @@ The Filter Builder component provides a user-friendly interface for creating and
 }
 ```
 
+### With Date Fields
+
+```typescript
+{
+  type: 'filter-builder',
+  name: 'orderFilters',
+  label: 'Order Filters',
+  fields: [
+    { value: 'orderId', label: 'Order ID', type: 'text' },
+    { value: 'amount', label: 'Amount', type: 'number' },
+    { value: 'orderDate', label: 'Order Date', type: 'date' },
+    { value: 'shipped', label: 'Shipped', type: 'boolean' }
+  ],
+  showClearAll: true
+}
+```
+
 ## Props
 
 ### Schema Properties
@@ -74,14 +104,16 @@ The Filter Builder component provides a user-friendly interface for creating and
 | `label` | `string` | ❌ | Label displayed above the filter builder |
 | `fields` | `Field[]` | ✅ | Array of available fields for filtering |
 | `value` | `FilterGroup` | ❌ | Initial filter configuration |
+| `showClearAll` | `boolean` | ❌ | Show "Clear all" button (default: true) |
 
 ### Field Type
 
 ```typescript
 interface Field {
   value: string;    // Field identifier
   label: string;    // Display label
-  type?: string;    // Field type: 'text' | 'number' | 'boolean'
+  type?: string;    // Field type: 'text' | 'number' | 'boolean' | 'date' | 'select'
+  options?: Array<{ value: string; label: string }> // For select fields
 }
 ```
 
@@ -128,6 +160,23 @@ The available operators change based on the field type:
 - `equals` - Equals
 - `notEquals` - Does not equal
 
+### Date Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `before` - Before
+- `after` - After
+- `between` - Between
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
+### Select Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `in` - In
+- `notIn` - Not in
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
 ## Events
 
 The component emits change events when the filter configuration is modified: