selectyc 0.0.7 → 0.0.8

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 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 dark:border-gray-300 border-blue-500;}.search-input:focus{@apply dark:border-gray-300 border-blue-500;}.search-input::placeholder{color:#4b5563}.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;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
@@ -48,7 +48,7 @@ class h {
48
48
  }
49
49
  class l {
50
50
  #t = [];
51
- #o;
51
+ #c;
52
52
  #p = [];
53
53
  #l;
54
54
  #y;
@@ -58,7 +58,7 @@ class l {
58
58
  #r;
59
59
  #i = !1;
60
60
  #f = !1;
61
- #c = !1;
61
+ #u = !1;
62
62
  #C = "";
63
63
  #S = '<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>';
64
64
  constructor(t) {
@@ -78,6 +78,9 @@ class l {
78
78
  setClearButton() {
79
79
  return this.clearButton = !0, this;
80
80
  }
81
+ setSelectedOptions(t) {
82
+ this.#t = t, this.#d(t);
83
+ }
81
84
  getSelectedOptions() {
82
85
  return this.#t;
83
86
  }
@@ -119,7 +122,7 @@ class l {
119
122
  }
120
123
  cleanSelection() {
121
124
  const t = this.#t;
122
- this.#t = [], this.#u(t);
125
+ this.#t = [], this.#d(t);
123
126
  }
124
127
  #b() {
125
128
  this.#x(), this.#s.addEventListener("click", (t) => {
@@ -142,11 +145,11 @@ class l {
142
145
  const e = document.createElement("div");
143
146
  e.className = "custom-multiselect";
144
147
  let s = document.createElement("div");
145
- 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), this.searchInputActive && e.appendChild(this.#O()), e.appendChild(this.#D()), t.appendChild(e);
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), this.searchInputActive && e.appendChild(this.#D()), e.appendChild(this.#O()), t.appendChild(e);
146
149
  const i = document.getElementById(this.id), a = document.createElement("input");
147
150
  a.name = i.name, a.style.display = "none";
148
151
  let n = i.parentNode;
149
- t.appendChild(a), n.replaceChild(t, i), this.#o = a, this.#y = s, this.#l = e, this.#s = this.#l.querySelector(".selected-items"), !this.isMultiple && this.#t.length > 0 && (this.#o.value = this.#t[0].value);
152
+ t.appendChild(a), n.replaceChild(t, i), this.#c = a, 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);
150
153
  }
151
154
  #E(t) {
152
155
  const e = document.createElement("input");
@@ -154,7 +157,7 @@ class l {
154
157
  const s = document.createElement("div");
155
158
  return s.innerHTML = this.#S, t.appendChild(e), t.appendChild(s), this.#r = e, t;
156
159
  }
157
- #D() {
160
+ #O() {
158
161
  const t = document.createElement("div");
159
162
  t.setAttribute("style", "position:fixed; z-index:999;");
160
163
  const e = document.createElement("div");
@@ -166,7 +169,7 @@ class l {
166
169
  }, 70);
167
170
  }), t.appendChild(e), this.#e = e, t;
168
171
  }
169
- #O() {
172
+ #D() {
170
173
  const t = document.createElement("input");
171
174
  return t.type = "text", t.id = "selectyc_search_input", t.className = "search-input", t.placeholder = "Buscar...", t.addEventListener("input", () => {
172
175
  this.filter = t.value, this.#e.innerHTML = "", this.filter = t.value, this.#w();
@@ -183,10 +186,10 @@ class l {
183
186
  const t = document.getElementById(this.id);
184
187
  this.name = t.name, this.#f = t.required, Array.from(t.options).forEach((e) => {
185
188
  if (e.selected) {
186
- const s = e.text, i = this.#d(e.value);
189
+ const s = e.text, i = this.#o(e.value);
187
190
  this.isMultiple ? this.#t.push({ value: i, text: s }) : this.#t[0] = { value: i, text: s };
188
191
  }
189
- this.#p.push({ id: this.#d(e.value), text: e.text });
192
+ this.#p.push({ id: this.#o(e.value), text: e.text });
190
193
  });
191
194
  }
192
195
  #m() {
@@ -213,7 +216,7 @@ class l {
213
216
  return this.data = Array.from(new Map([...this.#p, ...s].map((i) => [i.id, i])).values()), this.data;
214
217
  }
215
218
  async #w() {
216
- this.#a({ id: "loading", text: "cargando ..." }), this.records = 10 + this.#t.length, this.#c = !1;
219
+ this.#a({ id: "loading", text: "cargando ..." }), this.records = 10 + this.#t.length, this.#u = !1;
217
220
  let t = await this.#g();
218
221
  const e = this.#t.map((s) => s.value);
219
222
  this.#e.lastChild.dataset.value === "loading" && this.#e.removeChild(this.#e.lastChild), t.forEach((s) => {
@@ -229,16 +232,16 @@ class l {
229
232
  const a = this.#e.lastChild.dataset.value;
230
233
  i.forEach((n) => {
231
234
  n.text.toLowerCase().includes(e.toLowerCase()) && !t.includes(n.id) && !s.includes(n.id) && this.#a(n);
232
- }), this.#c = a === this.#e.lastChild.dataset.value;
235
+ }), this.#u = a === this.#e.lastChild.dataset.value;
233
236
  }
234
237
  #M(t, e) {
235
- this.#t.find((i) => i.value === e) || (this.isMultiple || (this.#t = []), this.#t.push({ text: t, value: e })), this.#u(e);
238
+ this.#t.find((i) => i.value === e) || (this.isMultiple || (this.#t = []), this.#t.push({ text: t, value: e })), this.#d(e);
236
239
  }
237
- #u(t) {
240
+ #d(t) {
238
241
  this.onChange !== void 0 && this.onChange(t), this.isMultiple ? this.#v() : this.#I();
239
242
  }
