@robuust-digital/vue-components 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 3.1.1 (07-07-2026)
+
+### Fixed
+
+* `Pagination`: Align pagination info left and navigation right when `showPerPage` is disabled
+
+## 3.1.0 (07-07-2026)
+
+### Added
+
+* `Pagination`: Added `showPerPage` support for hiding the per-page select while preserving the default behavior
+* `DataTable`: Forward `showPerPage` to built-in pagination
+
 ## 3.0.1 (06-07-2026)
 
 ### Added

package/dist/_shared/{core-D8wjjKnI.js → core-s0W4Pxm0.js}

@@ -274,10 +274,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			S(n.$slots, "icon", { icon: e.icon }, () => [(y(), s(C(e.icon ?? T(t)), { "aria-hidden": "true" }))])
 		], 2));
 	}
-}), X = {
-	key: 0,
-	class: "rvc-pagination"
-}, Z = ["value"], re = { class: "rvc-pagination-info" }, ie = { class: "rvc-pagination-nav-list" }, ae = ["disabled", "onClick"], oe = { key: 2 }, se = { key: 3 }, Q = /* @__PURE__ */ p({
+}), X = ["value"], Z = { class: "rvc-pagination-info" }, re = { class: "rvc-pagination-nav-list" }, ie = ["disabled", "onClick"], ae = { key: 2 }, oe = { key: 3 }, Q = /* @__PURE__ */ p({
 	__name: "Pagination",
 	props: {
 		pagination: {},
@@ -288,6 +285,10 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			20,
 			50
 		] },
+		showPerPage: {
+			type: Boolean,
+			default: !0
+		},
 		fromLabel: { default: "of" },
 		prevIcon: {
 			type: [
@@ -312,8 +313,11 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			get: () => n.perPage,
 			set: (e) => r("pagination:perPage", Number(e))
 		});
-		return (t, n) => e.pagination?.total ? (y(), l("div", X, [
-			S(t.$slots, "perPage", h(e.pagination, { perPage: i.value }), () => [f(Y, {
+		return (t, n) => e.pagination?.total ? (y(), l("div", {
+			key: 0,
+			class: g(["rvc-pagination", { "rvc-pagination-without-per-page": !e.showPerPage }])
+		}, [
+			e.showPerPage ? S(t.$slots, "perPage", h({ key: 0 }, e.pagination, { perPage: i.value }), () => [f(Y, {
 				modelValue: i.value,
 				"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
 				size: "sm",
@@ -322,11 +326,11 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				default: A(() => [(y(!0), l(a, null, x(e.perPageOptions, (t) => (y(), l("option", {
 					key: `pagination-items-per-page-option-${t}`,
 					value: t
-				}, w(t) + " " + w(e.perPageLabel), 9, Z))), 128))]),
+				}, w(t) + " " + w(e.perPageLabel), 9, X))), 128))]),
 				_: 1
-			}, 8, ["modelValue"])]),
-			S(t.$slots, "info", h(e.pagination, { fromLabel: e.fromLabel }), () => [u("div", re, w(e.pagination.from) + " - " + w(e.pagination.to) + " " + w(e.fromLabel) + " " + w(e.pagination.total), 1)]),
-			u("nav", null, [u("ol", ie, [(y(!0), l(a, null, x(e.pagination.links, (n, i) => (y(), l("li", {
+			}, 8, ["modelValue"])]) : c("", !0),
+			S(t.$slots, "info", h(e.pagination, { fromLabel: e.fromLabel }), () => [u("div", Z, w(e.pagination.from) + " - " + w(e.pagination.to) + " " + w(e.fromLabel) + " " + w(e.pagination.total), 1)]),
+			u("nav", null, [u("ol", re, [(y(!0), l(a, null, x(e.pagination.links, (n, i) => (y(), l("li", {
 				key: `pagination-link-${n.label}-${i}`,
 				class: "rvc-pagination-nav-list-item"
 			}, [u("button", {
@@ -350,10 +354,10 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			}, () => [(y(), s(C(e.nextIcon || T(ne)), {
 				"aria-hidden": "true",
 				class: g(["rvc-pagination-button-icon", { "rvc-pagination-button-icon-disabled": !n.url }])
-			}, null, 8, ["class"]))]) : n.label === "..." ? (y(), l("span", oe, " ... ")) : (y(), l("span", se, w(n.label), 1))], 10, ae)]))), 128))])])
-		])) : c("", !0);
+			}, null, 8, ["class"]))]) : n.label === "..." ? (y(), l("span", ae, " ... ")) : (y(), l("span", oe, w(n.label), 1))], 10, ie)]))), 128))])])
+		], 2)) : c("", !0);
 	}
