spicykatsu 0.5.0 → 0.9.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 (111) hide show
  1. package/README.md +50 -10
  2. package/dist/SpicyAccordion-CjUXROnD.js +70 -0
  3. package/dist/SpicyAccordion.js +1 -1
  4. package/dist/SpicyAlert-BwS5wCXQ.js +102 -0
  5. package/dist/SpicyAlert.js +1 -1
  6. package/dist/SpicyBadge-I298Cm9U.js +55 -0
  7. package/dist/SpicyBadge.js +2 -0
  8. package/dist/{SpicyBtn-B5nk3vCZ.js → SpicyBtn-ldAR1VsK.js} +2 -3
  9. package/dist/SpicyBtn.js +1 -1
  10. package/dist/{SpicyCarousel-Be5oYKnj.js → SpicyCarousel-BpRYOVoa.js} +38 -36
  11. package/dist/SpicyCarousel.js +1 -1
  12. package/dist/{SpicyDataTable-BqoW4IZ4.js → SpicyDataTable-Bj352mv3.js} +31 -28
  13. package/dist/SpicyDataTable.js +1 -1
  14. package/dist/SpicyDialog-P2nz6r0B.js +47 -0
  15. package/dist/SpicyDialog.js +1 -1
  16. package/dist/SpicyDropdown-HF7sHzZS.js +68 -0
  17. package/dist/SpicyDropdown.js +1 -1
  18. package/dist/SpicyFileInput-bGUwF-Rj.js +143 -0
  19. package/dist/SpicyFileInput.js +1 -1
  20. package/dist/{SpicyModal-Dx4dKN4V.js → SpicyModal-DYN8yDMt.js} +30 -30
  21. package/dist/SpicyModal.js +1 -1
  22. package/dist/{SpicyProgress-CjD0SCA7.js → SpicyProgress-62dbvFg1.js} +1 -1
  23. package/dist/SpicyProgress.js +1 -1
  24. package/dist/SpicySelect-D0bg0r5p.js +158 -0
  25. package/dist/SpicySelect.js +2 -0
  26. package/dist/SpicySheet-DL4CsINT.js +47 -0
  27. package/dist/SpicySheet.js +1 -1
  28. package/dist/SpicySkeleton-3pNqXUU-.js +36 -0
  29. package/dist/SpicySkeleton.js +2 -0
  30. package/dist/SpicySlider-DfkXTMmc.js +63 -0
  31. package/dist/SpicySlider.js +1 -1
  32. package/dist/SpicyTabs-eGAZI2BB.js +70 -0
  33. package/dist/SpicyTabs.js +1 -1
  34. package/dist/{SpicyTextArea-BqgEgEyx.js → SpicyTextArea-BL78Bqs3.js} +27 -4
  35. package/dist/SpicyTextArea.js +1 -1
  36. package/dist/{SpicyTextField-BMX1T6xl.js → SpicyTextField-4W0cSxVp.js} +46 -31
  37. package/dist/SpicyTextField.js +1 -1
  38. package/dist/SpicyToast-DH31y-Hx.js +74 -0
  39. package/dist/SpicyToast.js +2 -0
  40. package/dist/{SpicyToggle-DJTopuIB.js → SpicyToggle-DdJKYSzD.js} +17 -17
  41. package/dist/SpicyToggle.js +1 -1
  42. package/dist/SpicyTooltip-K6dAoHrQ.js +97 -0
  43. package/dist/SpicyTooltip.js +1 -1
  44. package/dist/index.js +57 -49
  45. package/dist/spicyDrag-BM9QhUAJ.js +67 -0
  46. package/dist/spicyDrag.js +1 -1
  47. package/dist/spicyRipple-BCGepSKc.js +49 -0
  48. package/dist/spicyRipple.js +1 -1
  49. package/dist/spicykatsu.css +1 -1
  50. package/dist/spicykatsu.umd.js +1 -1
  51. package/dist/styles/SpicyAccordion.css +1 -1
  52. package/dist/styles/SpicyAlert.css +1 -1
  53. package/dist/styles/SpicyBadge.css +1 -0
  54. package/dist/styles/SpicyBtn.css +1 -1
  55. package/dist/styles/SpicyCarousel.css +1 -1
  56. package/dist/styles/SpicyDropdown.css +1 -1
  57. package/dist/styles/SpicyFileInput.css +1 -1
  58. package/dist/styles/SpicySelect.css +1 -0
  59. package/dist/styles/SpicySheet.css +1 -1
  60. package/dist/styles/SpicySkeleton.css +1 -0
  61. package/dist/styles/SpicyTabs.css +1 -1
  62. package/dist/styles/SpicyTextArea.css +1 -1
  63. package/dist/styles/SpicyTextField.css +1 -1
  64. package/dist/styles/SpicyToast.css +1 -0
  65. package/dist/styles/SpicyTooltip.css +1 -1
  66. package/dist/styles/base.css +28 -0
  67. package/dist/styles/main.css +2 -45
  68. package/dist/styles/variables.css +16 -0
  69. package/dist/types/components/SpicyAccordion/SpicyAccordion.vue.d.ts +3 -0
  70. package/dist/types/components/SpicyAlert/SpicyAlert.vue.d.ts +5 -1
  71. package/dist/types/components/SpicyBadge/SpicyBadge.vue.d.ts +34 -0
  72. package/dist/types/components/SpicyBtn/SpicyBtn.vue.d.ts +3 -3
  73. package/dist/types/components/SpicyDialog/SpicyDialog.vue.d.ts +11 -27
  74. package/dist/types/components/SpicyDivider/SpicyDivider.vue.d.ts +1 -1
  75. package/dist/types/components/SpicyDropdown/SpicyDropdown.vue.d.ts +2 -0
  76. package/dist/types/components/SpicyFileInput/SpicyFileInput.vue.d.ts +12 -8
  77. package/dist/types/components/SpicyModal/SpicyModal.vue.d.ts +9 -5
  78. package/dist/types/components/SpicyProgress/SpicyProgress.vue.d.ts +1 -1
  79. package/dist/types/components/SpicySelect/SpicySelect.vue.d.ts +33 -0
  80. package/dist/types/components/SpicySheet/SpicySheet.vue.d.ts +16 -2
  81. package/dist/types/components/SpicySkeleton/SpicySkeleton.vue.d.ts +18 -0
  82. package/dist/types/components/SpicySlider/SpicySlider.vue.d.ts +1 -1
  83. package/dist/types/components/SpicyTabs/SpicyTabs.vue.d.ts +4 -4
  84. package/dist/types/components/SpicyTextArea/SpicyTextArea.vue.d.ts +15 -3
  85. package/dist/types/components/SpicyTextField/SpicyTextField.vue.d.ts +17 -9
  86. package/dist/types/components/SpicyToast/SpicyToast.vue.d.ts +8 -0
  87. package/dist/types/components/SpicyToast/useToast.d.ts +28 -0
  88. package/dist/types/components/SpicyToggle/SpicyToggle.vue.d.ts +1 -1
  89. package/dist/types/components/SpicyTooltip/SpicyTooltip.vue.d.ts +13 -1
  90. package/dist/types/components/SpicyTree/SpicyTree.vue.d.ts +2 -0
  91. package/dist/types/components/SpicyTree/SpicyTreeNode.vue.d.ts +8 -7
  92. package/dist/types/directives/spicyDrag.d.ts +7 -0
  93. package/dist/types/directives/spicyRipple.d.ts +6 -1
  94. package/dist/types/entries/SpicyBadge.d.ts +2 -0
  95. package/dist/types/entries/SpicySelect.d.ts +2 -0
  96. package/dist/types/entries/SpicySkeleton.d.ts +2 -0
  97. package/dist/types/entries/SpicyToast.d.ts +3 -0
  98. package/dist/types/index.d.ts +6 -2
  99. package/dist/types/umd.d.ts +0 -1
  100. package/package.json +29 -11
  101. package/dist/SpicyAccordion-Cm-RI3r_.js +0 -47
  102. package/dist/SpicyAlert-Bwi92wCd.js +0 -99
  103. package/dist/SpicyDialog-CKtIwcPz.js +0 -45
  104. package/dist/SpicyDropdown-DLqjiK7t.js +0 -63
  105. package/dist/SpicyFileInput-7dwibTqM.js +0 -126
  106. package/dist/SpicySheet-k07oHm4-.js +0 -33
  107. package/dist/SpicySlider-DPgJ_VLR.js +0 -61
  108. package/dist/SpicyTabs-8fPN5eaX.js +0 -71
  109. package/dist/SpicyTooltip-8nWZNAvJ.js +0 -75
  110. package/dist/spicyDrag-CgD0GOa9.js +0 -38
  111. package/dist/spicyRipple-DHAFwamp.js +0 -43
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,36 +28,69 @@ 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 |
54
90
  |-----------|-------------|
