select-pure - npm Package Compare versions

Comparing version 2.0.0-alpha.6 to 2.0.0-alpha.7

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.0.0-alpha.7](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.0.0-alpha.6...select-pure@2.0.0-alpha.7) (2021-04-27)
+
+
+### Bug Fixes
+
+* **general:** make id a property ([ba74121](https://github.com/dudyn5ky1/select-pure/commit/ba74121fc42616a9235a35d2b6f37a05a991ee31))
+
+
+
+
+
 # [2.0.0-alpha.6](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.0.0-alpha.5...select-pure@2.0.0-alpha.6) (2021-04-26)
@@ -8,0 +19,0 @@

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: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()}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>`}});
+(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},id:{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.6",
+  "version": "2.0.0-alpha.7",
   "description": "Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient",
@@ -5,0 +5,0 @@ "author": {

src/components/Select.js

@@ -119,2 +119,5 @@ import { css, LitElement, html } from "lit-element";
       },
+      id: {
+        type: String,
+      },
     };
@@ -147,4 +150,3 @@ }
     this.watchNativeSelect();
-    // :( Fails with React
-    // window.addEventListener("DOMContentLoaded", this.processForm);
+    this.processForm();
   }
@@ -151,0 +153,0 @@

No alert changes

Improved metrics

Total package byte prevSize

56946

increased by0.53%

Lines of code

750

increased by0.27%

No dependency changes