npm - spicykatsu - Versions diffs - 0.4.0 → 0.5.0 - Mend

spicykatsu 0.4.0 → 0.5.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 (114) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # SpicyKatsuLib
-Fun, simple component library for Vue 3. Built as a personal playground — feel free to use it in your own projects.
+Fun, simple component library for Vue 3. Built as a personal playground for my website. Feel free to use it in your own projects.
 📖 **[Docs](https://satoru8.gitlab.io/spicykatsuvlib/)**  &nbsp;|&nbsp;  📦 **[npm](https://www.npmjs.com/package/spicykatsu)**
@@ -18,25 +18,32 @@ npm install spicykatsu
 import { createApp } from 'vue'
 import App from './App.vue'
 import { SpicyKatsu } from 'spicykatsu'
-import 'spicykatsu/dist/style.css'
 const app = createApp(App)
 app.use(SpicyKatsu)
 app.mount('#app')
 ```
-You can also import components individually for tree shaking:
+Styles are automatically injected when you call `app.use(SpicyKatsu)` - no CSS import needed.
+You can also import components individually for JS tree-shaking:
 ```ts
 import { SpicyBtn, SpicyModal } from 'spicykatsu'
 ```
+For CSS tree-shaking, set `useStyles: false` and import only what you need:
+```ts
+import 'spicykatsu/dist/lib/SpicyBtn/SpicyBtn.css'
+```
 ## Options
 ```ts
 app.use(SpicyKatsu, {
   useComponents: true,  // Register all components globally (default: true)
-  useStyles: true,      // Inject CSS variables (default: true)
+  useStyles: true,      // Inject all component styles into <head> (default: true)
   useDirectives: true   // Register v-spicyDrag and v-spicyRipple (default: true)
 })
 ```
@@ -49,6 +56,7 @@ app.use(SpicyKatsu, {
 | `SpicyAlert` | Dismissible alerts with variants and auto-close |
 | `SpicyBtn` | Button with MDI icon support and ripple effect |
 | `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
+| `SpicyDataTable` | Data table with sorting, filtering, and pagination |
 | `SpicyDialog` | Teleported overlay dialog |
 | `SpicyDivider` | Horizontal or vertical divider |
 | `SpicyDropdown` | Dropdown menu with click-outside close |

package/dist/SpicyAccordion-Cm-RI3r_.js ADDED Viewed

@@ -0,0 +1,47 @@
+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";
+//#region src/components/SpicyAccordion/SpicyAccordion.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
+	key: 0,
+	class: "accordionIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, y = ["d"], b = { class: "spicyAccordionContent" }, x = /* @__PURE__ */ o({
+	__name: "SpicyAccordion",
+	props: {
+		sections: {},
+		singleOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultOpen: {}
+	},
+	setup(o) {
+		let x = o, S = l(x.defaultOpen || []), C = (e) => {
+			if (x.singleOpen) S.value = S.value.includes(e) ? [] : [e];
+			else {
+				let t = S.value.indexOf(e);
+				t === -1 ? S.value.push(e) : S.value.splice(t, 1);
+			}
+		}, w = (e) => S.value.includes(e);
+		return (l, x) => (c(), r("div", g, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
+			key: o,
+			class: "spicyAccordionItem"
+		}, [i("button", {
+			class: s(["spicyAccordionHeader", { open: w(o) }]),
+			onClick: (e) => C(o),
+			"aria-expanded": w(o)
+		}, [
+			i("span", null, f(e.title), 1),
+			e.icon ? (c(), r("svg", v, [i("path", { d: e.icon }, null, 8, y)])) : n("", !0),
+			x[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
+				class: "accordionArrow",
+				viewBox: "0 0 24 24"
+			}, [i("path", { d: "M7 10l5 5 5-5H7z" })])], -1)
+		], 10, _), a(t, { name: "fade" }, {
+			default: m(() => [h(i("div", b, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
+			_: 2
+		}, 1024)]))), 128))]));
+	}
+});
+//#endregion
+export { x as t };

