advanced-filter-system 1.0.7 → 1.0.9
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 +17 -57
- package/dist/AFS.esm.js +564 -154
- package/dist/AFS.esm.js.map +1 -1
- package/dist/AFS.js +564 -154
- package/dist/AFS.js.map +1 -1
- package/dist/AFS.min.js +1 -1
- package/dist/AFS.min.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,17 +19,17 @@ A powerful and flexible vanilla JavaScript filtering system that provides advanc
|
|
|
19
19
|
- [Sorting](#sorting)
|
|
20
20
|
- [Pagination](#pagination)
|
|
21
21
|
- [Advanced Usage](#advanced-usage)
|
|
22
|
-
- [Custom Animation](#custom-animation)
|
|
23
22
|
- [Filter Groups](#filter-groups)
|
|
24
23
|
- [Custom Sorting](#custom-sorting)
|
|
25
24
|
- [URL State Management](#url-state-management)
|
|
26
25
|
- [Components](#components)
|
|
27
26
|
- [Filter System](#filter-system)
|
|
28
27
|
- [Range Filter](#range-filter)
|
|
28
|
+
- [Input Range Filter](#input-range-filter)
|
|
29
29
|
- [Date Filter](#date-filter)
|
|
30
30
|
- [Search System](#search-system)
|
|
31
31
|
- [Sort System](#sort-system)
|
|
32
|
-
- [Pagination](#pagination-
|
|
32
|
+
- [Pagination System](#pagination-system)
|
|
33
33
|
- [URL Manager](#url-manager)
|
|
34
34
|
- [Styling \& Theming](#styling--theming)
|
|
35
35
|
- [Built-in Themes](#built-in-themes)
|
|
@@ -97,8 +97,7 @@ pnpm add advanced-filter-system
|
|
|
97
97
|
Or include via CDN:
|
|
98
98
|
|
|
99
99
|
```html
|
|
100
|
-
<script src="https://unpkg.com/advanced-filter-system@1.0.
|
|
101
|
-
<link rel="stylesheet" href="https://unpkg.com/advanced-filter-system@1.0.6/dist/afs.min.css">
|
|
100
|
+
<script src="https://unpkg.com/advanced-filter-system@1.0.9/dist/AFS.min.js"></script>
|
|
102
101
|
```
|
|
103
102
|
|
|
104
103
|
## Quick Start
|
|
@@ -110,7 +109,6 @@ Or include via CDN:
|
|
|
110
109
|
<html>
|
|
111
110
|
<head>
|
|
112
111
|
<title>AFS Demo</title>
|
|
113
|
-
<link rel="stylesheet" href="https://unpkg.com/advanced-filter-system@1.0.6/dist/afs.min.css">
|
|
114
112
|
</head>
|
|
115
113
|
<body>
|
|
116
114
|
<!-- Counter -->
|
|
@@ -161,7 +159,7 @@ Or include via CDN:
|
|
|
161
159
|
<div class="pagination-container"></div>
|
|
162
160
|
|
|
163
161
|
<!-- Scripts -->
|
|
164
|
-
<script src="https://unpkg.com/advanced-filter-system@1.0.
|
|
162
|
+
<script src="https://unpkg.com/advanced-filter-system@1.0.9/dist/AFS.min.js"></script>
|
|
165
163
|
<script>
|
|
166
164
|
const afs = AFS.createAFS({
|
|
167
165
|
containerSelector: '#items-container',
|
|
@@ -329,46 +327,6 @@ const info = afs.pagination.getPageInfo();
|
|
|
329
327
|
|
|
330
328
|
## Advanced Usage
|
|
331
329
|
|
|
332
|
-
### Custom Animation
|
|
333
|
-
|
|
334
|
-
```javascript
|
|
335
|
-
// Custom animation configuration
|
|
336
|
-
const afs = createAFS({
|
|
337
|
-
animation: {
|
|
338
|
-
type: 'custom',
|
|
339
|
-
duration: 500,
|
|
340
|
-
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
341
|
-
inClass: 'my-enter',
|
|
342
|
-
outClass: 'my-leave'
|
|
343
|
-
}
|
|
344
|
-
});
|
|
345
|
-
|
|
346
|
-
// CSS
|
|
347
|
-
.my-enter {
|
|
348
|
-
opacity: 0;
|
|
349
|
-
transform: scale(0.9);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.my-enter.my-enter-active {
|
|
353
|
-
opacity: 1;
|
|
354
|
-
transform: scale(1);
|
|
355
|
-
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
356
|
-
transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
.my-leave {
|
|
360
|
-
opacity: 1;
|
|
361
|
-
transform: scale(1);
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
.my-leave.my-leave-active {
|
|
365
|
-
opacity: 0;
|
|
366
|
-
transform: scale(0.9);
|
|
367
|
-
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
368
|
-
transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
369
|
-
}
|
|
370
|
-
```
|
|
371
|
-
|
|
372
330
|
### Filter Groups
|
|
373
331
|
|
|
374
332
|
```javascript
|
|
@@ -439,24 +397,35 @@ const searchQuery = afs.urlManager.getParam('search');
|
|
|
439
397
|
Each component can be used independently or as part of the AFS system.
|
|
440
398
|
|
|
441
399
|
### Filter System
|
|
400
|
+
|
|
442
401
|
See [Filter Documentation](docs/filter.md)
|
|
443
402
|
|
|
444
403
|
### Range Filter
|
|
404
|
+
|
|
445
405
|
See [Range Filter Documentation](docs/range-filter.md)
|
|
446
406
|
|
|
407
|
+
### Input Range Filter
|
|
408
|
+
|
|
409
|
+
See [Input Range Filter Documentation](docs/input-range-filter.md)
|
|
410
|
+
|
|
447
411
|
### Date Filter
|
|
412
|
+
|
|
448
413
|
See [Date Filter Documentation](docs/date-filter.md)
|
|
449
414
|
|
|
450
415
|
### Search System
|
|
416
|
+
|
|
451
417
|
See [Search Documentation](docs/search.md)
|
|
452
418
|
|
|
453
419
|
### Sort System
|
|
420
|
+
|
|
454
421
|
See [Sort Documentation](docs/sort.md)
|
|
455
422
|
|
|
456
|
-
### Pagination
|
|
423
|
+
### Pagination System
|
|
424
|
+
|
|
457
425
|
See [Pagination Documentation](docs/pagination.md)
|
|
458
426
|
|
|
459
427
|
### URL Manager
|
|
428
|
+
|
|
460
429
|
See [URL Manager Documentation](docs/url-manager.md)
|
|
461
430
|
|
|
462
431
|
## Styling & Theming
|
|
@@ -485,16 +454,6 @@ const afs = createAFS({
|
|
|
485
454
|
background: '#custom-bg',
|
|
486
455
|
text: '#custom-text'
|
|
487
456
|
},
|
|
488
|
-
components: {
|
|
489
|
-
button: {
|
|
490
|
-
borderRadius: '8px',
|
|
491
|
-
padding: '8px 16px'
|
|
492
|
-
},
|
|
493
|
-
input: {
|
|
494
|
-
borderWidth: '2px',
|
|
495
|
-
focusRing: '3px'
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
457
|
}
|
|
499
458
|
});
|
|
500
459
|
```
|
|
@@ -506,6 +465,7 @@ const afs = createAFS({
|
|
|
506
465
|
animation: {
|
|
507
466
|
type: 'fade', // or 'slide', 'scale', etc.
|
|
508
467
|
duration: 300,
|
|
468
|
+
easing: 'ease-in-out'
|
|
509
469
|
}
|
|
510
470
|
});
|
|
511
471
|
```
|