spicykatsu 0.5.0 → 0.8.0

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.
Files changed (97) hide show
  1. package/README.md +43 -7
  2. package/dist/SpicyAccordion-TUM16yOu.js +50 -0
  3. package/dist/SpicyAccordion.js +1 -1
  4. package/dist/SpicyAlert-BD6QHaFZ.js +100 -0
  5. package/dist/SpicyAlert-BwS5wCXQ.js +102 -0
  6. package/dist/SpicyAlert.js +1 -1
  7. package/dist/SpicyBtn-DQ7A3JOM.js +80 -0
  8. package/dist/SpicyBtn.js +1 -1
  9. package/dist/SpicyCarousel-BpRYOVoa.js +123 -0
  10. package/dist/SpicyCarousel-CkCmK2tQ.js +123 -0
  11. package/dist/SpicyCarousel-DGtg0K1L.js +123 -0
  12. package/dist/SpicyCarousel.js +1 -1
  13. package/dist/SpicyDataTable-CLkxtyXn.js +129 -0
  14. package/dist/SpicyDataTable-x2bGAZMS.js +129 -0
  15. package/dist/SpicyDataTable.js +1 -1
  16. package/dist/SpicyDialog-P2nz6r0B.js +47 -0
  17. package/dist/SpicyDialog.js +1 -1
  18. package/dist/SpicyDropdown-COCmOTvv.js +66 -0
  19. package/dist/SpicyDropdown-CkpSJleZ.js +64 -0
  20. package/dist/SpicyDropdown-DYtCUZwE.js +67 -0
  21. package/dist/SpicyDropdown-HF7sHzZS.js +68 -0
  22. package/dist/SpicyDropdown.js +1 -1
  23. package/dist/SpicyFileInput-Cm8fYpHV.js +139 -0
  24. package/dist/SpicyFileInput-CnO7Pecq.js +130 -0
  25. package/dist/SpicyFileInput-Dkgt7474.js +132 -0
  26. package/dist/SpicyFileInput.js +1 -1
  27. package/dist/SpicyModal-DYN8yDMt.js +96 -0
  28. package/dist/SpicyModal.js +1 -1
  29. package/dist/SpicyProgress-62dbvFg1.js +76 -0
  30. package/dist/SpicyProgress.js +1 -1
  31. package/dist/SpicySlider-CGNWDfwv.js +63 -0
  32. package/dist/SpicySlider-DfkXTMmc.js +63 -0
  33. package/dist/SpicySlider.js +1 -1
  34. package/dist/SpicyTabs-BHIwFnvt.js +67 -0
  35. package/dist/SpicyTabs-DmB1xuWN.js +66 -0
  36. package/dist/SpicyTabs-DrrGbixN.js +67 -0
  37. package/dist/SpicyTabs-eGAZI2BB.js +70 -0
  38. package/dist/SpicyTabs.js +1 -1
  39. package/dist/SpicyTextArea-CxEDRJ1P.js +41 -0
  40. package/dist/SpicyTextArea.js +1 -1
  41. package/dist/SpicyTextField-sziwr-ns.js +96 -0
  42. package/dist/SpicyTextField.js +1 -1
  43. package/dist/SpicyToggle-C-JcmPvu.js +55 -0
  44. package/dist/SpicyToggle-DdJKYSzD.js +55 -0
  45. package/dist/SpicyToggle.js +1 -1
  46. package/dist/SpicyTooltip-CE8Cg0wo.js +80 -0
  47. package/dist/SpicyTooltip-aBB5NaKu.js +81 -0
  48. package/dist/SpicyTooltip.js +1 -1
  49. package/dist/index.js +26 -26
  50. package/dist/spicyDrag-BLiL2y_4.js +38 -0
  51. package/dist/spicyDrag.js +1 -1
  52. package/dist/spicyRipple-CViURy7j.js +43 -0
  53. package/dist/spicyRipple-DcEibbQv.js +42 -0
  54. package/dist/spicyRipple.js +1 -1
  55. package/dist/spicykatsu.css +1 -1
  56. package/dist/spicykatsu.umd.js +1 -1
  57. package/dist/styles/SpicyAccordion.css +1 -1
  58. package/dist/styles/SpicyAlert.css +1 -1
  59. package/dist/styles/SpicyCarousel.css +1 -1
  60. package/dist/styles/SpicyDropdown.css +1 -1
  61. package/dist/styles/SpicyTabs.css +1 -1
  62. package/dist/styles/SpicyTextField.css +1 -1
  63. package/dist/styles/base.css +28 -0
  64. package/dist/styles/main.css +2 -45
  65. package/dist/styles/variables.css +16 -0
  66. package/dist/types/components/SpicyAccordion/SpicyAccordion.test.d.ts +1 -0
  67. package/dist/types/components/SpicyAlert/SpicyAlert.test.d.ts +1 -0
  68. package/dist/types/components/SpicyAlert/SpicyAlert.vue.d.ts +5 -1
  69. package/dist/types/components/SpicyBtn/SpicyBtn.test.d.ts +1 -0
  70. package/dist/types/components/SpicyCarousel/SpicyCarousel.test.d.ts +1 -0
  71. package/dist/types/components/SpicyDataTable/SpicyDataTable.test.d.ts +1 -0
  72. package/dist/types/components/SpicyDialog/SpicyDialog.test.d.ts +1 -0
  73. package/dist/types/components/SpicyDialog/SpicyDialog.vue.d.ts +11 -27
  74. package/dist/types/components/SpicyDivider/SpicyDivider.test.d.ts +1 -0
  75. package/dist/types/components/SpicyDropdown/SpicyDropdown.test.d.ts +1 -0
  76. package/dist/types/components/SpicyDropdown/SpicyDropdown.vue.d.ts +2 -0
  77. package/dist/types/components/SpicyFileInput/SpicyFileInput.test.d.ts +1 -0
  78. package/dist/types/components/SpicyFileInput/SpicyFileInput.vue.d.ts +7 -7
  79. package/dist/types/components/SpicyModal/SpicyModal.test.d.ts +1 -0
  80. package/dist/types/components/SpicyModal/SpicyModal.vue.d.ts +8 -4
  81. package/dist/types/components/SpicyProgress/SpicyProgress.test.d.ts +1 -0
  82. package/dist/types/components/SpicySheet/SpicySheet.test.d.ts +1 -0
  83. package/dist/types/components/SpicySlider/SpicySlider.test.d.ts +1 -0
  84. package/dist/types/components/SpicyTabs/SpicyTabs.test.d.ts +1 -0
  85. package/dist/types/components/SpicyTabs/SpicyTabs.vue.d.ts +4 -4
  86. package/dist/types/components/SpicyTextArea/SpicyTextArea.test.d.ts +1 -0
  87. package/dist/types/components/SpicyTextArea/SpicyTextArea.vue.d.ts +3 -3
  88. package/dist/types/components/SpicyTextField/SpicyTextField.test.d.ts +1 -0
  89. package/dist/types/components/SpicyTextField/SpicyTextField.vue.d.ts +9 -9
  90. package/dist/types/components/SpicyToggle/SpicyToggle.test.d.ts +1 -0
  91. package/dist/types/components/SpicyTooltip/SpicyTooltip.test.d.ts +1 -0
  92. package/dist/types/components/SpicyTree/SpicyTree.test.d.ts +1 -0
  93. package/dist/types/components/SpicyTree/SpicyTree.vue.d.ts +2 -0
  94. package/dist/types/components/SpicyTree/SpicyTreeNode.vue.d.ts +8 -7
  95. package/dist/types/index.d.ts +1 -1
  96. package/dist/types/umd.d.ts +0 -1
  97. package/package.json +28 -10
