@pro6pp/infer-js 0.0.2-beta.5 → 0.0.2-beta.7
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 -4
- package/dist/index.d.mts +49 -0
- package/dist/index.d.ts +49 -0
- package/dist/index.global.js +91 -30
- package/dist/index.js +7 -2
- package/dist/index.mjs +7 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ A library that adds address autocompletion to any HTML input field.
|
|
|
5
5
|
|
|
6
6
|
## Installation
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
#### Option 1: CDN
|
|
9
9
|
|
|
10
10
|
Add this script to your HTML file. It exposes a global `Pro6PP` variable.
|
|
11
11
|
|
|
@@ -13,7 +13,7 @@ Add this script to your HTML file. It exposes a global `Pro6PP` variable.
|
|
|
13
13
|
<script src="https://unpkg.com/@pro6pp/infer-js"></script>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
#### Option 2: NPM
|
|
17
17
|
|
|
18
18
|
If you are using a build tool like Webpack or Vite, but not a framework like React.
|
|
19
19
|
|
|
@@ -25,7 +25,7 @@ npm install @pro6pp/infer-js
|
|
|
25
25
|
|
|
26
26
|
## Usage
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
#### Option 1: CDN
|
|
29
29
|
|
|
30
30
|
1. Add the script to your page.
|
|
31
31
|
2. Create an input field.
|
|
@@ -48,7 +48,7 @@ npm install @pro6pp/infer-js
|
|
|
48
48
|
</script>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
#### Option 2: NPM
|
|
52
52
|
|
|
53
53
|
1. Create an input field.
|
|
54
54
|
2. Import the `attach` function.
|
|
@@ -72,6 +72,26 @@ attach(inputElement, {
|
|
|
72
72
|
});
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
## API Configuration
|
|
76
|
+
|
|
77
|
+
| Prop | Description | Default |
|
|
78
|
+
| :---------------- | :----------------------------------------------------------------------------- | :--------------------------- |
|
|
79
|
+
| `authKey` | **(Required)** Your Pro6PP Authorization Key. | - |
|
|
80
|
+
| `country` | **(Required)** The country to search in (`'NL'` or `'DE'`). | - |
|
|
81
|
+
| `debounceMs` | Delay in milliseconds before the API search. Minimum of 50ms. | `150` |
|
|
82
|
+
| `maxRetries` | Maximum retry attempts for transient network errors. Valid range: `0` to `10`. | `0` |
|
|
83
|
+
| `showClearButton` | If `true`, shows a button to clear the input field. | `true` |
|
|
84
|
+
| `loadMoreText` | The text to display on the pagination button. | `'Show more results...'` |
|
|
85
|
+
| `style` | Styling theme. Use `'none'` to disable default CSS. | `'default'` |
|
|
86
|
+
| `placeholder` | Custom placeholder text for the input field. | - |
|
|
87
|
+
| `inputClass` | Additional CSS classes to add to the input element. | - |
|
|
88
|
+
| `noResultsText` | Text to display when no suggestions are found. | `'No results found'` |
|
|
89
|
+
| `limit` | Maximum number of suggestions to request. | `1000` |
|
|
90
|
+
| `apiUrl` | Base URL for the Pro6PP API. | `'https://api.pro6pp.nl/v2'` |
|
|
91
|
+
| `fetcher` | Custom fetch implementation for requests. | `window.fetch` |
|
|
92
|
+
| `onSelect` | Callback fired when a result is selected. | - |
|
|
93
|
+
| `onStateChange` | Callback fired whenever the internal state updates. | - |
|
|
94
|
+
|
|
75
95
|
## Styling
|
|
76
96
|
|
|
77
97
|
By default, the SDK injects the necessary CSS for the dropdown. If you want to control the styling with your own styles, set `style: 'none'` in the config:
|
package/dist/index.d.mts
CHANGED
|
@@ -1,24 +1,73 @@
|
|
|
1
1
|
import { InferConfig } from '@pro6pp/infer-core';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Configuration options for the JS Infer SDK.
|
|
5
|
+
*/
|
|
3
6
|
interface InferJSConfig extends InferConfig {
|
|
7
|
+
/**
|
|
8
|
+
* The styling theme to apply.
|
|
9
|
+
* - `default`: Injects the standard Pro6PP CSS theme.
|
|
10
|
+
* - `none`: No styles are applied, allowing for custom CSS.
|
|
11
|
+
* @default 'default'
|
|
12
|
+
*/
|
|
4
13
|
style?: 'default' | 'none';
|
|
14
|
+
/**
|
|
15
|
+
* Custom placeholder text for the input field.
|
|
16
|
+
*/
|
|
5
17
|
placeholder?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Additional CSS classes to add to the input element.
|
|
20
|
+
*/
|
|
6
21
|
inputClass?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The text to display when no suggestions are found.
|
|
24
|
+
* @default 'No results found'
|
|
25
|
+
*/
|
|
7
26
|
noResultsText?: string;
|
|
27
|
+
/**
|
|
28
|
+
* The text to show on the load more button.
|
|
29
|
+
* @default 'Show more results...'
|
|
30
|
+
*/
|
|
31
|
+
loadMoreText?: string;
|
|
32
|
+
/**
|
|
33
|
+
* If true, shows a clear button when the input is not empty.
|
|
34
|
+
* @default true
|
|
35
|
+
*/
|
|
36
|
+
showClearButton?: boolean;
|
|
8
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* The JS implementation of the Pro6PP Infer SDK.
|
|
40
|
+
* This class manages the DOM elements, event listeners, and rendering for the autocomplete UI.
|
|
41
|
+
*/
|
|
9
42
|
declare class InferJS {
|
|
10
43
|
private core;
|
|
11
44
|
private input;
|
|
12
45
|
private list;
|
|
46
|
+
private dropdown;
|
|
13
47
|
private wrapper;
|
|
14
48
|
private loader;
|
|
49
|
+
private clearButton;
|
|
50
|
+
private loadMoreButton;
|
|
15
51
|
private useDefaultStyles;
|
|
16
52
|
private noResultsText;
|
|
53
|
+
private loadMoreText;
|
|
54
|
+
private showClearButton;
|
|
55
|
+
/**
|
|
56
|
+
* Initializes the Infer logic on a target element.
|
|
57
|
+
* @param target Either a CSS selector string or a direct HTMLElement.
|
|
58
|
+
* @param config Configuration options for the API and UI.
|
|
59
|
+
*/
|
|
17
60
|
constructor(target: string | HTMLElement, config: InferJSConfig);
|
|
18
61
|
private injectStyles;
|
|
19
62
|
private bindEvents;
|
|
20
63
|
private render;
|
|
21
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* A helper to initialize the Pro6PP Infer SDK on a target element.
|
|
67
|
+
* @param target A CSS selector string or HTMLElement.
|
|
68
|
+
* @param config Configuration for the SDK.
|
|
69
|
+
* @returns An instance of InferJS.
|
|
70
|
+
*/
|
|
22
71
|
declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
|
|
23
72
|
|
|
24
73
|
export { InferJS, type InferJSConfig, attach };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,24 +1,73 @@
|
|
|
1
1
|
import { InferConfig } from '@pro6pp/infer-core';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Configuration options for the JS Infer SDK.
|
|
5
|
+
*/
|
|
3
6
|
interface InferJSConfig extends InferConfig {
|
|
7
|
+
/**
|
|
8
|
+
* The styling theme to apply.
|
|
9
|
+
* - `default`: Injects the standard Pro6PP CSS theme.
|
|
10
|
+
* - `none`: No styles are applied, allowing for custom CSS.
|
|
11
|
+
* @default 'default'
|
|
12
|
+
*/
|
|
4
13
|
style?: 'default' | 'none';
|
|
14
|
+
/**
|
|
15
|
+
* Custom placeholder text for the input field.
|
|
16
|
+
*/
|
|
5
17
|
placeholder?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Additional CSS classes to add to the input element.
|
|
20
|
+
*/
|
|
6
21
|
inputClass?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The text to display when no suggestions are found.
|
|
24
|
+
* @default 'No results found'
|
|
25
|
+
*/
|
|
7
26
|
noResultsText?: string;
|
|
27
|
+
/**
|
|
28
|
+
* The text to show on the load more button.
|
|
29
|
+
* @default 'Show more results...'
|
|
30
|
+
*/
|
|
31
|
+
loadMoreText?: string;
|
|
32
|
+
/**
|
|
33
|
+
* If true, shows a clear button when the input is not empty.
|
|
34
|
+
* @default true
|
|
35
|
+
*/
|
|
36
|
+
showClearButton?: boolean;
|
|
8
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* The JS implementation of the Pro6PP Infer SDK.
|
|
40
|
+
* This class manages the DOM elements, event listeners, and rendering for the autocomplete UI.
|
|
41
|
+
*/
|
|
9
42
|
declare class InferJS {
|
|
10
43
|
private core;
|
|
11
44
|
private input;
|
|
12
45
|
private list;
|
|
46
|
+
private dropdown;
|
|
13
47
|
private wrapper;
|
|
14
48
|
private loader;
|
|
49
|
+
private clearButton;
|
|
50
|
+
private loadMoreButton;
|
|
15
51
|
private useDefaultStyles;
|
|
16
52
|
private noResultsText;
|
|
53
|
+
private loadMoreText;
|
|
54
|
+
private showClearButton;
|
|
55
|
+
/**
|
|
56
|
+
* Initializes the Infer logic on a target element.
|
|
57
|
+
* @param target Either a CSS selector string or a direct HTMLElement.
|
|
58
|
+
* @param config Configuration options for the API and UI.
|
|
59
|
+
*/
|
|
17
60
|
constructor(target: string | HTMLElement, config: InferJSConfig);
|
|
18
61
|
private injectStyles;
|
|
19
62
|
private bindEvents;
|
|
20
63
|
private render;
|
|
21
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* A helper to initialize the Pro6PP Infer SDK on a target element.
|
|
67
|
+
* @param target A CSS selector string or HTMLElement.
|
|
68
|
+
* @param config Configuration for the SDK.
|
|
69
|
+
* @returns An instance of InferJS.
|
|
70
|
+
*/
|
|
22
71
|
declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
|
|
23
72
|
|
|
24
73
|
export { InferJS, type InferJSConfig, attach };
|
package/dist/index.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var Pro6PP=(()=>{var
|
|
1
|
+
"use strict";var Pro6PP=(()=>{var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var C=(p,e)=>{for(var t in e)m(p,t,{get:e[t],enumerable:!0})},I=(p,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!w.call(p,n)&&n!==t&&m(p,n,{get:()=>e[n],enumerable:!(s=v(e,n))||s.enumerable});return p};var E=p=>I(m({},"__esModule",{value:!0}),p);var L={};C(L,{InferJS:()=>f,attach:()=>T});var h={API_URL:"https://api.pro6pp.nl/v2",LIMIT:20,DEBOUNCE_MS:150,MIN_DEBOUNCE_MS:50,MAX_RETRIES:0},y={DIGITS_1_3:/^[0-9]{1,3}$/},x={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,hasMore:!1,selectedSuggestionIndex:-1},c=class{constructor(e){this.abortController=null;this.isSelecting=!1;this.country=e.country,this.authKey=e.authKey,this.apiUrl=e.apiUrl||h.API_URL,this.baseLimit=e.limit||h.LIMIT,this.currentLimit=this.baseLimit;let t=e.maxRetries!==void 0?e.maxRetries:h.MAX_RETRIES;this.maxRetries=Math.max(0,Math.min(t,10)),this.fetcher=e.fetcher||((i,o)=>fetch(i,o)),this.onStateChange=e.onStateChange||(()=>{}),this.onSelect=e.onSelect||(()=>{}),this.state={...x};let s=e.debounceMs!==void 0?e.debounceMs:h.DEBOUNCE_MS,n=Math.max(s,h.MIN_DEBOUNCE_MS);this.debouncedFetch=this.debounce(i=>this.executeFetch(i),n)}handleInput(e){if(this.isSelecting){this.isSelecting=!1;return}this.currentLimit=this.baseLimit;let t=this.state.stage==="final"&&e!==this.state.query;this.updateState({query:e,isValid:!1,isLoading:!!e.trim(),selectedSuggestionIndex:-1,hasMore:!1}),t&&this.onSelect(null),this.debouncedFetch(e)}loadMore(){this.state.isLoading||(this.currentLimit+=this.baseLimit,this.updateState({isLoading:!0}),this.executeFetch(this.state.query))}handleKeyDown(e){let t=e.target;if(!t)return;let s=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(s>0){if(e.key==="ArrowDown"){e.preventDefault();let i=this.state.selectedSuggestionIndex+1;i>=s&&(i=0),this.updateState({selectedSuggestionIndex:i});return}if(e.key==="ArrowUp"){e.preventDefault();let i=this.state.selectedSuggestionIndex-1;i<0&&(i=s-1),this.updateState({selectedSuggestionIndex:i});return}if(e.key==="Enter"&&this.state.selectedSuggestionIndex>=0){e.preventDefault();let o=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];o&&(this.selectItem(o),this.updateState({selectedSuggestionIndex:-1}));return}}let n=t.value;if(e.key===" "&&this.shouldAutoInsertComma(n)){e.preventDefault();let i=`${n.trim()}, `;this.updateQueryAndFetch(i)}}selectItem(e){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let t=typeof e=="string"?e:e.label,s=t;typeof e!="string"&&typeof e.value=="string"&&(s=e.value);let n=typeof e!="string"&&typeof e.value=="object"?e.value:void 0,i=!!n&&Object.keys(n).length>0;if(this.isSelecting=!0,this.state.stage==="final"||i){let r=t;if(n&&Object.keys(n).length>0){let{street:u,street_number:l,house_number:d,city:g}=n,a=l||d;u&&a&&g&&(r=`${u} ${a}, ${g}`)}this.finishSelection(r,n);return}let o=typeof e!="string"?e.subtitle:null;this.processSelection(s,o)}shouldAutoInsertComma(e){if(!e.includes(",")&&y.DIGITS_1_3.test(e.trim()))return!0;if(this.state.stage==="house_number"){let s=this.getCurrentFragment(e);return y.DIGITS_1_3.test(s)}return!1}finishSelection(e,t){this.updateState({query:e,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final",hasMore:!1}),this.onSelect(t||e),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(e,t){let{stage:s,query:n}=this.state,i=n;if(t&&(s==="city"||s==="street"||s==="mixed")){if(s==="city")i=`${t}, ${e}, `;else{let l=this.getQueryPrefix(n);i=l?`${l} ${e}, ${t}, `:`${e}, ${t}, `}this.updateQueryAndFetch(i);return}if(s==="direct"||s==="addition"){this.finishSelection(e);return}!n.includes(",")&&(s==="city"||s==="street"||s==="house_number_first")?i=`${e}, `:(i=this.replaceLastSegment(n,e),s!=="house_number"&&(i+=", ")),this.updateQueryAndFetch(i)}executeFetch(e,t=0){let s=(e||"").toString();if(!s.trim()){this.abortController?.abort(),this.resetState();return}t===0&&(this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController);let n=this.abortController?.signal,i=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),o={authKey:this.authKey,query:s,limit:this.currentLimit.toString()};i.search=new URLSearchParams(o).toString(),this.fetcher(i.toString(),{signal:n}).then(r=>{if(!r.ok){if(t<this.maxRetries&&(r.status>=500||r.status===429))return this.retry(e,t,n);throw new Error("Network error")}return r.json()}).then(r=>{r&&this.mapResponseToState(r)}).catch(r=>{if(r.name!=="AbortError"){if(t<this.maxRetries)return this.retry(e,t,n);this.updateState({isError:!0,isLoading:!1})}})}retry(e,t,s){if(s?.aborted)return;let n=Math.pow(2,t)*200;setTimeout(()=>{s?.aborted||this.executeFetch(e,t+1)},n)}mapResponseToState(e){let t={stage:e.stage,isLoading:!1},s=!1,n=null,i=e.suggestions||[],o=[],r=new Set;for(let l of i){let d=`${l.label}|${l.subtitle||""}|${JSON.stringify(l.value||{})}`;r.has(d)||(r.add(d),o.push(l))}let u=o.length+(e.cities?.length||0)+(e.streets?.length||0);if(t.hasMore=u>=this.currentLimit,e.stage==="mixed"?(t.cities=e.cities||[],t.streets=e.streets||[],t.suggestions=[]):(t.suggestions=o,t.cities=[],t.streets=[],e.stage==="final"&&o.length===1&&(s=!0,n=o[0])),t.isValid=e.stage==="final",s&&n){t.query=n.label,t.suggestions=[],t.cities=[],t.streets=[],t.isValid=!0,t.hasMore=!1,this.updateState(t);let l=typeof n.value=="object"?n.value:n.label;this.onSelect(l)}else this.updateState(t)}updateQueryAndFetch(e){this.updateState({query:e,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1,hasMore:!1}),this.debouncedFetch(e),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(e,t){let s=e.lastIndexOf(",");return s===-1?t:`${e.slice(0,s+1)} ${t}`.trim()}getQueryPrefix(e){let t=e.lastIndexOf(",");return t===-1?"":e.slice(0,t+1).trimEnd()}getCurrentFragment(e){return(e.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...x,query:this.state.query})}updateState(e){this.state={...this.state,...e},this.onStateChange(this.state)}debounce(e,t){let s,n=(...i)=>{s&&clearTimeout(s),s=setTimeout(()=>e.apply(this,i),t)};return n.cancel=()=>{s&&(clearTimeout(s),s=void 0)},n}};var b=`
|
|
2
2
|
.pro6pp-wrapper {
|
|
3
3
|
position: relative;
|
|
4
4
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
.pro6pp-input {
|
|
12
12
|
width: 100%;
|
|
13
13
|
padding: 10px 12px;
|
|
14
|
+
padding-right: 48px;
|
|
14
15
|
border: 1px solid #e0e0e0;
|
|
15
16
|
border-radius: 4px;
|
|
16
17
|
font-size: 16px;
|
|
@@ -22,6 +23,57 @@
|
|
|
22
23
|
border-color: #3b82f6;
|
|
23
24
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
24
25
|
}
|
|
26
|
+
|
|
27
|
+
.pro6pp-input-addons {
|
|
28
|
+
position: absolute;
|
|
29
|
+
right: 6px;
|
|
30
|
+
top: 0;
|
|
31
|
+
bottom: 0;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 2px;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
.pro6pp-input-addons > * {
|
|
38
|
+
pointer-events: auto;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pro6pp-clear-button {
|
|
42
|
+
background: none;
|
|
43
|
+
border: none;
|
|
44
|
+
width: 28px;
|
|
45
|
+
height: 28px;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
color: #a3a3a3;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
transition: color 0.2s, background-color 0.2s, transform 0.1s;
|
|
53
|
+
}
|
|
54
|
+
.pro6pp-clear-button:hover {
|
|
55
|
+
color: #1f2937;
|
|
56
|
+
background-color: #f3f4f6;
|
|
57
|
+
}
|
|
58
|
+
.pro6pp-clear-button:active {
|
|
59
|
+
transform: scale(0.92);
|
|
60
|
+
}
|
|
61
|
+
.pro6pp-clear-button svg {
|
|
62
|
+
width: 18px;
|
|
63
|
+
height: 18px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.pro6pp-loader {
|
|
67
|
+
width: 18px;
|
|
68
|
+
height: 18px;
|
|
69
|
+
margin: 0 4px;
|
|
70
|
+
border: 2px solid #e0e0e0;
|
|
71
|
+
border-top-color: #6b7280;
|
|
72
|
+
border-radius: 50%;
|
|
73
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
74
|
+
flex-shrink: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
25
77
|
.pro6pp-dropdown {
|
|
26
78
|
position: absolute;
|
|
27
79
|
top: 100%;
|
|
@@ -32,30 +84,32 @@
|
|
|
32
84
|
background: white;
|
|
33
85
|
border: 1px solid #e0e0e0;
|
|
34
86
|
border-radius: 4px;
|
|
35
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.
|
|
87
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
36
88
|
max-height: 300px;
|
|
37
89
|
overflow-y: auto;
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
}
|
|
93
|
+
.pro6pp-list {
|
|
38
94
|
list-style: none !important;
|
|
39
95
|
padding: 0 !important;
|
|
40
96
|
margin: 0 !important;
|
|
41
|
-
|
|
97
|
+
flex-grow: 1;
|
|
42
98
|
}
|
|
43
99
|
.pro6pp-item {
|
|
44
|
-
padding: 12px
|
|
100
|
+
padding: 12px 16px;
|
|
45
101
|
cursor: pointer;
|
|
46
102
|
display: flex;
|
|
47
103
|
flex-direction: row;
|
|
48
104
|
align-items: center;
|
|
49
|
-
color: #
|
|
105
|
+
color: #111827;
|
|
50
106
|
font-size: 14px;
|
|
51
|
-
line-height: 1;
|
|
107
|
+
line-height: 1.2;
|
|
52
108
|
white-space: nowrap;
|
|
53
109
|
overflow: hidden;
|
|
54
|
-
border-radius: 0 !important;
|
|
55
|
-
margin: 0 !important;
|
|
56
110
|
}
|
|
57
111
|
.pro6pp-item:hover, .pro6pp-item--active {
|
|
58
|
-
background-color: #
|
|
112
|
+
background-color: #f9fafb;
|
|
59
113
|
}
|
|
60
114
|
.pro6pp-item__label {
|
|
61
115
|
font-weight: 500;
|
|
@@ -63,7 +117,7 @@
|
|
|
63
117
|
}
|
|
64
118
|
.pro6pp-item__subtitle {
|
|
65
119
|
font-size: 14px;
|
|
66
|
-
color: #
|
|
120
|
+
color: #6b7280;
|
|
67
121
|
overflow: hidden;
|
|
68
122
|
text-overflow: ellipsis;
|
|
69
123
|
flex-shrink: 1;
|
|
@@ -72,35 +126,42 @@
|
|
|
72
126
|
margin-left: auto;
|
|
73
127
|
display: flex;
|
|
74
128
|
align-items: center;
|
|
75
|
-
color: #
|
|
129
|
+
color: #9ca3af;
|
|
76
130
|
padding-left: 8px;
|
|
77
131
|
}
|
|
78
132
|
.pro6pp-no-results {
|
|
79
|
-
padding:
|
|
80
|
-
color: #
|
|
133
|
+
padding: 16px;
|
|
134
|
+
color: #6b7280;
|
|
81
135
|
font-size: 14px;
|
|
82
136
|
text-align: center;
|
|
83
|
-
user-select: none;
|
|
84
|
-
pointer-events: none;
|
|
85
137
|
}
|
|
86
|
-
.pro6pp-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
138
|
+
.pro6pp-load-more {
|
|
139
|
+
width: 100%;
|
|
140
|
+
padding: 10px;
|
|
141
|
+
background: #f9fafb;
|
|
142
|
+
border: none;
|
|
143
|
+
border-top: 1px solid #e0e0e0;
|
|
144
|
+
color: #3b82f6;
|
|
145
|
+
font-size: 13px;
|
|
146
|
+
font-weight: 600;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
transition: background-color 0.2s;
|
|
149
|
+
flex-shrink: 0;
|
|
150
|
+
}
|
|
151
|
+
.pro6pp-load-more:hover {
|
|
152
|
+
background-color: #f3f4f6;
|
|
98
153
|
}
|
|
154
|
+
|
|
99
155
|
@keyframes pro6pp-spin {
|
|
100
|
-
to { transform:
|
|
156
|
+
to { transform: rotate(360deg); }
|
|
101
157
|
}
|
|
102
|
-
`;var
|
|
158
|
+
`;var f=class{constructor(e,t){let s=typeof e=="string"?document.querySelector(e):e;if(!s)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.loadMoreText=t.loadMoreText||"Show more results...",this.showClearButton=t.showClearButton!==!1,this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",s instanceof HTMLInputElement?(this.input=s,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(s.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let i=t.inputClass.split(" ");this.input.classList.add(...i)}let n=document.createElement("div");n.className="pro6pp-input-addons",this.wrapper.appendChild(n),this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",n.appendChild(this.loader),this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="pro6pp-clear-button",this.clearButton.setAttribute("aria-label","Clear input"),this.clearButton.style.display="none",this.clearButton.innerHTML=`
|
|
159
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
160
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
161
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
162
|
+
</svg>
|
|
163
|
+
`,n.appendChild(this.clearButton),this.dropdown=document.createElement("div"),this.dropdown.className="pro6pp-dropdown",this.dropdown.style.display="none",this.wrapper.appendChild(this.dropdown),this.list=document.createElement("ul"),this.list.className="pro6pp-list",this.list.setAttribute("role","listbox"),this.dropdown.appendChild(this.list),this.loadMoreButton=document.createElement("button"),this.loadMoreButton.type="button",this.loadMoreButton.className="pro6pp-load-more",this.loadMoreButton.textContent=this.loadMoreText,this.loadMoreButton.style.display="none",this.dropdown.appendChild(this.loadMoreButton),this.core=new c({...t,onStateChange:i=>this.render(i),onSelect:i=>{typeof i=="string"?this.input.value=i:i&&typeof i=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(i)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=b,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),this.clearButton.addEventListener("click",()=>{this.core.handleInput(""),this.input.focus()}),this.loadMoreButton.addEventListener("click",e=>{e.preventDefault(),this.core.loadMore()}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.dropdown.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.dropdown.style.display="flex")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.showClearButton&&(this.clearButton.style.display=e.query.length>0?"flex":"none"),this.list.innerHTML="";let t=[...e.cities,...e.streets,...e.suggestions],s=t.length>0,n=!e.isLoading&&!e.isError&&e.query.length>0&&!s&&!e.isValid;if(!s&&!n){this.dropdown.style.display="none";return}if(this.dropdown.style.display="flex",this.loadMoreButton.style.display=e.hasMore?"block":"none",n){let i=document.createElement("li");i.className="pro6pp-no-results",i.textContent=this.noResultsText,this.list.appendChild(i);return}t.forEach((i,o)=>{if(!i.label)return;let r=document.createElement("li");r.className="pro6pp-item",o===e.selectedSuggestionIndex&&r.classList.add("pro6pp-item--active"),r.setAttribute("role","option"),r.setAttribute("aria-selected",o===e.selectedSuggestionIndex?"true":"false");let u=document.createElement("span");u.className="pro6pp-item__label",u.textContent=i.label,r.appendChild(u);let l=i.count!==void 0&&i.count!==null?i.count:"",d=i.subtitle||l;if(d!==""){let a=document.createElement("span");a.className="pro6pp-item__subtitle",a.textContent=`, ${d}`,r.appendChild(a)}if(i.value===void 0||i.value===null){let a=document.createElement("div");a.className="pro6pp-item__chevron",a.innerHTML=`
|
|
103
164
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
104
165
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
105
166
|
</svg>
|
|
106
|
-
`,r.appendChild(a)}r.onmousedown=a=>a.preventDefault(),r.onclick=a=>{a.stopPropagation(),this.core.selectItem(i),e.isValid||this.input.focus()},this.list.appendChild(r)})}};function T(p,e){return new
|
|
167
|
+
`,r.appendChild(a)}r.onmousedown=a=>a.preventDefault(),r.onclick=a=>{a.stopPropagation(),this.core.selectItem(i),e.isValid||this.input.focus()},this.list.appendChild(r)})}};function T(p,e){return new f(p,e)}return E(L);})();
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
"use strict";var u=Object.defineProperty;var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var w=(i,e)=>{for(var t in e)u(i,t,{get:e[t],enumerable:!0})},C=(i,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!v.call(i,s)&&s!==t&&u(i,s,{get:()=>e[s],enumerable:!(l=y(e,s))||l.enumerable});return i};var E=i=>C(u({},"__esModule",{value:!0}),i);var B={};w(B,{InferJS:()=>a,attach:()=>x});module.exports=E(B);var p=require("@pro6pp/infer-core"),a=class{constructor(e,t){let l=typeof e=="string"?document.querySelector(e):e;if(!l)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.loadMoreText=t.loadMoreText||"Show more results...",this.showClearButton=t.showClearButton!==!1,this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",l instanceof HTMLInputElement?(this.input=l,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(l.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let n=t.inputClass.split(" ");this.input.classList.add(...n)}let s=document.createElement("div");s.className="pro6pp-input-addons",this.wrapper.appendChild(s),this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",s.appendChild(this.loader),this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="pro6pp-clear-button",this.clearButton.setAttribute("aria-label","Clear input"),this.clearButton.style.display="none",this.clearButton.innerHTML=`
|
|
2
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
4
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
5
|
+
</svg>
|
|
6
|
+
`,s.appendChild(this.clearButton),this.dropdown=document.createElement("div"),this.dropdown.className="pro6pp-dropdown",this.dropdown.style.display="none",this.wrapper.appendChild(this.dropdown),this.list=document.createElement("ul"),this.list.className="pro6pp-list",this.list.setAttribute("role","listbox"),this.dropdown.appendChild(this.list),this.loadMoreButton=document.createElement("button"),this.loadMoreButton.type="button",this.loadMoreButton.className="pro6pp-load-more",this.loadMoreButton.textContent=this.loadMoreText,this.loadMoreButton.style.display="none",this.dropdown.appendChild(this.loadMoreButton),this.core=new p.InferCore({...t,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(n)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=p.DEFAULT_STYLES,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),this.clearButton.addEventListener("click",()=>{this.core.handleInput(""),this.input.focus()}),this.loadMoreButton.addEventListener("click",e=>{e.preventDefault(),this.core.loadMore()}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.dropdown.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.dropdown.style.display="flex")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.showClearButton&&(this.clearButton.style.display=e.query.length>0?"flex":"none"),this.list.innerHTML="";let t=[...e.cities,...e.streets,...e.suggestions],l=t.length>0,s=!e.isLoading&&!e.isError&&e.query.length>0&&!l&&!e.isValid;if(!l&&!s){this.dropdown.style.display="none";return}if(this.dropdown.style.display="flex",this.loadMoreButton.style.display=e.hasMore?"block":"none",s){let n=document.createElement("li");n.className="pro6pp-no-results",n.textContent=this.noResultsText,this.list.appendChild(n);return}t.forEach((n,h)=>{if(!n.label)return;let r=document.createElement("li");r.className="pro6pp-item",h===e.selectedSuggestionIndex&&r.classList.add("pro6pp-item--active"),r.setAttribute("role","option"),r.setAttribute("aria-selected",h===e.selectedSuggestionIndex?"true":"false");let d=document.createElement("span");d.className="pro6pp-item__label",d.textContent=n.label,r.appendChild(d);let m=n.count!==void 0&&n.count!==null?n.count:"",c=n.subtitle||m;if(c!==""){let o=document.createElement("span");o.className="pro6pp-item__subtitle",o.textContent=`, ${c}`,r.appendChild(o)}if(n.value===void 0||n.value===null){let o=document.createElement("div");o.className="pro6pp-item__chevron",o.innerHTML=`
|
|
2
7
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3
8
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
4
9
|
</svg>
|
|
5
|
-
`,
|
|
10
|
+
`,r.appendChild(o)}r.onmousedown=o=>o.preventDefault(),r.onclick=o=>{o.stopPropagation(),this.core.selectItem(n),e.isValid||this.input.focus()},this.list.appendChild(r)})}};function x(i,e){return new a(i,e)}0&&(module.exports={InferJS,attach});
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import{InferCore as
|
|
1
|
+
import{InferCore as c,DEFAULT_STYLES as m}from"@pro6pp/infer-core";var a=class{constructor(e,n){let i=typeof e=="string"?document.querySelector(e):e;if(!i)throw new Error("InferJS: Target element not found.");if(this.noResultsText=n.noResultsText||"No results found",this.loadMoreText=n.loadMoreText||"Show more results...",this.showClearButton=n.showClearButton!==!1,this.useDefaultStyles=n.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",i instanceof HTMLInputElement?(this.input=i,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(i.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",n.placeholder&&(this.input.placeholder=n.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),n.inputClass){let t=n.inputClass.split(" ");this.input.classList.add(...t)}let l=document.createElement("div");l.className="pro6pp-input-addons",this.wrapper.appendChild(l),this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",l.appendChild(this.loader),this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="pro6pp-clear-button",this.clearButton.setAttribute("aria-label","Clear input"),this.clearButton.style.display="none",this.clearButton.innerHTML=`
|
|
2
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
4
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
5
|
+
</svg>
|
|
6
|
+
`,l.appendChild(this.clearButton),this.dropdown=document.createElement("div"),this.dropdown.className="pro6pp-dropdown",this.dropdown.style.display="none",this.wrapper.appendChild(this.dropdown),this.list=document.createElement("ul"),this.list.className="pro6pp-list",this.list.setAttribute("role","listbox"),this.dropdown.appendChild(this.list),this.loadMoreButton=document.createElement("button"),this.loadMoreButton.type="button",this.loadMoreButton.className="pro6pp-load-more",this.loadMoreButton.textContent=this.loadMoreText,this.loadMoreButton.style.display="none",this.dropdown.appendChild(this.loadMoreButton),this.core=new c({...n,onStateChange:t=>this.render(t),onSelect:t=>{typeof t=="string"?this.input.value=t:t&&typeof t=="object"&&(this.input.value=this.core.state.query),n.onSelect&&n.onSelect(t)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let n=document.createElement("style");n.id=e,n.textContent=m,document.head.appendChild(n)}}bindEvents(){this.input.addEventListener("input",e=>{let n=e.target.value;this.core.handleInput(n)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),this.clearButton.addEventListener("click",()=>{this.core.handleInput(""),this.input.focus()}),this.loadMoreButton.addEventListener("click",e=>{e.preventDefault(),this.core.loadMore()}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.dropdown.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.dropdown.style.display="flex")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.showClearButton&&(this.clearButton.style.display=e.query.length>0?"flex":"none"),this.list.innerHTML="";let n=[...e.cities,...e.streets,...e.suggestions],i=n.length>0,l=!e.isLoading&&!e.isError&&e.query.length>0&&!i&&!e.isValid;if(!i&&!l){this.dropdown.style.display="none";return}if(this.dropdown.style.display="flex",this.loadMoreButton.style.display=e.hasMore?"block":"none",l){let t=document.createElement("li");t.className="pro6pp-no-results",t.textContent=this.noResultsText,this.list.appendChild(t);return}n.forEach((t,d)=>{if(!t.label)return;let o=document.createElement("li");o.className="pro6pp-item",d===e.selectedSuggestionIndex&&o.classList.add("pro6pp-item--active"),o.setAttribute("role","option"),o.setAttribute("aria-selected",d===e.selectedSuggestionIndex?"true":"false");let r=document.createElement("span");r.className="pro6pp-item__label",r.textContent=t.label,o.appendChild(r);let h=t.count!==void 0&&t.count!==null?t.count:"",u=t.subtitle||h;if(u!==""){let s=document.createElement("span");s.className="pro6pp-item__subtitle",s.textContent=`, ${u}`,o.appendChild(s)}if(t.value===void 0||t.value===null){let s=document.createElement("div");s.className="pro6pp-item__chevron",s.innerHTML=`
|
|
2
7
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3
8
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
4
9
|
</svg>
|
|
5
|
-
`,
|
|
10
|
+
`,o.appendChild(s)}o.onmousedown=s=>s.preventDefault(),o.onclick=s=>{s.stopPropagation(),this.core.selectItem(t),e.isValid||this.input.focus()},this.list.appendChild(o)})}};function C(p,e){return new a(p,e)}export{a as InferJS,C as attach};
|
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"sideEffects": [
|
|
19
19
|
"*.css"
|
|
20
20
|
],
|
|
21
|
-
"version": "0.0.2-beta.
|
|
21
|
+
"version": "0.0.2-beta.7",
|
|
22
22
|
"main": "./dist/index.js",
|
|
23
23
|
"module": "./dist/index.mjs",
|
|
24
24
|
"types": "./dist/index.d.ts",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"test:coverage": "vitest run --coverage"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@pro6pp/infer-core": "0.0.2-beta.
|
|
46
|
+
"@pro6pp/infer-core": "0.0.2-beta.7"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@testing-library/dom": "^10.4.1",
|