Vue 2 | Filter | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="row" gap="small">
                                                            <w-filter
                                                              v-for="item in filterMockData"
                                                              :key="item.value"
                                                              v-bind="item"
                                                            />
                                                          </w-stack>
                                                        </template>
                                                        
                                                        <script>
                                                        const statusOptions = [
                                                          { label: 'Active', value: 'active' },
                                                          { label: 'Pending', value: 'pending' },
                                                          { label: 'Completed', value: 'completed' },
                                                          { label: 'Cancelled', value: 'cancelled' },
                                                          { label: 'Archived', value: 'archived' }
                                                        ];
                                                        
                                                        const categoryOptions = [
                                                          { label: 'Marketing', value: 'marketing' },
                                                          { label: 'Sales', value: 'sales' },
                                                          { label: 'Engineering', value: 'engineering' },
                                                          { label: 'Design', value: 'design' },
                                                          { label: 'Support', value: 'support' }
                                                        ];
                                                        
                                                        const singleConfiguration = {
                                                          label: 'Status',
                                                          value: 'status',
                                                          type: 'single',
                                                          options: statusOptions,
                                                          logicalOperatorOptions: [
                                                            { label: 'is', value: 'is', default: true },
                                                            { label: 'is not', value: 'is_not' }
                                                          ]
                                                        };
                                                        
                                                        const multiConfiguration = {
                                                          label: 'Categories',
                                                          value: 'categories',
                                                          type: 'multi',
                                                          options: categoryOptions,
                                                          searchable: true
                                                        };
                                                        
                                                        const dateRangeConfiguration = {
                                                          label: 'Period',
                                                          value: 'period',
                                                          type: 'date-range',
                                                          logicalOperatorOptions: [{ label: 'is between', value: 'is_between', default: true }]
                                                        };
                                                        
                                                        const stringConfiguration = {
                                                          label: 'Name',
                                                          value: 'name',
                                                          type: 'text',
                                                          logicalOperatorOptions: [
                                                            { label: 'contains', value: 'contains', default: true },
                                                            { label: 'does not contain', value: 'not_contains' },
                                                            { label: 'starts with', value: 'starts_with' },
                                                            { label: 'ends with', value: 'ends_with' }
                                                          ]
                                                        };
                                                        
                                                        const amountRangeConfiguration = {
                                                          label: 'Amount Range',
                                                          value: 'amount',
                                                          type: 'number-range',
                                                          logicalOperatorOptions: [
                                                            { label: 'is between', value: 'is_between', default: true },
                                                            { label: 'is not between', value: 'is_not_between' }
                                                          ]
                                                        };
                                                        
                                                        const filterMockData = [
                                                          {
                                                            ...singleConfiguration
                                                          },
                                                          {
                                                            ...multiConfiguration
                                                          },
                                                          {
                                                            ...dateRangeConfiguration
                                                          },
                                                          {
                                                            ...stringConfiguration
                                                          },
                                                          {
                                                            ...amountRangeConfiguration
                                                          }
                                                        ];
                                                        
                                                        export default {
                                                          data() {
                                                            return {
                                                              filterMockData
                                                            };
                                                          }
                                                        };
                                                        </script>

Name	Description	Type	Default	Values
label Required	Label for the filter.	string
type Required	Type of the filter.	string	single	single, multi, text, date-range, number-range
options	Options for the filter.	array
logical-operator-options	Options for the logical operator.	array
searchable	Controls whether the filter is searchable or not.	boolean	false	false, true
apply-mode	Controls the apply mode of the filter.	string	explicit	explicit, immediate
target	Type string or an actual DOM node where you want render component	string\|object	body
use-teleport	When it is set to true, filter menu will teleport the content part into the target.	boolean	false	false, true
open	Controls whether the filter is open or not.	boolean	false	false, true
position	Controls the position of the filter menu in relation to the trigger. `bottom-left` will align it to the bottom left of the trigger. `bottom-right` will align it to the bottom right of the trigger. `top-left`and 'top-right' will align it to the top left and right respectively.	string	bottom-left	bottom-left, bottom-right, top-left, top-right
id	Custom ID for the filter component.	String
v-model model-value	Selected value of the filter.	object
translations	Object with all necessary translations.	object	FILTER_TRANSLATIONS	{ filterIconSearch: 'Search', filterIconRemove: 'Remove filter', filterInputPlaceholder: 'Search option', filterButtonApply: 'Apply', filterButtonClear: 'Clear', filterButtonClose: 'Close' }
readonly	Determines whether the filter is readonly or not.	boolean		false, true
formatter	Controls the trigger value of the filter.	Function
hide-remove-button	Controls whether to hide the remove button.	boolean	false	false, true
hide-clear-button	Controls whether to hide the clear button.	boolean	false	false, true

Name	Description
default	Default content slot

Name	Description	Type
update:modelValue	Emits when the filter value is updated (temporary, before apply)	{ "names": [ "object" ] }
open	Emits the event after the click	{ "names": [ "Event" ] }
close	Emits the event after the click	{ "names": [ "Event" ] }
remove	Emits when the filter is removed	{ "names": [ "Event" ] }
clear	Emits when the filter is cleared	{ "names": [ "Event" ] }
apply	Emits when the filter is applied	{ "names": [ "object" ] }
change	Emits when the filter value changes (for v-model compatibility)	{ "names": [ "object" ] }

Filter

Code

Props

Slots

Events