package/README.md CHANGED
@@ -14,6 +14,10 @@ npm install spicykatsu
14
14
 
15
15
  ## Usage
16
16
 
17
+ ### Full Install (Recommended)
18
+
19
+ All components, styles, and directives are registered automatically. No extra imports needed.
20
+
17
21
  ```ts
18
22
  import { createApp } from 'vue'
19
23
  import App from './App.vue'
@@ -24,30 +28,62 @@ app.use(SpicyKatsu)
24
28
  app.mount('#app')
25
29
  ```
26
30
 
27
- Styles are automatically injected when you call `app.use(SpicyKatsu)` - no CSS import needed.
31
+ ### Tree-Shakeable (For production optimization)
28
32
 
29
- You can also import components individually for JS tree-shaking:
33
+ Import only the components and directives you need. Each component's CSS is bundled automatically via its `<style>` block. However, you **must** also import the CSS variables so components look correct.
30
34
 
31
35
  ```ts
32
- import { SpicyBtn, SpicyModal } from 'spicykatsu'
36
+ import { createApp } from 'vue'
37
+ import App from './App.vue'
38
+ import { SpicyBtn, SpicyModal } from 'spicykatsu/SpicyBtn'
39
+ import { spicyRipple } from 'spicykatsu/spicyRipple'
40
+
41
+ // Import CSS variables (required for components to look correct)
42
+ import 'spicykatsu/styles/variables'
43
+
44
+ const app = createApp(App)
45
+ app.component('SpicyBtn', SpicyBtn)
46
+ app.component('SpicyModal', SpicyModal)
47
+ app.directive('spicyRipple', spicyRipple)
48
+ app.mount('#app')
33
49
  ```
