origam 0.3.9 → 2.2.1

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -8,85 +8,175 @@
 			role="navigation"
 			@keydown="handleKeydown"
 	>
-		<ul class="origam-pagination__list">
-			<template v-if="showFirstLastPage">
+		<span
+				v-if="withInfo"
+				class="origam-pagination__info"
+				data-cy="pagination-info"
+		>
+			<slot
+					name="info"
+					v-bind="{ start: infoStart, end: infoEnd, total: totalInt }"
+			>
+				{{ t(infoText, infoStart, infoEnd, totalInt) }}
+			</slot>
+		</span>
+
+		<template v-if="compact">
+			<ul class="origam-pagination__list origam-pagination__list--compact">
+				<template v-if="showFirstLastPage">
+					<li
+							key="first"
+							class="origam-pagination__first"
+					>
+						<slot
+								name="first"
+								v-bind="{...controls.first}"
+						>
+							<origam-btn v-bind="{...controls.first }"/>
+						</slot>
+					</li>
+				</template>
+
 				<li
-						key="first"
-						class="origam-pagination__first"
+						key="prev"
+						class="origam-pagination__prev"
 				>
 					<slot
-							name="first"
-							v-bind="{...controls.first}"
+							name="prev"
+							v-bind="{...controls.prev}"
 					>
-						<origam-btn v-bind="{...controls.first }"/>
+						<origam-btn v-bind="{...controls.prev }"/>
 					</slot>
 				</li>
-			</template>
 
-			<li
-					key="prev"
-					class="origam-pagination__prev"
-			>
-				<slot
-						name="prev"
-						v-bind="{...controls.prev}"
-				>
-					<origam-btn v-bind="{...controls.prev }"/>
-				</slot>
-			</li>
+				<li class="origam-pagination__compact-label">
+					<span>{{ t(pageText) }}</span>
+					<input
+							ref="compactInputRef"
+							:value="page"
+							:min="start"
+							:max="length"
+							:disabled="disabled"
+							type="number"
+							class="origam-pagination__compact-input"
+							aria-label="Page number"
+							data-cy="pagination-compact-input"
+							@change="handleCompactInput"
+							@keydown.enter.prevent="handleCompactInput"
+					/>
+					<span>{{ t(ofText) }}</span>
+					<span>{{ length }}</span>
+				</li>
 
-			<template
-					v-for="(item) in items"
-					:key="item.key"
-			>
 				<li
-						:class="{'origam-pagination__item--is-active': item.isActive}"
-						class="origam-pagination__item"
+						key="next"
+						class="origam-pagination__next"
 				>
-					<slot :name="`item-${item.key}`">
-						<slot name="item">
-							<origam-btn
-									:text="item.page.toString()"
-									v-bind="{ ...item.props }"
-							/>
+					<slot
+							name="next"
+							v-bind="{...controls.next}"
+					>
+						<origam-btn v-bind="{...controls.next }"/>
+					</slot>
+				</li>
+
+				<template v-if="showFirstLastPage">
+					<li
+							key="last"
+							class="origam-pagination__last"
+					>
+						<slot
+								name="last"
+								v-bind="{...controls.last}"
+						>
+							<origam-btn v-bind="{...controls.last }"/>
+						</slot>
+					</li>
+				</template>
+			</ul>
+		</template>
+
+		<template v-else>
+			<ul class="origam-pagination__list">
+				<template v-if="showFirstLastPage">
+					<li
+							key="first"
+							class="origam-pagination__first"
+					>
+						<slot
+								name="first"
+								v-bind="{...controls.first}"
+						>
+							<origam-btn v-bind="{...controls.first }"/>
 						</slot>
+					</li>
+				</template>
+
+				<li
+						key="prev"
+						class="origam-pagination__prev"
+				>
+					<slot
+							name="prev"
+							v-bind="{...controls.prev}"
+					>
+						<origam-btn v-bind="{...controls.prev }"/>
 					</slot>
 				</li>
-			</template>
 
-			<li
-					key="next"
-					class="origam-pagination__next"
-			>
-				<slot
-						name="next"
-						v-bind="{...controls.next}"
+				<template
+						v-for="(item) in items"
+						:key="item.key"
 				>
