@bagelink/vue 1.2.89 → 1.2.97

package/dist/style.css

@@ -2549,7 +2549,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 .bgl-toggle input:checked + label[data-v-c5e45931] {
     color: var(--bgl-primary) !important;
 }
-.fileUploadWrap[data-v-d8f3ff01] {
+.fileUploadWrap[data-v-38a4d4a9] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -2561,7 +2561,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-d8f3ff01] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-38a4d4a9] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -2569,14 +2569,14 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-d8f3ff01],
-.fileUploadWrap[data-v-d8f3ff01]:hover {
+.fileUploadWrap.dragover[data-v-38a4d4a9],
+.fileUploadWrap[data-v-38a4d4a9]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*='height: auto;'][data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto;'][data-v-38a4d4a9] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-d8f3ff01] {
+.multi-image-item-preview[data-v-38a4d4a9] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -2590,12 +2590,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-d8f3ff01] {
+.multi-image-item-preview p[data-v-38a4d4a9] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-d8f3ff01] {
+.multi-preview[data-v-38a4d4a9] {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -2606,17 +2606,17 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-d8f3ff01] {
+.bgl-single-preview[data-v-38a4d4a9] {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-d8f3ff01] {
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-38a4d4a9] {
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-d8f3ff01] {
+.single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -2624,13 +2624,13 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-38a4d4a9] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*='height: auto'] .single-preview[data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto'] .single-preview[data-v-38a4d4a9] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-d8f3ff01] {
+.single-preview[data-v-38a4d4a9] {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -2640,7 +2640,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	background: var(--bgl-gray-light);
 	width: 90%;
 }
-.single-image-item-preview[data-v-d8f3ff01]:hover::after {
+.single-image-item-preview[data-v-38a4d4a9]:hover::after {
 	content: 'zoom_in';
 	font-size: 32px;
 	font-family: 'Material Symbols Outlined', serif;
@@ -2650,20 +2650,20 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-d8f3ff01] {
+.single-image-item-preview:hover img[data-v-38a4d4a9] {
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-d8f3ff01] {
+.bgl_fill-image.single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-d8f3ff01] {
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-38a4d4a9] {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-d8f3ff01] {
+.single-image-item-preview .pie[data-v-38a4d4a9] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -2677,31 +2677,31 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-d8f3ff01] {
+.bgl_oval-upload[data-v-38a4d4a9] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-d8f3ff01] {
+.bgl_oval-upload p[data-v-38a4d4a9] {
 	padding: 0.75rem !important;
 	font-size: 12px;
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-d8f3ff01] {
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-38a4d4a9] {
 	top: 0;
 }
-.bgl_oval-upload .pie[data-v-d8f3ff01] {
+.bgl_oval-upload .pie[data-v-38a4d4a9] {
 	transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d8f3ff01] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-38a4d4a9] {
 	transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-d8f3ff01] {
+.bgl_oval-upload .single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-d8f3ff01] {
+.bgl_oval-upload .single-preview[data-v-38a4d4a9] {
 	margin: 0;
 	height: 100% !important;
 }
-.pie[data-v-d8f3ff01] {
+.pie[data-v-38a4d4a9] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2709,7 +2709,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-d8f3ff01]:before {
+.pie[data-v-38a4d4a9]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2727,26 +2727,26 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-d8f3ff01] {
+.pie .success[data-v-38a4d4a9] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-d8f3ff01] {
+.pie .progress[data-v-38a4d4a9] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-d8f3ff01] {
+.pie.complete .progress[data-v-38a4d4a9] {
 	display: none;
 }
-.pie.complete .success[data-v-d8f3ff01] {
+.pie.complete .success[data-v-38a4d4a9] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-d8f3ff01]:before {
+.pie.complete[data-v-38a4d4a9]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-d8f3ff01] {
+.pie.complete[data-v-38a4d4a9] {
 	color: var(--bgl-green);
 }
 
@@ -4368,25 +4368,46 @@ body:has(.bg-dark.is-active) {
 }
 }
 
-.bgl_pill-btn[data-v-764b6b8b]{
+.indicator[data-v-0443aea2] {
+	position: absolute;
+	height: 30px;
+	background-color: var(--bgl-primary);
+	transition: all 0.3s ease;
+	z-index: -1;
+}
+.selected[data-v-0443aea2] {
+	color: white !important;
+}
+.pagination-info[data-v-0443aea2] {
+	min-width: 60px;
+	text-align: center;
+	font-size: 14px;
+}
+.pagination-ellipsis[data-v-0443aea2] {
+	display: flex;
+	align-items: center;
+	padding: 0 4px;
+}
+
+.bgl_pill-btn[data-v-ae730ec5]{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
 	width: calc(var(--pill-height) / 1.25)!important;
 	height: calc(var(--pill-height) / 1.25)!important;
 }
-.loading[data-v-764b6b8b] {
+.loading[data-v-ae730ec5] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-764b6b8b 1s linear infinite;
+  animation: spin-ae730ec5 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-764b6b8b] {
+.bgl_flatPill .loading[data-v-ae730ec5] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-764b6b8b {
+@keyframes spin-ae730ec5 {
 0% {
     transform: rotate(0deg);
 }
@@ -4394,11 +4415,11 @@ body:has(.bg-dark.is-active) {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-764b6b8b] {
+.bgl_pill[data-v-ae730ec5] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--dbb738e2);
-  color: var(--418961aa);
+  background-color: var(--09d70b6a);
+  color: var(--69df9534);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -4406,26 +4427,26 @@ body:has(.bg-dark.is-active) {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-764b6b8b] {
+.bgl_pill[disabled="true"][data-v-ae730ec5] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-764b6b8b] {
+.bgl_pill-flex[data-v-ae730ec5] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-764b6b8b] {
+.bgl_pill.bgl_flatPill[data-v-ae730ec5] {
   background: transparent;
 }
-.bgl_pill.round[data-v-764b6b8b] {
+.bgl_pill.round[data-v-ae730ec5] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-764b6b8b] {
-  outline: 1px solid var(--dbb738e2);
-  color: var(--dbb738e2);
+.bgl_pill-border[data-v-ae730ec5] {
+  outline: 1px solid var(--09d70b6a);
+  color: var(--09d70b6a);
   background: transparent;
 }
 
@@ -4620,22 +4641,22 @@ td[data-v-857ccb8b]:has(:checked){
   -moz-user-drag: none;
 }
 
-.bgl-lightbox[data-v-fb2d5763]:has(.bgl_vid) {
+.bgl-lightbox[data-v-4789af69]:has(.bgl_vid) {
 	width: 90vw;
 }
-.lightbox-image[data-v-fb2d5763]{
+.lightbox-image[data-v-4789af69]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-fb2d5763] {
+.bgl-lightbox-overlay[data-v-4789af69] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-fb2d5763] {
+.bgl-lightbox[data-v-4789af69] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-fb2d5763]{
-	animation: 500ms ease bgl-lightbox-load-fb2d5763;
+.bgl-lightbox-item[data-v-4789af69]{
+	animation: 500ms ease bgl-lightbox-load-4789af69;
 }
-@keyframes bgl-lightbox-load-fb2d5763 {
+@keyframes bgl-lightbox-load-4789af69 {
 from {
     scale:0.7;
 }
@@ -4643,44 +4664,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-fb2d5763] * {
+.bgl-lightbox-item[data-v-4789af69] * {
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-fb2d5763;
+	animation: 200ms ease bgl-lightbox-load-4789af69;
 	transition: max-height 200ms ease;
 }
-.bgl-lightbox-item.zoomed[data-v-fb2d5763] * {
+.bgl-lightbox-item.zoomed[data-v-4789af69] * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
-.navigation[data-v-fb2d5763] {
+.navigation[data-v-4789af69] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.thumbnail[data-v-fb2d5763] {
+.thumbnail[data-v-4789af69] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-fb2d5763]:hover {
+.thumbnail[data-v-4789af69]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-fb2d5763]:active {
+.thumbnail[data-v-4789af69]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-fb2d5763] {
+.thumbnail.active[data-v-4789af69] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-fb2d5763]{
+.file-info[data-v-4789af69]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-fb2d5763]{
+.file-info[data-v-4789af69]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-fb2d5763] *{
+.file-info[data-v-4789af69] *{
 	text-align: center !important;
 	margin-inline: 0 !important;
 	max-width: 100% !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.89",
+  "version": "1.2.97",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Pagination.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { Btn } from '@bagelink/vue'
+import { watch, nextTick } from 'vue'
+
+interface Range {
+	start: number
+	end: number
+}
+
+interface PaginationProps {
+	totalItems: number
+	perPage?: number
+	totalPages?: number
+	variant?: 'default' | 'simple'
+	rtl?: boolean
+	maxVisiblePages?: number
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+	totalItems: 0,
+	perPage: 25,
+	totalPages: undefined,
+	variant: 'default',
+	rtl: false,
+	maxVisiblePages: 3
+})
+
+const page = defineModel<number>('page', { default: 1 })
+const range = defineModel<Range>('range')
+
+const paginationContainer = $ref<HTMLElement>()
+let indicatorPosition = $ref(0)
+let 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))
+})
+
+watch(
+	[() => page.value, () => props.perPage, () => 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)
+			range.value = { start, end }
+		}
+		// Update indicator position when page changes
+		nextTick(() => { updateIndicatorPosition() })
+	},
+	{ immediate: true }
+)
+
+// Also watch for RTL changes
+watch(() => props.rtl, updateIndicatorPosition)
+
+// Calculate which page numbers to show
+const visiblePages = $computed(() => {
+	const { maxVisiblePages } = props
+
+	// If we have few enough pages, show all of them
+	if (computedTotalPages <= maxVisiblePages * 2) {
+		return Array.from({ length: computedTotalPages }, (_, i) => i + 1)
+	}
+
+	// Always include current page and adjacent pages for navigation
+	const mustInclude = new Set<number>()
+
+	// Current page is always included
+	mustInclude.add(page.value)
+
+	// Ensure adjacent pages are included for navigation
+	if (page.value > 1) mustInclude.add(page.value - 1)
+	if (page.value < computedTotalPages) mustInclude.add(page.value + 1)
+
+	// Always include first and last pages
+	mustInclude.add(1)
+	mustInclude.add(computedTotalPages)
+
+	// Start with explicitly required pages
+	const pageArray = Array.from(mustInclude).sort((a, b) => a - b)
+
+	// Now fill remaining slots if there's room within maxVisiblePages
+	if (pageArray.length < maxVisiblePages + 2) {
+		// Try to add pages between existing ones
+		for (let i = 0; i < pageArray.length - 1; i++) {
+			const current = pageArray[i]
+			const next = pageArray[i + 1]
+
+			if (next - current > 1) {
+				// There's a gap - fill in additional pages
+				const pagesToAdd = Math.min(next - current - 1, maxVisiblePages + 2 - pageArray.length)
+
+				const newPages = Array.from(
+					{ length: pagesToAdd },
+					(_, idx) => current + idx + 1
+				)
+
+				pageArray.splice(i + 1, 0, ...newPages)
+				i += newPages.length // Skip past inserted items
+			}
+		}
+	}
+
+	return pageArray
+})
+
+function updateIndicatorPosition() {
+	if (!paginationContainer) return
+
+	const selectedButton = paginationContainer.querySelector('.selected')
+	if (!selectedButton) return
+
+	const containerRect = paginationContainer.getBoundingClientRect()
+	const buttonRect = selectedButton.getBoundingClientRect()
+
+	// Get position and dimensions
+	indicatorWidth = buttonRect.width
+
+	if (props.rtl) {
+		// RTL positioning - align to right edge
+		const rightOffset = containerRect.right - buttonRect.right
+		indicatorPosition = rightOffset
+	} else {
+		// LTR positioning - align to left edge
+		const leftOffset = buttonRect.left - containerRect.left
+		indicatorPosition = leftOffset
+	}
+}
+
+function handleClick(p: number) {
+	if (p < 1 || p > computedTotalPages) return
+	page.value = p
+}
+
+function next() {
+	handleClick(page.value + 1)
+}
+
+function prev() {
+	handleClick(page.value - 1)
+}
+
+// Convert zero-based index to one-based for display
+function displayIndex(index: number | undefined): string {
+	return index === undefined ? '-' : (index + 1).toString()
+}
+
+interface PageItem {
+	type: 'page' | 'ellipsis'
+	key: string | number
+	number?: number
+}
+
+// Enhanced rendering - creates UI with ellipses in the right positions
+const renderPageButtons = $computed(() => {
+	const items: PageItem[] = []
+
+	for (let i = 0; i < visiblePages.length; i++) {
+		const pageNum = visiblePages[i]
+
+		// Insert ellipsis before this page if needed
+		if (i > 0) {
+			const prevPage = visiblePages[i - 1]
+			if (pageNum - prevPage > 1) {
+				items.push({
+					type: 'ellipsis',
+					key: `ellipsis-${i}`
+				})
+			}
+		}
+
+		// Add the page button
+		items.push({
+			type: 'page',
+			number: pageNum,
+			key: pageNum
+		})
+	}
+
+	return items
+})
+</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`,
+				}"
+			/>
+			<!-- 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>
+
+		<!-- 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>
+</template>
+
+<style scoped>
+.indicator {
+	position: absolute;
+	height: 30px;
+	background-color: var(--bgl-primary);
+	transition: all 0.3s ease;
+	z-index: -1;
+}
+
+.selected {
+	color: white !important;
+}
+
+.pagination-info {
+	min-width: 60px;
+	text-align: center;
+	font-size: 14px;
+}
+
+.pagination-ellipsis {
+	display: flex;
+	align-items: center;
+	padding: 0 4px;
+}
+</style>

package/src/components/Pill.vue

@@ -100,7 +100,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">
-					<Btn class="bgl_pill-btn" round thin v-bind="btnEnd" />
+					<Btn class="bgl_pill-btn" round thin flat v-bind="btnEnd" />
 				</div>
 			</div>
 		</div>