feat: Add multi-input and range filter components

[roncodes]

Overview

This PR adds two new filter components to enhance filtering capabilities in the ember-ui library:

1. Filter::MultiInput - Free-text multiple input filter using TagInput
2. Filter::Range - Numeric range slider filter with min/max values

New Components

Filter::MultiInput

A filter component that allows users to add multiple free-text values as tags, outputting a comma-delimited string.

Features:

• Uses the TagInput component (ember-tag-input) for tag-based input
• Allows spaces in tags by default
• Outputs comma-delimited string: "value1,value2,value3"
• Parses existing comma-delimited values on initialization
• Clear button to reset all tags
• Follows existing filter component patterns

Usage Example:

{
    label: 'Order IDs',
    valuePath: 'order_ids',
    filterable: true,
    filterComponent: 'filter/multi-input',
    filterComponentPlaceholder: 'Add order IDs...'
}

Filter::Range

A filter component for numeric range filtering with dual sliders and numeric inputs.

Features:

• Dual range sliders for visual min/max selection
• Numeric input fields for precise value entry
• Outputs comma-delimited string: "min,max"
• Configurable min, max, and step values via arguments
• Automatic constraint enforcement (min ≤ max)
• Customizable labels for min/max fields
• Clear button to reset to default range
• Responsive design with proper spacing

Usage Example:

{
    label: 'Price Range',
    valuePath: 'price',
    filterable: true,
    filterComponent: 'filter/range',
    filterComponentPlaceholder: 'Price Range',
    min: 0,
    max: 1000,
    step: 10,
    minLabel: 'Min Price',
    maxLabel: 'Max Price'
}

Implementation Details

Component Structure

Both components follow the established filter component pattern:

• Tracked state for reactive updates
• onChange callback for value updates
• onClear callback for reset functionality
• Parse initial values from arguments
• Build comma-delimited output strings

Styling

Added comprehensive CSS styling in addon/styles/layout/next.css:

Filter::MultiInput:

• Relative positioning for clear button
• Consistent with filter-string styling
• Clear button positioned top-right

Filter::Range:

• Flexbox layout for inputs and sliders
• Styled numeric input fields
• Custom range slider styling with Tailwind
• Webkit and Mozilla slider thumb styling
• Different colors for min (blue-500) and max (blue-600) sliders
• Proper track styling with light/dark theme support
• Minimal padding following Fleetbase UI standards

Integration

Both components integrate seamlessly with:

• FiltersPicker component
• Existing filter infrastructure
• Layout::Resource::Tabular component
• Query parameter management

Files Changed

New Files:

• addon/components/filter/multi-input.js
• addon/components/filter/multi-input.hbs
• addon/components/filter/range.js
• addon/components/filter/range.hbs
• app/components/filter/multi-input.js (re-export)
• app/components/filter/range.js (re-export)

Modified Files:

• addon/styles/layout/next.css - Added styling for both components

Testing

Both components have been tested with:

• Initial value parsing (comma-delimited strings)
• User input and tag management
• Range slider interactions
• Clear button functionality
• Light and dark theme rendering
• Integration with FiltersPicker

Benefits

1. Enhanced Filtering: Users can now filter by multiple free-text values
2. Better UX: Range sliders provide intuitive numeric range selection
3. Consistent API: Both components follow existing filter patterns
4. Flexible: Comma-delimited output works with backend APIs
5. Accessible: Provides both visual (sliders) and precise (inputs) controls

Backward Compatibility

✅ No breaking changes
✅ Adds new optional filter components
✅ Existing filters continue to work unchanged
✅ Follows established component patterns