-					<origam-btn v-bind="{...controls.next }"/>
-				</slot>
-			</li>
+					<li
+							:class="{'origam-pagination__item--is-active': item.isActive}"
+							class="origam-pagination__item"
+					>
+						<slot :name="`item-${item.key}`">
+							<slot name="item">
+								<origam-btn
+										:text="item.page.toString()"
+										v-bind="{ ...item.props }"
+								/>
+							</slot>
+						</slot>
+					</li>
+				</template>
 
-			<template v-if="showFirstLastPage">
 				<li
-						key="last"
-						class="origam-pagination__last"
+						key="next"
+						class="origam-pagination__next"
 				>
 					<slot
-							name="last"
-							v-bind="{...controls.last}"
+							name="next"
+							v-bind="{...controls.next}"
 					>
-						<origam-btn v-bind="{...controls.last }"/>
+						<origam-btn v-bind="{...controls.next }"/>
 					</slot>
 				</li>
-			</template>
-		</ul>
+
+				<template v-if="showFirstLastPage">
+					<li
+							key="last"
+							class="origam-pagination__last"
+					>
+						<slot
+								name="last"
+								v-bind="{...controls.last}"
+						>
+							<origam-btn v-bind="{...controls.last }"/>
+						</slot>
+					</li>
+				</template>
+			</ul>
+		</template>
 	</component>
 </template>
 
 <script setup>
