advanced-filter-system 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -47
- package/dist/afs.legacy.js +1 -1
- package/dist/afs.legacy.js.map +1 -1
- package/dist/afs.modern.js +1 -1
- package/dist/afs.modern.js.map +1 -1
- package/package.json +8 -2
- package/src/types/core.d.ts +65 -0
- package/src/types/date-filter.ts +18 -0
- package/src/types/features.d.ts +148 -0
- package/src/types/filter.ts +17 -0
- package/src/types/index.d.ts +442 -0
- package/src/types/input-range-filter.ts +19 -0
- package/src/types/pagination.ts +37 -0
- package/src/types/range-filter.ts +8 -0
- package/src/types/search.ts +5 -0
- package/src/types/sort.ts +9 -0
- package/src/types/url-manager.ts +11 -0
- package/src/types/utils.d.ts +128 -0
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A powerful and flexible vanilla JavaScript filtering system that provides advanced filtering, searching, sorting, and pagination capabilities for DOM elements. Zero dependencies, lightweight, and highly customizable.
|
|
4
4
|
|
|
5
|
+
> **✨ NEW in v1.5.1**: Enhanced mixed mode filtering, improved event system, and comprehensive URL state management!
|
|
6
|
+
|
|
5
7
|
[Live Demo](https://misits.github.io/advanced-filter-system) | [NPM Package](https://www.npmjs.com/package/advanced-filter-system) | [Interactive Examples](examples/demo.html)
|
|
6
8
|
|
|
7
9
|
## Table of Contents
|
|
@@ -320,25 +322,23 @@ afs.dateFilter.addDateRange({
|
|
|
320
322
|
### Search & Filtering
|
|
321
323
|
|
|
322
324
|
```javascript
|
|
323
|
-
//
|
|
324
|
-
afs.search.
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
minLength: 2,
|
|
328
|
-
debounce: 300
|
|
329
|
-
});
|
|
325
|
+
// Programmatic search
|
|
326
|
+
afs.search.search('query');
|
|
327
|
+
afs.search.clearSearch();
|
|
328
|
+
afs.search.setValue('new query');
|
|
330
329
|
|
|
331
330
|
// Programmatic filtering
|
|
332
331
|
afs.filter.addFilter('category:tech');
|
|
333
332
|
afs.filter.removeFilter('category:tech');
|
|
334
333
|
afs.filter.clearAllFilters();
|
|
334
|
+
afs.filter.clearFilterCategory('category:*');
|
|
335
335
|
```
|
|
336
336
|
|
|
337
337
|
### Sorting
|
|
338
338
|
|
|
339
339
|
```javascript
|
|
340
340
|
// Sort by single field
|
|
341
|
-
afs.
|
|
341
|
+
afs.sort.sort('price', 'desc');
|
|
342
342
|
|
|
343
343
|
// Custom sorting
|
|
344
344
|
afs.sort.sortWithComparator('title', (a, b) => {
|
|
@@ -346,19 +346,16 @@ afs.sort.sortWithComparator('title', (a, b) => {
|
|
|
346
346
|
});
|
|
347
347
|
|
|
348
348
|
// Shuffle items
|
|
349
|
-
afs.
|
|
349
|
+
afs.sort.shuffle();
|
|
350
350
|
```
|
|
351
351
|
|
|
352
352
|
### Pagination
|
|
353
353
|
|
|
354
354
|
```javascript
|
|
355
|
-
//
|
|
356
|
-
afs.pagination.
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
scrollToTop: true,
|
|
360
|
-
scrollBehavior: 'smooth'
|
|
361
|
-
});
|
|
355
|
+
// Pagination navigation
|
|
356
|
+
afs.pagination.goToPage(2);
|
|
357
|
+
afs.pagination.nextPage();
|
|
358
|
+
afs.pagination.previousPage();
|
|
362
359
|
|
|
363
360
|
// Toggle pagination mode
|
|
364
361
|
afs.pagination.setPaginationMode(true); // Enable
|
|
@@ -390,8 +387,13 @@ const afs = new AFS({
|
|
|
390
387
|
}
|
|
391
388
|
});
|
|
392
389
|
|
|
393
|
-
// Change animation at runtime
|
|
394
|
-
afs.
|
|
390
|
+
// Change animation options at runtime
|
|
391
|
+
afs.updateOptions({
|
|
392
|
+
animation: {
|
|
393
|
+
type: 'slide',
|
|
394
|
+
duration: 400
|
|
395
|
+
}
|
|
396
|
+
});
|
|
395
397
|
```
|
|
396
398
|
|
|
397
399
|
## Configuration Options
|
|
@@ -415,8 +417,6 @@ const afs = new AFS({
|
|
|
415
417
|
|
|
416
418
|
// Search configuration
|
|
417
419
|
searchKeys: ['title', 'categories', 'description'],
|
|
418
|
-
searchMode: 'fuzzy', // 'fuzzy' or 'exact'
|
|
419
|
-
searchMinChars: 2,
|
|
420
420
|
debounceTime: 300,
|
|
421
421
|
|
|
422
422
|
// Pagination
|
|
@@ -431,9 +431,11 @@ const afs = new AFS({
|
|
|
431
431
|
|
|
432
432
|
// Counter display
|
|
433
433
|
counter: {
|
|
434
|
-
template: 'Showing {visible} of {total}
|
|
434
|
+
template: 'Showing {visible} of {total}',
|
|
435
|
+
showFiltered: true,
|
|
435
436
|
filteredTemplate: '({filtered} filtered)',
|
|
436
|
-
noResultsTemplate: 'No items found'
|
|
437
|
+
noResultsTemplate: 'No items found',
|
|
438
|
+
formatter: (num) => num.toLocaleString()
|
|
437
439
|
},
|
|
438
440
|
|
|
439
441
|
// Animations
|
|
@@ -445,20 +447,13 @@ const afs = new AFS({
|
|
|
445
447
|
|
|
446
448
|
// State management
|
|
447
449
|
preserveState: true,
|
|
448
|
-
|
|
450
|
+
stateExpiry: 86400000, // 24 hours
|
|
451
|
+
observeDOM: false,
|
|
449
452
|
|
|
450
|
-
//
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
background: '#f5f5f5',
|
|
455
|
-
text: '#333'
|
|
456
|
-
},
|
|
457
|
-
button: {
|
|
458
|
-
borderRadius: '6px',
|
|
459
|
-
padding: '8px 16px'
|
|
460
|
-
}
|
|
461
|
-
},
|
|
453
|
+
// CSS Classes
|
|
454
|
+
activeClass: 'active',
|
|
455
|
+
hiddenClass: 'hidden',
|
|
456
|
+
activeSortClass: 'sort-active',
|
|
462
457
|
|
|
463
458
|
// Debug mode
|
|
464
459
|
debug: true
|
|
@@ -474,28 +469,50 @@ const afs = new AFS({
|
|
|
474
469
|
afs.filter.addFilter('category:tech');
|
|
475
470
|
afs.filter.removeFilter('category:tech');
|
|
476
471
|
afs.filter.clearAllFilters();
|
|
477
|
-
afs.filter.
|
|
472
|
+
afs.filter.clearFilterCategory('category:*');
|
|
473
|
+
afs.filter.setFilterTypeLogic('brand', { mode: 'OR', multi: true });
|
|
474
|
+
afs.filter.toggleFilterExclusive('category:tech');
|
|
478
475
|
|
|
479
476
|
// Search
|
|
480
477
|
afs.search.search('query');
|
|
481
478
|
afs.search.clearSearch();
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
479
|
+
afs.search.setValue('new query');
|
|
480
|
+
const currentQuery = afs.search.getValue();
|
|
481
|
+
|
|
482
|
+
// Sorting
|
|
483
|
+
afs.sort.sort('price', 'desc');
|
|
484
|
+
afs.sort.sortMultiple([
|
|
485
|
+
{ key: 'category', direction: 'asc' },
|
|
486
|
+
{ key: 'price', direction: 'desc' }
|
|
487
|
+
]);
|
|
488
|
+
afs.sort.shuffle();
|
|
489
|
+
afs.sort.reset();
|
|
486
490
|
|
|
487
491
|
// Pagination
|
|
488
492
|
afs.pagination.goToPage(2);
|
|
489
493
|
afs.pagination.nextPage();
|
|
490
494
|
afs.pagination.previousPage();
|
|
495
|
+
afs.pagination.setPaginationMode(true);
|
|
496
|
+
|
|
497
|
+
// Range Filters
|
|
498
|
+
afs.rangeFilter.addRangeSlider({
|
|
499
|
+
key: 'price',
|
|
500
|
+
container: '.price-range-container'
|
|
501
|
+
});
|
|
502
|
+
|
|
503
|
+
// Date Filters
|
|
504
|
+
afs.dateFilter.addDateRange({
|
|
505
|
+
key: 'date',
|
|
506
|
+
container: '.date-range-container'
|
|
507
|
+
});
|
|
491
508
|
|
|
492
509
|
// State
|
|
493
510
|
const state = afs.getState();
|
|
494
511
|
afs.setState(state);
|
|
495
512
|
|
|
496
513
|
// Events
|
|
497
|
-
afs.on('
|
|
498
|
-
console.log(`Showing ${data.
|
|
514
|
+
afs.on('filtersApplied', (data) => {
|
|
515
|
+
console.log(`Showing ${data.visibleItems} of ${data.total} items`);
|
|
499
516
|
});
|
|
500
517
|
```
|
|
501
518
|
|
|
@@ -503,11 +520,11 @@ afs.on('filter:applied', (data) => {
|
|
|
503
520
|
|
|
504
521
|
```javascript
|
|
505
522
|
// Available events
|
|
506
|
-
afs.on('
|
|
507
|
-
afs.on('search
|
|
508
|
-
afs.on('sort
|
|
509
|
-
afs.on('
|
|
510
|
-
afs.on('
|
|
523
|
+
afs.on('filtersApplied', callback);
|
|
524
|
+
afs.on('search', callback);
|
|
525
|
+
afs.on('sort', callback);
|
|
526
|
+
afs.on('pageChanged', callback);
|
|
527
|
+
afs.on('urlStateLoaded', callback);
|
|
511
528
|
```
|
|
512
529
|
|
|
513
530
|
## Examples
|