package/dist/SpicyAccordion.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyAccordion-Cm-RI3r_.js";
2	+ export { e as SpicyAccordion, e as default };

package/dist/{lib/SpicyAlert/SpicyAlert.js → SpicyAlert-Bwi92wCd.js} RENAMED Viewed

@@ -1,24 +1,24 @@
 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";
-//#region src/components/SpicyAlert/SpicyAlert.css?inline
-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"], _ = {
+//#region src/components/SpicyAlert/SpicyAlert.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = {
 	key: 0,
 	class: "spicyAlertIcon"
-}, v = {
+}, _ = {
 	key: 1,
 	class: "spicyAlertIcon",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, y = ["d"], b = { class: "spicyAlertContainer" }, x = {
+}, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
 	key: 0,
 	class: "spicyAlertTitle"
-}, S = {
+}, x = {
 	key: 1,
 	class: "spicyAlertText"
-}, C = {
+}, S = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
+}, C = ["d"], w = { key: 1 }, T = /* @__PURE__ */ a({
 	__name: "SpicyAlert",
 	props: {
 		variant: { default: "info" },
@@ -42,7 +42,7 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 		}
 	},
 	setup(a) {
-		let h = a, E = l(!0), D = null, O = l(h.autoClose), k = null, A = () => {
+		let T = a, E = l(!0), D = null, O = l(T.autoClose), k = null, A = () => {
 			E.value = !1;
 		}, j = () => {
 			O.value > 0 && (k = Date.now(), D = setTimeout(() => {
@@ -58,7 +58,7 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 		}, P = () => {
 			j();
 		};
-		return f(() => h.autoClose, (e) => {
+		return f(() => T.autoClose, (e) => {
 			O.value = e, M(), j();
 		}), s(() => {
 			M();
@@ -73,27 +73,27 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 				onMouseenter: N,
 				onMouseleave: P
 			}, [
-				a.iconOnly && a.icon ? (c(), r("span", _, d(a.icon), 1)) : n("", !0),
-				a.mdi ? (c(), r("svg", v, [i("path", {
+				a.iconOnly && a.icon ? (c(), r("span", g, d(a.icon), 1)) : n("", !0),
+				a.mdi ? (c(), r("svg", _, [i("path", {
 					fill: "currentColor",
 					class: "spicyAlertMDI",
 					d: a.mdi
-				}, null, 8, y)])) : n("", !0),
-				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)]),
+				}, null, 8, v)])) : n("", !0),
+				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)]),
 				a.closable ? (c(), r("button", {
 					key: 2,
 					class: "spicyAlertCloseBtn",
 					onClick: A,
 					"aria-label": "Close alert"
-				}, [a.closeIcon ? (c(), r("svg", C, [i("path", {
+				}, [a.closeIcon ? (c(), r("svg", S, [i("path", {
 					fill: "#000",
 					d: a.closeIcon
-				}, null, 8, w)])) : (c(), r("span", T, "X"))])) : n("", !0),
+				}, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
 				a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
-			], 42, g)) : n("", !0)]),
+			], 42, h)) : n("", !0)]),
 			_: 3
 		}));
 	}
 });
 //#endregion
-export { h as n, E as t };
+export { T as t };

package/dist/SpicyAlert.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyAlert-Bwi92wCd.js";
2	+ export { e as SpicyAlert, e as default };

package/dist/{lib/SpicyBtn/SpicyBtn.js → SpicyBtn-B5nk3vCZ.js} RENAMED Viewed

@@ -1,22 +1,22 @@
 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";
