@bagelink/vue 1.15.69 → 1.15.71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.69",
+  "version": "1.15.71",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Pagination.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { Btn } from '@bagelink/vue'
+import type { Option } from '@bagelink/vue'
+import { Btn, SelectInput, useI18n } from '@bagelink/vue'
 import { computed, ref, watch, nextTick } from 'vue'
+import { getOptionValue } from '../utils/options'
 
 interface Range {
 	start: number
@@ -9,25 +11,38 @@ interface Range {
 
 interface PaginationProps {
 	totalItems: number
-	perPage?: number
 	totalPages?: number
 	variant?: 'default' | 'simple'
 	rtl?: boolean
 	maxVisiblePages?: number
+	/** When set, renders a "per page" selector with these choices. */
+	perPageOptions?: number[]
 }
 
 const props = withDefaults(defineProps<PaginationProps>(), {
 	totalItems: 0,
-	perPage: 25,
 	totalPages: undefined,
 	variant: 'default',
 	rtl: false,
-	maxVisiblePages: 3
+	maxVisiblePages: 3,
+	perPageOptions: undefined,
 })
 
+const { $t } = useI18n()
+
 const page = defineModel<number>('page', { default: 1 })
+const perPage = defineModel<number>('perPage', { default: 25 })
 const range = defineModel<Range>('range')
 
+// Update how many items show per page, then jump back to the first page.
+function onPerPageChange(opt: Option | Option[] | undefined) {
+	const v = Number(getOptionValue(Array.isArray(opt) ? opt[0] : opt))
+	if (!Number.isNaN(v) && v > 0) {
+		perPage.value = v
+		page.value = 1
+	}
+}
+
 const paginationContainer = ref<HTMLElement>()
 const indicatorPosition = ref(0)
 const indicatorWidth = ref(0)
@@ -35,18 +50,16 @@ const indicatorWidth = ref(0)
 // Calculate totalPages from totalItems and perPage if not provided directly
 const computedTotalPages = computed(() => {
 	if (props.totalPages !== undefined) { return props.totalPages }
-	const { perPage } = props
-	return Math.max(1, Math.ceil(props.totalItems / perPage))
+	return Math.max(1, Math.ceil(props.totalItems / perPage.value))
 })
 
 watch(
-	[() => page.value, () => props.perPage, () => props.totalItems],
+	[() => page.value, () => perPage.value, () => props.totalItems],
 	() => {
 		if (range.value) {
-			const { perPage } = props
 			// Calculate zero-based indices
-			const start = (page.value - 1) * perPage
-			const end = Math.min(start + perPage - 1, props.totalItems - 1)
+			const start = (page.value - 1) * perPage.value
+			const end = Math.min(start + perPage.value - 1, props.totalItems - 1)
 			range.value = { start, end }
 		}
 		// Update indicator position when page changes
@@ -187,41 +200,52 @@ const renderPageButtons = computed(() => {
 </script>
 
 <template>
-	<div v-if="computedTotalPages > 1" ref="paginationContainer" class="relative flex gap-1 justify-content">
-		<!-- Default pagination with page numbers -->
-		<template v-if="variant !== 'simple'">
-			<div
-				class="indicator radius-1"
-				:style="{
-					[rtl ? 'right' : 'left']: `${indicatorPosition}px`,
-					width: `${indicatorWidth}px`,
-				}"
+	<div v-if="computedTotalPages > 1 || perPageOptions" class="flex gap-1 align-items-center justify-content-between">
+		<!-- Per-page selector -->
+		<label v-if="perPageOptions" class="flex gap-05 align-items-center txt14 nowrap">
+			<span class="color-gray">{{ $t('pagination.perPage') }}</span>
+			<SelectInput
+				thin border :options="perPageOptions" :model-value="perPage"
+				@update:model-value="onPerPageChange"
 			/>
-			<!-- Render the page buttons and ellipses in order -->
-			<template v-for="item in renderPageButtons" :key="item.key">
-				<!-- Page button -->
-				<Btn
-					v-if="item.type === 'page'" flat thin
-					:class="{ selected: item.number === page }"
-					:value="item.number ? item.number.toString() : ''"
-					@click="item.number ? handleClick(item.number) : null"
+		</label>
+
+		<div v-if="computedTotalPages > 1" ref="paginationContainer" class="relative flex gap-1 justify-content">
+			<!-- Default pagination with page numbers -->
+			<template v-if="variant !== 'simple'">
+				<div
+					class="indicator radius-1"
+					:style="{
+						[rtl ? 'right' : 'left']: `${indicatorPosition}px`,
+						width: `${indicatorWidth}px`,
+					}"
 				/>
+				<!-- Render the page buttons and ellipses in order -->
+				<template v-for="item in renderPageButtons" :key="item.key">
+					<!-- Page button -->
+					<Btn
+						v-if="item.type === 'page'" flat thin
+						:class="{ selected: item.number === page }"
+						:value="item.number ? item.number.toString() : ''"
+						@click="item.number ? handleClick(item.number) : null"
+					/>
+
+					<!-- Ellipsis -->
+					<div v-else-if="item.type === 'ellipsis'" class="pagination-ellipsis">
+						...
+					</div>
+				</template>
+			</template>
 
-				<!-- Ellipsis -->
-				<div v-else-if="item.type === 'ellipsis'" class="pagination-ellipsis">
-					...
-				</div>
+			<!-- Simple pagination with prev/next buttons -->
+			<template v-else>
+				<Btn flat thin :disabled="page <= 1" icon="chevron_left" @click="prev" />
+				<span class="pagination-info">
+					{{ displayIndex(range?.start) }}-{{ displayIndex(range?.end) }} / {{ props.totalItems }}
+				</span>
+				<Btn flat thin :disabled="page >= computedTotalPages" icon="chevron_right" @click="next" />
 			</template>
-		</template>
-
-		<!-- Simple pagination with prev/next buttons -->
-		<template v-else>
-			<Btn flat thin :disabled="page <= 1" icon="chevron_left" @click="prev" />
-			<span class="pagination-info">
-				{{ displayIndex(range?.start) }}-{{ displayIndex(range?.end) }} / {{ props.totalItems }}
-			</span>
-			<Btn flat thin :disabled="page >= computedTotalPages" icon="chevron_right" @click="next" />
-		</template>
+		</div>
 	</div>
 </template>
 

package/src/i18n/locales/en.json

@@ -17,7 +17,8 @@
   "pagination": {
     "of": "of",
     "prev": "Previous",
-    "next": "Next"
+    "next": "Next",
+    "perPage": "Per page"
   },
   "form": {
     "required": "This field is required",

package/src/i18n/locales/he.json

@@ -17,7 +17,8 @@
   "pagination": {
     "of": "מתוך",
     "prev": "הקודם",
-    "next": "הבא"
+    "next": "הבא",
+    "perPage": "פריטים לעמוד"
   },
   "form": {
     "required": "שדה זה נדרש",