@bagelink/vue 1.15.458 → 1.15.468

package/package.json

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

package/src/components/form/inputs/ArrayInput.vue

@@ -22,6 +22,8 @@ const props = defineProps<{
 	itemLabel?: string
 	collapsible?: boolean
 	simple?: boolean
+	/** Shows fixed item labels with drag handles, without editable row content. */
+	reorderOnly?: boolean
 	/** Factory for new rows. Prefer this over pushing `undefined` (which becomes `null` after JSON sync). */
 	createItem?: () => T
 } & BagelInputShellProps>()
@@ -49,7 +51,7 @@ const itemLabelPrefix = computed(() => {
 	return $t('arrayInput.item')
 })
 
-const IDENTIFIER_FIELDS = ['title', 'name', 'key', 'label', 'displayName', 'display_name', 'heading', 'caption', 'text']
+const IDENTIFIER_FIELDS = ['title', 'name', 'type', 'key', 'label', 'displayName', 'display_name', 'heading', 'caption', 'text']
 const IMAGE_FIELDS = ['image', 'thumbnail', 'avatar', 'photo', 'picture', 'profilePic', 'profile_pic', 'icon', 'logo']
 
 function getItemIdentifier(item: T): string | null {
@@ -170,16 +172,37 @@ function getItemRef(i: number) {
 		<p v-if="helptext" class="helptext">
 			{{ helptext }}
 		</p>
-		<template v-if="!collapsible">
-			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center" :class="{ 'simpleArray mb-025': isSimple, 'pb-1': !isSimple }">
-				<slot :item="getItemRef(i)" :index="i" />
-				<div v-if="allowDelete" class=" h-100p" :class="{ 'border-start ps-025 ms-075': !simple }">
+		<Draggable v-if="reorderOnly" :model-value="items" handle=".grab" :disabled="!allowReorder" class="grid gap-05 mb-05" @end="onDraggableEnd">
+			<template #default="{ index: i }">
+				<div class="grid gap-0 grid-array-line-reorder align-items-center pe-025 border radius-1 overflow-hidden">
 					<Btn
-						v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete"
-						@click="deleteItem(i)"
+						v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat xs icon="drag_indicator"
+						class="grab"
 					/>
+					<p class="ellipsis-1 txt12 line-height-1">
+						{{ getItemIdentifier(items[i]) ?? getItemLabel(i) }}
+					</p>
 				</div>
-			</div>
+			</template>
+		</Draggable>
+		<template v-else-if="!collapsible">
+			<Draggable :model-value="items" handle=".grab" :disabled="!allowReorder" class="grid gap-05 mb-05" @end="onDraggableEnd">
+				<template #default="{ index: i }">
+					<div class="array-input-row grid align-items-center" :class="{ 'array-input-row-reorder': allowReorder, 'simpleArray mb-025': isSimple, 'pb-1': !isSimple }">
+						<Btn
+							v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat thin icon="drag_indicator"
+							class="grab"
+						/>
+						<slot :item="getItemRef(i)" :index="i" />
+						<div v-if="allowDelete" class="h-100p" :class="{ 'border-start ps-025 ms-075': !simple }">
+							<Btn
+								v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete"
+								@click="deleteItem(i)"
+							/>
+						</div>
+					</div>
+				</template>
+			</Draggable>
 		</template>
 		<Draggable v-if="collapsible" :model-value="items" handle=".grab" :disabled="!allowReorder" class="grid gap-05 mb-05" @end="onDraggableEnd">
 			<template #default="{ index: i }">
@@ -228,6 +251,9 @@ function getItemRef(i: number) {
 .array-input-row {
 grid-template-columns: 1fr auto;
 }
+.array-input-row-reorder {
+grid-template-columns: auto 1fr auto;
+}
 
 .array-collapse-enter-active,
 .array-collapse-leave-active {
@@ -262,6 +288,10 @@ transform: scale(0.98);
 grid-template-columns: auto 1fr auto;
 background: var(--array-input-bg) !important;
 }
+.grid-array-line-reorder {
+grid-template-columns: auto 1fr;
+background: var(--array-input-bg) !important;
+}
 
 .grid-array-line button:hover {
 	filter: brightness(90%);

package/src/components/layout/AppSidebar.vue

@@ -152,7 +152,7 @@ const sidebarStyles = computed(() => {
 	<aside
 		id="bgl-app-sidebar"
 		class="app-sidebar" :class="{
-			'fixed start top bottom h-100vh z-99': isMobile,
+			'fixed start top bottom h-100vh m_h-100svh z-99': isMobile,
 			'h-100p': !isMobile,
 			'sidebar-mobile-open': isMobile && isOpen,
 			'sidebar-mobile-closed': isMobile && !isOpen,

package/src/form-flow/form-flow.ts

@@ -443,6 +443,7 @@ export const $ = {
 			min?: number
 			max?: number
 			simple?: boolean
+			reorderOnly?: boolean
 		}),
 		maybeConfig?: BaseFieldConfig & {
 			allowAdd?: boolean
@@ -452,6 +453,7 @@ export const $ = {
 			min?: number
 			max?: number
 			simple?: boolean
+			reorderOnly?: boolean
 		}
 	): FieldBuilder<any[]> {
 		// Label-first: $.array('Items', schema) or $.array('Items', schema, { min: 1 })