From 0bd51c5ecd071feb7df4c4462496ef13b289b893 Mon Sep 17 00:00:00 2001
From: Steve <info@konfer.be>
Date: Sat, 9 Mar 2024 12:24:32 +0100
Subject: [PATCH] chore: 1st refactoring and options management

---
 README.md                   |  24 ++-
 src/index.html              | 183 ++++-------------
 src/js/vanilla/kompleter.js | 380 +++++++++++++-----------------------
 src/sass/_mixins.scss       |  16 ++
 src/sass/_variables.scss    |   2 +-
 src/sass/kompleter.scss     | 136 ++++++++-----
 6 files changed, 304 insertions(+), 437 deletions(-)

diff --git a/README.md b/README.md
index e4a4dfa..842c180 100644
--- a/README.md
+++ b/README.md
@@ -70,4 +70,26 @@ Following options are available:
 * **beforeFocus**: function(e, element), function, callback fired before focus on result item
 * **afterFocus**: function(e, element), callback fired after focus on result item
 * **beforeComplete**: function(e, dataset, element), callback fired before insertion of result
-* **afterComplete**: function(e, dataset, element), callback fired after insertion of result
\ No newline at end of file
+* **afterComplete**: function(e, dataset, element), callback fired after insertion of result
+
+### Analyze and refactoring to Vanilla version 
+
+Two ways of usage: static, dynamic local, dynamic api
+
+#### Static
+
+Consumer give the full dataset when kompltr is initialized
+
+-> No lazy loading
+-> async onKeyup callback optional
+-> Cache available
+-> Filtering is made at kompletr side
+
+#### Dynamic
+
+Consumer give nothing when kompltr is initialized
+
+-> Lazy loading
+-> async onKeyup callback required
+-> Cache available
+-> Filtering is made at client side
diff --git a/src/index.html b/src/index.html
index 2ae1fa4..bae6eab 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,10 +48,7 @@ <h1>Kømpletr</h1>
       class="input--search"
       autocomplete="off"
       placeholder="Enter a city name ..."
-      value=""
-      data-url="files/kompleter.json"
-      data-filter-on="Name"
-      data-fields="Name,CountryCode,Population" />
+      value="" />
   </div>
 
   <footer>