-}), ce = { key: 0 }, le = ["aria-label", "onClick"], ue = ["innerHTML"], de = { key: 2 }, fe = ["colspan"], pe = { key: 3 }, me = ["colspan"], he = { class: "rvc-table-spinner-wrapper" }, ge = { key: 4 }, _e = /* @__PURE__ */ p({
+}), se = { key: 0 }, ce = ["aria-label", "onClick"], le = ["innerHTML"], ue = { key: 2 }, de = ["colspan"], fe = { key: 3 }, pe = ["colspan"], me = { class: "rvc-table-spinner-wrapper" }, he = { key: 4 }, ge = /* @__PURE__ */ p({
 	__name: "DataTable",
 	props: {
 		headers: { default: () => [] },
@@ -376,6 +380,10 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			20,
 			50
 		] },
+		showPerPage: {
+			type: Boolean,
+			default: !0
+		},
 		fromLabel: { default: "of" },
 		prevIcon: {
 			type: [
@@ -412,7 +420,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			} : o.value = null, i("table:sortBy", o.value));
 		};
 		return (t, r) => (y(), l("div", null, [u("div", { class: g(["rvc-table-wrapper", e.wrapperClass]) }, [u("table", { class: g([{ "rvc-table-striped": e.striped }, "rvc-table"]) }, [
-			e.headers.length ? (y(), l("thead", ce, [S(t.$slots, "headers", { headers: e.headers }, () => [u("tr", null, [(y(!0), l(a, null, x(e.headers, (e, n) => S(t.$slots, "header", {
+			e.headers.length ? (y(), l("thead", se, [S(t.$slots, "headers", { headers: e.headers }, () => [u("tr", null, [(y(!0), l(a, null, x(e.headers, (e, n) => S(t.$slots, "header", {
 				header: e,
 				index: n
 			}, () => [(y(), l("th", h({ ref_for: !0 }, {
@@ -441,7 +449,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				"rvc-table-sort-icon-visible": o.value?.key === e.key,
 				"rvc-table-sort-icon-invisible": !o.value || o.value.key !== e.key,
 				"rvc-table-sort-icon-rotated": o.value?.key === e.key && o.value.direction === "desc"
-			}]) }, null, 8, ["class"])], 10, le)) : S(t.$slots, "header-label", {
+			}]) }, null, 8, ["class"])], 10, ce)) : S(t.$slots, "header-label", {
 				key: 1,
 				sortBy: o.value,
 				header: e
@@ -462,21 +470,21 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 					"rvc-table-text-right": p(String(r))?.align === "right"
 				},
 				innerHTML: t
-			}), null, 16, ue))), 128))])]))])), 256))])]) : !e.items.length && !e.spinning ? (y(), l("tbody", de, [u("tr", null, [u("td", {
+			}), null, 16, le))), 128))])]))])), 256))])]) : !e.items.length && !e.spinning ? (y(), l("tbody", ue, [u("tr", null, [u("td", {
 				colspan: e.headers.length,
 				class: "rvc-table-state"
-			}, [u("p", null, w(e.noResultsText), 1)], 8, fe)])])) : (y(), l("tbody", pe, [u("tr", null, [u("td", {
+			}, [u("p", null, w(e.noResultsText), 1)], 8, de)])])) : (y(), l("tbody", fe, [u("tr", null, [u("td", {
 				colspan: e.headers.length,
 				class: "rvc-table-state"
 			}, [S(t.$slots, "spinner", {
 				spinning: e.spinning,
 				label: e.loadingText
-			}, () => [u("div", he, [e.spinning ? (y(), s(T(n), {
+			}, () => [u("div", me, [e.spinning ? (y(), s(T(n), {
 				key: 0,
 				"aria-hidden": "true",
 				class: "rvc-table-spinner"
-			})) : c("", !0), d(" " + w(e.loadingText), 1)])])], 8, me)])])),
-			t.$slots.footer ? (y(), l("tfoot", ge, [S(t.$slots, "footer", {
+			})) : c("", !0), d(" " + w(e.loadingText), 1)])])], 8, pe)])])),
+			t.$slots.footer ? (y(), l("tfoot", he, [S(t.$slots, "footer", {
 				headers: e.headers,
 				items: e.items
 			})])) : c("", !0)
