@luis-angel-martin-dzul/vue-input-styles 0.0.43 → 0.0.45
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/README.md +121 -259
- package/dist/vue-input-styles.es.js +514 -521
- package/dist/vue-input-styles.umd.js +4 -4
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createElementBlock as i, openBlock as
|
|
1
|
+
import { createElementBlock as i, openBlock as o, normalizeClass as m, renderSlot as C, createElementVNode as d, createCommentVNode as c, toDisplayString as g, Fragment as x, renderList as p, withDirectives as y, createTextVNode as f, withModifiers as k, vModelText as v, mergeProps as w, vModelDynamic as _, vModelSelect as U, normalizeStyle as V } from "vue";
|
|
2
2
|
class b {
|
|
3
3
|
static type = {
|
|
4
4
|
success: "success",
|
|
@@ -15,62 +15,62 @@ class b {
|
|
|
15
15
|
info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>',
|
|
16
16
|
neutral: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM272 272C272 254.3 257.7 240 240 240C222.3 240 208 254.3 208 272C208 289.7 222.3 304 240 304C257.7 304 272 289.7 272 272zM400 304C417.7 304 432 289.7 432 272C432 254.3 417.7 240 400 240C382.3 240 368 254.3 368 272C368 289.7 382.3 304 400 304z"/></svg>'
|
|
17
17
|
};
|
|
18
|
-
static #e(
|
|
18
|
+
static #e(t, l, n = b.type.info, a = 4e3) {
|
|
19
19
|
b.ensureContainer();
|
|
20
20
|
const r = b.container.querySelector(`.alert-${n}`);
|
|
21
21
|
r && r.remove();
|
|
22
22
|
const s = document.createElement("div");
|
|
23
23
|
s.className = `alert alert-${n}`;
|
|
24
|
-
const
|
|
24
|
+
const u = b.iconMap[n] || "";
|
|
25
25
|
s.innerHTML = `
|
|
26
|
-
<div class="alert-icon">${
|
|
26
|
+
<div class="alert-icon">${u}</div>
|
|
27
27
|
<div class="alert-texts">
|
|
28
|
-
<div class="alert-title">${
|
|
29
|
-
<div class="alert-message">${
|
|
28
|
+
<div class="alert-title">${t}</div>
|
|
29
|
+
<div class="alert-message">${l}</div>
|
|
30
30
|
</div>
|
|
31
31
|
<div class="alert-close">×</div>
|
|
32
32
|
`, s.querySelector(".alert-close").addEventListener("click", () => {
|
|
33
33
|
b.remove(s);
|
|
34
|
-
}), b.container.appendChild(s), setTimeout(() => s.classList.add("show"), 10),
|
|
34
|
+
}), b.container.appendChild(s), setTimeout(() => s.classList.add("show"), 10), a > 0 && setTimeout(() => b.remove(s), a);
|
|
35
35
|
}
|
|
36
36
|
// Métodos públicos reutilizables
|
|
37
|
-
static success(
|
|
38
|
-
this.#e(
|
|
37
|
+
static success(t, l = "") {
|
|
38
|
+
this.#e(t, l, this.type.success);
|
|
39
39
|
}
|
|
40
|
-
static error(
|
|
41
|
-
this.#e(
|
|
40
|
+
static error(t, l = "") {
|
|
41
|
+
this.#e(t, l, this.type.error);
|
|
42
42
|
}
|
|
43
|
-
static warning(
|
|
44
|
-
this.#e(
|
|
43
|
+
static warning(t, l = "") {
|
|
44
|
+
this.#e(t, l, this.type.warning);
|
|
45
45
|
}
|
|
46
|
-
static info(
|
|
47
|
-
this.#e(
|
|
46
|
+
static info(t, l = "") {
|
|
47
|
+
this.#e(t, l, this.type.info);
|
|
48
48
|
}
|
|
49
|
-
static neutral(
|
|
50
|
-
this.#e(
|
|
49
|
+
static neutral(t, l = "") {
|
|
50
|
+
this.#e(t, l, this.type.neutral);
|
|
51
51
|
}
|
|
52
52
|
static ensureContainer() {
|
|
53
53
|
this.container || (this.container = document.createElement("div"), this.container.className = "alert-container", document.body.appendChild(this.container));
|
|
54
54
|
}
|
|
55
|
-
static remove(
|
|
56
|
-
|
|
55
|
+
static remove(t) {
|
|
56
|
+
t.classList.add("hide"), setTimeout(() => t.remove(), 250);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
for (const [n,
|
|
62
|
-
|
|
63
|
-
return
|
|
64
|
-
},
|
|
59
|
+
const h = (e, t) => {
|
|
60
|
+
const l = e.__vccOpts || e;
|
|
61
|
+
for (const [n, a] of t)
|
|
62
|
+
l[n] = a;
|
|
63
|
+
return l;
|
|
64
|
+
}, I = {
|
|
65
65
|
name: "ButtonStyle",
|
|
66
66
|
emits: ["click"],
|
|
67
67
|
props: {
|
|
68
|
+
type: { type: String, default: "button", validator: (e) => ["button", "submit"].includes(e) },
|
|
68
69
|
class: { type: String, default: "" },
|
|
69
70
|
variant: { type: String, default: "solid" },
|
|
70
71
|
color: { type: String, default: "gray" },
|
|
71
72
|
disabled: { type: Boolean, default: !1 },
|
|
72
|
-
delay: { type: String, default: "1.5" }
|
|
73
|
-
full: { type: Boolean, default: !1 }
|
|
73
|
+
delay: { type: String, default: "1.5" }
|
|
74
74
|
},
|
|
75
75
|
data() {
|
|
76
76
|
return {
|
|
@@ -83,49 +83,47 @@ const m = (t, l) => {
|
|
|
83
83
|
},
|
|
84
84
|
buttonClasses() {
|
|
85
85
|
if (this.class)
|
|
86
|
-
return `${this.class} disabled:opacity-60 disabled:cursor-not-allowed`;
|
|
87
|
-
const
|
|
88
|
-
"h-min font-semibold items-center justify-center rounded px-3 py-1.5 gap-1"
|
|
89
|
-
]
|
|
90
|
-
t.push(this.full ? "w-full flex" : "inline-flex");
|
|
91
|
-
const l = {
|
|
86
|
+
return `${this.class} cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed`;
|
|
87
|
+
const e = [
|
|
88
|
+
"h-min font-semibold items-center justify-center rounded px-3 py-1.5 gap-1 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
|
|
89
|
+
], t = {
|
|
92
90
|
solid: {
|
|
93
|
-
gray: "text-white bg-slate-600 enabled:hover:bg-slate-700
|
|
94
|
-
green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700
|
|
95
|
-
blue: "text-white bg-sky-600 enabled:hover:bg-sky-700
|
|
96
|
-
red: "text-white bg-rose-600 enabled:hover:bg-rose-700
|
|
97
|
-
yellow: "text-white bg-amber-600 enabled:hover:bg-amber-700
|
|
91
|
+
gray: "text-white bg-slate-600 enabled:hover:bg-slate-700",
|
|
92
|
+
green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700",
|
|
93
|
+
blue: "text-white bg-sky-600 enabled:hover:bg-sky-700",
|
|
94
|
+
red: "text-white bg-rose-600 enabled:hover:bg-rose-700",
|
|
95
|
+
yellow: "text-white bg-amber-600 enabled:hover:bg-amber-700"
|
|
98
96
|
},
|
|
99
97
|
outline: {
|
|
100
|
-
gray: "text-slate-700 enabled:hover:bg-slate-50 border border-slate-700
|
|
101
|
-
green: "text-emerald-700 enabled:hover:bg-emerald-50 border border-emerald-700
|
|
102
|
-
blue: "text-sky-700 enabled:hover:bg-sky-50 border border-sky-700
|
|
103
|
-
red: "text-rose-700 enabled:hover:bg-rose-50 border border-rose-700
|
|
104
|
-
yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700
|
|
98
|
+
gray: "text-slate-700 enabled:hover:bg-slate-50 border border-slate-700",
|
|
99
|
+
green: "text-emerald-700 enabled:hover:bg-emerald-50 border border-emerald-700",
|
|
100
|
+
blue: "text-sky-700 enabled:hover:bg-sky-50 border border-sky-700",
|
|
101
|
+
red: "text-rose-700 enabled:hover:bg-rose-50 border border-rose-700",
|
|
102
|
+
yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700"
|
|
105
103
|
}
|
|
106
104
|
};
|
|
107
|
-
return
|
|
105
|
+
return e.push(t[this.variant][this.color]), e;
|
|
108
106
|
}
|
|
109
107
|
},
|
|
110
108
|
methods: {
|
|
111
|
-
handleClick(
|
|
112
|
-
this.isDisabled || (this.$emit("click",
|
|
109
|
+
handleClick(e) {
|
|
110
|
+
this.isDisabled || (this.$emit("click", e), this.internalDisabled = !0, setTimeout(() => {
|
|
113
111
|
this.internalDisabled = !1;
|
|
114
112
|
}, 1e3 * Number(this.delay)));
|
|
115
113
|
}
|
|
116
114
|
}
|
|
117
|
-
},
|
|
118
|
-
function
|
|
119
|
-
return
|
|
115
|
+
}, B = ["type", "disabled"];
|
|
116
|
+
function T(e, t, l, n, a, r) {
|
|
117
|
+
return o(), i("button", {
|
|
118
|
+
type: l.type,
|
|
119
|
+
onClick: t[0] || (t[0] = (...s) => r.handleClick && r.handleClick(...s)),
|
|
120
120
|
disabled: r.isDisabled,
|
|
121
|
-
|
|
122
|
-
onClick: l[0] || (l[0] = (...s) => r.handleClick && r.handleClick(...s)),
|
|
123
|
-
class: g(r.buttonClasses)
|
|
121
|
+
class: m(r.buttonClasses)
|
|
124
122
|
}, [
|
|
125
|
-
|
|
126
|
-
], 10,
|
|
123
|
+
C(e.$slots, "default")
|
|
124
|
+
], 10, B);
|
|
127
125
|
}
|
|
128
|
-
const
|
|
126
|
+
const q = /* @__PURE__ */ h(I, [["render", T]]), L = {
|
|
129
127
|
name: "CheckStyle",
|
|
130
128
|
props: {
|
|
131
129
|
label: { type: String, default: "" },
|
|
@@ -153,18 +151,18 @@ const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
|
|
|
153
151
|
watch: {
|
|
154
152
|
modelValue: {
|
|
155
153
|
immediate: !0,
|
|
156
|
-
handler(
|
|
157
|
-
Array.isArray(
|
|
154
|
+
handler(e) {
|
|
155
|
+
Array.isArray(e) ? this.realSelection = [...e] : e ? this.realSelection = [e] : this.realSelection = [];
|
|
158
156
|
}
|
|
159
157
|
}
|
|
160
158
|
},
|
|
161
159
|
methods: {
|
|
162
|
-
getValue(
|
|
163
|
-
return this.returnType === "object" ?
|
|
160
|
+
getValue(e) {
|
|
161
|
+
return this.returnType === "object" ? e : this.returnType === "text" ? e.name : e.id;
|
|
164
162
|
},
|
|
165
|
-
isChecked(
|
|
166
|
-
const
|
|
167
|
-
return this.realSelection.includes(
|
|
163
|
+
isChecked(e) {
|
|
164
|
+
const t = this.getValue(e);
|
|
165
|
+
return this.realSelection.includes(t);
|
|
168
166
|
},
|
|
169
167
|
emitExternal() {
|
|
170
168
|
if (!this.returnAll && this.realSelection.length === this.list.length) {
|
|
@@ -176,61 +174,61 @@ const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
|
|
|
176
174
|
this.realSelection.length ? [...this.realSelection] : ""
|
|
177
175
|
);
|
|
178
176
|
},
|
|
179
|
-
onChange(
|
|
180
|
-
const
|
|
181
|
-
this.realSelection.includes(
|
|
182
|
-
(
|
|
183
|
-
) : this.all ? this.realSelection.push(
|
|
177
|
+
onChange(e) {
|
|
178
|
+
const t = this.getValue(e);
|
|
179
|
+
this.realSelection.includes(t) ? this.realSelection = this.realSelection.filter(
|
|
180
|
+
(l) => l !== t
|
|
181
|
+
) : this.all ? this.realSelection.push(t) : this.realSelection = [t], this.emitExternal();
|
|
184
182
|
},
|
|
185
183
|
toggleSelectAll() {
|
|
186
|
-
this.all && (this.isAllSelected ? this.realSelection = [] : this.realSelection = this.list.map((
|
|
184
|
+
this.all && (this.isAllSelected ? this.realSelection = [] : this.realSelection = this.list.map((e) => this.getValue(e)), this.emitExternal());
|
|
187
185
|
}
|
|
188
186
|
}
|
|
189
|
-
}, N = { class: "w-full" },
|
|
187
|
+
}, N = { class: "w-full" }, M = { class: "flex items-center justify-between" }, A = { class: "block text-sm font-medium text-gray-700" }, z = {
|
|
190
188
|
key: 0,
|
|
191
189
|
class: "flex items-center gap-2 select-none"
|
|
192
|
-
},
|
|
193
|
-
function K(t, l,
|
|
194
|
-
return
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
190
|
+
}, F = ["id", "checked"], P = ["for"], E = ["id", "checked", "onChange"], j = ["for"];
|
|
191
|
+
function K(e, t, l, n, a, r) {
|
|
192
|
+
return o(), i("div", N, [
|
|
193
|
+
d("div", M, [
|
|
194
|
+
d("h3", A, g(l.label), 1),
|
|
195
|
+
l.all ? (o(), i("div", z, [
|
|
196
|
+
d("input", {
|
|
199
197
|
type: "checkbox",
|
|
200
198
|
id: "todos-" + r.getUUID,
|
|
201
199
|
checked: r.isAllSelected,
|
|
202
|
-
onChange:
|
|
203
|
-
class: "w-4 h-4
|
|
204
|
-
}, null, 40,
|
|
205
|
-
|
|
200
|
+
onChange: t[0] || (t[0] = (...s) => r.toggleSelectAll && r.toggleSelectAll(...s)),
|
|
201
|
+
class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
|
|
202
|
+
}, null, 40, F),
|
|
203
|
+
d("label", {
|
|
206
204
|
for: "todos-" + r.getUUID,
|
|
207
205
|
class: "text-sm text-gray-600 uppercase truncate"
|
|
208
|
-
}, " Seleccionar todos ", 8,
|
|
209
|
-
])) :
|
|
206
|
+
}, " Seleccionar todos ", 8, P)
|
|
207
|
+
])) : c("", !0)
|
|
210
208
|
]),
|
|
211
|
-
|
|
212
|
-
class:
|
|
209
|
+
d("div", {
|
|
210
|
+
class: m(["max-h-48 overflow-auto space-y-1", l.grid])
|
|
213
211
|
}, [
|
|
214
|
-
(
|
|
212
|
+
(o(!0), i(x, null, p(l.list, (s) => (o(), i("div", {
|
|
215
213
|
key: s.id,
|
|
216
214
|
class: "flex items-center gap-2 select-none"
|
|
217
215
|
}, [
|
|
218
|
-
|
|
216
|
+
d("input", {
|
|
219
217
|
type: "checkbox",
|
|
220
218
|
id: r.getUUID + "-" + s.id,
|
|
221
219
|
checked: r.isChecked(s),
|
|
222
|
-
onChange: (
|
|
223
|
-
class: "w-4 h-4
|
|
224
|
-
}, null, 40,
|
|
225
|
-
|
|
220
|
+
onChange: (u) => r.onChange(s),
|
|
221
|
+
class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
|
|
222
|
+
}, null, 40, E),
|
|
223
|
+
d("label", {
|
|
226
224
|
for: r.getUUID + "-" + s.id,
|
|
227
225
|
class: "truncate text-gray-700"
|
|
228
|
-
},
|
|
226
|
+
}, g(s.name), 9, j)
|
|
229
227
|
]))), 128))
|
|
230
228
|
], 2)
|
|
231
229
|
]);
|
|
232
230
|
}
|
|
233
|
-
const W = /* @__PURE__ */
|
|
231
|
+
const W = /* @__PURE__ */ h(L, [["render", K]]), O = {
|
|
234
232
|
name: "ComboBoxStyle",
|
|
235
233
|
props: {
|
|
236
234
|
modelValue: [String, Number, Object, null],
|
|
@@ -243,284 +241,268 @@ const W = /* @__PURE__ */ m(q, [["render", K]]), O = {
|
|
|
243
241
|
},
|
|
244
242
|
data() {
|
|
245
243
|
return {
|
|
244
|
+
uuid: crypto.randomUUID(),
|
|
246
245
|
search: "",
|
|
246
|
+
searchCopy: "",
|
|
247
247
|
open: !1
|
|
248
248
|
};
|
|
249
249
|
},
|
|
250
|
-
watch: {
|
|
251
|
-
modelValue(t) {
|
|
252
|
-
const l = this.list.find((e) => e.id === t);
|
|
253
|
-
l && (this.search = l.name);
|
|
254
|
-
}
|
|
255
|
-
},
|
|
256
250
|
computed: {
|
|
257
|
-
getUUID() {
|
|
258
|
-
return crypto.randomUUID();
|
|
259
|
-
},
|
|
260
251
|
filteredList() {
|
|
261
252
|
return this.search ? this.list.filter(
|
|
262
|
-
(
|
|
253
|
+
(e) => e.name.toLowerCase().includes(this.search.toLowerCase())
|
|
263
254
|
) : this.list;
|
|
264
255
|
},
|
|
265
256
|
model: {
|
|
266
257
|
get() {
|
|
267
258
|
return this.modelValue;
|
|
268
259
|
},
|
|
269
|
-
set(
|
|
270
|
-
this.$emit("update:modelValue",
|
|
260
|
+
set(e) {
|
|
261
|
+
this.$emit("update:modelValue", e);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
watch: {
|
|
266
|
+
modelValue: {
|
|
267
|
+
immediate: !0,
|
|
268
|
+
handler(e) {
|
|
269
|
+
if (e === null || e === "") {
|
|
270
|
+
this.search = "", this.searchCopy = "";
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
const t = this.list.find((l) => l.id === e);
|
|
274
|
+
t && (this.search = t.name, this.searchCopy = t.name);
|
|
271
275
|
}
|
|
272
276
|
}
|
|
273
277
|
},
|
|
274
278
|
methods: {
|
|
275
|
-
selectItem(
|
|
276
|
-
this.model =
|
|
279
|
+
selectItem(e) {
|
|
280
|
+
this.model = e.id, this.search = e.name, this.searchCopy = e.name, this.open = !1;
|
|
281
|
+
},
|
|
282
|
+
clearItem() {
|
|
283
|
+
this.disabled || (this.model = null, this.search = "", this.searchCopy = "", this.open = !1);
|
|
277
284
|
},
|
|
278
285
|
closeWithDelay() {
|
|
279
286
|
setTimeout(() => {
|
|
280
|
-
this.open = !1;
|
|
281
|
-
},
|
|
287
|
+
this.model ? this.search.trim() !== this.searchCopy && (this.search = this.searchCopy) : this.search = "", this.open = !1;
|
|
288
|
+
}, 120);
|
|
282
289
|
}
|
|
283
290
|
}
|
|
284
|
-
}, H = { class: "w-full" }, R = ["for"], G = {
|
|
291
|
+
}, H = { class: "w-full relative" }, R = ["for"], G = { class: "text-sm font-medium text-gray-700" }, J = {
|
|
285
292
|
key: 0,
|
|
286
|
-
class: "text-red-800 ml-
|
|
287
|
-
},
|
|
293
|
+
class: "text-red-800 ml-1"
|
|
294
|
+
}, Q = {
|
|
288
295
|
key: 0,
|
|
289
296
|
class: "relative"
|
|
290
|
-
},
|
|
291
|
-
key:
|
|
292
|
-
class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
|
|
293
|
-
}, $ = {
|
|
294
|
-
key: 0,
|
|
295
|
-
class: "w-full text-gray-800 bg-white px-3 py-2"
|
|
296
|
-
}, ee = ["onClick"], te = {
|
|
297
|
-
key: 1,
|
|
298
|
-
class: "relative w-full"
|
|
299
|
-
}, le = ["id", "placeholder"], re = {
|
|
300
|
-
key: 0,
|
|
297
|
+
}, X = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, Y = ["id", "placeholder", "disabled", "required"], Z = ["id", "placeholder", "disabled", "required"], $ = {
|
|
298
|
+
key: 2,
|
|
301
299
|
class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
|
|
302
|
-
},
|
|
300
|
+
}, ee = {
|
|
303
301
|
key: 0,
|
|
304
|
-
class: "
|
|
305
|
-
},
|
|
306
|
-
function
|
|
307
|
-
return
|
|
308
|
-
|
|
309
|
-
class: "
|
|
310
|
-
for:
|
|
302
|
+
class: "px-3 py-2 text-gray-800"
|
|
303
|
+
}, te = ["onMousedown"];
|
|
304
|
+
function le(e, t, l, n, a, r) {
|
|
305
|
+
return o(), i("div", H, [
|
|
306
|
+
d("label", {
|
|
307
|
+
class: "flex justify-between",
|
|
308
|
+
for: a.uuid
|
|
311
309
|
}, [
|
|
312
|
-
|
|
313
|
-
|
|
310
|
+
d("div", G, [
|
|
311
|
+
f(g(l.label) + " ", 1),
|
|
312
|
+
l.required ? (o(), i("span", J, "*")) : c("", !0)
|
|
313
|
+
]),
|
|
314
|
+
r.model ? (o(), i("span", {
|
|
315
|
+
key: 0,
|
|
316
|
+
class: "text-xs px-2.5 rounded text-red-800 hover:bg-red-50 cursor-pointer",
|
|
317
|
+
onMousedown: t[0] || (t[0] = k(() => {
|
|
318
|
+
}, ["prevent"])),
|
|
319
|
+
onClick: t[1] || (t[1] = (...s) => r.clearItem && r.clearItem(...s))
|
|
320
|
+
}, "Limpiar ", 32)) : c("", !0)
|
|
314
321
|
], 8, R),
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
322
|
+
e.$slots.icon ? (o(), i("div", Q, [
|
|
323
|
+
d("div", X, [
|
|
324
|
+
C(e.$slots, "icon")
|
|
318
325
|
]),
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
id: r.getUUID,
|
|
322
|
-
type: "text",
|
|
323
|
-
"onUpdate:modelValue": l[0] || (l[0] = (s) => d.search = s),
|
|
324
|
-
placeholder: e.placeholder
|
|
325
|
-
}, { disabled: e.disabled, required: e.required }, {
|
|
326
|
-
class: "w-full text-gray-800 bg-white pl-10 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed",
|
|
327
|
-
onFocus: l[1] || (l[1] = (s) => !e.disabled && (d.open = !0)),
|
|
328
|
-
onInput: l[2] || (l[2] = (s) => !e.disabled && (d.open = !0)),
|
|
329
|
-
onBlur: l[3] || (l[3] = (...s) => r.closeWithDelay && r.closeWithDelay(...s))
|
|
330
|
-
}), null, 16, Y), [
|
|
331
|
-
[C, d.search]
|
|
332
|
-
]),
|
|
333
|
-
d.open && !e.disabled ? (a(), i("div", Z, [
|
|
334
|
-
r.filteredList.length === 0 ? (a(), i("div", $, u(e.oEmpty), 1)) : h("", !0),
|
|
335
|
-
(a(!0), i(x, null, p(r.filteredList, (s, c) => (a(), i("div", {
|
|
336
|
-
key: c,
|
|
337
|
-
onClick: (v) => r.selectItem(s),
|
|
338
|
-
class: "w-full text-gray-800 bg-white hover:bg-gray-100 px-3 py-2"
|
|
339
|
-
}, u(s.name), 9, ee))), 128))
|
|
340
|
-
])) : h("", !0)
|
|
341
|
-
])
|
|
342
|
-
])) : (a(), i("div", te, [
|
|
343
|
-
w(o("input", y({
|
|
344
|
-
id: r.getUUID,
|
|
326
|
+
y(d("input", {
|
|
327
|
+
id: a.uuid,
|
|
345
328
|
type: "text",
|
|
346
|
-
"onUpdate:modelValue":
|
|
347
|
-
placeholder:
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
329
|
+
"onUpdate:modelValue": t[2] || (t[2] = (s) => a.search = s),
|
|
330
|
+
placeholder: l.placeholder,
|
|
331
|
+
disabled: l.disabled,
|
|
332
|
+
required: l.required,
|
|
333
|
+
onBlur: t[3] || (t[3] = (...s) => r.closeWithDelay && r.closeWithDelay(...s)),
|
|
334
|
+
onFocus: t[4] || (t[4] = (s) => a.open = !l.disabled),
|
|
335
|
+
onInput: t[5] || (t[5] = (s) => a.open = !l.disabled),
|
|
336
|
+
class: "w-full pl-10 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600"
|
|
337
|
+
}, null, 40, Y), [
|
|
338
|
+
[v, a.search]
|
|
339
|
+
])
|
|
340
|
+
])) : y((o(), i("input", {
|
|
341
|
+
key: 1,
|
|
342
|
+
id: a.uuid,
|
|
343
|
+
type: "text",
|
|
344
|
+
"onUpdate:modelValue": t[6] || (t[6] = (s) => a.search = s),
|
|
345
|
+
placeholder: l.placeholder,
|
|
346
|
+
disabled: l.disabled,
|
|
347
|
+
required: l.required,
|
|
348
|
+
onBlur: t[7] || (t[7] = (...s) => r.closeWithDelay && r.closeWithDelay(...s)),
|
|
349
|
+
onFocus: t[8] || (t[8] = (s) => a.open = !l.disabled),
|
|
350
|
+
onInput: t[9] || (t[9] = (s) => a.open = !l.disabled),
|
|
351
|
+
class: "w-full px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600"
|
|
352
|
+
}, null, 40, Z)), [
|
|
353
|
+
[v, a.search]
|
|
354
|
+
]),
|
|
355
|
+
a.open && !l.disabled ? (o(), i("div", $, [
|
|
356
|
+
r.filteredList.length === 0 ? (o(), i("div", ee, g(l.oEmpty), 1)) : c("", !0),
|
|
357
|
+
(o(!0), i(x, null, p(r.filteredList, (s) => (o(), i("div", {
|
|
358
|
+
key: s.id,
|
|
359
|
+
onMousedown: k((u) => r.selectItem(s), ["prevent"]),
|
|
360
|
+
class: "px-3 py-2 cursor-pointer hover:bg-gray-100"
|
|
361
|
+
}, g(s.name), 41, te))), 128))
|
|
362
|
+
])) : c("", !0)
|
|
365
363
|
]);
|
|
366
364
|
}
|
|
367
|
-
const
|
|
365
|
+
const re = /* @__PURE__ */ h(O, [["render", le]]), se = {
|
|
368
366
|
name: "DateTimeStyle",
|
|
369
367
|
props: {
|
|
370
368
|
modelValue: String,
|
|
371
369
|
disabled: { type: Boolean, default: !1 },
|
|
372
370
|
required: { type: Boolean, default: !1 },
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
371
|
+
mode: {
|
|
372
|
+
type: String,
|
|
373
|
+
default: "datetime",
|
|
374
|
+
validator(e) {
|
|
375
|
+
return ["date", "time", "datetime", "datetime2"].includes(e);
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
label: { type: String, default: "" },
|
|
377
379
|
secondsMode: { type: String, default: "default" }
|
|
378
380
|
},
|
|
379
381
|
data() {
|
|
380
382
|
return {
|
|
381
383
|
localDate: "",
|
|
382
|
-
localTime: ""
|
|
384
|
+
localTime: "",
|
|
385
|
+
localDateTime: ""
|
|
383
386
|
};
|
|
384
387
|
},
|
|
385
388
|
computed: {
|
|
389
|
+
getUUID() {
|
|
390
|
+
return crypto.randomUUID();
|
|
391
|
+
},
|
|
386
392
|
model: {
|
|
387
393
|
get() {
|
|
388
394
|
return this.modelValue;
|
|
389
395
|
},
|
|
390
|
-
set(
|
|
391
|
-
this.$emit("update:modelValue",
|
|
396
|
+
set(e) {
|
|
397
|
+
this.$emit("update:modelValue", e);
|
|
392
398
|
}
|
|
393
399
|
},
|
|
394
|
-
showDate() {
|
|
395
|
-
return ["date", "datetime", "datetime2"].includes(this.mode);
|
|
396
|
-
},
|
|
397
|
-
showTime() {
|
|
398
|
-
return ["time", "datetime"].includes(this.mode);
|
|
399
|
-
},
|
|
400
400
|
segundos() {
|
|
401
401
|
return this.secondsMode === "max" ? "59" : "01";
|
|
402
|
-
},
|
|
403
|
-
dateInputClass() {
|
|
404
|
-
let t = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
|
|
405
|
-
return this.showDate && this.showTime ? t + " rounded-l" : t + " rounded";
|
|
406
|
-
},
|
|
407
|
-
timeInputClass() {
|
|
408
|
-
let t = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
|
|
409
|
-
return this.showDate && this.showTime ? t + " rounded-r" : t + " rounded";
|
|
410
|
-
},
|
|
411
|
-
gridClass() {
|
|
412
|
-
return this.showDate && this.showTime ? "grid grid-cols-2" : "";
|
|
413
402
|
}
|
|
414
403
|
},
|
|
415
404
|
watch: {
|
|
416
405
|
modelValue: {
|
|
417
406
|
immediate: !0,
|
|
418
|
-
handler(
|
|
419
|
-
if (!
|
|
420
|
-
this.localDate = "", this.localTime = "";
|
|
407
|
+
handler(e) {
|
|
408
|
+
if (!e) {
|
|
409
|
+
this.localDate = "", this.localTime = "", this.localDateTime = "";
|
|
421
410
|
return;
|
|
422
411
|
}
|
|
423
|
-
|
|
424
|
-
this.localDate = t;
|
|
425
|
-
else if (this.mode === "time")
|
|
426
|
-
this.localTime = t;
|
|
427
|
-
else if (this.mode === "datetime") {
|
|
428
|
-
const [l, e] = t.split("T");
|
|
429
|
-
this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
|
|
430
|
-
} else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
|
|
431
|
-
}
|
|
432
|
-
},
|
|
433
|
-
mode: {
|
|
434
|
-
immediate: !0,
|
|
435
|
-
handler() {
|
|
436
|
-
this.parseValue(this.modelValue);
|
|
412
|
+
this.mode === "date" ? this.localDate = e : this.mode === "time" ? this.localTime = e.slice(0, 5) : this.mode === "datetime" ? this.localDateTime = e.slice(0, 16) : this.mode === "datetime2" && (this.localDate = e.split("T")[0] || "");
|
|
437
413
|
}
|
|
438
414
|
}
|
|
439
415
|
},
|
|
440
416
|
methods: {
|
|
441
|
-
parseValue(t) {
|
|
442
|
-
if (!t) {
|
|
443
|
-
this.localDate = "", this.localTime = "";
|
|
444
|
-
return;
|
|
445
|
-
}
|
|
446
|
-
if (this.mode === "date")
|
|
447
|
-
this.localDate = t, this.localTime = "";
|
|
448
|
-
else if (this.mode === "time")
|
|
449
|
-
this.localDate = "", this.localTime = t;
|
|
450
|
-
else if (this.mode === "datetime") {
|
|
451
|
-
const [l, e] = t.split("T");
|
|
452
|
-
this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
|
|
453
|
-
} else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
|
|
454
|
-
this.emitValue();
|
|
455
|
-
},
|
|
456
417
|
emitValue() {
|
|
457
|
-
let
|
|
458
|
-
this.mode === "date" ?
|
|
418
|
+
let e = "";
|
|
419
|
+
this.mode === "date" ? e = this.localDate || "" : this.mode === "time" ? e = this.localTime || "" : this.mode === "datetime" ? this.localDateTime ? e = `${this.localDateTime}:${this.segundos}.000` : e = "" : this.mode === "datetime2" && (this.localDate ? e = this.secondsMode === "max" ? `${this.localDate}T23:59:59.000` : `${this.localDate}T00:01:00.000` : e = ""), this.model = e;
|
|
459
420
|
}
|
|
460
421
|
}
|
|
461
|
-
},
|
|
422
|
+
}, ie = { class: "w-full" }, oe = ["for"], de = {
|
|
462
423
|
key: 0,
|
|
463
424
|
class: "text-red-800 ml-2"
|
|
464
|
-
};
|
|
465
|
-
function
|
|
466
|
-
return
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
]),
|
|
471
|
-
o("div", {
|
|
472
|
-
class: g(r.gridClass)
|
|
425
|
+
}, ae = ["id"], ne = ["id"], ue = ["id"];
|
|
426
|
+
function ce(e, t, l, n, a, r) {
|
|
427
|
+
return o(), i("div", ie, [
|
|
428
|
+
d("label", {
|
|
429
|
+
for: r.getUUID,
|
|
430
|
+
class: "block text-sm font-medium text-gray-700"
|
|
473
431
|
}, [
|
|
474
|
-
|
|
432
|
+
l.required ? (o(), i("span", de, "*")) : c("", !0),
|
|
433
|
+
f(" " + g(l.label), 1)
|
|
434
|
+
], 8, oe),
|
|
435
|
+
d("div", null, [
|
|
436
|
+
l.mode === "date" || l.mode === "datetime2" ? y((o(), i("input", w({
|
|
475
437
|
key: 0,
|
|
438
|
+
id: r.getUUID,
|
|
476
439
|
type: "date"
|
|
477
|
-
}, { disabled:
|
|
478
|
-
"onUpdate:modelValue":
|
|
479
|
-
onInput:
|
|
480
|
-
class:
|
|
481
|
-
}), null, 16)), [
|
|
482
|
-
[
|
|
483
|
-
]) :
|
|
484
|
-
|
|
440
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
441
|
+
"onUpdate:modelValue": t[0] || (t[0] = (s) => a.localDate = s),
|
|
442
|
+
onInput: t[1] || (t[1] = (...s) => r.emitValue && r.emitValue(...s)),
|
|
443
|
+
class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
|
|
444
|
+
}), null, 16, ae)), [
|
|
445
|
+
[v, a.localDate]
|
|
446
|
+
]) : c("", !0),
|
|
447
|
+
l.mode === "time" ? y((o(), i("input", w({
|
|
485
448
|
key: 1,
|
|
449
|
+
id: r.getUUID,
|
|
486
450
|
type: "time"
|
|
487
|
-
}, { disabled:
|
|
488
|
-
"onUpdate:modelValue":
|
|
489
|
-
onInput:
|
|
490
|
-
class:
|
|
491
|
-
}), null, 16)), [
|
|
492
|
-
[
|
|
493
|
-
]) :
|
|
494
|
-
|
|
451
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
452
|
+
"onUpdate:modelValue": t[2] || (t[2] = (s) => a.localTime = s),
|
|
453
|
+
onInput: t[3] || (t[3] = (...s) => r.emitValue && r.emitValue(...s)),
|
|
454
|
+
class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
|
|
455
|
+
}), null, 16, ne)), [
|
|
456
|
+
[v, a.localTime]
|
|
457
|
+
]) : c("", !0),
|
|
458
|
+
l.mode === "datetime" ? y((o(), i("input", w({
|
|
459
|
+
key: 2,
|
|
460
|
+
id: r.getUUID,
|
|
461
|
+
type: "datetime-local"
|
|
462
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
463
|
+
"onUpdate:modelValue": t[4] || (t[4] = (s) => a.localDateTime = s),
|
|
464
|
+
onInput: t[5] || (t[5] = (...s) => r.emitValue && r.emitValue(...s)),
|
|
465
|
+
class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
|
|
466
|
+
}), null, 16, ue)), [
|
|
467
|
+
[v, a.localDateTime]
|
|
468
|
+
]) : c("", !0)
|
|
469
|
+
])
|
|
495
470
|
]);
|
|
496
471
|
}
|
|
497
|
-
const ge = /* @__PURE__ */
|
|
472
|
+
const ge = /* @__PURE__ */ h(se, [["render", ce]]), me = {
|
|
498
473
|
name: "InputDecimalStyle",
|
|
499
474
|
props: {
|
|
500
475
|
modelValue: { type: [String, Number], default: "" },
|
|
501
476
|
label: { type: String, default: "" },
|
|
502
477
|
placeholder: { type: String, default: "" },
|
|
478
|
+
digits: { type: String, default: "10" },
|
|
503
479
|
decimals: { type: String, default: "2" },
|
|
504
|
-
|
|
505
|
-
disabled: { type: Boolean, default: !1 }
|
|
506
|
-
|
|
480
|
+
required: { type: Boolean, default: !1 },
|
|
481
|
+
disabled: { type: Boolean, default: !1 }
|
|
482
|
+
},
|
|
483
|
+
data() {
|
|
484
|
+
return {
|
|
485
|
+
isFocused: !1
|
|
486
|
+
};
|
|
507
487
|
},
|
|
508
488
|
computed: {
|
|
509
489
|
getUUID() {
|
|
510
490
|
return crypto.randomUUID();
|
|
511
491
|
},
|
|
512
|
-
|
|
492
|
+
displayValue() {
|
|
493
|
+
if (this.isFocused)
|
|
494
|
+
return this.modelValue?.toString() ?? "";
|
|
513
495
|
if (this.modelValue === "" || this.modelValue === null) return "";
|
|
514
|
-
const
|
|
515
|
-
return isNaN(
|
|
516
|
-
minimumFractionDigits:
|
|
496
|
+
const e = Number(this.modelValue);
|
|
497
|
+
return isNaN(e) ? "" : e.toLocaleString("en-US", {
|
|
498
|
+
minimumFractionDigits: Number(this.decimals),
|
|
517
499
|
maximumFractionDigits: Number(this.decimals)
|
|
518
500
|
});
|
|
519
501
|
}
|
|
520
502
|
},
|
|
521
503
|
methods: {
|
|
522
|
-
onKeyDown(
|
|
523
|
-
const
|
|
504
|
+
onKeyDown(e) {
|
|
505
|
+
const t = [
|
|
524
506
|
"Backspace",
|
|
525
507
|
"Delete",
|
|
526
508
|
"Tab",
|
|
@@ -533,83 +515,94 @@ const ge = /* @__PURE__ */ m(de, [["render", he]]), me = {
|
|
|
533
515
|
"Home",
|
|
534
516
|
"End"
|
|
535
517
|
];
|
|
536
|
-
if (
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
n > e.indexOf(".") && r.length >= Number(this.decimals) && t.preventDefault();
|
|
542
|
-
}
|
|
518
|
+
if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x", "z"].includes(e.key.toLowerCase()) || t.includes(e.key)) return;
|
|
519
|
+
const l = e.target.value, n = e.target.selectionStart, a = e.target.selectionStart !== e.target.selectionEnd, [r = "", s = ""] = l.split("."), u = l.includes(".");
|
|
520
|
+
if (e.key >= "0" && e.key <= "9") {
|
|
521
|
+
if (!u || n <= r.length) {
|
|
522
|
+
!a && r.length >= Number(this.digits) && e.preventDefault();
|
|
543
523
|
return;
|
|
544
524
|
}
|
|
545
|
-
|
|
525
|
+
if (u && n > r.length) {
|
|
526
|
+
!a && s.length >= Number(this.decimals) && e.preventDefault();
|
|
527
|
+
return;
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
if (e.key === ".") {
|
|
531
|
+
(Number(this.decimals) === 0 || u) && e.preventDefault();
|
|
532
|
+
return;
|
|
546
533
|
}
|
|
534
|
+
e.preventDefault();
|
|
547
535
|
},
|
|
548
|
-
onInput(
|
|
549
|
-
let
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
e.length > 2 && (l = e[0] + "." + e.slice(1).join("")), e[1] && e[1].length > Number(this.decimals) && (l = e[0] + "." + e[1].slice(0, Number(this.decimals))), this.$emit("update:modelValue", l);
|
|
536
|
+
onInput(e) {
|
|
537
|
+
let t = e.target.value.replace(/[^0-9.]/g, "");
|
|
538
|
+
const [l, n = ""] = t.split(".");
|
|
539
|
+
this.$emit("update:modelValue", n ? `${l}.${n}` : l);
|
|
553
540
|
},
|
|
554
|
-
onPaste(
|
|
555
|
-
let
|
|
556
|
-
Number(this.
|
|
557
|
-
const n = e.split(".");
|
|
558
|
-
n.length > 2 && (e = n[0] + "." + n.slice(1).join("")), n[1] && n[1].length > Number(this.decimals) && (e = n[0] + "." + n[1].slice(0, Number(this.decimals))), e !== "" && this.$emit("update:modelValue", e);
|
|
541
|
+
onPaste(e) {
|
|
542
|
+
let t = e.clipboardData.getData("text").replace(/[^0-9.]/g, ""), [l, n = ""] = t.split(".");
|
|
543
|
+
l.length > Number(this.digits) || n.length > Number(this.decimals) || this.$emit("update:modelValue", n ? `${l}.${n}` : l);
|
|
559
544
|
},
|
|
560
545
|
onBlur() {
|
|
561
|
-
|
|
562
|
-
|
|
546
|
+
if (this.isFocused = !1, this.modelValue === "" || this.modelValue === ".") {
|
|
547
|
+
this.$emit("update:modelValue", "");
|
|
548
|
+
return;
|
|
549
|
+
}
|
|
550
|
+
const e = Number(this.modelValue);
|
|
551
|
+
isNaN(e) || this.$emit("update:modelValue", e.toFixed(Number(this.decimals)));
|
|
563
552
|
}
|
|
564
553
|
}
|
|
565
|
-
},
|
|
554
|
+
}, he = { class: "w-full" }, be = ["for"], ye = {
|
|
566
555
|
key: 0,
|
|
567
556
|
class: "text-red-800 ml-2"
|
|
568
|
-
},
|
|
557
|
+
}, fe = {
|
|
569
558
|
key: 0,
|
|
570
559
|
class: "relative"
|
|
571
|
-
},
|
|
572
|
-
function
|
|
573
|
-
return
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
560
|
+
}, xe = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, pe = ["id", "value", "disabled", "placeholder"], we = ["id", "value", "disabled", "placeholder"];
|
|
561
|
+
function ve(e, t, l, n, a, r) {
|
|
562
|
+
return o(), i("div", he, [
|
|
563
|
+
d("label", {
|
|
564
|
+
for: r.getUUID,
|
|
565
|
+
class: "block text-sm font-medium text-gray-700 mb-1"
|
|
577
566
|
}, [
|
|
578
|
-
|
|
579
|
-
f(" " +
|
|
580
|
-
], 8,
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
567
|
+
l.required ? (o(), i("span", ye, "*")) : c("", !0),
|
|
568
|
+
f(" " + g(l.label), 1)
|
|
569
|
+
], 8, be),
|
|
570
|
+
e.$slots.icon ? (o(), i("div", fe, [
|
|
571
|
+
d("div", xe, [
|
|
572
|
+
C(e.$slots, "icon")
|
|
584
573
|
]),
|
|
585
|
-
|
|
574
|
+
d("input", {
|
|
586
575
|
type: "text",
|
|
587
576
|
id: r.getUUID,
|
|
588
|
-
value: r.
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
577
|
+
value: r.displayValue,
|
|
578
|
+
onFocus: t[0] || (t[0] = (s) => a.isFocused = !0),
|
|
579
|
+
onBlur: t[1] || (t[1] = (...s) => r.onBlur && r.onBlur(...s)),
|
|
580
|
+
onKeydown: t[2] || (t[2] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
|
|
581
|
+
onInput: t[3] || (t[3] = (...s) => r.onInput && r.onInput(...s)),
|
|
582
|
+
onPaste: t[4] || (t[4] = k((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
|
|
583
|
+
disabled: l.disabled,
|
|
592
584
|
inputmode: "decimal",
|
|
593
|
-
placeholder:
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
key: 1,
|
|
585
|
+
placeholder: l.placeholder,
|
|
586
|
+
class: "w-full text-gray-800 bg-white px-3 py-2 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed text-right"
|
|
587
|
+
}, null, 40, pe)
|
|
588
|
+
])) : c("", !0),
|
|
589
|
+
d("input", {
|
|
599
590
|
type: "text",
|
|
600
591
|
id: r.getUUID,
|
|
601
|
-
value: r.
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
592
|
+
value: r.displayValue,
|
|
593
|
+
onFocus: t[5] || (t[5] = (s) => a.isFocused = !0),
|
|
594
|
+
onBlur: t[6] || (t[6] = (...s) => r.onBlur && r.onBlur(...s)),
|
|
595
|
+
onKeydown: t[7] || (t[7] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
|
|
596
|
+
onInput: t[8] || (t[8] = (...s) => r.onInput && r.onInput(...s)),
|
|
597
|
+
onPaste: t[9] || (t[9] = k((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
|
|
598
|
+
disabled: l.disabled,
|
|
605
599
|
inputmode: "decimal",
|
|
606
|
-
placeholder:
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
}, { disabled: e.disabled, required: e.required }, { class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 text-right focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed" }), null, 16, ve))
|
|
600
|
+
placeholder: l.placeholder,
|
|
601
|
+
class: "w-full text-gray-800 bg-white px-3 py-2 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed text-right"
|
|
602
|
+
}, null, 40, we)
|
|
610
603
|
]);
|
|
611
604
|
}
|
|
612
|
-
const
|
|
605
|
+
const Ce = /* @__PURE__ */ h(me, [["render", ve]]), Se = {
|
|
613
606
|
name: "InputStyle",
|
|
614
607
|
props: {
|
|
615
608
|
modelValue: { type: [String, Number], default: "" },
|
|
@@ -628,57 +621,57 @@ const _e = /* @__PURE__ */ m(me, [["render", Ce]]), Se = {
|
|
|
628
621
|
get() {
|
|
629
622
|
return this.modelValue;
|
|
630
623
|
},
|
|
631
|
-
set(
|
|
632
|
-
this.$emit("update:modelValue",
|
|
624
|
+
set(e) {
|
|
625
|
+
this.$emit("update:modelValue", e);
|
|
633
626
|
}
|
|
634
627
|
}
|
|
635
628
|
}
|
|
636
|
-
}, ke = { class: "w-full" },
|
|
629
|
+
}, ke = { class: "w-full" }, _e = ["for"], De = {
|
|
637
630
|
key: 0,
|
|
638
631
|
class: "text-red-800 ml-2"
|
|
639
|
-
},
|
|
632
|
+
}, Ue = {
|
|
640
633
|
key: 0,
|
|
641
634
|
class: "relative"
|
|
642
|
-
},
|
|
643
|
-
function
|
|
644
|
-
return
|
|
645
|
-
|
|
635
|
+
}, Ve = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, Ie = ["id", "type", "maxlength", "placeholder"], Be = ["id", "type", "maxlength", "placeholder"];
|
|
636
|
+
function Te(e, t, l, n, a, r) {
|
|
637
|
+
return o(), i("div", ke, [
|
|
638
|
+
d("label", {
|
|
646
639
|
class: "block text-sm font-medium text-gray-700",
|
|
647
640
|
for: r.getUUID
|
|
648
641
|
}, [
|
|
649
|
-
|
|
650
|
-
f(" " +
|
|
651
|
-
], 8,
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
642
|
+
l.required ? (o(), i("span", De, "*")) : c("", !0),
|
|
643
|
+
f(" " + g(l.label), 1)
|
|
644
|
+
], 8, _e),
|
|
645
|
+
e.$slots.icon ? (o(), i("div", Ue, [
|
|
646
|
+
d("div", Ve, [
|
|
647
|
+
C(e.$slots, "icon")
|
|
655
648
|
]),
|
|
656
|
-
|
|
649
|
+
y(d("input", w({
|
|
657
650
|
id: r.getUUID,
|
|
658
|
-
type:
|
|
659
|
-
maxlength:
|
|
660
|
-
placeholder:
|
|
661
|
-
}, { disabled:
|
|
662
|
-
"onUpdate:modelValue":
|
|
651
|
+
type: l.type,
|
|
652
|
+
maxlength: l.maxlength ? Number(l.maxlength) : null,
|
|
653
|
+
placeholder: l.placeholder
|
|
654
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
655
|
+
"onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s),
|
|
663
656
|
class: "w-full text-gray-800 bg-white pl-8 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
|
|
664
657
|
}), null, 16, Ie), [
|
|
665
|
-
[
|
|
658
|
+
[_, r.model]
|
|
666
659
|
])
|
|
667
|
-
])) :
|
|
660
|
+
])) : y((o(), i("input", w({
|
|
668
661
|
key: 1,
|
|
669
662
|
id: r.getUUID,
|
|
670
|
-
type:
|
|
671
|
-
maxlength:
|
|
672
|
-
placeholder:
|
|
673
|
-
}, { disabled:
|
|
674
|
-
"onUpdate:modelValue":
|
|
663
|
+
type: l.type,
|
|
664
|
+
maxlength: l.maxlength ? Number(l.maxlength) : null,
|
|
665
|
+
placeholder: l.placeholder
|
|
666
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
667
|
+
"onUpdate:modelValue": t[1] || (t[1] = (s) => r.model = s),
|
|
675
668
|
class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
|
|
676
669
|
}), null, 16, Be)), [
|
|
677
|
-
[
|
|
670
|
+
[_, r.model]
|
|
678
671
|
])
|
|
679
672
|
]);
|
|
680
673
|
}
|
|
681
|
-
const qe = /* @__PURE__ */
|
|
674
|
+
const qe = /* @__PURE__ */ h(Se, [["render", Te]]), Le = {
|
|
682
675
|
name: "SelectStyle",
|
|
683
676
|
props: {
|
|
684
677
|
modelValue: [String, Number, Object, null],
|
|
@@ -699,44 +692,44 @@ const qe = /* @__PURE__ */ m(Se, [["render", Le]]), Ne = {
|
|
|
699
692
|
get() {
|
|
700
693
|
return this.modelValue;
|
|
701
694
|
},
|
|
702
|
-
set(
|
|
703
|
-
this.$emit("update:modelValue",
|
|
695
|
+
set(e) {
|
|
696
|
+
this.$emit("update:modelValue", e);
|
|
704
697
|
}
|
|
705
698
|
}
|
|
706
699
|
}
|
|
707
|
-
},
|
|
700
|
+
}, Ne = { class: "w-full" }, Me = ["for"], Ae = {
|
|
708
701
|
key: 0,
|
|
709
702
|
class: "text-red-800 ml-2"
|
|
710
|
-
},
|
|
703
|
+
}, ze = ["id"], Fe = {
|
|
711
704
|
value: "",
|
|
712
705
|
disabled: ""
|
|
713
|
-
},
|
|
714
|
-
function
|
|
715
|
-
return
|
|
716
|
-
|
|
706
|
+
}, Pe = ["value"];
|
|
707
|
+
function Ee(e, t, l, n, a, r) {
|
|
708
|
+
return o(), i("div", Ne, [
|
|
709
|
+
d("label", {
|
|
717
710
|
class: "block text-sm font-medium text-gray-700",
|
|
718
711
|
for: r.getUUID
|
|
719
712
|
}, [
|
|
720
|
-
|
|
721
|
-
f(" " +
|
|
713
|
+
l.required ? (o(), i("span", Ae, "*")) : c("", !0),
|
|
714
|
+
f(" " + g(l.label), 1)
|
|
722
715
|
], 8, Me),
|
|
723
|
-
|
|
724
|
-
"onUpdate:modelValue":
|
|
725
|
-
}, { disabled:
|
|
716
|
+
y(d("select", w({
|
|
717
|
+
"onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s)
|
|
718
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
726
719
|
id: r.getUUID,
|
|
727
720
|
class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
|
|
728
721
|
}), [
|
|
729
|
-
|
|
730
|
-
(
|
|
731
|
-
key:
|
|
722
|
+
d("option", Fe, g(l.list.length > 0 ? l.option : l.oEmpty), 1),
|
|
723
|
+
(o(!0), i(x, null, p(l.list, (s, u) => (o(), i("option", {
|
|
724
|
+
key: u,
|
|
732
725
|
value: s.id
|
|
733
|
-
},
|
|
734
|
-
], 16,
|
|
726
|
+
}, g(s.text), 9, Pe))), 128))
|
|
727
|
+
], 16, ze), [
|
|
735
728
|
[U, r.model]
|
|
736
729
|
])
|
|
737
730
|
]);
|
|
738
731
|
}
|
|
739
|
-
const
|
|
732
|
+
const je = /* @__PURE__ */ h(Le, [["render", Ee]]), Ke = {
|
|
740
733
|
props: {
|
|
741
734
|
modelValue: { type: Number, default: 0 },
|
|
742
735
|
steps: { type: Array, required: !0 },
|
|
@@ -757,8 +750,8 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
|
|
|
757
750
|
get() {
|
|
758
751
|
return this.modelValue;
|
|
759
752
|
},
|
|
760
|
-
set(
|
|
761
|
-
this.$emit("update:modelValue",
|
|
753
|
+
set(e) {
|
|
754
|
+
this.$emit("update:modelValue", e);
|
|
762
755
|
}
|
|
763
756
|
},
|
|
764
757
|
solid() {
|
|
@@ -771,22 +764,22 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
|
|
|
771
764
|
};
|
|
772
765
|
},
|
|
773
766
|
barActive() {
|
|
774
|
-
return this.solid[this.color].split(" ").find((
|
|
767
|
+
return this.solid[this.color].split(" ").find((e) => e.startsWith("bg-"));
|
|
775
768
|
},
|
|
776
769
|
lineActive() {
|
|
777
770
|
return this.barActive;
|
|
778
771
|
},
|
|
779
772
|
progressWidth() {
|
|
780
|
-
const
|
|
781
|
-
return this.step === 0 ? 10 : this.step / (
|
|
773
|
+
const e = this.steps.length;
|
|
774
|
+
return this.step === 0 ? 10 : this.step / (e - 1) * 100;
|
|
782
775
|
}
|
|
783
776
|
},
|
|
784
777
|
methods: {
|
|
785
|
-
circleClass(
|
|
786
|
-
return this.step ===
|
|
778
|
+
circleClass(e) {
|
|
779
|
+
return this.step === e ? `${this.barActive} text-white` : this.step > e ? `${this.barActive} text-white opacity-90` : "bg-white text-gray-400 border-gray-300";
|
|
787
780
|
},
|
|
788
|
-
textClass(
|
|
789
|
-
return this.step >=
|
|
781
|
+
textClass(e) {
|
|
782
|
+
return this.step >= e ? this.barActive.replace("bg-", "text-") : "text-gray-400";
|
|
790
783
|
},
|
|
791
784
|
next() {
|
|
792
785
|
this.step < this.steps.length - 1 && this.step++;
|
|
@@ -794,136 +787,136 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
|
|
|
794
787
|
previous() {
|
|
795
788
|
this.step > 0 && this.step--;
|
|
796
789
|
},
|
|
797
|
-
select(
|
|
798
|
-
this.step =
|
|
790
|
+
select(e) {
|
|
791
|
+
this.step = e;
|
|
799
792
|
},
|
|
800
793
|
submitForm() {
|
|
801
794
|
this.$emit("submit");
|
|
802
795
|
}
|
|
803
796
|
}
|
|
804
|
-
},
|
|
797
|
+
}, We = { class: "flex items-center gap-6 w-full" }, Oe = ["disabled"], He = { class: "flex-1" }, Re = {
|
|
805
798
|
key: 0,
|
|
806
799
|
class: "flex items-center"
|
|
807
|
-
},
|
|
800
|
+
}, Ge = ["onClick"], Je = {
|
|
808
801
|
key: 0,
|
|
809
802
|
class: "w-4 h-4",
|
|
810
803
|
fill: "none",
|
|
811
804
|
stroke: "currentColor",
|
|
812
805
|
viewBox: "0 0 24 24"
|
|
813
|
-
},
|
|
806
|
+
}, Qe = {
|
|
814
807
|
key: 1,
|
|
815
808
|
class: "text-sm"
|
|
816
|
-
},
|
|
809
|
+
}, Xe = {
|
|
817
810
|
key: 1,
|
|
818
811
|
class: "w-full"
|
|
819
|
-
},
|
|
812
|
+
}, Ye = {
|
|
820
813
|
key: 0,
|
|
821
814
|
class: "text-xs mb-1 block"
|
|
822
|
-
},
|
|
823
|
-
function
|
|
824
|
-
return
|
|
825
|
-
|
|
815
|
+
}, Ze = { class: "w-full h-3 rounded-full bg-gray-200 overflow-hidden relative" }, $e = { key: 1 };
|
|
816
|
+
function et(e, t, l, n, a, r) {
|
|
817
|
+
return o(), i("div", We, [
|
|
818
|
+
l.button ? (o(), i("button", {
|
|
826
819
|
key: 0,
|
|
827
820
|
type: "button",
|
|
828
821
|
disabled: r.step === 0,
|
|
829
|
-
onClick:
|
|
830
|
-
class:
|
|
822
|
+
onClick: t[0] || (t[0] = (...s) => r.previous && r.previous(...s)),
|
|
823
|
+
class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
|
|
831
824
|
}, [
|
|
832
|
-
|
|
825
|
+
t[3] || (t[3] = d("svg", {
|
|
833
826
|
class: "w-5 h-5",
|
|
834
827
|
fill: "none",
|
|
835
828
|
stroke: "currentColor",
|
|
836
829
|
viewBox: "0 0 24 24"
|
|
837
830
|
}, [
|
|
838
|
-
|
|
831
|
+
d("path", {
|
|
839
832
|
"stroke-linecap": "round",
|
|
840
833
|
"stroke-linejoin": "round",
|
|
841
834
|
"stroke-width": "2",
|
|
842
835
|
d: "M15 19l-7-7 7-7"
|
|
843
836
|
})
|
|
844
837
|
], -1)),
|
|
845
|
-
f(" " +
|
|
846
|
-
], 10,
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
(
|
|
850
|
-
key:
|
|
851
|
-
class:
|
|
838
|
+
f(" " + g(l.btnPrevious), 1)
|
|
839
|
+
], 10, Oe)) : c("", !0),
|
|
840
|
+
d("div", He, [
|
|
841
|
+
l.type === "circle" ? (o(), i("div", Re, [
|
|
842
|
+
(o(!0), i(x, null, p(l.steps, (s, u) => (o(), i("div", {
|
|
843
|
+
key: u,
|
|
844
|
+
class: m(["flex items-center", u < l.steps.length - 1 ? "flex-1" : ""])
|
|
852
845
|
}, [
|
|
853
|
-
|
|
854
|
-
class:
|
|
855
|
-
onClick: (
|
|
846
|
+
d("div", {
|
|
847
|
+
class: m(["flex flex-col items-center relative", l.selected ? "cursor-pointer" : "pointer-events-none"]),
|
|
848
|
+
onClick: (S) => r.select(u)
|
|
856
849
|
}, [
|
|
857
|
-
|
|
858
|
-
class:
|
|
850
|
+
d("div", {
|
|
851
|
+
class: m(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", r.circleClass(u)])
|
|
859
852
|
}, [
|
|
860
|
-
r.step >
|
|
861
|
-
|
|
853
|
+
r.step > u ? (o(), i("svg", Je, [...t[4] || (t[4] = [
|
|
854
|
+
d("path", {
|
|
862
855
|
"stroke-linecap": "round",
|
|
863
856
|
"stroke-linejoin": "round",
|
|
864
857
|
"stroke-width": "3",
|
|
865
858
|
d: "M5 13l4 4L19 7"
|
|
866
859
|
}, null, -1)
|
|
867
|
-
])])) : (
|
|
860
|
+
])])) : (o(), i("span", Qe, g(u + 1), 1))
|
|
868
861
|
], 2),
|
|
869
|
-
|
|
862
|
+
l.text === "all" || l.text === "only" && r.step === u ? (o(), i("span", {
|
|
870
863
|
key: 0,
|
|
871
|
-
class:
|
|
872
|
-
},
|
|
873
|
-
], 10,
|
|
874
|
-
|
|
864
|
+
class: m(["absolute -top-5 text-xs font-medium whitespace-nowrap transition-colors duration-200", r.textClass(u)])
|
|
865
|
+
}, g(s), 3)) : c("", !0)
|
|
866
|
+
], 10, Ge),
|
|
867
|
+
u < l.steps.length - 1 ? (o(), i("div", {
|
|
875
868
|
key: 0,
|
|
876
|
-
class:
|
|
877
|
-
}, null, 2)) :
|
|
869
|
+
class: m(["flex-1 h-2 mx-3 rounded transition-colors duration-200", r.step > u ? r.lineActive : "bg-gray-300"])
|
|
870
|
+
}, null, 2)) : c("", !0)
|
|
878
871
|
], 2))), 128))
|
|
879
|
-
])) :
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
class:
|
|
872
|
+
])) : l.type === "linear" ? (o(), i("div", Xe, [
|
|
873
|
+
l.text === "all" ? (o(), i("span", Ye, g(Math.round(r.progressWidth)) + "% ", 1)) : c("", !0),
|
|
874
|
+
d("div", Ze, [
|
|
875
|
+
t[6] || (t[6] = d("div", { class: "absolute inset-0" }, null, -1)),
|
|
876
|
+
d("div", {
|
|
877
|
+
class: m(["h-full rounded-full transition-all duration-300 relative shadow-md", r.barActive]),
|
|
885
878
|
style: V({ width: r.progressWidth + "%" })
|
|
886
|
-
}, [...
|
|
887
|
-
|
|
879
|
+
}, [...t[5] || (t[5] = [
|
|
880
|
+
d("div", { class: "absolute inset-0 bg-white/20 mix-blend-overlay animate-pulse" }, null, -1)
|
|
888
881
|
])], 6)
|
|
889
882
|
])
|
|
890
|
-
])) :
|
|
883
|
+
])) : c("", !0)
|
|
891
884
|
]),
|
|
892
|
-
|
|
893
|
-
r.step <
|
|
885
|
+
l.button ? (o(), i("div", $e, [
|
|
886
|
+
r.step < l.steps.length - 1 ? (o(), i("button", {
|
|
894
887
|
key: 0,
|
|
895
888
|
type: "button",
|
|
896
|
-
onClick:
|
|
897
|
-
class:
|
|
889
|
+
onClick: t[1] || (t[1] = (...s) => r.next && r.next(...s)),
|
|
890
|
+
class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
|
|
898
891
|
}, [
|
|
899
|
-
f(
|
|
900
|
-
|
|
892
|
+
f(g(l.btnNext) + " ", 1),
|
|
893
|
+
t[7] || (t[7] = d("svg", {
|
|
901
894
|
class: "w-5 h-5",
|
|
902
895
|
fill: "none",
|
|
903
896
|
stroke: "currentColor",
|
|
904
897
|
viewBox: "0 0 24 24"
|
|
905
898
|
}, [
|
|
906
|
-
|
|
899
|
+
d("path", {
|
|
907
900
|
"stroke-linecap": "round",
|
|
908
901
|
"stroke-linejoin": "round",
|
|
909
902
|
"stroke-width": "2",
|
|
910
903
|
d: "M9 5l7 7-7 7"
|
|
911
904
|
})
|
|
912
905
|
], -1))
|
|
913
|
-
], 2)) : (
|
|
906
|
+
], 2)) : (o(), i("button", {
|
|
914
907
|
key: 1,
|
|
915
908
|
type: "button",
|
|
916
|
-
onClick:
|
|
917
|
-
class:
|
|
909
|
+
onClick: t[2] || (t[2] = (...s) => r.submitForm && r.submitForm(...s)),
|
|
910
|
+
class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
|
|
918
911
|
}, [
|
|
919
|
-
f(
|
|
920
|
-
|
|
912
|
+
f(g(l.btnFinish) + " ", 1),
|
|
913
|
+
t[8] || (t[8] = d("svg", {
|
|
921
914
|
class: "w-5 h-5",
|
|
922
915
|
fill: "none",
|
|
923
916
|
stroke: "currentColor",
|
|
924
917
|
viewBox: "0 0 24 24"
|
|
925
918
|
}, [
|
|
926
|
-
|
|
919
|
+
d("path", {
|
|
927
920
|
"stroke-linecap": "round",
|
|
928
921
|
"stroke-linejoin": "round",
|
|
929
922
|
"stroke-width": "2",
|
|
@@ -931,57 +924,57 @@ function tt(t, l, e, n, d, r) {
|
|
|
931
924
|
})
|
|
932
925
|
], -1))
|
|
933
926
|
], 2))
|
|
934
|
-
])) :
|
|
927
|
+
])) : c("", !0)
|
|
935
928
|
]);
|
|
936
929
|
}
|
|
937
|
-
const
|
|
930
|
+
const tt = /* @__PURE__ */ h(Ke, [["render", et]]), lt = {
|
|
938
931
|
name: "TableStyle",
|
|
939
932
|
props: {
|
|
940
933
|
columns: { type: Array, required: !0 },
|
|
941
934
|
rows: { type: Array, default: () => [] }
|
|
942
935
|
}
|
|
943
|
-
},
|
|
944
|
-
function
|
|
945
|
-
return
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
(
|
|
950
|
-
key:
|
|
936
|
+
}, rt = { class: "w-full overflow-x-auto bg-white border border-gray-300 rounded shadow-sm" }, st = { class: "min-w-full" }, it = { class: "bg-gray-800" }, ot = { key: 1 }, dt = { key: 0 }, at = ["colspan"];
|
|
937
|
+
function nt(e, t, l, n, a, r) {
|
|
938
|
+
return o(), i("div", rt, [
|
|
939
|
+
d("table", st, [
|
|
940
|
+
d("thead", null, [
|
|
941
|
+
d("tr", it, [
|
|
942
|
+
(o(!0), i(x, null, p(l.columns, (s, u) => (o(), i("th", {
|
|
943
|
+
key: u,
|
|
951
944
|
class: "px-4 py-1.5 text-left text-sm font-semibold text-white border-b border-gray-600"
|
|
952
|
-
},
|
|
945
|
+
}, g(s.label), 1))), 128))
|
|
953
946
|
])
|
|
954
947
|
]),
|
|
955
|
-
|
|
956
|
-
(
|
|
957
|
-
key:
|
|
948
|
+
d("tbody", null, [
|
|
949
|
+
(o(!0), i(x, null, p(l.rows, (s, u) => (o(), i("tr", {
|
|
950
|
+
key: u,
|
|
958
951
|
class: "hover:bg-gray-100 transition-colors cursor-default"
|
|
959
952
|
}, [
|
|
960
|
-
(
|
|
953
|
+
(o(!0), i(x, null, p(l.columns, (S, D) => (o(), i("td", {
|
|
961
954
|
key: D,
|
|
962
955
|
class: "px-4 py-1.5 text-sm text-gray-700 border-b border-gray-200"
|
|
963
956
|
}, [
|
|
964
|
-
|
|
957
|
+
e.$slots[S.field] ? C(e.$slots, S.field, {
|
|
965
958
|
key: 0,
|
|
966
959
|
row: s
|
|
967
|
-
}) : (
|
|
960
|
+
}) : (o(), i("span", ot, g(s[S.field]), 1))
|
|
968
961
|
]))), 128))
|
|
969
962
|
]))), 128)),
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
colspan:
|
|
963
|
+
l.rows.length === 0 ? (o(), i("tr", dt, [
|
|
964
|
+
d("td", {
|
|
965
|
+
colspan: l.columns.length,
|
|
973
966
|
class: "px-4 py-10 text-center text-gray-500 text-sm bg-gray-50"
|
|
974
|
-
}, [...
|
|
975
|
-
|
|
976
|
-
|
|
967
|
+
}, [...t[0] || (t[0] = [
|
|
968
|
+
d("div", { class: "flex flex-col items-center gap-3" }, [
|
|
969
|
+
d("span", { class: "text-gray-600 font-medium" }, "No hay datos para mostrar")
|
|
977
970
|
], -1)
|
|
978
|
-
])], 8,
|
|
979
|
-
])) :
|
|
971
|
+
])], 8, at)
|
|
972
|
+
])) : c("", !0)
|
|
980
973
|
])
|
|
981
974
|
])
|
|
982
975
|
]);
|
|
983
976
|
}
|
|
984
|
-
const
|
|
977
|
+
const ut = /* @__PURE__ */ h(lt, [["render", nt]]), ct = {
|
|
985
978
|
name: "TextAreaStyle",
|
|
986
979
|
props: {
|
|
987
980
|
modelValue: String,
|
|
@@ -1001,45 +994,45 @@ const ct = /* @__PURE__ */ m(rt, [["render", ut]]), ht = {
|
|
|
1001
994
|
get() {
|
|
1002
995
|
return this.modelValue;
|
|
1003
996
|
},
|
|
1004
|
-
set(
|
|
1005
|
-
this.$emit("update:modelValue",
|
|
997
|
+
set(e) {
|
|
998
|
+
this.$emit("update:modelValue", e);
|
|
1006
999
|
}
|
|
1007
1000
|
}
|
|
1008
1001
|
}
|
|
1009
|
-
}, gt = { class: "w-full" }, mt = { class: "flex justify-between" },
|
|
1002
|
+
}, gt = { class: "w-full" }, mt = { class: "flex justify-between" }, ht = ["for"], bt = {
|
|
1010
1003
|
key: 0,
|
|
1011
1004
|
class: "text-red-800 ml-2"
|
|
1012
|
-
},
|
|
1013
|
-
function
|
|
1014
|
-
return
|
|
1015
|
-
|
|
1016
|
-
|
|
1005
|
+
}, yt = ["for"], ft = ["id", "placeholder", "maxlength", "rows"];
|
|
1006
|
+
function xt(e, t, l, n, a, r) {
|
|
1007
|
+
return o(), i("div", gt, [
|
|
1008
|
+
d("div", mt, [
|
|
1009
|
+
d("label", {
|
|
1017
1010
|
class: "block text-sm font-medium text-gray-700",
|
|
1018
1011
|
for: r.getUUID
|
|
1019
1012
|
}, [
|
|
1020
|
-
|
|
1021
|
-
f(" " +
|
|
1022
|
-
], 8,
|
|
1023
|
-
|
|
1013
|
+
l.required ? (o(), i("span", bt, "*")) : c("", !0),
|
|
1014
|
+
f(" " + g(l.label), 1)
|
|
1015
|
+
], 8, ht),
|
|
1016
|
+
l.note ? (o(), i("label", {
|
|
1024
1017
|
key: 0,
|
|
1025
1018
|
class: "block text-xs text-gray-700",
|
|
1026
1019
|
for: r.getUUID
|
|
1027
|
-
},
|
|
1020
|
+
}, g(l.note), 9, yt)) : c("", !0)
|
|
1028
1021
|
]),
|
|
1029
|
-
|
|
1030
|
-
"onUpdate:modelValue":
|
|
1022
|
+
y(d("textarea", w({
|
|
1023
|
+
"onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s),
|
|
1031
1024
|
id: r.getUUID,
|
|
1032
|
-
placeholder:
|
|
1033
|
-
}, { disabled:
|
|
1034
|
-
maxlength:
|
|
1035
|
-
rows: Number(
|
|
1025
|
+
placeholder: l.placeholder
|
|
1026
|
+
}, { disabled: l.disabled, required: l.required }, {
|
|
1027
|
+
maxlength: l.maxlength ? Number(l.maxlength) : null,
|
|
1028
|
+
rows: Number(l.row),
|
|
1036
1029
|
class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed resize-none"
|
|
1037
|
-
}), null, 16,
|
|
1038
|
-
[
|
|
1030
|
+
}), null, 16, ft), [
|
|
1031
|
+
[v, r.model]
|
|
1039
1032
|
])
|
|
1040
1033
|
]);
|
|
1041
1034
|
}
|
|
1042
|
-
const
|
|
1035
|
+
const pt = /* @__PURE__ */ h(ct, [["render", xt]]), wt = {
|
|
1043
1036
|
name: "ToggleStyle",
|
|
1044
1037
|
props: {
|
|
1045
1038
|
modelValue: { type: Boolean, default: !1 },
|
|
@@ -1055,8 +1048,8 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
|
|
|
1055
1048
|
get() {
|
|
1056
1049
|
return this.modelValue;
|
|
1057
1050
|
},
|
|
1058
|
-
set(
|
|
1059
|
-
this.$emit("update:modelValue",
|
|
1051
|
+
set(e) {
|
|
1052
|
+
this.$emit("update:modelValue", e);
|
|
1060
1053
|
}
|
|
1061
1054
|
},
|
|
1062
1055
|
shapeToggle() {
|
|
@@ -1066,24 +1059,24 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
|
|
|
1066
1059
|
}[this.shape];
|
|
1067
1060
|
},
|
|
1068
1061
|
computedClasses() {
|
|
1069
|
-
const
|
|
1062
|
+
const e = {
|
|
1070
1063
|
gray: "bg-slate-600 hover:bg-slate-700 border border-gray-800 cursor-pointer",
|
|
1071
1064
|
green: "bg-emerald-600 hover:bg-emerald-700 border border-green-700 cursor-pointer",
|
|
1072
1065
|
blue: "bg-sky-600 hover:bg-sky-700 border border-blue-700 cursor-pointer",
|
|
1073
1066
|
red: "bg-rose-600 hover:bg-rose-700 border border-red-700 cursor-pointer",
|
|
1074
1067
|
yellow: "bg-amber-600 hover:bg-amber-700 border border-yellow-600 cursor-pointer"
|
|
1075
1068
|
};
|
|
1076
|
-
return this.model ?
|
|
1069
|
+
return this.model ? e[this.color] : "bg-gray-200 border border-gray-300";
|
|
1077
1070
|
},
|
|
1078
1071
|
disabledColorClasses() {
|
|
1079
|
-
const
|
|
1072
|
+
const e = {
|
|
1080
1073
|
gray: "bg-slate-600 border border-slate-300 cursor-not-allowed opacity-60",
|
|
1081
1074
|
green: "bg-emerald-600 border border-emerald-300 cursor-not-allowed opacity-60",
|
|
1082
1075
|
blue: "bg-sky-600 border border-sky-300 cursor-not-allowed opacity-60",
|
|
1083
1076
|
red: "bg-rose-600 border border-rose-300 cursor-not-allowed opacity-60",
|
|
1084
1077
|
yellow: "bg-amber-600 border border-amber-300 cursor-not-allowed opacity-60"
|
|
1085
1078
|
};
|
|
1086
|
-
return this.modelValue ?
|
|
1079
|
+
return this.modelValue ? e[this.color] : "bg-gray-200 border border-gray-300 cursor-not-allowed";
|
|
1087
1080
|
},
|
|
1088
1081
|
disabledClasses() {
|
|
1089
1082
|
return this.disabledColorClasses;
|
|
@@ -1094,20 +1087,20 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
|
|
|
1094
1087
|
this.disabled || (this.model = !this.model);
|
|
1095
1088
|
}
|
|
1096
1089
|
}
|
|
1097
|
-
},
|
|
1098
|
-
function
|
|
1099
|
-
return
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
class:
|
|
1090
|
+
}, vt = { class: "block text-sm font-medium text-gray-700" };
|
|
1091
|
+
function Ct(e, t, l, n, a, r) {
|
|
1092
|
+
return o(), i("div", null, [
|
|
1093
|
+
d("label", vt, g(l.label), 1),
|
|
1094
|
+
d("div", {
|
|
1095
|
+
class: m([
|
|
1103
1096
|
"relative w-11 h-6 inline-flex items-center transition-colors duration-300 px-1",
|
|
1104
1097
|
r.shapeToggle,
|
|
1105
|
-
|
|
1098
|
+
l.disabled ? r.disabledClasses : r.computedClasses
|
|
1106
1099
|
]),
|
|
1107
|
-
onClick:
|
|
1100
|
+
onClick: t[0] || (t[0] = (...s) => r.toggle && r.toggle(...s))
|
|
1108
1101
|
}, [
|
|
1109
|
-
|
|
1110
|
-
class:
|
|
1102
|
+
d("div", {
|
|
1103
|
+
class: m([
|
|
1111
1104
|
"absolute top-0.75 left-1 w-4 h-4 bg-white shadow transform transition-all duration-300",
|
|
1112
1105
|
r.shapeToggle,
|
|
1113
1106
|
r.model ? "translate-x-full" : "translate-x-0"
|
|
@@ -1116,23 +1109,23 @@ function _t(t, l, e, n, d, r) {
|
|
|
1116
1109
|
], 2)
|
|
1117
1110
|
]);
|
|
1118
1111
|
}
|
|
1119
|
-
const St = /* @__PURE__ */
|
|
1120
|
-
install(
|
|
1121
|
-
|
|
1112
|
+
const St = /* @__PURE__ */ h(wt, [["render", Ct]]), _t = {
|
|
1113
|
+
install(e) {
|
|
1114
|
+
e.component("AlertStyle", b), e.component("ButtonStyle", q), e.component("CheckStyle", W), e.component("ComboBoxStyle", re), e.component("DateTimeStyle", ge), e.component("InputDecimalStyle", Ce), e.component("InputStyle", qe), e.component("SelectStyle", je), e.component("StepperStyle", tt), e.component("TableStyle", ut), e.component("TextAreaStyle", pt), e.component("ToggleStyle", St), e.config.globalProperties.$alertstyle = b;
|
|
1122
1115
|
}
|
|
1123
1116
|
};
|
|
1124
1117
|
export {
|
|
1125
1118
|
b as AlertStyle,
|
|
1126
|
-
|
|
1119
|
+
q as ButtonStyle,
|
|
1127
1120
|
W as CheckStyle,
|
|
1128
|
-
|
|
1121
|
+
re as ComboBoxStyle,
|
|
1129
1122
|
ge as DateTimeStyle,
|
|
1130
|
-
|
|
1123
|
+
Ce as InputDecimalStyle,
|
|
1131
1124
|
qe as InputStyle,
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1125
|
+
je as SelectStyle,
|
|
1126
|
+
tt as StepperStyle,
|
|
1127
|
+
ut as TableStyle,
|
|
1128
|
+
pt as TextAreaStyle,
|
|
1136
1129
|
St as ToggleStyle,
|
|
1137
|
-
|
|
1130
|
+
_t as default
|
|
1138
1131
|
};
|