34
50
 
35
- For CSS tree-shaking, set `useStyles: false` and import only what you need:
51
+ You can also import base utility styles if you use `.spicyText`, `.spicyHeader`, or `.spicyLink` classes:
36
52
 
37
53
  ```ts
38
- import 'spicykatsu/dist/lib/SpicyBtn/SpicyBtn.css'
54
+ import 'spicykatsu/styles/base'
39
55
  ```
40
56
 
41
- ## Options
57
+ Or import all styles at once:
58
+
59
+ ```ts
60
+ import 'spicykatsu/styles'
61
+ ```
62
+
63
+ ### Plugin with selective options
64
+
65
+ You can also use the plugin with options to control what gets registered:
42
66
 
43
67
  ```ts
44
68
  app.use(SpicyKatsu, {
45
69
  useComponents: true, // Register all components globally (default: true)
46
- useStyles: true, // Inject all component styles into <head> (default: true)
70
+ useStyles: true, // Inject all styles into <head> (default: true)
47
71
  useDirectives: true // Register v-spicyDrag and v-spicyRipple (default: true)
48
72
  })
49
73
  ```
50
74
 
75
+ Set any to `false` to opt out of that part. For example, to register components yourself but still get styles injected:
76
+
77
+ ```ts
78
+ app.use(SpicyKatsu, { useComponents: false })
79
+ ```
80
+
81
+ To inject only CSS variables (useful when tree-shaking components but still using the plugin for style injection):
82
+
83
+ ```ts
84
+ app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })
85
+ ```
86
+
51
87
  ## Components
52
88
 
53
89
  | Component | Description |
package/dist/SpicyAccordion-TUM16yOu.js ADDED
@@ -0,0 +1,50 @@
1
+ import { Fragment as e, Transition as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, withCtx as p } from "vue";
2
+ //#region src/components/SpicyAccordion/SpicyAccordion.vue?vue&type=script&setup=true&lang.ts
3
+ var m = { class: "spicyAccordion" }, h = ["onClick", "aria-expanded"], g = {
4
+ key: 0,
5
+ class: "accordionIcon",
6
+ viewBox: "0 0 24 24",
7
+ xmlns: "http://www.w3.org/2000/svg"
8
+ }, _ = ["d"], v = {
9
+ key: 0,
10
+ class: "spicyAccordionContent"
11
+ }, y = /* @__PURE__ */ o({
12
+ __name: "SpicyAccordion",
13
+ props: {
14
+ sections: {},
15
+ singleOpen: {
16
+ type: Boolean,
17
+ default: !1
18
+ },
19
+ defaultOpen: {}
20
+ },
21
+ setup(o) {
22
+ let y = o, b = l(y.defaultOpen || []), x = (e) => {
23
+ if (y.singleOpen) b.value = b.value.includes(e) ? [] : [e];
24
+ else {
25
+ let t = b.value.indexOf(e);
26
+ t === -1 ? b.value.push(e) : b.value.splice(t, 1);
27
+ }
28
+ }, S = (e) => b.value.includes(e);
29
+ return (l, y) => (c(), r("div", m, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
30
+ key: o,
31
+ class: "spicyAccordionItem"
32
+ }, [i("button", {
33
+ class: s(["spicyAccordionHeader", { open: S(o) }]),
34
+ onClick: (e) => x(o),
35
+ "aria-expanded": S(o)
36
+ }, [
37
+ i("span", null, f(e.title), 1),
38
+ e.icon ? (c(), r("svg", g, [i("path", { d: e.icon }, null, 8, _)])) : n("", !0),
39
+ y[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
40
+ class: "accordionArrow",
41
+ viewBox: "0 0 24 24"
42
+ }, [i("path", { d: "M7 10l5 5 5-5H7z" })])], -1)
43
+ ], 10, h), a(t, { name: "accordion-slide" }, {
44
+ default: p(() => [S(o) ? (c(), r("div", v, [d(l.$slots, `section-${o}`)])) : n("", !0)]),
45
+ _: 2
46
+ }, 1024)]))), 128))]));
47
+ }
48
+ });
49
+ //#endregion
50
+ export { y as t };
package/dist/SpicyAccordion.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./SpicyAccordion-Cm-RI3r_.js";
1
+ import { t as e } from "./SpicyAccordion-TUM16yOu.js";
2
2
  export { e as SpicyAccordion, e as default };