55
91
  | `SpicyAccordion` | Collapsible sections, single or multi-open |
56
92
  | `SpicyAlert` | Dismissible alerts with variants and auto-close |
93
+ | `SpicyBadge` | Pill/tag badges with variants, dot, and removable |
57
94
  | `SpicyBtn` | Button with MDI icon support and ripple effect |
58
95
  | `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
59
96
  | `SpicyDataTable` | Data table with sorting, filtering, and pagination |
@@ -63,11 +100,14 @@ app.use(SpicyKatsu, {
63
100
  | `SpicyFileInput` | File input with drag-and-drop and multi-file preview |
64
101
  | `SpicyModal` | Modal dialog with title, actions, and Escape-to-close |
65
102
  | `SpicyProgress` | Linear and circular progress indicators |
103
+ | `SpicySelect` | Custom select with search, multi-select, and keyboard nav |
66
104
  | `SpicySheet` | Styled container/card |
105
+ | `SpicySkeleton` | Loading placeholder with shimmer animation |
67
106
  | `SpicySlider` | Range slider input |
68
107
  | `SpicyTabs` | Tabbed interface with scrollable tab bar |
69
108
  | `SpicyTextArea` | Styled textarea |
70
109
  | `SpicyTextField` | Text input with floating label, prefix, and validation |
110
+ | `SpicyToast` | Toast notification system with auto-dismiss and positions |
71
111
  | `SpicyToggle` | Toggle switch |
72
112
  | `SpicyTooltip` | Hover tooltip with position control |
73
113
  | `SpicyTree` | Recursive tree view |
@@ -76,8 +116,8 @@ app.use(SpicyKatsu, {
76
116
 
77
117
  | Directive | Description |
78
118
  |-----------|-------------|
79
- | `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' | 'y' }` |
80
- | `v-spicyRipple` | Adds a Material-style ripple on click/touch |
119
+ | `v-spicyDrag` | Makes any element draggable (mouse + touch). Options: `axis`, `handle`, `disabled`, `bounds`, `grid`, `onDragStart`, `onDrag`, `onDragEnd` |
120
+ | `v-spicyRipple` | Adds a Material-style ripple on click/touch. Options: `color`, `center`. Use `data-no-ripple` to disable |
81
121
 
