From 7f0abbc627f81df11ad0040999fe9d06aa61a071 Mon Sep 17 00:00:00 2001 From: habibmhamadi Date: Mon, 5 Sep 2022 14:48:59 +0430 Subject: [PATCH] Build minified version. --- dist/css/multi-select-tag.css | 2 +- dist/js/multi-select-tag.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/css/multi-select-tag.css b/dist/css/multi-select-tag.css index aa8c478..350f4cb 100644 --- a/dist/css/multi-select-tag.css +++ b/dist/css/multi-select-tag.css @@ -1 +1 @@ -.mult-select-tag{display:flex;flex-direction:column;align-items:center;position:relative;--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-color:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);--border-color:rgb(218, 221, 224);font-family:Verdana,sans-serif}.mult-select-tag .wrapper{width:100%}.mult-select-tag .body{display:flex;border:1px solid var(--border-color);background:#fff;min-height:2.15rem}.mult-select-tag .input-container{display:flex;flex-wrap:wrap;flex:1 1 auto;padding:.1rem}.mult-select-tag .input-body{display:flex;width:100%}.mult-select-tag .input{flex:1;background:0 0;border-radius:.25rem;padding:.45rem;margin:10px;color:#2d3748;outline:0;border:1px solid var(--border-color)}.mult-select-tag .btn-container{color:#e2ebf0;padding:.5rem;display:flex;border-left:1px solid var(--border-color)}.mult-select-tag button{cursor:pointer;width:100%;color:#718096;outline:0;height:100%;border:none;padding:0;background:0 0;background-image:none;-webkit-appearance:none;text-transform:none;margin:0}.mult-select-tag button:first-child{width:1rem;height:90%}.mult-select-tag .drawer{position:absolute;background:#fff;max-height:15rem;z-index:40;top:98%;width:100%;overflow-y:scroll;border:1px solid var(--border-color);border-radius:.25rem}.mult-select-tag ul{list-style-type:none;padding:.5rem;margin:0}.mult-select-tag ul li{padding:.5rem;border-radius:.25rem;cursor:pointer}.mult-select-tag ul li:hover{background:rgb(243 244 246)}.mult-select-tag .item-container{display:flex;justify-content:center;align-items:center;color:#2c7a7b;padding:.2rem .4rem;margin:.2rem;font-weight:500;border:1px solid #81e6d9;background:#e6fffa;border-radius:9999px}.mult-select-tag .item-label{max-width:100%;line-height:1;font-size:.75rem;font-weight:400;flex:0 1 auto;color:#2c7a7b}.mult-select-tag .item-close-container{display:flex;flex:1 1 auto;flex-direction:row-reverse}.mult-select-tag .item-close-svg{width:1rem;margin-left:.5rem;height:1rem;cursor:pointer;border-radius:9999px;display:block}.hidden{display:none}.mult-select-tag .shadow{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.mult-select-tag .rounded{border-radius:.375rem} +.mult-select-tag{display:flex;width:100%;flex-direction:column;align-items:center;position:relative;--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-color:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);--border-color:rgb(218, 221, 224);font-family:Verdana,sans-serif}.mult-select-tag .wrapper{width:100%}.mult-select-tag .body{display:flex;border:1px solid var(--border-color);background:#fff;min-height:2.15rem;width:100%;min-width:14rem}.mult-select-tag .input-container{display:flex;flex-wrap:wrap;flex:1 1 auto;padding:.1rem}.mult-select-tag .input-body{display:flex;width:100%}.mult-select-tag .input{flex:1;background:0 0;border-radius:.25rem;padding:.45rem;margin:10px;color:#2d3748;outline:0;border:1px solid var(--border-color)}.mult-select-tag .btn-container{color:#e2ebf0;padding:.5rem;display:flex;border-left:1px solid var(--border-color)}.mult-select-tag button{cursor:pointer;width:100%;color:#718096;outline:0;height:100%;border:none;padding:0;background:0 0;background-image:none;-webkit-appearance:none;text-transform:none;margin:0}.mult-select-tag button:first-child{width:1rem;height:90%}.mult-select-tag .drawer{position:absolute;background:#fff;max-height:15rem;z-index:40;top:98%;width:100%;overflow-y:scroll;border:1px solid var(--border-color);border-radius:.25rem}.mult-select-tag ul{list-style-type:none;padding:.5rem;margin:0}.mult-select-tag ul li{padding:.5rem;border-radius:.25rem;cursor:pointer}.mult-select-tag ul li:hover{background:rgb(243 244 246)}.mult-select-tag .item-container{display:flex;justify-content:center;align-items:center;color:#2c7a7b;padding:.2rem .4rem;margin:.2rem;font-weight:500;border:1px solid #81e6d9;background:#e6fffa;border-radius:9999px}.mult-select-tag .item-label{max-width:100%;line-height:1;font-size:.75rem;font-weight:400;flex:0 1 auto;color:#2c7a7b}.mult-select-tag .item-close-container{display:flex;flex:1 1 auto;flex-direction:row-reverse}.mult-select-tag .item-close-svg{width:1rem;margin-left:.5rem;height:1rem;cursor:pointer;border-radius:9999px;display:block}.hidden{display:none}.mult-select-tag .shadow{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.mult-select-tag .rounded{border-radius:.375rem} diff --git a/dist/js/multi-select-tag.js b/dist/js/multi-select-tag.js index aa315a7..b655970 100644 --- a/dist/js/multi-select-tag.js +++ b/dist/js/multi-select-tag.js @@ -1 +1 @@ -function MultiSelectTag(e,n={shadow:!1,rounded:!0}){var t=null,d=null,l=null,a=null,s=null,i=null,o=null,c=null,r=null,u=null,p=null,v=null,m=new DOMParser;function h(e=null){for(var n of(v.innerHTML="",d))if(n.selected)!w(n.value)&&f(n);else{const t=document.createElement("li");t.innerHTML=n.label,t.dataset.value=n.value,e&&n.label.toLowerCase().startsWith(e.toLowerCase())?v.appendChild(t):e||v.appendChild(t)}}function f(e){const n=document.createElement("div");n.classList.add("item-container");const t=document.createElement("div");t.classList.add("item-label"),t.innerHTML=e.label,t.dataset.value=e.value;const l=(new DOMParser).parseFromString('\n \n \n ',"image/svg+xml").documentElement;l.addEventListener("click",(n=>{d.find((n=>n.value==e.value)).selected=!1,g(e.value),h(),E()})),n.appendChild(t),n.appendChild(l),o.append(n)}function L(){for(var e of v.children)e.addEventListener("click",(e=>{d.find((n=>n.value==e.target.dataset.value)).selected=!0,r.value=null,h(),E(),r.focus()}))}function w(e){for(var n of o.children)if(!n.classList.contains("input-body")&&n.firstChild.dataset.value==e)return!0;return!1}function g(e){for(var n of o.children)n.classList.contains("input-body")||n.firstChild.dataset.value!=e||o.removeChild(n)}function E(){for(var e=0;e({value:e.value,label:e.label,selected:e.selected}))),t.classList.add("hidden"),(l=document.createElement("div")).classList.add("mult-select-tag"),(a=document.createElement("div")).classList.add("wrapper"),(i=document.createElement("div")).classList.add("body"),n.shadow&&i.classList.add("shadow"),n.rounded&&i.classList.add("rounded"),(o=document.createElement("div")).classList.add("input-container"),(r=document.createElement("input")).classList.add("input"),r.placeholder=`${n.placeholder||"Search..."}`,(c=document.createElement("inputBody")).classList.add("input-body"),c.append(r),i.append(o),(s=document.createElement("div")).classList.add("btn-container"),u=document.createElement("button"),s.append(u);const e=m.parseFromString('\n ',"image/svg+xml").documentElement;u.append(e),i.append(s),a.append(i),(p=document.createElement("div")).classList.add("drawer","hidden"),n.shadow&&p.classList.add("shadow"),n.rounded&&p.classList.add("rounded"),p.append(c),v=document.createElement("ul"),p.appendChild(v),l.appendChild(a),l.appendChild(p),t.nextSibling?t.parentNode.insertBefore(l,t.nextSibling):t.parentNode.appendChild(l)}(),h(),L(),E(),u.addEventListener("click",(()=>{p.classList.contains("hidden")&&(h(),L(),p.classList.remove("hidden"),r.focus())})),r.addEventListener("keyup",(e=>{h(e.target.value),L()})),r.addEventListener("keydown",(e=>{if("Backspace"===e.key&&!e.target.value&&o.childElementCount>1){const e=i.children[o.childElementCount-2].firstChild;d.find((n=>n.value==e.dataset.value)).selected=!1,g(e.dataset.value),E()}})),window.addEventListener("click",(e=>{l.contains(e.target)||p.classList.add("hidden")}))} +function MultiSelectTag(e,t={shadow:!1,rounded:!0}){var n=null,d=null,l=null,a=null,s=null,i=null,o=null,c=null,r=null,u=null,p=null,v=null,m=new DOMParser;function h(e=null){for(var t of(v.innerHTML="",d))if(t.selected)!w(t.value)&&f(t);else{const n=document.createElement("li");n.innerHTML=t.label,n.dataset.value=t.value,e&&t.label.toLowerCase().startsWith(e.toLowerCase())?v.appendChild(n):e||v.appendChild(n)}}function f(e){const t=document.createElement("div");t.classList.add("item-container");const n=document.createElement("div");n.classList.add("item-label"),n.innerHTML=e.label,n.dataset.value=e.value;const l=(new DOMParser).parseFromString('\n \n \n ',"image/svg+xml").documentElement;l.addEventListener("click",(t=>{d.find((t=>t.value==e.value)).selected=!1,g(e.value),h(),E()})),t.appendChild(n),t.appendChild(l),o.append(t)}function L(){for(var e of v.children)e.addEventListener("click",(e=>{d.find((t=>t.value==e.target.dataset.value)).selected=!0,r.value=null,h(),E(),r.focus()}))}function w(e){for(var t of o.children)if(!t.classList.contains("input-body")&&t.firstChild.dataset.value==e)return!0;return!1}function g(e){for(var t of o.children)t.classList.contains("input-body")||t.firstChild.dataset.value!=e||o.removeChild(t)}function E(){for(var e=0;e({value:e.value,label:e.label,selected:e.selected}))),n.classList.add("hidden"),(l=document.createElement("div")).classList.add("mult-select-tag"),(a=document.createElement("div")).classList.add("wrapper"),(i=document.createElement("div")).classList.add("body"),t.shadow&&i.classList.add("shadow"),t.rounded&&i.classList.add("rounded"),(o=document.createElement("div")).classList.add("input-container"),(r=document.createElement("input")).classList.add("input"),r.placeholder=`${t.placeholder||"Search..."}`,(c=document.createElement("inputBody")).classList.add("input-body"),c.append(r),i.append(o),(s=document.createElement("div")).classList.add("btn-container"),(u=document.createElement("button")).type="button",s.append(u);const e=m.parseFromString('\n ',"image/svg+xml").documentElement;u.append(e),i.append(s),a.append(i),(p=document.createElement("div")).classList.add("drawer","hidden"),t.shadow&&p.classList.add("shadow"),t.rounded&&p.classList.add("rounded"),p.append(c),v=document.createElement("ul"),p.appendChild(v),l.appendChild(a),l.appendChild(p),n.nextSibling?n.parentNode.insertBefore(l,n.nextSibling):n.parentNode.appendChild(l)}(),h(),L(),E(),u.addEventListener("click",(()=>{p.classList.contains("hidden")&&(h(),L(),p.classList.remove("hidden"),r.focus())})),r.addEventListener("keyup",(e=>{h(e.target.value),L()})),r.addEventListener("keydown",(e=>{if("Backspace"===e.key&&!e.target.value&&o.childElementCount>1){const e=i.children[o.childElementCount-2].firstChild;d.find((t=>t.value==e.dataset.value)).selected=!1,g(e.dataset.value),E()}})),window.addEventListener("click",(e=>{l.contains(e.target)||p.classList.add("hidden")}))} diff --git a/package.json b/package.json index 98cc65e..8bc6ccc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "multi-select-tag", - "version": "1.1.0", + "version": "1.1.1", "description": "HTML multiple tag selection input.", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",