package/dist/SpicyAlert-BD6QHaFZ.js ADDED
@@ -0,0 +1,100 @@
1
+ import { Transition as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onBeforeUnmount as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, watch as f, withCtx as p, withKeys as m } from "vue";
2
+ //#region src/components/SpicyAlert/SpicyAlert.vue?vue&type=script&setup=true&lang.ts
3
+ var h = ["aria-label"], g = {
4
+ key: 0,
5
+ class: "spicyAlertIcon"
6
+ }, _ = {
7
+ key: 1,
8
+ class: "spicyAlertIcon",
9
+ viewBox: "0 0 24 24",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
12
+ key: 0,
13
+ class: "spicyAlertTitle"
14
+ }, x = {
15
+ key: 1,
16
+ class: "spicyAlertText"
17
+ }, S = {
18
+ key: 0,
19
+ viewBox: "0 0 24 24",
20
+ xmlns: "http://www.w3.org/2000/svg"
21
+ }, C = ["d"], w = { key: 1 }, T = /* @__PURE__ */ a({
22
+ __name: "SpicyAlert",
23
+ props: {
24
+ variant: { default: "info" },
25
+ title: {},
26
+ text: {},
27
+ icon: {},
28
+ mdi: {},
29
+ iconOnly: {
30
+ type: Boolean,
31
+ default: !1
32
+ },
33
+ closable: {
34
+ type: Boolean,
35
+ default: !1
36
+ },
37
+ autoClose: { default: 0 },
38
+ closeIcon: {},
39
+ isRound: {
40
+ type: Boolean,
41
+ default: !1
42
+ }
43
+ },
44
+ emits: ["close"],
45
+ setup(a, { emit: T }) {
46
+ let E = a, D = T, O = l(!0), k = null, A = l(E.autoClose), j = null, M = () => {
47
+ O.value = !1, D("close");
48
+ }, N = () => {
49
+ A.value > 0 && (j = Date.now(), k = setTimeout(() => {
50
+ M();
51
+ }, A.value));
52
+ }, P = () => {
53
+ k &&= (clearTimeout(k), null);
54
+ }, F = () => {
55
+ if (k && j !== null) {
56
+ let e = Date.now() - j;
57
+ A.value = Math.max(0, A.value - e), P(), j = null;
58
+ }
59
+ }, I = () => {
60
+ N();
61
+ };
62
+ return f(() => E.autoClose, (e) => {
63
+ A.value = e, P(), N();
64
+ }), s(() => {
65
+ P();
66
+ }), N(), (s, l) => (c(), t(e, { name: "fade" }, {
67
+ default: p(() => [O.value ? (c(), r("div", {
68
+ key: 0,
69
+ class: o(["spicyAlert", [a.variant, { spicyAlertRound: a.isRound }]]),
70
+ "aria-atomic": "true",
71
+ "aria-label": a.text || "Alert",
72
+ role: "alert",
73
+ onKeydown: m(M, ["enter"]),
74
+ onMouseenter: F,
75
+ onMouseleave: I
76
+ }, [
77
+ a.iconOnly && a.icon ? (c(), r("span", g, d(a.icon), 1)) : n("", !0),
78
+ a.mdi ? (c(), r("svg", _, [i("path", {
79
+ fill: "currentColor",
80
+ class: "spicyAlertMDI",
81
+ d: a.mdi
82
+ }, null, 8, v)])) : n("", !0),
83
+ i("div", y, [a.title ? (c(), r("span", b, d(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (c(), r("span", x, d(a.text), 1)) : n("", !0)]),
84
+ a.closable ? (c(), r("button", {
85
+ key: 2,
86
+ class: "spicyAlertCloseBtn",
87
+ onClick: M,
88
+ "aria-label": "Close alert"
89
+ }, [a.closeIcon ? (c(), r("svg", S, [i("path", {
90
+ fill: "#000",
91
+ d: a.closeIcon
92
+ }, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
93
+ a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
94
+ ], 42, h)) : n("", !0)]),
95
+ _: 3
96
+ }));
97
+ }
98
+ });
99
+ //#endregion
100
+ export { T as t };
package/dist/SpicyAlert-BwS5wCXQ.js ADDED
@@ -0,0 +1,102 @@
1
+ import { Transition as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onBeforeUnmount as s, onMounted as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, watch as p, withCtx as m, withKeys as h } from "vue";
2
+ //#region src/components/SpicyAlert/SpicyAlert.vue?vue&type=script&setup=true&lang.ts
3
+ var g = ["aria-label"], _ = {
4
+ key: 0,
5
+ class: "spicyAlertIcon"
6
+ }, v = {
7
+ key: 1,
8
+ class: "spicyAlertIcon",
9
+ viewBox: "0 0 24 24",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, y = ["d"], b = { class: "spicyAlertContainer" }, x = {
12
+ key: 0,
13
+ class: "spicyAlertTitle"
14
+ }, S = {
15
+ key: 1,
16
+ class: "spicyAlertText"
17
+ }, C = {
18
+ key: 0,
19
+ viewBox: "0 0 24 24",
20
+ xmlns: "http://www.w3.org/2000/svg"
21
+ }, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
22
+ __name: "SpicyAlert",
23
+ props: {
24
+ variant: { default: "info" },
25
+ title: {},
26
+ text: {},
27
+ icon: {},
28
+ mdi: {},
29
+ iconOnly: {
30
+ type: Boolean,
31
+ default: !1
32
+ },
33
+ closable: {
34
+ type: Boolean,
35
+ default: !1
36
+ },
37
+ autoClose: { default: 0 },
38
+ closeIcon: {},
39
+ isRound: {
40
+ type: Boolean,
41
+ default: !1
42
+ }
43
+ },
44
+ emits: ["close"],
45
+ setup(a, { emit: E }) {
46
+ let D = a, O = E, k = u(!0), A = null, j = u(D.autoClose), M = null, N = () => {
47
+ k.value = !1, O("close");
48
+ }, P = () => {
49
+ j.value > 0 && (M = Date.now(), A = setTimeout(() => {
50
+ N();
51
+ }, j.value));
52
+ }, F = () => {
53
+ A &&= (clearTimeout(A), null);
54
+ }, I = () => {
55
+ if (A && M !== null) {
56
+ let e = Date.now() - M;
57
+ j.value = Math.max(0, j.value - e), F(), M = null;
58
+ }
59
+ }, L = () => {
60
+ P();
61
+ };
62
+ return p(() => D.autoClose, (e) => {
63
+ j.value = e, F(), P();
64
+ }), s(() => {
65
+ F();
66
+ }), c(() => {
67
+ P();
68
+ }), (s, c) => (l(), t(e, { name: "fade" }, {
69
+ default: m(() => [k.value ? (l(), r("div", {
70
+ key: 0,
71
+ class: o(["spicyAlert", [a.variant, { spicyAlertRound: a.isRound }]]),
72
+ "aria-atomic": "true",
73
+ "aria-label": a.text || "Alert",
74
+ role: "alert",
75
+ onKeydown: h(N, ["enter"]),
76
+ onMouseenter: I,
77
+ onMouseleave: L
78
+ }, [
79
+ a.iconOnly && a.icon ? (l(), r("span", _, f(a.icon), 1)) : n("", !0),
80
+ a.mdi ? (l(), r("svg", v, [i("path", {
81
+ fill: "currentColor",
82
+ class: "spicyAlertMDI",
83
+ d: a.mdi
84
+ }, null, 8, y)])) : n("", !0),
85
+ i("div", b, [a.title ? (l(), r("span", x, f(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (l(), r("span", S, f(a.text), 1)) : n("", !0)]),
86
+ a.closable ? (l(), r("button", {
87
+ key: 2,
88
+ class: "spicyAlertCloseBtn",
89
+ onClick: N,
90
+ "aria-label": "Close alert"
91
+ }, [a.closeIcon ? (l(), r("svg", C, [i("path", {
92
+ fill: "#000",
93
+ d: a.closeIcon
94
+ }, null, 8, w)])) : (l(), r("span", T, "X"))])) : n("", !0),
95
+ a.text ? n("", !0) : d(s.$slots, "default", { key: 3 })
96
+ ], 42, g)) : n("", !0)]),
97
+ _: 3
98
+ }));
99
+ }
100
+ });
101
+ //#endregion
102
+ export { E as t };
package/dist/SpicyAlert.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./SpicyAlert-Bwi92wCd.js";
1
+ import { t as e } from "./SpicyAlert-BwS5wCXQ.js";
2
2
  export { e as SpicyAlert, e as default };
package/dist/SpicyBtn-DQ7A3JOM.js ADDED
@@ -0,0 +1,80 @@
1
+ import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c, resolveDirective as l, toDisplayString as u, withDirectives as d } from "vue";
2
+ //#region src/components/SpicyBtn/SpicyBtn.vue?vue&type=script&setup=true&lang.ts
3
+ var f = [
4
+ "disabled",
5
+ "aria-label",
6
+ "aria-disabled",
7
+ "tabindex"
8
+ ], p = {
9
+ key: 0,
10
+ class: "spicyBtnIcon",
11
+ viewBox: "0 0 24 24",
12
+ xmlns: "http://www.w3.org/2000/svg"
13
+ }, m = ["d"], h = {
14
+ key: 1,
15
+ class: "spicyBtnIcon"
16
+ }, g = {
17
+ key: 2,
18
+ class: "spicyBtnText"
19
+ }, _ = /* @__PURE__ */ i({
20
+ __name: "SpicyBtn",
21
+ props: {
22
+ variant: { default: "filled" },
23
+ disabled: {
24
+ type: Boolean,
25
+ default: !1
26
+ },
27
+ text: {},
28
+ icon: {},
29
+ mdi: {},
30
+ size: { default: "default" },
31
+ bgColor: {},
32
+ textColor: { default: "#ddd" },
33
+ hoverColor: {},
34
+ borderColor: {},
35
+ fontSize: { default: 16 },
36
+ fontWeight: { default: 500 },
37
+ ariaLabel: {}
38
+ },
39
+ emits: ["click"],
40
+ setup(i, { emit: _ }) {
41
+ let v = _, y = (e) => {
42
+ b.disabled || v("click", e);
43
+ }, b = i, x = e(() => b.ariaLabel || b.text || "Button"), S = e(() => ({
44
+ "--skFontSize": typeof b.fontSize == "number" ? `${b.fontSize}px` : b.fontSize,
45
+ "--skFontWeight": b.fontWeight,
46
+ "--skBgColor": b.bgColor,
47
+ "--skTextColor": b.textColor,
48
+ "--skBorderColor": b.borderColor,
49
+ "--hoverColor": b.hoverColor
50
+ })), C = e(() => !b.text && (b.icon || b.mdi)), w = e(() => ({
51
+ spicyBtn: !0,
52
+ outlined: b.variant === "outlined",
53
+ disabled: b.disabled,
54
+ isRound: C.value,
55
+ [b.size]: b.size !== "default"
56
+ }));
57
+ return (e, _) => {
58
+ let v = l("spicyRipple");
59
+ return d((s(), n("button", {
60
+ class: a(w.value),
61
+ style: o(S.value),
62
+ disabled: i.disabled,
63
+ onClick: y,
64
+ "aria-label": x.value,
65
+ "aria-disabled": i.disabled,
66
+ tabindex: i.disabled ? -1 : 0
67
+ }, [
68
+ i.mdi ? (s(), n("svg", p, [r("path", {
69
+ fill: "currentColor",
70
+ class: "spicyBtnMDI",
71
+ d: i.mdi
72
+ }, null, 8, m)])) : i.icon ? (s(), n("span", h, u(i.icon), 1)) : t("", !0),
73
+ i.text ? (s(), n("span", g, u(i.text), 1)) : t("", !0),
74
+ c(e.$slots, "default")
75
+ ], 14, f)), [[v]]);
76
+ };
77
+ }
78
+ });
79
+ //#endregion
80
+ export { _ as t };
package/dist/SpicyBtn.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
1
+ import { t as e } from "./SpicyBtn-DQ7A3JOM.js";
2
2
  export { e as SpicyBtn, e as default };
package/dist/SpicyCarousel-BpRYOVoa.js ADDED
@@ -0,0 +1,123 @@
1
+ import { Fragment as e, Transition as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, withCtx as _ } from "vue";
2
+ //#region src/components/SpicyCarousel/SpicyCarousel.vue?vue&type=script&setup=true&lang.ts
3
+ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
4
+ key: 0,
5
+ class: "spicyCarouselNavControls"
6
+ }, C = {
7
+ key: 1,
8
+ class: "spicyCarouselPagination"
9
+ }, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
10
+ __name: "SpicyCarousel",
11
+ props: {
12
+ autoplay: {
13
+ type: Boolean,
14
+ default: !1
15
+ },
16
+ autoplaySpeed: { default: 5e3 },
17
+ showNavigation: {
18
+ type: Boolean,
19
+ default: !0
20
+ },
21
+ showPagination: {
22
+ type: Boolean,
23
+ default: !0
24
+ },
25
+ activeColor: { default: "var(--skPrimaryColor)" },
26
+ loop: {
27
+ type: Boolean,
28
+ default: !0
29
+ },
30
+ initialSlide: { default: 0 },
31
+ slides: { default: () => [] },
32
+ width: { default: "580px" },
33
+ height: { default: "360px" },
34
+ fullScreen: {
35
+ type: Boolean,
36
+ default: !1
37
+ },
38
+ enableImageClick: {
39
+ type: Boolean,
40
+ default: !1
41
+ },
42
+ paginationLimit: { default: 10 }
43
+ },
44
+ setup(s) {
45
+ let E = 0, D = 0, O = !1, k = s, A = n(() => ({
46
+ "--width": k.width,
47
+ "--height": k.height,
48
+ "--activeColor": k.activeColor
49
+ })), j = n(() => k.slides[N.value]?.title), M = n(() => P.value?.fullScreen === !1 ? !1 : k.fullScreen), N = p(Math.max(0, Math.min(k.initialSlide, k.slides.length - 1))), P = n(() => k.slides[N.value]), F, I = () => {
50
+ k.slides.length !== 0 && (k.loop ? N.value = (N.value - 1 + k.slides.length) % k.slides.length : N.value = Math.max(0, N.value - 1));
51
+ }, L = () => {
52
+ k.slides.length !== 0 && (k.loop ? N.value = (N.value + 1) % k.slides.length : N.value = Math.min(k.slides.length - 1, N.value + 1));
53
+ }, R = (e) => {
54
+ k.slides.length !== 0 && (N.value = Math.max(0, Math.min(e, k.slides.length - 1)));
55
+ }, z = () => {
56
+ F &&= (clearInterval(F), void 0);
57
+ }, B = () => {
58
+ k.autoplay && (z(), F = window.setInterval(L, k.autoplaySpeed));
59
+ }, V = () => {
60
+ P.value && window.open(P.value.img);
61
+ }, H = () => {
62
+ k.enableImageClick && V();
63
+ }, U = (e) => {
64
+ E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
65
+ }, W = (e) => {
66
+ if (!O) {
67
+ let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
68
+ Math.abs(t) > Math.abs(n) && (t > 40 ? (I(), O = !0) : t < -40 && (L(), O = !0));
69
+ }
70
+ }, G = n(() => {
71
+ let e = k.slides.length, t = Math.max(0, N.value - Math.floor(k.paginationLimit / 2)), n = Math.min(e, t + k.paginationLimit);
72
+ return [...Array(e).keys()].slice(t, n);
73
+ });
74
+ return u(() => {
75
+ B();
76
+ }), d(() => {
77
+ z();
78
+ }), (n, u) => (f(), i("div", {
79
+ class: "spicyCarouselWrapper",
80
+ style: l({ ...A.value })
81
+ }, [
82
+ a("div", {
83
+ class: "spicyCarouselContainer",
84
+ onMouseenter: z,
85
+ onMouseleave: B,
86
+ onTouchstart: U,
87
+ onTouchmove: W
88
+ }, [o(t, {
89
+ name: "slide",
90
+ mode: "out-in"
91
+ }, {
92
+ default: _(() => [(f(), i("div", {
93
+ class: c(["spicyCarouselSlide", { pointCursor: k.enableImageClick }]),
94
+ key: N.value,
95
+ style: l({ backgroundImage: `url(${P.value?.img})` }),
96
+ onClick: H
97
+ }, [P.value?.text ? (f(), i("div", {
98
+ key: 0,
99
+ class: c(["spicyCarouselTextOverlay", { fullScreen: M.value }]),
100
+ "aria-label": P.value.text
101
+ }, [a("span", y, g(P.value.text), 1)], 10, v)) : r("", !0), h(n.$slots, "default")], 6))]),
102
+ _: 3
103
+ })], 32),
104
+ a("div", b, [j.value ? (f(), i("h2", x, g(j.value), 1)) : r("", !0)]),
105
+ s.showNavigation ? (f(), i("div", S, [a("button", {
106
+ class: "spicyCarouselPrevBtn",
107
+ onClick: I,
108
+ "aria-label": "Previous slide"
109
+ }, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
110
+ class: "spicyCarouselNextBtn",
111
+ onClick: L,
112
+ "aria-label": "Next slide"
113
+ }, [...u[1] ||= [a("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)]])])) : r("", !0),
114
+ s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(G.value, (e) => (f(), i("button", {
115
+ key: e,
116
+ onClick: (t) => R(e),
117
+ class: c(["spicyCarouselPageBtn", { active: e === N.value }])
118
+ }, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
119
+ ], 4));
120
+ }
121
+ });
122
+ //#endregion
123
+ export { E as t };
package/dist/SpicyCarousel-CkCmK2tQ.js ADDED
@@ -0,0 +1,123 @@
1
+ import { Fragment as e, Transition as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, withCtx as _ } from "vue";
2
+ //#region src/components/SpicyCarousel/SpicyCarousel.vue?vue&type=script&setup=true&lang.ts
3
+ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
4
+ key: 0,
5
+ class: "spicyCarouselNavControls"
6
+ }, C = {
7
+ key: 1,
8
+ class: "spicyCarouselPagination"
9
+ }, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
10
+ __name: "SpicyCarousel",
11
+ props: {
12
+ autoplay: {
13
+ type: Boolean,
14
+ default: !1
15
+ },
16
+ autoplaySpeed: { default: 5e3 },
17
+ showNavigation: {
18
+ type: Boolean,
19
+ default: !0
20
+ },
21
+ showPagination: {
22
+ type: Boolean,
23
+ default: !0
24
+ },
25
+ activeColor: { default: "var(--skPrimaryColor)" },
26
+ loop: {
27
+ type: Boolean,
28
+ default: !0
29
+ },
30
+ initialSlide: { default: 0 },
31
+ slides: { default: () => [] },
32
+ width: { default: "580px" },
33
+ height: { default: "360px" },
34
+ fullScreen: {
35
+ type: Boolean,
36
+ default: !1
37
+ },
38
+ enableImageClick: {
39
+ type: Boolean,
40
+ default: !1
41
+ },
42
+ paginationLimit: { default: 10 }
43
+ },
44
+ setup(s) {
45
+ let E = 0, D = 0, O = !1, k = s, A = n(() => ({
46
+ "--width": k.width,
47
+ "--height": k.height,
48
+ "--activeColor": k.activeColor
49
+ })), j = n(() => k.slides[N.value]?.title), M = n(() => P.value?.fullScreen === !1 ? !1 : k.fullScreen), N = p(k.initialSlide), P = n(() => k.slides[N.value]), F, I = () => {
50
+ k.slides.length !== 0 && (k.loop ? N.value = (N.value - 1 + k.slides.length) % k.slides.length : N.value = Math.max(0, N.value - 1));
51
+ }, L = () => {
52
+ k.slides.length !== 0 && (k.loop ? N.value = (N.value + 1) % k.slides.length : N.value = Math.min(k.slides.length - 1, N.value + 1));
53
+ }, R = (e) => {
54
+ N.value = e;
55
+ }, z = () => {
56
+ F &&= (clearInterval(F), void 0);
57
+ }, B = () => {
58
+ k.autoplay && (z(), F = window.setInterval(L, k.autoplaySpeed));
59
+ }, V = () => {
60
+ P.value && window.open(P.value.img);
61
+ }, H = () => {
62
+ k.enableImageClick && V();
63
+ }, U = (e) => {
64
+ E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
65
+ }, W = (e) => {
66
+ if (!O) {
67
+ let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
68
+ Math.abs(t) > Math.abs(n) && (t > 40 ? (I(), O = !0) : t < -40 && (L(), O = !0));
69
+ }
70
+ }, G = n(() => {
71
+ let e = k.slides.length, t = Math.max(0, N.value - Math.floor(k.paginationLimit / 2)), n = Math.min(e, t + k.paginationLimit);
72
+ return [...Array(e).keys()].slice(t, n);
73
+ });
74
+ return u(() => {
75
+ B();
76
+ }), d(() => {
77
+ z();
78
+ }), (n, u) => (f(), i("div", {
79
+ class: "spicyCarouselWrapper",
80
+ style: l({ ...A.value })
81
+ }, [
82
+ a("div", {
83
+ class: "spicyCarouselContainer",
84
+ onMouseenter: z,
85
+ onMouseleave: B,
86
+ onTouchstart: U,
87
+ onTouchmove: W
88
+ }, [o(t, {
89
+ name: "slide",
90
+ mode: "out-in"
91
+ }, {
92
+ default: _(() => [(f(), i("div", {
93
+ class: c(["spicyCarouselSlide", { pointCursor: k.enableImageClick }]),
94
+ key: N.value,
95
+ style: l({ backgroundImage: `url(${P.value?.img})` }),
96
+ onClick: H
97
+ }, [P.value?.text ? (f(), i("div", {
98
+ key: 0,
99
+ class: c(["spicyCarouselTextOverlay", { fullScreen: M.value }]),
100
+ "aria-label": P.value.text
101
+ }, [a("span", y, g(P.value.text), 1)], 10, v)) : r("", !0), h(n.$slots, "default")], 6))]),
102
+ _: 3
103
+ })], 32),
104
+ a("div", b, [j.value ? (f(), i("h2", x, g(j.value), 1)) : r("", !0)]),
105
+ s.showNavigation ? (f(), i("div", S, [a("button", {
106
+ class: "spicyCarouselPrevBtn",
107
+ onClick: I,
108
+ "aria-label": "Previous slide"
109
+ }, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
110
+ class: "spicyCarouselNextBtn",
111
+ onClick: L,
112
+ "aria-label": "Next slide"
113
+ }, [...u[1] ||= [a("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)]])])) : r("", !0),
114
+ s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(G.value, (e) => (f(), i("button", {
115
+ key: e,
116
+ onClick: (t) => R(e),
117
+ class: c(["spicyCarouselPageBtn", { active: e === N.value }])
118
+ }, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
119
+ ], 4));
120
+ }
121
+ });
122
+ //#endregion
123
+ export { E as t };