@bagelink/vue 1.15.65 → 1.15.71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.65",
+  "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/components/charts/ChartTooltip.vue

@@ -7,11 +7,15 @@
  * Positioned by the host via `style` (absolute left/top); the host owns
  * mouse tracking. Non-interactive (pointer-events: none).
  */
+import { useI18n } from '@bagelink/vue'
+
 export interface TipRow { name: string; color?: string; value: string }
 export interface TipStat { label: string; value: string }
 
 defineOptions({ name: 'BglChartTooltip' })
 
+const { $t } = useI18n()
+
 withDefaults(defineProps<{
 	label?: string
 	/** Big focal number (used by single-value charts like the funnel). */
@@ -39,7 +43,7 @@ withDefaults(defineProps<{
 		</p>
 
 		<p v-if="total" class="bgl-tip__row bgl-tip__total flex align-items-center m-0">
-			<span class="bgl-tip__name">Total</span>
+			<span class="bgl-tip__name">{{ $t('charts.total') }}</span>
 			<span class="bgl-tip__val tabular-nums">{{ total }}</span>
 		</p>
 

package/src/components/charts/Donut.vue

@@ -10,6 +10,7 @@
  *   <Donut :data="segments" :legend-value="false" />    // legend shows only %
  */
 import { computed, ref } from 'vue'
+import { useI18n } from '@bagelink/vue'
 import { ramp, resolveColor } from './core/palette'
 import { formatValue, type ValueFormat } from './core/format'
 import { useChartAnim } from './core/useChartAnim'
@@ -63,6 +64,7 @@ const props = withDefaults(defineProps<{
 	animated: true,
 })
 
+const { $t } = useI18n()
 const el = ref<HTMLElement>()
 const { progress } = useChartAnim({ el, enabled: props.animated, duration: 800 })
 
@@ -153,7 +155,7 @@ function onMove(e: MouseEvent) {
 }
 const hoverArc = computed(() => (hoverIdx.value == null ? null : arcs.value[hoverIdx.value]))
 const hoverValue = computed(() => (hoverArc.value ? fmtValue(hoverArc.value.value) : ''))
-const hoverStats = computed(() => (hoverArc.value ? [{ label: 'Share', value: `${hoverArc.value.pct.toFixed(0)}%` }] : []))
+const hoverStats = computed(() => (hoverArc.value ? [{ label: $t('charts.share'), value: `${hoverArc.value.pct.toFixed(0)}%` }] : []))
 const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.value}px` }))
 </script>
 

package/src/components/layout/SidebarNavItem.vue

@@ -92,7 +92,7 @@ function onParentClick() {
 		>
 			<Icon :name="link.icon" size="1.2" />
 			<span class="nav-text flex-grow">{{ resolveI18n(link.label) }}</span>
-			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron" :class="{ 'sidebar-chevron-open': expanded }" />
+			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron line-height-1" :class="{ 'sidebar-chevron-open': expanded }" />
 		</Btn>
 		<div class="sidebar-children" :class="{ 'sidebar-children-open': expanded }">
 			<div class="sidebar-children-inner ps-1">

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",
@@ -491,5 +492,9 @@
     "office365": "Office 365",
     "yahoo": "Yahoo Calendar",
     "ics": "Calendar (ICS file)"
+  },
+  "charts": {
+    "total": "Total",
+    "share": "Share"
   }
 }

package/src/i18n/locales/he.json

@@ -17,7 +17,8 @@
   "pagination": {
     "of": "מתוך",
     "prev": "הקודם",
-    "next": "הבא"
+    "next": "הבא",
+    "perPage": "פריטים לעמוד"
   },
   "form": {
     "required": "שדה זה נדרש",
@@ -512,5 +513,9 @@
     "office365": "Office 365",
     "yahoo": "יומן Yahoo",
     "ics": "יומן (קובץ ICS)"
+  },
+  "charts": {
+    "total": "סה״כ",
+    "share": "חלק"
   }
 }