240
243
  #I() {
241
- this.#r.value = null, this.#r.value = this.#t.length > 0 ? this.#t[0].text : null, this.#o.value = this.#t.length > 0 ? this.#t[0].value : null;
244
+ 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;
242
245
  const t = this.#r.parentNode, e = t.firstChild;
243
246
  if (e.className === "remove-tag" && e.remove(), !this.clearButton || this.#t.length <= 0)
244
247
  return;
@@ -256,13 +259,13 @@ class l {
256
259
  });
257
260
  }
258
261
  #T(t) {
259
- this.#t = this.#t.filter((e) => this.#d(e.value) !== this.#d(t)), this.#u(t);
262
+ this.#t = this.#t.filter((e) => this.#o(e.value) !== this.#o(t)), this.#d(t);
260
263
  }
261
264
  #A(t) {
262
265
  const { scrollTop: e, scrollHeight: s, clientHeight: i } = this.#e;
263
- t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#c || e + (i + 1) >= s && (this.#a({ id: "loading", text: "cargando ..." }), this.#N()));
266
+ t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#u || e + (i + 1) >= s && (this.#a({ id: "loading", text: "cargando ..." }), this.#N()));
264
267
  }
265
- #d(t) {
268
+ #o(t) {
266
269
  return !isNaN(t) && !isNaN(parseFloat(t)) ? parseInt(t) : t;
267
270
  }
268
271
  async render() {
@@ -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=[];#o;#f=[];#l;#y;#s;#e;#n;#r;#i=!1;#p=!1;#c=!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}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.#u(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.#i&&this.#h(),this.#m();return}this.#i?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.#w()}#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.#E(s)),e.appendChild(s),this.searchInputActive&&e.appendChild(this.#D()),e.appendChild(this.#O()),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.#o=l,this.#y=s,this.#l=e,this.#s=this.#l.querySelector(".selected-items"),!this.isMultiple&&this.#t.length>0&&(this.#o.value=this.#t[0].value)}#E(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}#O(){const t=document.createElement("div");t.setAttribute("style","position:fixed; z-index:999;");const e=document.createElement("div");e.className="global-dropdown";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.#v()}),this.#n=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.#d(e.value);this.isMultiple?this.#t.push({value:i,text:s}):this.#t[0]={value:i,text:s}}this.#f.push({id:this.#d(e.value),text:e.text})})}#m(){if(this.#i)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.#n.style.display="block";const e=this.#n.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.#n.focus(),this.#v(),this.#i=!0}#h(){this.#i&&(this.#e.innerHTML="",this.#e.style.display="none",this.searchInputActive&&(this.#n.style.display="none"),this.#s.classList.add(`round${this.bodyRound}`),this.#i=!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#v(){this.#a({id:"loading",text:"cargando ..."}),this.records=10+this.#t.length,this.#c=!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.#c=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.#u(e)}#u(t){this.onChange!==void 0&&this.onChange(t),this.isMultiple?this.#w():this.#I()}#I(){this.#r.value=null,this.#r.value=this.#t.length>0?this.#t[0].text:null,this.#o.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)}#w(){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.#d(e.value)!==this.#d(t)),this.#u(t)}#A(t){const{scrollTop:e,scrollHeight:s,clientHeight:i}=this.#e;t.target.lastChild!==null&&(t.target.lastChild.dataset.value==="loading"||this.#c||e+(i+1)>=s&&(this.#a({id:"loading",text:"cargando ..."}),this.#M()))}#d(t){return!isNaN(t)&&!isNaN(parseFloat(t))?parseInt(t):t}async render(){this.#b()}}h.selectyc=r,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
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;#n;#r;#i=!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.#i&&this.#h(),this.#m();return}this.#i?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.#w()}#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),this.searchInputActive&&e.appendChild(this.#D()),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";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.#v()}),this.#n=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.#i)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.#n.style.display="block";const e=this.#n.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.#n.focus(),this.#v(),this.#i=!0}#h(){this.#i&&(this.#e.innerHTML="",this.#e.style.display="none",this.searchInputActive&&(this.#n.style.display="none"),this.#s.classList.add(`round${this.bodyRound}`),this.#i=!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#v(){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.#w():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)}#w(){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"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "selectyc",
3
3
  "description": "select multiple and simple",
4
- "version": "0.0.7",
4
+ "version": "0.0.8",
5
5
  "main": "./dist/selectyc.umd.js",
6
6
  "module": "./dist/selectyc.js",
7
7
  "type": "module",