spicykatsu 0.3.0 → 0.4.1

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 (27) hide show
  1. package/README.md +13 -5
  2. package/dist/lib/SpicyAccordion/SpicyAccordion.js +11 -11
  3. package/dist/lib/SpicyAlert/SpicyAlert.js +17 -17
  4. package/dist/lib/SpicyBtn/SpicyBtn.js +14 -14
  5. package/dist/lib/SpicyCarousel/SpicyCarousel.js +13 -13
  6. package/dist/lib/SpicyDataTable/SpicyDataTable.css +1 -0
  7. package/dist/lib/SpicyDataTable/SpicyDataTable.js +196 -0
  8. package/dist/lib/SpicyDialog/SpicyDialog.js +3 -4
  9. package/dist/lib/SpicyDivider/SpicyDivider.js +1 -1
  10. package/dist/lib/SpicyDropdown/SpicyDropdown.js +11 -11
  11. package/dist/lib/SpicyFileInput/SpicyFileInput.js +16 -16
  12. package/dist/lib/SpicyModal/SpicyModal.js +10 -10
  13. package/dist/lib/SpicyProgress/SpicyProgress.js +3 -75
  14. package/dist/lib/SpicySheet/SpicySheet.js +3 -4
  15. package/dist/lib/SpicySlider/SpicySlider.js +12 -12
  16. package/dist/lib/SpicyTabs/SpicyTabs.js +10 -10
  17. package/dist/lib/SpicyTextArea/SpicyTextArea.js +7 -7
  18. package/dist/lib/SpicyTextField/SpicyTextField.js +12 -12
  19. package/dist/lib/SpicyToggle/SpicyToggle.js +8 -8
  20. package/dist/lib/SpicyTooltip/SpicyTooltip.js +11 -11
  21. package/dist/lib/SpicyTree/SpicyTree.css +1 -1
  22. package/dist/lib/SpicyTree/SpicyTree.js +13 -13
  23. package/dist/spicykatsu.es.js +81 -57
  24. package/package.json +52 -52
  25. package/dist/lib/SpicyProgress/SpicyProgress.css +0 -1
  26. package/dist/lib/main/main.js +0 -4
  27. package/dist/lib/ripple/ripple.js +0 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # SpicyKatsuLib
2
2
 
3
- Fun, simple component library for Vue 3. Built as a personal playground — feel free to use it in your own projects.
3
+ Fun, simple component library for Vue 3. Built as a personal playground for my website. Feel free to use it in your own projects.
4
4
 