@@ -485,6 +493,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			"per-page": e.perPage,
 			"per-page-label": e.perPageLabel,
 			"per-page-options": e.perPageOptions,
+			"show-per-page": e.showPerPage,
 			"from-label": e.fromLabel,
 			"prev-icon": e.prevIcon,
 			"next-icon": e.nextIcon,
@@ -495,15 +504,16 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			"per-page",
 			"per-page-label",
 			"per-page-options",
+			"show-per-page",
 			"from-label",
 			"prev-icon",
 			"next-icon"
 		])]) : c("", !0)]));
 	}
-}), ve = {
+}), _e = {
 	key: 1,
 	class: "rvc-empty-state-title"
-}, ye = /* @__PURE__ */ p({
+}, ve = /* @__PURE__ */ p({
 	__name: "EmptyState",
 	props: {
 		title: {},
@@ -520,32 +530,32 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				key: 0,
 				class: "rvc-empty-state-icon"
 			})) : c("", !0),
-			e.title ? (y(), l("p", ve, w(e.title), 1)) : c("", !0),
+			e.title ? (y(), l("p", _e, w(e.title), 1)) : c("", !0),
 			S(t.$slots, "default")
 		], 2));
 	}
-}), be = { class: "rvc-file-upload-control" }, xe = [
+}), ye = { class: "rvc-file-upload-control" }, be = [
 	"accept",
 	"multiple",
 	"disabled"
-], Se = ["disabled"], Ce = {
+], xe = ["disabled"], Se = {
 	key: 0,
 	class: "rvc-file-upload-label"
-}, we = {
+}, Ce = {
 	key: 1,
 	class: "rvc-file-upload-description"
-}, Te = { class: "rvc-file-upload-list" }, Ee = ["src", "alt"], De = ["href"], Oe = {
+}, we = { class: "rvc-file-upload-list" }, Te = ["src", "alt"], Ee = ["href"], De = {
 	key: 2,
 	class: "rvc-file-upload-file"
-}, $ = [
+}, Oe = [
 	"disabled",
 	"aria-label",
 	"onClick"
-], ke = ["src", "alt"], Ae = { class: "rvc-file-upload-file" }, je = [
+], $ = ["src", "alt"], ke = { class: "rvc-file-upload-file" }, Ae = [
 	"disabled",
 	"aria-label",
 	"onClick"
-], Me = /* @__PURE__ */ p({
+], je = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "FileUpload",
 	props: {
@@ -636,7 +646,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				"rvc-file-upload-disabled": e.disabled
 			},
 			e.rootClass
-		]) }, [u("div", be, [u("input", h(T(D), {
+		]) }, [u("div", ye, [u("input", h(T(D), {
 			ref_key: "input",
 			ref: d,
 			class: "rvc-file-upload-input",
@@ -645,7 +655,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			multiple: e.multiple,
 			disabled: e.disabled,
 			onChange: F
-		}), null, 16, xe), e.variant === "area" ? (y(), l("button", {
+		}), null, 16, be), e.variant === "area" ? (y(), l("button", {
 			key: 0,
 			class: "rvc-file-upload-area rvc-file-upload-trigger",
 			type: "button",
@@ -662,9 +672,9 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				class: "rvc-file-upload-icon",
 				"aria-hidden": "true"
 			}))]),
-			e.label ? (y(), l("span", Ce, w(e.label), 1)) : c("", !0),
-			e.description ? (y(), l("span", we, w(e.description), 1)) : c("", !0)
-		], 40, Se)) : (y(), s(r, {
+			e.label ? (y(), l("span", Se, w(e.label), 1)) : c("", !0),
+			e.description ? (y(), l("span", Ce, w(e.description), 1)) : c("", !0)
+		], 40, xe)) : (y(), s(r, {
 			key: 1,
 			class: "rvc-file-upload-trigger",
 			label: e.buttonLabel,
@@ -696,7 +706,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			existingFiles: e.existingFiles,
 			removeFile: W,
 			removeExistingFile: K
-		}, () => [u("ul", Te, [(y(!0), l(a, null, x(e.existingFiles, (t) => (y(), l("li", {
+		}, () => [u("ul", we, [(y(!0), l(a, null, x(e.existingFiles, (t) => (y(), l("li", {
 			key: `existing-${t.id}`,
 			class: "rvc-file-upload-item"
 		}, [
@@ -705,19 +715,19 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				class: "rvc-file-upload-thumbnail",
 				src: R(t),
 				alt: t.name
-			}, null, 8, Ee)) : c("", !0),
+			}, null, 8, Te)) : c("", !0),
 			t.url ? (y(), l("a", {
 				key: 1,
 				class: "rvc-file-upload-file",
 				href: t.url
-			}, w(t.name), 9, De)) : (y(), l("span", Oe, w(t.name), 1)),
+			}, w(t.name), 9, Ee)) : (y(), l("span", De, w(t.name), 1)),
 			u("button", {
 				class: "rvc-file-upload-remove",
 				type: "button",
 				disabled: e.disabled,
 				"aria-label": `Remove ${t.name}`,
 				onClick: (e) => K(t)
-			}, [f(T(G), { "aria-hidden": "true" })], 8, $)
+			}, [f(T(G), { "aria-hidden": "true" })], 8, Oe)
 		]))), 128)), (y(!0), l(a, null, x(k.value, (t, n) => (y(), l("li", {
 			key: `${t.name}-${t.lastModified}-${n}`,
 			class: "rvc-file-upload-item"
@@ -727,18 +737,18 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				class: "rvc-file-upload-thumbnail",
 				src: _.value.get(t),
 				alt: t.name
-			}, null, 8, ke)) : c("", !0),
-			u("span", Ae, w(t.name), 1),
+			}, null, 8, $)) : c("", !0),
+			u("span", ke, w(t.name), 1),
 			u("button", {
 				class: "rvc-file-upload-remove",
 				type: "button",
 				disabled: e.disabled,
 				"aria-label": `Remove ${t.name}`,
 				onClick: (e) => W(n)
-			}, [f(T(G), { "aria-hidden": "true" })], 8, je)
+			}, [f(T(G), { "aria-hidden": "true" })], 8, Ae)
 		]))), 128))])]) : c("", !0)], 2));
 	}
