Livewire Filters

Fixed a few issues regarding query scopes:

• You can now apply more than one query scope at a time. (before the key would have been overridden)
• You can preset a query scope in the LivewireCollection tag and another one in the URL and they will both be correctly preset.
• The Multiselect can now apply for more than one field (previously it only applied randomly for the first).
• The Resrv query scope is now recognized so that it doesn't try to implode the search array.

If you are not using query scopes or Resrv you can safely skip this release.

• Fixed an issue that was caused by the LivewireCollection component responding too slowly when adding filter params.
• Removed the command property from the filters-updated event and cleaned up the code.
• Fixed removing a filter from the LfTags component when the selected value was an array.

New filter: Dual Range Filter

A brand new custom build Livewire component that uses a slider to let the user filter entries that fall into the specified values range. More information and documentation: https://livewirefilters.com/docs/v1/dual-range-filter

• Fix: The LfRangeFilter was causing double rendering of the LivewireCollection component (#20). This is now fixed and the default property is deprecated. (you can set a default value in the LivewireCollection component itself)

New feature: Custom URL Query String

Statamic Livewire Filters can now generate easy to read, SEO-friendly URLs when the user is using the filtering system.

Read the docs: https://livewirefilters.com/docs/v1/url-query-string#content-using-livewires-url-query-parameters Live demo: https://livewirefilters.com/docs/v1/advanced-example/search/brand/citroen,toyota,vw/categories/crossover-suv/transmission/automaticTransmission

• New Feature: Filter options are now sortable. For more information, see the documentation on sorting filter values.
• Documentation: Added a "Common Issues" page to the docs cover common misconfigurations and other issues.

• Fixed getting the correct options for array based fields since Statamic changed the way they are saved in https://github.com/statamic/cms/pull/10467

• Statamic v5 and Laravel v11 support.

• FIX Added some filtering to the LfTags Livewire component so that it ignores parameters that don't contain the : character and are probably not filter conditions.
• FIX The LfTags component now ignores completely fields not in the fields property. This approach is better as before it would display filtering you might have been doing using the tag but do not offer to the user to adjust.

IMPORTANT The URL for the documentation and examples is now https://livewirefilters.com

• NEW LfTags component that allows you to display a "tags" or "pills" section of available tags. Read more.
• NEW Added a {{ pagination_total }} variable that allows you to show the total number of entries when using pagination. Read more.
• FIX Overriding the filter options by providing an array of 'value' => 'label' arrays is fixed. This feature is still undocumented.

• NEW Add support for Hooks. Statamic v4.50.0 added support for hooks, allowing you to "hook" into the Collection tag to perform an action into the Entries data. This version adds a hook called livewire-fetched-entries for Livewire Filters.

How to use In your AppServiceProvider you can register a hook like so:

#89DDFF;">\Reach#89DDFF;">\StatamicLivewireFilters#89DDFF;">\Http#89DDFF;">\Livewire#89DDFF;">\LivewireCollection#89DDFF;">::#82AAFF;">hook#89DDFF;">(#89DDFF;">'livewire-fetched-entries#89DDFF;">'#89DDFF;">,
    function #89DDFF;">($entries#89DDFF;">, #89DDFF;">$next#89DDFF;">) #89DDFF;">{
#89DDFF;">        #676E95;">// The parameters of the component if you need them
        #89DDFF;">$params #89DDFF;">= #89DDFF;">$this->params#89DDFF;">;
 
        #89DDFF;">$entries#89DDFF;">->#82AAFF;">each#89DDFF;">(function #89DDFF;">($entry#89DDFF;">) #89DDFF;">{
#89DDFF;">             #676E95;">// Do something with the data here
        #89DDFF;">});
 
        #89DDFF;">return #89DDFF;">$next#89DDFF;">($entries#89DDFF;">);
    #89DDFF;">}
#89DDFF;">);

For example you might call an API and attach extra data to the entries, or you might want to display some data only if a specific filter is active. The sky is the limit!

You need to be at least on Statamic v.4.50.0 to use this release, if you cannot upgrade at the moment you can stay at v1.6.0 of this addon.

• NEW Entry counts for filter options. Livewire Filters can now calculate and display counts for each option in checkboxes, radio, and select fields next to their labels. This feature is resource-intensive, as it performs a query for each filter option on the page and repeats these queries after each user action to update the counts. Therefore, it should be used cautiously, especially with large data sets. By default, this feature is disabled in the config file.

Please add this to your config file if you are upgrading from a previous version and wish to enable this feature.

#676E95;">// The addon will calculate the number of entries for each filter value (can be slow for a large number of entries)
#89DDFF;">'enable_filter_values_count#89DDFF;">' #89DDFF;">=> #89DDFF;">true,

• NEW allowed_filters parameter. You can now specify which filters are permissible, you can set a parameter that defines the allowed conditions. This is achieved by passing a pipe-separated list of permissible filters. More info: https://slf.reach.gr/docs/v1/livewire-collection-tag#content-parameters

• REMOVED The only_allow_active_filters setting has been removed. Someone could just sniff the payload between the main LivewireCollection component and the filters and send the appropriate filiter-mounted event before sending the filter it wasn't offering that much protection anyway. If you were using it you need to migrate to the allowed_filters parameter above.

Please copy over your config again if you are upgrading from a previous version

This release adds new config options for the features that were added:

#676E95;">// If enabled the addon will preset the term parameters in any taxonomy term routes
#89DDFF;">'enable_term_routes#89DDFF;">' #89DDFF;">=> #89DDFF;">false,

• NEW The tag now automatically applies the filter for a Statamic taxonomy term route
• FIX Filters are pushed in the filters collection on every component boot, so lets clean up.

• Revert the "fix" for the any modifier as it doesn't work with only_allow_active_filters.

• Added the step option to the LfRangeFilter
• Fixed the any modifier usage in order to better adhere with Statamic's convention.

Please copy over your config again if you are upgrading from a previous version:

php artisan vendor:publish --tag statamic-livewire-filters-config

This release adds new config options for the features that were added previously:

• only_allow_active_filters: when enabled, the addon only allows filtering by filters and conditions that are loaded at the page. This improves data security as without it a user could perform any Statamic condition, whether you wanted to allow it or not. Defaults to true. You might want to disable it if you are generating your filters dynamically or if you are lazy loading the filters and the active filters do not get registered.

• validate_filter_values: when using fields that have predefined options the addon would validate that the value the user wants to filter by, actually exists in the options array. Defaults to true.

• NEW The LivewireCollection component now registers the fields and conditions of the filters in the page and only allows filtering by them. This was added to prevent passing conditions that would reveal information you might not want, like Entries that are unpublished.
• FIX The query_scope preset values weren't displayed in the filters.

• Select and Checkboxes filters now validate that the option is in the available options array or fail.
• Testing setup on GitHub.

• Added the entries-updated event.
• Fixed the issue with Flatpickr CSS not being included.
• Removed redundant code from LfSelectFilter
• Added docs link: https://slf.reach.gr/

• Pagination should reset on filter or sort change

• Use @tailwindcss/forms with class strategy to prevent resetting other forms on the page
• Add wire:key to the default collection Antlers template

First release