From 4cf23a821c9af8661457fe943236777b4929e67b Mon Sep 17 00:00:00 2001 From: Vasyl Derenko Date: Wed, 26 Jul 2023 02:50:19 +0300 Subject: [PATCH] v1.0.2 --- .storybook/preview.tsx | 12 ------------ README.md | 4 +--- build/np-select.css | 1 - build/np-select.d.ts | 6 +++--- build/np-select.js | 3 ++- build/np-select.umd.js | 3 ++- package-lock.json | 11 ++++++++++- package.json | 3 ++- src/base-select/index.ts | 10 ++++++++++ src/index.ts | 6 +++--- src/types/base-select.ts | 6 +++--- vite.config.js | 2 ++ 12 files changed, 38 insertions(+), 29 deletions(-) delete mode 100644 build/np-select.css diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5736d67..40dba0c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,15 +1,3 @@ -// .storybook/preview.jsx -import React from 'react'; - -import { - Title, - Subtitle, - Description, - Primary, - Controls, - Stories, -} from '@storybook/blocks'; - export default { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/README.md b/README.md index 1c31fda..39a54f9 100644 --- a/README.md +++ b/README.md @@ -49,11 +49,9 @@ NovaPoshta © address and warehouse selects. It contains two selects, which requ #### Script tag: -Go to `/build` folder and download `np-select.umd.js` and `np-select.css`, `np-select.d.ts` if you want to have `.ts` types +Go to `/build` folder and download `np-select.umd.js`, `np-select.d.ts` if you want to have `.ts` types ```html - - ``` diff --git a/build/np-select.css b/build/np-select.css deleted file mode 100644 index 094a3ac..0000000 --- a/build/np-select.css +++ /dev/null @@ -1 +0,0 @@ -.spinner{display:block;position:absolute;width:14px;height:14px}.spinner span{box-sizing:border-box;display:block;position:absolute;width:14px;height:14px;border:1px solid #fff;border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#000 transparent transparent transparent}.spinner span:nth-child(1){animation-delay:-.45s}.spinner span:nth-child(2){animation-delay:-.3s}.spinner span:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--np-select-error: tomato;--np-select-white: #fff;--np-select-text: #221f1f;--np-select-active: #e5f5ec;--np-select-disabled: #d2d2d2;--np-select-box-shadow: #221f1f40}.np-select{width:400px;position:relative;height:40px;z-index:2}.np-select *{box-sizing:border-box;font-family:sans-serif}.np-select__button{width:100%;height:40px;padding-left:12px;padding-right:40px;border:1px solid var(--np-select-disabled);border-radius:4px;background-color:var(--np-select-white);font-size:14px;line-height:36px;text-align:left;color:var(--np-select-text);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.np-select__button .icon{color:var(--np-select-text);position:absolute;top:50%;transform:translateY(-50%);right:12px;width:14px;height:9px}.np-select__button .icon svg{display:block;width:14px;height:9px}.np-select__button .loading{display:none;position:absolute;top:50%;transform:translateY(-50%);right:14px;height:14px;width:14px}.np-select__button:disabled{color:var(--np-select-disabled);cursor:default}.np-select__button:disabled svg{fill:var(--np-select-disabled)}.np-select__input{display:block;width:100%;height:40px;font-size:14px;background-color:var(--np-select-white);appearance:none;border-radius:8px;padding:0 12px;outline:none;margin:5px 0;position:absolute;top:40px;display:none}.np-select__box{max-height:210px;width:100%;overflow-y:scroll;box-shadow:0 2px 4px var(--np-select-box-shadow);background-color:var(--np-select-white);border:1px solid var(--np-select-disabled);border-radius:8px;position:absolute;top:90px;display:none}.np-select__placeholder{position:absolute;top:90px;left:0;width:100%;background:var(--np-select-white);text-align:center;padding:25px 10px;display:none;box-shadow:0 2px 4px var(--np-select-box-shadow);border-radius:8px;font-size:14px}.np-select__option{cursor:pointer;font-size:14px;padding:10px 16px;color:var(--np-select-text);outline:none}.np-select.open .np-select__box:not(.empty),.np-select.open .np-select__input{display:block}.np-select[aria-invalid=true] .np-select__button{border:1px solid var(--np-select-error);color:var(--np-select-error)}.np-select[aria-invalid=true] .np-select__button svg{fill:var(--np-select-error)}.np-select[aria-busy=true] .np-select__button .icon{display:none}.np-select[aria-busy=true] .np-select__button .loading{display:block}.np-select[aria-busy=true] .np-select__placeholder{top:45px}.np-select__option:hover,.np-select__option:focus,.np-select__option.selected{background:var(--np-select-active)}.np-select[aria-disabled=true] .np-select__placeholder{top:45px}.np-select.open .np-select__placeholder.empty{display:block}.np-select-root{position:relative;z-index:4} diff --git a/build/np-select.d.ts b/build/np-select.d.ts index 62995ac..7dbb263 100644 --- a/build/np-select.d.ts +++ b/build/np-select.d.ts @@ -83,11 +83,11 @@ export interface NpBaseSelectOption { } export type NpBaseSelectSharedProperties = { root: HTMLElement; - button: { + button?: { text?: string; icon?: string; }; - input: { + input?: { name?: string; placeholder?: string; }; @@ -95,7 +95,7 @@ export type NpBaseSelectSharedProperties = { text: string; }; options?: NpBaseSelectOption[]; - apiKey: string; + apiKey?: string; }; export type NpBaseSelectSharedMethods = { getOption: (value: Record) => NpBaseSelectOption; diff --git a/build/np-select.js b/build/np-select.js index 3bcdfa7..1935fc0 100644 --- a/build/np-select.js +++ b/build/np-select.js @@ -1 +1,2 @@ -"use strict";var S=Object.defineProperty;var y=(s,e,t)=>e in s?S(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var a=(s,e,t)=>(y(s,typeof e!="symbol"?e+"":e,t),t);var p=(s,e,t)=>new Promise((n,i)=>{var l=o=>{try{r(t.next(o))}catch(h){i(h)}},d=o=>{try{r(t.throw(o))}catch(h){i(h)}},r=o=>o.done?n(o.value):Promise.resolve(o.value).then(l,d);r((t=t.apply(s,e)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=(s,e=500)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout(()=>{s.apply(void 0,n)},e)}},L=(s,e)=>{document.addEventListener("click",t=>{t.currentTarget!==s&&!s.contains(t.target)&&e()})},O=(s,e)=>{const t=e.toLowerCase().split(" ");return s.filter(n=>t.every(i=>n.label.toLowerCase().includes(i)))},u="https://api.novaposhta.ua/v2.0/json/";class C{constructor(e){a(this,"API_URL");this.config=e,this.API_URL=u}getNpCities(e){return p(this,null,function*(){try{const t=yield fetch(this.API_URL,this.getConfig({modelName:"Address",calledMethod:"searchSettlements",methodProperties:{CityName:e,Limit:"30"}})),{data:n}=yield t.json();return n[0].Addresses}catch(t){return[]}})}getNpWarehouses(e){return p(this,null,function*(){try{const t=yield fetch(u,this.getConfig({modelName:"Address",calledMethod:"getWarehouses",methodProperties:{CityName:e}})),{data:n}=yield t.json();return n}catch(t){return[]}})}getConfig(e){return{body:JSON.stringify({apiKey:this.config.apiKey,modelName:e.modelName,calledMethod:e.calledMethod,methodProperties:e.methodProperties}),method:"POST"}}}const w=["Enter"],m={option:"np-select__option"},E='',N='';class ${constructor({root:e,button:t,input:n,options:i=[],getOption:l,onSelect:d=()=>{},onInput:r=()=>{},onOpen:o=()=>{},onMounted:h=()=>{},apiKey:v}){a(this,"options");a(this,"filtered");a(this,"open");a(this,"value");a(this,"button");a(this,"input");a(this,"placeholder");a(this,"selected");a(this,"disabled");a(this,"loading");a(this,"$root");a(this,"$wrapper");a(this,"$button");a(this,"$input");a(this,"$select");a(this,"$placeholder");a(this,"getOption");a(this,"onSelect");a(this,"onInput");a(this,"onOpen");a(this,"onMounted");a(this,"api");this.options=i.map(c=>l(c)),this.filtered=i.map(c=>l(c)),this.open=!1,this.value="",this.selected="",this.button=t,this.input=n,this.disabled=!1,this.loading=!1,this.$root=e,this.$wrapper=null,this.$button=null,this.$input=null,this.$select=null,this.$placeholder=null,this.getOption=l,this.onSelect=d,this.onInput=r,this.onOpen=o,this.onMounted=h,this.api=new C({apiKey:v}),this.build()}validate(){const e=!!this.selected;return this.disabled?!1:(this.$wrapper.ariaInvalid=`${!e}`,e)}setLoading(e){this.loading=e,this.$wrapper.ariaBusy=`${e}`}getLoading(){return this.loading}setSelected(e){this.selected=e,this.setValue(e)}getSelected(){return{value:this.selected,option:this.options.find(e=>e.value===this.selected)}}setValue(e=""){if(!e.length){this.selected="";return}this.filtered.some(t=>t.value===e)&&(this.selected=e,this.setButtonText(this.selected)),this.value=e,this.$input.value=e,this.createSelectOptions()}getValue(){return this.value}setOptions(e){this.options=e.map(t=>this.getOption(t)),this.filtered=e.map(t=>this.getOption(t)),this.setEmptyState(this.filtered),this.createSelectOptions()}getOptions(){return this.options}setFiltered(e){this.filtered=e,this.setEmptyState(this.filtered),this.createSelectOptions()}getFiltered(){return this.filtered}setOpen(e){e?this.handleOpen():this.handleClose(),this.open=e}setDisabled(e){this.disabled=e,this.$button.disabled=e,this.setButtonText(this.button.text||""),this.$wrapper.ariaDisabled=`${e}`}build(){var t;const e=this.createSelect();this.options&&this.createSelectOptions(),this.$wrapper=e,this.$root.replaceChildren(e),(t=this.onMounted)==null||t.call(this,this),L(this.$root,()=>this.setOpen(!1))}createSelect(){var r;const e=document.createElement("div");e.classList.add("np-select");const t=this.createButton();this.$button=t,e.appendChild(t);const n=document.createElement("input");n.classList.add("np-select__input"),n.name=this.input.name||"",n.placeholder=this.input.placeholder||"",n.autocomplete="off";const i=b(o=>this.handleInput(o));n.addEventListener("input",i),n.addEventListener("keydown",o=>{o.code==="ArrowDown"&&this.$select.querySelector(m.option).focus()}),e.appendChild(n),this.$input=n;const l=document.createElement("div");l.classList.add("np-select__box","empty"),e.append(l),this.$select=l;const d=document.createElement("div");return d.classList.add("np-select__placeholder"),d.textContent=((r=this.placeholder)==null?void 0:r.text)||"Nothing found.",e.append(d),this.$placeholder=d,e}createSelectOptions(){this.$select.replaceChildren(),this.filtered.forEach(e=>{const t=document.createElement("div");t.classList.add("np-select__option"),t.textContent=e.label,t.tabIndex=0,e.value===this.value&&t.classList.add("selected"),t.addEventListener("click",()=>this.handleSelect(t,e)),t.addEventListener("keydown",n=>{w.includes(n.code)&&this.handleSelect(t,e)}),this.$select.appendChild(t)})}createButton(){const e=document.createElement("button");e.classList.add("np-select__button"),e.type="button",e.addEventListener("click",()=>{this.open?this.handleClose():this.handleOpen()});const t=document.createElement("span");t.classList.add("text"),t.textContent=this.button.text||"",e.appendChild(t);const n=document.createElement("span");n.classList.add("icon"),n.innerHTML=E,e.appendChild(n);const i=document.createElement("span");return i.classList.add("loading"),i.innerHTML=N,e.appendChild(i),e}setButtonText(e){const t=this.$button.querySelector("span.text");t.textContent=e}setEmptyState(e){e.length?(this.$select.classList.remove("empty"),this.$placeholder.classList.remove("empty")):(this.$select.classList.add("empty"),this.$placeholder.classList.add("empty"))}handleOpen(){var t;((t=this.onOpen)==null?void 0:t.call(this,this))===!1&&this.setDisabled(!0),!this.disabled&&(this.$wrapper.classList.add("open"),this.$input.focus(),this.open=!0)}handleClose(){this.$wrapper.classList.remove("open"),this.open=!1}handleSelect(e,t){var n;this.$root.querySelectorAll(m.option).forEach(i=>i.classList.remove("selected")),e.classList.add("selected"),this.handleClose(),this.setButtonText(t.label),this.selected=t.value,this.value=t.value,this.$input.value=t.value,(n=this.onSelect)==null||n.call(this,t,this),this.validate()}handleInput(e){var n;const t=e.target.value;(n=this.onInput)==null||n.call(this,t,this),this.value=t,this.selected!==t&&(this.selected="",this.createSelectOptions())}}const x=s=>({label:s.Present,value:s.MainDescription}),_=s=>{var t;const e=s.getOption||x;return new $({root:s.root,apiKey:s.apiKey,button:{text:s.button.text},input:{name:s.input.name,placeholder:s.input.placeholder},placeholder:{text:((t=s==null?void 0:s.placeholder)==null?void 0:t.text)||"Не знайдено відділень, спробуйте вибрати інше місто."},onMounted:s.onMounted,onSelect:(n,i)=>p(exports,null,function*(){var l;i.setSelected(n.value),(l=s.onSelect)==null||l.call(s,n,i)}),onInput:(n,i)=>p(exports,null,function*(){if(n.length>=3){i.setLoading(!0);const l=yield i.api.getNpCities(n);i.setOptions(l),i.setLoading(!1)}}),getOption:e})},I=s=>({label:`№ ${s.Number}, ${s.ShortAddress}`,value:`№ ${s.Number}, ${s.ShortAddress}`}),M=s=>{var t;const e=s.getOption||I;return new $({root:s.root,apiKey:s.apiKey,button:{text:s.button.text},input:{name:s.input.name,placeholder:s.input.placeholder},placeholder:{text:((t=s==null?void 0:s.placeholder)==null?void 0:t.text)||"Нічого не знайдено."},onMounted:n=>p(exports,null,function*(){var i;if(s.city){n.setLoading(!0);const l=yield n.api.getNpWarehouses(s.city);n.setOptions(l),n.setLoading(!1),n.setOpen(!0)}(i=s.onMounted)==null||i.call(s,n)}),onSelect:(n,i)=>p(exports,null,function*(){var l;i.setSelected(n.value),(l=s.onSelect)==null||l.call(s,n,i)}),onInput:(n,i)=>p(exports,null,function*(){const l=i.getOptions();console.log(l,n);const d=O(l,n);console.log(d),i.setFiltered(d)}),onOpen:s.onOpen,getOption:e})},f={validateMultiple:s=>s.map(e=>e.validate()).every(e=>e)};exports.NpCitySelect=_;exports.NpWarehouseSelect=M;exports.utils=f; +(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".spinner{display:block;position:absolute;width:14px;height:14px}.spinner span{box-sizing:border-box;display:block;position:absolute;width:14px;height:14px;border:1px solid #fff;border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#000 transparent transparent transparent}.spinner span:nth-child(1){animation-delay:-.45s}.spinner span:nth-child(2){animation-delay:-.3s}.spinner span:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--np-select-error: tomato;--np-select-white: #fff;--np-select-text: #221f1f;--np-select-active: #e5f5ec;--np-select-disabled: #d2d2d2;--np-select-box-shadow: #221f1f40}.np-select{width:400px;position:relative;height:40px;z-index:2}.np-select *{box-sizing:border-box;font-family:sans-serif}.np-select__button{width:100%;height:40px;padding-left:12px;padding-right:40px;border:1px solid var(--np-select-disabled);border-radius:4px;background-color:var(--np-select-white);font-size:14px;line-height:36px;text-align:left;color:var(--np-select-text);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.np-select__button .icon{color:var(--np-select-text);position:absolute;top:50%;transform:translateY(-50%);right:12px;width:14px;height:9px}.np-select__button .icon svg{display:block;width:14px;height:9px}.np-select__button .loading{display:none;position:absolute;top:50%;transform:translateY(-50%);right:14px;height:14px;width:14px}.np-select__button:disabled{color:var(--np-select-disabled);cursor:default}.np-select__button:disabled svg{fill:var(--np-select-disabled)}.np-select__input{display:block;width:100%;height:40px;font-size:14px;background-color:var(--np-select-white);appearance:none;border-radius:8px;padding:0 12px;outline:none;margin:5px 0;position:absolute;top:40px;display:none}.np-select__box{max-height:210px;width:100%;overflow-y:scroll;box-shadow:0 2px 4px var(--np-select-box-shadow);background-color:var(--np-select-white);border:1px solid var(--np-select-disabled);border-radius:8px;position:absolute;top:90px;display:none}.np-select__placeholder{position:absolute;top:90px;left:0;width:100%;background:var(--np-select-white);text-align:center;padding:25px 10px;display:none;box-shadow:0 2px 4px var(--np-select-box-shadow);border-radius:8px;font-size:14px}.np-select__option{cursor:pointer;font-size:14px;padding:10px 16px;color:var(--np-select-text);outline:none}.np-select.open .np-select__box:not(.empty),.np-select.open .np-select__input{display:block}.np-select[aria-invalid=true] .np-select__button{border:1px solid var(--np-select-error);color:var(--np-select-error)}.np-select[aria-invalid=true] .np-select__button svg{fill:var(--np-select-error)}.np-select[aria-busy=true] .np-select__button .icon{display:none}.np-select[aria-busy=true] .np-select__button .loading{display:block}.np-select[aria-busy=true] .np-select__placeholder{top:45px}.np-select__option:hover,.np-select__option:focus,.np-select__option.selected{background:var(--np-select-active)}.np-select[aria-disabled=true] .np-select__placeholder{top:45px}.np-select.open .np-select__placeholder.empty{display:block}.np-select-root{position:relative;z-index:4}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})(); +"use strict";var y=Object.defineProperty;var v=(s,e,t)=>e in s?y(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var o=(s,e,t)=>(v(s,typeof e!="symbol"?e+"":e,t),t);var p=(s,e,t)=>new Promise((n,d)=>{var r=l=>{try{a(t.next(l))}catch(h){d(h)}},i=l=>{try{a(t.throw(l))}catch(h){d(h)}},a=l=>l.done?n(l.value):Promise.resolve(l.value).then(r,i);a((t=t.apply(s,e)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=(s,e=500)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout(()=>{s.apply(void 0,n)},e)}},L=(s,e)=>{document.addEventListener("click",t=>{t.currentTarget!==s&&!s.contains(t.target)&&e()})},O=(s,e)=>{const t=e.toLowerCase().split(" ");return s.filter(n=>t.every(d=>n.label.toLowerCase().includes(d)))},m="https://api.novaposhta.ua/v2.0/json/";class C{constructor(e){o(this,"API_URL");this.config=e,this.API_URL=m}getNpCities(e){return p(this,null,function*(){try{const t=yield fetch(this.API_URL,this.getConfig({modelName:"Address",calledMethod:"searchSettlements",methodProperties:{CityName:e,Limit:"30"}})),{data:n}=yield t.json();return n[0].Addresses}catch(t){return[]}})}getNpWarehouses(e){return p(this,null,function*(){try{const t=yield fetch(m,this.getConfig({modelName:"Address",calledMethod:"getWarehouses",methodProperties:{CityName:e}})),{data:n}=yield t.json();return n}catch(t){return[]}})}getConfig(e){return{body:JSON.stringify({apiKey:this.config.apiKey,modelName:e.modelName,calledMethod:e.calledMethod,methodProperties:e.methodProperties}),method:"POST"}}}const w=["Enter"],$={option:"np-select__option"},N='',E='';class S{constructor({root:e,button:t,input:n,options:d=[],getOption:r,onSelect:i=()=>{},onInput:a=()=>{},onOpen:l=()=>{},onMounted:h=()=>{},apiKey:u}){o(this,"options");o(this,"filtered");o(this,"open");o(this,"value");o(this,"button");o(this,"input");o(this,"placeholder");o(this,"selected");o(this,"disabled");o(this,"loading");o(this,"$root");o(this,"$wrapper");o(this,"$button");o(this,"$input");o(this,"$select");o(this,"$placeholder");o(this,"getOption");o(this,"onSelect");o(this,"onInput");o(this,"onOpen");o(this,"onMounted");o(this,"api");if(!e)throw new TypeError("NpSelect: root element is not passed or it is not valid");u||console.error("NpSelect: apiKey is not passed"),this.options=d.map(c=>r(c)),this.filtered=d.map(c=>r(c)),this.open=!1,this.value="",this.selected="",this.button=t,this.input=n,this.disabled=!1,this.loading=!1,this.$root=e,this.$wrapper=null,this.$button=null,this.$input=null,this.$select=null,this.$placeholder=null,this.getOption=r,this.onSelect=i,this.onInput=a,this.onOpen=l,this.onMounted=h,this.api=new C({apiKey:u}),this.build()}validate(){const e=!!this.selected;return this.disabled?!1:(this.$wrapper.ariaInvalid=`${!e}`,e)}setLoading(e){this.loading=e,this.$wrapper.ariaBusy=`${e}`}getLoading(){return this.loading}setSelected(e){this.selected=e,this.setValue(e)}getSelected(){return{value:this.selected,option:this.options.find(e=>e.value===this.selected)}}setValue(e=""){if(!e.length){this.selected="";return}this.filtered.some(t=>t.value===e)&&(this.selected=e,this.setButtonText(this.selected)),this.value=e,this.$input.value=e,this.createSelectOptions()}getValue(){return this.value}setOptions(e){this.options=e.map(t=>this.getOption(t)),this.filtered=e.map(t=>this.getOption(t)),this.setEmptyState(this.filtered),this.createSelectOptions()}getOptions(){return this.options}setFiltered(e){this.filtered=e,this.setEmptyState(this.filtered),this.createSelectOptions()}getFiltered(){return this.filtered}setOpen(e){e?this.handleOpen():this.handleClose(),this.open=e}setDisabled(e){this.disabled=e,this.$button.disabled=e,this.setButtonText(this.button.text||""),this.$wrapper.ariaDisabled=`${e}`}build(){var t;const e=this.createSelect();this.options&&this.createSelectOptions(),this.$wrapper=e,this.$root.replaceChildren(e),(t=this.onMounted)==null||t.call(this,this),L(this.$root,()=>this.setOpen(!1))}createSelect(){var a;const e=document.createElement("div");e.classList.add("np-select");const t=this.createButton();this.$button=t,e.appendChild(t);const n=document.createElement("input");n.classList.add("np-select__input"),n.name=this.input.name||"",n.placeholder=this.input.placeholder||"",n.autocomplete="off";const d=b(l=>this.handleInput(l));n.addEventListener("input",d),n.addEventListener("keydown",l=>{l.code==="ArrowDown"&&this.$select.querySelector($.option).focus()}),e.appendChild(n),this.$input=n;const r=document.createElement("div");r.classList.add("np-select__box","empty"),e.append(r),this.$select=r;const i=document.createElement("div");return i.classList.add("np-select__placeholder"),i.textContent=((a=this.placeholder)==null?void 0:a.text)||"Nothing found.",e.append(i),this.$placeholder=i,e}createSelectOptions(){this.$select.replaceChildren(),this.filtered.forEach(e=>{const t=document.createElement("div");t.classList.add("np-select__option"),t.textContent=e.label,t.tabIndex=0,e.value===this.value&&t.classList.add("selected"),t.addEventListener("click",()=>this.handleSelect(t,e)),t.addEventListener("keydown",n=>{w.includes(n.code)&&this.handleSelect(t,e)}),this.$select.appendChild(t)})}createButton(){const e=document.createElement("button");e.classList.add("np-select__button"),e.type="button",e.addEventListener("click",()=>{this.open?this.handleClose():this.handleOpen()});const t=document.createElement("span");t.classList.add("text"),t.textContent=this.button.text||"",e.appendChild(t);const n=document.createElement("span");n.classList.add("icon"),n.innerHTML=N,e.appendChild(n);const d=document.createElement("span");return d.classList.add("loading"),d.innerHTML=E,e.appendChild(d),e}setButtonText(e){const t=this.$button.querySelector("span.text");t.textContent=e}setEmptyState(e){e.length?(this.$select.classList.remove("empty"),this.$placeholder.classList.remove("empty")):(this.$select.classList.add("empty"),this.$placeholder.classList.add("empty"))}handleOpen(){var t;((t=this.onOpen)==null?void 0:t.call(this,this))===!1&&this.setDisabled(!0),!this.disabled&&(this.$wrapper.classList.add("open"),this.$input.focus(),this.open=!0)}handleClose(){this.$wrapper.classList.remove("open"),this.open=!1}handleSelect(e,t){var n;this.$root.querySelectorAll($.option).forEach(d=>d.classList.remove("selected")),e.classList.add("selected"),this.handleClose(),this.setButtonText(t.label),this.selected=t.value,this.value=t.value,this.$input.value=t.value,(n=this.onSelect)==null||n.call(this,t,this),this.validate()}handleInput(e){var n;const t=e.target.value;(n=this.onInput)==null||n.call(this,t,this),this.value=t,this.selected!==t&&(this.selected="",this.createSelectOptions())}}const f=s=>({label:s.Present,value:s.MainDescription}),x=s=>{var t,n,d,r;const e=s.getOption||f;return new S({root:s.root,apiKey:s.apiKey,button:{text:((t=s.button)==null?void 0:t.text)||"Select City"},input:{name:((n=s.input)==null?void 0:n.name)||"city",placeholder:((d=s.input)==null?void 0:d.placeholder)||"Select City"},placeholder:{text:((r=s.placeholder)==null?void 0:r.text)||"No cities found. Try to change your input."},onMounted:s.onMounted,onSelect:(i,a)=>p(exports,null,function*(){var l;a.setSelected(i.value),(l=s.onSelect)==null||l.call(s,i,a)}),onInput:(i,a)=>p(exports,null,function*(){if(i.length>=3){a.setLoading(!0);const l=yield a.api.getNpCities(i);a.setOptions(l),a.setLoading(!1)}}),getOption:e})},_=s=>({label:`№ ${s.Number}, ${s.ShortAddress}`,value:`№ ${s.Number}, ${s.ShortAddress}`}),g=s=>{var t,n,d,r;const e=s.getOption||_;return new S({root:s.root,apiKey:s.apiKey,button:{text:((t=s.button)==null?void 0:t.text)||"Select Warehouse"},input:{name:((n=s.input)==null?void 0:n.name)||"warehouse",placeholder:((d=s.input)==null?void 0:d.placeholder)||"Select Warehouse"},placeholder:{text:((r=s==null?void 0:s.placeholder)==null?void 0:r.text)||"Nothing found."},onMounted:i=>p(exports,null,function*(){var a;if(s.city){i.setLoading(!0);const l=yield i.api.getNpWarehouses(s.city);i.setOptions(l),i.setLoading(!1),i.setOpen(!0)}(a=s.onMounted)==null||a.call(s,i)}),onSelect:(i,a)=>p(exports,null,function*(){var l;a.setSelected(i.value),(l=s.onSelect)==null||l.call(s,i,a)}),onInput:(i,a)=>p(exports,null,function*(){const l=a.getOptions(),h=O(l,i);a.setFiltered(h)}),onOpen:s.onOpen,getOption:e})},I={validateMultiple:s=>s.map(e=>e.validate()).every(e=>e)};exports.NpCitySelect=x;exports.NpWarehouseSelect=g;exports.utils=I; diff --git a/build/np-select.umd.js b/build/np-select.umd.js index e57921d..3cc5b8c 100644 --- a/build/np-select.umd.js +++ b/build/np-select.umd.js @@ -1 +1,2 @@ -(function(o,d){typeof exports=="object"&&typeof module!="undefined"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(o=typeof globalThis!="undefined"?globalThis:o||self,d(o.NpSelect={}))})(this,function(o){"use strict";var A=Object.defineProperty;var T=(o,d,p)=>d in o?A(o,d,{enumerable:!0,configurable:!0,writable:!0,value:p}):o[d]=p;var a=(o,d,p)=>(T(o,typeof d!="symbol"?d+"":d,p),p);var c=(o,d,p)=>new Promise((b,S)=>{var v=r=>{try{u(p.next(r))}catch(m){S(m)}},L=r=>{try{u(p.throw(r))}catch(m){S(m)}},u=r=>r.done?b(r.value):Promise.resolve(r.value).then(v,L);u((p=p.apply(o,d)).next())});const d="",p=(s,e=500)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout(()=>{s.apply(void 0,n)},e)}},b=(s,e)=>{document.addEventListener("click",t=>{t.currentTarget!==s&&!s.contains(t.target)&&e()})},S=(s,e)=>{const t=e.toLowerCase().split(" ");return s.filter(n=>t.every(i=>n.label.toLowerCase().includes(i)))},v="https://api.novaposhta.ua/v2.0/json/";class L{constructor(e){a(this,"API_URL");this.config=e,this.API_URL=v}getNpCities(e){return c(this,null,function*(){try{const t=yield fetch(this.API_URL,this.getConfig({modelName:"Address",calledMethod:"searchSettlements",methodProperties:{CityName:e,Limit:"30"}})),{data:n}=yield t.json();return n[0].Addresses}catch(t){return[]}})}getNpWarehouses(e){return c(this,null,function*(){try{const t=yield fetch(v,this.getConfig({modelName:"Address",calledMethod:"getWarehouses",methodProperties:{CityName:e}})),{data:n}=yield t.json();return n}catch(t){return[]}})}getConfig(e){return{body:JSON.stringify({apiKey:this.config.apiKey,modelName:e.modelName,calledMethod:e.calledMethod,methodProperties:e.methodProperties}),method:"POST"}}}const u=["Enter"],r={option:"np-select__option"},m='',w='';class C{constructor({root:e,button:t,input:n,options:i=[],getOption:l,onSelect:h=()=>{},onInput:y=()=>{},onOpen:$=()=>{},onMounted:I=()=>{},apiKey:M}){a(this,"options");a(this,"filtered");a(this,"open");a(this,"value");a(this,"button");a(this,"input");a(this,"placeholder");a(this,"selected");a(this,"disabled");a(this,"loading");a(this,"$root");a(this,"$wrapper");a(this,"$button");a(this,"$input");a(this,"$select");a(this,"$placeholder");a(this,"getOption");a(this,"onSelect");a(this,"onInput");a(this,"onOpen");a(this,"onMounted");a(this,"api");this.options=i.map(O=>l(O)),this.filtered=i.map(O=>l(O)),this.open=!1,this.value="",this.selected="",this.button=t,this.input=n,this.disabled=!1,this.loading=!1,this.$root=e,this.$wrapper=null,this.$button=null,this.$input=null,this.$select=null,this.$placeholder=null,this.getOption=l,this.onSelect=h,this.onInput=y,this.onOpen=$,this.onMounted=I,this.api=new L({apiKey:M}),this.build()}validate(){const e=!!this.selected;return this.disabled?!1:(this.$wrapper.ariaInvalid=`${!e}`,e)}setLoading(e){this.loading=e,this.$wrapper.ariaBusy=`${e}`}getLoading(){return this.loading}setSelected(e){this.selected=e,this.setValue(e)}getSelected(){return{value:this.selected,option:this.options.find(e=>e.value===this.selected)}}setValue(e=""){if(!e.length){this.selected="";return}this.filtered.some(t=>t.value===e)&&(this.selected=e,this.setButtonText(this.selected)),this.value=e,this.$input.value=e,this.createSelectOptions()}getValue(){return this.value}setOptions(e){this.options=e.map(t=>this.getOption(t)),this.filtered=e.map(t=>this.getOption(t)),this.setEmptyState(this.filtered),this.createSelectOptions()}getOptions(){return this.options}setFiltered(e){this.filtered=e,this.setEmptyState(this.filtered),this.createSelectOptions()}getFiltered(){return this.filtered}setOpen(e){e?this.handleOpen():this.handleClose(),this.open=e}setDisabled(e){this.disabled=e,this.$button.disabled=e,this.setButtonText(this.button.text||""),this.$wrapper.ariaDisabled=`${e}`}build(){var t;const e=this.createSelect();this.options&&this.createSelectOptions(),this.$wrapper=e,this.$root.replaceChildren(e),(t=this.onMounted)==null||t.call(this,this),b(this.$root,()=>this.setOpen(!1))}createSelect(){var y;const e=document.createElement("div");e.classList.add("np-select");const t=this.createButton();this.$button=t,e.appendChild(t);const n=document.createElement("input");n.classList.add("np-select__input"),n.name=this.input.name||"",n.placeholder=this.input.placeholder||"",n.autocomplete="off";const i=p($=>this.handleInput($));n.addEventListener("input",i),n.addEventListener("keydown",$=>{$.code==="ArrowDown"&&this.$select.querySelector(r.option).focus()}),e.appendChild(n),this.$input=n;const l=document.createElement("div");l.classList.add("np-select__box","empty"),e.append(l),this.$select=l;const h=document.createElement("div");return h.classList.add("np-select__placeholder"),h.textContent=((y=this.placeholder)==null?void 0:y.text)||"Nothing found.",e.append(h),this.$placeholder=h,e}createSelectOptions(){this.$select.replaceChildren(),this.filtered.forEach(e=>{const t=document.createElement("div");t.classList.add("np-select__option"),t.textContent=e.label,t.tabIndex=0,e.value===this.value&&t.classList.add("selected"),t.addEventListener("click",()=>this.handleSelect(t,e)),t.addEventListener("keydown",n=>{u.includes(n.code)&&this.handleSelect(t,e)}),this.$select.appendChild(t)})}createButton(){const e=document.createElement("button");e.classList.add("np-select__button"),e.type="button",e.addEventListener("click",()=>{this.open?this.handleClose():this.handleOpen()});const t=document.createElement("span");t.classList.add("text"),t.textContent=this.button.text||"",e.appendChild(t);const n=document.createElement("span");n.classList.add("icon"),n.innerHTML=m,e.appendChild(n);const i=document.createElement("span");return i.classList.add("loading"),i.innerHTML=w,e.appendChild(i),e}setButtonText(e){const t=this.$button.querySelector("span.text");t.textContent=e}setEmptyState(e){e.length?(this.$select.classList.remove("empty"),this.$placeholder.classList.remove("empty")):(this.$select.classList.add("empty"),this.$placeholder.classList.add("empty"))}handleOpen(){var t;((t=this.onOpen)==null?void 0:t.call(this,this))===!1&&this.setDisabled(!0),!this.disabled&&(this.$wrapper.classList.add("open"),this.$input.focus(),this.open=!0)}handleClose(){this.$wrapper.classList.remove("open"),this.open=!1}handleSelect(e,t){var n;this.$root.querySelectorAll(r.option).forEach(i=>i.classList.remove("selected")),e.classList.add("selected"),this.handleClose(),this.setButtonText(t.label),this.selected=t.value,this.value=t.value,this.$input.value=t.value,(n=this.onSelect)==null||n.call(this,t,this),this.validate()}handleInput(e){var n;const t=e.target.value;(n=this.onInput)==null||n.call(this,t,this),this.value=t,this.selected!==t&&(this.selected="",this.createSelectOptions())}}const x=s=>({label:s.Present,value:s.MainDescription}),f=s=>{var t;const e=s.getOption||x;return new C({root:s.root,apiKey:s.apiKey,button:{text:s.button.text},input:{name:s.input.name,placeholder:s.input.placeholder},placeholder:{text:((t=s==null?void 0:s.placeholder)==null?void 0:t.text)||"Не знайдено відділень, спробуйте вибрати інше місто."},onMounted:s.onMounted,onSelect:(n,i)=>c(this,null,function*(){var l;i.setSelected(n.value),(l=s.onSelect)==null||l.call(s,n,i)}),onInput:(n,i)=>c(this,null,function*(){if(n.length>=3){i.setLoading(!0);const l=yield i.api.getNpCities(n);i.setOptions(l),i.setLoading(!1)}}),getOption:e})},N=s=>({label:`№ ${s.Number}, ${s.ShortAddress}`,value:`№ ${s.Number}, ${s.ShortAddress}`}),E=s=>{var t;const e=s.getOption||N;return new C({root:s.root,apiKey:s.apiKey,button:{text:s.button.text},input:{name:s.input.name,placeholder:s.input.placeholder},placeholder:{text:((t=s==null?void 0:s.placeholder)==null?void 0:t.text)||"Нічого не знайдено."},onMounted:n=>c(this,null,function*(){var i;if(s.city){n.setLoading(!0);const l=yield n.api.getNpWarehouses(s.city);n.setOptions(l),n.setLoading(!1),n.setOpen(!0)}(i=s.onMounted)==null||i.call(s,n)}),onSelect:(n,i)=>c(this,null,function*(){var l;i.setSelected(n.value),(l=s.onSelect)==null||l.call(s,n,i)}),onInput:(n,i)=>c(this,null,function*(){const l=i.getOptions();console.log(l,n);const h=S(l,n);console.log(h),i.setFiltered(h)}),onOpen:s.onOpen,getOption:e})},_={validateMultiple:s=>s.map(e=>e.validate()).every(e=>e)};o.NpCitySelect=f,o.NpWarehouseSelect=E,o.utils=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}); +(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".spinner{display:block;position:absolute;width:14px;height:14px}.spinner span{box-sizing:border-box;display:block;position:absolute;width:14px;height:14px;border:1px solid #fff;border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#000 transparent transparent transparent}.spinner span:nth-child(1){animation-delay:-.45s}.spinner span:nth-child(2){animation-delay:-.3s}.spinner span:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--np-select-error: tomato;--np-select-white: #fff;--np-select-text: #221f1f;--np-select-active: #e5f5ec;--np-select-disabled: #d2d2d2;--np-select-box-shadow: #221f1f40}.np-select{width:400px;position:relative;height:40px;z-index:2}.np-select *{box-sizing:border-box;font-family:sans-serif}.np-select__button{width:100%;height:40px;padding-left:12px;padding-right:40px;border:1px solid var(--np-select-disabled);border-radius:4px;background-color:var(--np-select-white);font-size:14px;line-height:36px;text-align:left;color:var(--np-select-text);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.np-select__button .icon{color:var(--np-select-text);position:absolute;top:50%;transform:translateY(-50%);right:12px;width:14px;height:9px}.np-select__button .icon svg{display:block;width:14px;height:9px}.np-select__button .loading{display:none;position:absolute;top:50%;transform:translateY(-50%);right:14px;height:14px;width:14px}.np-select__button:disabled{color:var(--np-select-disabled);cursor:default}.np-select__button:disabled svg{fill:var(--np-select-disabled)}.np-select__input{display:block;width:100%;height:40px;font-size:14px;background-color:var(--np-select-white);appearance:none;border-radius:8px;padding:0 12px;outline:none;margin:5px 0;position:absolute;top:40px;display:none}.np-select__box{max-height:210px;width:100%;overflow-y:scroll;box-shadow:0 2px 4px var(--np-select-box-shadow);background-color:var(--np-select-white);border:1px solid var(--np-select-disabled);border-radius:8px;position:absolute;top:90px;display:none}.np-select__placeholder{position:absolute;top:90px;left:0;width:100%;background:var(--np-select-white);text-align:center;padding:25px 10px;display:none;box-shadow:0 2px 4px var(--np-select-box-shadow);border-radius:8px;font-size:14px}.np-select__option{cursor:pointer;font-size:14px;padding:10px 16px;color:var(--np-select-text);outline:none}.np-select.open .np-select__box:not(.empty),.np-select.open .np-select__input{display:block}.np-select[aria-invalid=true] .np-select__button{border:1px solid var(--np-select-error);color:var(--np-select-error)}.np-select[aria-invalid=true] .np-select__button svg{fill:var(--np-select-error)}.np-select[aria-busy=true] .np-select__button .icon{display:none}.np-select[aria-busy=true] .np-select__button .loading{display:block}.np-select[aria-busy=true] .np-select__placeholder{top:45px}.np-select__option:hover,.np-select__option:focus,.np-select__option.selected{background:var(--np-select-active)}.np-select[aria-disabled=true] .np-select__placeholder{top:45px}.np-select.open .np-select__placeholder.empty{display:block}.np-select-root{position:relative;z-index:4}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})(); +(function(r,p){typeof exports=="object"&&typeof module!="undefined"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(r=typeof globalThis!="undefined"?globalThis:r||self,p(r.NpSelect={}))})(this,function(r){"use strict";var M=Object.defineProperty;var T=(r,p,c)=>p in r?M(r,p,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[p]=c;var a=(r,p,c)=>(T(r,typeof p!="symbol"?p+"":p,c),c);var m=(r,p,c)=>new Promise((b,y)=>{var v=u=>{try{$(c.next(u))}catch(S){y(S)}},L=u=>{try{$(c.throw(u))}catch(S){y(S)}},$=u=>u.done?b(u.value):Promise.resolve(u.value).then(v,L);$((c=c.apply(r,p)).next())});const p="",c=(s,e=500)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout(()=>{s.apply(void 0,n)},e)}},b=(s,e)=>{document.addEventListener("click",t=>{t.currentTarget!==s&&!s.contains(t.target)&&e()})},y=(s,e)=>{const t=e.toLowerCase().split(" ");return s.filter(n=>t.every(o=>n.label.toLowerCase().includes(o)))},v="https://api.novaposhta.ua/v2.0/json/";class L{constructor(e){a(this,"API_URL");this.config=e,this.API_URL=v}getNpCities(e){return m(this,null,function*(){try{const t=yield fetch(this.API_URL,this.getConfig({modelName:"Address",calledMethod:"searchSettlements",methodProperties:{CityName:e,Limit:"30"}})),{data:n}=yield t.json();return n[0].Addresses}catch(t){return[]}})}getNpWarehouses(e){return m(this,null,function*(){try{const t=yield fetch(v,this.getConfig({modelName:"Address",calledMethod:"getWarehouses",methodProperties:{CityName:e}})),{data:n}=yield t.json();return n}catch(t){return[]}})}getConfig(e){return{body:JSON.stringify({apiKey:this.config.apiKey,modelName:e.modelName,calledMethod:e.calledMethod,methodProperties:e.methodProperties}),method:"POST"}}}const $=["Enter"],u={option:"np-select__option"},S='',N='';class f{constructor({root:e,button:t,input:n,options:o=[],getOption:h,onSelect:i=()=>{},onInput:l=()=>{},onOpen:d=()=>{},onMounted:O=()=>{},apiKey:w}){a(this,"options");a(this,"filtered");a(this,"open");a(this,"value");a(this,"button");a(this,"input");a(this,"placeholder");a(this,"selected");a(this,"disabled");a(this,"loading");a(this,"$root");a(this,"$wrapper");a(this,"$button");a(this,"$input");a(this,"$select");a(this,"$placeholder");a(this,"getOption");a(this,"onSelect");a(this,"onInput");a(this,"onOpen");a(this,"onMounted");a(this,"api");if(!e)throw new TypeError("NpSelect: root element is not passed or it is not valid");w||console.error("NpSelect: apiKey is not passed"),this.options=o.map(C=>h(C)),this.filtered=o.map(C=>h(C)),this.open=!1,this.value="",this.selected="",this.button=t,this.input=n,this.disabled=!1,this.loading=!1,this.$root=e,this.$wrapper=null,this.$button=null,this.$input=null,this.$select=null,this.$placeholder=null,this.getOption=h,this.onSelect=i,this.onInput=l,this.onOpen=d,this.onMounted=O,this.api=new L({apiKey:w}),this.build()}validate(){const e=!!this.selected;return this.disabled?!1:(this.$wrapper.ariaInvalid=`${!e}`,e)}setLoading(e){this.loading=e,this.$wrapper.ariaBusy=`${e}`}getLoading(){return this.loading}setSelected(e){this.selected=e,this.setValue(e)}getSelected(){return{value:this.selected,option:this.options.find(e=>e.value===this.selected)}}setValue(e=""){if(!e.length){this.selected="";return}this.filtered.some(t=>t.value===e)&&(this.selected=e,this.setButtonText(this.selected)),this.value=e,this.$input.value=e,this.createSelectOptions()}getValue(){return this.value}setOptions(e){this.options=e.map(t=>this.getOption(t)),this.filtered=e.map(t=>this.getOption(t)),this.setEmptyState(this.filtered),this.createSelectOptions()}getOptions(){return this.options}setFiltered(e){this.filtered=e,this.setEmptyState(this.filtered),this.createSelectOptions()}getFiltered(){return this.filtered}setOpen(e){e?this.handleOpen():this.handleClose(),this.open=e}setDisabled(e){this.disabled=e,this.$button.disabled=e,this.setButtonText(this.button.text||""),this.$wrapper.ariaDisabled=`${e}`}build(){var t;const e=this.createSelect();this.options&&this.createSelectOptions(),this.$wrapper=e,this.$root.replaceChildren(e),(t=this.onMounted)==null||t.call(this,this),b(this.$root,()=>this.setOpen(!1))}createSelect(){var l;const e=document.createElement("div");e.classList.add("np-select");const t=this.createButton();this.$button=t,e.appendChild(t);const n=document.createElement("input");n.classList.add("np-select__input"),n.name=this.input.name||"",n.placeholder=this.input.placeholder||"",n.autocomplete="off";const o=c(d=>this.handleInput(d));n.addEventListener("input",o),n.addEventListener("keydown",d=>{d.code==="ArrowDown"&&this.$select.querySelector(u.option).focus()}),e.appendChild(n),this.$input=n;const h=document.createElement("div");h.classList.add("np-select__box","empty"),e.append(h),this.$select=h;const i=document.createElement("div");return i.classList.add("np-select__placeholder"),i.textContent=((l=this.placeholder)==null?void 0:l.text)||"Nothing found.",e.append(i),this.$placeholder=i,e}createSelectOptions(){this.$select.replaceChildren(),this.filtered.forEach(e=>{const t=document.createElement("div");t.classList.add("np-select__option"),t.textContent=e.label,t.tabIndex=0,e.value===this.value&&t.classList.add("selected"),t.addEventListener("click",()=>this.handleSelect(t,e)),t.addEventListener("keydown",n=>{$.includes(n.code)&&this.handleSelect(t,e)}),this.$select.appendChild(t)})}createButton(){const e=document.createElement("button");e.classList.add("np-select__button"),e.type="button",e.addEventListener("click",()=>{this.open?this.handleClose():this.handleOpen()});const t=document.createElement("span");t.classList.add("text"),t.textContent=this.button.text||"",e.appendChild(t);const n=document.createElement("span");n.classList.add("icon"),n.innerHTML=S,e.appendChild(n);const o=document.createElement("span");return o.classList.add("loading"),o.innerHTML=N,e.appendChild(o),e}setButtonText(e){const t=this.$button.querySelector("span.text");t.textContent=e}setEmptyState(e){e.length?(this.$select.classList.remove("empty"),this.$placeholder.classList.remove("empty")):(this.$select.classList.add("empty"),this.$placeholder.classList.add("empty"))}handleOpen(){var t;((t=this.onOpen)==null?void 0:t.call(this,this))===!1&&this.setDisabled(!0),!this.disabled&&(this.$wrapper.classList.add("open"),this.$input.focus(),this.open=!0)}handleClose(){this.$wrapper.classList.remove("open"),this.open=!1}handleSelect(e,t){var n;this.$root.querySelectorAll(u.option).forEach(o=>o.classList.remove("selected")),e.classList.add("selected"),this.handleClose(),this.setButtonText(t.label),this.selected=t.value,this.value=t.value,this.$input.value=t.value,(n=this.onSelect)==null||n.call(this,t,this),this.validate()}handleInput(e){var n;const t=e.target.value;(n=this.onInput)==null||n.call(this,t,this),this.value=t,this.selected!==t&&(this.selected="",this.createSelectOptions())}}const x=s=>({label:s.Present,value:s.MainDescription}),E=s=>{var t,n,o,h;const e=s.getOption||x;return new f({root:s.root,apiKey:s.apiKey,button:{text:((t=s.button)==null?void 0:t.text)||"Select City"},input:{name:((n=s.input)==null?void 0:n.name)||"city",placeholder:((o=s.input)==null?void 0:o.placeholder)||"Select City"},placeholder:{text:((h=s.placeholder)==null?void 0:h.text)||"No cities found. Try to change your input."},onMounted:s.onMounted,onSelect:(i,l)=>m(this,null,function*(){var d;l.setSelected(i.value),(d=s.onSelect)==null||d.call(s,i,l)}),onInput:(i,l)=>m(this,null,function*(){if(i.length>=3){l.setLoading(!0);const d=yield l.api.getNpCities(i);l.setOptions(d),l.setLoading(!1)}}),getOption:e})},_=s=>({label:`№ ${s.Number}, ${s.ShortAddress}`,value:`№ ${s.Number}, ${s.ShortAddress}`}),g=s=>{var t,n,o,h;const e=s.getOption||_;return new f({root:s.root,apiKey:s.apiKey,button:{text:((t=s.button)==null?void 0:t.text)||"Select Warehouse"},input:{name:((n=s.input)==null?void 0:n.name)||"warehouse",placeholder:((o=s.input)==null?void 0:o.placeholder)||"Select Warehouse"},placeholder:{text:((h=s==null?void 0:s.placeholder)==null?void 0:h.text)||"Nothing found."},onMounted:i=>m(this,null,function*(){var l;if(s.city){i.setLoading(!0);const d=yield i.api.getNpWarehouses(s.city);i.setOptions(d),i.setLoading(!1),i.setOpen(!0)}(l=s.onMounted)==null||l.call(s,i)}),onSelect:(i,l)=>m(this,null,function*(){var d;l.setSelected(i.value),(d=s.onSelect)==null||d.call(s,i,l)}),onInput:(i,l)=>m(this,null,function*(){const d=l.getOptions(),O=y(d,i);l.setFiltered(O)}),onOpen:s.onOpen,getOption:e})},I={validateMultiple:s=>s.map(e=>e.validate()).every(e=>e)};r.NpCitySelect=E,r.NpWarehouseSelect=g,r.utils=I,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}); diff --git a/package-lock.json b/package-lock.json index 380271c..cde4886 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { - "@storybook/addon-actions": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", "@storybook/addon-links": "^7.1.0", @@ -25,6 +24,7 @@ "storybook": "^7.1.0", "typescript": "^5.1.6", "vite": "^4.4.6", + "vite-plugin-css-injected-by-js": "^3.2.1", "vite-plugin-static-copy": "^0.17.0" } }, @@ -11741,6 +11741,15 @@ } } }, + "node_modules/vite-plugin-css-injected-by-js": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.2.1.tgz", + "integrity": "sha512-8UQWy7tcmgwkaUKYfbj/8GOeAD0RPG2tdetAGg7WikWC8IEtNrovs8RRuLjFqdRqORT1XxchBB5tPl6xO/H95g==", + "dev": true, + "peerDependencies": { + "vite": ">2.0.0-0" + } + }, "node_modules/vite-plugin-static-copy": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.17.0.tgz", diff --git a/package.json b/package.json index ecec51b..46b6b00 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "np-select", "description": "Nova Poshta city and warehouse selects.", - "version": "1.0.0", + "version": "1.0.2", "main": "build/np-select.js", "scripts": { "build": "tsc && vite --config vite.config.js build && npm run build:dts", @@ -45,6 +45,7 @@ "storybook": "^7.1.0", "typescript": "^5.1.6", "vite": "^4.4.6", + "vite-plugin-css-injected-by-js": "^3.2.1", "vite-plugin-static-copy": "^0.17.0" } } diff --git a/src/base-select/index.ts b/src/base-select/index.ts index 4d23d4d..7505718 100644 --- a/src/base-select/index.ts +++ b/src/base-select/index.ts @@ -50,6 +50,16 @@ export class NpBaseSelect { onMounted = () => {}, apiKey, }: NpBaseSelectConfig) { + if (!root) { + throw new TypeError( + 'NpSelect: root element is not passed or it is not valid', + ); + } + + if (!apiKey) { + console.error('NpSelect: apiKey is not passed'); + } + this.options = options.map(item => getOption(item)); this.filtered = options.map(item => getOption(item)); this.open = false; diff --git a/src/index.ts b/src/index.ts index 071e9c6..2180165 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,7 +18,7 @@ export const NpCitySelect = (config: NpCitySelectConfig) => { text: config.button?.text || 'Select City', }, input: { - name: config.input?.name, + name: config.input?.name || 'city', placeholder: config.input?.placeholder || 'Select City', }, placeholder: { @@ -57,10 +57,10 @@ export const NpWarehouseSelect = (config: NpWarehouseSelectConfig) => { root: config.root, apiKey: config.apiKey, button: { - text: config.button.text || 'Select Warehouse', + text: config.button?.text || 'Select Warehouse', }, input: { - name: config.input.name, + name: config.input?.name || 'warehouse', placeholder: config.input?.placeholder || 'Select Warehouse', }, placeholder: { diff --git a/src/types/base-select.ts b/src/types/base-select.ts index 23d33d0..5c1f454 100644 --- a/src/types/base-select.ts +++ b/src/types/base-select.ts @@ -11,11 +11,11 @@ export interface NpBaseSelectOption { type NpBaseSelectSharedProperties = { root: HTMLElement; - button: { + button?: { text?: string; icon?: string; }; - input: { + input?: { name?: string; placeholder?: string; }; @@ -23,7 +23,7 @@ type NpBaseSelectSharedProperties = { text: string; }; options?: NpBaseSelectOption[]; - apiKey: string; + apiKey?: string; }; type NpBaseSelectSharedMethods = { diff --git a/vite.config.js b/vite.config.js index 373ede8..d833d02 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,6 @@ import path from 'path'; import { defineConfig } from 'vite'; +import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; export default defineConfig({ build: { @@ -19,6 +20,7 @@ export default defineConfig({ }, }, }, + plugins: [cssInjectedByJsPlugin()], resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], },