-}), Ne = /* @__PURE__ */ p({
+}), Me = /* @__PURE__ */ p({
 	__name: "FormTextarea",
 	props: {
 		modelValue: { default: void 0 },
@@ -763,7 +773,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			class: g(u.value)
 		}, null, 2));
 	}
-}), Pe = { class: "rvc-radio-input" }, Fe = { class: "rvc-radio-label" }, Ie = /* @__PURE__ */ p({
+}), Ne = { class: "rvc-radio-input" }, Pe = { class: "rvc-radio-label" }, Fe = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "Radio",
 	props: {
@@ -790,16 +800,16 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			...c,
 			type: "radio"
 		})), f = b(null);
-		return (t, n) => (y(), l("label", { class: g(["rvc-radio", e.rootClass]) }, [u("div", Pe, [T(s) ? j((y(), l("input", h({ key: 0 }, d.value, {
+		return (t, n) => (y(), l("label", { class: g(["rvc-radio", e.rootClass]) }, [u("div", Ne, [T(s) ? j((y(), l("input", h({ key: 0 }, d.value, {
 			ref_key: "input",
 			ref: f,
 			"onUpdate:modelValue": n[0] ||= (e) => a.value = e
 		}), null, 16)), [[D, a.value]]) : (y(), l("input", h({ key: 1 }, d.value, {
 			ref_key: "input",
 			ref: f
-		}), null, 16))]), S(t.$slots, "default", {}, () => [u("span", Fe, w(e.label), 1)])], 2));
+		}), null, 16))]), S(t.$slots, "default", {}, () => [u("span", Pe, w(e.label), 1)])], 2));
 	}
