advanced-filter-system 1.2.8 → 1.2.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 +24 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -97,7 +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.
|
|
100
|
+
<script src="https://unpkg.com/advanced-filter-system@1.2.9/dist/afs.modern.js"></script>
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
## Quick Start
|
|
@@ -112,24 +112,24 @@ Or include via CDN:
|
|
|
112
112
|
</head>
|
|
113
113
|
<body>
|
|
114
114
|
<!-- Counter -->
|
|
115
|
-
<div class="filter-counter"></div>
|
|
115
|
+
<div class="afs-filter-counter"></div>
|
|
116
116
|
|
|
117
117
|
<!-- Search -->
|
|
118
|
-
<input type="text" class="filter-search" placeholder="Search...">
|
|
118
|
+
<input type="text" class="afs-filter-search" placeholder="Search...">
|
|
119
119
|
|
|
120
120
|
<!-- Filter Buttons -->
|
|
121
121
|
<div class="filter-buttons">
|
|
122
|
-
<button class="btn-filter" data-filter="*">All</button>
|
|
123
|
-
<button class="btn-filter" data-filter="category:category1">Category 1</button>
|
|
124
|
-
<button class="btn-filter" data-filter="category:category2">Category 2</button>
|
|
122
|
+
<button class="afs-btn-filter" data-filter="*">All</button>
|
|
123
|
+
<button class="afs-btn-filter" data-filter="category:category1">Category 1</button>
|
|
124
|
+
<button class="afs-btn-filter" data-filter="category:category2">Category 2</button>
|
|
125
125
|
</div>
|
|
126
126
|
|
|
127
127
|
<!-- Sort Buttons -->
|
|
128
|
-
<div class="sort-buttons">
|
|
129
|
-
<button class="btn-sort" data-sort-key="price">
|
|
128
|
+
<div class="afs-sort-buttons">
|
|
129
|
+
<button class="afs-btn-sort" data-sort-key="price">
|
|
130
130
|
Price <span class="sort-direction">↑</span>
|
|
131
131
|
</button>
|
|
132
|
-
<button class="btn-sort" data-sort-key="date">
|
|
132
|
+
<button class="afs-btn-sort" data-sort-key="date">
|
|
133
133
|
Date <span class="sort-direction">↑</span>
|
|
134
134
|
</button>
|
|
135
135
|
</div>
|
|
@@ -142,7 +142,7 @@ Or include via CDN:
|
|
|
142
142
|
|
|
143
143
|
<!-- Items Container -->
|
|
144
144
|
<div id="items-container">
|
|
145
|
-
<div class="filter-item"
|
|
145
|
+
<div class="afs-filter-item"
|
|
146
146
|
data-categories="category:category1"
|
|
147
147
|
data-price="99.99"
|
|
148
148
|
data-date="2024-03-15"
|
|
@@ -163,11 +163,11 @@ Or include via CDN:
|
|
|
163
163
|
<script>
|
|
164
164
|
const afs = AFS.createAFS({
|
|
165
165
|
containerSelector: '#items-container',
|
|
166
|
-
itemSelector: '.filter-item',
|
|
167
|
-
searchInputSelector: '.filter-search',
|
|
168
|
-
filterButtonSelector: '.btn-filter',
|
|
169
|
-
sortButtonSelector: '.btn-sort',
|
|
170
|
-
counterSelector: '.filter-counter',
|
|
166
|
+
itemSelector: '.afs-filter-item',
|
|
167
|
+
searchInputSelector: '.afs-filter-search',
|
|
168
|
+
filterButtonSelector: '.afs-btn-filter',
|
|
169
|
+
sortButtonSelector: '.afs-btn-sort',
|
|
170
|
+
counterSelector: '.afs-filter-counter',
|
|
171
171
|
debug: true,
|
|
172
172
|
responsive: true,
|
|
173
173
|
preserveState: true,
|
|
@@ -209,7 +209,7 @@ import { createAFS } from 'advanced-filter-system';
|
|
|
209
209
|
|
|
210
210
|
const afs = createAFS({
|
|
211
211
|
containerSelector: '#items-container',
|
|
212
|
-
itemSelector: '.filter-item',
|
|
212
|
+
itemSelector: '.afs-filter-item',
|
|
213
213
|
debug: true,
|
|
214
214
|
animation: {
|
|
215
215
|
type: 'fade',
|
|
@@ -224,10 +224,10 @@ const afs = createAFS({
|
|
|
224
224
|
|
|
225
225
|
```javascript
|
|
226
226
|
// HTML
|
|
227
|
-
<button class="btn-filter" data-filter="category:category1">Category 1</button>
|
|
228
|
-
<button class="btn-filter" data-filter="category:category2">Category 2</button>
|
|
227
|
+
<button class="afs-btn-filter" data-filter="category:category1">Category 1</button>
|
|
228
|
+
<button class="afs-btn-filter" data-filter="category:category2">Category 2</button>
|
|
229
229
|
|
|
230
|
-
<div class="filter-item" data-categories="category:category1 category:category2">
|
|
230
|
+
<div class="afs-filter-item" data-categories="category:category1 category:category2">
|
|
231
231
|
Item content
|
|
232
232
|
</div>
|
|
233
233
|
|
|
@@ -250,7 +250,7 @@ afs.filter.clearAllFilters();
|
|
|
250
250
|
```javascript
|
|
251
251
|
// HTML
|
|
252
252
|
<input type="text" class="filter-search">
|
|
253
|
-
<div class="filter-item"
|
|
253
|
+
<div class="afs-filter-item"
|
|
254
254
|
data-title="Product Name"
|
|
255
255
|
data-description="Product description">
|
|
256
256
|
Item content
|
|
@@ -276,10 +276,10 @@ afs.search.clearSearch();
|
|
|
276
276
|
|
|
277
277
|
```javascript
|
|
278
278
|
// HTML
|
|
279
|
-
<button class="btn-sort" data-filter="price">Sort by Price</button>
|
|
280
|
-
<button class="btn-sort" data-filter="date">Sort by Date</button>
|
|
279
|
+
<button class="afs-btn-sort" data-filter="price">Sort by Price</button>
|
|
280
|
+
<button class="afs-btn-sort" data-filter="date">Sort by Date</button>
|
|
281
281
|
|
|
282
|
-
<div class="filter-item" data-price="99.99" data-date="2024-03-15">
|
|
282
|
+
<div class="afs-filter-item" data-price="99.99" data-date="2024-03-15">
|
|
283
283
|
Item content
|
|
284
284
|
</div>
|
|
285
285
|
|
|
@@ -301,7 +301,7 @@ afs.sort.reset();
|
|
|
301
301
|
|
|
302
302
|
```javascript
|
|
303
303
|
// HTML
|
|
304
|
-
<div class="pagination-container"></div>
|
|
304
|
+
<div class="afs-pagination-container"></div>
|
|
305
305
|
|
|
306
306
|
// JavaScript
|
|
307
307
|
// Configure pagination
|