@bagelink/vue 0.0.821 → 0.0.823

package/dist/style.css

@@ -1814,6 +1814,30 @@ p {
   transform: translateX(-20px);
 }
 
+.skeleton-wrap[data-v-a06bec19] {
+	--skeleton-radius: 0.25rem;
+	--skeleton-bg: #f0f0f0;
+	--skeleton-margin: 1rem;
+	margin-bottom: var(--skeleton-margin);
+}
+.skeleton[data-v-a06bec19] {
+	animation: skeleton-a06bec19 2s infinite;
+	background-color: var(--skeleton-bg);
+	border-radius: var(--bg-card-radius);
+	margin-bottom: 0.25em;
+}
+@keyframes skeleton-a06bec19 {
+0% {
+		opacity: 0.5;
+}
+50% {
+		opacity: 1;
+}
+100% {
+		opacity: 0.5;
+}
+}
+
 .tab[data-v-0a54cdeb] {
   text-transform: capitalize;
 }
@@ -3211,22 +3235,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: transparent;
 }
 
-.table-list-wrap[data-v-692391a3] {
+.table-list-wrap[data-v-54f3c477] {
 	min-height: 150px;
 }
-.selected[data-v-692391a3] {
+.selected[data-v-54f3c477] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-692391a3]:hover {
+tbody tr.selected[data-v-54f3c477]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-692391a3] {
+.loading-table[data-v-54f3c477] {
 	position: relative;
 }
-.inset[data-v-692391a3] {
+.inset[data-v-54f3c477] {
 	inset: 0;
 }
-.loading-table-animation[data-v-692391a3] {
+.loading-table-animation[data-v-54f3c477] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -3234,9 +3258,9 @@ tbody tr.selected[data-v-692391a3]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-692391a3 1s linear infinite;
+	animation: loading-table-54f3c477 1s linear infinite;
 }
-@keyframes loading-table-692391a3 {
+@keyframes loading-table-54f3c477 {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -3244,52 +3268,52 @@ tbody tr.selected[data-v-692391a3]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-692391a3] {
+.list-arrows[data-v-54f3c477] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-692391a3] {
+.list-arrows .bgl_icon-font[data-v-54f3c477] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-692391a3] {
+.list-arrows.sorted[data-v-54f3c477] {
 	opacity: 1;
 }
-.col img[data-v-692391a3] {
+.col img[data-v-54f3c477] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-692391a3] {
+.list-arrows.sorted .desc[data-v-54f3c477] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-692391a3] {
+table[data-v-54f3c477] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-692391a3] {
+th[data-v-54f3c477] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--dd90c516);
+	height: var(--ced4aeb8);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-692391a3] {
+.embedded-field[data-v-54f3c477] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-692391a3] {
+.row[data-v-54f3c477] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-692391a3] {
+.row.first-row[data-v-54f3c477] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -3298,7 +3322,7 @@ th[data-v-692391a3] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-692391a3]::after {
+.row.first-row[data-v-54f3c477]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3306,30 +3330,30 @@ th[data-v-692391a3] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-692391a3] {
+.first-row .col[data-v-54f3c477] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-692391a3] {
+.col[data-v-54f3c477] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-692391a3]:has(.bagel-input) {
+.col[data-v-54f3c477]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-692391a3] {
+.col > div[data-v-54f3c477] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-692391a3] {
+.max-col-width[data-v-54f3c477] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-692391a3] {
+.col.check .bgl_icon-font[data-v-54f3c477] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -3340,35 +3364,35 @@ th[data-v-692391a3] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-692391a3] {
+.rows[data-v-54f3c477] {
 	font-size: 0.88em;
 }
-.table-list[data-v-692391a3] {
+.table-list[data-v-54f3c477] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-692391a3] {
+.BagelTable .table-list[data-v-54f3c477] {
 	overflow: unset;
 }
-.row-item[data-v-692391a3] {
-	height: var(--dd90c516);
+.row-item[data-v-54f3c477] {
+	height: var(--ced4aeb8);
 	transition: all 200ms ease;
 }
-.row-item[data-v-692391a3]:hover {
+.row-item[data-v-54f3c477]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-692391a3] {
+.row-item input[type='checkbox'][data-v-54f3c477] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-692391a3] {
+.infinite-wrapper[data-v-54f3c477] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-692391a3] {
+input[type='checkbox'][data-v-54f3c477] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -3380,7 +3404,7 @@ input[type='checkbox'][data-v-692391a3] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-692391a3]::before {
+input[type='checkbox'][data-v-54f3c477]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -3393,18 +3417,18 @@ input[type='checkbox'][data-v-692391a3]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-692391a3]:hover::before {
+input[type='checkbox'][data-v-54f3c477]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-692391a3] {
+[lang='he'] [dir='ltr'][data-v-54f3c477] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-692391a3] {
+th input[type='checkbox'][data-v-54f3c477] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-692391a3]::after {
+th[data-v-54f3c477]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3412,24 +3436,24 @@ th[data-v-692391a3]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-692391a3] {
+tr[data-v-54f3c477] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-692391a3],
-th[data-v-692391a3] {
+td[data-v-54f3c477],
+th[data-v-54f3c477] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-692391a3] {
+tbody tr[data-v-54f3c477] {
 	font-size: 0.88em;
-	height: var(--dd90c516);
+	height: var(--ced4aeb8);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-692391a3]:hover {
+tbody tr[data-v-54f3c477]:hover {
 	background: var(--bgl-gray-light);
 }
 

package/package.json

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

package/src/components/TableSchema.vue

@@ -8,7 +8,7 @@ import {
 	useBglSchema,
 } from '@bagelink/vue'
 import { useVirtualList } from '@vueuse/core'
-import { computed, useSlots, watch } from 'vue'
+import { computed, useSlots, watch, onMounted, onUnmounted } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
@@ -17,6 +17,7 @@ const {
 	data,
 	schema,
 	showFields,
+	onLastItemVisible,
 	useServerSort = false,
 	selectable = false
 } = defineProps<{
@@ -25,6 +26,7 @@ const {
 	showFields?: string[]
 	useServerSort?: boolean
 	selectable?: boolean
+	onLastItemVisible?: () => void
 }>()
 
 const emit = defineEmits<{
@@ -141,7 +143,7 @@ const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 watch(
 	() => computedData.value.length,
 	(newLength, oldLength) => {
-		if (newLength === oldLength) return
+		if (newLength === oldLength || onLastItemVisible !== undefined) return
 		scrollTo(0)
 	}
 )
@@ -183,6 +185,18 @@ function toggleSelectAll(event: Event) {
 	selectedItems.value = value ? computedData.value.map((d: any) => d.id) : []
 }
 // #endregion ? SELECT COLUMN
+const lastItem = $ref<HTMLTableRowElement | null>()
+let observer: IntersectionObserver | undefined
+
+onMounted(() => {
+	if (onLastItemVisible === undefined) return
+	observer = new IntersectionObserver(([entry]) => {
+		if (entry.isIntersecting && computedData.value.length) onLastItemVisible()
+	})
+	if (lastItem) observer.observe(lastItem)
+})
+
+onUnmounted(() => { observer?.disconnect() })
 </script>
 
 <template>
@@ -266,6 +280,7 @@ function toggleSelectAll(event: Event) {
 							</div>
 						</td>
 					</tr>
+					<tr v-if="onLastItemVisible !== undefined" ref="lastItem" />
 				</tbody>
 			</table>
 		</div>

package/src/components/layout/Skeleton.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+const {
+	count = 1,
+	height = '50px',
+	width = 'auto',
+	borderRadius = 'var(--skeleton-radius)',
+} = defineProps<{
+	count?: number
+	height?: string
+	width?: string
+	borderRadius?: string
+}>()
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
+<template>
+	<template v-for="i in count" :key="i">
+		<div v-if="slots.default" class="skeleton-wrap">
+			<slot />
+		</div>
+		<div v-else class="skeleton" :style="{ height, width, borderRadius }" />
+	</template>
+</template>
+
+<style scoped>
+.skeleton-wrap {
+	--skeleton-radius: 0.25rem;
+	--skeleton-bg: #f0f0f0;
+	--skeleton-margin: 1rem;
+	margin-bottom: var(--skeleton-margin);
+}
+.skeleton {
+	animation: skeleton 2s infinite;
+	background-color: var(--skeleton-bg);
+	border-radius: var(--bg-card-radius);
+	margin-bottom: 0.25em;
+}
+
+@keyframes skeleton {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+</style>

package/src/components/layout/index.ts

@@ -1,6 +1,7 @@
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Layout } from './Layout.vue'
 export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as Skeleton } from './Skeleton.vue'
 export { default as TabbedLayout } from './TabbedLayout.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TabsBody } from './TabsBody.vue'