82
122
  ## Dev / Playground
83
123
 
@@ -88,4 +128,4 @@ bun install
88
128
  bun run dev
89
129
  ```
90
130
 
91
- The playground (`src/playground/Playground.vue`) has a live example of every component and directive.
131
+ The playground (`playground/Playground.vue`) has a live example of every component and directive.
package/dist/SpicyAccordion-CjUXROnD.js ADDED
@@ -0,0 +1,70 @@
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 = [
4
+ "onClick",
5
+ "aria-expanded",
6
+ "aria-controls",
7
+ "disabled"
8
+ ], h = {
9
+ key: 0,
10
+ class: "accordionIcon",
11
+ viewBox: "0 0 24 24",
12
+ xmlns: "http://www.w3.org/2000/svg"
13
+ }, g = ["d"], _ = ["id"], v = /* @__PURE__ */ o({
14
+ __name: "SpicyAccordion",
15
+ props: {
16
+ sections: {},
17
+ singleOpen: {
18
+ type: Boolean,
19
+ default: !1
20
+ },
21
+ defaultOpen: {},
22
+ disabled: {
23
+ type: Boolean,
24
+ default: !1
25
+ }
26
+ },
27
+ setup(o) {
28
+ let v = o, y = l(v.defaultOpen || []), b = (e) => {
29
+ if (!(v.disabled || v.sections[e]?.disabled)) if (v.singleOpen) y.value = y.value.includes(e) ? [] : [e];
30
+ else {
31
+ let t = y.value.indexOf(e);
32
+ t === -1 ? y.value.push(e) : y.value.splice(t, 1);
33
+ }
34
+ }, x = (e) => y.value.includes(e);
35
+ return (l, v) => (c(), r("div", { class: s(["spicyAccordion", { disabled: o.disabled }]) }, [(c(!0), r(e, null, u(o.sections, (e, u) => (c(), r("div", {
36
+ key: u,
37
+ class: "spicyAccordionItem"
38
+ }, [i("button", {
39
+ type: "button",
40
+ class: s(["spicyAccordionHeader", { open: x(u) }]),
41
+ onClick: (e) => b(u),
42
+ "aria-expanded": x(u),
43
+ "aria-controls": `accordion-panel-${u}`,
44
+ disabled: o.disabled || e.disabled
45
+ }, [
46
+ i("span", null, f(e.title), 1),
47
+ e.icon ? (c(), r("svg", h, [i("path", {
48
+ fill: "currentColor",
49
+ d: e.icon
50
+ }, null, 8, g)])) : n("", !0),
51
+ v[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
52
+ class: "accordionArrow",
53
+ viewBox: "0 0 24 24"
54
+ }, [i("path", {
55
+ fill: "currentColor",
56
+ d: "M7 10l5 5 5-5H7z"
57
+ })])], -1)
58
+ ], 10, m), a(t, { name: "accordion-slide" }, {
59
+ default: p(() => [x(u) ? (c(), r("div", {
60
+ key: 0,
61
+ id: `accordion-panel-${u}`,
62
+ class: "spicyAccordionContent",
63
+ role: "region"
64
+ }, [d(l.$slots, `section-${u}`)], 8, _)) : n("", !0)]),
65
+ _: 2
66
+ }, 1024)]))), 128))], 2));
67
+ }
68
+ });
69
+ //#endregion
70
+ export { v 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-CjUXROnD.js";
2
2
  export { e as SpicyAccordion, e as default };
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/SpicyBadge-I298Cm9U.js ADDED
@@ -0,0 +1,55 @@
1
+ import { computed as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, renderSlot as s } from "vue";
2
+ //#endregion
3
+ //#region src/components/SpicyBadge/SpicyBadge.vue
4
+ var c = /* @__PURE__ */ r({
5
+ __name: "SpicyBadge",
6
+ props: {
7
+ variant: { default: "soft" },
8
+ color: { default: "" },
9
+ textColor: { default: "" },
10
+ size: { default: "md" },
11
+ dot: {
12
+ type: Boolean,
13
+ default: !1
14
+ },
15
+ dotColor: { default: "" },
16
+ removable: {
17
+ type: Boolean,
18
+ default: !1
19
+ }
20
+ },
21
+ emits: ["remove"],
22
+ setup(r) {
23
+ let c = r, l = e(() => c.dot), u = e(() => {
24
+ let e = {};
25
+ return c.color && (c.variant === "solid" ? e.backgroundColor = c.color : c.variant === "outlined" ? (e.borderColor = c.color, e.color = c.color) : (e.backgroundColor = `color-mix(in srgb, ${c.color} 15%, transparent)`, e.color = c.color)), c.textColor && (e.color = c.textColor), e;
26
+ });
27
+ return (e, c) => (o(), n("span", {
28
+ class: i(["spicyBadge", [
29
+ r.variant,
30
+ r.size,
31
+ {
32
+ dot: l.value,
33
+ removable: r.removable
34
+ }
35
+ ]]),
36
+ style: a(u.value)
37
+ }, [
38
+ l.value ? (o(), n("span", {
39
+ key: 0,
40
+ class: "spicyBadgeDot",
41
+ style: a({ backgroundColor: r.dotColor })
42
+ }, null, 4)) : t("", !0),
43
+ s(e.$slots, "default"),
44
+ r.removable ? (o(), n("button", {
45
+ key: 1,
46
+ class: "spicyBadgeRemove",
47
+ onClick: c[0] ||= (t) => e.$emit("remove"),
48
+ "aria-label": "Remove badge",
49
+ type: "button"
50
+ }, " ✕ ")) : t("", !0)
51
+ ], 6));
52
+ }
53
+ });
54
+ //#endregion
55
+ export { c as t };
package/dist/SpicyBadge.js ADDED
@@ -0,0 +1,2 @@
1
+ import { t as e } from "./SpicyBadge-I298Cm9U.js";
2
+ export { e as SpicyBadge, e as default };
package/dist/{SpicyBtn-B5nk3vCZ.js → SpicyBtn-ldAR1VsK.js} RENAMED
@@ -27,7 +27,7 @@ var f = [
27
27
  text: {},
28
28
  icon: {},
29
29
  mdi: {},
30
- size: { default: "default" },
30
+ size: { default: "md" },
31
31
  bgColor: {},
32
32
  textColor: { default: "#ddd" },
33
33
  hoverColor: {},
@@ -52,7 +52,7 @@ var f = [
52
52
  outlined: b.variant === "outlined",
53
53
  disabled: b.disabled,
54
54
  isRound: C.value,
55
- [b.size]: b.size !== "default"
55
+ [b.size]: b.size !== "md"
56
56
  }));
57
57
  return (e, _) => {
58
58
  let v = l("spicyRipple");
@@ -61,7 +61,6 @@ var f = [
61
61
  style: o(S.value),
62
62
  disabled: i.disabled,
63
63
  onClick: y,
64
- role: "button",
65
64
  "aria-label": x.value,
66
65
  "aria-disabled": i.disabled,
67
66
  tabindex: i.disabled ? -1 : 0
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-ldAR1VsK.js";
2
2
  export { e as SpicyBtn, e as default };
package/dist/{SpicyCarousel-Be5oYKnj.js → SpicyCarousel-BpRYOVoa.js} RENAMED
@@ -42,77 +42,79 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
42
42
  paginationLimit: { default: 10 }
43
43
  },
44
44
  setup(s) {
45
- let E, D, O = !1, k = s, A = n(() => ({
45
+ let E = 0, D = 0, O = !1, k = s, A = n(() => ({
46
46
  "--width": k.width,
47
47
  "--height": k.height,
48
48
  "--activeColor": k.activeColor
49
- })), j = n(() => k.paginationLimit), M = n(() => k.slides[P.value]?.title), N = n(() => F.value.fullScreen === !1 ? !1 : k.fullScreen), P = p(k.initialSlide), F = n(() => k.slides[P.value]), I, L = () => {
50
- P.value = (P.value - 1 + k.slides.length) % k.slides.length;
51
- }, R = () => {
52
- P.value = (P.value + 1) % k.slides.length;
53
- }, z = (e) => {
54
- P.value = e;
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);
55
57
  }, B = () => {
56
- I && clearInterval(I);
58
+ k.autoplay && (z(), F = window.setInterval(L, k.autoplaySpeed));
57
59
  }, V = () => {
58
- k.autoplay && (I = window.setInterval(R, k.autoplaySpeed));
60
+ P.value && window.open(P.value.img);
59
61
  }, H = () => {
60
- window.open(F.value.img);
61
- }, U = () => {
62
- k.enableImageClick && H();
63
- }, W = (e) => {
62
+ k.enableImageClick && V();
63
+ }, U = (e) => {
64
64
  E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
65
- }, G = (e) => {
65
+ }, W = (e) => {
66
66
  if (!O) {
67
67
  let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
68
- Math.abs(t) > Math.abs(n) && (t > 40 ? (L(), O = !0) : t < -40 && (R(), O = !0));
68
+ Math.abs(t) > Math.abs(n) && (t > 40 ? (I(), O = !0) : t < -40 && (L(), O = !0));
69
69
  }
70
- }, K = n(() => {
71
- let e = k.slides.length, t = Math.max(0, P.value - Math.floor(j.value / 2)), n = Math.min(e, t + j.value);
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
72
  return [...Array(e).keys()].slice(t, n);
73
73
  });
74
74
  return u(() => {
75
- V();
76
- }), d(() => {
77
75
  B();
76
+ }), d(() => {
77
+ z();
78
78
  }), (n, u) => (f(), i("div", {
79
79
  class: "spicyCarouselWrapper",
80
80
  style: l({ ...A.value })
81
81
  }, [
82
82
  a("div", {
83
83
  class: "spicyCarouselContainer",
84
- onMouseenter: B,
85
- onMouseleave: V,
86
- onTouchstart: W,
87
- onTouchmove: G
84
+ onMouseenter: z,
85
+ onMouseleave: B,
86
+ onTouchstart: U,
87
+ onTouchmove: W
88
88
  }, [o(t, {
89
89
  name: "slide",
90
90
  mode: "out-in"
91
91
  }, {
92
92
  default: _(() => [(f(), i("div", {
93
93
  class: c(["spicyCarouselSlide", { pointCursor: k.enableImageClick }]),
94
- key: P.value,
95
- style: l({ backgroundImage: `url(${F.value.img})` }),
96
- onClick: U
97
- }, [s.slides[P.value].text ? (f(), i("div", {
94
+ key: N.value,
95
+ style: l({ backgroundImage: `url(${P.value?.img})` }),
96
+ onClick: H
97
+ }, [P.value?.text ? (f(), i("div", {
98
98
  key: 0,
99
- class: c(["spicyCarouselTextOverlay", { fullScreen: N.value }]),
100
- "aria-label": s.slides[P.value].text
101
- }, [a("span", y, g(s.slides[P.value].text), 1)], 10, v)) : r("", !0), h(n.$slots, "default")], 6))]),
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
102
  _: 3
103
103
  })], 32),
104
- a("div", b, [M.value ? (f(), i("h2", x, g(F.value.title), 1)) : r("", !0)]),
104
+ a("div", b, [j.value ? (f(), i("h2", x, g(j.value), 1)) : r("", !0)]),
105
105
  s.showNavigation ? (f(), i("div", S, [a("button", {
106
106
  class: "spicyCarouselPrevBtn",
107
- onClick: L
107
+ onClick: I,
108
+ "aria-label": "Previous slide"
108
109
  }, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
109
110
  class: "spicyCarouselNextBtn",
110
- onClick: R
111
+ onClick: L,
112
+ "aria-label": "Next slide"
111
113
  }, [...u[1] ||= [a("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)]])])) : r("", !0),
112
- s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(K.value, (e) => (f(), i("button", {
114
+ s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(G.value, (e) => (f(), i("button", {
113
115
  key: e,
114
- onClick: (t) => z(e),
115
- class: c(["spicyCarouselPageBtn", { active: e === P.value }])
116
+ onClick: (t) => R(e),
117
+ class: c(["spicyCarouselPageBtn", { active: e === N.value }])
116
118
  }, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
117
119
  ], 4));
118
120
  }
package/dist/SpicyCarousel.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./SpicyCarousel-Be5oYKnj.js";
1
+ import { t as e } from "./SpicyCarousel-BpRYOVoa.js";
2
2
  export { e as SpicyCarousel, e as default };
package/dist/{SpicyDataTable-BqoW4IZ4.js → SpicyDataTable-Bj352mv3.js} RENAMED
@@ -1,8 +1,8 @@
1
- import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
2
- import { t } from "./SpicyProgress-CjD0SCA7.js";
1
+ import { t as e } from "./SpicyBtn-ldAR1VsK.js";
2
+ import { t } from "./SpicyProgress-62dbvFg1.js";
3
3
  import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, watch as _ } from "vue";
4
4
  //#region src/components/SpicyDataTable/SpicyDataTable.vue?vue&type=script&setup=true&lang.ts
5
- var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b = { class: "spicyDataTableTable" }, x = { class: "spicyDataTableHeader" }, S = ["onClick"], C = { class: "headerText" }, w = {
5
+ var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b = { class: "spicyDataTableTable" }, x = { class: "spicyDataTableHeader" }, S = ["aria-sort", "onClick"], C = { class: "headerText" }, w = {
6
6
  key: 0,
7
7
  class: "sortIcon"
8
8
  }, T = { class: "spicyDataTableBody" }, E = ["onClick"], D = {
@@ -40,36 +40,38 @@ var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b
40
40
  "click:row"
41
41
  ],
42
42
  setup(l, { emit: P }) {
43
- let F = P, I = l, L = p(""), R = p(!1), z = p(I.page), B = [
43
+ let F = P, I = l, L = p(""), R = p(!1), z = p(I.page), B = p(I.itemsPerPage), V = [
44
44
  5,
45
45
  10,
46
46
  25,
47
47
  50,
48
48
  100
49
- ], V = r(() => {
49
+ ], H = r(() => {
50
50
  if (!L.value || !I.sortable) return I.items;
51
51
  let e = [...I.items].sort((e, t) => {
52
52
  let n = e[L.value], r = t[L.value];
53
53
  return n === r ? 0 : n == null ? 1 : r == null ? -1 : typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
54
54
  });
55
55
  return R.value ? e.reverse() : e;
56
- }), H = r(() => I.serverItemsLength || V.value.length), U = r(() => Math.ceil(H.value / I.itemsPerPage)), W = r(() => {
57
- let e = (z.value - 1) * I.itemsPerPage, t = e + I.itemsPerPage;
58
- return V.value.slice(e, t);
59
- }), G = r(() => `${(z.value - 1) * I.itemsPerPage + 1}-${Math.min(z.value * I.itemsPerPage, H.value)} of ${H.value}`), K = (e) => {
56
+ }), U = r(() => I.serverItemsLength || H.value.length), W = r(() => Math.ceil(U.value / B.value)), G = r(() => {
57
+ let e = (z.value - 1) * B.value, t = e + B.value;
58
+ return H.value.slice(e, t);
59
+ }), K = r(() => `${(z.value - 1) * B.value + 1}-${Math.min(z.value * B.value, U.value)} of ${U.value}`), q = (e) => {
60
60
  e.sortable === !1 || !I.sortable || (L.value === e.value ? R.value = !R.value : (L.value = e.value, R.value = !1));
61
- }, q = (e, t) => {
61
+ }, J = (e, t) => {
62
62
  F("click:row", e, t);
63
- }, J = () => {
64
- z.value > 1 && (z.value--, F("update:page", z.value));
65
63
  }, Y = () => {
66
- z.value < U.value && (z.value++, F("update:page", z.value));
67
- }, X = (e) => {
68
- let t = e.target;
69
- F("update:itemsPerPage", Number(t.value)), z.value = 1, F("update:page", 1);
64
+ z.value > 1 && (z.value--, F("update:page", z.value));
65
+ }, X = () => {
66
+ z.value < W.value && (z.value++, F("update:page", z.value));
67
+ }, Z = (e) => {
68
+ let t = e.target, n = Number(t.value);
69
+ B.value = n, F("update:itemsPerPage", n), z.value = 1, F("update:page", 1);
70
70
  };
71
71
  return _(() => I.page, (e) => {
72
72
  z.value = e;
73
+ }), _(() => I.itemsPerPage, (e) => {
74
+ B.value = e, z.value > W.value && (z.value = Math.max(1, W.value));
73
75
  }), (r, p) => (f(), a("div", v, [
74
76
  o("div", y, [o("table", b, [o("thead", x, [o("tr", null, [(f(!0), a(n, null, m(l.headers, (e) => (f(), a("th", {
75
77
  key: e.value,
@@ -79,12 +81,13 @@ var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b
79
81
  e.align || "left",
80
82
  { sortable: e.sortable !== !1 && l.sortable }
81
83
  ]),
82
- onClick: (t) => K(e)
83
- }, [o("span", C, g(e.text), 1), e.sortable !== !1 && l.sortable && L.value === e.value ? (f(), a("span", w, g(R.value ? "▼" : "▲"), 1)) : i("", !0)], 10, S))), 128))])]), o("tbody", T, [(f(!0), a(n, null, m(W.value, (e, t) => (f(), a("tr", {
84
+ "aria-sort": e.sortable !== !1 && l.sortable && L.value === e.value ? R.value ? "descending" : "ascending" : "none",
85
+ onClick: (t) => q(e)
86
+ }, [o("span", C, g(e.text), 1), e.sortable !== !1 && l.sortable && L.value === e.value ? (f(), a("span", w, g(R.value ? "▼" : "▲"), 1)) : i("", !0)], 10, S))), 128))])]), o("tbody", T, [(f(!0), a(n, null, m(G.value, (e, t) => (f(), a("tr", {
84
87
  key: e[l.itemKey],
85
88
  class: u(["spicyDataTableRow", { clickable: r.$attrs["onClick:row"] }]),
86
89
  style: d({ height: l.fixedRowHeight }),
87
- onClick: (t) => q(e, t)
90
+ onClick: (t) => J(e, t)
88
91
  }, [(f(!0), a(n, null, m(l.headers, (n) => (f(), a("td", {
89
92
  key: n.value,
90
93
  class: u(["spicyDataTableCell", n.align || "left"])
@@ -98,23 +101,23 @@ var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b
98
101
  size: 60
99
102
  })])])) : i("", !0),
100
103
  l.showPagination ? (f(), a("div", O, [
101
- o("div", k, [o("span", null, g(G.value), 1)]),
104
+ o("div", k, [o("span", null, g(K.value), 1)]),
102
105
  o("div", A, [c(e, {
103
106
  disabled: z.value === 1,
104
- onClick: J,
107
+ onClick: Y,
105
108
  text: "Previous",
106
- size: "small"
109
+ size: "sm"
107
110
  }, null, 8, ["disabled"]), c(e, {
108
- disabled: z.value === U.value,
109
- onClick: Y,
111
+ disabled: z.value === W.value,
112
+ onClick: X,
110
113
  text: "Next",
111
- size: "small"
114
+ size: "sm"
112
115
  }, null, 8, ["disabled"])]),
113
116
  o("div", j, [o("select", {
114
- value: l.itemsPerPage,
115
- onChange: X,
117
+ value: B.value,
118
+ onChange: Z,
116
119
  class: "itemsPerPageSelect"
117
- }, [(f(), a(n, null, m(B, (e) => o("option", {
120
+ }, [(f(), a(n, null, m(V, (e) => o("option", {
118
121
  key: e,
119
122
  value: e
120
123
  }, g(e) + " / page ", 9, N)), 64))], 40, M)])
package/dist/SpicyDataTable.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./SpicyDataTable-BqoW4IZ4.js";
1
+ import { t as e } from "./SpicyDataTable-Bj352mv3.js";
2
2
  export { e as SpicyDataTable, e as default };