-import { ComponentPublicInstance, computed, nextTick, shallowRef, StyleValue } from "vue";
+import { ComponentPublicInstance, computed, nextTick, ref, shallowRef, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
-import { useDisplay, useLocale, useProps, useRefs, useResizeObserver, useVModel } from "../../composables";
+import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useVModel, useStyle } from "../../composables";
 import { KEYBOARD_VALUES, MDI_ICONS } from "../../enums";
 import { createRange, int } from "../../utils";
 const props = defineProps({
@@ -108,16 +198,21 @@ const props = defineProps({
   lastAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.last" },
   ellipsis: { type: String, required: false, default: "..." },
   showFirstLastPage: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false, default: false },
+  pageText: { type: String, required: false, default: "origam.pagination.page" },
+  ofText: { type: String, required: false, default: "origam.pagination.of" },
+  withInfo: { type: Boolean, required: false, default: false },
+  total: { type: [Number, String], required: false },
+  perPage: { type: [Number, String], required: false, default: 10 },
+  infoText: { type: String, required: false, default: "origam.pagination.info" },
+  previousText: { type: String, required: false },
+  nextText: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -141,7 +236,9 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  density: { type: null, required: false }
 });
 const emits = defineEmits([
   "update:modelValue",
@@ -182,6 +279,9 @@ const totalVisible = computed(() => {
 });
 const range = computed(() => {
   if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
+  if (props.withInfo) {
+    return [page.value];
+  }
   if (totalVisible.value <= 0) return [];
   else if (totalVisible.value === 1) return [page.value];
   if (length.value <= totalVisible.value) {
@@ -203,16 +303,43 @@ const range = computed(() => {
     return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
   }
 });
+const sharedBtnColorProps = computed(() => {
+  const baseBg = props.bgColor || props.color;
+  return {
+    color: props.color,
+    bgColor: baseBg,
+    hoverColor: props.hoverColor,
+    hoverBgColor: props.hoverBgColor,
+    activeColor: props.activeColor,
+    activeBgColor: props.activeBgColor,
+    // Size / density flow through to every nav btn so the whole row
+    // scales consistently — matches the PDF spec which shows the
+    // pagination at sm / default / lg sizes (no per-btn override).
+    size: props.size,
+    density: props.density
+  };
+});
+const controlColorProps = sharedBtnColorProps;
 const items = computed(() => {
   return range.value.map((item, index) => {
-    const ref = (e) => updateRef(e, index);
+    const ref2 = (e) => updateRef(e, index);
     if (typeof item === "string") {
       return {
         isActive: false,
         key: `ellipsis-${index}`,
         page: item,
         props: {
-          ref,
+          ref: ref2,
+          // Same six IColorProps as the rest of the row —
+          // even though the ellipsis is non-clickable
+          // (`disabled: true`), it must read as visually
+          // part of the same nav row, just dimmed by the
+          // Btn's --disabled veil. Pre-fix it rendered
+          // in the default neutral grey while the
+          // surrounding btns took the consumer's bgColor,
+          // breaking the user's "tous les btn ensemble"
+          // expectation.
+          ...sharedBtnColorProps.value,
           ellipsis: true,
           icon: true,
           disabled: true
@@ -225,11 +352,32 @@ const items = computed(() => {
         key: item,
         page: item,
         props: {
-          ref,
+          ref: ref2,
+          ...sharedBtnColorProps.value,
           ellipsis: false,
+          // `icon: true` keeps the btn in icon-mode so its
+          // width clamps to its height — a 36×36 square at
+          // the default size. The pagination SCSS override
+          // re-sets the corner radius from the btn's
+          // default 50% to 8px, producing the rounded-SQUARE
+          // shape the PDF prescribes (NOT a full circle).
+          // Inactive page btns paint a transparent surface
+          // via the `&:not(&--colored) .origam-btn:not(--active)`
+          // rule below, so they read as plain numbers; only
+          // the active page paints the intent-coloured fill.
           icon: true,
           disabled: !!props.disabled || +props.length < 2,
-          color: isActive ? props.activeColor : props.color,
+          // `active: true` lets the inner `<origam-btn>`
+          // add its own --active overlay so the current
+          // page reads as selected — without forcing the
+          // non-active items into a different shape. All
+          // six IColorProps fields are forwarded
+          // uniformly via `sharedBtnColorProps` (above),
+          // so a `color` / `bgColor` change on the
+          // pagination updates EVERY btn at once — the
+          // behaviour the user expects from a uniform row
+          // of nav buttons.
+          active: isActive,
           "aria-current": isActive,
           "aria-label": t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
           onClick: (e) => setValue(e, item)
@@ -241,8 +389,23 @@ const items = computed(() => {
 const controls = computed(() => {
   const prevDisabled = !!props.disabled || page.value <= start.value;
   const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
+  const prevTextual = props.withInfo ? {
+    text: t(props.previousText ?? "origam.pagination.previous"),
+    prependIcon: props.prevIcon,
+    icon: false
+  } : {
+    icon: props.prevIcon
+  };
+  const nextTextual = props.withInfo ? {
+    text: t(props.nextText ?? "origam.pagination.next"),
+    appendIcon: props.nextIcon,
+    icon: false
+  } : {
+    icon: props.nextIcon
+  };
   return {
     first: {
+      ...controlColorProps.value,
       icon: props.firstIcon,
       onClick: (e) => setValue(e, start.value, "first"),
       disabled: prevDisabled,
@@ -250,20 +413,23 @@ const controls = computed(() => {
       "aria-disabled": prevDisabled
     },
     prev: {
-      icon: props.prevIcon,
+      ...controlColorProps.value,
+      ...prevTextual,
       onClick: (e) => setValue(e, page.value - 1, "prev"),
       disabled: prevDisabled,
       "aria-label": props.previousAriaLabel,
       "aria-disabled": prevDisabled
     },
     next: {
-      icon: props.nextIcon,
+      ...controlColorProps.value,
+      ...nextTextual,
       onClick: (e) => setValue(e, page.value + 1, "next"),
       disabled: nextDisabled,
       "aria-label": props.nextAriaLabel,
       "aria-disabled": nextDisabled
     },
     last: {
+      ...controlColorProps.value,
       icon: props.lastIcon,
       onClick: (e) => setValue(e, start.value + length.value - 1, "last"),
       disabled: nextDisabled,
@@ -299,9 +465,43 @@ const handleKeydown = (e) => {
     nextTick(updateFocus);
   }
 };
+const compactInputRef = ref(null);
+const handleCompactInput = (e) => {
+  const input = e.target;
+  const raw = parseInt(input.value, 10);
+  const clamped = isNaN(raw) ? start.value : Math.min(Math.max(raw, start.value), length.value);
+  input.value = String(clamped);
+  page.value = clamped;
+};
+const perPageInt = computed(() => {
+  const v = int(props.perPage);
+  return Number.isFinite(v) && v > 0 ? v : 10;
+});
+const totalInt = computed(() => {
+  if (props.total != null) return int(props.total);
+  return length.value * perPageInt.value;
+});
+const infoStart = computed(() => {
+  if (totalInt.value <= 0) return 0;
+  return (page.value - start.value) * perPageInt.value + 1;
+});
+const infoEnd = computed(() => {
+  if (totalInt.value <= 0) return 0;
+  return Math.min(infoStart.value + perPageInt.value - 1, totalInt.value);
+});
+const isColored = computed(() => !!(props.color || props.bgColor));
+const { sizeClasses } = useSize(props);
+const { densityClasses } = useDensity(props);
 const paginationClasses = computed(() => {
   return [
     "origam-pagination",
+    {
+      "origam-pagination--colored": isColored.value,
+      "origam-pagination--compact": !!props.compact,
+      "origam-pagination--with-info": !!props.withInfo
+    },
+    sizeClasses.value,
+    densityClasses.value,
     props.class
   ];
 });
@@ -310,53 +510,205 @@ const paginationStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(paginationStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-pagination {
+		// ── Unified color logic ────────────────────────────────────
+		//
+		// Single derivation rule, identical to what every component
+		// in the design system should do (cf. ADR on color logic):
+		//
+		//     normal  →  bgColor
+		//     hover   →  color-mix(bgColor, black 20 %)   ← derived
+		//     active  →  color-mix(bgColor, black 30 %)   ← derived
+		//
+		// Consumers can short-circuit any state by setting the
+		// matching CSS var (the JS-level `activeBgColor` /
+		// `hoverBgColor` props funnel into these vars upstream).
+		//
+		//   --origam-pagination---background-color           (normal)
+		//   --origam-pagination---background-color-hover     (hover  override)
+		//   --origam-pagination__item--is-active---background-color
+		//                                                    (active override)
+		//
+		// `--colored` just repoints the base bg to the intent
+		// token (and the paired fg) — every state cascades from it
+		// automatically, so we no longer maintain two branches.
+		//
+		// IMPORTANT: these CSS-custom-property declarations live BEFORE
+		// the nested rules below. Modern Sass (and the future CSS spec)
+		// will hoist nested rules above bare declarations, so keeping
+		// the order is "declarations → nested rules" prevents the
+		// `mixed-decls` deprecation warning.
+		--bg-base: var(--origam-pagination---background-color, transparent);
+		--fg-base: var(--origam-pagination---color, currentColor);
+
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: var(--origam-pagination---gap-info, 16px);
+		padding-block: var(--origam-pagination---padding-block, 0);
+		padding-inline: var(--origam-pagination---padding-inline, 0);
+
+		&--with-info {
+			justify-content: space-between;
+		}
+
+		&__info {
+			display: inline-flex;
+			align-items: center;
+			color: var(--origam-pagination--info---color, currentColor);
+			font-size: var(--origam-pagination--info---font-size, 0.75rem);
+			font-weight: var(--origam-pagination--info---font-weight, 400);
+			white-space: nowrap;
+		}
 
 		&__list {
 			display: inline-flex;
 			list-style-type: none;
 			justify-content: center;
-			width: 100%;
+			margin: 0;
+			padding: 0;
 		}
 
-		&__item {
-			&--is-active {
-				:deep(.origam-btn__overlay) {
-					opacity: var(--origam-pagination__item--is-active---border-opacity)
-				}
+		&--colored {
+			--bg-base: var(
+				--origam-pagination---background-color-colored,
+				var(--origam-color__action--primary---bg)
+			);
+			--fg-base: var(
+				--origam-pagination---color-colored,
+				var(--origam-color__action--primary---fg)
+			);
+
+			:deep(.origam-btn) {
+				box-shadow: var(--origam-pagination--primary---box-shadow, none);
 			}
 		}
 
+		// Normal state — every non-hover, non-active btn paints --bg-base.
+		:deep(.origam-btn:not(:hover):not(.origam-btn--active)) {
+			--origam-btn---background-color: var(--bg-base);
+			--origam-btn---color: var(--fg-base);
+		}
+
+		// Hover state — derived: 20 % darker than --bg-base.
+		// Consumer can override via --origam-pagination---background-color-hover.
+		:deep(.origam-btn:hover:not(.origam-btn--active)) {
+			--origam-btn---background-color: var(
+				--origam-pagination---background-color-hover,
+				color-mix(in srgb, var(--bg-base), black 20%)
+			);
+			--origam-btn---color: var(--origam-pagination---color-hover, var(--fg-base));
+		}
+
+		// Active state — derived: 30 % darker than --bg-base.
+		// Consumer can override via the matching `is-active` vars.
+		&__item--is-active :deep(.origam-btn) {
+			--origam-btn---background-color: var(
+				--origam-pagination__item--is-active---background-color,
+				color-mix(in srgb, var(--bg-base), black 30%)
+			);
+			--origam-btn---color: var(
+				--origam-pagination__item--is-active---color,
+				var(--fg-base)
+			);
+			--origam-btn---border-color: var(
+				--origam-pagination__item--is-active---border-color,
+				transparent
+			);
+		}
+
+		&__item--is-active :deep(.origam-btn__overlay) {
+			// Legacy overlay collapsed — solid fill carries the contrast.
+			opacity: var(--origam-pagination__item--is-active---active-overlay-opacity, 0);
+		}
+
 		&__item,
 		&__first,
 		&__prev,
 		&__next,
 		&__last {
-			margin: .3rem;
+			margin: var(--origam-pagination---gap, 4px);
 		}
 
+		// All pagination buttons (numbered pages + prev / next chevrons
+		// + ellipsis) share a single rounded-square shape (PDF spec:
+		// active "2" rendered as an ~8px-radius purple square, NOT a
+		// circle). The earlier `--icon` override forced 9999px on every
+		// btn that received `icon: true|"mdi-…"` — producing the round
+		// page numbers + round chevrons the user reported as a mismatch
+		// against the print mockups.
 		:deep(.origam-btn) {
-			border-radius: 4px;
+			border-radius: var(--origam-pagination---border-radius, 8px);
 		}
 
 		:deep(.origam-btn--rounded) {
-			border-radius: 50%;
+			border-radius: var(--origam-pagination---border-radius-rounded, 24px);
+		}
+
+		// Explicitly override the `--icon` btn's default 50% radius back
+		// to the pagination shape. Without this the inner OrigamBtn's
+		// own `&--icon { border-radius: 50% }` (set inside the btn's
+		// scoped styles) wins, restoring the circular pages.
+		:deep(.origam-btn--icon) {
+			--origam-btn---border-radius: var(--origam-pagination---border-radius, 8px);
+			--origam-btn---border-radius-icon: var(--origam-pagination---border-radius, 8px);
+			border-radius: var(--origam-pagination---border-radius, 8px);
 		}
 
 		:deep(.origam-btn__overlay) {
 			transition: none;
 		}
-	}
-</style>
 
-<style>
-	:root {
-		--origam-pagination__item--is-active---border-opacity: 0.12;
+		&__list--compact {
+			flex-wrap: nowrap;
+			align-items: center;
+			width: auto;
+		}
+
+		&__compact-label {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--origam-pagination---label-gap, 8px);
+			list-style: none;
+			margin: var(--origam-pagination---gap, 4px);
+			white-space: nowrap;
+		}
+
+		&__compact-input {
+			display: inline-block;
+			width: var(--origam-pagination---input-width, 3em);
+			padding-inline: var(--origam-pagination---input-padding-inline, 4px);
+			text-align: center;
+			border: 1px solid currentColor;
+			border-radius: var(--origam-pagination---border-radius, 4px);
+			font: inherit;
+			line-height: 1.5;
+
+			appearance: textfield;
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				appearance: none;
+				margin: 0;
+			}
+
+			&:focus-visible {
+				outline: 2px solid currentColor;
+				outline-offset: 2px;
+			}
+		}
 	}
 </style>