5
5
  📖 **[Docs](https://satoru8.gitlab.io/spicykatsuvlib/)**  |  📦 **[npm](https://www.npmjs.com/package/spicykatsu)**
6
6
 
@@ -18,25 +18,32 @@ npm install spicykatsu
18
18
  import { createApp } from 'vue'
19
19
  import App from './App.vue'
20
20
  import { SpicyKatsu } from 'spicykatsu'
21
- import 'spicykatsu/dist/style.css'
22
21
 
23
22
  const app = createApp(App)
24
23
  app.use(SpicyKatsu)
25
24
  app.mount('#app')
26
25
  ```
27
26
 
28
- You can also import components individually for tree shaking:
27
+ Styles are automatically injected when you call `app.use(SpicyKatsu)` — no CSS import needed.
28
+
29
+ You can also import components individually for JS tree-shaking:
29
30
 
30
31
  ```ts
31
32
  import { SpicyBtn, SpicyModal } from 'spicykatsu'
32
33
  ```
33
34
 
35
+ For CSS tree-shaking, set `useStyles: false` and import only what you need:
36
+
37
+ ```ts
38
+ import 'spicykatsu/dist/lib/SpicyBtn/SpicyBtn.css'
39
+ ```
40
+
34
41
  ## Options
35
42
 
36
43
  ```ts
37
44
  app.use(SpicyKatsu, {
38
45
  useComponents: true, // Register all components globally (default: true)
39
- useStyles: true, // Inject CSS variables (default: true)
46
+ useStyles: true, // Inject all component styles into <head> (default: true)
40
47
  useDirectives: true // Register v-spicyDrag and v-spicyRipple (default: true)
41
48
  })
42
49
  ```
@@ -49,6 +56,7 @@ app.use(SpicyKatsu, {
49
56
  | `SpicyAlert` | Dismissible alerts with variants and auto-close |
50
57
  | `SpicyBtn` | Button with MDI icon support and ripple effect |
51
58
  | `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
59
+ | `SpicyDataTable` | Data table with sorting, filtering, and pagination |
52
60
  | `SpicyDialog` | Teleported overlay dialog |
53
61
  | `SpicyDivider` | Horizontal or vertical divider |
54
62
  | `SpicyDropdown` | Dropdown menu with click-outside close |
@@ -68,7 +76,7 @@ app.use(SpicyKatsu, {
68
76
 
69
77
  | Directive | Description |
70
78
  |-----------|-------------|
71
- | `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' \| 'y' }` |
79
+ | `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' | 'y' }` |
72
80
  | `v-spicyRipple` | Adds a Material-style ripple on click/touch |
73
81
 
74
82
  ## Dev / Playground
package/dist/lib/SpicyAccordion/SpicyAccordion.js CHANGED
@@ -1,11 +1,11 @@
1
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, vShow as p, withCtx as m, withDirectives as h } from "vue";
2
- //#region src/components/SpicyAccordion.vue?vue&type=script&setup=true&lang.ts
3
- var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
2
+ //#region src/components/SpicyAccordion/SpicyAccordion.css?inline
3
+ var g = ".spicyAccordion{border:1px solid var(--skBorderColor,#ddd);border-radius:4px;overflow:hidden}.spicyAccordionItem{border-bottom:1px solid var(--skBorderColor,#ddd)}.spicyAccordionItem:last-child{border-bottom:none}.spicyAccordionHeader{background-color:var(--skBgSecondaryColor,#f5f5f5);color:var(--skTextColor,#333);text-align:left;cursor:pointer;border:none;justify-content:space-between;align-items:center;width:100%;padding:10px;transition:background-color .2s;display:flex}.spicyAccordionHeader.open{background-color:var(--skBgColor,#e0e0e0)}.spicyAccordionHeader.open .accordionArrow{transform:rotate(180deg)}.spicyAccordionContent{background-color:var(--skBgColor,#fff);color:var(--skTextColor,#333);padding:10px}.accordionToggle{align-items:center;transition:transform .2s;display:flex}.accordionArrow{width:20px;height:20px;transition:transform .2s}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}", _ = { class: "spicyAccordion" }, v = ["onClick", "aria-expanded"], y = {
4
4
  key: 0,
5
5
  class: "accordionIcon",
6
6
  viewBox: "0 0 24 24",
7
7
  xmlns: "http://www.w3.org/2000/svg"
8
- }, y = ["d"], b = { class: "spicyAccordionContent" }, x = /* @__PURE__ */ o({
8
+ }, b = ["d"], x = { class: "spicyAccordionContent" }, S = /* @__PURE__ */ o({
9
9
  __name: "SpicyAccordion",
10
10
  props: {
11
11
  sections: {},
@@ -16,14 +16,14 @@ var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
16
16
  defaultOpen: {}
17
17
  },
18
18
  setup(o) {
19
- let x = o, S = l(x.defaultOpen || []), C = (e) => {
20
- if (x.singleOpen) S.value = S.value.includes(e) ? [] : [e];
19
+ let g = o, S = l(g.defaultOpen || []), C = (e) => {
20
+ if (g.singleOpen) S.value = S.value.includes(e) ? [] : [e];
21
21
  else {
22
22
  let t = S.value.indexOf(e);
23
23
  t === -1 ? S.value.push(e) : S.value.splice(t, 1);
24
24
  }
25
25
  }, w = (e) => S.value.includes(e);
26
- return (l, x) => (c(), r("div", g, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
26
+ return (l, g) => (c(), r("div", _, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
27
27
  key: o,
28
28
  class: "spicyAccordionItem"
29
29
  }, [i("button", {
@@ -32,16 +32,16 @@ var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
32
32
  "aria-expanded": w(o)
33
33
  }, [
34
34
  i("span", null, f(e.title), 1),
35
- e.icon ? (c(), r("svg", v, [i("path", { d: e.icon }, null, 8, y)])) : n("", !0),
36
- x[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
35
+ e.icon ? (c(), r("svg", y, [i("path", { d: e.icon }, null, 8, b)])) : n("", !0),
36
+ g[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
37
37
  class: "accordionArrow",
38
38
  viewBox: "0 0 24 24"
39
39
  }, [i("path", { d: "M7 10l5 5 5-5H7z" })])], -1)
40
- ], 10, _), a(t, { name: "fade" }, {
41
- default: m(() => [h(i("div", b, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
40
+ ], 10, v), a(t, { name: "fade" }, {
41
+ default: m(() => [h(i("div", x, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
42
42
  _: 2
43
43
  }, 1024)]))), 128))]));
44
44
  }
45
45
  });
46
46
  //#endregion
47
- export { x as t };
47
+ export { g as n, S as t };
package/dist/lib/SpicyAlert/SpicyAlert.js CHANGED
@@ -1,24 +1,24 @@
1
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.vue?vue&type=script&setup=true&lang.ts
3
- var h = ["aria-label"], g = {
2
+ //#region src/components/SpicyAlert/SpicyAlert.css?inline
3
+ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spicyAlert.info{color:#333;background-color:#e0e0e0}.spicyAlert.success{color:#155724;background-color:#a3ffb7}.spicyAlert.warning{color:#856404;background-color:#ffecaf}.spicyAlert.error{color:#911f2a;background-color:#ffbdc2}.spicyAlert.spicyAlertRound{border-radius:8px}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{flex-direction:column;display:flex}.spicyAlertCloseBtn{cursor:pointer;background:0 0;border:none;width:20px;height:20px;margin-left:auto}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter-from,.fade-leave-to{opacity:0}", g = ["aria-label"], _ = {
4
4
  key: 0,
5
5
  class: "spicyAlertIcon"
6
- }, _ = {
6
+ }, v = {
7
7
  key: 1,
8
8
  class: "spicyAlertIcon",
9
9
  viewBox: "0 0 24 24",
10
10
  xmlns: "http://www.w3.org/2000/svg"
11
- }, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
11
+ }, y = ["d"], b = { class: "spicyAlertContainer" }, x = {
12
12
  key: 0,
13
13
  class: "spicyAlertTitle"
14
- }, x = {
14
+ }, S = {
15
15
  key: 1,
16
16
  class: "spicyAlertText"
17
- }, S = {
17
+ }, C = {
18
18
  key: 0,
19
19
  viewBox: "0 0 24 24",
20
20
  xmlns: "http://www.w3.org/2000/svg"
21
- }, C = ["d"], w = { key: 1 }, T = /* @__PURE__ */ a({
21
+ }, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
22
22
  __name: "SpicyAlert",
23
23
  props: {
24
24
  variant: { default: "info" },
@@ -42,7 +42,7 @@ var h = ["aria-label"], g = {
42
42
  }
43
43
  },
44
44
  setup(a) {
45
- let T = a, E = l(!0), D = null, O = l(T.autoClose), k = null, A = () => {
45
+ let h = a, E = l(!0), D = null, O = l(h.autoClose), k = null, A = () => {
46
46
  E.value = !1;
47
47
  }, j = () => {
48
48
  O.value > 0 && (k = Date.now(), D = setTimeout(() => {
@@ -58,7 +58,7 @@ var h = ["aria-label"], g = {
58
58
  }, P = () => {
59
59
  j();
60
60
  };
61
- return f(() => T.autoClose, (e) => {
61
+ return f(() => h.autoClose, (e) => {
62
62
  O.value = e, M(), j();
63
63
  }), s(() => {
64
64
  M();
@@ -73,27 +73,27 @@ var h = ["aria-label"], g = {
73
73
  onMouseenter: N,
74
74
  onMouseleave: P
75
75
  }, [
76
- a.iconOnly && a.icon ? (c(), r("span", g, d(a.icon), 1)) : n("", !0),
77
- a.mdi ? (c(), r("svg", _, [i("path", {
76
+ a.iconOnly && a.icon ? (c(), r("span", _, d(a.icon), 1)) : n("", !0),
77
+ a.mdi ? (c(), r("svg", v, [i("path", {
78
78
  fill: "currentColor",
79
79
  class: "spicyAlertMDI",
80
80
  d: a.mdi
81
- }, null, 8, v)])) : n("", !0),
82
- 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)]),
81
+ }, null, 8, y)])) : n("", !0),
82
+ i("div", b, [a.title ? (c(), r("span", x, d(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (c(), r("span", S, d(a.text), 1)) : n("", !0)]),
83
83
  a.closable ? (c(), r("button", {
84
84
  key: 2,
85
85
  class: "spicyAlertCloseBtn",
86
86
  onClick: A,
87
87
  "aria-label": "Close alert"
88
- }, [a.closeIcon ? (c(), r("svg", S, [i("path", {
88
+ }, [a.closeIcon ? (c(), r("svg", C, [i("path", {
89
89
  fill: "#000",
90
90
  d: a.closeIcon
91
- }, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
91
+ }, null, 8, w)])) : (c(), r("span", T, "X"))])) : n("", !0),
92
92
  a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
93
- ], 42, h)) : n("", !0)]),
93
+ ], 42, g)) : n("", !0)]),
94
94
  _: 3
95
95
  }));
96
96
  }
97
97
  });
98
98
  //#endregion
99
- export { T as t };
99
+ export { h as n, E as t };
package/dist/lib/SpicyBtn/SpicyBtn.js CHANGED
@@ -1,22 +1,22 @@
1
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.vue?vue&type=script&setup=true&lang.ts
3
- var f = [
2
+ //#region src/components/SpicyBtn/SpicyBtn.css?inline
3
+ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd);background-color:var(--skBgColor,#28292a);font-size:var(--skFontSize,16px);font-weight:var(--skFontWeight,500);-webkit-user-select:none;user-select:none;border:none;border-radius:4px;justify-content:center;align-items:center;gap:4px;padding:8px 16px;display:flex}.spicyBtn.outlined{border:2px solid var(--skBorderColor,#515353);background-color:#0000}.spicyBtn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor,grey)}.spicyBtn:focus-visible{outline:2px solid var(--skTextColor,#ddd);outline-offset:2px}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{font-size:calc(var(--skFontSize,16px) * 1.2);padding:12px 24px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:32px;height:32px}.spicyBtn.small{font-size:calc(var(--skFontSize,16px) * .85);padding:4px 12px}.spicyBtn.small.isRound{padding:8px}.spicyBtn.small .spicyBtnIcon{width:18px;height:18px}.spicyBtn .spicyBtnIcon{justify-content:center;align-items:center;width:22px;height:22px;display:flex}", p = [
4
4
  "disabled",
5
5
  "aria-label",
6
6
  "aria-disabled",
7
7
  "tabindex"
8
- ], p = {
8
+ ], m = {
9
9
  key: 0,
10
10
  class: "spicyBtnIcon",
11
11
  viewBox: "0 0 24 24",
12
12
  xmlns: "http://www.w3.org/2000/svg"
13
- }, m = ["d"], h = {
13
+ }, h = ["d"], g = {
14
14
  key: 1,
15
15
  class: "spicyBtnIcon"
16
- }, g = {
16
+ }, _ = {
17
17
  key: 2,
18
18
  class: "spicyBtnText"
19
- }, _ = /* @__PURE__ */ i({
19
+ }, v = /* @__PURE__ */ i({
20
20
  __name: "SpicyBtn",
21
21
  props: {
22
22
  variant: { default: "filled" },
@@ -37,8 +37,8 @@ var f = [
37
37
  ariaLabel: {}
38
38
  },
39
39
  emits: ["click"],
40
- setup(i, { emit: _ }) {
41
- let v = _, y = (e) => {
40
+ setup(i, { emit: f }) {
41
+ let v = f, y = (e) => {
42
42
  b.disabled || v("click", e);
43
43
  }, b = i, x = e(() => b.ariaLabel || b.text || "Button"), S = e(() => ({
44
44
  "--skFontSize": typeof b.fontSize == "number" ? `${b.fontSize}px` : b.fontSize,
@@ -54,7 +54,7 @@ var f = [
54
54
  isRound: C.value,
55
55
  [b.size]: b.size !== "default"
56
56
  }));
57
- return (e, _) => {
57
+ return (e, f) => {
58
58
  let v = l("spicyRipple");
59
59
  return d((s(), n("button", {
60
60
  class: a(w.value),
@@ -66,16 +66,16 @@ var f = [
66
66
  "aria-disabled": i.disabled,
67
67
  tabindex: i.disabled ? -1 : 0
68
68
  }, [
69
- i.mdi ? (s(), n("svg", p, [r("path", {
69
+ i.mdi ? (s(), n("svg", m, [r("path", {
70
70
  fill: "currentColor",
71
71
  class: "spicyBtnMDI",
72
72
  d: i.mdi
73
- }, null, 8, m)])) : i.icon ? (s(), n("span", h, u(i.icon), 1)) : t("", !0),
74
- i.text ? (s(), n("span", g, u(i.text), 1)) : t("", !0),
73
+ }, null, 8, h)])) : i.icon ? (s(), n("span", g, u(i.icon), 1)) : t("", !0),
74
+ i.text ? (s(), n("span", _, u(i.text), 1)) : t("", !0),
75
75
  c(e.$slots, "default")
76
- ], 14, f)), [[v]]);
76
+ ], 14, p)), [[v]]);
77
77
  };
78
78
  }
79
79
  });
80
80
  //#endregion
81
- export { _ as t };
81
+ export { f as n, v as t };
package/dist/lib/SpicyCarousel/SpicyCarousel.js CHANGED
@@ -1,12 +1,12 @@
1
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.vue?vue&type=script&setup=true&lang.ts
3
- var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
2
+ //#region src/components/SpicyCarousel/SpicyCarousel.css?inline
3
+ var v = ".spicyCarouselWrapper{width:var(--width,580px);height:var(--height,360px);justify-content:center;align-items:center;padding:30px;display:flex;position:relative}.spicyCarouselWrapper .spicyCarouselTitle{width:var(--width,580px);color:#ccc;background-color:#0009;height:30px;font-size:18px;font-weight:700;position:absolute;top:0}.spicyCarouselWrapper .spicyCarouselContainer{border-radius:var(--borderRadius);background-color:#0009;width:100%;height:100%;position:relative;overflow:hidden}.spicyCarouselWrapper .spicyCarouselSlide{background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.spicyCarouselWrapper .spicyCarouselTextOverlay{color:#ccc;text-shadow:2px 2px 4px #00000080;background-color:#000000bf;border-radius:4px;padding:10px;font-size:18px;font-weight:700;position:absolute;bottom:10px;left:10px}.spicyCarouselWrapper .spicyCarouselTextOverlay.fullScreen{text-align:center;background-color:#0000004d;justify-content:center;align-items:center;display:flex;inset:0}.spicyCarouselWrapper .spicyCarouselNavControls{pointer-events:none;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{color:#ccc;cursor:pointer;pointer-events:auto;z-index:2;background:#0009;border:none;justify-content:center;align-items:center;width:30px;height:100%;font-size:24px;transition:transform .3s;display:flex}:is(.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn):hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn{border-radius:6px 0 0 6px}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border-radius:0 6px 6px 0}.spicyCarouselWrapper .spicyCarouselPagination{height:30px;width:var(--width,580px);z-index:2;pointer-events:auto;background:#0009;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn{color:#fff;cursor:pointer;background:#00b7ff80;border:none;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;transition:transform .3s;display:flex}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn.active{background:var(--activeColor,var(--skPrimaryColor))}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .pointCursor{cursor:pointer}.spicyCarouselWrapper .slide-enter-active,.spicyCarouselWrapper .slide-leave-active{transition:opacity .3s}.spicyCarouselWrapper .slide-enter-from,.spicyCarouselWrapper .slide-leave-to{opacity:0}", y = ["aria-label"], b = { class: "spicyCarouselInfoText" }, x = { class: "spicyCarouselTitle" }, S = { key: 0 }, C = {
4
4
  key: 0,
5
5
  class: "spicyCarouselNavControls"
6
- }, C = {
6
+ }, w = {
7
7
  key: 1,
8
8
  class: "spicyCarouselPagination"
9
- }, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
9
+ }, T = ["onClick"], E = { class: "spicyCarouselPage" }, D = /* @__PURE__ */ s({
10
10
  __name: "SpicyCarousel",
11
11
  props: {
12
12
  autoplay: {
@@ -42,7 +42,7 @@ 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 v, D, O = !1, k = s, A = n(() => ({
46
46
  "--width": k.width,
47
47
  "--height": k.height,
48
48
  "--activeColor": k.activeColor
@@ -61,10 +61,10 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
61
61
  }, U = () => {
62
62
  k.enableImageClick && H();
63
63
  }, W = (e) => {
64
- E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
64
+ v = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
65
65
  }, G = (e) => {
66
66
  if (!O) {
67
- let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
67
+ let t = e.touches[0].clientX - v, n = e.touches[0].clientY - D;
68
68
  Math.abs(t) > Math.abs(n) && (t > 40 ? (L(), O = !0) : t < -40 && (R(), O = !0));
69
69
  }
70
70
  }, K = n(() => {
@@ -98,24 +98,24 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
98
98
  key: 0,
99
99
  class: c(["spicyCarouselTextOverlay", { fullScreen: N.value }]),
100
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))]),
101
+ }, [a("span", b, g(s.slides[P.value].text), 1)], 10, y)) : 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)]),
105
- s.showNavigation ? (f(), i("div", S, [a("button", {
104
+ a("div", x, [M.value ? (f(), i("h2", S, g(F.value.title), 1)) : r("", !0)]),
105
+ s.showNavigation ? (f(), i("div", C, [a("button", {
106
106
  class: "spicyCarouselPrevBtn",
107
107
  onClick: L
108
108
  }, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
109
109
  class: "spicyCarouselNextBtn",
110
110
  onClick: R
111
111
  }, [...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", {
112
+ s.showPagination ? (f(), i("div", w, [(f(!0), i(e, null, m(K.value, (e) => (f(), i("button", {
113
113
  key: e,
114
114
  onClick: (t) => z(e),
115
115
  class: c(["spicyCarouselPageBtn", { active: e === P.value }])
116
- }, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
116
+ }, [a("span", E, g(e + 1), 1)], 10, T))), 128))])) : r("", !0)
117
117
  ], 4));
118
118
  }
119
119
  });
120
120
  //#endregion
121
- export { E as t };
121
+ export { v as n, D as t };
package/dist/lib/SpicyDataTable/SpicyDataTable.css ADDED
@@ -0,0 +1 @@
1
+ .spicyProgress{background-color:#e0e0e0;border-radius:8px;width:100%;position:relative;overflow:hidden}.spicyProgressBar{transition:width .4s}.spicyProgressLabel{color:#fff;font-size:12px;position:absolute;top:0;right:10px}.spicyProgressCircular{justify-content:center;align-items:center;display:flex;position:relative}.spicyCircularSvg{background-color:#00000080;border-radius:50%;transform:rotate(-90deg)}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s}.spicyCircularLabel{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spicyDataTable{background-color:var(--skBgColor);width:100%;color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize);flex-direction:column;display:flex;position:relative}.spicyDataTableContainer{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);overflow-x:auto}.spicyDataTableTable{border-collapse:collapse;table-layout:fixed;width:100%}.spicyDataTableHeader{background-color:var(--skBgSecondaryColor);z-index:10;position:sticky;top:0}.spicyDataTableHeaderCell{border-bottom:2px solid var(--skBorderColor);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;font-weight:600;overflow:hidden}.spicyDataTableHeaderCell.sortable{cursor:pointer;transition:background-color .2s}.spicyDataTableHeaderCell.sortable:hover{background-color:var(--skHoverColor)}.headerText{margin-right:4px;display:inline-block}.sortIcon{opacity:.7;font-size:12px;display:inline-block}.spicyDataTableBody{background-color:var(--skBgColor)}.spicyDataTableRow{border-bottom:1px solid var(--skBorderColor);transition:background-color .2s}.spicyDataTableRow.clickable{cursor:pointer}.spicyDataTableRow:hover{background-color:var(--skHoverColor)}.spicyDataTableRow:nth-child(2n){background-color:rgba(var(--skBgSecondaryColor), .3)}.spicyDataTableRow:nth-child(2n):hover{background-color:var(--skHoverColor)}.spicyDataTableCell{white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;overflow:hidden}.spicyDataTableCell.left{text-align:left}.spicyDataTableCell.center{text-align:center}.spicyDataTableCell.right{text-align:right}.spicyDataTableLoading{background-color:rgba(var(--skBgColor), .8);z-index:20;border-radius:var(--skBorderRadius);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spicyDataTablePagination{border:1px solid var(--skBorderColor);border-radius:0 0 var(--skBorderRadius) var(--skBorderRadius);background-color:var(--skBgSecondaryColor);border-top:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.paginationInfo{color:var(--skTextColor);font-size:14px}.paginationControls{gap:8px;display:flex}.paginationPerPage{align-items:center;display:flex}.itemsPerPageSelect{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);background-color:var(--skBgColor);color:var(--skTextColor);font-family:var(--skFontFamily);cursor:pointer;outline:none;padding:6px 12px;font-size:14px}.itemsPerPageSelect:hover{border-color:var(--skPrimaryColor)}.itemsPerPageSelect:focus{border-color:var(--skPrimaryColor);outline:2px solid var(--skPrimaryColor);outline-offset:2px}@media (width<=768px){.spicyDataTablePagination{flex-direction:column;align-items:stretch}.paginationInfo{text-align:center}.paginationControls,.paginationPerPage{justify-content:center}.itemsPerPageSelect{width:100%}.spicyDataTableHeaderCell,.spicyDataTableCell{padding:8px 12px;font-size:14px}}@media (width<=480px){.spicyDataTableHeaderCell,.spicyDataTableCell{padding:6px 8px;font-size:12px}.paginationInfo{font-size:12px}}
package/dist/lib/SpicyDataTable/SpicyDataTable.js ADDED
@@ -0,0 +1,196 @@
1
+ import { t as e } from "../SpicyBtn/SpicyBtn.js";
2
+ import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, watch as g } from "vue";
3
+ //#region src/components/SpicyDataTable/SpicyDataTable.css?inline
4
+ var _ = ".spicyDataTable{background-color:var(--skBgColor);width:100%;color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize);flex-direction:column;display:flex;position:relative}.spicyDataTableContainer{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);overflow-x:auto}.spicyDataTableTable{border-collapse:collapse;table-layout:fixed;width:100%}.spicyDataTableHeader{background-color:var(--skBgSecondaryColor);z-index:10;position:sticky;top:0}.spicyDataTableHeaderCell{border-bottom:2px solid var(--skBorderColor);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;font-weight:600;overflow:hidden}.spicyDataTableHeaderCell.sortable{cursor:pointer;transition:background-color .2s}.spicyDataTableHeaderCell.sortable:hover{background-color:var(--skHoverColor)}.headerText{margin-right:4px;display:inline-block}.sortIcon{opacity:.7;font-size:12px;display:inline-block}.spicyDataTableBody{background-color:var(--skBgColor)}.spicyDataTableRow{border-bottom:1px solid var(--skBorderColor);transition:background-color .2s}.spicyDataTableRow.clickable{cursor:pointer}.spicyDataTableRow:hover{background-color:var(--skHoverColor)}.spicyDataTableRow:nth-child(2n){background-color:rgba(var(--skBgSecondaryColor), .3)}.spicyDataTableRow:nth-child(2n):hover{background-color:var(--skHoverColor)}.spicyDataTableCell{white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;overflow:hidden}.spicyDataTableCell.left{text-align:left}.spicyDataTableCell.center{text-align:center}.spicyDataTableCell.right{text-align:right}.spicyDataTableLoading{background-color:rgba(var(--skBgColor), .8);z-index:20;border-radius:var(--skBorderRadius);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spicyDataTablePagination{border:1px solid var(--skBorderColor);border-radius:0 0 var(--skBorderRadius) var(--skBorderRadius);background-color:var(--skBgSecondaryColor);border-top:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.paginationInfo{color:var(--skTextColor);font-size:14px}.paginationControls{gap:8px;display:flex}.paginationPerPage{align-items:center;display:flex}.itemsPerPageSelect{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);background-color:var(--skBgColor);color:var(--skTextColor);font-family:var(--skFontFamily);cursor:pointer;outline:none;padding:6px 12px;font-size:14px}.itemsPerPageSelect:hover{border-color:var(--skPrimaryColor)}.itemsPerPageSelect:focus{border-color:var(--skPrimaryColor);outline:2px solid var(--skPrimaryColor);outline-offset:2px}@media (width<=768px){.spicyDataTablePagination{flex-direction:column;align-items:stretch}.paginationInfo{text-align:center}.paginationControls,.paginationPerPage{justify-content:center}.itemsPerPageSelect{width:100%}.spicyDataTableHeaderCell,.spicyDataTableCell{padding:8px 12px;font-size:14px}}@media (width<=480px){.spicyDataTableHeaderCell,.spicyDataTableCell{padding:6px 8px;font-size:12px}.paginationInfo{font-size:12px}}", v = {
5
+ key: 0,
6
+ class: "spicyProgress"
7
+ }, y = {
8
+ key: 0,
9
+ class: "spicyProgressLabel"
10
+ }, b = {
11
+ key: 1,
12
+ class: "spicyProgressCircular"
13
+ }, x = ["width", "height"], S = [
14
+ "stroke-width",
15
+ "r",
16
+ "cx",
17
+ "cy"
18
+ ], C = [
19
+ "stroke",
20
+ "stroke-width",
21
+ "r",
22
+ "cx",
23
+ "cy"
24
+ ], w = {
25
+ key: 0,
26
+ class: "spicyCircularLabel"
27
+ }, T = /* @__PURE__ */ c({
28
+ __name: "SpicyProgress",
29
+ props: {
30
+ value: {},
31
+ max: { default: 100 },
32
+ color: { default: "#4caf50" },
33
+ height: { default: "8px" },
34
+ strokeWidth: { default: 8 },
35
+ type: { default: "linear" },
36
+ showLabel: {
37
+ type: Boolean,
38
+ default: !1
39
+ },
40
+ size: { default: 100 }
41
+ },
42
+ setup(e) {
43
+ let o = e, s = n(() => Math.round(o.value / o.max * 100)), c = n(() => o.type === "linear"), l = n(() => ({
44
+ width: `${s.value}%`,
45
+ backgroundColor: o.color,
46
+ height: o.height
47
+ })), f = n(() => o.size / 2), p = n(() => (o.size - o.strokeWidth) / 2), g = n(() => 2 * Math.PI * p.value), _ = n(() => ({
48
+ strokeDasharray: `${g.value} ${g.value}`,
49
+ strokeDashoffset: `${g.value - s.value / 100 * g.value}`,
50
+ transition: "stroke-dashoffset 400ms ease"
51
+ }));
52
+ return (n, o) => (d(), i(t, null, [c.value ? (d(), i("div", v, [a("div", {
53
+ class: "spicyProgressBar",
54
+ style: u(l.value)
55
+ }, null, 4), e.showLabel ? (d(), i("div", y, h(s.value) + "%", 1)) : r("", !0)])) : (d(), i("div", b, [(d(), i("svg", {
56
+ class: "spicyCircularSvg",
57
+ width: e.size,
58
+ height: e.size
59
+ }, [a("circle", {
60
+ class: "spicyCircularTrack",
61
+ "stroke-width": e.strokeWidth,
62
+ r: p.value,
63
+ cx: f.value,
64
+ cy: f.value
65
+ }, null, 8, S), a("circle", {
66
+ class: "spicyCircularProgress",
67
+ stroke: e.color,
68
+ "stroke-width": e.strokeWidth,
69
+ r: p.value,
70
+ cx: f.value,
71
+ cy: f.value,
72
+ style: u(_.value)
73
+ }, null, 12, C)], 8, x)), e.showLabel ? (d(), i("div", w, h(s.value) + "%", 1)) : r("", !0)])), m(n.$slots, "default")], 64));
74
+ }
75
+ }), E = { class: "spicyDataTable" }, D = { class: "spicyDataTableContainer" }, O = { class: "spicyDataTableTable" }, k = { class: "spicyDataTableHeader" }, A = ["onClick"], j = { class: "headerText" }, M = {
76
+ key: 0,
77
+ class: "sortIcon"
78
+ }, N = { class: "spicyDataTableBody" }, P = ["onClick"], F = {
79
+ key: 0,
80
+ class: "spicyDataTableLoading"
81
+ }, I = {
82
+ key: 1,
83
+ class: "spicyDataTablePagination"
84
+ }, L = { class: "paginationInfo" }, R = { class: "paginationControls" }, z = { class: "paginationPerPage" }, B = ["value"], V = ["value"], H = /* @__PURE__ */ c({
85
+ __name: "SpicyDataTable",
86
+ props: {
87
+ headers: {},
88
+ items: {},
89
+ itemKey: { default: "id" },
90
+ itemsPerPage: { default: 10 },
91
+ page: { default: 1 },
92
+ loading: {
93
+ type: Boolean,
94
+ default: !1
95
+ },
96
+ serverItemsLength: {},
97
+ showPagination: {
98
+ type: Boolean,
99
+ default: !0
100
+ },
101
+ sortable: {
102
+ type: Boolean,
103
+ default: !0
104
+ },
105
+ fixedRowHeight: { default: "auto" }
106
+ },
107
+ emits: [
108
+ "update:page",
109
+ "update:itemsPerPage",
110
+ "click:row"
111
+ ],
112
+ setup(c, { emit: _ }) {
113
+ let v = _, y = c, b = f(""), x = f(!1), S = f(y.page), C = [
114
+ 5,
115
+ 10,
116
+ 25,
117
+ 50,
118
+ 100
119
+ ], w = n(() => {
120
+ if (!b.value || !y.sortable) return y.items;
121
+ let e = [...y.items].sort((e, t) => {
122
+ let n = e[b.value], r = t[b.value];
123
+ return n === r ? 0 : n == null ? 1 : r == null ? -1 : typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
124
+ });
125
+ return x.value ? e.reverse() : e;
126
+ }), H = n(() => y.serverItemsLength || w.value.length), U = n(() => Math.ceil(H.value / y.itemsPerPage)), W = n(() => {
127
+ let e = (S.value - 1) * y.itemsPerPage, t = e + y.itemsPerPage;
128
+ return w.value.slice(e, t);
129
+ }), G = n(() => `${(S.value - 1) * y.itemsPerPage + 1}-${Math.min(S.value * y.itemsPerPage, H.value)} of ${H.value}`), K = (e) => {
130
+ e.sortable === !1 || !y.sortable || (b.value === e.value ? x.value = !x.value : (b.value = e.value, x.value = !1));
131
+ }, q = (e, t) => {
132
+ v("click:row", e, t);
133
+ }, J = () => {
134
+ S.value > 1 && (S.value--, v("update:page", S.value));
135
+ }, Y = () => {
136
+ S.value < U.value && (S.value++, v("update:page", S.value));
137
+ }, X = (e) => {
138
+ let t = e.target;
139
+ v("update:itemsPerPage", Number(t.value)), S.value = 1, v("update:page", 1);
140
+ };
141
+ return g(() => y.page, (e) => {
142
+ S.value = e;
143
+ }), (n, f) => (d(), i("div", E, [
144
+ a("div", D, [a("table", O, [a("thead", k, [a("tr", null, [(d(!0), i(t, null, p(c.headers, (e) => (d(), i("th", {
145
+ key: e.value,
146
+ class: l([
147
+ "spicyDataTableCell",
148
+ "spicyDataTableHeaderCell",
149
+ e.align || "left",
150
+ { sortable: e.sortable !== !1 && c.sortable }
151
+ ]),
152
+ onClick: (t) => K(e)
153
+ }, [a("span", j, h(e.text), 1), e.sortable !== !1 && c.sortable && b.value === e.value ? (d(), i("span", M, h(x.value ? "▼" : "▲"), 1)) : r("", !0)], 10, A))), 128))])]), a("tbody", N, [(d(!0), i(t, null, p(W.value, (e, r) => (d(), i("tr", {
154
+ key: e[c.itemKey],
155
+ class: l(["spicyDataTableRow", { clickable: n.$attrs["onClick:row"] }]),
156
+ style: u({ height: c.fixedRowHeight }),
157
+ onClick: (t) => q(e, t)
158
+ }, [(d(!0), i(t, null, p(c.headers, (t) => (d(), i("td", {
159
+ key: t.value,
160
+ class: l(["spicyDataTableCell", t.align || "left"])
161
+ }, [m(n.$slots, `item.${t.value}`, {
162
+ item: e,
163
+ index: r
164
+ }, () => [o(h(e[t.value]), 1)])], 2))), 128))], 14, P))), 128))])])]),
165
+ c.loading ? (d(), i("div", F, [m(n.$slots, "loading", {}, () => [s(T, {
166
+ value: 0,
167
+ type: "circular",
168
+ size: 60
169
+ })])])) : r("", !0),
170
+ c.showPagination ? (d(), i("div", I, [
171
+ a("div", L, [a("span", null, h(G.value), 1)]),
172
+ a("div", R, [s(e, {
173
+ disabled: S.value === 1,
174
+ onClick: J,
175
+ text: "Previous",
176
+ size: "small"
177
+ }, null, 8, ["disabled"]), s(e, {
178
+ disabled: S.value === U.value,
179
+ onClick: Y,
180
+ text: "Next",
181
+ size: "small"
182
+ }, null, 8, ["disabled"])]),
183
+ a("div", z, [a("select", {
184
+ value: c.itemsPerPage,
185
+ onChange: X,
186
+ class: "itemsPerPageSelect"
187
+ }, [(d(), i(t, null, p(C, (e) => a("option", {
188
+ key: e,
189
+ value: e
190
+ }, h(e) + " / page ", 9, V)), 64))], 40, B)])
191
+ ])) : r("", !0)
192
+ ]));
193
+ }
194
+ });
195
+ //#endregion
196
+ export { T as n, _ as r, H as t };
package/dist/lib/SpicyDialog/SpicyDialog.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeStyle as c, openBlock as l, renderSlot as u, watch as d, withCtx as f, withModifiers as p } from "vue";
2
- //#endregion
3
- //#region src/components/SpicyDialog.vue
4
- var m = /* @__PURE__ */ s({
2
+ //#region src/components/SpicyDialog/SpicyDialog.css?inline
3
+ var m = ".spicyDialogOverlay{z-index:2000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spicyDialog{border-radius:8px;width:100%;padding:16px}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .3s}.dialog-fade-enter-from,.dialog-fade-leave-to{opacity:0}", h = /* @__PURE__ */ s({
5
4
  __name: "SpicyDialog",
6
5
  props: {
7
6
  modelValue: Boolean,
@@ -42,4 +41,4 @@ var m = /* @__PURE__ */ s({
42
41
  }
43
42
  });
44
43
  //#endregion
45
- export { m as t };
44
+ export { m as n, h as t };
package/dist/lib/SpicyDivider/SpicyDivider.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o } from "vue";
2
- //#region src/components/SpicyDivider.vue?vue&type=script&setup=true&lang.ts
2
+ //#region src/components/SpicyDivider/SpicyDivider.vue?vue&type=script&setup=true&lang.ts
3
3
  var s = ["aria-orientation"], c = /* @__PURE__ */ n({
4
4
  __name: "SpicyDivider",
5
5
  props: {
package/dist/lib/SpicyDropdown/SpicyDropdown.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Transition as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode 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, renderSlot as m, toDisplayString as h, withCtx as g, withModifiers as _ } from "vue";
2
- //#region src/components/SpicyDropdown.vue?vue&type=script&setup=true&lang.ts
3
- var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "height"], S = /* @__PURE__ */ s({
2
+ //#region src/components/SpicyDropdown/SpicyDropdown.css?inline
3
+ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownButton{background-color:var(--skBgColor);color:#fff;cursor:pointer;border:none;align-items:center;padding:10px 16px;font-size:16px;display:flex}.spicyDropdownButton .arrow{margin-left:8px;transition:transform .3s}.spicyDropdownButton .arrow.open{transform:rotate(180deg)}.dropdownIcon{margin-right:8px}.spicyDropdownMenu{z-index:1;background-color:#fff;border-radius:4px;padding:10px;position:absolute;top:100%;box-shadow:0 4px 8px #0000001a}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}", y = ["aria-expanded"], b = ["width", "height"], x = ["d"], S = ["width", "height"], C = /* @__PURE__ */ s({
4
4
  __name: "SpicyDropdown",
5
5
  props: {
6
6
  label: {},
@@ -10,16 +10,16 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
10
10
  iconSize: { default: "24px" }
11
11
  },
12
12
  setup(s) {
13
- let S = s, C = p(!1), w = p(null), T = () => {
13
+ let v = s, C = p(!1), w = p(null), T = () => {
14
14
  C.value = !C.value;
15
15
  }, E = (e) => {
16
16
  w.value && !w.value.contains(e.target) && (C.value = !1);
17
17
  };
18
18
  u(() => document.addEventListener("click", E)), d(() => document.removeEventListener("click", E));
19
- let D = t(() => S.icon || ""), O = t(() => ({
20
- width: S.width,
21
- [S.align === "right" ? "right" : "left"]: 0,
22
- textAlign: S.align
19
+ let D = t(() => v.icon || ""), O = t(() => ({
20
+ width: v.width,
21
+ [v.align === "right" ? "right" : "left"]: 0,
22
+ textAlign: v.align
23
23
  }));
24
24
  return (t, u) => (f(), r("div", {
25
25
  ref_key: "dropdownRef",
@@ -38,7 +38,7 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
38
38
  height: s.iconSize,
39
39
  viewBox: "0 0 24 24",
40
40
  class: "dropdownIcon"
41
- }, [i("path", { d: D.value }, null, 8, b)], 8, y)) : n("", !0),
41
+ }, [i("path", { d: D.value }, null, 8, x)], 8, b)) : n("", !0),
42
42
  a(" " + h(s.label) + " ", 1),
43
43
  D.value ? n("", !0) : (f(), r("svg", {
44
44
  key: 1,
@@ -46,8 +46,8 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
46
46
  height: s.iconSize,
47
47
  viewBox: "0 0 24 24",
48
48
  class: c(["arrow", { open: C.value }])
49
- }, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, x))
50
- ], 8, v), o(e, { name: "fade" }, {
49
+ }, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, S))
50
+ ], 8, y), o(e, { name: "fade" }, {
51
51
  default: g(() => [C.value ? (f(), r("div", {
52
52
  key: 0,
53
53
  class: "spicyDropdownMenu",
@@ -60,4 +60,4 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
60
60
  }
61
61
  });
62
62
  //#endregion
63
- export { S as t };
63
+ export { v as n, C as t };