selectyc 0.0.20 → 0.0.22
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 +70 -69
- 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:pointer;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;font-size:.9rem;cursor:pointer}.custom-single-select:focus{border:0px solid transparent;outline:none;box-shadow:none}.custom-single-select::placeholder{opacity:.7;font-style:italic;font-size:14px}.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{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{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:0 8px;border:1px solid;cursor:pointer;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;font-size:.9rem;cursor:pointer}.custom-single-select:focus{border:0px solid transparent;outline:none;box-shadow:none}.custom-single-select::placeholder{opacity:.7;font-style:italic;font-size:14px}.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{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{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
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import './selectyc.css';
|
|
2
|
-
class
|
|
2
|
+
class l {
|
|
3
3
|
constructor(t) {
|
|
4
4
|
this.route = t;
|
|
5
5
|
}
|
|
6
6
|
static make(t) {
|
|
7
|
-
return new
|
|
7
|
+
return new l(t);
|
|
8
8
|
}
|
|
9
9
|
setMethod(t) {
|
|
10
10
|
return this.method = t, this;
|
|
@@ -49,26 +49,26 @@ class a {
|
|
|
49
49
|
class h {
|
|
50
50
|
#t = [];
|
|
51
51
|
#u;
|
|
52
|
-
#
|
|
53
|
-
#
|
|
54
|
-
#
|
|
52
|
+
#p = [];
|
|
53
|
+
#r;
|
|
54
|
+
#f;
|
|
55
55
|
#s;
|
|
56
56
|
#e;
|
|
57
57
|
#a;
|
|
58
|
-
#
|
|
59
|
-
#
|
|
60
|
-
#
|
|
61
|
-
#w;
|
|
58
|
+
#l;
|
|
59
|
+
#m;
|
|
60
|
+
#o;
|
|
62
61
|
#S;
|
|
63
|
-
#
|
|
64
|
-
#
|
|
65
|
-
#
|
|
62
|
+
#x;
|
|
63
|
+
#i = !1;
|
|
64
|
+
#w = !1;
|
|
65
|
+
#g = !1;
|
|
66
66
|
#E = "";
|
|
67
67
|
#D = '<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>';
|
|
68
68
|
constructor(t) {
|
|
69
69
|
if (window.selects === void 0 && (window.selects = []), window.selects[t] !== void 0)
|
|
70
70
|
return window.selects[t];
|
|
71
|
-
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;
|
|
71
|
+
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", this.disabled = !1, window.selects[t] = this;
|
|
72
72
|
}
|
|
73
73
|
static set(t) {
|
|
74
74
|
return new h(t);
|
|
@@ -83,7 +83,7 @@ class h {
|
|
|
83
83
|
return this.clearButton = !0, this;
|
|
84
84
|
}
|
|
85
85
|
setSelectedOptions(t) {
|
|
86
|
-
this.#t = t, this.#
|
|
86
|
+
this.#t = t, this.#d(t);
|
|
87
87
|
}
|
|
88
88
|
getSelectedOptions() {
|
|
89
89
|
return this.#t;
|
|
@@ -126,26 +126,31 @@ class h {
|
|
|
126
126
|
}
|
|
127
127
|
cleanSelection() {
|
|
128
128
|
const t = this.#t;
|
|
129
|
-
this.#t = [], this.#
|
|
129
|
+
this.#t = [], this.#d(t);
|
|
130
|
+
}
|
|
131
|
+
setDisableSelect(t) {
|
|
132
|
+
return this.disabled = t, this;
|
|
130
133
|
}
|
|
131
134
|
#L() {
|
|
132
135
|
this.#N(), this.#s.addEventListener("click", (t) => {
|
|
133
|
-
if (
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
if (!this.disabled) {
|
|
137
|
+
if (t.target.classList.contains("remove-tag")) {
|
|
138
|
+
this.#H(t.target.getAttribute("data-value")), this.onUnselect !== void 0 && this.onUnselect(t.target.getAttribute("data-value"), this), this.#i && this.#n(), this.#y();
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
this.#i ? this.#n() : this.#y();
|
|
136
142
|
}
|
|
137
|
-
this.#n ? this.#l() : this.#v();
|
|
138
143
|
}), document.addEventListener("click", (t) => {
|
|
139
|
-
!this.#
|
|
144
|
+
!this.#r.contains(t.target) && !this.#e.contains(t.target) && !t.target.classList.contains("remove-tag") && this.#n();
|
|
140
145
|
}), window.onresize = () => {
|
|
141
|
-
this.#
|
|
146
|
+
this.#n();
|
|
142
147
|
}, window.addEventListener("scroll", () => {
|
|
143
|
-
this.#
|
|
144
|
-
}), this.isMultiple && this.#
|
|
148
|
+
this.#n();
|
|
149
|
+
}), this.isMultiple && this.#C();
|
|
145
150
|
}
|
|
146
151
|
// Draw functions
|
|
147
152
|
#N() {
|
|
148
|
-
this.#
|
|
153
|
+
this.#T();
|
|
149
154
|
const t = document.createElement("div");
|
|
150
155
|
t.className = "main-div-selectyc", t.style.width = this.width, t.id = `selectyc_main_div_${this.id}`;
|
|
151
156
|
const e = document.createElement("div");
|
|
@@ -154,18 +159,18 @@ class h {
|
|
|
154
159
|
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.#M()), t.appendChild(e);
|
|
155
160
|
const i = document.getElementById(this.id), n = document.createElement("input");
|
|
156
161
|
n.name = i.name, n.setAttribute("data-id", i.id), this.rootClassName !== "" && (n.className = i.className), n.style.display = "none";
|
|
157
|
-
let
|
|
158
|
-
t.appendChild(n),
|
|
162
|
+
let a = i.parentNode;
|
|
163
|
+
t.appendChild(n), a.replaceChild(t, i), this.#u = n, this.#f = s, this.#r = e, this.#s = this.#r.querySelector(".selected-items"), !this.isMultiple && this.#t.length > 0 && (this.#u.value = this.#t[0].value);
|
|
159
164
|
}
|
|
160
165
|
#O(t) {
|
|
161
166
|
const e = document.createElement("input");
|
|
162
167
|
e.className = "custom-single-select", e.id = `selectyc_text_box_${this.id}`, e.placeholder = this.singleLabel, e.value = this.#t.length === 0 ? null : this.#t[0].text, e.readOnly = !0;
|
|
163
168
|
const s = document.createElement("div");
|
|
164
|
-
return s.innerHTML = this.#D, t.appendChild(this.#I()), t.appendChild(e), t.appendChild(s), this.#
|
|
169
|
+
return s.innerHTML = this.#D, t.appendChild(this.#I()), t.appendChild(e), t.appendChild(s), this.#l = e, t;
|
|
165
170
|
}
|
|
166
171
|
#I() {
|
|
167
172
|
const t = document.createElement("input");
|
|
168
|
-
return t.type = "text", t.required = this.#
|
|
173
|
+
return t.type = "text", t.required = this.#w, t.tabIndex = -1, t.style.position = "absolute", t.style.opacity = "0", t.style.pointerEvents = "none", t.style.height = "0", t.style.width = "0", t.style.left = "50%", t.value = this.#t.length === 0 ? "" : this.#t[0].text, this.#m = t, t;
|
|
169
174
|
}
|
|
170
175
|
#M() {
|
|
171
176
|
const t = document.createElement("div");
|
|
@@ -179,7 +184,7 @@ class h {
|
|
|
179
184
|
i && clearTimeout(i), i = setTimeout(() => {
|
|
180
185
|
this.#_(n);
|
|
181
186
|
}, 70);
|
|
182
|
-
}), e.appendChild(s), this.#e = s, this.#
|
|
187
|
+
}), e.appendChild(s), this.#e = s, this.#o = e, t.appendChild(e), t;
|
|
183
188
|
}
|
|
184
189
|
#R() {
|
|
185
190
|
const t = document.createElement("input");
|
|
@@ -187,38 +192,34 @@ class h {
|
|
|
187
192
|
this.filter = t.value, this.#e.innerHTML = "", this.filter = t.value, this.#b();
|
|
188
193
|
}), this.#a = t, t;
|
|
189
194
|
}
|
|
190
|
-
#
|
|
195
|
+
#h(t) {
|
|
191
196
|
const e = document.createElement("div");
|
|
192
197
|
e.className = "select-option", e.setAttribute("data-value", t.id), e.textContent = t.text, this.#e.appendChild(e), e.addEventListener("click", () => {
|
|
193
|
-
t.id !== "sin_resultados" && (this.#
|
|
198
|
+
t.id !== "sin_resultados" && (this.#B(t.text, t.id), this.onSelect !== void 0 && this.onSelect(t.id, this), this.#n());
|
|
194
199
|
});
|
|
195
200
|
}
|
|
196
201
|
// Functions
|
|
197
|
-
#
|
|
202
|
+
#T() {
|
|
198
203
|
const t = document.getElementById(this.id);
|
|
199
|
-
this.name = t.name, this.#
|
|
204
|
+
this.name = t.name, this.#w = t.required, this.rootClassName = t.className, this.#S = t.getBoundingClientRect(), this.#x = document.documentElement.clientWidth, this.disabled = t.disabled, Array.from(t.options).forEach((e) => {
|
|
200
205
|
if (e.outerHTML.includes("selected")) {
|
|
201
206
|
const s = e.text, i = this.#c(e.value);
|
|
202
207
|
this.isMultiple ? this.#t.push({ value: i, text: s }) : this.#t[0] = { value: i, text: s };
|
|
203
208
|
}
|
|
204
|
-
this.#
|
|
209
|
+
this.#p.push({ id: this.#c(e.value), text: e.text }), this.data = this.#p;
|
|
205
210
|
});
|
|
206
211
|
}
|
|
207
|
-
#
|
|
208
|
-
if (this.filter = null, this.#
|
|
212
|
+
#y() {
|
|
213
|
+
if (this.filter = null, this.#i)
|
|
209
214
|
return;
|
|
210
|
-
this.#s.classList.remove(`round${this.bodyRound}`), this.#s.classList.add(`round${this.bodyRound}t`);
|
|
211
|
-
const t = this.#
|
|
212
|
-
this.#
|
|
213
|
-
}
|
|
214
|
-
repositionDropdown() {
|
|
215
|
-
const t = this.#i.getBoundingClientRect(), s = this.#i.getBoundingClientRect().top + window.scrollY, i = t.y - this.#w.y;
|
|
216
|
-
console.log(s), this.#d.style.top = i + "px";
|
|
215
|
+
this.#i = !0, this.#s.classList.remove(`round${this.bodyRound}`), this.#s.classList.add(`round${this.bodyRound}t`);
|
|
216
|
+
const t = this.#r.getBoundingClientRect();
|
|
217
|
+
this.#o.style.position = "fixed", this.#o.style.top = t.bottom + "px", this.#o.style.left = t.left + "px", this.#e.style.width = t.width + "px", this.#e.style.display = "block", this.searchInputActive && (this.#a.style.display = "block", this.#a.style.width = t.width + "px", this.#a.focus()), this.#b();
|
|
217
218
|
}
|
|
218
|
-
#
|
|
219
|
-
this.#
|
|
219
|
+
#n() {
|
|
220
|
+
this.#i && (this.#i = !1, this.#e.innerHTML = "", this.#e.style.display = "none", this.searchInputActive && (this.#a.style.display = "none"), this.#s.classList.add(`round${this.bodyRound}`));
|
|
220
221
|
}
|
|
221
|
-
async #
|
|
222
|
+
async #v() {
|
|
222
223
|
if (this.RS === void 0)
|
|
223
224
|
return this.data;
|
|
224
225
|
let t = { records: this.records, filter: this.filter };
|
|
@@ -226,43 +227,43 @@ class h {
|
|
|
226
227
|
const i = this.bodyData();
|
|
227
228
|
t = { ...t, ...i };
|
|
228
229
|
} else this.bodyData !== null && (t = { ...t, ...this.bodyData });
|
|
229
|
-
const e = await
|
|
230
|
-
return this.data = Array.from(new Map([...this.#
|
|
230
|
+
const e = await l.make(this.RS).addData(t).setMethod("POST").go(), s = Array.isArray(e) ? e : e.data;
|
|
231
|
+
return this.data = Array.from(new Map([...this.#p, ...s].map((i) => [i.id, i])).values()), this.data;
|
|
231
232
|
}
|
|
232
233
|
async #b() {
|
|
233
|
-
this.#
|
|
234
|
-
let t = await this.#
|
|
234
|
+
this.#h({ id: "loading", text: "cargando ..." }), this.records = 10 + this.#t.length, this.#g = !1;
|
|
235
|
+
let t = await this.#v();
|
|
235
236
|
const e = this.#t.map((s) => s.value);
|
|
236
237
|
this.#e.lastChild.dataset.value === "loading" && this.#e.removeChild(this.#e.lastChild), t.forEach((s) => {
|
|
237
|
-
s.text.toLowerCase().includes(this.#E.toLowerCase()) && !e.includes(s.id) && this.#
|
|
238
|
-
}), this.#e.hasChildNodes() || this.#
|
|
238
|
+
s.text.toLowerCase().includes(this.#E.toLowerCase()) && !e.includes(s.id) && this.#h(s);
|
|
239
|
+
}), this.#e.hasChildNodes() || this.#h({ id: "sin_resultados", text: "sin resultados ..." });
|
|
239
240
|
}
|
|
240
|
-
async #
|
|
241
|
-
const t = this.#t.map((
|
|
242
|
-
let e = this.filter === null ? "" : this.filter, s = this.data.map((
|
|
241
|
+
async #A() {
|
|
242
|
+
const t = this.#t.map((a) => a.value);
|
|
243
|
+
let e = this.filter === null ? "" : this.filter, s = this.data.map((a) => a.id);
|
|
243
244
|
this.records = this.records + 10 + this.#t.length;
|
|
244
|
-
let i = await this.#
|
|
245
|
+
let i = await this.#v();
|
|
245
246
|
this.#e.lastChild.dataset.value === "loading" && this.#e.removeChild(this.#e.lastChild);
|
|
246
247
|
const n = this.#e.lastChild.dataset.value;
|
|
247
|
-
i.forEach((
|
|
248
|
-
|
|
249
|
-
}), this.#
|
|
248
|
+
i.forEach((a) => {
|
|
249
|
+
a.text.toLowerCase().includes(e.toLowerCase()) && !t.includes(a.id) && !s.includes(a.id) && this.#h(a);
|
|
250
|
+
}), this.#g = n === this.#e.lastChild.dataset.value;
|
|
250
251
|
}
|
|
251
|
-
#
|
|
252
|
-
this.#t.find((i) => i.value === e) || (this.isMultiple || (this.#t = []), this.#t.push({ text: t, value: e })), this.#
|
|
252
|
+
#B(t, e) {
|
|
253
|
+
this.#t.find((i) => i.value === e) || (this.isMultiple || (this.#t = []), this.#t.push({ text: t, value: e })), this.#d(e);
|
|
253
254
|
}
|
|
254
|
-
#
|
|
255
|
-
this.onChange !== void 0 && this.onChange(t, this), this.isMultiple ? this.#
|
|
255
|
+
#d(t) {
|
|
256
|
+
this.onChange !== void 0 && this.onChange(t, this), this.isMultiple ? this.#C() : this.#k();
|
|
256
257
|
}
|
|
257
258
|
#k() {
|
|
258
|
-
this.#
|
|
259
|
-
const t = this.#
|
|
259
|
+
this.#l.value = null, this.#m.value = null, this.#l.value = this.#t.length > 0 ? this.#t[0].text : null, this.#m.value = this.#t.length > 0 ? this.#t[0].text : null, this.#l.placeholder = this.singleLabel, this.#u.value = this.#t.length > 0 ? this.#t[0].value : null;
|
|
260
|
+
const t = this.#l.parentNode, e = t.firstChild;
|
|
260
261
|
if (e.className === "remove-tag" && e.remove(), !this.clearButton || this.#t.length <= 0)
|
|
261
262
|
return;
|
|
262
263
|
const s = document.createElement("span");
|
|
263
264
|
s.dataset.value = this.#t[0].value, s.innerHTML = "x", s.className = "remove-tag", t.insertBefore(s, t.firstChild);
|
|
264
265
|
}
|
|
265
|
-
#
|
|
266
|
+
#C() {
|
|
266
267
|
if (this.#s.innerHTML = "", this.#t.length <= 0) {
|
|
267
268
|
this.#s.appendChild(document.createElement("div"));
|
|
268
269
|
return;
|
|
@@ -273,18 +274,18 @@ class h {
|
|
|
273
274
|
});
|
|
274
275
|
}
|
|
275
276
|
#H(t) {
|
|
276
|
-
this.#t = this.#t.filter((e) => this.#c(e.value) !== this.#c(t)), this.#
|
|
277
|
+
this.#t = this.#t.filter((e) => this.#c(e.value) !== this.#c(t)), this.#d(t);
|
|
277
278
|
}
|
|
278
279
|
#_(t) {
|
|
279
280
|
const { scrollTop: e, scrollHeight: s, clientHeight: i } = this.#e;
|
|
280
|
-
t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#
|
|
281
|
+
t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#g || e + (i + 1) >= s && (this.#h({ id: "loading", text: "cargando ..." }), this.#A()));
|
|
281
282
|
}
|
|
282
283
|
#c(t) {
|
|
283
284
|
return !isNaN(t) && !isNaN(parseFloat(t)) ? parseInt(t) : t;
|
|
284
285
|
}
|
|
285
286
|
async render() {
|
|
286
287
|
const t = document.getElementById(this.id), e = t === null ? !1 : t.outerHTML.includes("<select");
|
|
287
|
-
this.#
|
|
288
|
+
this.#f === void 0 && t !== null || e ? this.#L() : this.#f !== void 0 && this.#d();
|
|
288
289
|
}
|
|
289
290
|
}
|
|
290
291
|
export {
|
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
|
|
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 d{#t=[];#u;#p=[];#r;#f;#s;#e;#l;#a;#m;#o;#S;#x;#i=!1;#y=!1;#g=!1;#E="";#D='<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",this.disabled=!1,window.selects[t]=this}static set(t){return new d(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)}setDisableSelect(t){return this.disabled=t,this}#L(){this.#N(),this.#s.addEventListener("click",t=>{if(!this.disabled){if(t.target.classList.contains("remove-tag")){this.#H(t.target.getAttribute("data-value")),this.onUnselect!==void 0&&this.onUnselect(t.target.getAttribute("data-value"),this),this.#i&&this.#n(),this.#w();return}this.#i?this.#n():this.#w()}}),document.addEventListener("click",t=>{!this.#r.contains(t.target)&&!this.#e.contains(t.target)&&!t.target.classList.contains("remove-tag")&&this.#n()}),window.onresize=()=>{this.#n()},window.addEventListener("scroll",()=>{this.#n()}),this.isMultiple&&this.#C()}#N(){this.#R();const t=document.createElement("div");t.className="main-div-selectyc",t.style.width=this.width,t.id=`selectyc_main_div_${this.id}`;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.#I()),t.appendChild(e);const i=document.getElementById(this.id),n=document.createElement("input");n.name=i.name,n.setAttribute("data-id",i.id),this.rootClassName!==""&&(n.className=i.className),n.style.display="none";let l=i.parentNode;t.appendChild(n),l.replaceChild(t,i),this.#u=n,this.#f=s,this.#r=e,this.#s=this.#r.querySelector(".selected-items"),!this.isMultiple&&this.#t.length>0&&(this.#u.value=this.#t[0].value)}#O(t){const e=document.createElement("input");e.className="custom-single-select",e.id=`selectyc_text_box_${this.id}`,e.placeholder=this.singleLabel,e.value=this.#t.length===0?null:this.#t[0].text,e.readOnly=!0;const s=document.createElement("div");return s.innerHTML=this.#D,t.appendChild(this.#M()),t.appendChild(e),t.appendChild(s),this.#a=e,t}#M(){const t=document.createElement("input");return t.type="text",t.required=this.#y,t.tabIndex=-1,t.style.position="absolute",t.style.opacity="0",t.style.pointerEvents="none",t.style.height="0",t.style.width="0",t.style.left="50%",t.value=this.#t.length===0?"":this.#t[0].text,this.#m=t,t}#I(){const t=document.createElement("div");t.setAttribute("style","position:fixed; z-index:999;");const e=document.createElement("div");e.setAttribute("style","position:absolute;");const s=document.createElement("div");s.className="global-dropdown",this.searchInputActive&&e.appendChild(this.#T());let i;return s.addEventListener("scroll",n=>{i&&clearTimeout(i),i=setTimeout(()=>{this.#j(n)},70)}),e.appendChild(s),this.#e=s,this.#o=e,t.appendChild(e),t}#T(){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.#b()}),this.#l=t,t}#h(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.#B(t.text,t.id),this.onSelect!==void 0&&this.onSelect(t.id,this),this.#n())})}#R(){const t=document.getElementById(this.id);this.name=t.name,this.#y=t.required,this.rootClassName=t.className,this.#S=t.getBoundingClientRect(),this.#x=document.documentElement.clientWidth,this.disabled=t.disabled,Array.from(t.options).forEach(e=>{if(e.outerHTML.includes("selected")){const s=e.text,i=this.#c(e.value);this.isMultiple?this.#t.push({value:i,text:s}):this.#t[0]={value:i,text:s}}this.#p.push({id:this.#c(e.value),text:e.text}),this.data=this.#p})}#w(){if(this.filter=null,this.#i)return;this.#i=!0,this.#s.classList.remove(`round${this.bodyRound}`),this.#s.classList.add(`round${this.bodyRound}t`);const t=this.#r.getBoundingClientRect();this.#o.style.position="fixed",this.#o.style.top=t.bottom+"px",this.#o.style.left=t.left+"px",this.#e.style.width=t.width+"px",this.#e.style.display="block",this.searchInputActive&&(this.#l.style.display="block",this.#l.style.width=t.width+"px",this.#l.focus()),this.#b()}#n(){this.#i&&(this.#i=!1,this.#e.innerHTML="",this.#e.style.display="none",this.searchInputActive&&(this.#l.style.display="none"),this.#s.classList.add(`round${this.bodyRound}`))}async#v(){if(this.RS===void 0)return this.data;let t={records:this.records,filter:this.filter};if(typeof this.bodyData=="function"){const i=this.bodyData();t={...t,...i}}else this.bodyData!==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.#p,...s].map(i=>[i.id,i])).values()),this.data}async#b(){this.#h({id:"loading",text:"cargando ..."}),this.records=10+this.#t.length,this.#g=!1;let t=await this.#v();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.#E.toLowerCase())&&!e.includes(s.id)&&this.#h(s)}),this.#e.hasChildNodes()||this.#h({id:"sin_resultados",text:"sin resultados ..."})}async#A(){const t=this.#t.map(l=>l.value);let e=this.filter===null?"":this.filter,s=this.data.map(l=>l.id);this.records=this.records+10+this.#t.length;let i=await this.#v();this.#e.lastChild.dataset.value==="loading"&&this.#e.removeChild(this.#e.lastChild);const n=this.#e.lastChild.dataset.value;i.forEach(l=>{l.text.toLowerCase().includes(e.toLowerCase())&&!t.includes(l.id)&&!s.includes(l.id)&&this.#h(l)}),this.#g=n===this.#e.lastChild.dataset.value}#B(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),this.isMultiple?this.#C():this.#k()}#k(){this.#a.value=null,this.#m.value=null,this.#a.value=this.#t.length>0?this.#t[0].text:null,this.#m.value=this.#t.length>0?this.#t[0].text:null,this.#a.placeholder=this.singleLabel,this.#u.value=this.#t.length>0?this.#t[0].value:null;const t=this.#a.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)}#C(){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)})}#H(t){this.#t=this.#t.filter(e=>this.#c(e.value)!==this.#c(t)),this.#d(t)}#j(t){const{scrollTop:e,scrollHeight:s,clientHeight:i}=this.#e;t.target.lastChild!==null&&(t.target.lastChild.dataset.value==="loading"||this.#g||e+(i+1)>=s&&(this.#h({id:"loading",text:"cargando ..."}),this.#A()))}#c(t){return!isNaN(t)&&!isNaN(parseFloat(t))?parseInt(t):t}async render(){const t=document.getElementById(this.id),e=t===null?!1:t.outerHTML.includes("<select");this.#f===void 0&&t!==null||e?this.#L():this.#f!==void 0&&this.#d()}}h.selectyc=d,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|