feat: Add multi-input and range filter components

addon/components/filter/multi-input.hbs

@@ -0,0 +1,16 @@
+<div class="filter-multi-input" ...attributes>
+    <TagInput
+        class="form-input form-input-sm flex-1"
+        @placeholder={{or @placeholder "Add values..."}}
+        @allowSpacesInTags={{or @allowSpacesInTags true}}
+        @tags={{this.tags}}
+        @addTag={{this.addTag}}
+        @removeTagAtIndex={{this.removeTag}}
+        as |tag|
+    >
+        {{tag}}
+    </TagInput>
+    <button type="button" class="clear-button" disabled={{not this.tags.length}} alt="Clear" {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>

addon/components/filter/multi-input.js

@@ -0,0 +1,65 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class FilterMultiInputComponent extends Component {
+    @tracked tags = [];
+
+    constructor() {
+        super(...arguments);
+        this.tags = this.parseValue(this.args.value);
+    }
+
+    parseValue(value) {
+        if (isArray(value)) {
+            return value;
+        }
+
+        if (typeof value === 'string' && value.includes(',')) {
+            return value.split(',').map(v => v.trim()).filter(Boolean);
+        }
+
+        if (value) {
+            return [value];
+        }
+
+        return [];
+    }
+
+    buildValue() {
+        return this.tags.join(',');
+    }
+
+    @action addTag(tag) {
+        const { onChange, filter } = this.args;
+
+        this.tags.pushObject(tag);
+        const value = this.buildValue();
+
+        if (typeof onChange === 'function') {
+            onChange(filter, value);
+        }
+    }
+
+    @action removeTag(index) {
+        const { onChange, filter } = this.args;
+
+        this.tags.removeAt(index);
+        const value = this.buildValue();
+
+        if (typeof onChange === 'function') {
+            onChange(filter, value);
+        }
+    }
+
+    @action clear() {
+        const { onClear, filter } = this.args;
+
+        this.tags = [];
+
+        if (typeof onClear === 'function') {
+            onClear(filter);
+        }
+    }
+}

addon/components/filter/range.hbs

@@ -0,0 +1,52 @@
+<div class="filter-range" ...attributes>
+    <div class="filter-range-inputs">
+        <div class="filter-range-input-group">
+            <label class="filter-range-label">{{or @minLabel "Min"}}</label>
+            <Input 
+                @type="number" 
+                @value={{this.minValue}} 
+                min={{or @min 0}} 
+                max={{or @max 100}} 
+                step={{or @step 1}}
+                {{on "input" this.onMinChange}} 
+                class="form-input form-input-sm" 
+            />
+        </div>
+        <div class="filter-range-separator">-</div>
+        <div class="filter-range-input-group">
+            <label class="filter-range-label">{{or @maxLabel "Max"}}</label>
+            <Input 
+                @type="number" 
+                @value={{this.maxValue}} 
+                min={{or @min 0}} 
+                max={{or @max 100}} 
+                step={{or @step 1}}
+                {{on "input" this.onMaxChange}} 
+                class="form-input form-input-sm" 
+            />
+        </div>
+    </div>
+    <div class="filter-range-sliders">
+        <input 
+            type="range" 
+            value={{this.minValue}} 
+            min={{or @min 0}} 
+            max={{or @max 100}} 
+            step={{or @step 1}}
+            {{on "input" this.onMinChange}} 
+            class="filter-range-slider filter-range-slider-min" 
+        />
+        <input 
+            type="range" 
+            value={{this.maxValue}} 
+            min={{or @min 0}} 
+            max={{or @max 100}} 
+            step={{or @step 1}}
+            {{on "input" this.onMaxChange}} 
+            class="filter-range-slider filter-range-slider-max" 
+        />
+    </div>
+    <button type="button" class="clear-button" alt="Clear" {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>

addon/components/filter/range.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FilterRangeComponent extends Component {
+    @tracked minValue;
+    @tracked maxValue;
+
+    constructor() {
+        super(...arguments);
+        this.parseValue(this.args.value);
+    }
+
+    parseValue(value) {
+        const { min = 0, max = 100 } = this.args;
+
+        if (typeof value === 'string' && value.includes(',')) {
+            const [minVal, maxVal] = value.split(',').map(v => parseFloat(v.trim()));
+            this.minValue = isNaN(minVal) ? min : minVal;
+            this.maxValue = isNaN(maxVal) ? max : maxVal;
+        } else {
+            this.minValue = min;
+            this.maxValue = max;
+        }
+    }
+
+    buildValue() {
+        return `${this.minValue},${this.maxValue}`;
+    }
+
+    @action onMinChange(event) {
+        const { onChange, filter } = this.args;
+        const value = parseFloat(event.target.value);
+
+        this.minValue = value;
+
+        // Ensure min doesn't exceed max
+        if (this.minValue > this.maxValue) {
+            this.maxValue = this.minValue;
+        }
+
+        if (typeof onChange === 'function') {
+            onChange(filter, this.buildValue());
+        }
+    }
+
+    @action onMaxChange(event) {
+        const { onChange, filter } = this.args;
+        const value = parseFloat(event.target.value);
+
+        this.maxValue = value;
+
+        // Ensure max doesn't go below min
+        if (this.maxValue < this.minValue) {
+            this.minValue = this.maxValue;
+        }
+
+        if (typeof onChange === 'function') {
+            onChange(filter, this.buildValue());
+        }
+    }
+
+    @action clear() {
+        const { onClear, filter, min = 0, max = 100 } = this.args;
+
+        this.minValue = min;
+        this.maxValue = max;
+
+        if (typeof onClear === 'function') {
+            onClear(filter);
+        }
+    }
+}

addon/styles/layout/next.css

@@ -2332,6 +2332,86 @@ a.text-danger:hover {
     @apply flex flex-row items-center;
 }
 
+.filter-multi-input {
+    @apply flex flex-col relative;
+}
+
+.filter-multi-input > .clear-button {
+    @apply absolute top-0 right-0 dark:text-gray-500 text-gray-700 pr-3 pt-2;
+}
+
+.filter-multi-input > .clear-button:hover {
+    @apply opacity-50;
+}
+
+.filter-range {
+    @apply flex flex-col relative;
+}
+
+.filter-range-inputs {
+    @apply flex items-center gap-2 mb-3;
+}
+
+.filter-range-input-group {
+    @apply flex flex-col flex-1;
+}
+
+.filter-range-label {
+    @apply text-xs font-medium text-gray-600 dark:text-gray-400 mb-1;
+}
+
+.filter-range-separator {
+    @apply text-gray-500 dark:text-gray-400 font-semibold mt-5;
+}
+
+.filter-range-sliders {
+    @apply relative h-6 mb-2;
+}
+
+.filter-range-slider {
+    @apply absolute w-full h-2 appearance-none bg-transparent pointer-events-none;
+}
+
+.filter-range-slider::-webkit-slider-thumb {
+    @apply appearance-none w-4 h-4 rounded-full bg-blue-500 cursor-pointer pointer-events-auto;
+}
+
+.filter-range-slider::-moz-range-thumb {
+    @apply w-4 h-4 rounded-full bg-blue-500 cursor-pointer pointer-events-auto border-0;
+}
+
+.filter-range-slider::-webkit-slider-runnable-track {
+    @apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full;
+}
+
+.filter-range-slider::-moz-range-track {
+    @apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full;
+}
+
+.filter-range-slider-min::-webkit-slider-thumb {
+    @apply bg-blue-500;
+}
+
+.filter-range-slider-max::-webkit-slider-thumb {
+    @apply bg-blue-600;
+}
+
+.filter-range-slider-min::-moz-range-thumb {
+    @apply bg-blue-500;
+}
+
+.filter-range-slider-max::-moz-range-thumb {
+    @apply bg-blue-600;
+}
+
+.filter-range > .clear-button {
+    @apply absolute top-0 right-0 dark:text-gray-500 text-gray-700 pr-1;
+}
+
+.filter-range > .clear-button:hover {
+    @apply opacity-50;
+}
+
 .fleetbase-loader-wrapper {
     padding: 0;
     margin-left: 0;

app/components/filter/multi-input.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/filter/multi-input';

app/components/filter/range.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/filter/range';