select-pure - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.2

dist/index.js

@@ -159,2 +159,2 @@ /**
  */
-(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const X={};class Y extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),i=[];s.forEach((e=>i.unshift(e))),this._styles=i}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!J){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new G(String(t),K)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?J?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==X&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return X}}Y.finalized=!0,Y.render=(e,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=U.has(s),o=z&&11===s.nodeType&&!!s.host,a=o&&!L.has(n),l=a?document.createDocumentFragment():s;if(((e,s,i)=>{let n=U.get(s);void 0===n&&(t(s,s.firstChild),U.set(s,n=new N(Object.assign({templateFactory:V},i))),n.appendInto(s)),n.setValue(e),n.commit()})(e,l,Object.assign({templateFactory:j(n)},i)),a){const e=U.get(l);U.delete(l);const i=e.value instanceof g?e.value.template:void 0;F(n,l,i),t(s,s.firstChild),s.appendChild(l),U.set(s,e)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Z=13,ee=9;customElements.define("select-pure",class extends Y{static get styles(){return Q`.select-wrapper{position:relative}.select-wrapper:hover .select{z-index:2}.select{bottom:0;display:flex;flex-wrap:wrap;left:0;position:absolute;right:0;top:0;width:var(--select-width,100%)}.label:focus{outline:2px solid #e3e3e3}.label:after{border-bottom:1px solid var(--color,#000);border-right:1px solid var(--color,#000);box-sizing:border-box;content:"";display:block;height:10px;margin-top:-2px;transform:rotate(45deg);width:10px}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;opacity:0;z-index:1}.label,select{align-items:center;background-color:var(--background-color,#fff);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);justify-content:space-between;padding:var(--padding,0 10px);width:100%}.dropdown{background-color:var(--border-color,#000);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);display:none;flex-direction:column;gap:var(--border-width,1px);justify-content:space-between;max-height:calc(var(--select-height,44px) * 4 + var(--border-width,1px) * 3);overflow-y:scroll;position:absolute;top:calc(var(--select-height,44px) + var(--dropdown-gap,0px));width:calc(100% - var(--border-width,1px) * 2);z-index:var(--dropdown-z-index,2)}.dropdown.visible{display:flex}.disabled{background-color:var(--disabled-background-color,#bdc3c7);color:var(--disabled-color,#ecf0f1);cursor:default}`}static get properties(){return{options:{type:Array},visible:{type:Boolean},selectedOption:{type:Object},disabled:{type:Boolean},value:{type:String},name:{type:String},formName:{type:String}}}constructor(){super(),this.close=this.close.bind(this),this.onSelect=this.onSelect.bind(this),this.processOptions=this.processOptions.bind(this),this.watchNativeSelect=this.watchNativeSelect.bind(this),this.processForm=this.processForm.bind(this),this.options=[],this.visible=!1,this.selectedOption={},this.disabled=null!==this.getAttribute("disabled"),this.name=this.getAttribute("name"),this.id=this.getAttribute("id"),this.formName=this.name||this.id,this.value=null}firstUpdated(){this.processOptions(),this.watchNativeSelect(),this.processForm()}get selectedIndex(){return this.nativeSelect.selectedIndex}set selectedIndex(e){this.onSelect(this.options[e].value)}open(){this.disabled||(document.body.removeEventListener("click",this.close),this.visible=!0,setTimeout((()=>{document.body.addEventListener("click",this.close)})))}close(){this.visible=!1,document.body.removeEventListener("click",this.close)}enable(){this.disabled=!1}disable(){this.disabled=!0}processForm(){this.form=this.closest("form"),this.form&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}watchNativeSelect(){this.nativeSelect.addEventListener("change",(()=>{this.selectedIndex=this.nativeSelect.selectedIndex}))}processOptions(){this.nativeSelect=this.shadowRoot.querySelector("select");const e=this.querySelectorAll("option-pure");for(let t=0;t<e.length;t++){const{value:s,label:i,select:n,unselect:r,selected:o,hidden:a,disabled:l}=e[t].getOption();this.options.push({label:i,value:s,select:n,unselect:r,hidden:a,disabled:l}),o&&(this.selectedOption=e[t],this.nativeSelect.selectedIndex=t),e[t].onSelect=this.onSelect,t!==e.length-1||this.selectedOption.value||(this.selectedOption=e[0],e[0].select(),this.nativeSelect.selectedIndex=t)}}onSelect(e){for(let t=0;t<this.options.length;t++){const s=this.options[t];s.value!==e?s.unselect():this.selectOption(s,t)}if(this.form){this.hiddenInput.value=this.value;const e=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(e)}this.visible=!1}selectOption(e,t){this.selectedOption=e,this.value=e.value,e.select(),this.nativeSelect.selectedIndex=t,this.afterSelect()}afterSelect(){this.dispatchEvent(new Event("change"))}renderOptions(){return this.options.map((({value:e,label:t,hidden:s,disabled:i})=>{const n=this.selectedOption.value===e;return R`<option value="${e}" ?selected="${n}" ?hidden="${s}" ?disabled="${i}">${t}</option>`}))}handleKeyPress(e){e.which!==Z&&e.which!==ee||this.open()}render(){return R`<div class="select-wrapper"><select ?disabled="${this.disabled}" name="${this.name}" id="${this.id}">${this.renderOptions()}</select><div class="select"><div class="label${this.disabled?" disabled":""}" @click="${this.visible?this.close:this.open}" @keydown="${this.handleKeyPress}" tabindex="0">${this.selectedOption.label}</div><div class="dropdown${this.visible?" visible":""}"><slot></slot></div></div></div>`}}),customElements.define("option-pure",class extends Y{static get styles(){return Q`.option{align-items:center;background-color:var(--background-color,#fff);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);height:var(--select-height,44px);justify-content:flex-start;padding:var(--padding,0 10px);width:100%}.option:focus,.option:not(.disabled):not(.selected):hover{background-color:var(--hover-background-color,#e3e3e3);color:var(--hover-color,#000)}.selected{background-color:var(--selected-background-color,#e3e3e3);color:var(--selected-color,#000)}.disabled{background-color:var(--disabled-background-color,#e3e3e3);color:var(--disabled-color,#000);cursor:default}`}static get properties(){return{selected:{type:Boolean},label:{type:String},value:{type:String},disabled:{type:Boolean}}}constructor(){super(),this.onClick=this.onClick.bind(this),this.select=this.select.bind(this),this.unselect=this.unselect.bind(this),this.getOption=this.getOption.bind(this),this.label=this.textContent||this.getAttribute("label"),this.value=this.getAttribute("value"),this.selected=null!==this.getAttribute("selected"),this.disabled=null!==this.getAttribute("disabled")}getOption(){return{label:this.label,value:this.value,select:this.select,unselect:this.unselect,selected:this.selected,disabled:this.disabled}}select(){this.selected=!0}unselect(){this.selected=!1}onClick(e){this.onSelect&&!this.disabled?this.onSelect(this.value):e.stopPropagation()}handleKeyPress(e){e.which===Z&&this.onClick()}render(){const e=["option"];return this.selected&&e.push("selected"),this.disabled&&e.push("disabled"),R`<div class="${e.join(" ")}" @click="${this.onClick}" @keydown="${this.handleKeyPress}" tabindex="0">${this.label}</div>`}});
+(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const X={};class Y extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),i=[];s.forEach((e=>i.unshift(e))),this._styles=i}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!J){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new G(String(t),K)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?J?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==X&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return X}}Y.finalized=!0,Y.render=(e,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=U.has(s),o=z&&11===s.nodeType&&!!s.host,a=o&&!L.has(n),l=a?document.createDocumentFragment():s;if(((e,s,i)=>{let n=U.get(s);void 0===n&&(t(s,s.firstChild),U.set(s,n=new N(Object.assign({templateFactory:V},i))),n.appendInto(s)),n.setValue(e),n.commit()})(e,l,Object.assign({templateFactory:j(n)},i)),a){const e=U.get(l);U.delete(l);const i=e.value instanceof g?e.value.template:void 0;F(n,l,i),t(s,s.firstChild),s.appendChild(l),U.set(s,e)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Z=13,ee=9;customElements.define("select-pure",class extends Y{static get styles(){return Q`.select-wrapper{position:relative}.select-wrapper:hover .select{z-index:2}.select{bottom:0;display:flex;flex-wrap:wrap;left:0;position:absolute;right:0;top:0;width:var(--select-width,100%)}.label:focus{outline:var(--select-outline,2px solid #e3e3e3)}.label:after{border-bottom:1px solid var(--color,#000);border-right:1px solid var(--color,#000);box-sizing:border-box;content:"";display:block;height:10px;margin-top:-2px;transform:rotate(45deg);transition:.2s ease-in-out;width:10px}.label.visible:after{margin-bottom:-4px;margin-top:0;transform:rotate(225deg)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;opacity:0;z-index:1}.label,select{align-items:center;background-color:var(--background-color,#fff);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);justify-content:space-between;padding:var(--padding,0 10px);width:100%}.dropdown{background-color:var(--border-color,#000);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);display:none;flex-direction:column;gap:var(--border-width,1px);justify-content:space-between;max-height:calc(var(--select-height,44px) * 4 + var(--border-width,1px) * 3);overflow-y:scroll;position:absolute;top:calc(var(--select-height,44px) + var(--dropdown-gap,0px));width:calc(100% - var(--border-width,1px) * 2);z-index:var(--dropdown-z-index,2)}.dropdown.visible{display:flex}.disabled{background-color:var(--disabled-background-color,#bdc3c7);color:var(--disabled-color,#ecf0f1);cursor:default}`}static get properties(){return{options:{type:Array},visible:{type:Boolean},selectedOption:{type:Object},disabled:{type:Boolean},value:{type:String},name:{type:String},formName:{type:String}}}constructor(){super(),this.close=this.close.bind(this),this.onSelect=this.onSelect.bind(this),this.processOptions=this.processOptions.bind(this),this.watchNativeSelect=this.watchNativeSelect.bind(this),this.processForm=this.processForm.bind(this),this.options=[],this.visible=!1,this.selectedOption={},this.disabled=null!==this.getAttribute("disabled"),this.name=this.getAttribute("name"),this.id=this.getAttribute("id"),this.formName=this.name||this.id,this.value=null}firstUpdated(){this.processOptions(),this.watchNativeSelect(),this.processForm()}get selectedIndex(){return this.nativeSelect.selectedIndex}set selectedIndex(e){this.onSelect(this.options[e].value)}open(){this.disabled||(document.body.removeEventListener("click",this.close),this.visible=!0,setTimeout((()=>{document.body.addEventListener("click",this.close)})))}close(){this.visible=!1,document.body.removeEventListener("click",this.close)}enable(){this.disabled=!1}disable(){this.disabled=!0}processForm(){this.form=this.closest("form"),this.form&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}watchNativeSelect(){this.nativeSelect.addEventListener("change",(()=>{this.selectedIndex=this.nativeSelect.selectedIndex}))}processOptions(){this.nativeSelect=this.shadowRoot.querySelector("select");const e=this.querySelectorAll("option-pure");for(let t=0;t<e.length;t++){const{value:s,label:i,select:n,unselect:r,selected:o,hidden:a,disabled:l}=e[t].getOption();this.options.push({label:i,value:s,select:n,unselect:r,hidden:a,disabled:l}),o&&(this.selectedOption=e[t],this.nativeSelect.selectedIndex=t),e[t].onSelect=this.onSelect,t!==e.length-1||this.selectedOption.value||(this.selectedOption=e[0],e[0].select(),this.nativeSelect.selectedIndex=t)}}onSelect(e){for(let t=0;t<this.options.length;t++){const s=this.options[t];s.value!==e?s.unselect():this.selectOption(s,t)}if(this.form){this.hiddenInput.value=this.value;const e=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(e)}this.visible=!1}selectOption(e,t){this.selectedOption=e,this.value=e.value,e.select(),this.nativeSelect.selectedIndex=t,this.afterSelect()}afterSelect(){this.dispatchEvent(new Event("change"))}renderOptions(){return this.options.map((({value:e,label:t,hidden:s,disabled:i})=>{const n=this.selectedOption.value===e;return R`<option value="${e}" ?selected="${n}" ?hidden="${s}" ?disabled="${i}">${t}</option>`}))}handleKeyPress(e){e.which!==Z&&e.which!==ee||this.open()}render(){const e=["label"];return this.disabled&&e.push("disabled"),this.visible&&e.push("visible"),R`<div class="select-wrapper"><select ?disabled="${this.disabled}" name="${this.name}" id="${this.id}">${this.renderOptions()}</select><div class="select"><div class="${e.join(" ")}" @click="${this.visible?this.close:this.open}" @keydown="${this.handleKeyPress}" tabindex="0">${this.selectedOption.label}</div><div class="dropdown${this.visible?" visible":""}"><slot></slot></div></div></div>`}}),customElements.define("option-pure",class extends Y{static get styles(){return Q`.option{align-items:center;background-color:var(--background-color,#fff);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);height:var(--select-height,44px);justify-content:flex-start;padding:var(--padding,0 10px);width:100%}.option:focus,.option:not(.disabled):not(.selected):hover{background-color:var(--hover-background-color,#e3e3e3);color:var(--hover-color,#000)}.selected{background-color:var(--selected-background-color,#e3e3e3);color:var(--selected-color,#000)}.disabled{background-color:var(--disabled-background-color,#e3e3e3);color:var(--disabled-color,#000);cursor:default}`}static get properties(){return{selected:{type:Boolean},label:{type:String},value:{type:String},disabled:{type:Boolean}}}constructor(){super(),this.onClick=this.onClick.bind(this),this.select=this.select.bind(this),this.unselect=this.unselect.bind(this),this.getOption=this.getOption.bind(this),this.label=this.textContent||this.getAttribute("label"),this.value=this.getAttribute("value"),this.selected=null!==this.getAttribute("selected"),this.disabled=null!==this.getAttribute("disabled")}getOption(){return{label:this.label,value:this.value,select:this.select,unselect:this.unselect,selected:this.selected,disabled:this.disabled}}select(){this.selected=!0}unselect(){this.selected=!1}onClick(e){this.onSelect&&!this.disabled?this.onSelect(this.value):e.stopPropagation()}handleKeyPress(e){e.which===Z&&this.onClick()}render(){const e=["option"];return this.selected&&e.push("selected"),this.disabled&&e.push("disabled"),R`<div class="${e.join(" ")}" @click="${this.onClick}" @keydown="${this.handleKeyPress}" tabindex="0">${this.label}</div>`}});

package.json

 {
   "name": "select-pure",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -1,2 +0,2 @@
-[#](#) Custom JavaScript `<select>` component. Easy-to-use, accessible, mobile friendly and super efficient.
+# Custom JavaScript `<select>` component. Easy-to-use, accessible, mobile friendly and super efficient.
 
@@ -28,3 +28,3 @@ [![npm version](https://img.shields.io/npm/v/select-pure.svg)](https://www.npmjs.com/package/select-pure)
 
-```
+```javascript
 <select-pure name="country" id="country">
@@ -43,3 +43,3 @@ <option-pure value="UA">Ukraine</option-pure>
 
-```
+```javascript
 const selectPure = document.querySelector("select-pure");
@@ -69,3 +69,3 @@
 
-```
+```javascript
 const selectPure = document.querySelector("select-pure");
@@ -92,3 +92,3 @@ selectPure.addEventListener("change", (event) => {
 
-```
+```css
 select-pure {
@@ -114,6 +114,7 @@ --select-height: 44px;
   --font-weight: 400;
+  --select-outline: 2px solid #e3e3e3;
 }
 ```
 
-### <form> support
+### `<form>` support
 
@@ -125,17 +126,17 @@ If you place `<select-pure>` inside a `<form>` and specify a `name` or `id` attribute, it will then append a hidden `input` with a given name inside a `<form>` and trigger `change` event, when value is selected.
 2.1
-[] Mutiple
-[] Autocomplete input
-[] Callback for autocomplete input
-[] Custom matching/filter pattern
-[] Fill README with React/Angular/Vue/Svelte/Purejs examples of usage;
-[] Precommit hooks;
-[] Add destroy method;
-[] Make sure Select behaves correctly when attributes are changed or options are removed from the DOM (MutationObserver);
-[] Sometimes one select scrolls dropdown in the others?
+[ ] Mutiple
+[ ] Autocomplete input
+[ ] Callback for autocomplete input
+[ ] Custom matching/filter pattern
+[ ] Fill README with React/Angular/Vue/Svelte/Purejs examples of usage;
+[ ] Precommit hooks;
+[ ] Add destroy method;
+[ ] Make sure Select behaves correctly when attributes are changed or options are removed from the DOM (MutationObserver);
+[ ] Sometimes one select scrolls dropdown in the others?
 
 2.2
-[] Option groups;
-[] Required attribute support
-[] Contribution guide;
-[] Position of the dropdown;
+[ ] Option groups;
+[ ] Required attribute support
+[ ] Contribution guide;
+[ ] Position of the dropdown;
 
@@ -142,0 +143,0 @@ ## License

src/components/Select.js

@@ -25,3 +25,3 @@ import { css, LitElement, html } from "lit-element";
       .label:focus {
-        outline: 2px solid #e3e3e3;
+        outline: var(--select-outline, 2px solid #e3e3e3);
       }
@@ -37,4 +37,10 @@ .label:after {
         transform: rotate(45deg);
+        transition: 0.2s ease-in-out;
         width: 10px;
       }
+      .label.visible:after {
+        margin-bottom: -4px;
+        margin-top: 0;
+        transform: rotate(225deg);
+      }
       select {
@@ -278,2 +284,9 @@ -webkit-appearance: none;
   render() {
+    const labelClassNames = ["label"];
+    if (this.disabled) {
+      labelClassNames.push("disabled");
+    }
+    if (this.visible) {
+      labelClassNames.push("visible");
+    }
     return html`
@@ -287,3 +300,3 @@ <div class="select-wrapper">
           <div
-            class="label${this.disabled ? " disabled": ""}"
+            class="${labelClassNames.join(" ")}"
             @click="${this.visible ? this.close : this.open}"
@@ -290,0 +303,0 @@ @keydown="${this.handleKeyPress}"

No alert changes

Improved metrics

Total package byte prevSize

56327

increased by1.12%

Lines of code

747

increased by1.91%

Number of lines in readme file

140

increased by0.72%

No dependency changes