@bagelink/vue 1.15.192 → 1.15.196

package/package.json

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

package/src/components/FilterQuery.vue

@@ -6,7 +6,7 @@ export type { FilterField, QueryOption, OptionsSource }
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { ComparisonOperator, LogicalOperator, QueryConditions } from '../utils/queryFilter'
 import { parseQuery } from '../utils/queryFilter'
-import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n, useDebounceFn } from '@bagelink/vue'
+import { Btn, Card, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n, useDebounceFn } from '@bagelink/vue'
 import { computed, getCurrentInstance, ref } from 'vue'
 
 interface UICondition {
@@ -373,7 +373,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 		flat placement="bottom-end" icon="filter_alt"
 		:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter" thin
 	>
-		<div class="p-1 m_p-05">
+		<Card class="p-05">
 			<div class="p-025 bg-bg radius-1 mb-05 m_max-h-300px m_overflow m_border">
 				<!-- Empty state -->
 				<div v-if="conditions.length === 0" class="opacity-3 flex gap-05 p-025 min-w-450px m_min-0">
@@ -507,7 +507,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 					/>
 				</div>
 			</div>
-		</div>
+		</Card>
 	</Dropdown>
 </template>
 

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

@@ -48,7 +48,7 @@ const props = withDefaults(
 		inline?: boolean
 	} & BagelInputShellProps>(),
 	{
-		align: 'center'
+		align: 'center',
 	}
 )
 
@@ -187,7 +187,7 @@ function handleChange() {
 					'hideRadio': hideRadio,
 }" @focus="handleFocus" @blur="handleBlur" @change="handleChange">
 				<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
-					:class="{ 'txt-center justify-content-center mx-auto': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
+					:class="{ 'txt-center justify-content-center mx-auto': textAlign === 'center', 'radio-option-content--centered-image': textAlign === 'center' && opt.imgSrc, 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
 					:style="{ color: textColor }">
 					<img v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="40" :src="opt.imgSrc" :alt="opt.imgAlt || opt.label || ''">
 					<Icon v-else-if="opt.icon" :icon="opt.icon" :size="1" />
@@ -250,6 +250,17 @@ margin-bottom: 0 !important;
 width: auto;
 }
 
