@bagelink/vue 1.15.69 → 1.15.73

package/package.json

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

package/src/components/ListItem.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
 	defineProps<{
@@ -31,9 +33,8 @@ const props = withDefaults(
 		/** Visually mark as selected (for non-router selection lists). */
 		active?: boolean
 		/** Render as an interactive row (cursor + hover) without needing a handler.
-		    Implied when `to`, `href`, or `onClick` is set. */
+		    Implied when `to`, `href`, or a `@click` listener is set. */
 		clickable?: boolean
-		onClick?: () => void
 	}>(),
 	{
 		ellipsis: true,
@@ -41,9 +42,34 @@ const props = withDefaults(
 	}
 )
 
+const attrs = useAttrs()
+
+// Split inherited attrs: event listeners (onClick, onClickStop, …) belong on the
+// clickable element so handlers + modifiers like `.stop` fire on the actual
+// button/link row; everything else (class, style, data-*, …) stays on the root
+// wrapper to preserve existing behavior.
+const listenerAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+const rootAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (!/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+
 const hasTo = computed(() => props.to !== undefined && props.to !== '')
 const hasHref = computed(() => props.href !== undefined && props.href !== '')
-const isClickable = computed(() => hasTo.value || hasHref.value || props.onClick !== undefined || props.clickable === true)
+// A `@click` listener (with or without modifiers like `.stop`) shows up in
+// $attrs as `onClick` / `onClickStop` / etc — detect any of them so a clickable
+// row is recognized even when the handler uses modifiers.
+const hasClickListener = computed(() => Object.keys(attrs).some(k => /^onClick/i.test(k)))
+const isClickable = computed(() => hasTo.value || hasHref.value || hasClickListener.value || props.clickable === true)
 
 const isComponent = computed(() => {
 	if (hasTo.value) { return 'router-link' }
@@ -53,7 +79,10 @@ const isComponent = computed(() => {
 })
 
 const bind = computed(() => {
-	const obj: { [key: string]: any } = {}
+	// Spread the inherited event listeners (including `@click`/`@click.stop`) onto
+	// the clickable element itself, so the handler fires on the actual button/link
+	// row — not the outer wrapper — and modifiers like `.stop` keep working.
+	const obj: { [key: string]: any } = { ...listenerAttrs.value }
 	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
 	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
 	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
@@ -69,6 +98,7 @@ const bind = computed(() => {
 
 <template>
 	<div
+		v-bind="rootAttrs"
 		class="flex space-between list-item-row"
 		:class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
@@ -86,7 +116,7 @@ const bind = computed(() => {
 				'py-05': props.thin,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
-			}" @click="typeof onClick === 'function' && onClick()"
+			}"
 		>
 			<!-- Leading visual INSIDE the clickable area. Use #media for custom art
 			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->

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": "שדה זה נדרש",