spicykatsu 0.0.2 → 0.0.31
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 +6 -1
- package/dist/spicykatsu.es.js +274 -107
- package/dist/spicykatsu.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +11 -8
package/README.md
CHANGED
|
@@ -1 +1,6 @@
|
|
|
1
|
-
# SpicyKatsuLib
|
|
1
|
+
# SpicyKatsuLib
|
|
2
|
+
|
|
3
|
+
Fun, simple library for Vue3. Something for me to play around with in my projects.
|
|
4
|
+
The idea is to make things simple and lightweight. While keeping functionality.
|
|
5
|
+
|
|
6
|
+
Included will be componenets and utilites. Maybe more in the future.
|
package/dist/spicykatsu.es.js
CHANGED
|
@@ -1,8 +1,58 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
1
|
+
import { ref as h, openBlock as a, createBlock as M, Transition as k, withCtx as C, createElementBlock as l, normalizeClass as y, toDisplayString as d, createCommentVNode as u, normalizeStyle as Y, createElementVNode as p, renderSlot as b, withDirectives as I, vModelText as T, mergeProps as $, withKeys as V, withModifiers as x } from "vue";
|
|
2
|
+
const B = {
|
|
3
|
+
key: 0,
|
|
4
|
+
class: "spicyAlertIcon"
|
|
5
|
+
}, A = { key: 1 }, ae = {
|
|
6
|
+
__name: "SpicyAlert",
|
|
7
|
+
props: {
|
|
8
|
+
variant: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: "info",
|
|
11
|
+
validator: (e) => ["info", "success", "warning", "error", "custom"].includes(e)
|
|
12
|
+
},
|
|
13
|
+
text: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: ""
|
|
16
|
+
},
|
|
17
|
+
icon: String,
|
|
18
|
+
iconOnly: Boolean,
|
|
19
|
+
closable: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: !1
|
|
22
|
+
},
|
|
23
|
+
autoClose: {
|
|
24
|
+
type: Number,
|
|
25
|
+
default: 0
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
setup(e) {
|
|
29
|
+
const t = e, r = h(!0), n = () => {
|
|
30
|
+
r.value = !1;
|
|
31
|
+
};
|
|
32
|
+
return t.autoClose > 0 && setTimeout(() => {
|
|
33
|
+
r.value = !1;
|
|
34
|
+
}, t.autoClose), (o, i) => (a(), M(k, { name: "fade" }, {
|
|
35
|
+
default: C(() => [
|
|
36
|
+
r.value ? (a(), l("div", {
|
|
37
|
+
key: 0,
|
|
38
|
+
class: y(["spicyAlert", e.variant])
|
|
39
|
+
}, [
|
|
40
|
+
e.iconOnly || e.text ? (a(), l("span", B, d(e.icon), 1)) : u("", !0),
|
|
41
|
+
!e.iconOnly && e.text ? (a(), l("span", A, d(e.text), 1)) : u("", !0),
|
|
42
|
+
e.closable ? (a(), l("button", {
|
|
43
|
+
key: 2,
|
|
44
|
+
class: "closeButton",
|
|
45
|
+
onClick: n
|
|
46
|
+
}, "×")) : u("", !0)
|
|
47
|
+
], 2)) : u("", !0)
|
|
48
|
+
]),
|
|
49
|
+
_: 1
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
}, P = ["disabled"], E = {
|
|
3
53
|
key: 0,
|
|
4
54
|
class: "spicyBtnIcon"
|
|
5
|
-
},
|
|
55
|
+
}, le = {
|
|
6
56
|
__name: "SpicyBtn",
|
|
7
57
|
props: {
|
|
8
58
|
variant: {
|
|
@@ -34,22 +84,22 @@ const T = ["disabled"], A = {
|
|
|
34
84
|
}
|
|
35
85
|
},
|
|
36
86
|
emits: ["click"],
|
|
37
|
-
setup(e, { emit:
|
|
38
|
-
return (
|
|
39
|
-
class:
|
|
40
|
-
style:
|
|
87
|
+
setup(e, { emit: t }) {
|
|
88
|
+
return (r, n) => (a(), l("button", {
|
|
89
|
+
class: y(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
|
|
90
|
+
style: Y({ "--color": e.color, "--textColor": e.textColor, "--hoverColor": e.hoverColor }),
|
|
41
91
|
disabled: e.disabled,
|
|
42
|
-
onClick:
|
|
92
|
+
onClick: n[0] || (n[0] = (...o) => r.onClick && r.onClick(...o))
|
|
43
93
|
}, [
|
|
44
|
-
e.icon ? (
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
], 14,
|
|
94
|
+
e.icon ? (a(), l("span", E, d(e.icon), 1)) : u("", !0),
|
|
95
|
+
p("span", null, d(e.text), 1),
|
|
96
|
+
b(r.$slots, "default")
|
|
97
|
+
], 14, P));
|
|
48
98
|
}
|
|
49
|
-
},
|
|
99
|
+
}, F = ["placeholder"], U = {
|
|
50
100
|
key: 0,
|
|
51
101
|
class: "spicyInputError"
|
|
52
|
-
},
|
|
102
|
+
}, ie = {
|
|
53
103
|
__name: "SpicyLabel",
|
|
54
104
|
props: {
|
|
55
105
|
value: {
|
|
@@ -75,118 +125,235 @@ const T = ["disabled"], A = {
|
|
|
75
125
|
}
|
|
76
126
|
},
|
|
77
127
|
setup(e) {
|
|
78
|
-
const
|
|
79
|
-
function
|
|
80
|
-
const
|
|
81
|
-
let
|
|
82
|
-
for (let
|
|
83
|
-
|
|
84
|
-
return
|
|
128
|
+
const t = e, r = `spicyInput-${i()}`, n = h(t.value), o = h(!1);
|
|
129
|
+
function i() {
|
|
130
|
+
const c = "0123456789abcdefghijklmnopqrstuvwxyz";
|
|
131
|
+
let f = "";
|
|
132
|
+
for (let g = 0; g < 6; g++)
|
|
133
|
+
f += c.charAt(Math.floor(Math.random() * c.length));
|
|
134
|
+
return f;
|
|
85
135
|
}
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
|
|
90
|
-
},
|
|
91
|
-
|
|
136
|
+
const v = (c) => {
|
|
137
|
+
n.value = c.target.value;
|
|
138
|
+
}, D = () => {
|
|
139
|
+
o.value = !1;
|
|
140
|
+
}, O = () => {
|
|
141
|
+
o.value = !0;
|
|
92
142
|
};
|
|
93
|
-
return (
|
|
94
|
-
class:
|
|
143
|
+
return (c, f) => (a(), l("div", {
|
|
144
|
+
class: y(["spicyInputWrapper", [e.variant, { hasValue: n.value || e.value, hasFocus: o.value, hasError: e.error }]])
|
|
95
145
|
}, [
|
|
96
|
-
|
|
146
|
+
p("label", {
|
|
97
147
|
class: "spicyInputLabel",
|
|
98
|
-
for:
|
|
99
|
-
},
|
|
100
|
-
|
|
101
|
-
id:
|
|
102
|
-
class:
|
|
103
|
-
"onUpdate:modelValue":
|
|
148
|
+
for: r
|
|
149
|
+
}, d(e.label), 1),
|
|
150
|
+
I(p("input", {
|
|
151
|
+
id: r,
|
|
152
|
+
class: y(["spicyInput", e.variant]),
|
|
153
|
+
"onUpdate:modelValue": f[0] || (f[0] = (g) => n.value = g),
|
|
104
154
|
placeholder: e.placeholder,
|
|
105
|
-
onInput:
|
|
106
|
-
onBlur:
|
|
107
|
-
onFocus:
|
|
108
|
-
}, null, 42,
|
|
109
|
-
[
|
|
155
|
+
onInput: v,
|
|
156
|
+
onBlur: D,
|
|
157
|
+
onFocus: O
|
|
158
|
+
}, null, 42, F), [
|
|
159
|
+
[T, n.value]
|
|
110
160
|
]),
|
|
111
|
-
|
|
112
|
-
e.error ? (
|
|
161
|
+
b(c.$slots, "default"),
|
|
162
|
+
e.error ? (a(), l("span", U, d(e.error), 1)) : u("", !0)
|
|
113
163
|
], 2));
|
|
114
164
|
}
|
|
115
|
-
},
|
|
116
|
-
|
|
117
|
-
],
|
|
165
|
+
}, z = ["aria-checked", "onKeydown"], L = /* @__PURE__ */ p("div", { class: "spicyToggleKnob" }, null, -1), j = [
|
|
166
|
+
L
|
|
167
|
+
], se = {
|
|
118
168
|
__name: "SpicyToggle",
|
|
119
169
|
props: {
|
|
120
170
|
modelValue: Boolean
|
|
121
171
|
},
|
|
122
172
|
emits: ["update:modelValue"],
|
|
123
|
-
setup(e, { emit:
|
|
124
|
-
const
|
|
125
|
-
|
|
173
|
+
setup(e, { emit: t }) {
|
|
174
|
+
const r = e, n = t, o = () => {
|
|
175
|
+
n("update:modelValue", !r.modelValue);
|
|
126
176
|
};
|
|
127
|
-
return (
|
|
177
|
+
return (i, v) => (a(), l("div", $({
|
|
128
178
|
class: ["spicyToggle", { "is-active": e.modelValue }],
|
|
129
|
-
onClick:
|
|
179
|
+
onClick: o,
|
|
130
180
|
role: "switch",
|
|
131
181
|
"aria-checked": e.modelValue.toString(),
|
|
132
182
|
tabindex: "0",
|
|
133
|
-
onKeydown: x(
|
|
134
|
-
},
|
|
135
|
-
}
|
|
136
|
-
}, L = {
|
|
137
|
-
key: 0,
|
|
138
|
-
class: "spicyAlertIcon"
|
|
139
|
-
}, M = { key: 1 }, q = {
|
|
140
|
-
__name: "SpicyAlert",
|
|
141
|
-
props: {
|
|
142
|
-
variant: {
|
|
143
|
-
type: String,
|
|
144
|
-
default: "info",
|
|
145
|
-
validator: (e) => ["info", "success", "warning", "error", "custom"].includes(e)
|
|
146
|
-
},
|
|
147
|
-
text: {
|
|
148
|
-
type: String,
|
|
149
|
-
default: ""
|
|
150
|
-
},
|
|
151
|
-
icon: String,
|
|
152
|
-
iconOnly: Boolean,
|
|
153
|
-
closable: {
|
|
154
|
-
type: Boolean,
|
|
155
|
-
default: !1
|
|
156
|
-
},
|
|
157
|
-
autoClose: {
|
|
158
|
-
type: Number,
|
|
159
|
-
default: 0
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
setup(e) {
|
|
163
|
-
const i = e, t = g(!0), l = () => {
|
|
164
|
-
t.value = !1;
|
|
165
|
-
};
|
|
166
|
-
return i.autoClose > 0 && setTimeout(() => {
|
|
167
|
-
t.value = !1;
|
|
168
|
-
}, i.autoClose), (a, d) => (n(), V(I, { name: "fade" }, {
|
|
169
|
-
default: w(() => [
|
|
170
|
-
t.value ? (n(), o("div", {
|
|
171
|
-
key: 0,
|
|
172
|
-
class: f(["spicyAlert", e.variant])
|
|
173
|
-
}, [
|
|
174
|
-
e.iconOnly || e.text ? (n(), o("span", L, c(e.icon), 1)) : r("", !0),
|
|
175
|
-
!e.iconOnly && e.text ? (n(), o("span", M, c(e.text), 1)) : r("", !0),
|
|
176
|
-
e.closable ? (n(), o("button", {
|
|
177
|
-
key: 2,
|
|
178
|
-
class: "closeButton",
|
|
179
|
-
onClick: l
|
|
180
|
-
}, "×")) : r("", !0)
|
|
181
|
-
], 2)) : r("", !0)
|
|
182
|
-
]),
|
|
183
|
-
_: 1
|
|
184
|
-
}));
|
|
183
|
+
onKeydown: V(x(o, ["prevent"]), ["space"])
|
|
184
|
+
}, i.$attrs), j, 16, z));
|
|
185
185
|
}
|
|
186
186
|
};
|
|
187
|
+
function m(e) {
|
|
188
|
+
try {
|
|
189
|
+
return new URL(e), !0;
|
|
190
|
+
} catch (t) {
|
|
191
|
+
return console.error("Invalid URL:", t), !1;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
function N(e) {
|
|
195
|
+
return m(e) ? new URL(e).hostname : null;
|
|
196
|
+
}
|
|
197
|
+
function K(e, t) {
|
|
198
|
+
if (!m(e))
|
|
199
|
+
return e;
|
|
200
|
+
const r = new URL(e);
|
|
201
|
+
return Object.keys(t).forEach((n) => r.searchParams.append(n, t[n])), r.toString();
|
|
202
|
+
}
|
|
203
|
+
function W(e, t, r = "https") {
|
|
204
|
+
if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(r.toLowerCase()))
|
|
205
|
+
throw new Error("Invalid protocol: " + r);
|
|
206
|
+
if (!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))
|
|
207
|
+
throw new Error("Invalid hostname: " + e);
|
|
208
|
+
return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${r.toLowerCase()}://${e}${t}`;
|
|
209
|
+
}
|
|
210
|
+
const ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
211
|
+
__proto__: null,
|
|
212
|
+
appendParamsToUrl: K,
|
|
213
|
+
generateUrl: W,
|
|
214
|
+
getHostname: N,
|
|
215
|
+
isUrlValid: m
|
|
216
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
217
|
+
function S(e, t) {
|
|
218
|
+
const r = {
|
|
219
|
+
YYYY: () => e.getFullYear().toString(),
|
|
220
|
+
MM: () => (e.getMonth() + 1).toString().padStart(2, "0"),
|
|
221
|
+
DD: () => e.getDate().toString().padStart(2, "0")
|
|
222
|
+
};
|
|
223
|
+
return t.replace(/YYYY|MM|DD/g, (n) => r[n]());
|
|
224
|
+
}
|
|
225
|
+
function R(e) {
|
|
226
|
+
const [t, r, n] = e.split("-");
|
|
227
|
+
return new Date(Number(t), Number(r) - 1, Number(n));
|
|
228
|
+
}
|
|
229
|
+
function q(e, t) {
|
|
230
|
+
const r = Math.abs(t.getTime() - e.getTime());
|
|
231
|
+
return Math.ceil(r / (1e3 * 60 * 60 * 24));
|
|
232
|
+
}
|
|
233
|
+
function H(e, t) {
|
|
234
|
+
const r = new Date(e);
|
|
235
|
+
return r.setDate(e.getDate() + t), r;
|
|
236
|
+
}
|
|
237
|
+
function G(e, t) {
|
|
238
|
+
const r = new Date(e);
|
|
239
|
+
return r.setDate(e.getDate() - t), r;
|
|
240
|
+
}
|
|
241
|
+
function J(e) {
|
|
242
|
+
const t = /* @__PURE__ */ new Date();
|
|
243
|
+
return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
244
|
+
}
|
|
245
|
+
function Q(e) {
|
|
246
|
+
const t = /* @__PURE__ */ new Date();
|
|
247
|
+
return t.setDate(t.getDate() - 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
248
|
+
}
|
|
249
|
+
function X(e) {
|
|
250
|
+
const t = /* @__PURE__ */ new Date();
|
|
251
|
+
return t.setDate(t.getDate() + 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
|
|
252
|
+
}
|
|
253
|
+
function Z(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
|
|
254
|
+
if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
|
|
255
|
+
throw new Error(
|
|
256
|
+
'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
|
|
257
|
+
);
|
|
258
|
+
let n = S(/* @__PURE__ */ new Date(), e);
|
|
259
|
+
return t.separator && t.separator !== "-" && (n = n.replace(/-/g, t.separator)), t.show ? { value: n, isVisible: !0 } : { value: n, isVisible: !1 };
|
|
260
|
+
}
|
|
261
|
+
const ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
262
|
+
__proto__: null,
|
|
263
|
+
currentDate: Z,
|
|
264
|
+
dateAdd: H,
|
|
265
|
+
dateDiff: q,
|
|
266
|
+
dateIsToday: J,
|
|
267
|
+
dateIsTomorrow: X,
|
|
268
|
+
dateIsYesterday: Q,
|
|
269
|
+
dateSubtract: G,
|
|
270
|
+
formatDate: S,
|
|
271
|
+
parseDate: R
|
|
272
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
273
|
+
function _(e) {
|
|
274
|
+
const t = /* @__PURE__ */ new WeakMap();
|
|
275
|
+
function r(n) {
|
|
276
|
+
if (s(n) || typeof n != "object")
|
|
277
|
+
return n;
|
|
278
|
+
if (t.has(n))
|
|
279
|
+
return t.get(n);
|
|
280
|
+
const o = Array.isArray(n) ? [] : {};
|
|
281
|
+
t.set(n, o);
|
|
282
|
+
for (const i in n)
|
|
283
|
+
Object.prototype.hasOwnProperty.call(n, i) && (o[i] = r(n[i]));
|
|
284
|
+
return o;
|
|
285
|
+
}
|
|
286
|
+
return r(e);
|
|
287
|
+
}
|
|
288
|
+
function w(...e) {
|
|
289
|
+
const t = {};
|
|
290
|
+
return e.forEach((r) => {
|
|
291
|
+
if (!s(r)) {
|
|
292
|
+
for (const n in r)
|
|
293
|
+
if (Object.prototype.hasOwnProperty.call(r, n)) {
|
|
294
|
+
const o = r[n];
|
|
295
|
+
o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[n] = w(
|
|
296
|
+
t[n] || {},
|
|
297
|
+
o
|
|
298
|
+
) : t[n] = o);
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}), t;
|
|
302
|
+
}
|
|
303
|
+
function ee(...e) {
|
|
304
|
+
return s(e[0]) ? e[0] : Object.assign({}, ...e);
|
|
305
|
+
}
|
|
306
|
+
function te(e) {
|
|
307
|
+
return s(e) ? [] : Object.keys(e);
|
|
308
|
+
}
|
|
309
|
+
function ne(e) {
|
|
310
|
+
return s(e) ? [] : Object.values(e);
|
|
311
|
+
}
|
|
312
|
+
function re(e) {
|
|
313
|
+
return s(e) ? [] : Object.entries(e);
|
|
314
|
+
}
|
|
315
|
+
function s(e) {
|
|
316
|
+
return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
|
|
317
|
+
}
|
|
318
|
+
const de = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
319
|
+
__proto__: null,
|
|
320
|
+
deepClone: _,
|
|
321
|
+
deepMerge: w,
|
|
322
|
+
getObjectEntries: re,
|
|
323
|
+
getObjectKeys: te,
|
|
324
|
+
getObjectValues: ne,
|
|
325
|
+
isObjectEmpty: s,
|
|
326
|
+
mergeObjects: ee
|
|
327
|
+
}, Symbol.toStringTag, { value: "Module" })), fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
328
|
+
__proto__: null
|
|
329
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
187
330
|
export {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
331
|
+
ae as SpicyAlert,
|
|
332
|
+
le as SpicyBtn,
|
|
333
|
+
ie as SpicyLabel,
|
|
334
|
+
se as SpicyToggle,
|
|
335
|
+
K as appendParamsToUrl,
|
|
336
|
+
fe as css,
|
|
337
|
+
Z as currentDate,
|
|
338
|
+
H as dateAdd,
|
|
339
|
+
q as dateDiff,
|
|
340
|
+
J as dateIsToday,
|
|
341
|
+
X as dateIsTomorrow,
|
|
342
|
+
Q as dateIsYesterday,
|
|
343
|
+
G as dateSubtract,
|
|
344
|
+
ue as dateUtils,
|
|
345
|
+
_ as deepClone,
|
|
346
|
+
w as deepMerge,
|
|
347
|
+
S as formatDate,
|
|
348
|
+
W as generateUrl,
|
|
349
|
+
N as getHostname,
|
|
350
|
+
re as getObjectEntries,
|
|
351
|
+
te as getObjectKeys,
|
|
352
|
+
ne as getObjectValues,
|
|
353
|
+
s as isObjectEmpty,
|
|
354
|
+
m as isUrlValid,
|
|
355
|
+
ee as mergeObjects,
|
|
356
|
+
de as objUtils,
|
|
357
|
+
R as parseDate,
|
|
358
|
+
ce as urlUtils
|
|
192
359
|
};
|
package/dist/spicykatsu.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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 j={key:0,class:"spicyAlertIcon"},U={key:1},$={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:e=>["info","success","warning","error","custom"].includes(e)},text:{type:String,default:""},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(e){const t=e,a=n.ref(!0),r=()=>{a.value=!1};return t.autoClose>0&&setTimeout(()=>{a.value=!1},t.autoClose),(o,c)=>(n.openBlock(),n.createBlock(n.Transition,{name:"fade"},{default:n.withCtx(()=>[a.value?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["spicyAlert",e.variant])},[e.iconOnly||e.text?(n.openBlock(),n.createElementBlock("span",j,n.toDisplayString(e.icon),1)):n.createCommentVNode("",!0),!e.iconOnly&&e.text?(n.openBlock(),n.createElementBlock("span",U,n.toDisplayString(e.text),1)):n.createCommentVNode("",!0),e.closable?(n.openBlock(),n.createElementBlock("button",{key:2,class:"closeButton",onClick:r},"×")):n.createCommentVNode("",!0)],2)):n.createCommentVNode("",!0)]),_:1}))}},N=["disabled"],P={key:0,class:"spicyBtnIcon"},A={__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(a,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]=(...o)=>a.onClick&&a.onClick(...o))},[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(a.$slots,"default")],14,N))}},z=["placeholder"],F={key:0,class:"spicyInputError"},L={__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,a=`spicyInput-${c()}`,r=n.ref(t.value),o=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 I=s=>{r.value=s.target.value},G=()=>{o.value=!1},J=()=>{o.value=!0};return(s,d)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["spicyInputWrapper",[e.variant,{hasValue:r.value||e.value,hasFocus:o.value,hasError:e.error}]])},[n.createElementVNode("label",{class:"spicyInputLabel",for:a},n.toDisplayString(e.label),1),n.withDirectives(n.createElementVNode("input",{id:a,class:n.normalizeClass(["spicyInput",e.variant]),"onUpdate:modelValue":d[0]||(d[0]=f=>r.value=f),placeholder:e.placeholder,onInput:I,onBlur:G,onFocus:J},null,42,z),[[n.vModelText,r.value]]),n.renderSlot(s.$slots,"default"),e.error?(n.openBlock(),n.createElementBlock("span",F,n.toDisplayString(e.error),1)):n.createCommentVNode("",!0)],2))}},K=["aria-checked","onKeydown"],W=[n.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],v={__name:"SpicyToggle",props:{modelValue:Boolean},emits:["update:modelValue"],setup(e,{emit:t}){const a=e,r=t,o=()=>{r("update:modelValue",!a.modelValue)};return(c,I)=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({class:["spicyToggle",{"is-active":e.modelValue}],onClick:o,role:"switch","aria-checked":e.modelValue.toString(),tabindex:"0",onKeydown:n.withKeys(n.withModifiers(o,["prevent"]),["space"])},c.$attrs),W,16,K))}};function u(e){try{return new URL(e),!0}catch(t){return console.error("Invalid URL:",t),!1}}function m(e){return u(e)?new URL(e).hostname:null}function h(e,t){if(!u(e))return e;const a=new URL(e);return Object.keys(t).forEach(r=>a.searchParams.append(r,t[r])),a.toString()}function p(e,t,a="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(a.toLowerCase()))throw new Error("Invalid protocol: "+a);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=""),`${a.toLowerCase()}://${e}${t}`}const R=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:h,generateUrl:p,getHostname:m,isUrlValid:u},Symbol.toStringTag,{value:"Module"}));function g(e,t){const a={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=>a[r]())}function S(e){const[t,a,r]=e.split("-");return new Date(Number(t),Number(a)-1,Number(r))}function b(e,t){const a=Math.abs(t.getTime()-e.getTime());return Math.ceil(a/(1e3*60*60*24))}function D(e,t){const a=new Date(e);return a.setDate(e.getDate()+t),a}function w(e,t){const a=new Date(e);return a.setDate(e.getDate()-t),a}function k(e){const t=new Date;return 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 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 C(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=g(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 q=Object.freeze(Object.defineProperty({__proto__:null,currentDate:C,dateAdd:D,dateDiff:b,dateIsToday:k,dateIsTomorrow:B,dateIsYesterday:O,dateSubtract:w,formatDate:g,parseDate:S},Symbol.toStringTag,{value:"Module"}));function M(e){const t=new WeakMap;function a(r){if(i(r)||typeof r!="object")return r;if(t.has(r))return t.get(r);const o=Array.isArray(r)?[]:{};t.set(r,o);for(const c in r)Object.prototype.hasOwnProperty.call(r,c)&&(o[c]=a(r[c]));return o}return a(e)}function y(...e){const t={};return e.forEach(a=>{if(!i(a)){for(const r in a)if(Object.prototype.hasOwnProperty.call(a,r)){const o=a[r];o!==void 0&&(typeof o=="object"&&o!==null&&!Array.isArray(o)?t[r]=y(t[r]||{},o):t[r]=o)}}}),t}function V(...e){return i(e[0])?e[0]:Object.assign({},...e)}function E(e){return i(e)?[]:Object.keys(e)}function T(e){return i(e)?[]:Object.values(e)}function Y(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 H=Object.freeze(Object.defineProperty({__proto__:null,deepClone:M,deepMerge:y,getObjectEntries:Y,getObjectKeys:E,getObjectValues:T,isObjectEmpty:i,mergeObjects:V},Symbol.toStringTag,{value:"Module"})),_=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));l.SpicyAlert=$,l.SpicyBtn=A,l.SpicyLabel=L,l.SpicyToggle=v,l.appendParamsToUrl=h,l.css=_,l.currentDate=C,l.dateAdd=D,l.dateDiff=b,l.dateIsToday=k,l.dateIsTomorrow=B,l.dateIsYesterday=O,l.dateSubtract=w,l.dateUtils=q,l.deepClone=M,l.deepMerge=y,l.formatDate=g,l.generateUrl=p,l.getHostname=m,l.getObjectEntries=Y,l.getObjectKeys=E,l.getObjectValues=T,l.isObjectEmpty=i,l.isUrlValid=u,l.mergeObjects=V,l.objUtils=H,l.parseDate=S,l.urlUtils=R,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.spicyBtn{padding:8px 16px;background-color:var(--color, var(--primaryColor));border:none;border-radius:4px;color:var(--textColor);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);color:#424242}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){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:#d4edda;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{margin-right:8px}.closeButton{margin-left:auto;background:none;border:none;cursor:pointer}.spicyBtn{padding:8px 16px;background-color:var(--color, var(--primaryColor));border:none;border-radius:4px;color:var(--textColor);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);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)}.spicyBtnIcon{margin-right:6px}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor);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);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor)}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--labelFocus)}.outlined .spicyInput{border:1px solid var(--borderColor);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--borderColor)}.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}.spicyToggle{width:50px;height:24px;background-color:var(--borderColor);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color: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 #5e138180}:root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--errorColor: #ff0000;--borderColor: #ccc;--textColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--textColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--textColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}
|
package/package.json
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spicykatsu",
|
|
3
|
-
"description": "
|
|
3
|
+
"description": "Simple Library for Vue3.",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Sato",
|
|
6
6
|
"private": false,
|
|
7
|
-
"version": "0.0.
|
|
8
|
-
"files": [
|
|
7
|
+
"version": "0.0.31",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/",
|
|
10
|
+
"package.json",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
9
13
|
"type": "module",
|
|
10
14
|
"main": "dist/spicykatsu.es.js",
|
|
11
15
|
"scripts": {
|
|
12
16
|
"dev": "vite",
|
|
13
17
|
"build": "vue-tsc && vite build",
|
|
14
|
-
"
|
|
18
|
+
"publish": "npm publish",
|
|
15
19
|
"docs:dev": "vitepress dev docs",
|
|
16
20
|
"test": "jest"
|
|
17
21
|
},
|
|
@@ -20,9 +24,8 @@
|
|
|
20
24
|
},
|
|
21
25
|
"devDependencies": {
|
|
22
26
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
23
|
-
"typescript": "^5.
|
|
24
|
-
"vite": "^5.2.
|
|
25
|
-
"
|
|
26
|
-
"vue-tsc": "^2.0.6"
|
|
27
|
+
"typescript": "^5.4.4",
|
|
28
|
+
"vite": "^5.2.8",
|
|
29
|
+
"vue-tsc": "^2.0.10"
|
|
27
30
|
}
|
|
28
31
|
}
|