selectyc 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/selectyc.css +1 -1
- package/dist/selectyc.js +12 -12
- package/dist/selectyc.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/selectyc.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.custom-multiselect{position:relative;width:100%}.selected-items{display:flex;gap:5px;padding:8px;border:1px solid;cursor:default;align-items:center;@apply bg-gray-50 border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-[2px] focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;}.horizontal-overflow{flex-wrap:nowrap;height:42px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.vertical-overflow{flex-wrap:wrap;min-height:42px;height:auto;max-height:120px;white-space:nowrap;overflow-x:auto;overflow-y:auto}.round{@apply rounded-lg;}.roundt{@apply rounded-t-lg;}.round-l{@apply rounded-l-lg;}.round-r{@apply rounded-r-lg;}.round-lt{@apply rounded-tl-lg;}.round-rt{@apply rounded-tr-lg;}.selected-items::-webkit-scrollbar{height:6px;width:8px}.selected-items::-webkit-scrollbar-thumb{border-radius:1rem;@apply bg-cyan-400 dark:bg-cyan-700;}.selected-items::-webkit-scrollbar-thumb:hover{@apply bg-cyan-500 dark:bg-cyan-600;}.custom-single-select{width:97%;padding-left:.2rem;border:0px solid;background:transparent;cursor:default}.custom-single-select:focus{border:0px solid transparent;outline:none;box-shadow:none}.selected-tag{background-color:#007bff;color:#fff;padding:4px 8px;border-radius:12px;display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;flex:0 0 auto}.remove-tag{cursor:pointer;font-weight:700;border:solid 0px;border-radius:.5rem;padding:1px 6px;@apply hover:bg-blue-400 dark:hover:bg-sky-800;}.global-dropdown{position:absolute;background-color:#374151;max-height:200px;overflow-y:auto;display:none;box-shadow:0 2px 8px #0003;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem;@apply bg-gray-50 dark:bg-gray-700;}.global-dropdown::-webkit-scrollbar{width:10px;border-radius:.6rem;@apply bg-gray-200 dark:bg-gray-400;}.global-dropdown::-webkit-scrollbar-thumb{border-radius:.6rem;@apply bg-gray-400 dark:bg-gray-600;}.search-input{position:absolute;width:100%;padding:3px 10px;border:1px solid;display:none;z-index:999;outline:none;color:#000;font-size:.9rem;@apply bg-white dark:bg-gray-600 dark:border-gray-500 dark:text-white border-blue-500;}.search-input:focus{@apply dark:border-gray-500 border-blue-500;}.search-input::placeholder{@apply text-gray-700 dark:text-gray-400;}.select-option{padding:3px 10px;cursor:pointer;font-size:.9rem}.select-option:hover{background-color:#3777de;color:#fff}
|
|
1
|
+
.custom-multiselect{position:relative;width:100%}.selected-items{display:flex;gap:5px;padding:8px;border:1px solid;cursor:default;align-items:center;@apply bg-gray-50 border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-[2px] focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;}.horizontal-overflow{flex-wrap:nowrap;height:42px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.vertical-overflow{flex-wrap:wrap;min-height:42px;height:auto;max-height:120px;white-space:nowrap;overflow-x:auto;overflow-y:auto}.round{@apply rounded-lg;}.roundt{@apply rounded-t-lg;}.round-l{@apply rounded-l-lg;}.round-r{@apply rounded-r-lg;}.round-lt{@apply rounded-tl-lg;}.round-rt{@apply rounded-tr-lg;}.selected-items::-webkit-scrollbar{height:6px;width:8px}.selected-items::-webkit-scrollbar-thumb{border-radius:1rem;@apply bg-cyan-400 dark:bg-cyan-700;}.selected-items::-webkit-scrollbar-thumb:hover{@apply bg-cyan-500 dark:bg-cyan-600;}.custom-single-select{width:97%;padding-left:.2rem;border:0px solid;background:transparent;cursor:default}.custom-single-select:focus{border:0px solid transparent;outline:none;box-shadow:none}.selected-tag{background-color:#007bff;color:#fff;padding:4px 8px;border-radius:12px;display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;flex:0 0 auto}.remove-tag{cursor:pointer;font-weight:700;border:solid 0px;border-radius:.5rem;padding:1px 6px;@apply hover:bg-blue-400 dark:hover:bg-sky-800;}.global-dropdown{position:absolute;background-color:#374151;max-height:200px;overflow-y:auto;display:none;z-index:999;box-shadow:0 2px 8px #0003;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem;@apply bg-gray-50 dark:bg-gray-700;}.global-dropdown::-webkit-scrollbar{width:10px;border-radius:.6rem;@apply bg-gray-200 dark:bg-gray-400;}.global-dropdown::-webkit-scrollbar-thumb{border-radius:.6rem;@apply bg-gray-400 dark:bg-gray-600;}.search-input{position:absolute;width:100%;padding:3px 10px;border:1px solid;display:none;z-index:999;outline:none;color:#000;font-size:.9rem;@apply bg-white dark:bg-gray-600 dark:border-gray-500 dark:text-white border-blue-500;}.search-input:focus{@apply dark:border-gray-500 border-blue-500;}.search-input::placeholder{@apply text-gray-700 dark:text-gray-400;}.select-option{padding:3px 10px;cursor:pointer;font-size:.9rem}.select-option:hover{background-color:#3777de;color:#fff}
|
package/dist/selectyc.js
CHANGED
|
@@ -54,9 +54,9 @@ class l {
|
|
|
54
54
|
#y;
|
|
55
55
|
#s;
|
|
56
56
|
#e;
|
|
57
|
-
#
|
|
57
|
+
#i;
|
|
58
58
|
#r;
|
|
59
|
-
#
|
|
59
|
+
#n = !1;
|
|
60
60
|
#f = !1;
|
|
61
61
|
#u = !1;
|
|
62
62
|
#C = "";
|
|
@@ -127,10 +127,10 @@ class l {
|
|
|
127
127
|
#b() {
|
|
128
128
|
this.#x(), this.#s.addEventListener("click", (t) => {
|
|
129
129
|
if (t.target.classList.contains("remove-tag")) {
|
|
130
|
-
this.#T(t.target.getAttribute("data-value")), this.onUnselect !== void 0 && this.onUnselect(t.target.getAttribute("data-value")), this.#
|
|
130
|
+
this.#T(t.target.getAttribute("data-value")), this.onUnselect !== void 0 && this.onUnselect(t.target.getAttribute("data-value")), this.#n && this.#h(), this.#m();
|
|
131
131
|
return;
|
|
132
132
|
}
|
|
133
|
-
this.#
|
|
133
|
+
this.#n ? this.#h() : this.#m();
|
|
134
134
|
}), document.addEventListener("click", (t) => {
|
|
135
135
|
!this.#l.contains(t.target) && !this.#e.contains(t.target) && !t.target.classList.contains("remove-tag") && this.#h();
|
|
136
136
|
}), window.onresize = () => {
|
|
@@ -145,7 +145,7 @@ class l {
|
|
|
145
145
|
const e = document.createElement("div");
|
|
146
146
|
e.className = "custom-multiselect";
|
|
147
147
|
let s = document.createElement("div");
|
|
148
|
-
s.className = "selected-items round" + this.bodyRound, s.tabIndex = 0, s.classList.add(this.boxOverflow === "horizontal" ? "horizontal-overflow" : "vertical-overflow"), this.isMultiple || (s = this.#E(s)), e.appendChild(s),
|
|
148
|
+
s.className = "selected-items round" + this.bodyRound, s.tabIndex = 0, s.classList.add(this.boxOverflow === "horizontal" ? "horizontal-overflow" : "vertical-overflow"), this.isMultiple || (s = this.#E(s)), e.appendChild(s), e.appendChild(this.#O()), t.appendChild(e);
|
|
149
149
|
const i = document.getElementById(this.id), a = document.createElement("input");
|
|
150
150
|
a.name = i.name, a.style.display = "none";
|
|
151
151
|
let n = i.parentNode;
|
|
@@ -161,7 +161,7 @@ class l {
|
|
|
161
161
|
const t = document.createElement("div");
|
|
162
162
|
t.setAttribute("style", "position:fixed; z-index:999;");
|
|
163
163
|
const e = document.createElement("div");
|
|
164
|
-
e.className = "global-dropdown";
|
|
164
|
+
e.className = "global-dropdown", this.searchInputActive && t.appendChild(this.#D());
|
|
165
165
|
let s;
|
|
166
166
|
return e.addEventListener("scroll", (i) => {
|
|
167
167
|
s && clearTimeout(s), s = setTimeout(() => {
|
|
@@ -173,7 +173,7 @@ class l {
|
|
|
173
173
|
const t = document.createElement("input");
|
|
174
174
|
return t.type = "text", t.id = "selectyc_search_input", t.className = "search-input", t.placeholder = "Buscar...", t.addEventListener("input", () => {
|
|
175
175
|
this.filter = t.value, this.#e.innerHTML = "", this.filter = t.value, this.#w();
|
|
176
|
-
}), this.#
|
|
176
|
+
}), this.#i = t, t;
|
|
177
177
|
}
|
|
178
178
|
#a(t) {
|
|
179
179
|
const e = document.createElement("div");
|
|
@@ -193,19 +193,19 @@ class l {
|
|
|
193
193
|
});
|
|
194
194
|
}
|
|
195
195
|
#m() {
|
|
196
|
-
if (this.#
|
|
196
|
+
if (this.#n)
|
|
197
197
|
return;
|
|
198
198
|
this.#s.classList.remove(`round${this.bodyRound}`), this.#s.classList.add(`round${this.bodyRound}t`);
|
|
199
199
|
const t = this.#l.getBoundingClientRect();
|
|
200
200
|
if (this.searchInputActive) {
|
|
201
|
-
this.#
|
|
202
|
-
const e = this.#
|
|
201
|
+
this.#i.style.display = "block", this.#i.style.width = t.width + "px";
|
|
202
|
+
const e = this.#i.offsetHeight;
|
|
203
203
|
this.#e.style.top = e + "px";
|
|
204
204
|
}
|
|
205
|
-
this.#e.style.width = t.width + "px", this.#e.innerHTML = "", this.#e.style.display = "block", this.searchInputActive && this.#
|
|
205
|
+
this.#e.style.width = t.width + "px", this.#e.innerHTML = "", this.#e.style.display = "block", this.searchInputActive && this.#i.focus(), this.#w(), this.#n = !0;
|
|
206
206
|
}
|
|
207
207
|
#h() {
|
|
208
|
-
this.#
|
|
208
|
+
this.#n && (this.#e.innerHTML = "", this.#e.style.display = "none", this.searchInputActive && (this.#i.style.display = "none"), this.#s.classList.add(`round${this.bodyRound}`), this.#n = !1);
|
|
209
209
|
}
|
|
210
210
|
async #g() {
|
|
211
211
|
if (this.RS === void 0)
|
package/dist/selectyc.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(h,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(h=typeof globalThis<"u"?globalThis:h||self,a(h.selectyc={}))})(this,function(h){"use strict";class a{constructor(t){this.route=t}static make(t){return new a(t)}setMethod(t){return this.method=t,this}getMethod(){return this.method===void 0?"POST":this.method}setData(t){return this.data=t,this}addData(t){if(this.data===void 0)return this.setData(t);for(const e in t)this.data[e]=t[e];return this}setFun(t){return this.fun=t,this}async go(){try{const t={method:this.getMethod(),headers:{"X-CSRF-TOKEN":window.CSRF_TOKEN,Accept:"application/json"}};this.data!==void 0&&(t.body=this.data,Object.prototype.toString.call(this.data)!=="[object FormData]"&&(t.body=JSON.stringify(this.data),t.headers["Content-Type"]="application/json"));const e=await fetch(this.route,t);if(!e.ok){const s=await e.json();throw new Error(s.message)}return this.fun===void 0?await e.json():await this.fun(e)}catch(t){window.toastNotification.setType(!1).show(t.message)}}}class r{#t=[];#c;#f=[];#l;#y;#s;#e;#
|
|
1
|
+
(function(h,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(h=typeof globalThis<"u"?globalThis:h||self,a(h.selectyc={}))})(this,function(h){"use strict";class a{constructor(t){this.route=t}static make(t){return new a(t)}setMethod(t){return this.method=t,this}getMethod(){return this.method===void 0?"POST":this.method}setData(t){return this.data=t,this}addData(t){if(this.data===void 0)return this.setData(t);for(const e in t)this.data[e]=t[e];return this}setFun(t){return this.fun=t,this}async go(){try{const t={method:this.getMethod(),headers:{"X-CSRF-TOKEN":window.CSRF_TOKEN,Accept:"application/json"}};this.data!==void 0&&(t.body=this.data,Object.prototype.toString.call(this.data)!=="[object FormData]"&&(t.body=JSON.stringify(this.data),t.headers["Content-Type"]="application/json"));const e=await fetch(this.route,t);if(!e.ok){const s=await e.json();throw new Error(s.message)}return this.fun===void 0?await e.json():await this.fun(e)}catch(t){window.toastNotification.setType(!1).show(t.message)}}}class r{#t=[];#c;#f=[];#l;#y;#s;#e;#i;#r;#n=!1;#p=!1;#u=!1;#S="";#C='<svg class="w-5 h-5 text-gray-900 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';constructor(t){if(window.selects===void 0&&(window.selects=[]),window.selects[t]!==void 0)return window.selects[t];this.id=t,this.name,this.data=[],this.isMultiple=!1,this.clearButton=!1,this.singleLabel=" ",this.records=10,this.filter=null,this.bodyRound="",this.width="100%",this.searchInputActive=!0,this.bodyData=null,this.boxOverflow="horizontal",window.selects[t]=this}static set(t){return new r(t)}setData(t){return this.data=t,this}setMultiple(t="horizontal"){return this.isMultiple=!0,this.boxOverflow=t,this}setClearButton(){return this.clearButton=!0,this}setSelectedOptions(t){this.#t=t,this.#d(t)}getSelectedOptions(){return this.#t}getSelectedOption(){return this.#t[0]}getOptions(){return this.data}setSingleLabel(t){return this.singleLabel=t,this}setBodyRound(t){return this.bodyRound=`-${t}`,this}setRS(t){return this.RS=t,this}setBodyData(t){return this.bodyData=t,this}desactiveSearchInput(){return this.searchInputActive=!1,this}addOption(t){this.data.push(t)}setWidth(t){return this.width=t,this}setOnSelect(t){return this.onSelect=t,this}setOnUnselect(t){return this.onUnselect=t,this}setOnChange(t){return this.onChange=t,this}cleanSelection(){const t=this.#t;this.#t=[],this.#d(t)}#b(){this.#x(),this.#s.addEventListener("click",t=>{if(t.target.classList.contains("remove-tag")){this.#T(t.target.getAttribute("data-value")),this.onUnselect!==void 0&&this.onUnselect(t.target.getAttribute("data-value")),this.#n&&this.#h(),this.#m();return}this.#n?this.#h():this.#m()}),document.addEventListener("click",t=>{!this.#l.contains(t.target)&&!this.#e.contains(t.target)&&!t.target.classList.contains("remove-tag")&&this.#h()}),window.onresize=()=>{this.#h()},this.isMultiple&&this.#v()}#x(){this.#L();const t=document.createElement("div");t.className="main-div-selectyc",t.style.width=this.width;const e=document.createElement("div");e.className="custom-multiselect";let s=document.createElement("div");s.className="selected-items round"+this.bodyRound,s.tabIndex=0,s.classList.add(this.boxOverflow==="horizontal"?"horizontal-overflow":"vertical-overflow"),this.isMultiple||(s=this.#O(s)),e.appendChild(s),e.appendChild(this.#E()),t.appendChild(e);const i=document.getElementById(this.id),l=document.createElement("input");l.name=i.name,l.style.display="none";let n=i.parentNode;t.appendChild(l),n.replaceChild(t,i),this.#c=l,this.#y=s,this.#l=e,this.#s=this.#l.querySelector(".selected-items"),!this.isMultiple&&this.#t.length>0&&(this.#c.value=this.#t[0].value)}#O(t){const e=document.createElement("input");e.className="custom-single-select",e.value=this.#t.length===0?this.singleLabel:this.#t[0].text,e.required=this.#p,e.readOnly=!0;const s=document.createElement("div");return s.innerHTML=this.#C,t.appendChild(e),t.appendChild(s),this.#r=e,t}#E(){const t=document.createElement("div");t.setAttribute("style","position:fixed; z-index:999;");const e=document.createElement("div");e.className="global-dropdown",this.searchInputActive&&t.appendChild(this.#D());let s;return e.addEventListener("scroll",i=>{s&&clearTimeout(s),s=setTimeout(()=>{this.#A(i)},70)}),t.appendChild(e),this.#e=e,t}#D(){const t=document.createElement("input");return t.type="text",t.id="selectyc_search_input",t.className="search-input",t.placeholder="Buscar...",t.addEventListener("input",()=>{this.filter=t.value,this.#e.innerHTML="",this.filter=t.value,this.#w()}),this.#i=t,t}#a(t){const e=document.createElement("div");e.className="select-option",e.setAttribute("data-value",t.id),e.textContent=t.text,this.#e.appendChild(e),e.addEventListener("click",()=>{t.id!=="sin_resultados"&&(this.#N(t.text,t.id),this.onSelect!==void 0&&this.onSelect(t.id),this.#h())})}#L(){const t=document.getElementById(this.id);this.name=t.name,this.#p=t.required,Array.from(t.options).forEach(e=>{if(e.selected){const s=e.text,i=this.#o(e.value);this.isMultiple?this.#t.push({value:i,text:s}):this.#t[0]={value:i,text:s}}this.#f.push({id:this.#o(e.value),text:e.text})})}#m(){if(this.#n)return;this.#s.classList.remove(`round${this.bodyRound}`),this.#s.classList.add(`round${this.bodyRound}t`);const t=this.#l.getBoundingClientRect();if(this.searchInputActive){this.#i.style.display="block",this.#i.style.width=t.width+"px";const e=this.#i.offsetHeight;this.#e.style.top=e+"px"}this.#e.style.width=t.width+"px",this.#e.innerHTML="",this.#e.style.display="block",this.searchInputActive&&this.#i.focus(),this.#w(),this.#n=!0}#h(){this.#n&&(this.#e.innerHTML="",this.#e.style.display="none",this.searchInputActive&&(this.#i.style.display="none"),this.#s.classList.add(`round${this.bodyRound}`),this.#n=!1)}async#g(){if(this.RS===void 0)return this.data;let t={records:this.records,filter:this.filter};t!==null&&(t={...t,...this.bodyData});const e=await a.make(this.RS).addData(t).setMethod("POST").go(),s=Array.isArray(e)?e:e.data;return this.data=Array.from(new Map([...this.#f,...s].map(i=>[i.id,i])).values()),this.data}async#w(){this.#a({id:"loading",text:"cargando ..."}),this.records=10+this.#t.length,this.#u=!1;let t=await this.#g();const e=this.#t.map(s=>s.value);this.#e.lastChild.dataset.value==="loading"&&this.#e.removeChild(this.#e.lastChild),t.forEach(s=>{s.text.toLowerCase().includes(this.#S.toLowerCase())&&!e.includes(s.id)&&this.#a(s)}),this.#e.hasChildNodes()||this.#a({id:"sin_resultados",text:"sin resultados ..."})}async#M(){const t=this.#t.map(n=>n.value);let e=this.filter===null?"":this.filter,s=this.data.map(n=>n.id);this.records=this.records+10+this.#t.length;let i=await this.#g();this.#e.lastChild.dataset.value==="loading"&&this.#e.removeChild(this.#e.lastChild);const l=this.#e.lastChild.dataset.value;i.forEach(n=>{n.text.toLowerCase().includes(e.toLowerCase())&&!t.includes(n.id)&&!s.includes(n.id)&&this.#a(n)}),this.#u=l===this.#e.lastChild.dataset.value}#N(t,e){this.#t.find(i=>i.value===e)||(this.isMultiple||(this.#t=[]),this.#t.push({text:t,value:e})),this.#d(e)}#d(t){this.onChange!==void 0&&this.onChange(t),this.isMultiple?this.#v():this.#I()}#I(){this.#r.value=null,this.#r.value=this.#t.length>0?this.#t[0].text:this.singleLabel,this.#c.value=this.#t.length>0?this.#t[0].value:null;const t=this.#r.parentNode,e=t.firstChild;if(e.className==="remove-tag"&&e.remove(),!this.clearButton||this.#t.length<=0)return;const s=document.createElement("span");s.dataset.value=this.#t[0].value,s.innerHTML="x",s.className="remove-tag",t.insertBefore(s,t.firstChild)}#v(){if(this.#s.innerHTML="",this.#t.length<=0){this.#s.appendChild(document.createElement("div"));return}this.#t.forEach(({text:t,value:e})=>{const s=document.createElement("div");s.className="selected-tag",s.innerHTML=`${t} <span class="remove-tag" data-value="${e}">x</span>`,this.#s.appendChild(s)})}#T(t){this.#t=this.#t.filter(e=>this.#o(e.value)!==this.#o(t)),this.#d(t)}#A(t){const{scrollTop:e,scrollHeight:s,clientHeight:i}=this.#e;t.target.lastChild!==null&&(t.target.lastChild.dataset.value==="loading"||this.#u||e+(i+1)>=s&&(this.#a({id:"loading",text:"cargando ..."}),this.#M()))}#o(t){return!isNaN(t)&&!isNaN(parseFloat(t))?parseInt(t):t}async render(){this.#b()}}h.selectyc=r,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|