@bagelink/vue 1.15.209 → 1.15.211

package/package.json

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

package/src/components/dataTable/DataTable.vue

@@ -128,9 +128,14 @@ const computedItemHeight = computed(() => `${itemHeight.value}px`)
 
 watch(
 	() => loading.value,
-	(newLoadingVal, oldLoadingVal) => {
+	async (newLoadingVal, oldLoadingVal) => {
 		if (newLoadingVal === oldLoadingVal) { return }
-		if (!newLoadingVal) { registerLastItemObserver() }
+		if (!newLoadingVal) {
+			registerLastItemObserver()
+			scrollTo(0)
+			await nextTick()
+			scrollTo(0)
+		}
 	},
 	{ immediate: true }
 )
@@ -141,9 +146,14 @@ watch(
 )
 
 watch(
-	() => computedData.value,
-	(newData, oldData) => {
-		if (newData.length === oldData.length || props.onLastItemVisible !== undefined) { return }
+	() => computedData.value.length,
+	async (newLen, oldLen) => {
+		// Infinite-scroll appends: keep position. First load (0 → n) still resets.
+		const isAppend = props.onLastItemVisible !== undefined && (oldLen ?? 0) > 0
+		if (newLen === oldLen || isAppend) return
+
+		scrollTo(0)
+		await nextTick()
 		scrollTo(0)
 	}
 )
@@ -171,7 +181,7 @@ const headerFontSize = computed(() => {
 <template>
 	<div class="table-list-wrap h-100p" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
 		<Loading v-if="showLoading" class="h100p" />
-		<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
+		<div v-if="!isEmpty" v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
 			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
 					<th v-if="isSortable" class="col-drag" />
@@ -218,16 +228,16 @@ const headerFontSize = computed(() => {
 					<tr v-if="props.onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
 				</tbody>
 			</table>
-			<!-- Built-in empty state (overridable via the #empty slot) -->
-			<slot v-if="isEmpty" name="empty">
-				<EmptyState
-					:icon="props.emptyIcon ?? 'inbox'"
-					:title="props.emptyTitle ?? 'No results'"
-					:description="props.emptyDescription"
-					compact
-				/>
-			</slot>
 		</div>
+		<!-- Outside the virtualized wrapper so EmptyState doesn't inflate scroll height -->
+		<slot v-if="isEmpty" name="empty">
+			<EmptyState
+				:icon="props.emptyIcon ?? 'inbox'"
+				:title="props.emptyTitle ?? 'No results'"
+				:description="props.emptyDescription"
+				compact
+			/>
+		</slot>
 	</div>
 </template>
 
@@ -254,6 +264,9 @@ cursor: grab;
 
 .table-list-wrap {
 min-height: 150px;
+/* Prevent browser scroll anchoring from pushing content to the bottom
+   when rows mount and the virtual list height jumps. */
+overflow-anchor: none;
 }
 
 .selected {

package/src/composables/useSchemaField.ts

@@ -26,6 +26,16 @@ const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 
 const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
+/** Display components that take content via `value` (not `modelValue`). */
+const VALUE_PROP_NAMES = new Set(['BglBadge', 'Badge', 'BglPill', 'Pill'])
+
+function usesValueProp(Component: unknown): boolean {
+	if (!Component || typeof Component === 'string') return false
+	const name = (Component as { name?: string, __name?: string }).name
+		?? (Component as { __name?: string }).__name
+	return !!name && VALUE_PROP_NAMES.has(name)
+}
+
 export interface UseSchemaFieldOptions<T, SFP extends Path<T>> {
 	mode?: 'form' | 'preview' | 'table'
 	getFormData?: () => T
@@ -217,6 +227,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 				// Slot components don't need a value prop
 			} else if (isSrcValueComponent) {
 				props.src = transformedValue
+			} else if (usesValueProp(Component)) {
+				// Badge etc. read `value`, not modelValue — empty outline pills otherwise
+				props.value = transformedValue != null ? String(transformedValue) : transformedValue
 			} else {
 				props.modelValue = transformedValue
 			}