-//#region src/components/SpicyBtn/SpicyBtn.css?inline
-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 = [
+//#region src/components/SpicyBtn/SpicyBtn.vue?vue&type=script&setup=true&lang.ts
+var f = [
 	"disabled",
 	"aria-label",
 	"aria-disabled",
 	"tabindex"
-], m = {
+], p = {
 	key: 0,
 	class: "spicyBtnIcon",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, h = ["d"], g = {
+}, m = ["d"], h = {
 	key: 1,
 	class: "spicyBtnIcon"
-}, _ = {
+}, g = {
 	key: 2,
 	class: "spicyBtnText"
-}, v = /* @__PURE__ */ i({
+}, _ = /* @__PURE__ */ i({
 	__name: "SpicyBtn",
 	props: {
 		variant: { default: "filled" },
@@ -37,8 +37,8 @@ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 		ariaLabel: {}
 	},
 	emits: ["click"],
-	setup(i, { emit: f }) {
-		let v = f, y = (e) => {
+	setup(i, { emit: _ }) {
+		let v = _, y = (e) => {
 			b.disabled || v("click", e);
 		}, b = i, x = e(() => b.ariaLabel || b.text || "Button"), S = e(() => ({
 			"--skFontSize": typeof b.fontSize == "number" ? `${b.fontSize}px` : b.fontSize,
@@ -54,7 +54,7 @@ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 			isRound: C.value,
 			[b.size]: b.size !== "default"
 		}));
-		return (e, f) => {
+		return (e, _) => {
 			let v = l("spicyRipple");
 			return d((s(), n("button", {
 				class: a(w.value),
@@ -66,16 +66,16 @@ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 				"aria-disabled": i.disabled,
 				tabindex: i.disabled ? -1 : 0
 			}, [
-				i.mdi ? (s(), n("svg", m, [r("path", {
+				i.mdi ? (s(), n("svg", p, [r("path", {
 					fill: "currentColor",
 					class: "spicyBtnMDI",
 					d: i.mdi
-				}, null, 8, h)])) : i.icon ? (s(), n("span", g, u(i.icon), 1)) : t("", !0),
-				i.text ? (s(), n("span", _, u(i.text), 1)) : t("", !0),
+				}, null, 8, m)])) : i.icon ? (s(), n("span", h, u(i.icon), 1)) : t("", !0),
+				i.text ? (s(), n("span", g, u(i.text), 1)) : t("", !0),
 				c(e.$slots, "default")
-			], 14, p)), [[v]]);
+			], 14, f)), [[v]]);
 		};
 	}
 });
 //#endregion
-export { f as n, v as t };
+export { _ as t };

package/dist/SpicyBtn.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
2	+ export { e as SpicyBtn, e as default };

package/dist/SpicyCarousel-Be5oYKnj.js ADDED Viewed

@@ -0,0 +1,121 @@
+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";
+//#region src/components/SpicyCarousel/SpicyCarousel.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
+	key: 0,
+	class: "spicyCarouselNavControls"
+}, C = {
+	key: 1,
+	class: "spicyCarouselPagination"
+}, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
+	__name: "SpicyCarousel",
+	props: {
+		autoplay: {
+			type: Boolean,
+			default: !1
+		},
+		autoplaySpeed: { default: 5e3 },
+		showNavigation: {
+			type: Boolean,
+			default: !0
+		},
+		showPagination: {
+			type: Boolean,
+			default: !0
+		},
+		activeColor: { default: "var(--skPrimaryColor)" },
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		initialSlide: { default: 0 },
+		slides: { default: () => [] },
+		width: { default: "580px" },
+		height: { default: "360px" },
+		fullScreen: {
+			type: Boolean,
+			default: !1
+		},
+		enableImageClick: {
+			type: Boolean,
+			default: !1
+		},
+		paginationLimit: { default: 10 }
+	},
+	setup(s) {
+		let E, D, O = !1, k = s, A = n(() => ({
+			"--width": k.width,
+			"--height": k.height,
+			"--activeColor": k.activeColor
+		})), 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 = () => {
+			P.value = (P.value - 1 + k.slides.length) % k.slides.length;
+		}, R = () => {
+			P.value = (P.value + 1) % k.slides.length;
+		}, z = (e) => {
+			P.value = e;
+		}, B = () => {
+			I && clearInterval(I);
+		}, V = () => {
+			k.autoplay && (I = window.setInterval(R, k.autoplaySpeed));
+		}, H = () => {
+			window.open(F.value.img);
+		}, U = () => {
+			k.enableImageClick && H();
+		}, W = (e) => {
+			E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
+		}, G = (e) => {
+			if (!O) {
+				let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
+				Math.abs(t) > Math.abs(n) && (t > 40 ? (L(), O = !0) : t < -40 && (R(), O = !0));
+			}
+		}, K = n(() => {
+			let e = k.slides.length, t = Math.max(0, P.value - Math.floor(j.value / 2)), n = Math.min(e, t + j.value);
+			return [...Array(e).keys()].slice(t, n);
+		});
+		return u(() => {
+			V();
+		}), d(() => {
+			B();
+		}), (n, u) => (f(), i("div", {
+			class: "spicyCarouselWrapper",
+			style: l({ ...A.value })
+		}, [
+			a("div", {
+				class: "spicyCarouselContainer",
+				onMouseenter: B,
+				onMouseleave: V,
+				onTouchstart: W,
+				onTouchmove: G
+			}, [o(t, {
+				name: "slide",
+				mode: "out-in"
+			}, {
+				default: _(() => [(f(), i("div", {
+					class: c(["spicyCarouselSlide", { pointCursor: k.enableImageClick }]),
+					key: P.value,
+					style: l({ backgroundImage: `url(${F.value.img})` }),
+					onClick: U
+				}, [s.slides[P.value].text ? (f(), i("div", {
+					key: 0,
+					class: c(["spicyCarouselTextOverlay", { fullScreen: N.value }]),
+					"aria-label": s.slides[P.value].text
+				}, [a("span", y, g(s.slides[P.value].text), 1)], 10, v)) : r("", !0), h(n.$slots, "default")], 6))]),
+				_: 3
+			})], 32),
+			a("div", b, [M.value ? (f(), i("h2", x, g(F.value.title), 1)) : r("", !0)]),
+			s.showNavigation ? (f(), i("div", S, [a("button", {
+				class: "spicyCarouselPrevBtn",
+				onClick: L
+			}, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
+				class: "spicyCarouselNextBtn",
+				onClick: R
+			}, [...u[1] ||= [a("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)]])])) : r("", !0),
+			s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(K.value, (e) => (f(), i("button", {
+				key: e,
+				onClick: (t) => z(e),
+				class: c(["spicyCarouselPageBtn", { active: e === P.value }])
+			}, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
+		], 4));
+	}
+});
+//#endregion
+export { E as t };

package/dist/SpicyCarousel.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyCarousel-Be5oYKnj.js";
2	+ export { e as SpicyCarousel, e as default };

package/dist/SpicyDataTable-BqoW4IZ4.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
+import { t } from "./SpicyProgress-CjD0SCA7.js";
+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";
+//#region src/components/SpicyDataTable/SpicyDataTable.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b = { class: "spicyDataTableTable" }, x = { class: "spicyDataTableHeader" }, S = ["onClick"], C = { class: "headerText" }, w = {
+	key: 0,
+	class: "sortIcon"
+}, T = { class: "spicyDataTableBody" }, E = ["onClick"], D = {
+	key: 0,
+	class: "spicyDataTableLoading"
+}, O = {
+	key: 1,
+	class: "spicyDataTablePagination"
+}, k = { class: "paginationInfo" }, A = { class: "paginationControls" }, j = { class: "paginationPerPage" }, M = ["value"], N = ["value"], P = /* @__PURE__ */ l({
+	__name: "SpicyDataTable",
+	props: {
+		headers: {},
+		items: {},
+		itemKey: { default: "id" },
+		itemsPerPage: { default: 10 },
+		page: { default: 1 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		serverItemsLength: {},
+		showPagination: {
+			type: Boolean,
+			default: !0
+		},
+		sortable: {
+			type: Boolean,
+			default: !0
+		},
+		fixedRowHeight: { default: "auto" }
+	},
+	emits: [
+		"update:page",
+		"update:itemsPerPage",
+		"click:row"
+	],
+	setup(l, { emit: P }) {
+		let F = P, I = l, L = p(""), R = p(!1), z = p(I.page), B = [
+			5,
+			10,
+			25,
+			50,
+			100
+		], V = r(() => {
+			if (!L.value || !I.sortable) return I.items;
+			let e = [...I.items].sort((e, t) => {
+				let n = e[L.value], r = t[L.value];
+				return n === r ? 0 : n == null ? 1 : r == null ? -1 : typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
+			});
+			return R.value ? e.reverse() : e;
+		}), H = r(() => I.serverItemsLength || V.value.length), U = r(() => Math.ceil(H.value / I.itemsPerPage)), W = r(() => {
+			let e = (z.value - 1) * I.itemsPerPage, t = e + I.itemsPerPage;
+			return V.value.slice(e, t);
+		}), G = r(() => `${(z.value - 1) * I.itemsPerPage + 1}-${Math.min(z.value * I.itemsPerPage, H.value)} of ${H.value}`), K = (e) => {
+			e.sortable === !1 || !I.sortable || (L.value === e.value ? R.value = !R.value : (L.value = e.value, R.value = !1));
+		}, q = (e, t) => {
+			F("click:row", e, t);
+		}, J = () => {
+			z.value > 1 && (z.value--, F("update:page", z.value));
+		}, Y = () => {
+			z.value < U.value && (z.value++, F("update:page", z.value));
+		}, X = (e) => {
+			let t = e.target;
+			F("update:itemsPerPage", Number(t.value)), z.value = 1, F("update:page", 1);
+		};
+		return _(() => I.page, (e) => {
+			z.value = e;
+		}), (r, p) => (f(), a("div", v, [
+			o("div", y, [o("table", b, [o("thead", x, [o("tr", null, [(f(!0), a(n, null, m(l.headers, (e) => (f(), a("th", {
+				key: e.value,
+				class: u([
+					"spicyDataTableCell",
+					"spicyDataTableHeaderCell",
+					e.align || "left",
+					{ sortable: e.sortable !== !1 && l.sortable }
+				]),
+				onClick: (t) => K(e)
+			}, [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", {
+				key: e[l.itemKey],
+				class: u(["spicyDataTableRow", { clickable: r.$attrs["onClick:row"] }]),
+				style: d({ height: l.fixedRowHeight }),
+				onClick: (t) => q(e, t)
+			}, [(f(!0), a(n, null, m(l.headers, (n) => (f(), a("td", {
+				key: n.value,
+				class: u(["spicyDataTableCell", n.align || "left"])
+			}, [h(r.$slots, `item.${n.value}`, {
+				item: e,
+				index: t
+			}, () => [s(g(e[n.value]), 1)])], 2))), 128))], 14, E))), 128))])])]),
+			l.loading ? (f(), a("div", D, [h(r.$slots, "loading", {}, () => [c(t, {
+				value: 0,
+				type: "circular",
+				size: 60
+			})])])) : i("", !0),
+			l.showPagination ? (f(), a("div", O, [
+				o("div", k, [o("span", null, g(G.value), 1)]),
+				o("div", A, [c(e, {
+					disabled: z.value === 1,
+					onClick: J,
+					text: "Previous",
+					size: "small"
+				}, null, 8, ["disabled"]), c(e, {
+					disabled: z.value === U.value,
+					onClick: Y,
+					text: "Next",
+					size: "small"
+				}, null, 8, ["disabled"])]),
+				o("div", j, [o("select", {
+					value: l.itemsPerPage,
+					onChange: X,
+					class: "itemsPerPageSelect"
+				}, [(f(), a(n, null, m(B, (e) => o("option", {
+					key: e,
+					value: e
+				}, g(e) + " / page ", 9, N)), 64))], 40, M)])
+			])) : i("", !0)
+		]));
+	}
+});
+//#endregion
+export { P as t };

package/dist/SpicyDataTable.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyDataTable-BqoW4IZ4.js";
2	+ export { e as SpicyDataTable, e as default };

package/dist/{lib/SpicyDialog/SpicyDialog.js → SpicyDialog-CKtIwcPz.js} RENAMED Viewed

@@ -1,6 +1,7 @@
 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";
-//#region src/components/SpicyDialog/SpicyDialog.css?inline
-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({
+//#endregion
+//#region src/components/SpicyDialog/SpicyDialog.vue
+var m = /* @__PURE__ */ s({
 	__name: "SpicyDialog",
 	props: {
 		modelValue: Boolean,
@@ -41,4 +42,4 @@ var m = ".spicyDialogOverlay{z-index:2000;justify-content:center;align-items:cen
 	}
 });
 //#endregion
-export { m as n, h as t };
+export { m as t };

package/dist/SpicyDialog.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyDialog-CKtIwcPz.js";
2	+ export { e as SpicyDialog, e as default };

package/dist/{lib/SpicyDivider/SpicyDivider.js → SpicyDivider-CDgC_pdd.js} RENAMED Viewed

File without changes

package/dist/SpicyDivider.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyDivider-CDgC_pdd.js";
2	+ export { e as SpicyDivider, e as default };

package/dist/{lib/SpicyDropdown/SpicyDropdown.js → SpicyDropdown-DLqjiK7t.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 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";
-//#region src/components/SpicyDropdown/SpicyDropdown.css?inline
-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({
+//#region src/components/SpicyDropdown/SpicyDropdown.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "height"], S = /* @__PURE__ */ s({
 	__name: "SpicyDropdown",
 	props: {
 		label: {},
@@ -10,16 +10,16 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 		iconSize: { default: "24px" }
 	},
 	setup(s) {
-		let v = s, C = p(!1), w = p(null), T = () => {
+		let S = s, C = p(!1), w = p(null), T = () => {
 			C.value = !C.value;
 		}, E = (e) => {
 			w.value && !w.value.contains(e.target) && (C.value = !1);
 		};
 		u(() => document.addEventListener("click", E)), d(() => document.removeEventListener("click", E));
-		let D = t(() => v.icon || ""), O = t(() => ({
-			width: v.width,
-			[v.align === "right" ? "right" : "left"]: 0,
-			textAlign: v.align
+		let D = t(() => S.icon || ""), O = t(() => ({
+			width: S.width,
+			[S.align === "right" ? "right" : "left"]: 0,
+			textAlign: S.align
 		}));
 		return (t, u) => (f(), r("div", {
 			ref_key: "dropdownRef",
@@ -38,7 +38,7 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 				height: s.iconSize,
 				viewBox: "0 0 24 24",
 				class: "dropdownIcon"
-			}, [i("path", { d: D.value }, null, 8, x)], 8, b)) : n("", !0),
+			}, [i("path", { d: D.value }, null, 8, b)], 8, y)) : n("", !0),
 			a(" " + h(s.label) + " ", 1),
 			D.value ? n("", !0) : (f(), r("svg", {
 				key: 1,
@@ -46,8 +46,8 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 				height: s.iconSize,
 				viewBox: "0 0 24 24",
 				class: c(["arrow", { open: C.value }])
-			}, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, S))
-		], 8, y), o(e, { name: "fade" }, {
+			}, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, x))
+		], 8, v), o(e, { name: "fade" }, {
 			default: g(() => [C.value ? (f(), r("div", {
 				key: 0,
 				class: "spicyDropdownMenu",
@@ -60,4 +60,4 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 	}
 });
 //#endregion
-export { v as n, C as t };
+export { S as t };

package/dist/SpicyDropdown.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "./SpicyDropdown-DLqjiK7t.js";
2	+ export { e as SpicyDropdown, e as default };