@@ -71,158 +68,58 @@ <h1>Kømpletr</h1>
     };
     ready(() => {
       const input = document.getElementById('auto-complete');
-      console.log(input);
-
-      const dataSource = {
-        url: 'http://localhost:3000/api',
-        queryString: {  
-          keys: {
-            term: 'q',
-            limit: 'limit',
-            offset: 'offset',
-            perPage: 'perPage',
-          },
-          values: {
-            limit: 100,
-            offset: 0,
-            perPage: 10,
-          }
-        },
-        cache: 5000,
-      };
 
       const options = {
-        animation: {
-          type: 'fadeIn',
-          duration: 500
+        input: null, // Optional
+        data: [],
+        options: {
+          animation: {
+            type: 'fadeIn',
+            duration: 500
+          },
+          theme: 'dark',  
+          multiple: false,
+          fieldsToDisplay: [
+            'Name',
+            'CountryCode',
+            'Population'
+          ],
+          maxResults: 5,
+          propToMapAsValue: 'Name',
+          startQueriyngFromChar: 2,
+          filterOn: 'prefix',
+          cache: 5000
         },
-
-        fieldsToDisplay: [
-          'Name',
-          'CountryCode',
-          'Population'
-        ],
-        maxResults: 5,
-        propToMapAsValue: 'Name'
-      };
-
-      let data = { data: [
-            {
-                "0": "Breda",
-                "1": "NLD",
-                "2": "160398",
-                "Name": "Breda",
-                "CountryCode": "NLD",
-                "Population": "160398"
-            },
-            {
-                "0": "Tres de Febrero",
-                "1": "ARG",
-                "2": "352311",
-                "Name": "Tres de Febrero",
-                "CountryCode": "ARG",
-                "Population": "352311"
-            },
-            {
-                "0": "L´Hospitalet de Llobregat",
-                "1": "ESP",
-                "2": "247986",
-                "Name": "L´Hospitalet de Llobregat",
-                "CountryCode": "ESP",
-                "Population": "247986"
-            },
-            {
-                "0": "Libreville",
-                "1": "GAB",
-                "2": "419000",
-                "Name": "Libreville",
-                "CountryCode": "GAB",
-                "Population": "419000"
-            },
-            {
-                "0": "Brescia",
-                "1": "ITA",
-                "2": "191317",
-                "Name": "Brescia",
-                "CountryCode": "ITA",
-                "Population": "191317"
-            },
-            {
-                "0": "Cape Breton",
-                "1": "CAN",
-                "2": "114733",
-                "Name": "Cape Breton",
-                "CountryCode": "CAN",
-                "Population": "114733"
-            },
-            {
-                "0": "Brest",
-                "1": "FRA",
-                "2": "149634",
-                "Name": "Brest",
-                "CountryCode": "FRA",
-                "Population": "149634"
-            },
-            {
-                "0": "Bremen",
-                "1": "DEU",
-                "2": "540330",
-                "Name": "Bremen",
-                "CountryCode": "DEU",
-                "Population": "540330"
-            },
-            {
-                "0": "Freiburg im Breisgau",
-                "1": "DEU",
-                "2": "202455",
-                "Name": "Freiburg im Breisgau",
-                "CountryCode": "DEU",
-                "Population": "202455"
-            },
-            {
-                "0": "Bremerhaven",
-                "1": "DEU",
-                "2": "122735",
-                "Name": "Bremerhaven",
-                "CountryCode": "DEU",
-                "Population": "122735"
-            },
-            {
-                "0": "Debrecen",
-                "1": "HUN",
-                "2": "203648",
-                "Name": "Debrecen",
-                "CountryCode": "HUN",
-                "Population": "203648"
-            },
-            {
-                "0": "Brest",
-                "1": "BLR",
-                "2": "286000",
-                "Name": "Brest",
-                "CountryCode": "BLR",
-                "Population": "286000"
-            }
-        ]
-      };
-
-      const cbs = {
-        onKeyup: (value, cb) => {
+        /**onKeyup: async function (value, cb) {
           console.log('cb.onKeyup ', value);
           console.log('I\'m doing scrappy stuffs with the data!');
-          console.log('You want the data? There is!', data.data);
-          cb(data.data);
-        },
+          data = ['string', 'string', 'string'];
+          //cb(data.data);
+        },**/
         onSelect: (value) => {
           console.log('cb.onSelect', value);
         },
         onError: (value) => {
           console.log('cb.onError ', value);
-        }
+        },
       };
 
       // Way 1
-      input.kompleter(options, data.data, cbs)
+
+      const headers = new Headers();
+        headers.append('content-type', 'application/x-www-form-urlencoded');
+        headers.append('method', 'GET');
+        
+        fetch(`http://localhost:3000/api`, headers)
+          .then(result => result.json())
+          .then(data => {
+            console.log('there is', data)
+            options.data = data;
+            input.kompleter(options);
+          })
+          .catch(e => {
+            console.log(e);
+          });
       
       // Way 2.1
       // kompleter(input, d, cbs, options);
diff --git a/src/js/vanilla/kompleter.js b/src/js/vanilla/kompleter.js
index 4e74cf1..5fa9aa2 100644
--- a/src/js/vanilla/kompleter.js
+++ b/src/js/vanilla/kompleter.js
@@ -136,6 +136,8 @@
      * 
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache
      * @see https://web.dev/articles/cache-api-quick-guide
+     * 
+     * @todo: Full review / validation of the Cache feature
      */
     cache: {
 
@@ -168,7 +170,7 @@
        * @returns {Boolean} Cache is active or not
        */
       isActive: () => {
-        return typeof kompleter.options.dataSource.cache !== 'undefined';
+        return typeof kompleter.options.cache !== 'undefined';
       },
 
       /**
@@ -188,7 +190,7 @@
         }
 
         const createdAt = await response.text();
-        if (parseInt(createdAt + kompleter.options.dataSource.cache, 10) <= Date.now()) {
+        if (parseInt(createdAt + kompleter.options.cache, 10) <= Date.now()) {
           return false;   
         }
         return true;
@@ -238,25 +240,29 @@
       /**
        * @description Callback function exposed to consummer to allow dataset hydratation
        * 
-       * Default: (value, cb) => {}
-       * Signature: (value, cb) => {}
+       * Default: null
+       * Signature: async (value, cb) => {}
        * Trigger: keyup event, after input value is greater or equals than the options.startQueryingFromChar value
        * 
        * @param {String} value Current value of the input text to use for searching
-       * @param {Function} cb Callback function expecting data in parameter 
+       * @param {Function} cb Callback function expecting data in parameter
+       * 
+       * @async
+       * 
+       * @todo Manage a loader display when you need to wait after the data
        */
-      onKeyup: (value, cb) => {},
+      onKeyup: null,
 
       /**
        * @description Callback function exposed to consumer to allow choice management
        * 
-       * Default: (selected) => {}
+       * Default: null
        * Signature: (selected) => {}
        * Trigger: keyup + enter OR mouse click on a suggested item
        * 
        * @param {*} selected The current selected item, as String|Object
        */
-      onSelect: (selected) => {},
+      onSelect: null,
     },
 
     /**
@@ -276,7 +282,6 @@
        * @description Data origins
        */
       origin: Object.freeze({
-        api: 'api',
         cache: 'cache',
         local: 'local'
       })
@@ -363,6 +368,23 @@
      */
     handlers: {
 
+      /**
+       * @description Manage filtering of entries when data is fully provided when kompltr is initialized
+       *
+       * @param {*} string 
+       * @param {*} records 
+       * @returns 
+       */
+      filter: function (string, records) {
+        return records.filter(record => {
+          const value = typeof record === 'string' ? record : record[kompleter.options.propToMapAsValue];
+          if (kompleter.options.filterOn === 'prefix') {
+            return value.toLowerCase().lastIndexOf(string.toLowerCase(), 0) === 0;
+          }
+          return value.toLowerCase().lastIndexOf(string.toLowerCase()) !== -1;
+        });
+      },
+
       /**
        * @description Manage the data hydration according to the current setup (cache, request or local data)
        * 
@@ -374,15 +396,20 @@
        * @returns {Void}
        */
       hydrate: async function(value) {
-        if (kompleter.options.dataSource.url) {
-          const qs = kompleter.utils.qs(kompleter.options.dataSource.queryString.keys, kompleter.options.dataSource.queryString.values, value);
-          kompleter.cache.isActive() && await kompleter.cache.isValid(qs) ? kompleter.cache.emit(qs) : kompleter.handlers.request();
-        } else if (kompleter.props.dataSet) {
-          kompleter.callbacks.onKeyup(value, (data) => {
+        try {
+          // TODO manage cache -> if data available in the cache, get it from there
+          // TODO udpate requestDOne to take care of the new signature of the detail, without queryString, but just base on the search term
+          // TODO origin is not longer valid arg, querystring no more
+          if (kompleter.callbacks.onKeyup) {
+            kompleter.callbacks.onKeyup(value, (data) => {
+              document.dispatchEvent(kompleter.events.requestDone({ from: kompleter.enums.origin.local, queryString: null, data }));
+            });
+          } else {
+            const data = kompleter.handlers.filter(value, kompleter.props.data);
             document.dispatchEvent(kompleter.events.requestDone({ from: kompleter.enums.origin.local, queryString: null, data }));
-          });
-        } else {
-          document.dispatchEvent(kompleter.events.error(new Error('None of valid dataSource or dataSet found in props')));
+          }
+        } catch(e) {
+          document.dispatchEvent(kompleter.events.error(e));
         }
       },
 
@@ -398,7 +425,6 @@
           return false;
         }
         
-        console.log(kompleter.props.pointer)
         if(kompleter.props.pointer < -1 || kompleter.props.pointer > kompleter.htmlElements.suggestions.length - 1) {
           return false;
         }
@@ -413,31 +439,6 @@
         kompleter.view.focus('add');
       },
 
-      /**
-       * @description Do HTTP request to fetch data
-       * 
-       * @emits CustomEvent 'kompleter.request.done' { from, queryString, data }
-       * @emits CustomEvent 'kompleter.error' { error }
-       * 
-       * @returns {Void}
-       */
-      request: function() {
-        const headers = new Headers();
-        headers.append('content-type', 'application/x-www-form-urlencoded');
-        headers.append('method', 'GET');
-        
-        const qs = kompleter.utils.qs(kompleter.options.dataSource.queryString.keys, kompleter.options.dataSource.queryString.values, kompleter.htmlElements.input.value);
-
-        fetch(`${kompleter.options.dataSource.url}?${qs}`, headers)
-          .then(result => result.json())
-          .then(data => {
-            document.dispatchEvent(kompleter.events.requestDone({ from: kompleter.enums.origin.api, queryString: qs, data })); 
-          })
-          .catch(e => {
-            document.dispatchEvent(kompleter.events.error(e));
-          });
-      },
-
       /**
        * @description Select a suggested item as user choice
        * 
@@ -448,8 +449,8 @@
        * @returns {Void}
        */
       select: function (idx = 0) {
-        kompleter.htmlElements.input.value = typeof kompleter.props.dataSet[idx] === 'object' ? kompleter.props.dataSet[idx][kompleter.options.propToMapAsValue] : kompleter.props.dataSet[idx];
-        kompleter.callbacks.onSelect(kompleter.props.dataSet[idx]);
+        kompleter.htmlElements.input.value = typeof kompleter.props.data[idx] === 'object' ? kompleter.props.data[idx][kompleter.options.propToMapAsValue] : kompleter.props.data[idx];
+        kompleter.callbacks.onSelect(kompleter.props.data[idx]);
         document.dispatchEvent(kompleter.events.selectDone());
       },
     },
@@ -552,8 +553,8 @@
        */
       onRequestDone: () => {
         document.addEventListener('kompleter.request.done', async (e) => {
-          kompleter.props.dataSet = e.detail.data;
-          if (e.detail.from === kompleter.enums.origin.api && kompleter.cache.isActive() && await kompleter.cache.isValid()) {
+          kompleter.props.data = e.detail.data;
+          if (kompleter.cache.isActive() && await kompleter.cache.isValid()) {
             kompleter.cache.set(e.detail);
           }
           kompleter.view.results(e.detail.data);
@@ -607,7 +608,14 @@
      */
     options: {
 
-      _fieldsToDisplay: [], _maxResults: 10, _startQueriyngFromChar: 2, _propToMapAsValue: '',
+      _multiple: false,
+      _theme: 'light',
+      _fieldsToDisplay: [],
+      _maxResults: 10,
+      _startQueriyngFromChar: 2,
+      _propToMapAsValue: '',
+      _filterOn: 'prefix',
+      _cache: 0,
 
       /**
        * @description Describe the animation configuration to apply to show / hide the results
@@ -647,137 +655,28 @@
       },
 
       /**
-       * @description Data source definition
+       * @description Enable / disable multiple choices
        */
-      dataSource: {
-
-        _cache: null, _url: null,
-
-        /**
-         * @description Time life of the cache when data is retrieved from an API call
-         */
-        get cache() {
-          return this._cache;
-        },
-
-        set cache(value) {
-          if (isNaN(parseInt(value, 10))) {
-            throw new Error(`cache should be an integer`);
-          }
-          this._cache = value;
-        },
+      get multiple() {
+        return this._multiple;
+      },
 
-        /**
-         * @description Endpoint URL to reach to retrieve data
-         */
-        get url() {
-          return this._url;
-        },
+      set multiple(value) {
+        this._multiple = value;
+      },
 
-        set url(value) {
-          if (/^http|https/i.test(value) === false) {
-            throw new Error(`datasource.url must be a valid url (${options.dataSource?.url} given)`);
-          }
-          this._url = value;
-        },
+      /**
+       * @description Display theme between light | dark
+       */
+      get theme() {
+        return this._theme;
+      },
 
-        /**
-         * @description Query string parameters mapping
-         */
-        queryString: {
-
-          /**
-           * @description Keys to use in query string to request the API
-           */
-          keys: {
-            
-            _term: 'q', _limit: 'limit', _offset: 'offset', _perPage: 'perPage',
-
-            /**
-             * @decription URLSearchParam for the term (input.value) to search
-             */
-            get term() {
-              return this._term;
-            },
-
-            set term(value) {
-              this._term = value;
-            },
-
-            /**
-             * @decription URLSearchParam for the limit results to return. Can be different of the maxResult
-             */
-            get limit() {
-              return this._limit;
-            },
-
-            set limit(value) {
-              this._limit = value;
-            },
-
-            /**
-             * @decription URLSearchParam for the offset start value
-             */
-            get offset() {
-              return this._offset;
-            },
-
-            set offset(value) {
-              this._offset = value;
-            },
-
-            /**
-             * @decription URLSearchParam for the per page results to return.
-             */
-            get perPage() {
-              return this._perPage || 'perPage';
-            },
-
-            set perPage(value) {
-              this._perPage = value;
-            }
-          },
-
-          /**
-           * @description Values to use in query string to request the API
-           */
-          values: {
-            _limit: 100, _offset: 0, _perPage: 10,
-
-            /**
-             * @decription URLSearchParam value for the limit key
-             */
-            get limit() {
-              return this._limit;
-            },
-
-            set limit(value) {
-              this._limit = value;
-            },
-
-            /**
-             * @decription URLSearchParam value for the offset key
-             */
-            get offset() {
-              return this._offset;
-            },
-
-            set offset(value) {
-              this._offset = value;
-            },
-
-            /**
-             * @decription URLSearchParam value for the perPage key
-             */
-            get perPage() {
-              return this._perPage;
-            },
-
-            set perPage(value) {
-              this._perPage = value;
-            }
-          }
-        },
+      set theme(value) {
+        if (!['light', 'dark'].includes(value)) {
+          throw new Error(`theme should be one of ['light', 'dark'], ${value} given`);
+        }
+        this._theme = value;
       },
 
       /**
@@ -793,8 +692,6 @@
       
       /**
        * @description Maximum number of results to display as suggestions (can be different thant the number of results availables)
-       * 
-       * @deprecated
        */
       get maxResults() {
         return this._maxResults;
@@ -806,8 +703,6 @@
 
       /**
        * @description Input minimal value length before to fire research
-       * 
-       * @deprecated
        */
       get startQueriyngFromChar() {
         return this._startQueriyngFromChar;
@@ -829,11 +724,32 @@
       },
 
       /**
-       * @description Styles customization
-       * 
-       * @todo
+       * @description Apply filtering from the beginning of the word (prefix) or on the entire expression (expression)
        */
-      styles: {}
+      get filterOn() {
+        return this._filterOn;
+      },
+
+      set filterOn(value) {
+        if (!['prefix', 'expression'].includes(value)) {
+          throw new Error(`filterOn should be one of ['prefix', 'expression'], ${value} given`);
+        }
+        this._filterOn = value;
+      },
+
+      /**
+       * @description Time life of the cache when data is retrieved from an API call
+       */
+      get cache() {
+        return this._cache;
+      },
+
+      set cache(value) {
+        if (isNaN(parseInt(value, 10))) {
+          throw new Error(`cache should be an integer`);
+        }
+        this._cache = value;
+      },
     },
 
     /**
@@ -841,18 +757,18 @@
      */
     props: {
       
-      _dataSet: null, _pointer: null, _previousValue: null,
+      _data: null, _pointer: null, _previousValue: null,
 
       /**
        * @description Data storage
        */
-      get dataSet() {
+      get data() {
         return this._dataSet;
       },
 
-      set dataSet(value) {
+      set data(value) {
         if (!Array.isArray(value)) {
-          throw new Error(`dataset must be an array (${value.toString()} given)`);
+          throw new Error(`data must be an array (${value.toString()} given)`);
         }
         this._dataSet = value;
       },
@@ -898,37 +814,22 @@
        * @returns {Boolean}
        */
       input: (input) => {
-        if (input instanceof HTMLInputElement === false && !document.getElementById(input)) {
+        if (input && input instanceof HTMLInputElement === false && !document.getElementById(input)) {
           throw new Error(`input should be an HTMLInputElement instance or a valid id identifier. None of boths given, ${input} received.`);
         }
         return true;
       },
 
       /**
-       * @description Valid dataset format
+       * @description Valid data format
        * 
-       * @param {Array} dataSet 
+       * @param {Array} data 
        *
        * @returns {Boolean}
        */
-      dataSet: (dataSet) => {
-        console.log(dataSet)
-        if (dataSet && !Array.isArray(dataSet)) {
-          throw new Error(`Invalid dataset. Please provide a valid dataset or nothing if you provide a dataSource (${dataSet} given).`);
-        }
-        return true;
-      },
-
-      /**
-       * @description Valid options
-       * 
-       * @param {Object} options 
-       *
-       * @returns {Boolean}
-       */
-      options: (options) => {
-        if (options.dataSource && !options.dataSource?.url) {
-          throw new Error(`Invalid datasource.url. Please provide a valid datasource url (${options.dataSource?.url} given).`);
+      data: (data) => {
+        if (data && !Array.isArray(data)) {
+          throw new Error(`Invalid data. Please provide a valid data as Array of what you want (${data} given).`);
         }
         return true;
       },
@@ -945,8 +846,8 @@
           if (!Object.keys(kompleter.callbacks).includes(key)) {
             throw new Error(`Unrecognized callback function ${key}. Please use onKeyup, onSelect and onError as valid callbacks functions.`);
           }
-          if (typeof callbacks[key] !== 'function') {
-            throw new Error(`callback function ${key} should be a function`);
+          if (callbacks[key] && typeof callbacks[key] !== 'function') {
+            throw new Error(`callback function ${key} should be a function, ${callbacks[key]} given`);
           }
         });
         return true;
@@ -974,22 +875,6 @@
         return htmlElement;
       },
 
-      /**
-       * @description Build a query string and returns it as String
-       * 
-       * @param {Object} keys
-       * @param {Object} values 
-       * @param {String} term 
-       * 
-       * @returns {String} The generated query string
-       */
-      qs: function(keys, values, term = '') {
-        const qs = new URLSearchParams();
-        Object.keys(kompleter.options.dataSource.queryString.keys)
-          .forEach(param => qs.append(kompleter.options.dataSource.queryString.keys[param], param === 'term' ? term : kompleter.options.dataSource.queryString.values[param]));
-        return qs.toString();
-      },
-
       /**
        * @description Get a simple uuid generated from given string
        * 
@@ -1048,18 +933,18 @@
       results: function() {
         let html = '';
 
-        if(kompleter.props.dataSet && kompleter.props.dataSet.length) {
-          for(let i = 0; i < kompleter.props.dataSet.length && i <= kompleter.options.maxResults - 1; i++) {
-            if(typeof kompleter.props.dataSet[i] !== 'undefined') {
-              html += `<div id="${i}" class="item--result ${i + 1 === kompleter.props.dataSet.length ? 'last' : ''}">`;
-              switch (typeof kompleter.props.dataSet[i]) {
+        if(kompleter.props.data && kompleter.props.data.length) {
+          for(let i = 0; i < kompleter.props.data.length && i <= kompleter.options.maxResults - 1; i++) {
+            if(typeof kompleter.props.data[i] !== 'undefined') {
+              html += `<div id="${i}" class="item--result ${i + 1 === kompleter.props.data.length ? 'last' : ''}">`;
+              switch (typeof kompleter.props.data[i]) {
                 case 'string':
-                  html += '<span class="data-' + j + '">' + kompleter.props.dataSet[i] + '</span>';
+                  html += '<span class="item--data">' + kompleter.props.data[i] + '</span>';
                   break;
                 case 'object':
-                  let properties = Array.isArray(kompleter.options.fieldsToDisplay) && kompleter.options.fieldsToDisplay.length ? kompleter.options.fieldsToDisplay.slice(0, 3) : Object.keys(kompleter.props.dataSet[i]).slice(0, 3);
+                  let properties = Array.isArray(kompleter.options.fieldsToDisplay) && kompleter.options.fieldsToDisplay.length ? kompleter.options.fieldsToDisplay.slice(0, 3) : Object.keys(kompleter.props.data[i]).slice(0, 3);
                   for(let j = 0; j < properties.length; j++) {
-                    html += '<span class="data-' + j + '">' + kompleter.props.dataSet[i][properties[j]] + '</span>';
+                    html += '<span class="item--data">' + kompleter.props.data[i][properties[j]] + '</span>';
                   }
                   break;
               }
@@ -1086,29 +971,28 @@
      * 
      * @returns {Void}
      */
-    init: function(input, options, dataSet = [], callbacks = { onKeyup: (value, cb) => {}, onSelect: (selected) => {} }) {
+    init: function({ input, data, options, onKeyup, onSelect, onError }) {
 
       try {
 
         // 1. Validate
 
         kompleter.validators.input(input);
-        kompleter.validators.options(options)
-        kompleter.validators.dataSet(dataSet);
-        kompleter.validators.callbacks(callbacks);
+        kompleter.validators.data(data);    
+        kompleter.validators.callbacks({ onKeyup, onSelect, onError });
 
-        // 2. Assign
+        // 2. Assign TODO: possible to do better with this ?
 
-        if(options) {
-          kompleter.options = Object.assign(kompleter.options, options);
+        if (data) {
+          kompleter.props.data = data;
         }
 
-        if (dataSet) {
-          kompleter.props.dataSet = dataSet;
+        if(options) {
+          kompleter.options = Object.assign(kompleter.options, options);
         }
         
-        if (callbacks) {
-          kompleter.callbacks = Object.assign(kompleter.callbacks, callbacks);
+        if (onKeyup || onSelect || onError) {
+          kompleter.callbacks = Object.assign(kompleter.callbacks, { onKeyup, onSelect, onError });
         }
 
         // 3. Build DOM
@@ -1118,7 +1002,7 @@
         kompleter.htmlElements.result = kompleter.utils.build('div', [ { id: 'kpl-result' }, { class: 'form--search__result' } ]);
 
         kompleter.htmlElements.wrapper = kompleter.htmlElements.input.parentElement;
-        kompleter.htmlElements.wrapper.setAttribute('class', `${kompleter.htmlElements.wrapper.getAttribute('class')} kompletr`);
+        kompleter.htmlElements.wrapper.setAttribute('class', `${kompleter.htmlElements.wrapper.getAttribute('class')} kompletr ${kompleter.options.theme}`);
         kompleter.htmlElements.wrapper.appendChild(kompleter.htmlElements.result);
 
         // 4. Listeners
@@ -1137,8 +1021,8 @@
 
   window.kompleter = kompleter.init;
   
-  window.HTMLInputElement.prototype.kompleter = function(config, dataSet, callbacks) {
-    window.kompleter(this, config, dataSet, callbacks);
+  window.HTMLInputElement.prototype.kompleter = function({ data, options, onKeyup, onSelect, onError }) {
+    window.kompleter({ input: this, data, options, onKeyup, onSelect, onError });
   };
 
 })(window);
\ No newline at end of file
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
index aab9f1b..5ec079c 100644
--- a/src/sass/_mixins.scss
+++ b/src/sass/_mixins.scss
@@ -788,4 +788,20 @@ $base-font-size: 16px !default;
   background-image: -moz-linear-gradient(left, $startColor, $endColor);
   background-image: -ms-linear-gradient(left, $startColor, $endColor);
   background-image: -o-linear-gradient(left, $startColor, $endColor);
+}
+
+///
+/// 
+/// 
+@mixin backdrop ($blur, $saturate, $opacity, $theme: 'light') {
+  backdrop-filter: blur($blur) saturate($saturate);
+  -webkit-backdrop-filter: blur($blur) saturate($saturate);
+  @if ($theme == 'light') {
+    background-color: rgba(255, 255, 255, $opacity);
+  } @else if ($theme == 'dark') {
+    background-color: rgba(51, 51, 51, $opacity);
+  } @else {
+    background-color: rgba(255, 255, 255, $opacity);
+  }
+  
 }
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 18519b6..f13f9a5 100755
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -8,7 +8,7 @@
 $color-1: #ffffff;
 $color-2: #c0c0c0;
 $color-3: #dfdfdf;
-$color-4: #777;
+$color-4: #9e9e9e;
 $color-5: #666;
 $color-6: #333;
 
diff --git a/src/sass/kompleter.scss b/src/sass/kompleter.scss
index 607bebc..d023f8c 100755
--- a/src/sass/kompleter.scss
+++ b/src/sass/kompleter.scss
@@ -9,40 +9,40 @@ html {
 }
 
 .github-corner {
-  border-bottom: 0;
   position: fixed;
   right: 0;
-  text-decoration: none;
   top: 0;
+  border-bottom: 0;
+  text-decoration: none;
   z-index: 1;
   & svg {
+    height: 80px;
+    width: 80px;
     color: #fff;
     fill: #333;
     fill: var(--theme-color, #333);
-    height: 80px;
-    width: 80px;
   }
 }
 
 body {
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   margin: 0;
+  min-height: 100vh;
   font-family: $font-base;
   background: rgb(2,0,36);
   background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(133,255,189,1) 50%, rgba(255,251,125,1) 100%);
 }
 
 hgroup {
-  text-align: center;
   margin: 0 auto 40px auto;
+  text-align: center;
 }
 
 h1 {
+  margin: 3rem auto 0 auto;
   font-family: $font-title;
   font-size: 7rem;
-  margin: 3rem auto 0 auto;
 }
 
 a {
@@ -50,10 +50,11 @@ a {
 }
 
 footer {
+  margin-top: auto;
   color: #333;
   text-align: center;
-  margin-top: auto;
 }
+
 ////
 // Module code
 ////
@@ -86,75 +87,122 @@ footer {
     height: auto;
     font-size: 1.2rem;
     line-height: 1.5;
-    color: $color-4;
     border: none;
-    background: $color-1;
     &:focus {
       border: none;
       outline: none;
     }
   }
   
-  ::placeholder {
-    color: $color-2;
-  }
-  
   .form--search__result {
     position: absolute;
     margin: 0;
     width: 100%;
   }
   
-  /* Block one item result */
   .item--result {
     box-sizing: border-box;
     width: 100%;
     padding: 15px;
-    backdrop-filter: blur(16px) saturate(180%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
-    background-color: rgba(255, 255, 255, 0.75);
-    border-bottom: 1px dashed $color-3;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
     border-left: none;
     border-right: none;
-    color: $color-6;
 
-    &.last, &:last-child {
+    &:last-child {
       border-bottom: none;
     }
 
     &:hover, &.focus {
       cursor: pointer;
-      backdrop-filter: blur(26px) saturate(120%);
-      -webkit-backdrop-filter: blur(26px) saturate(120%);
-      background-color: rgba(255, 255, 255, 0.50);
-      color: $color-5;
       @include transition(0.2s ease-in-out);
-      & .data-1, & .data-2 {
-        color: $color-5;
+    }
+
+    & .item--data {
+      flex: 50%;
+
+      &:nth-child(even) {
+        text-align: right;
+      }
+
+      &:nth-child(0) {
+        font-weight: 600;
+      }
+
+      &:nth-child(n+2) {
+        font-weight: normal;
       }
     }
-    & .data-0  {
-      float: left;
-      color: $color-5;
-      margin: 0 0 3px 0;
-      font-weight: 600;
+  }
+
+  &.light {
+    .input--search {
+      color: $color-4;
+      background: $color-1;
     }
-    & .data-1, & .data-2 {
-      display: block;
+
+    ::placeholder {
       color: $color-2;
-      font-weight: normal;
     }
-    & .data-1 {
-      float: right;
+
+    .item--result {
+      color: $color-6;
+      border-bottom: 1px dashed $color-3;
+      @include backdrop(16px, 180%, 0.75);
+
+      &:hover, &.focus {
+        @include backdrop(26px, 120%, 0.50);
+        
+        & .item--data:nth-child(n+2) {
+          color: $color-6;
+        }
+      }
+
+      & .item--data {
+        &:nth-child(0) {
+          color: $color-6;
+        }
+  
+        &:nth-child(n+2) {
+          color: $color-4;
+        }
+      }
     }
-    & .data-2 {
-      clear: both;
+  }
+
+  &.dark {
+    .input--search {
+      color: $color-1;
+      background: $color-6;
+    }
+
+    ::placeholder {
+      color: $color-2;
     }
-    & span:nth-child(n+4) {
-      display: block;
-      width: 100%;
-      margin: 5px 0;
-      font-size: 0.8em;
+
+    .item--result {
+      color: $color-1;
+      border-bottom: 1px dashed $color-4;
+      @include backdrop(16px, 180%, 0.75, 'dark');
+
+      &:hover, &.focus {
+        @include backdrop(26px, 120%, 0.50, 'dark');
+        
+        & .item--data:nth-child(n+2) {
+          color: $color-1;
+        }
+      }
+
+      & .item--data {
+        &:nth-child(0) {
+          color: $color-1;
+        }
+  
+        &:nth-child(n+2) {
+          color: $color-4;
+        }
+      }
     }
   }
 }
\ No newline at end of file