advanced-filter-system 1.0.8 → 1.0.9

package/dist/AFS.esm.js

@@ -139,32 +139,28 @@ class Options {
    */
   static defaults = {
     // Selectors
-    containerSelector: '.afs-filter-container',
-    itemSelector: '.afs-filter-item',
-    filterButtonSelector: '.afs-btn-filter',
-    searchInputSelector: '.afs-filter-search',
-    counterSelector: '.afs-filter-counter',
+    containerSelector: ".afs-filter-container",
+    itemSelector: ".afs-filter-item",
+    filterButtonSelector: ".afs-btn-filter",
+    searchInputSelector: ".afs-filter-search",
+    counterSelector: ".afs-filter-counter",
     // Classes
-    activeClass: 'active',
-    hiddenClass: 'hidden',
-    // Animation
-    animationDuration: 300,
-    animationType: 'fade',
-    animationEasing: 'ease-out',
+    activeClass: "active",
+    hiddenClass: "hidden",
     // Filtering
-    filterMode: 'OR',
-    searchKeys: ['title'],
+    filterMode: "OR",
+    searchKeys: ["title"],
     debounceTime: 300,
     // Debug
     debug: false,
-    logLevel: 'info',
+    logLevel: "info",
     // Date handling
-    dateFormat: 'YYYY-MM-DD',
+    dateFormat: "YYYY-MM-DD",
     counter: {
-      template: 'Showing {visible} of {total}',
+      template: "Showing {visible} of {total}",
       showFiltered: true,
-      filteredTemplate: '({filtered} filtered)',
-      noResultsTemplate: 'No items found',
+      filteredTemplate: "({filtered} filtered)",
+      noResultsTemplate: "No items found",
       formatter: num => num.toLocaleString()
     },
     // Styles
@@ -176,22 +172,22 @@ class Options {
           bins: 10,
           // Number of bins for histogram
           track: {
-            radius: '2px',
+            radius: "0",
             // Button radius
-            background: '#e5e7eb' // Track color
+            background: "#e5e7eb" // Track color
           },
           thumb: {
-            radius: '50%',
+            radius: "50%",
             // Button radius
-            size: '16px',
+            size: "16px",
             // Button size
-            background: '#000' // Button color
+            background: "#000" // Button color
           },
           histogram: {
-            background: '#e5e7eb',
+            background: "#e5e7eb",
             // Histogram background
             bar: {
-              background: '#000' // Bar color
+              background: "#000" // Bar color
             }
           }
         }
@@ -199,47 +195,55 @@ class Options {
       pagination: {
         ui: {
           button: {
-            background: 'transparent',
-            border: '1px solid #000',
-            borderRadius: '4px',
-            padding: '8px 12px',
-            color: '#000',
+            background: "transparent",
+            border: "1px solid #000",
+            borderRadius: "4px",
+            padding: "8px 12px",
+            color: "#000",
             active: {
-              background: '#000',
-              color: '#fff'
+              background: "#000",
+              color: "#fff"
             },
             hover: {
-              background: '#000',
-              color: '#fff'
+              background: "#000",
+              color: "#fff"
             }
           }
         }
       },
       colors: {
-        primary: '#000',
-        background: '#e5e7eb',
-        text: '#000'
+        primary: "#000",
+        background: "#e5e7eb",
+        text: "#000"
       }
     },
     // Slider
     slider: {
-      containerClass: 'afs-range-slider',
-      trackClass: 'afs-range-track',
-      thumbClass: 'afs-range-thumb',
-      valueClass: 'afs-range-value',
-      selectedClass: 'afs-range-selected'
+      containerClass: "afs-range-slider",
+      trackClass: "afs-range-track",
+      thumbClass: "afs-range-thumb",
+      valueClass: "afs-range-value",
+      selectedClass: "afs-range-selected"
     },
     // Pagination
     pagination: {
       enabled: false,
       itemsPerPage: 10,
-      container: '.afs-pagination-container',
-      pageButtonClass: 'afs-page-button',
-      activePageClass: 'afs-page-active',
-      containerClass: 'afs-pagination',
+      container: ".afs-pagination-container",
+      pageButtonClass: "afs-page-button",
+      activePageClass: "afs-page-active",
+      containerClass: "afs-pagination",
       scrollToTop: false,
       scrollOffset: 50,
-      scrollBehavior: 'smooth' // or 'auto' for instant scroll
+      scrollBehavior: "smooth" // or 'auto' for instant scroll
+    },
+    // Animation
+    animation: {
+      type: "fade",
+      duration: 300,
+      easing: "ease-out",
+      inClass: "afs-animation-enter",
+      outClass: "afs-animation-leave"
     }
   };
   constructor() {
@@ -277,9 +281,9 @@ class Options {
       ...target
     };
     for (const key in source) {
-      if (source[key] !== null && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      if (source[key] !== null && typeof source[key] === "object" && !Array.isArray(source[key])) {
         // If the key doesn't exist in target or isn't an object, create/override it
-        if (!target[key] || typeof target[key] !== 'object') {
+        if (!target[key] || typeof target[key] !== "object") {
           result[key] = {};
         }
         // Recursively merge nested objects
@@ -299,37 +303,37 @@ class Options {
    */
   validate() {
     // Required selectors
-    const requiredSelectors = ['containerSelector', 'itemSelector'];
+    const requiredSelectors = ["containerSelector", "itemSelector"];
     for (const selector of requiredSelectors) {
-      if (typeof this.options[selector] !== 'string') {
+      if (typeof this.options[selector] !== "string") {
         throw new Error(`${selector} must be a string`);
       }
     }
 
     // Animation duration
-    if (typeof this.options.animationDuration !== 'number' || this.options.animationDuration < 0) {
-      throw new Error('animationDuration must be a positive number');
+    if (typeof this.options.animation.duration !== "number" || this.options.animation.duration < 0) {
+      throw new Error("animationDuration must be a positive number");
     }
 
     // Filter mode
-    if (!['OR', 'AND'].includes(this.options.filterMode.toUpperCase())) {
+    if (!["OR", "AND"].includes(this.options.filterMode.toUpperCase())) {
       throw new Error('filterMode must be either "OR" or "AND"');
     }
 
     // Search keys
     if (!Array.isArray(this.options.searchKeys) || this.options.searchKeys.length === 0) {
-      throw new Error('searchKeys must be a non-empty array');
+      throw new Error("searchKeys must be a non-empty array");
     }
 
     // Counter validation
     if (this.options.counter) {
-      if (typeof this.options.counter.template !== 'string') {
-        throw new Error('counter.template must be a string');
+      if (typeof this.options.counter.template !== "string") {
+        throw new Error("counter.template must be a string");
       }
-      if (typeof this.options.counter.showFiltered !== 'boolean') {
+      if (typeof this.options.counter.showFiltered !== "boolean") {
         this.options.counter.showFiltered = true; // Set default
       }
-      if (typeof this.options.counter.formatter !== 'function') {
+      if (typeof this.options.counter.formatter !== "function") {
         this.options.counter.formatter = num => num.toLocaleString(); // Set default
       }
     } else {
@@ -345,7 +349,7 @@ class Options {
    * @returns {any} Option value
    */
   get(path) {
-    return path.split('.').reduce((obj, key) => obj?.[key], this.options);
+    return path.split(".").reduce((obj, key) => obj?.[key], this.options);
   }
 
   /**
@@ -354,7 +358,7 @@ class Options {
    * @param {any} value - New value
    */
   set(path, value) {
-    const parts = path.split('.');
+    const parts = path.split(".");
     const last = parts.pop();
     const target = parts.reduce((obj, key) => {
       if (!(key in obj)) obj[key] = {};
@@ -566,8 +570,8 @@ class StyleManager {
     const itemSelector = this.options.get("itemSelector") || ".afs-filter-item";
     const filterButtonSelector = this.options.get("filterButtonSelector") || ".afs-btn-filter";
     const activeClass = this.options.get("activeClass") || "active";
-    const animationDuration = this.options.get("animationDuration") || '300ms';
-    const animationEasing = this.options.get("animationEasing") || 'ease-out';
+    const animationDuration = this.options.get("animation.duration") || '300ms';
+    const animationEasing = this.options.get("animation.easing") || 'ease-out';
     return `
       .${hiddenClass} {
         display: none !important;
@@ -630,8 +634,8 @@ class StyleManager {
       transform: translateY(-50%);
       width: 100%;
       height: 4px;
-      background: ${sliderStyles.ui.thumb.background || colors.background};
-      border-radius: ${sliderStyles.ui.track.radius || "2px"};
+      background: ${sliderStyles.ui.track.background || colors.background};
+      border-radius: ${sliderStyles.ui.track.radius || "0"};
     }
 
     .${thumbClass} {
@@ -731,6 +735,49 @@ class StyleManager {
   `;
   }
 
+  /**
+   * Create date filter styles
+   * @private
+   * @returns {string} CSS styles
+   */
+  createInputRangeStyles() {
+    const colors = this.options.get("styles").colors;
+    return `
+        .afs-input-range-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin: 10px 0;
+        }
+
+        .afs-input-wrapper {
+            flex: 1;
+        }
+
+        .afs-input-label {
+            display: block;
+            font-size: 0.875rem;
+            color: ${colors.text};
+            margin-bottom: 0.5rem;
+        }
+
+        .afs-input {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid ${colors.background};
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+            color: ${colors.text};
+            transition: border-color 0.2s ease;
+        }
+
+        .afs-input:focus {
+            outline: none;
+            border-color: ${colors.primary};
+        }
+    `;
+  }
+
   /**
    * Apply all styles
    * @public
@@ -752,6 +799,9 @@ class StyleManager {
 
       /* Search styles */
       ${this.createSearchStyles()}
+
+      /* Input range styles */
+      ${this.createInputRangeStyles()}
     `;
       if (this.styleElement) {
         this.styleElement.textContent = styles;
@@ -1172,9 +1222,14 @@ class Animation {
   }
   applyShowAnimation(item) {
     let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
+    const duration = this.options.get('animation.duration') || '300ms';
     const animation = this.animations[animationType]?.in || this.animations.fade.in;
+
+    // Ensure display is set
     item.style.display = 'block';
+    item.style.opacity = '0'; // Start with opacity 0
+
+    // Apply animation in next frame
     requestAnimationFrame(() => {
       Object.assign(item.style, animation, {
         transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
@@ -1183,7 +1238,7 @@ class Animation {
   }
   applyHideAnimation(item) {
     let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
+    const duration = this.options.get('animation.duration') || '300ms';
     const animation = this.animations[animationType]?.out || this.animations.fade.out;
     Object.assign(item.style, animation, {
       transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
@@ -1195,7 +1250,7 @@ class Animation {
     item.addEventListener('transitionend', handleTransitionEnd);
   }
   setAnimation(animationType) {
-    this.afs.options.set('animationType', animationType);
+    this.afs.options.set('animation.type', animationType);
   }
 }
 
@@ -1342,26 +1397,39 @@ class Filter {
     // Clear filter groups
     this.filterGroups.clear();
 
-    // Force all items to be visible first
-    const visibleItems = new Set(this.afs.items);
-    this.afs.state.setState("items.visible", visibleItems);
+    // Create a promise to track animations
+    const animationPromises = [];
 
     // Show all items with animation
     this.afs.items.forEach(item => {
-      item.classList.remove(this.afs.options.get('hiddenClass'));
-      requestAnimationFrame(() => {
-        this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
+      const promise = new Promise(resolve => {
+        item.classList.remove(this.afs.options.get('hiddenClass'));
+        item.style.display = 'block'; // Ensure item is visible
+
+        requestAnimationFrame(() => {
+          this.animation.applyShowAnimation(item, this.afs.options.get("animation.type"));
+          // Resolve after animation duration
+          setTimeout(resolve, this.afs.options.get("animation.duration") || 300);
+        });
       });
+      animationPromises.push(promise);
     });
 
-    // Update counter after reset
-    this.afs.updateCounter();
+    // Update state after all items are visible
+    const visibleItems = new Set(this.afs.items);
+    this.afs.state.setState("items.visible", visibleItems);
 
-    // Update URL after reset
-    this.afs.urlManager.updateURL();
+    // Wait for all animations to complete
+    Promise.all(animationPromises).then(() => {
+      // Update counter
+      this.afs.updateCounter();
 
-    // Emit event
-    this.afs.emit("filtersReset");
+      // Update URL
+      this.afs.urlManager.updateURL();
+
+      // Emit event
+      this.afs.emit("filtersReset");
+    });
   }
 
   /**
@@ -1432,60 +1500,64 @@ class Filter {
   * @public
   */
   applyFilters() {
-    // Log active filters
     const activeFilters = Array.from(this.activeFilters);
     this.afs.logger.debug("Active filters:", activeFilters);
-    this.afs.logger.debug("Applying filters");
     const previouslyVisible = new Set(this.afs.state.getState().items.visible);
     const visibleItems = new Set();
 
-    // First pass: determine which items should be visible
+    // First determine visibility
     this.afs.items.forEach(item => {
       if (this.activeFilters.has("*") || this.itemMatchesFilters(item)) {
         visibleItems.add(item);
       }
     });
 
-    // Update state with determined visible items
+    // Update state before animations
     this.afs.state.setState("items.visible", visibleItems);
 
-    // Second pass: apply animations based on visibility changes
+    // Track animation promises
+    const animationPromises = [];
+
+    // Apply animations
     this.afs.items.forEach(item => {
-      if (visibleItems.has(item)) {
-        // Remove hidden class first
-        item.classList.remove(this.afs.options.get('hiddenClass'));
-        // Then apply show animation in next frame
-        requestAnimationFrame(() => {
-          this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
-        });
-      } else {
-        // Apply hide animation
-        requestAnimationFrame(() => {
-          this.animation.applyHideAnimation(item, this.afs.options.get("animationType"));
-        });
-      }
+      const promise = new Promise(resolve => {
+        if (visibleItems.has(item)) {
+          // Show item
+          item.classList.remove(this.afs.options.get('hiddenClass'));
+          requestAnimationFrame(() => {
+            this.animation.applyShowAnimation(item, this.afs.options.get("animation.type"));
+            setTimeout(resolve, parseFloat(this.afs.options.get("animation.duration")) || 300);
+          });
+        } else {
+          // Hide item
+          requestAnimationFrame(() => {
+            this.animation.applyHideAnimation(item, this.afs.options.get("animation.type"));
+            setTimeout(resolve, parseFloat(this.afs.options.get("animation.duration")) || 300);
+          });
+        }
+      });
+      animationPromises.push(promise);
     });
 
-    // Emit events and update UI
-    this.emitFilterEvents(previouslyVisible, visibleItems);
-
-    // Schedule UI updates
-    requestAnimationFrame(() => {
-      // Force reflow to ensure animations play
-      this.afs.container.offsetHeight;
+    // Handle completion
+    Promise.all(animationPromises).then(() => {
+      // Ensure visible items remain visible
+      visibleItems.forEach(item => {
+        item.style.display = 'block';
+        item.style.opacity = '1';
+      });
 
-      // Update counter - this needs to happen after filter changes
+      // Update UI
       this.afs.updateCounter();
-
-      // Update URL
       this.afs.urlManager.updateURL();
-
-      // Emit final event
       this.afs.emit("filtersApplied", {
         activeFilters,
         visibleItems: visibleItems.size
       });
     });
+
+    // Emit visibility change events
+    this.emitFilterEvents(previouslyVisible, visibleItems);
   }
 
   /**
@@ -2033,6 +2105,310 @@ function debounce(func, wait) {
   };
 }
 
+/**
+ * @fileoverview Input range filter implementation for AFS
+ */
+
+class InputRangeFilter {
+  constructor(afs) {
+    this.afs = afs;
+    this.activeRanges = new Map();
+  }
+
+  /**
+   * @typedef {Object} InputRangeOptions
+   * @property {string} key - Data attribute key
+   * @property {HTMLElement} container - Container element
+   * @property {number} [min] - Minimum value
+   * @property {number} [max] - Maximum value
+   * @property {number} [step] - Step value
+   * @property {string} [label] - Label for the input range
+   */
+
+  /**
+   * Add input range filter
+   * @param {InputRangeOptions} options - Input range options
+   */
+  addInputRange(_ref) {
+    let {
+      key,
+      container,
+      min,
+      max,
+      step = 1,
+      label = ''
+    } = _ref;
+    this.afs.logger.debug(`Adding input range for ${key}`);
+    if (!container) {
+      this.afs.logger.error('Container element required for input range');
+      return;
+    }
+
+    // Calculate min/max if not provided
+    const values = this.calculateMinMax(key);
+    min = min ?? values.min;
+    max = max ?? values.max;
+
+    // Create input elements
+    const elements = this.createInputElements(label);
+    const state = this.initializeState(min, max, step);
+
+    // Add elements to container
+    this.appendElements(container, elements);
+
+    // Setup event handlers
+    this.setupEventHandlers(elements, state, key);
+
+    // Store state
+    this.activeRanges.set(key, {
+      state,
+      elements
+    });
+
+    // Initial update
+    this.updateInputUI(key);
+    this.afs.logger.info(`Input range added for ${key}`);
+  }
+
+  /**
+   * Calculate min and max values from items
+   * @private
+   */
+  calculateMinMax(key) {
+    try {
+      const values = Array.from(this.afs.items).map(item => {
+        if (!item || !item.dataset || !item.dataset[key]) {
+          return null;
+        }
+        const value = parseFloat(item.dataset[key]);
+        return isNaN(value) ? null : value;
+      }).filter(value => value !== null);
+      if (values.length === 0) {
+        return {
+          min: 0,
+          max: 100
+        };
+      }
+      return {
+        min: Math.min(...values),
+        max: Math.max(...values)
+      };
+    } catch (error) {
+      this.afs.logger.error('Error calculating range:', error);
+      return {
+        min: 0,
+        max: 100
+      };
+    }
+  }
+
+  /**
+   * Create input elements
+   * @private
+   */
+  /**
+  * Create input elements
+  * @private
+  */
+  createInputElements(label) {
+    const container = document.createElement('div');
+    container.className = 'afs-input-range-container';
+    if (label) {
+      const labelElement = document.createElement('div');
+      labelElement.className = 'afs-input-range-label';
+      labelElement.textContent = label;
+      container.appendChild(labelElement);
+    }
+
+    // Min input wrapper
+    const minWrapper = document.createElement('div');
+    minWrapper.className = 'afs-input-wrapper';
+    const minLabel = document.createElement('label');
+    minLabel.textContent = 'Min';
+    minLabel.className = 'afs-input-label';
+    const minInput = document.createElement('input');
+    minInput.type = 'number';
+    minInput.className = 'afs-input min';
+    minWrapper.appendChild(minLabel);
+    minWrapper.appendChild(minInput);
+
+    // Max input wrapper
+    const maxWrapper = document.createElement('div');
+    maxWrapper.className = 'afs-input-wrapper';
+    const maxLabel = document.createElement('label');
+    maxLabel.textContent = 'Max';
+    maxLabel.className = 'afs-input-label';
+    const maxInput = document.createElement('input');
+    maxInput.type = 'number';
+    maxInput.className = 'afs-input max';
+    maxWrapper.appendChild(maxLabel);
+    maxWrapper.appendChild(maxInput);
+    container.appendChild(minWrapper);
+    container.appendChild(maxWrapper);
+    return {
+      container,
+      minInput,
+      maxInput
+    };
+  }
+
+  /**
+   * Initialize input range state
+   * @private
+   */
+  initializeState(min, max, step) {
+    return {
+      min,
+      max,
+      step,
+      currentMin: min,
+      currentMax: max
+    };
+  }
+
+  /**
+   * Append elements to container
+   * @private
+   */
+  appendElements(container, elements) {
+    container.appendChild(elements.container);
+  }
+
+  /**
+   * Setup event handlers
+   * @private
+   */
+  setupEventHandlers(elements, state, key) {
+    const {
+      minInput,
+      maxInput
+    } = elements;
+    const handleInputChange = debounce(() => {
+      const minValue = parseFloat(minInput.value);
+      const maxValue = parseFloat(maxInput.value);
+      if (!isNaN(minValue) && !isNaN(maxValue)) {
+        state.currentMin = Math.max(state.min, Math.min(maxValue, minValue));
+        state.currentMax = Math.min(state.max, Math.max(minValue, maxValue));
+        this.updateInputUI(key);
+        this.applyFilter(key);
+      }
+    }, 300);
+    minInput.addEventListener('input', handleInputChange);
+    maxInput.addEventListener('input', handleInputChange);
+  }
+
+  /**
+   * Update input UI
+   * @private
+   */
+  updateInputUI(key) {
+    try {
+      const {
+        state,
+        elements
+      } = this.activeRanges.get(key);
+      const {
+        minInput,
+        maxInput
+      } = elements;
+
+      // Set constraints
+      minInput.min = state.min;
+      minInput.max = state.max;
+      minInput.step = state.step;
+      maxInput.min = state.min;
+      maxInput.max = state.max;
+      maxInput.step = state.step;
+
+      // Set current values
+      minInput.value = state.currentMin;
+      maxInput.value = state.currentMax;
+    } catch (error) {
+      this.afs.logger.error('Error updating input UI:', error);
+    }
+  }
+
+  /**
+   * Apply filter
+   * @private
+   */
+  applyFilter(key) {
+    this.afs.logger.info(`Applying input filter for ${key}`);
+    const {
+      state
+    } = this.activeRanges.get(key);
+    this.afs.items.forEach(item => {
+      try {
+        if (!item || !item.dataset || !item.dataset[key]) {
+          this.afs.hideItem(item);
+          return;
+        }
+        const itemValue = parseFloat(item.dataset[key]);
+        if (isNaN(itemValue)) {
+          this.afs.hideItem(item);
+          return;
+        }
+        if (itemValue >= state.currentMin && itemValue <= state.currentMax) {
+          this.afs.showItem(item);
+        } else {
+          this.afs.hideItem(item);
+        }
+      } catch (error) {
+        this.afs.logger.error('Error filtering item:', error);
+        this.afs.hideItem(item);
+      }
+    });
+    this.afs.updateCounter();
+    this.afs.urlManager.updateURL();
+    this.afs.emit('inputRangeFilter', {
+      key,
+      min: state.currentMin,
+      max: state.currentMax
+    });
+  }
+
+  /**
+   * Get current range values
+   * @param {string} key - Range key
+   * @returns {Object} Current range values
+   */
+  getRange(key) {
+    const range = this.activeRanges.get(key);
+    if (!range) return null;
+    return {
+      min: range.state.currentMin,
+      max: range.state.currentMax
+    };
+  }
+
+  /**
+   * Set range values
+   * @param {string} key - Range key
+   * @param {number} min - Minimum value
+   * @param {number} max - Maximum value
+   */
+  setRange(key, min, max) {
+    const range = this.activeRanges.get(key);
+    if (!range) return;
+    range.state.currentMin = min;
+    range.state.currentMax = max;
+    this.updateInputUI(key);
+    this.applyFilter(key);
+  }
+
+  /**
+   * Remove input range
+   * @param {string} key - Range key
+   */
+  removeInputRange(key) {
+    const range = this.activeRanges.get(key);
+    if (!range) return;
+    range.elements.container.remove();
+    this.activeRanges.delete(key);
+    this.afs.logger.info(`Input range removed for ${key}`);
+  }
+}
+
 /**
  * @fileoverview Search functionality for AFS
  */
@@ -4354,7 +4730,7 @@ class DateFilter {
  */
 
 // Version
-const VERSION = '1.0.8';
+const VERSION = '1.0.9';
 class AFS extends EventEmitter {
   /**
    * @param {Object} options - Configuration options
@@ -4417,6 +4793,7 @@ class AFS extends EventEmitter {
     this.urlManager = new URLManager(this);
     this.dateFilter = new DateFilter(this);
     this.pagination = new Pagination(this);
+    this.inputRangeFilter = new InputRangeFilter(this);
 
     // Apply styles
     this.styleManager.applyStyles();