+.radio-option-content--centered-image {
+flex-direction: column;
+flex-wrap: nowrap;
+align-items: center;
+width: 100%;
+}
+
+.radio-group-wrap--inline > label > .radio-option-content--centered-image {
+width: 100%;
+}
+
 .is-option-disabled {
 opacity: 0.5;
 cursor: not-allowed;

package/src/components/layout/AppSidebar.vue

@@ -241,7 +241,6 @@ outline: 1px solid var(--bgl-border-color);
 }
 .app-sidebar{
 	--bgl-scrollbar-size: .5rem;
-	--bgl-btn-height: 44px
 }
 
 .sidebar-logo-dark {
@@ -352,6 +351,7 @@ transition:
 .sidebar-footer {
 width: 100%;
 margin-inline: auto;
+padding-block: 0.25rem;
 }
 
 .app-sidebar ::-webkit-scrollbar-track {

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

@@ -781,6 +781,8 @@ interface JSONSchemaProperty {
 		allowDelete?: boolean
 		component?: string
 		componentProps?: Record<string, any>
+		radioAlign?: 'start' | 'center' | 'end'
+		radioTextAlign?: 'left' | 'center' | 'right'
 	}
 	// Flat `x-*` extensions produced by the FormBuilder designer
 	// (schema-fields.ts `fieldsToSchema`). fromJSONSchema honors these too so a
@@ -790,6 +792,8 @@ interface JSONSchemaProperty {
 	'x-placeholder'?: string
 	'x-select-multiselect'?: boolean
 	'x-radio-inline'?: boolean
+	'x-radio-align'?: 'start' | 'center' | 'end'
+	'x-radio-text-align'?: 'left' | 'center' | 'right'
 }
 
 interface JSONSchemaObject {
@@ -959,6 +963,8 @@ function createFieldFromProperty(
 	// designer renders with the same options in the player. Only the props each
 	// input actually reads are forwarded.
 	applyDesignerConfig(config, resolvedProp)
+	if (xUi.radioAlign !== undefined) config.align = xUi.radioAlign
+	if (xUi.radioTextAlign !== undefined) config.textAlign = xUi.radioTextAlign
 	if (xUi.disabled) config.disabled = xUi.disabled
 	if (xUi.readonly) config.readonly = xUi.readonly
 	if (xUi.autoheight) config.autoheight = xUi.autoheight
@@ -1080,6 +1086,7 @@ function applyDesignerConfig(config: Record<string, any>, prop: JSONSchemaProper
 	if (p['x-radio-thin']) config.thin = true
 	if (p['x-radio-hide-radio']) config.hideRadio = true
 	set('align', 'x-radio-align')
+	set('textAlign', 'x-radio-text-align')
 	// Select
 	if (p['x-select-multiselect']) config.multiple = true
 	// Textarea
@@ -1167,9 +1174,11 @@ export {
 	DEFAULT_COL_SPAN,
 	DEFAULT_ROW_SPAN,
 	colSpanToClass,
+	colStartToClass,
 	mColSpanToClass,
 	rowSpanToClass,
 	classToColSpan,
+	classToColStart,
 	classToMColSpan,
 	classToRowSpan,
 	classToGridSpans,

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

@@ -6,6 +6,7 @@
  * classes defined in styles/inputs.css + styles/layout.css:
  *
  *   Desktop column span:  col-{1..12}/12   (e.g. col-6/12 = span 6)
+ *   Desktop column start: start-col-{1..12}
  *   Mobile column span:   m_col-{1..12}/12
  *   Row span:             span-row-{1..12} (e.g. span-row-2 = span 2 rows)
  *
@@ -20,6 +21,7 @@ export const DEFAULT_COL_SPAN = 12
 export const DEFAULT_ROW_SPAN = 1
 
 const COL_RE = /^col-(\d{1,2})\/12$/
+const COL_START_RE = /^start-col-(\d{1,2})$/
 const M_COL_RE = /^m_col-(\d{1,2})\/12$/
 const ROW_RE = /^(?:grid-)?span-row-(\d{1,2})$/
 
@@ -53,6 +55,11 @@ export function colSpanToClass(span: number): string {
 	return `col-${clampSpan(span)}/12`
 }
 
+/** Desktop starting column -> canonical class (e.g. 3 -> "start-col-3"). */
+export function colStartToClass(start: number): string {
+	return `start-col-${clampSpan(start)}`
+}
+
 /** Mobile column span -> canonical class (e.g. 6 -> "m_col-6/12"). */
 export function mColSpanToClass(span: number): string {
 	return `m_col-${clampSpan(span)}/12`
@@ -77,6 +84,16 @@ export function classToColSpan(cls: string | undefined): number | undefined {
 	return undefined
 }
 
+/** Parse the first desktop starting column found in a class string, if any. */
+export function classToColStart(cls: string | undefined): number | undefined {
+	if (!cls) return undefined
+	for (const token of cls.split(/\s+/)) {
+		const m = token.match(COL_START_RE)
+		if (m) return clampSpan(Number(m[1]))
+	}
+	return undefined
+}
+
 /** Parse the first mobile column span found in a class string, if any. */
 export function classToMColSpan(cls: string | undefined): number | undefined {
 	if (!cls) return undefined
@@ -108,6 +125,7 @@ export function stripGridClasses(cls: string | undefined): string {
 		.filter(Boolean)
 		.filter(t =>
 			!COL_RE.test(t)
+			&& !COL_START_RE.test(t)
 			&& !M_COL_RE.test(t)
 			&& !ROW_RE.test(t)
 			&& !(t in FRACTION_TO_SPAN)
@@ -118,6 +136,7 @@ export function stripGridClasses(cls: string | undefined): string {
 
 export interface GridSpans {
 	colSpan?: number
+	colStart?: number
 	rowSpan?: number
 	mColSpan?: number
 }
@@ -133,6 +152,9 @@ export function applyGridClasses(cls: string | undefined, spans: GridSpans): str
 	if (spans.colSpan !== undefined && spans.colSpan !== DEFAULT_COL_SPAN) {
 		parts.push(colSpanToClass(spans.colSpan))
 	}
+	if (spans.colStart !== undefined) {
+		parts.push(colStartToClass(spans.colStart))
+	}
 	if (spans.rowSpan !== undefined && spans.rowSpan !== DEFAULT_ROW_SPAN) {
 		parts.push(rowSpanToClass(spans.rowSpan))
 	}
@@ -146,6 +168,7 @@ export function applyGridClasses(cls: string | undefined, spans: GridSpans): str
 export function classToGridSpans(cls: string | undefined): GridSpans {
 	return {
 		colSpan: classToColSpan(cls),
+		colStart: classToColStart(cls),
 		rowSpan: classToRowSpan(cls),
 		mColSpan: classToMColSpan(cls),
 	}

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

@@ -9,6 +9,7 @@ import { computed, type Ref } from 'vue'
 import {
 	applyGridClasses,
 	classToColSpan,
+	classToColStart,
 	classToMColSpan,
 	classToRowSpan,
 	stripGridClasses,
@@ -50,6 +51,8 @@ export interface FormField {
 	required?: boolean
 	/** Desktop column span (1-12, default 12). Persisted as `col-N/12`. */
 	colSpan?: number
+	/** Desktop starting column (1-12). Persisted as `start-col-N`. */
+	colStart?: number
 	/** Row span (1-12, default 1). Persisted as `span-row-N`. */
 	rowSpan?: number
 	/** Mobile column span (1-12, default 12). Persisted as `m_col-N/12`. */
@@ -226,6 +229,7 @@ export function schemaToFields(schema: JSONSchemaObject | undefined): FormField[
 			description: prop.description,
 			required: requiredSet.has(key) || undefined,
 			colSpan: classToColSpan(uiClass) ?? 12,
+			colStart: classToColStart(uiClass),
 			rowSpan: classToRowSpan(uiClass) ?? defaultRowSpan(type),
 			mColSpan: classToMColSpan(uiClass) ?? 12,
 			class: stripGridClasses(uiClass) || undefined,
@@ -255,7 +259,7 @@ export function schemaToFields(schema: JSONSchemaObject | undefined): FormField[
 			radioAlign: prop['x-ui']?.radioAlign ?? prop['x-radio-align'],
 			radioInline: prop['x-radio-inline'],
 			radioSize: prop['x-radio-size'],
-			radioTextAlign: prop['x-ui']?.radioTextAlign ?? prop['x-radio-text-align'],
+			radioTextAlign: prop['x-ui']?.radioTextAlign ?? prop['x-radio-text-align'] ?? 'center',
 			textIcon: prop['x-text-icon'],
 			textIconStart: prop['x-text-icon-start'],
 			validation: Object.keys(validation).length > 0 ? validation : undefined,
@@ -359,6 +363,7 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 		// with any user-authored classes. Row default is field-type dependent.
 		const layoutClass = applyGridClasses(field.class, {
 			colSpan: field.colSpan,
+			colStart: field.colStart,
 			rowSpan: field.rowSpan === defaultRowSpan(field.type) ? undefined : field.rowSpan,
 			mColSpan: field.mColSpan,
 		})

package/src/styles/inputs.css

@@ -484,60 +484,85 @@ select {
 }
 
 .col-1\/12 {
-    grid-column: span 1 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 1 !important;
 }
 
 .col-1\/6,
 .col-2\/12 {
-    grid-column: span 2 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 2 !important;
 }
 
 .col-1\/4,
 .col-3\/12 {
-    grid-column: span 3 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 3 !important;
 }
 
 .col-1\/3,
 .col-4\/12 {
-    grid-column: span 4 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 4 !important;
 }
 
 .col-5\/12 {
-    grid-column: span 5 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 5 !important;
 }
 
 .col-1\/2,
 .col-6\/12 {
-    grid-column: span 6 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 6 !important;
 }
 
 .col-7\/12 {
-    grid-column: span 7 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 7 !important;
 }
 
 .col-2\/3,
 .col-8\/12 {
-    grid-column: span 8 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 8 !important;
 }
 
 .col-3\/4,
 .col-9\/12 {
-    grid-column: span 9 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 9 !important;
 }
 
 .col-5\/6,
 .col-10\/12 {
-    grid-column: span 10 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 10 !important;
 }
 
 .col-11\/12 {
-    grid-column: span 11 !important;
+    grid-column-start: auto !important;
+    grid-column-end: span 11 !important;
 }
 
 .col-full,
 .col-12\/12 {
-    grid-column: span 12 !important;
-}
+    grid-column-start: auto !important;
+    grid-column-end: span 12 !important;
+}
+
+.start-col-1 { grid-column-start: 1 !important; }
+.start-col-2 { grid-column-start: 2 !important; }
+.start-col-3 { grid-column-start: 3 !important; }
+.start-col-4 { grid-column-start: 4 !important; }
+.start-col-5 { grid-column-start: 5 !important; }
+.start-col-6 { grid-column-start: 6 !important; }
+.start-col-7 { grid-column-start: 7 !important; }
+.start-col-8 { grid-column-start: 8 !important; }
+.start-col-9 { grid-column-start: 9 !important; }
+.start-col-10 { grid-column-start: 10 !important; }
+.start-col-11 { grid-column-start: 11 !important; }
+.start-col-12 { grid-column-start: 12 !important; }
 
 .pixel {
     width: 0 !important;
@@ -587,6 +612,21 @@ select {
         grid-column: 1 / -1 !important;
     }
 
+    .start-col-1,
+    .start-col-2,
+    .start-col-3,
+    .start-col-4,
+    .start-col-5,
+    .start-col-6,
+    .start-col-7,
+    .start-col-8,
+    .start-col-9,
+    .start-col-10,
+    .start-col-11,
+    .start-col-12 {
+        grid-column-start: 1 !important;
+    }
+
     .m_col-1\/12 {
         grid-column: span 1 !important;
     }