chore: finalize doc without details

docs/.vitepress/config.js

@@ -10,7 +10,6 @@ export default defineConfig({
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide' },
-      { text: 'API', link: '/api' },
       { text: 'Demo', link: '/demo' },
     ],
 
@@ -45,19 +44,6 @@ export default defineConfig({
           ]
         },
       ],
-      '/api': {
-        text: 'kompletr',
-        collapsed: false,
-        items: [
-          { text: 'kompletr', link: '/api/signature' },
-          { text: 'input', link: '/api/input' },
-          { text: 'data', link: '/api/data' },
-          { text: 'options', link: '/api/options' },
-          { text: 'onKeyup', link: '/api/onkeyup' },
-          { text: 'onSelect', link: '/api/onselect' },
-          { text: 'onError', link: '/api/onerror' },
-        ]
-      },
     },
 
     socialLinks: [

docs/guide.md

@@ -2,6 +2,4 @@
 
 Here is the Kømpletr guide. You'll find some examples of integration regarding main use cases.
 
-All the examples are using the way of the simplicity, and use only the options required for the demonstration.
-
-For technical details, see [API](./api.md) section.
+All the examples are using the way of the simplicity, and use only the options required for the demonstration.

docs/guide/examples/callbacks.md

@@ -1,7 +1,14 @@
 # Callbacks
 
+Three callbacks are exposed to give you more flexibility:
+
 ## onKeyup
 
+Fired after *onkeyup* event, with parameters:
+
+- *value*: current input value
+- *done*: callback function to call with refreshed data in parameter
+
 ```html
 <script>
   const input = document.getElementById('auto-complete');
@@ -22,6 +29,10 @@
 
 ## onSelect
 
+Fired when a suggestion is selected by a click or a keypress on Enter:
+
+- *selected*: current input value
+
 ```html
 <script>
   const input = document.getElementById('auto-complete');
@@ -37,6 +48,10 @@
 
 ## onError
 
+Fired when an error is catched, with the error given in parameter:
+
+- *error*: current error
+
 ```html
 <script>
   const input = document.getElementById('auto-complete');

docs/guide/examples/data.md

@@ -1,5 +1,9 @@
 # Data
 
+The *data* parameter is required as **Object[]** or **String[]**.
+
+It can be empty at initialization if you take the ownership on the querying by using the *onKeyup* callback to manage the data.
+
 ## Querying on initialization
 
 ```html

docs/guide/examples/input.md

@@ -1,5 +1,7 @@
 # Input
 
+The *input* parameter is required as **HTMLInputElement** or **selector**.
+
 ## Giving a selector
 
 ```html

docs/guide/examples/options.md

@@ -1,6 +1,12 @@
+
+
 # Options
 
-## animations
+The *options* parameter is required as **Object** with following properties:
+
+## animationType and animationDuration
+
+Boths optionals.
 
 ```html
 <script>
@@ -20,6 +26,8 @@
 
 ## cache
 
+Optional.
+
 ```html
 <script>
   kompletr({
@@ -37,11 +45,20 @@
 
 ## fieldsToDisplay
 
+Required if *data* contains object values, to indicate which properties should be displayed into suggested item.
+
 ```html
 <script>
   kompletr({
     input: 'auto-complete',
-    data: ['orange', 'apple', 'kiwi'],
+    data: [
+      {
+        name: 'Belgium',
+        population: 10000000,
+        code: 'BE',
+        beer: true
+      }
+    ],
     options: {
       fieldsToDisplay: [
         'name',
@@ -58,6 +75,17 @@
 
 ## filterOn
 
+Optional.
+
+Can be used to determine the search method when you delegate the filtering to Kompletr (in other terms, when you pass data without refresh it on your own by using *onKeyup* callback).
+
+Accepted values:
+
+- *prefix*: the search is done from the begining of the term
+- *expression*: the search is done into the whole word
+
+Default: *prefix*
+
 ```html
 <script>
   kompletr({
@@ -75,6 +103,12 @@
 
 ## maxResults
 
+Optional.
+
+Number of results to display.
+
+Default: 5
+
 ```html
 <script>
   kompletr({
@@ -92,6 +126,12 @@
 
 ## propToMapAsValue
 
+Optional.
+
+Number of results to display.
+
+Default: 10
+
 ```html
 <script>
   kompletr({
@@ -109,6 +149,12 @@
 
 ## startQueryingFromChar
 
+Optional.
+
+Number of chars before to fire research.
+
+Default: 2
+
 ```html
 <script>
   kompletr({
@@ -126,6 +172,17 @@
 
 ## theme
 
+Optional.
+
+Theme style.
+
+Accepted values:
+
+- *light*
+- *dark*
+
+Default: *light*
+
 ```html
 <script>
   kompletr({

docs/guide/getting-started.md

@@ -98,4 +98,3 @@ import styles from './kompletr.min.css';
   });
 </script>
 ```
-:link: See [API section](./api.md) for more informations about available options.

docs/index.md

@@ -8,11 +8,11 @@ hero:
   tagline: 10kb of vanilla lightweight to add highly featured autocompletion on your pages.
   actions:
     - theme: brand
+      text: Demo
+      link: /demo
+    - theme: alt
       text: Getting started
       link: /guide
-    - theme: alt
-      text: API Documentation
-      link: /api
 
 features:
   - icon: ✨