-}), Le = { class: "rvc-tabs-nav" }, Re = ["value", "selected"], ze = /* @__PURE__ */ p({
+}), Ie = { class: "rvc-tabs-nav" }, Le = ["value", "selected"], Re = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "Tabs",
 	props: {
@@ -827,7 +837,7 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 			let { active: t, as: n, bindAs: r, selectEvent: i, name: a, ...o } = e;
 			return o;
 		};
-		return (t, n) => (y(), l(a, null, [u("div", h(t.$attrs, { class: ["rvc-tabs", { "rvc-tabs-buttons": e.tabStyle === "buttons" }] }), [u("nav", Le, [(y(!0), l(a, null, x(e.tabs, (e, t) => (y(), s(C(e.as ? e.as : "button"), h({ ref_for: !0 }, m(e), {
+		return (t, n) => (y(), l(a, null, [u("div", h(t.$attrs, { class: ["rvc-tabs", { "rvc-tabs-buttons": e.tabStyle === "buttons" }] }), [u("nav", Ie, [(y(!0), l(a, null, x(e.tabs, (e, t) => (y(), s(C(e.as ? e.as : "button"), h({ ref_for: !0 }, m(e), {
 			key: `${t}-tab-item`,
 			as: e.bindAs ? e.bindAs : void 0,
 			class: ["rvc-tab", { "rvc-tab-active": c.value === t }],
@@ -848,10 +858,10 @@ var q = ["value", "disabled"], J = ["value", "disabled"], Y = /* @__PURE__ */ p(
 				key: `${t}-tab-item-select-option`,
 				value: t,
 				selected: c.value === t
-			}, w(e.name), 9, Re))), 128))]),
+			}, w(e.name), 9, Le))), 128))]),
 			_: 1
 		}, 16, ["value"])], 64));
 	}
 });
 //#endregion
-export { ye as a, Y as c, R as d, Me as i, U as l, Ie as n, _e as o, Ne as r, Q as s, ze as t, B as u };
+export { ve as a, Y as c, R as d, je as i, U as l, Fe as n, ge as o, Me as r, Q as s, Re as t, B as u };

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../_shared/core-D8wjjKnI.js";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../_shared/core-s0W4Pxm0.js";
 import { n as d } from "../_shared/ChevronDownIcon-Y_yqpwON.js";
 import { t as f } from "../_shared/ButtonBase-DyeIkb-l.js";
 import { t as p } from "../_shared/FormInput-k0vAk3VU.js";

package/dist/core/pagination.css

@@ -22,12 +22,13 @@
 @layer components {
   .rvc-pagination {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
-    justify-content: space-between;
 
     @media (width >= theme(--breakpoint-md)) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      &:not(.rvc-pagination-without-per-page) {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
     }
 
     .rvc-pagination-per-page {
@@ -67,6 +68,12 @@
 
       @media (width >= theme(--breakpoint-md)) {
         display: flex;
+        justify-content: flex-start;
+      }
+    }
+
+    &:not(.rvc-pagination-without-per-page) .rvc-pagination-info {
+      @media (width >= theme(--breakpoint-md)) {
         justify-content: center;
       }
     }

package/dist/index/index.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../_shared/core-D8wjjKnI.js";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../_shared/core-s0W4Pxm0.js";
 import { n as d } from "../_shared/ChevronDownIcon-Y_yqpwON.js";
 import { t as f } from "../_shared/ButtonBase-DyeIkb-l.js";
 import { t as p } from "../_shared/FormInput-k0vAk3VU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "type": "module",
   "publishConfig": {
     "access": "public"