spicykatsu 0.0.32 → 0.0.33
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/spicykatsu.es.js +356 -232
- package/dist/spicykatsu.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/spicykatsu.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
const
|
|
1
|
+
import { ref as w, openBlock as r, createBlock as Y, Transition as x, withCtx as $, createElementBlock as i, normalizeClass as h, toDisplayString as d, createCommentVNode as c, computed as m, normalizeStyle as k, createElementVNode as u, renderSlot as S, onMounted as V, onUnmounted as N, createVNode as F, Fragment as B, renderList as T, withDirectives as z, vModelText as P, createTextVNode as E, mergeProps as L, withKeys as M, withModifiers as O } from "vue";
|
|
2
|
+
const U = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "spicyAlertIcon"
|
|
5
|
-
},
|
|
5
|
+
}, W = { key: 1 }, R = {
|
|
6
6
|
__name: "SpicyAlert",
|
|
7
7
|
props: {
|
|
8
8
|
variant: {
|
|
@@ -10,49 +10,40 @@ const V = {
|
|
|
10
10
|
default: "info",
|
|
11
11
|
validator: (e) => ["info", "success", "warning", "error", "custom"].includes(e)
|
|
12
12
|
},
|
|
13
|
-
text: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: "Button"
|
|
16
|
-
},
|
|
13
|
+
text: { type: String, default: "Button" },
|
|
17
14
|
icon: String,
|
|
18
15
|
iconOnly: Boolean,
|
|
19
|
-
closable: {
|
|
20
|
-
|
|
21
|
-
default: !1
|
|
22
|
-
},
|
|
23
|
-
autoClose: {
|
|
24
|
-
type: Number,
|
|
25
|
-
default: 0
|
|
26
|
-
}
|
|
16
|
+
closable: { type: Boolean, default: !1 },
|
|
17
|
+
autoClose: { type: Number, default: 0 }
|
|
27
18
|
},
|
|
28
19
|
setup(e) {
|
|
29
|
-
const t = e,
|
|
30
|
-
|
|
20
|
+
const t = e, l = w(!0), n = () => {
|
|
21
|
+
l.value = !1;
|
|
31
22
|
};
|
|
32
23
|
return t.autoClose > 0 && setTimeout(() => {
|
|
33
|
-
|
|
34
|
-
}, t.autoClose), (o,
|
|
35
|
-
default:
|
|
36
|
-
|
|
24
|
+
l.value = !1;
|
|
25
|
+
}, t.autoClose), (o, a) => (r(), Y(x, { name: "fade" }, {
|
|
26
|
+
default: $(() => [
|
|
27
|
+
l.value ? (r(), i("div", {
|
|
37
28
|
key: 0,
|
|
38
|
-
class:
|
|
29
|
+
class: h(["spicyAlert", e.variant])
|
|
39
30
|
}, [
|
|
40
|
-
e.iconOnly || e.text ? (
|
|
41
|
-
!e.iconOnly && e.text ? (
|
|
42
|
-
e.closable ? (
|
|
31
|
+
e.iconOnly || e.text ? (r(), i("span", U, d(e.icon), 1)) : c("", !0),
|
|
32
|
+
!e.iconOnly && e.text ? (r(), i("span", W, d(e.text), 1)) : c("", !0),
|
|
33
|
+
e.closable ? (r(), i("button", {
|
|
43
34
|
key: 2,
|
|
44
35
|
class: "closeBtn",
|
|
45
|
-
onClick:
|
|
46
|
-
}, "×")) :
|
|
47
|
-
], 2)) :
|
|
36
|
+
onClick: n
|
|
37
|
+
}, "×")) : c("", !0)
|
|
38
|
+
], 2)) : c("", !0)
|
|
48
39
|
]),
|
|
49
40
|
_: 1
|
|
50
41
|
}));
|
|
51
42
|
}
|
|
52
|
-
},
|
|
43
|
+
}, j = ["disabled"], H = {
|
|
53
44
|
key: 0,
|
|
54
45
|
class: "spicyBtnIcon"
|
|
55
|
-
},
|
|
46
|
+
}, K = {
|
|
56
47
|
__name: "SpicyBtn",
|
|
57
48
|
props: {
|
|
58
49
|
variant: {
|
|
@@ -60,64 +51,140 @@ const V = {
|
|
|
60
51
|
default: "filled",
|
|
61
52
|
validator: (e) => ["outlined", "filled"].includes(e)
|
|
62
53
|
},
|
|
63
|
-
disabled: {
|
|
64
|
-
|
|
65
|
-
default: !1
|
|
66
|
-
},
|
|
67
|
-
text: {
|
|
68
|
-
type: String,
|
|
69
|
-
default: "Button"
|
|
70
|
-
},
|
|
54
|
+
disabled: { type: Boolean, default: !1 },
|
|
55
|
+
text: { type: String, default: "Button" },
|
|
71
56
|
icon: String,
|
|
72
|
-
|
|
57
|
+
bgColor: String,
|
|
73
58
|
textColor: String,
|
|
74
59
|
hoverColor: String,
|
|
75
60
|
borderColor: String,
|
|
76
|
-
// Custom color
|
|
77
|
-
fontSize: {
|
|
78
|
-
|
|
79
|
-
default: 14
|
|
80
|
-
},
|
|
81
|
-
fontWeight: {
|
|
82
|
-
type: [Number, String],
|
|
83
|
-
default: 500
|
|
84
|
-
}
|
|
61
|
+
// Custom color (if outlined variant)
|
|
62
|
+
fontSize: { type: [Number, String], default: 14 },
|
|
63
|
+
fontWeight: { type: [Number, String], default: 500 }
|
|
85
64
|
},
|
|
86
65
|
emits: ["click"],
|
|
87
66
|
setup(e, { emit: t }) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
67
|
+
const l = e, n = m(() => ({
|
|
68
|
+
"--fontSize": l.fontSize,
|
|
69
|
+
"--fontWeight": l.fontWeight,
|
|
70
|
+
"--bgColor": l.bgColor,
|
|
71
|
+
"--textColor": l.textColor,
|
|
72
|
+
"--borderColor": l.borderColor,
|
|
73
|
+
"--hoverColor": l.hoverColor
|
|
74
|
+
}));
|
|
75
|
+
return (o, a) => (r(), i("button", {
|
|
76
|
+
class: h(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
|
|
77
|
+
style: k({ ...n.value }),
|
|
91
78
|
disabled: e.disabled,
|
|
92
|
-
onClick:
|
|
79
|
+
onClick: a[0] || (a[0] = (...f) => o.onClick && o.onClick(...f))
|
|
80
|
+
}, [
|
|
81
|
+
e.icon ? (r(), i("span", H, d(e.icon), 1)) : c("", !0),
|
|
82
|
+
u("span", null, d(e.text), 1),
|
|
83
|
+
S(o.$slots, "default")
|
|
84
|
+
], 14, j));
|
|
85
|
+
}
|
|
86
|
+
}, q = {
|
|
87
|
+
key: 0,
|
|
88
|
+
class: "navControls"
|
|
89
|
+
}, G = {
|
|
90
|
+
key: 1,
|
|
91
|
+
class: "pagination"
|
|
92
|
+
}, J = ["onClick"], Q = {
|
|
93
|
+
__name: "SpicyCarousel",
|
|
94
|
+
props: {
|
|
95
|
+
autoplay: { type: Boolean, default: !1 },
|
|
96
|
+
autoplaySpeed: { type: Number, default: 5e3 },
|
|
97
|
+
showNavigation: { type: Boolean, default: !0 },
|
|
98
|
+
showPagination: { type: Boolean, default: !0 },
|
|
99
|
+
activeColor: { type: String, default: "rgba(0, 255, 234, 0.5)" },
|
|
100
|
+
loop: { type: Boolean, default: !0 },
|
|
101
|
+
initialSlide: { type: Number, default: 0 },
|
|
102
|
+
slides: { type: Array, required: !0 },
|
|
103
|
+
width: { type: String, default: "540px" },
|
|
104
|
+
height: { type: String, default: "300px" },
|
|
105
|
+
variant: { type: String, default: "" }
|
|
106
|
+
},
|
|
107
|
+
setup(e) {
|
|
108
|
+
const t = e, l = m(() => ({
|
|
109
|
+
"--width": t.width,
|
|
110
|
+
"--height": t.height,
|
|
111
|
+
"--activeColor": t.activeColor
|
|
112
|
+
})), n = w(t.initialSlide), o = m(() => t.slides[n.value]);
|
|
113
|
+
let a;
|
|
114
|
+
V(() => {
|
|
115
|
+
t.autoplay && (a = setInterval(y, t.autoplaySpeed));
|
|
116
|
+
});
|
|
117
|
+
const f = () => {
|
|
118
|
+
n.value = (n.value - 1 + t.slides.length) % t.slides.length;
|
|
119
|
+
}, y = () => {
|
|
120
|
+
n.value = (n.value + 1) % t.slides.length;
|
|
121
|
+
}, b = (g) => {
|
|
122
|
+
n.value = g;
|
|
123
|
+
}, s = () => {
|
|
124
|
+
clearInterval(a);
|
|
125
|
+
}, p = () => {
|
|
126
|
+
t.autoplay && (a = setInterval(y, t.autoplaySpeed));
|
|
127
|
+
};
|
|
128
|
+
return N(() => {
|
|
129
|
+
clearInterval(a);
|
|
130
|
+
}), (g, Me) => (r(), i("div", {
|
|
131
|
+
class: "carouselContainer",
|
|
132
|
+
style: k({ ...l.value }),
|
|
133
|
+
onMouseenter: s,
|
|
134
|
+
onMouseleave: p
|
|
93
135
|
}, [
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
136
|
+
F(x, {
|
|
137
|
+
name: "slide",
|
|
138
|
+
mode: "out-in"
|
|
139
|
+
}, {
|
|
140
|
+
default: $(() => [
|
|
141
|
+
(r(), i("div", {
|
|
142
|
+
key: n.value,
|
|
143
|
+
class: "slide",
|
|
144
|
+
style: k({ backgroundImage: `url(${o.value.img})` })
|
|
145
|
+
}, [
|
|
146
|
+
S(g.$slots, "default"),
|
|
147
|
+
e.slides[n.value].text ? (r(), i("div", {
|
|
148
|
+
key: 0,
|
|
149
|
+
class: h(["textOverlay", { fullScreen: e.variant === "fullScreen", disabled: g.disabled }])
|
|
150
|
+
}, d(e.slides[n.value].text), 3)) : c("", !0)
|
|
151
|
+
], 4))
|
|
152
|
+
]),
|
|
153
|
+
_: 3
|
|
154
|
+
}),
|
|
155
|
+
e.showNavigation ? (r(), i("div", q, [
|
|
156
|
+
u("div", { class: "prevNav" }, [
|
|
157
|
+
u("button", {
|
|
158
|
+
class: "prev",
|
|
159
|
+
onClick: f
|
|
160
|
+
}, "<")
|
|
161
|
+
]),
|
|
162
|
+
u("div", { class: "nextNav" }, [
|
|
163
|
+
u("button", {
|
|
164
|
+
class: "next",
|
|
165
|
+
onClick: y
|
|
166
|
+
}, ">")
|
|
167
|
+
])
|
|
168
|
+
])) : c("", !0),
|
|
169
|
+
e.showPagination ? (r(), i("div", G, [
|
|
170
|
+
(r(!0), i(B, null, T(e.slides, (Oe, C) => (r(), i("button", {
|
|
171
|
+
key: C,
|
|
172
|
+
onClick: (xe) => b(C),
|
|
173
|
+
class: h({ active: C === n.value })
|
|
174
|
+
}, d(C + 1), 11, J))), 128))
|
|
175
|
+
])) : c("", !0)
|
|
176
|
+
], 36));
|
|
98
177
|
}
|
|
99
|
-
},
|
|
178
|
+
}, X = ["placeholder"], Z = {
|
|
100
179
|
key: 0,
|
|
101
180
|
class: "spicyInputError"
|
|
102
|
-
},
|
|
181
|
+
}, _ = {
|
|
103
182
|
__name: "SpicyLabel",
|
|
104
183
|
props: {
|
|
105
|
-
value: {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
},
|
|
109
|
-
placeholder: {
|
|
110
|
-
type: String,
|
|
111
|
-
default: ""
|
|
112
|
-
},
|
|
113
|
-
label: {
|
|
114
|
-
type: String,
|
|
115
|
-
default: "Label"
|
|
116
|
-
},
|
|
117
|
-
error: {
|
|
118
|
-
type: String,
|
|
119
|
-
default: ""
|
|
120
|
-
},
|
|
184
|
+
value: { type: String, default: "" },
|
|
185
|
+
placeholder: { type: String, default: "" },
|
|
186
|
+
label: { type: String, default: "Label" },
|
|
187
|
+
error: { type: String, default: "" },
|
|
121
188
|
variant: {
|
|
122
189
|
type: String,
|
|
123
190
|
default: "filled",
|
|
@@ -125,46 +192,101 @@ const V = {
|
|
|
125
192
|
}
|
|
126
193
|
},
|
|
127
194
|
setup(e) {
|
|
128
|
-
const t = e,
|
|
129
|
-
function
|
|
130
|
-
const
|
|
131
|
-
let
|
|
132
|
-
for (let
|
|
133
|
-
|
|
134
|
-
return
|
|
195
|
+
const t = e, l = `spicyInput-${a()}`, n = w(t.value), o = w(!1);
|
|
196
|
+
function a() {
|
|
197
|
+
const s = "0123456789abcdefghijklmnopqrstuvwxyz";
|
|
198
|
+
let p = "";
|
|
199
|
+
for (let g = 0; g < 6; g++)
|
|
200
|
+
p += s.charAt(Math.floor(Math.random() * s.length));
|
|
201
|
+
return p;
|
|
135
202
|
}
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
},
|
|
203
|
+
const f = (s) => {
|
|
204
|
+
n.value = s.target.value;
|
|
205
|
+
}, y = () => {
|
|
139
206
|
o.value = !1;
|
|
140
|
-
},
|
|
207
|
+
}, b = () => {
|
|
141
208
|
o.value = !0;
|
|
142
209
|
};
|
|
143
|
-
return (
|
|
144
|
-
class:
|
|
210
|
+
return (s, p) => (r(), i("div", {
|
|
211
|
+
class: h(["spicyInputWrapper", [e.variant, { hasValue: n.value || e.value, hasFocus: o.value, hasError: e.error }]])
|
|
145
212
|
}, [
|
|
146
|
-
|
|
213
|
+
u("label", {
|
|
147
214
|
class: "spicyInputLabel",
|
|
148
|
-
for:
|
|
215
|
+
for: l
|
|
149
216
|
}, d(e.label), 1),
|
|
150
|
-
|
|
151
|
-
id:
|
|
152
|
-
class:
|
|
153
|
-
"onUpdate:modelValue":
|
|
217
|
+
z(u("input", {
|
|
218
|
+
id: l,
|
|
219
|
+
class: h(["spicyInput", e.variant]),
|
|
220
|
+
"onUpdate:modelValue": p[0] || (p[0] = (g) => n.value = g),
|
|
154
221
|
placeholder: e.placeholder,
|
|
155
|
-
onInput:
|
|
156
|
-
onBlur:
|
|
157
|
-
onFocus:
|
|
158
|
-
}, null, 42,
|
|
159
|
-
[
|
|
222
|
+
onInput: f,
|
|
223
|
+
onBlur: y,
|
|
224
|
+
onFocus: b
|
|
225
|
+
}, null, 42, X), [
|
|
226
|
+
[P, n.value]
|
|
160
227
|
]),
|
|
161
|
-
|
|
162
|
-
e.error ? (
|
|
228
|
+
S(s.$slots, "default"),
|
|
229
|
+
e.error ? (r(), i("span", Z, d(e.error), 1)) : c("", !0)
|
|
163
230
|
], 2));
|
|
164
231
|
}
|
|
165
|
-
},
|
|
166
|
-
|
|
167
|
-
|
|
232
|
+
}, ee = { class: "spicyModalHeader" }, te = { class: "spicyModalActions" }, le = ["onClick"], ne = {
|
|
233
|
+
__name: "SpicyModal",
|
|
234
|
+
props: {
|
|
235
|
+
width: { type: String, default: "50%" },
|
|
236
|
+
height: { type: String, default: "auto" },
|
|
237
|
+
borderRadius: { type: String, default: "8px" },
|
|
238
|
+
bgColor: { type: String, default: "#2b2b2b" },
|
|
239
|
+
visible: { type: Boolean, default: !1 },
|
|
240
|
+
closeBtn: { type: Boolean, default: !1 },
|
|
241
|
+
actions: { type: Array, default: () => [] },
|
|
242
|
+
closeOnClick: { type: Boolean, default: !0 },
|
|
243
|
+
modalTitle: { type: String, default: "Title" }
|
|
244
|
+
},
|
|
245
|
+
emits: ["update:visible"],
|
|
246
|
+
setup(e, { emit: t }) {
|
|
247
|
+
const l = e, n = m(() => ({
|
|
248
|
+
"--width": l.width,
|
|
249
|
+
"--height": l.height,
|
|
250
|
+
"--borderRadius": l.borderRadius,
|
|
251
|
+
"--bgColor": l.bgColor
|
|
252
|
+
})), o = t, a = () => {
|
|
253
|
+
o("update:visible", !1);
|
|
254
|
+
}, f = () => {
|
|
255
|
+
l.closeOnClick && a();
|
|
256
|
+
};
|
|
257
|
+
return (y, b) => e.visible ? (r(), i("div", {
|
|
258
|
+
key: 0,
|
|
259
|
+
class: "spicyModalOverlay",
|
|
260
|
+
onClick: f
|
|
261
|
+
}, [
|
|
262
|
+
u("div", {
|
|
263
|
+
class: "spicyModal",
|
|
264
|
+
style: k({ ...n.value })
|
|
265
|
+
}, [
|
|
266
|
+
u("header", ee, [
|
|
267
|
+
S(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
|
|
268
|
+
E(d(e.modalTitle), 1)
|
|
269
|
+
])
|
|
270
|
+
]),
|
|
271
|
+
S(y.$slots, "default"),
|
|
272
|
+
u("div", te, [
|
|
273
|
+
e.actions.length === 0 && e.closeBtn ? (r(), i("button", {
|
|
274
|
+
key: 0,
|
|
275
|
+
class: "closeBtn",
|
|
276
|
+
onClick: a
|
|
277
|
+
}, "Close")) : c("", !0),
|
|
278
|
+
(r(!0), i(B, null, T(e.actions, (s) => (r(), i("button", {
|
|
279
|
+
class: "actionBtn",
|
|
280
|
+
key: s.label,
|
|
281
|
+
onClick: s.handler
|
|
282
|
+
}, d(s.label), 9, le))), 128))
|
|
283
|
+
])
|
|
284
|
+
], 4)
|
|
285
|
+
])) : c("", !0);
|
|
286
|
+
}
|
|
287
|
+
}, oe = ["aria-checked", "onKeydown", "aria-label"], ae = /* @__PURE__ */ u("div", { class: "spicyToggleKnob" }, null, -1), re = [
|
|
288
|
+
ae
|
|
289
|
+
], ie = {
|
|
168
290
|
__name: "SpicyToggle",
|
|
169
291
|
props: {
|
|
170
292
|
modelValue: Boolean,
|
|
@@ -180,205 +302,207 @@ const V = {
|
|
|
180
302
|
},
|
|
181
303
|
emits: ["update:modelValue"],
|
|
182
304
|
setup(e, { emit: t }) {
|
|
183
|
-
const
|
|
184
|
-
|
|
305
|
+
const l = e, n = m(() => ({
|
|
306
|
+
"--borderColor": l.borderColor,
|
|
307
|
+
"--activeColor": l.activeColor,
|
|
308
|
+
"--focusShadow": l.focusShadow
|
|
309
|
+
})), o = t, a = () => {
|
|
310
|
+
o("update:modelValue", !l.modelValue);
|
|
185
311
|
};
|
|
186
|
-
return (
|
|
312
|
+
return (f, y) => (r(), i("div", L({
|
|
187
313
|
class: ["spicyToggle", { outlined: e.variant === "outlined", "is-active": e.modelValue }],
|
|
188
|
-
style: {
|
|
189
|
-
|
|
190
|
-
"--activeColor": e.activeColor,
|
|
191
|
-
"--focusShadow": e.focusShadow
|
|
192
|
-
},
|
|
193
|
-
onClick: o,
|
|
314
|
+
style: { ...n.value },
|
|
315
|
+
onClick: a,
|
|
194
316
|
role: "switch",
|
|
195
317
|
"aria-checked": e.modelValue.toString(),
|
|
196
318
|
tabindex: "0",
|
|
197
319
|
onKeydown: [
|
|
198
|
-
|
|
199
|
-
|
|
320
|
+
M(O(a, ["prevent"]), ["space"]),
|
|
321
|
+
M(O(a, ["prevent"]), ["enter"])
|
|
200
322
|
],
|
|
201
323
|
"aria-label": e.label
|
|
202
|
-
},
|
|
324
|
+
}, f.$attrs), re, 16, oe));
|
|
203
325
|
}
|
|
204
326
|
};
|
|
205
|
-
function
|
|
206
|
-
const
|
|
327
|
+
function I(e, t) {
|
|
328
|
+
const l = {
|
|
207
329
|
YYYY: () => e.getFullYear().toString(),
|
|
208
330
|
MM: () => (e.getMonth() + 1).toString().padStart(2, "0"),
|
|
209
331
|
DD: () => e.getDate().toString().padStart(2, "0")
|
|
210
332
|
};
|
|
211
|
-
return t.replace(/YYYY|MM|DD/g, (
|
|
333
|
+
return t.replace(/YYYY|MM|DD/g, (n) => l[n]());
|
|
212
334
|
}
|
|
213
|
-
function
|
|
214
|
-
const [t,
|
|
215
|
-
return new Date(Number(t), Number(
|
|
335
|
+
function se(e) {
|
|
336
|
+
const [t, l, n] = e.split("-");
|
|
337
|
+
return new Date(Number(t), Number(l) - 1, Number(n));
|
|
216
338
|
}
|
|
217
|
-
function
|
|
218
|
-
const
|
|
219
|
-
return Math.ceil(
|
|
339
|
+
function ce(e, t) {
|
|
340
|
+
const l = Math.abs(t.getTime() - e.getTime());
|
|
341
|
+
return Math.ceil(l / (1e3 * 60 * 60 * 24));
|
|
220
342
|
}
|
|
221
|
-
function
|
|
222
|
-
const
|
|
223
|
-
return
|
|
343
|
+
function ue(e, t) {
|
|
344
|
+
const l = new Date(e);
|
|
345
|
+
return l.setDate(e.getDate() + t), l;
|
|
224
346
|
}
|
|
225
|
-
function
|
|
226
|
-
const
|
|
227
|
-
return
|
|
347
|
+
function de(e, t) {
|
|
348
|
+
const l = new Date(e);
|
|
349
|
+
return l.setDate(e.getDate() - t), l;
|
|
228
350
|
}
|
|
229
|
-
function
|
|
351
|
+
function fe(e) {
|
|
230
352
|
const t = /* @__PURE__ */ new Date();
|
|
231
353
|
return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
232
354
|
}
|
|
233
|
-
function
|
|
355
|
+
function ye(e) {
|
|
234
356
|
const t = /* @__PURE__ */ new Date();
|
|
235
357
|
return t.setDate(t.getDate() - 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
236
358
|
}
|
|
237
|
-
function
|
|
359
|
+
function ge(e) {
|
|
238
360
|
const t = /* @__PURE__ */ new Date();
|
|
239
361
|
return t.setDate(t.getDate() + 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
240
362
|
}
|
|
241
|
-
function
|
|
363
|
+
function pe(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
|
|
242
364
|
if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
|
|
243
365
|
throw new Error(
|
|
244
366
|
'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
|
|
245
367
|
);
|
|
246
|
-
let
|
|
247
|
-
return t.separator && t.separator !== "-" && (
|
|
368
|
+
let n = I(/* @__PURE__ */ new Date(), e);
|
|
369
|
+
return t.separator && t.separator !== "-" && (n = n.replace(/-/g, t.separator)), t.show ? { value: n, isVisible: !0 } : { value: n, isVisible: !1 };
|
|
248
370
|
}
|
|
249
|
-
const
|
|
371
|
+
const Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
250
372
|
__proto__: null,
|
|
251
|
-
currentDate:
|
|
252
|
-
dateAdd:
|
|
253
|
-
dateDiff:
|
|
254
|
-
dateIsToday:
|
|
255
|
-
dateIsTomorrow:
|
|
256
|
-
dateIsYesterday:
|
|
257
|
-
dateSubtract:
|
|
258
|
-
formatDate:
|
|
259
|
-
parseDate:
|
|
373
|
+
currentDate: pe,
|
|
374
|
+
dateAdd: ue,
|
|
375
|
+
dateDiff: ce,
|
|
376
|
+
dateIsToday: fe,
|
|
377
|
+
dateIsTomorrow: ge,
|
|
378
|
+
dateIsYesterday: ye,
|
|
379
|
+
dateSubtract: de,
|
|
380
|
+
formatDate: I,
|
|
381
|
+
parseDate: se
|
|
260
382
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
261
|
-
function
|
|
383
|
+
function ve(e) {
|
|
262
384
|
const t = /* @__PURE__ */ new WeakMap();
|
|
263
|
-
function n
|
|
264
|
-
if (
|
|
265
|
-
return
|
|
266
|
-
if (t.has(
|
|
267
|
-
return t.get(
|
|
268
|
-
const o = Array.isArray(
|
|
269
|
-
t.set(
|
|
270
|
-
for (const
|
|
271
|
-
Object.prototype.hasOwnProperty.call(
|
|
385
|
+
function l(n) {
|
|
386
|
+
if (v(n) || typeof n != "object")
|
|
387
|
+
return n;
|
|
388
|
+
if (t.has(n))
|
|
389
|
+
return t.get(n);
|
|
390
|
+
const o = Array.isArray(n) ? [] : {};
|
|
391
|
+
t.set(n, o);
|
|
392
|
+
for (const a in n)
|
|
393
|
+
Object.prototype.hasOwnProperty.call(n, a) && (o[a] = l(n[a]));
|
|
272
394
|
return o;
|
|
273
395
|
}
|
|
274
|
-
return
|
|
396
|
+
return l(e);
|
|
275
397
|
}
|
|
276
|
-
function
|
|
398
|
+
function A(...e) {
|
|
277
399
|
const t = {};
|
|
278
|
-
return e.forEach((
|
|
279
|
-
if (!
|
|
280
|
-
for (const
|
|
281
|
-
if (Object.prototype.hasOwnProperty.call(
|
|
282
|
-
const o = n
|
|
283
|
-
o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[
|
|
284
|
-
t[
|
|
400
|
+
return e.forEach((l) => {
|
|
401
|
+
if (!v(l)) {
|
|
402
|
+
for (const n in l)
|
|
403
|
+
if (Object.prototype.hasOwnProperty.call(l, n)) {
|
|
404
|
+
const o = l[n];
|
|
405
|
+
o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[n] = A(
|
|
406
|
+
t[n] || {},
|
|
285
407
|
o
|
|
286
|
-
) : t[
|
|
408
|
+
) : t[n] = o);
|
|
287
409
|
}
|
|
288
410
|
}
|
|
289
411
|
}), t;
|
|
290
412
|
}
|
|
291
|
-
function
|
|
292
|
-
return
|
|
413
|
+
function he(...e) {
|
|
414
|
+
return v(e[0]) ? e[0] : Object.assign({}, ...e);
|
|
293
415
|
}
|
|
294
|
-
function
|
|
295
|
-
return
|
|
416
|
+
function me(e) {
|
|
417
|
+
return v(e) ? [] : Object.keys(e);
|
|
296
418
|
}
|
|
297
|
-
function
|
|
298
|
-
return
|
|
419
|
+
function Se(e) {
|
|
420
|
+
return v(e) ? [] : Object.values(e);
|
|
299
421
|
}
|
|
300
|
-
function
|
|
301
|
-
return
|
|
422
|
+
function be(e) {
|
|
423
|
+
return v(e) ? [] : Object.entries(e);
|
|
302
424
|
}
|
|
303
|
-
function
|
|
425
|
+
function v(e) {
|
|
304
426
|
return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
|
|
305
427
|
}
|
|
306
|
-
const
|
|
428
|
+
const Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
307
429
|
__proto__: null,
|
|
308
|
-
deepClone:
|
|
309
|
-
deepMerge:
|
|
310
|
-
getObjectEntries:
|
|
311
|
-
getObjectKeys:
|
|
312
|
-
getObjectValues:
|
|
313
|
-
isObjectEmpty:
|
|
314
|
-
mergeObjects:
|
|
430
|
+
deepClone: ve,
|
|
431
|
+
deepMerge: A,
|
|
432
|
+
getObjectEntries: be,
|
|
433
|
+
getObjectKeys: me,
|
|
434
|
+
getObjectValues: Se,
|
|
435
|
+
isObjectEmpty: v,
|
|
436
|
+
mergeObjects: he
|
|
315
437
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
316
|
-
function
|
|
438
|
+
function D(e) {
|
|
317
439
|
try {
|
|
318
440
|
return new URL(e), !0;
|
|
319
441
|
} catch (t) {
|
|
320
442
|
return console.error("Invalid URL:", t), !1;
|
|
321
443
|
}
|
|
322
444
|
}
|
|
323
|
-
function
|
|
324
|
-
return
|
|
445
|
+
function Ce(e) {
|
|
446
|
+
return D(e) ? new URL(e).hostname : null;
|
|
325
447
|
}
|
|
326
|
-
function
|
|
327
|
-
if (!
|
|
448
|
+
function we(e, t) {
|
|
449
|
+
if (!D(e))
|
|
328
450
|
return e;
|
|
329
|
-
const
|
|
330
|
-
return Object.keys(t).forEach((
|
|
451
|
+
const l = new URL(e);
|
|
452
|
+
return Object.keys(t).forEach((n) => l.searchParams.append(n, t[n])), l.toString();
|
|
331
453
|
}
|
|
332
|
-
function
|
|
333
|
-
if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(
|
|
334
|
-
throw new Error("Invalid protocol: " +
|
|
454
|
+
function ke(e, t, l = "https") {
|
|
455
|
+
if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(l.toLowerCase()))
|
|
456
|
+
throw new Error("Invalid protocol: " + l);
|
|
335
457
|
if (!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))
|
|
336
458
|
throw new Error("Invalid hostname: " + e);
|
|
337
|
-
return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${
|
|
459
|
+
return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${l.toLowerCase()}://${e}${t}`;
|
|
338
460
|
}
|
|
339
|
-
const
|
|
461
|
+
const Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
340
462
|
__proto__: null,
|
|
341
|
-
appendParamsToUrl:
|
|
342
|
-
generateUrl:
|
|
343
|
-
getHostname:
|
|
344
|
-
isUrlValid:
|
|
345
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
463
|
+
appendParamsToUrl: we,
|
|
464
|
+
generateUrl: ke,
|
|
465
|
+
getHostname: Ce,
|
|
466
|
+
isUrlValid: D
|
|
467
|
+
}, Symbol.toStringTag, { value: "Module" })), De = ':root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--secondaryColor: #2757f7;--errorColor: #ff0000;--primaryBorderColor: #ccc;--primaryTextColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}', Ae = {
|
|
346
468
|
install(e, t = {}) {
|
|
347
|
-
const { useComponents:
|
|
348
|
-
if (
|
|
469
|
+
const { useComponents: l = !0, useStyles: n = !0 } = t;
|
|
470
|
+
if (l && (e.component("SpicyAlert", R), e.component("SpicyBtn", K), e.component("SpicyCarousel", Q), e.component("SpicyLabel", _), e.component("SpicyModal", ne), e.component("SpicyToggle", ie)), n) {
|
|
349
471
|
const o = document.createElement("style");
|
|
350
|
-
o.textContent =
|
|
472
|
+
o.textContent = De, document.head.appendChild(o);
|
|
351
473
|
}
|
|
352
474
|
}
|
|
353
475
|
};
|
|
354
476
|
export {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
477
|
+
R as SpicyAlert,
|
|
478
|
+
K as SpicyBtn,
|
|
479
|
+
Q as SpicyCarousel,
|
|
480
|
+
_ as SpicyLabel,
|
|
481
|
+
ne as SpicyModal,
|
|
482
|
+
ie as SpicyToggle,
|
|
483
|
+
we as appendParamsToUrl,
|
|
484
|
+
pe as currentDate,
|
|
485
|
+
ue as dateAdd,
|
|
486
|
+
ce as dateDiff,
|
|
487
|
+
fe as dateIsToday,
|
|
488
|
+
ge as dateIsTomorrow,
|
|
489
|
+
ye as dateIsYesterday,
|
|
490
|
+
de as dateSubtract,
|
|
491
|
+
Be as dateUtils,
|
|
492
|
+
ve as deepClone,
|
|
493
|
+
A as deepMerge,
|
|
494
|
+
Ae as default,
|
|
495
|
+
I as formatDate,
|
|
496
|
+
ke as generateUrl,
|
|
497
|
+
Ce as getHostname,
|
|
498
|
+
be as getObjectEntries,
|
|
499
|
+
me as getObjectKeys,
|
|
500
|
+
Se as getObjectValues,
|
|
501
|
+
v as isObjectEmpty,
|
|
502
|
+
D as isUrlValid,
|
|
503
|
+
he as mergeObjects,
|
|
504
|
+
Te as objUtils,
|
|
505
|
+
se as parseDate,
|
|
506
|
+
De as spicyStyles,
|
|
507
|
+
Ie as urlUtils
|
|
384
508
|
};
|
package/dist/spicykatsu.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.SpicyKatsu={},l.Vue))})(this,function(l,n){"use strict";const A={key:0,class:"spicyAlertIcon"},j={key:1},m={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:e=>["info","success","warning","error","custom"].includes(e)},text:{type:String,default:"Button"},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(e){const t=e,o=n.ref(!0),r=()=>{o.value=!1};return t.autoClose>0&&setTimeout(()=>{o.value=!1},t.autoClose),(a,c)=>(n.openBlock(),n.createBlock(n.Transition,{name:"fade"},{default:n.withCtx(()=>[o.value?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["spicyAlert",e.variant])},[e.iconOnly||e.text?(n.openBlock(),n.createElementBlock("span",A,n.toDisplayString(e.icon),1)):n.createCommentVNode("",!0),!e.iconOnly&&e.text?(n.openBlock(),n.createElementBlock("span",j,n.toDisplayString(e.text),1)):n.createCommentVNode("",!0),e.closable?(n.openBlock(),n.createElementBlock("button",{key:2,class:"closeBtn",onClick:r},"×")):n.createCommentVNode("",!0)],2)):n.createCommentVNode("",!0)]),_:1}))}},F=["disabled"],P={key:0,class:"spicyBtnIcon"},h={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,color:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(e,{emit:t}){return(o,r)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass(["spicyBtn",{outlined:e.variant==="outlined",disabled:e.disabled}]),style:n.normalizeStyle({"--color":e.color,"--textColor":e.textColor,"--hoverColor":e.hoverColor}),disabled:e.disabled,onClick:r[0]||(r[0]=(...a)=>o.onClick&&o.onClick(...a))},[e.icon?(n.openBlock(),n.createElementBlock("span",P,n.toDisplayString(e.icon),1)):n.createCommentVNode("",!0),n.createElementVNode("span",null,n.toDisplayString(e.text),1),n.renderSlot(o.$slots,"default")],14,F))}},L=["placeholder"],K={key:0,class:"spicyInputError"},p={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:"Label"},error:{type:String,default:""},variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)}},setup(e){const t=e,o=`spicyInput-${c()}`,r=n.ref(t.value),a=n.ref(!1);function c(){const s="0123456789abcdefghijklmnopqrstuvwxyz";let d="";for(let f=0;f<6;f++)d+=s.charAt(Math.floor(Math.random()*s.length));return d}const z=s=>{r.value=s.target.value},Q=()=>{a.value=!1},X=()=>{a.value=!0};return(s,d)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["spicyInputWrapper",[e.variant,{hasValue:r.value||e.value,hasFocus:a.value,hasError:e.error}]])},[n.createElementVNode("label",{class:"spicyInputLabel",for:o},n.toDisplayString(e.label),1),n.withDirectives(n.createElementVNode("input",{id:o,class:n.normalizeClass(["spicyInput",e.variant]),"onUpdate:modelValue":d[0]||(d[0]=f=>r.value=f),placeholder:e.placeholder,onInput:z,onBlur:Q,onFocus:X},null,42,L),[[n.vModelText,r.value]]),n.renderSlot(s.$slots,"default"),e.error?(n.openBlock(),n.createElementBlock("span",K,n.toDisplayString(e.error),1)):n.createCommentVNode("",!0)],2))}},W=["aria-checked","onKeydown","aria-label"],H=[n.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],S={__name:"SpicyToggle",props:{modelValue:Boolean,label:String,variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},borderColor:String,activeColor:String,focusShadow:String},emits:["update:modelValue"],setup(e,{emit:t}){const o=e,r=t,a=()=>{r("update:modelValue",!o.modelValue)};return(c,z)=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({class:["spicyToggle",{outlined:e.variant==="outlined","is-active":e.modelValue}],style:{"--borderColor":e.borderColor,"--activeColor":e.activeColor,"--focusShadow":e.focusShadow},onClick:a,role:"switch","aria-checked":e.modelValue.toString(),tabindex:"0",onKeydown:[n.withKeys(n.withModifiers(a,["prevent"]),["space"]),n.withKeys(n.withModifiers(a,["prevent"]),["enter"])],"aria-label":e.label},c.$attrs),H,16,W))}};function y(e,t){const o={YYYY:()=>e.getFullYear().toString(),MM:()=>(e.getMonth()+1).toString().padStart(2,"0"),DD:()=>e.getDate().toString().padStart(2,"0")};return t.replace(/YYYY|MM|DD/g,r=>o[r]())}function b(e){const[t,o,r]=e.split("-");return new Date(Number(t),Number(o)-1,Number(r))}function w(e,t){const o=Math.abs(t.getTime()-e.getTime());return Math.ceil(o/(1e3*60*60*24))}function C(e,t){const o=new Date(e);return o.setDate(e.getDate()+t),o}function D(e,t){const o=new Date(e);return o.setDate(e.getDate()-t),o}function k(e){const t=new Date;return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}function B(e){const t=new Date;return t.setDate(t.getDate()-1),e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}function O(e){const t=new Date;return t.setDate(t.getDate()+1),e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}function M(e="YYYY-MM-DD",t={show:!0,separator:"-"}){if(typeof e!="string"||typeof t!="object"||!t.hasOwnProperty("show")||typeof t.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let r=y(new Date,e);return t.separator&&t.separator!=="-"&&(r=r.replace(/-/g,t.separator)),t.show?{value:r,isVisible:!0}:{value:r,isVisible:!1}}const R=Object.freeze(Object.defineProperty({__proto__:null,currentDate:M,dateAdd:C,dateDiff:w,dateIsToday:k,dateIsTomorrow:O,dateIsYesterday:B,dateSubtract:D,formatDate:y,parseDate:b},Symbol.toStringTag,{value:"Module"}));function T(e){const t=new WeakMap;function o(r){if(i(r)||typeof r!="object")return r;if(t.has(r))return t.get(r);const a=Array.isArray(r)?[]:{};t.set(r,a);for(const c in r)Object.prototype.hasOwnProperty.call(r,c)&&(a[c]=o(r[c]));return a}return o(e)}function g(...e){const t={};return e.forEach(o=>{if(!i(o)){for(const r in o)if(Object.prototype.hasOwnProperty.call(o,r)){const a=o[r];a!==void 0&&(typeof a=="object"&&a!==null&&!Array.isArray(a)?t[r]=g(t[r]||{},a):t[r]=a)}}}),t}function V(...e){return i(e[0])?e[0]:Object.assign({},...e)}function E(e){return i(e)?[]:Object.keys(e)}function Y(e){return i(e)?[]:Object.values(e)}function I(e){return i(e)?[]:Object.entries(e)}function i(e){return e===null||typeof e!="object"?!1:Array.isArray(e)?e.length===0:Object.keys(e).length===0}const q=Object.freeze(Object.defineProperty({__proto__:null,deepClone:T,deepMerge:g,getObjectEntries:I,getObjectKeys:E,getObjectValues:Y,isObjectEmpty:i,mergeObjects:V},Symbol.toStringTag,{value:"Module"}));function u(e){try{return new URL(e),!0}catch(t){return console.error("Invalid URL:",t),!1}}function v(e){return u(e)?new URL(e).hostname:null}function N(e,t){if(!u(e))return e;const o=new URL(e);return Object.keys(t).forEach(r=>o.searchParams.append(r,t[r])),o.toString()}function U(e,t,o="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(o.toLowerCase()))throw new Error("Invalid protocol: "+o);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))throw new Error("Invalid hostname: "+e);return t.startsWith("/")||(t="/"+t),t.endsWith("/")&&t.length>1&&(t=t.slice(0,-1)),t==="/"&&(t=""),`${o.toLowerCase()}://${e}${t}`}const G=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:N,generateUrl:U,getHostname:v,isUrlValid:u},Symbol.toStringTag,{value:"Module"})),$=':root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--secondaryColor: #2757f7;--errorColor: #ff0000;--primaryBorderColor: #ccc;--primaryTextColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}',J={install(e,t={}){const{useComponents:o=!0,useStyles:r=!0}=t;if(o&&(e.component("SpicyAlert",m),e.component("SpicyBtn",h),e.component("SpicyLabel",p),e.component("SpicyToggle",S)),r){const a=document.createElement("style");a.textContent=$,document.head.appendChild(a)}}};l.SpicyAlert=m,l.SpicyBtn=h,l.SpicyLabel=p,l.SpicyToggle=S,l.appendParamsToUrl=N,l.currentDate=M,l.dateAdd=C,l.dateDiff=w,l.dateIsToday=k,l.dateIsTomorrow=O,l.dateIsYesterday=B,l.dateSubtract=D,l.dateUtils=R,l.deepClone=T,l.deepMerge=g,l.default=J,l.formatDate=y,l.generateUrl=U,l.getHostname=v,l.getObjectEntries=I,l.getObjectKeys=E,l.getObjectValues=Y,l.isObjectEmpty=i,l.isUrlValid=u,l.mergeObjects=V,l.objUtils=q,l.parseDate=b,l.spicyStyles=$,l.urlUtils=G,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.SpicyKatsu={},a.Vue))})(this,function(a,t){"use strict";const W={key:0,class:"spicyAlertIcon"},K={key:1},b={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:e=>["info","success","warning","error","custom"].includes(e)},text:{type:String,default:"Button"},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(e){const l=e,n=t.ref(!0),o=()=>{n.value=!1};return l.autoClose>0&&setTimeout(()=>{n.value=!1},l.autoClose),(r,i)=>(t.openBlock(),t.createBlock(t.Transition,{name:"fade"},{default:t.withCtx(()=>[n.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["spicyAlert",e.variant])},[e.iconOnly||e.text?(t.openBlock(),t.createElementBlock("span",W,t.toDisplayString(e.icon),1)):t.createCommentVNode("",!0),!e.iconOnly&&e.text?(t.openBlock(),t.createElementBlock("span",K,t.toDisplayString(e.text),1)):t.createCommentVNode("",!0),e.closable?(t.openBlock(),t.createElementBlock("button",{key:2,class:"closeBtn",onClick:o},"×")):t.createCommentVNode("",!0)],2)):t.createCommentVNode("",!0)]),_:1}))}},H=["disabled"],R={key:0,class:"spicyBtnIcon"},C={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--fontSize":n.fontSize,"--fontWeight":n.fontWeight,"--bgColor":n.bgColor,"--textColor":n.textColor,"--borderColor":n.borderColor,"--hoverColor":n.hoverColor}));return(r,i)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["spicyBtn",{outlined:e.variant==="outlined",disabled:e.disabled}]),style:t.normalizeStyle({...o.value}),disabled:e.disabled,onClick:i[0]||(i[0]=(...s)=>r.onClick&&r.onClick(...s))},[e.icon?(t.openBlock(),t.createElementBlock("span",R,t.toDisplayString(e.icon),1)):t.createCommentVNode("",!0),t.createElementVNode("span",null,t.toDisplayString(e.text),1),t.renderSlot(r.$slots,"default")],14,H))}},q={key:0,class:"navControls"},x={key:1,class:"pagination"},G=["onClick"],k={__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{type:String,default:"rgba(0, 255, 234, 0.5)"},loop:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},slides:{type:Array,required:!0},width:{type:String,default:"540px"},height:{type:String,default:"300px"},variant:{type:String,default:""}},setup(e){const l=e,n=t.computed(()=>({"--width":l.width,"--height":l.height,"--activeColor":l.activeColor})),o=t.ref(l.initialSlide),r=t.computed(()=>l.slides[o.value]);let i;t.onMounted(()=>{l.autoplay&&(i=setInterval(d,l.autoplaySpeed))});const s=()=>{o.value=(o.value-1+l.slides.length)%l.slides.length},d=()=>{o.value=(o.value+1)%l.slides.length},g=u=>{o.value=u},c=()=>{clearInterval(i)},y=()=>{l.autoplay&&(i=setInterval(d,l.autoplaySpeed))};return t.onUnmounted(()=>{clearInterval(i)}),(u,ie)=>(t.openBlock(),t.createElementBlock("div",{class:"carouselContainer",style:t.normalizeStyle({...n.value}),onMouseenter:c,onMouseleave:y},[t.createVNode(t.Transition,{name:"slide",mode:"out-in"},{default:t.withCtx(()=>[(t.openBlock(),t.createElementBlock("div",{key:o.value,class:"slide",style:t.normalizeStyle({backgroundImage:`url(${r.value.img})`})},[t.renderSlot(u.$slots,"default"),e.slides[o.value].text?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["textOverlay",{fullScreen:e.variant==="fullScreen",disabled:u.disabled}])},t.toDisplayString(e.slides[o.value].text),3)):t.createCommentVNode("",!0)],4))]),_:3}),e.showNavigation?(t.openBlock(),t.createElementBlock("div",q,[t.createElementVNode("div",{class:"prevNav"},[t.createElementVNode("button",{class:"prev",onClick:s},"<")]),t.createElementVNode("div",{class:"nextNav"},[t.createElementVNode("button",{class:"next",onClick:d},">")])])):t.createCommentVNode("",!0),e.showPagination?(t.openBlock(),t.createElementBlock("div",x,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.slides,(ce,p)=>(t.openBlock(),t.createElementBlock("button",{key:p,onClick:se=>g(p),class:t.normalizeClass({active:p===o.value})},t.toDisplayString(p+1),11,G))),128))])):t.createCommentVNode("",!0)],36))}},J=["placeholder"],Q={key:0,class:"spicyInputError"},B={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:"Label"},error:{type:String,default:""},variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)}},setup(e){const l=e,n=`spicyInput-${i()}`,o=t.ref(l.value),r=t.ref(!1);function i(){const c="0123456789abcdefghijklmnopqrstuvwxyz";let y="";for(let u=0;u<6;u++)y+=c.charAt(Math.floor(Math.random()*c.length));return y}const s=c=>{o.value=c.target.value},d=()=>{r.value=!1},g=()=>{r.value=!0};return(c,y)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["spicyInputWrapper",[e.variant,{hasValue:o.value||e.value,hasFocus:r.value,hasError:e.error}]])},[t.createElementVNode("label",{class:"spicyInputLabel",for:n},t.toDisplayString(e.label),1),t.withDirectives(t.createElementVNode("input",{id:n,class:t.normalizeClass(["spicyInput",e.variant]),"onUpdate:modelValue":y[0]||(y[0]=u=>o.value=u),placeholder:e.placeholder,onInput:s,onBlur:d,onFocus:g},null,42,J),[[t.vModelText,o.value]]),t.renderSlot(c.$slots,"default"),e.error?(t.openBlock(),t.createElementBlock("span",Q,t.toDisplayString(e.error),1)):t.createCommentVNode("",!0)],2))}},X={class:"spicyModalHeader"},Z={class:"spicyModalActions"},_=["onClick"],w={__name:"SpicyModal",props:{width:{type:String,default:"50%"},height:{type:String,default:"auto"},borderRadius:{type:String,default:"8px"},bgColor:{type:String,default:"#2b2b2b"},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},actions:{type:Array,default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{type:String,default:"Title"}},emits:["update:visible"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--width":n.width,"--height":n.height,"--borderRadius":n.borderRadius,"--bgColor":n.bgColor})),r=l,i=()=>{r("update:visible",!1)},s=()=>{n.closeOnClick&&i()};return(d,g)=>e.visible?(t.openBlock(),t.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:s},[t.createElementVNode("div",{class:"spicyModal",style:t.normalizeStyle({...o.value})},[t.createElementVNode("header",X,[t.renderSlot(d.$slots,"spicyModalHeader",{title:e.modalTitle},()=>[t.createTextVNode(t.toDisplayString(e.modalTitle),1)])]),t.renderSlot(d.$slots,"default"),t.createElementVNode("div",Z,[e.actions.length===0&&e.closeBtn?(t.openBlock(),t.createElementBlock("button",{key:0,class:"closeBtn",onClick:i},"Close")):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.actions,c=>(t.openBlock(),t.createElementBlock("button",{class:"actionBtn",key:c.label,onClick:c.handler},t.toDisplayString(c.label),9,_))),128))])],4)])):t.createCommentVNode("",!0)}},ee=["aria-checked","onKeydown","aria-label"],te=[t.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],D={__name:"SpicyToggle",props:{modelValue:Boolean,label:String,variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},borderColor:String,activeColor:String,focusShadow:String},emits:["update:modelValue"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--borderColor":n.borderColor,"--activeColor":n.activeColor,"--focusShadow":n.focusShadow})),r=l,i=()=>{r("update:modelValue",!n.modelValue)};return(s,d)=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({class:["spicyToggle",{outlined:e.variant==="outlined","is-active":e.modelValue}],style:{...o.value},onClick:i,role:"switch","aria-checked":e.modelValue.toString(),tabindex:"0",onKeydown:[t.withKeys(t.withModifiers(i,["prevent"]),["space"]),t.withKeys(t.withModifiers(i,["prevent"]),["enter"])],"aria-label":e.label},s.$attrs),te,16,ee))}};function h(e,l){const n={YYYY:()=>e.getFullYear().toString(),MM:()=>(e.getMonth()+1).toString().padStart(2,"0"),DD:()=>e.getDate().toString().padStart(2,"0")};return l.replace(/YYYY|MM|DD/g,o=>n[o]())}function E(e){const[l,n,o]=e.split("-");return new Date(Number(l),Number(n)-1,Number(o))}function V(e,l){const n=Math.abs(l.getTime()-e.getTime());return Math.ceil(n/(1e3*60*60*24))}function M(e,l){const n=new Date(e);return n.setDate(e.getDate()+l),n}function O(e,l){const n=new Date(e);return n.setDate(e.getDate()-l),n}function N(e){const l=new Date;return e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function T(e){const l=new Date;return l.setDate(l.getDate()-1),e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function $(e){const l=new Date;return l.setDate(l.getDate()+1),e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function I(e="YYYY-MM-DD",l={show:!0,separator:"-"}){if(typeof e!="string"||typeof l!="object"||!l.hasOwnProperty("show")||typeof l.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let o=h(new Date,e);return l.separator&&l.separator!=="-"&&(o=o.replace(/-/g,l.separator)),l.show?{value:o,isVisible:!0}:{value:o,isVisible:!1}}const le=Object.freeze(Object.defineProperty({__proto__:null,currentDate:I,dateAdd:M,dateDiff:V,dateIsToday:N,dateIsTomorrow:$,dateIsYesterday:T,dateSubtract:O,formatDate:h,parseDate:E},Symbol.toStringTag,{value:"Module"}));function z(e){const l=new WeakMap;function n(o){if(f(o)||typeof o!="object")return o;if(l.has(o))return l.get(o);const r=Array.isArray(o)?[]:{};l.set(o,r);for(const i in o)Object.prototype.hasOwnProperty.call(o,i)&&(r[i]=n(o[i]));return r}return n(e)}function S(...e){const l={};return e.forEach(n=>{if(!f(n)){for(const o in n)if(Object.prototype.hasOwnProperty.call(n,o)){const r=n[o];r!==void 0&&(typeof r=="object"&&r!==null&&!Array.isArray(r)?l[o]=S(l[o]||{},r):l[o]=r)}}}),l}function A(...e){return f(e[0])?e[0]:Object.assign({},...e)}function Y(e){return f(e)?[]:Object.keys(e)}function U(e){return f(e)?[]:Object.values(e)}function F(e){return f(e)?[]:Object.entries(e)}function f(e){return e===null||typeof e!="object"?!1:Array.isArray(e)?e.length===0:Object.keys(e).length===0}const ne=Object.freeze(Object.defineProperty({__proto__:null,deepClone:z,deepMerge:S,getObjectEntries:F,getObjectKeys:Y,getObjectValues:U,isObjectEmpty:f,mergeObjects:A},Symbol.toStringTag,{value:"Module"}));function m(e){try{return new URL(e),!0}catch(l){return console.error("Invalid URL:",l),!1}}function P(e){return m(e)?new URL(e).hostname:null}function j(e,l){if(!m(e))return e;const n=new URL(e);return Object.keys(l).forEach(o=>n.searchParams.append(o,l[o])),n.toString()}function L(e,l,n="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(n.toLowerCase()))throw new Error("Invalid protocol: "+n);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))throw new Error("Invalid hostname: "+e);return l.startsWith("/")||(l="/"+l),l.endsWith("/")&&l.length>1&&(l=l.slice(0,-1)),l==="/"&&(l=""),`${n.toLowerCase()}://${e}${l}`}const oe=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:j,generateUrl:L,getHostname:P,isUrlValid:m},Symbol.toStringTag,{value:"Module"})),v=':root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--secondaryColor: #2757f7;--errorColor: #ff0000;--primaryBorderColor: #ccc;--primaryTextColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}',ae={install(e,l={}){const{useComponents:n=!0,useStyles:o=!0}=l;if(n&&(e.component("SpicyAlert",b),e.component("SpicyBtn",C),e.component("SpicyCarousel",k),e.component("SpicyLabel",B),e.component("SpicyModal",w),e.component("SpicyToggle",D)),o){const r=document.createElement("style");r.textContent=v,document.head.appendChild(r)}}};a.SpicyAlert=b,a.SpicyBtn=C,a.SpicyCarousel=k,a.SpicyLabel=B,a.SpicyModal=w,a.SpicyToggle=D,a.appendParamsToUrl=j,a.currentDate=I,a.dateAdd=M,a.dateDiff=V,a.dateIsToday=N,a.dateIsTomorrow=$,a.dateIsYesterday=T,a.dateSubtract=O,a.dateUtils=le,a.deepClone=z,a.deepMerge=S,a.default=ae,a.formatDate=h,a.generateUrl=L,a.getHostname=P,a.getObjectEntries=F,a.getObjectKeys=Y,a.getObjectValues=U,a.isObjectEmpty=f,a.isUrlValid=m,a.mergeObjects=A,a.objUtils=ne,a.parseDate=E,a.spicyStyles=v,a.urlUtils=oe,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.info{background-color:#e0e0e0;color:#333}.success{background-color:#
|
|
1
|
+
.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{margin-right:8px}.closeBtn{margin-left:auto;background:none;border:none;cursor:pointer}.spicyBtn{padding:8px 16px;background-color:var(--bgColor, var(--primaryColor));border:none;border-radius:4px;color:var(--textColor, var(--primaryTextColor));cursor:pointer;font-size:14px;font-weight:500;text-transform:uppercase;transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--borderColor, var(--primaryBorderColor));color:#424242}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--textColor, var(--primaryTextColor))}.spicyBtnIcon{margin-right:6px}.carouselContainer{position:relative;overflow:hidden;width:var(--width, 540px);height:var(--height, 300px)}.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .3s ease;position:relative}.textOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.textOverlay.fullScreen{top:0;right:0;bottom:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#00000080}.slide-enter-active,.slide-leave-active{transition:opacity .3s}.slide-enter,.slide-leave-to{opacity:0}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#fff;cursor:pointer;z-index:1;text-shadow:0 0 5px black;background:#00000080;height:35px;width:35px;border-radius:50%}.prev{left:10px}.next{right:10px}.pagination{position:absolute;bottom:10px;left:50%;transform:translate(-50%);text-shadow:0 0 5px black}.pagination button{border:none;color:#fff;cursor:pointer;margin:0 5px;background:#00000080;height:25px;width:25px;border-radius:50%;font-weight:700}.pagination button.active{background:var(--activeColor);font-weight:700}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor, var(--primaryTextColor));transition:top .25s,font-size .25s,color .25s;pointer-events:none;font-size:18px;background-color:transparent}.spicyInput{padding:20px 16px 8px;border:none;border-bottom:1px solid var(--borderColor, var(--primaryBorderColor));font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor, var(--primaryTextColor))}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--labelFocus)}.outlined .spicyInput{border:1px solid var(--borderColor, var(--primaryBorderColor));border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--borderColor, var(--primaryBorderColor))}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-16px;font-size:16px;color:var(--labelFocus);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px;margin-top:4px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--borderRadius);background-color:var(--bgColor)}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActions button{margin-left:10px}.actionBtn,.closeBtn{background-color:transparent;border:none;color:#fff;cursor:pointer}.spicyToggle{width:50px;height:24px;background-color:var(--borderColor, var(--primaryBorderColor));border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color:var(--activeColor, var(--primaryColor))}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyToggle.is-active .spicyToggleKnob{transform:translate(26px)}.spicyToggle:focus{outline:none;box-shadow:0 0 0 2px var(--foucsShadow, var(--primaryColor))}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--borderColor, var(--primaryBorderColor))}.spicyToggle.outlined.is-active{background-color:var(--activeColor, var(--primaryColor))}
|